JavaScript Client-Side Scripting Chapter 6

What is JavaScript

• JavaScript runs inside the browser and is dynamically typed.
• It is object-oriented, where almost everything is an object, using prototype-based rather than class-based objects.
• JavaScript and Java are vastly different languages, despite the name similarity, as Java is a compiled, object-oriented language that runs on any platform with a JVM, while JavaScript runs directly in the browser without needing a JVM.
• Client-side scripting with JavaScript allows processing to be offloaded from the server to client machines.
• The browser can respond more rapidly to user events and JavaScript can interact with downloaded HTML, creating a more desktop-like user experience.
• Disadvantages include that client-side scripting relies on JavaScript as there's no guarentee the user will have Javascript enabled, and debugging and maintenance can be complicated.
• Client-side scripting includes browser plug-ins like Flash and Java Applets.
• JavaScript was introduced by Netscape in 1996 and is an implementation of ECMAScript.
• In the mid 2000s, JavaScript became more important with AJAX (Asynchronous JavaScript and XML).
• AJAX's most important feature is asynchronous data requests.

JavaScript Design Principles

• Software design benefits from abstracting solutions via a cognitive model.
• Layers help organize by conceptually grouping programming classes with similar functionality and dependencies.
• Common layers include the presentation layer (user interface), business layer (real-world entities), and data layer (data source interaction).
• Users may browse without JavaScript enabled via web crawlers, browser plug-ins, text-based clients and visually disabled clients.
• The <noscript> tag displays text to users without JavaScript, for prompting JavaScript enablement or showing additional text to search engines.
• It's best practice to avoid requiring JavaScript or Flash for basic site operation.
• Two strategies address varied browser support for JavaScript: graceful degradation and progressive enhancement.
• Graceful degradation develops sites for current browser capabilities, offering alternate sites/pages for older browsers lacking JavaScript, CSS, or HTML5 without error messages.
• Progressive enhancement creates sites using CSS, JavaScript, and HTML features supported by a baseline of browsers and then enhances the experience.

Where does JavaScript go

• JavaScript can be linked to an HTML page in several ways: inline, embedded, and external.
• Inline JavaScript is included directly within HTML attributes, making maintenance challenging.
• Embedded JavaScript involves placing JavaScript code within a <script> element.
• External JavaScript uses links to an external file, conventionally with the .js extension.
• Advanced Inclusion techniques in production include generating embedded styles to reduce requests, using <iframe> loading, and asynchronous loading for faster initial load.

Syntax

• JavaScript syntax is similar to PHP, Java, and C.
• Key components of JavaScript syntax include variables, assignment, conditionals, loops, arrays, events and classes.
• JavaScript's reputation stems from implementation of object-oriented principles and syntactic "gotchas".
• Everything is type sensitive, including function, class, and variable names.
• Variable scope in blocks is not supported.
• The === operator tests for equality and type equivalence.
• Null and undefined are different states for a variable.
• Semicolons are optional but permitted (and encouraged).
• JavaScript only has a number type, resulting in prevalent floating-point rounding errors.
• Variables in JavaScript are dynamically typed, use "var", and assignment can happen at declaration or run time.
• Boolean operators are && (and), || (or), and ! (not).
• Conditional structures use if, else if, and else syntax with conditions in () brackets and bodies in {} blocks.
• Loops, like conditionals, use () and {} blocks to define the condition and body; while and for loops are common.
• A for loop combines initialization, condition, and post-loop operation into one statement, separated by semicolons.
• Functions are building blocks for modular code and are defined using the function keyword with a name and parameters.
• JavaScript functions do not require a return type or parameter types due to dynamic typing.
• The alert() function displays a pop-up message to the user.
• For debugging, console.log("Put Messages Here"); to write output to a log.
• Errors can be handled using try-catch blocks to prevent program disruption during exceptions.
• The throw keyword allows programs to throw custom messages, halting sequential execution.
• try-catch and throw are for abnormal cases, as throwing an exception disrupts normal execution until the catch statement.

JavaScript Objects

• While JavaScript is not a full-fledged object-oriented programming language, it supports objects with constructors, properties, and methods.

• To create a new object, you typically use the new keyword followed by the class name and parentheses, potentially with parameters.

• Some classes offer shortcut constructors, such as var greeting = "Good Morning"; instead of var greeting = new String("Good Morning");.

• Properties are accessed using dot notation: someObject.property.

• Methods are functions associated with an object and are called with dot notation as well, but include parentheses:someObject.doSomething();.

• Included JS objects are: Array, Boolean, Date, Math, String, and DOM objects.

• Arrays can be initialized, accessed, and modified using built in methods.

• A new, empty array named greetings can be created using: var greetings = new Array();

• An array can be initialized with values like so: var greetings = new Array("Good Morning", "Good Afternoon");

• Or using the square bracket var greetings = ["Good Morning", "Good Afternoon"];

The Document Object Model (DOM)

• The DOM is a programming interface (API) that allows programs and scripts to dynamically access and update the content, structure, and style of documents.
• The tree structure from HTML represents the DOM Tree, with the topmost object as the Document Root.
• Each element within an HTML document is called a node which can be: element nodes, text nodes, and attribute nodes
• All DOM nodes share common properties and methods.
• The DOM document object is the root JavaScript object, globally accessible as document. with the properties doctype and inputEncoding.
• Important DOM methods include createAttribute(), createElement(), createTextNode(), getElementById(id), and getElementsByTagName(name).
• getElementById() returns an element node object and represents an HTML element in the hierarchy and getElementsByTagName(name) returns a collection of elements with the given tag name.
• Essential Element Node Properties include: className, id, innerHTML, style, tagName.
• The document.write() method creates output to the HTML page from JS in a specified location.
• DOM functions can be more rigorously modified with: createTextNode(), removeChild(), and appendChild().
• The element's style can be altered style using the style or className property of the Element node.
• HTML5 introduces the classList element to add, remove, or toggle CSS classes on an element.
• The href attribute specifies a URL, the name identifies the tag, src links to a page, and value related to input tags for user input.

JavaScript Events

• A JavaScript event is an action detectable by JavaScript, where an event is triggered and then caught by JavaScript functions.
• Events were specified in HTML markup as hooks to JS code but powerful frameworks and refined practices have led to a listener approach.
• In the inline event handler approach HTML markup and corresponding JS logic are interwoven.
• The listener approach helps eliminate woven JS logic, and has two ways to set these listeners: the "old" way with greetingBox.onclick and the "new" DOM2 approach with greetingBox.addEventListener().
• Additional ways to set up listeners, events can be encapsulated using functions or anonymous functions.
• The DOM event objects and event handlers all have the ability to access and manipulate code, when events get passed to a function handler the user names the parameter e.

Events

• Bubbles: If an event's bubbles property is set to true then there must be an event handler in place to handle the event or it will bubble up to its parent and trigger an event handler there.
• Cancelable events can be cancelled.
• PreventDefault: Default actions for events can be stopped with the preventDefault() method.
• Mouse events include: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onmousemove.
• Keyboard events include: onkeydown, onkeypress, onkeyup.
• Form events include: onblur, onchange, onfocus, onreset, onselect, onsubmit.
• Frame events are related to the browser frame and includes: window.onload= function(){.
• Frame events include: onabort, onerror, onload, onresize, onscroll, onunload.

Forms

• Pre-validating forms on the client side reduces incorrect submissions reducing server load, and includes email, number, and data validation.
• It's possible to check if empty fields exist by:

document.getElementById("loginForm").onsubmit = function (e) {
var fieldValue=document.getElementByID("username").value;
if(fieldValue==null || fieldValue== ""){
// the field was empty. Stop form submission
e.preventDefault();
// Now tell the user something went wrong
alert("you must enter a username");
}
}

• To ensure a checkbox is ticked, use code like that below.

var inputField=document.getElementByID("license");
if (inputField.type=="checkbox"){
if (inputField.checked)
//Now we know the box is checked
}

• A function to test for a numeric value:

function isNumeric(n) {
}
return !isNaN(parseFloat(n)) && isFinite(n);

• Form validation uses regular expressions.
• Submitting forms uses a node variable and requires calling a submit method: formExample.submit(); with a call to preventDefault() on the onsubmit event.