Chapter 19: Adding JavaScript HTML and CSS 8th Edition Chapter 19: Adding JavaScript

Objectives Work with scripts. Use JavaScript libraries. Load an external script. Minify a script. Add an embedded script. Handle JavaScript events.

Adding JavaScript JavaScript defines special behaviors for a webpage. JavaScript programs can: Show and hide content. Write programs that load data and dynamically update page. Build carousels and slideshows like those on news sites. Drive custom HTML5 audio and video element controls. Create games that use HTML5's canvas element. Write full-blown web applications that leverage features in HTML5 and related technologies.

JavaScript Libraries JavaScript libraries add simple interactivity and sophisticated behavior to pages. Help pages behave consistently across browsers. jQuery enjoys the most widespread use among JavaScript libraries. Beginners find it easy to learn, it has good online documentation, and it has a large community behind it.

Loading an External Script Two primary kinds of scripts: External scripts load from an external file. Embedded scripts are embedded in page. Better to load scripts from an external file than to embed them in your HTML. A single JavaScript file can be loaded by each page that needs it. Script element is used to both load an external script or embed a script.

To Load an External Script Type <script src="script.js"></script>. Where script.js is the location on the server and the file name of the external script. Place each script element directly before the </body> end tag whenever possible, instead of in the document's head element. Tips To keep your files organized, it’s common to place your JavaScript files in a sub-folder (js and scripts are popular names); see “Organizing Files” in Chapter 2. Your src attribute values would need to reflect this, just like any URL that points to a resource. For instance, if the JavaScript file referenced were in a folder named js that is itself in a folder named assets, you could type <script src="assets/js/behavior.js"></script>. (That’s just one example; there are other ways to represent the URL. See “URLs” in Chapter 1.) A sample piece of JavaScript is shown. Because JavaScript is just text, you can write it in the same editor you use to create your HTML and CSS. If this example were saved in a file named behavior.js, it would load into the pages shown. Your page may load multiple JavaScript files and contain multiple embedded scripts. By default, browsers will load scripts (when necessary) and execute scripts in the order in which they appear in your HTML. See the “Scripting and Performance Best Practices” sidebar to learn why you should avoid multiple scripts when possible and how to minify them. You can specify any valid file names you’d like for your external scripts as long as they have the .js extension. It’s customary to give minified scripts a .min.js extension so you can distinguish easily between the normal files and the condensed ones. Keep both files on hand—update your scripts in the normal file (because it’s easier for you to read), but use the minified version on your site (because it’s faster for the browser). And don’t forget to generate a new minified file when you update your script; otherwise, visitors will get the old version. If you create a minified file, be sure to change the reference to your script in your HTML. For example, <script src="behavior.min.js"></script>. Otherwise, your page will continue to load the normal file and your visitors won’t reap the benefits of the smaller file. You can change the src back to the normal file name while you’re working on changes to your script. Browsers that don’t understand JavaScript (these are admittedly rare) or that have it disabled by the user will ignore your JavaScript file. So be sure that your page doesn’t rely on JavaScript to provide users access to its content and basic experience. (Web applications that rely heavily on JavaScript are often an exception.) Technically, there is a third way to add JavaScript to a page: inline scripts. An inline script is a small bit of JavaScript assigned to certain element attributes directly in your HTML. I hesitate to mention them except to point out that you should avoid using them, just as you would avoid inline style sheets. Just as inline style sheets mix your HTML and CSS, inline scripts inextricably intertwine your HTML and JavaScript, rather than keeping them separate per best practices.

Scripting and Performance Best Practices Browser handles scripts by downloading (for external scripts), parsing, and executing scripts in order they appear in HTML. Blocking behavior is where the browser neither downloads nor renders any content appearing after the script element. To make JavaScript non-blocking, put all script elements at end of HTML, right before </body> end tag.

Minify Your Script Minify is a quick way to speed up script loading by combining all JavaScript into single file (or into as few as possible) and minify the code. Minified code doesn't have line breaks, comments, or extra whitespace (among other possible differences from un-minified code). Tools to minify scripts: Google Closure Compiler UglifyJS YUI Compressor

Adding an Embedded Script Embedded script is script that exists in the HTML doc, much like an embedded style sheet. Contained in a script element. Lacks a src attribute. Embedding script is not preferred, but sometimes necessary. Embed script directly before </body> end tag whenever possible. Possible, but less desirable to embed script in head.

To Add an Embedded Script In HTML document, type <script>. Type the content of the script. Type </script>. Tip Each script element is processed in the order in which it appears in the HTML, whether it’s an embedded script or an external one (see “Loading an External Script”). Even though the script element requires an end tag (</script>), you cannot embed code between it and the start tag when a src attribute is present (see “Loading an External Script”). In other words, <script src="your-functions.js">Some other functions in here</script> is invalid. Any given script element may either load an external script with src, or embed a script and not have a src.

JavaScript Events JavaScript events are specific, predefined events triggered by visitor or browser. Partial list of JavaScript events: onblur: Visitor leaves element that was previously in focus. onchange: Visitor modifies value or contents of element. onclick: Visitor clicks specified area or hits Return or Enter key while focused on it (like on a link). ondblclick: Visitor double-clicks specified area. onfocus: Visitor selects, clicks, or tabs to specified element. onkeydown: Visitor presses down on a key while in specified element.

Handling JavaScript Events Partial list of JavaScript events: onkeypress: Visitor presses down and lets go of a key while in specified element. onkeyup: Visitor lets go of key after typing in specified element. onload: Browser finishes loading page, including all external files (images, style sheets, JavaScript, and so on). onmousedown: Visitor presses mouse button down over specified element. onmousemove: Visitor moves mouse cursor. onmouseout: Visitor moves mouse away from specified element after having been over it.

Handling JavaScript Events Partial list of JavaScript events: onmouseover: Visitor points mouse at element. onmouseup: Visitor lets mouse button go after having clicked the element (the opposite of onmousedown). onreset: Visitor clicks form's reset button or presses Return or Enter key while focused on the button. onselect: Visitor selects one or more characters or words in the element. onsubmit: Visitor clicks form's submit button or presses Return or Enter key while focused on the button.