home—lects—exams—hws
D2L—breeze (snow day)

lect26-js-events
calling javascript
the mechanics of invoking from the browser

We saw an example of javascript that was run by the browser; we defined the javascript functions in the head (or, in a separate file which was included via a <script src=… > tag in the head). Then, in various tags we had onclick attributes, whose value was a bit of javascript code, which the browser then evaluated. (e.g. Whatever you do don't click <span onclick="explode();">here</span>.).

Other events: onchange, onclick, onfocus, onblur. See w3.org’s definition.
The straightforward way: <form onsubmit='return myValidateFunc();'>, where myValidateFunc returns a boolean; a false-value will not cause the form to be submitted.
(If you leave this attribute off a form tag, then it's like saying onsubmit='return true;'.
When you use the above, it causes the browser to call a javascript method for forms,“submit()”: this is what truly causes the submission to occur.
Note that you certainly can call someForm.submit() yourself; that's how you can get other buttons to cause a submit (e.g. hitting return on a password field).
A common misunderstanding: “if I call someForm.submit() myself, then the browser will first look at the form's onSubmit attribute and run that”. This is false! These two are layered the other way around: the onsubmit event causes the underlying submit method to be called, not vice-versa.
Be aware that the tenets of en.wikipedia.org/wiki/Unobtrusive_JavaScript suggest not having the event-handlers in the HTML directly (since that's presentation detail, not content). Instead of <someTag id="foo" onclick="someFunc('whee');">Real Data</someTag>, you can instead just have HTML <someTag id="foo">Real Data</someTag>, and then in the javascript: document.getElementById('foo').onclick = function() { someFunc('whee'); }. For this course, you do not need to do this (but you are welcome to).

Here is a nice interface: The gui clearly indicates stuff people want to know as they fill it. What happens when a user clicks on one of the text inputs? What happens to the text-color (class) being used? What javascript would make this happen?

N.B. If you want to change a node's “class” dynamically, assign to its attribute “className”.¹

Also, if a user clicks on an input, but then immediately click away — what do you want to happen? What about the “sentinel problem” — is there any display-name that we are dis-allowing? Should we? How could we avoid confusing the default value with a user who happens to really type in that sentinel value?

A nice, dynamic javascript feature: You can simply add new attributes to an object (in our case, a DOM node), simply by assigning to them! So:

        displayNameNode = document.getElementById('displayName');
        displayNameNode.userReallyTypedIt = false;

        // onchange of that field:
        if (displayNameNode.value == '') {
          displayNameNode.value = 'displayed on leaderboards';
          displayNameNode.className = 'hint';
          displayNameNode.userReallyTypedIt = false;
          }
        else {
          displayNameNode.className = '';
          displayNameNode.userReallyTypedIt = true;
          // Note that the value *can* be 'displayed on leaderboards', if the user really typed it!
          }

Recall: lect-js-bingo.html is another example of adding our own properties (fields) to a node of the DOM.

How to add error messages dynamically?

For example, suppose you have an a field named "age", which should be between at least 21, but not 40 or more ². We've already seen that we want to validate this both by the input tag's onchange, as well as by the form tag's onsubmit. So we definitely want to avoid the repeated code.

      function validateAge() {
        var ageNode = document.getElementById('age');
        var age = ageNode.value;
        var isValid = (21 <= age && age < 40);

        var ageErrMsgNode = document.getElementById('ageErrMsg');
        ageErrMsgNode.innerHTML = 
          (isValid ? ""
                   : "Must be between 21 (inclusive) and 40 (non-inclusive)");
                     // might be nice to include the offending value in the error msg?
        return isValid;
        }

Things to consider:

What if in the HTML, we forgot to have an (initially empty) paragraph with id="minLevelErrorMsg"? What javascript error would ensue? How would the user see that error message? How can we improve our code?
Checking the numeric range of an input is a pretty danged common task. Let's make this a general function validateInRange, that we'll keep in a file of utility javascript functions, utils.js! What arguments need to be passed in to the code?
Right now, the numbers 21 and 40 are repeated several times, including in the original HTML's additional-info for the user. The numbers should be defined just once, probably in a php file (site-constants.php) that is used to generate this file's HTML and it's javascript.

Improved version: Have a validation-function “validateAgeErrMsg” which just returns the error-message-string (perhaps the empty-string, if no error); have a separate function “insertErrMsg” that takes a node and a message, and splices that message-text into the DOM for that node, with a style that indicates an error message ³ (perhaps small but angry red font).

You can also see w3.org’s definition of the insertAdjacentHTML method.

¹ Yes, this anomoly seems weird to me too. But apparently, when the DOM is constructed from the HTML string, the HTML attribute class turns into the DOM attribute className, unlike every(?) other attribute. ↩

² That is, the half-open range [21,40) — half-open ranges are the right way to deal with integer ranges. ↩

³ Or even better: a “insertMsg” which includes a boolean -- should the message be inserted with a style of “error-occurred” or a style of “all-okay” (which might render in small happy green font). ↩

home—lects—exams—hws
D2L—breeze (snow day)

©2015, Ian Barland, Radford University
Last modified 2015.Mar.25 (Wed) Please mail any suggestions
(incl. typos, broken links)
to ibarlandradford.edu

lect26-js-events calling javascriptthe mechanics of invoking from the browser

How to add error messages dynamically?

lect26-js-events
calling javascript
the mechanics of invoking from the browser