1. Modern JavaScript Develop And Design Instructor’s Notes Chapter 2- JavaScript in Action Modern JavaScript Design And Develop Copyright © 2012 by Larry Ullman

2. Objectives Explain what a DOCTYPE is and why it matters to Web pages Identify the two browser operating modes Write the HTML5 DOCTYPE Create an HTML5 template Use the new HTML5 form elements and attributes

3. More Objectives Embed JavaScript in HTML Understand how to properly write file paths Define and demonstrate key JavaScript development approaches Learn the basics of event handling Retrieve a reference to a page element

4. Even More Objectives Recognize when the browser window is ready for dynamic behavior Define a simple user function. Perform basic validation of an HTML form

5. Document Type Declaration Should be the first line of an HTML page Tells the browser what kind of HTML to expect, and therefore what kind of features to support Impacts how the page looks and behaves Provides instruction to validators

6. Older DOCTYPEs HTML (2.0, 3.2, 4.01) XHTML (1.0, 1.1) Strict, Transitional, Frameset

7. Browser Modes Browser modes are dictated by the DOCTYPE Two modes: Standards and Quirks Invalid DOCTYPEs and improper HTML can trigger Quirks mode

8. HTML5 DOCTYPE Short, easy to type Supported by all major browsers Automatically triggers Standards mode Allows you to begin using HTML5 features

9. HTML5 The next logical HTML standard Not yet standardized Lots of new useful features, especially in forms Many features are usable today

10. HTML5 Template HTML5 Template

11. New HTML5 Input Types email number range search tel url

12. New HTML5 Form Attributes autofocus placeholder required maxlength on textareas novalidate (on entire form)

13. Adding JavaScript to HTML // Actual JavaScript code goes here.

14. Understanding Paths Absolute Start at a fixed location, such as the Web root directory Normally begin with http:// or just /. The same absolute path is correct regardless of where the including file is. Relative Start at the current location (i.e., the current file’s location). Begin with a file name, a folder name, or a period. A relative path is only correct for files with the same relative positions.

15. Paths Example Including script.js from page.html /js/script.js http://www.example.com/j s/script.js js/script.js./js/script.js

16. Development Approaches Graceful degradation Progressive enhancement Unobtrusive JavaScript

17. Graceful Degradation HTML5 Template You must have JavaScript enabled!

18. Progressive Enhancement

19. Object Detection if (/* some object is defined */) { // Use that object! }

20. Unobtrusive JavaScript Easier to read and maintain Can be progressively enhanced Does not require JavaScript to be enabled

21. Obtrusive JavaScript A Link

22. A Basic Example Start with the HTML Establish baseline functionality Add a JavaScript layer, unobtrusively Add enhanced functionality, when supported

23. An HTML Form Login Email Address Password

24. Baseline Functionality By default, the form gets submitted to a server-side script. That functionality works on any device that can load an HTML form.

25. The JavaScript Layer Hijack the form submission. Validate the form data. If valid, allow the submission to go through to the server. If invalid, display errors.

26. Handling Events Event handler = call this function when this event occurs on this element. In JavaScript code: element.onevent = function window.onload = init; loginForm.onsubmit = validateForm;

27. Referencing Elements var email = document.getElementById('email'); var password = document.getElementById('password'); var loginForm = document.getElementById('loginForm');

28. Defining a Function function functionName() { // Function code. } function init() { var loginForm = document.getElementById('loginForm'); loginForm.onsubmit = validateForm; } // End of init() function.

29. Strict Mode function init() { ‘use strict’; var loginForm = document.getElementById('loginForm'); loginForm.onsubmit = validateForm; } // End of init() function.

30. Simple Validation if ( (email.value.length > 0) && (password.value.length > 0) ) { return true; } else { alert('Please complete the form!'); return false; }