JavaScript

What is RegExp syntax?

/pattern/modifiers;

BOM

Browser Object Model

What do you do if your function in the event handler requires params?

Use an anonymous function that calls the specified function with the params element.addEventListener("click", function(){ myFunction(p1, p2); });

How can you add a class to an HTML element in HTML5?

Use classList element! label.classList.addClass("className");

What is JavaScript

dynamically typed runs in the browser object oriented (almost everything is an object) * objects are prototype-based (not class-based)

How can you change HTML elements using DOM?

element.innerHTML= element.attribute= % this is general syntax element.setAttribute(attribute, value) element.style.property=

===

equal value and equal type

Event Object Bubbles Property

if an event's bubbles property is set to true then there must be an event handler in place to handle the event will bubble up to its parent and trigger an event handler there

Conditionals

if, else if, ..., else sytax is similar to PHP, Java, or C for the syntax, the condition to test is contained within ( ) brackets with the body contained in { } blocks

Frameworks

libraries that do a lot of work for you

Loops

loops use the ( ) and { } blocks to define the condition and the body of the loop. You will encounter the while and for loops While loops normally initialize a loop control variable before the loop, use it in the condition, and modify it within the loop.

Event Types

mouse events keyboard events form events frame events

Client-Side scripting Cons

no guarantee that the client has JS enabled idiosyncrasies b/w various browsers and OS's make difficult to test for all potential client configuration what works on one browser might not in another can be complicated to debug and maintain

Semicolons

not required

How do you make the p1 element go hidden on click?

onclick="document.getElementById('p1').style.visibility='hidden'"

no integer type

only number, this means floating-point reunding errors are prevalent even w/ integers

How do you specify that an event listener uses event capturing?

optional third parameter for addEventListener() function. True for capture, False for bubbling

Client-Side scripting pros

prossesing can be off-loaded from server to client (reduces server workload) browser can respond more rapidly to user events than a request to a remote server can interact w/ downloaded HTML

Embedded JS

refers to the practice of placing JS code within a script element

How can you get the DOM via the BOM?

window.document - same as just document

Event bubbling

works in exactly the opposite manner of event capturing: it begins by checking the target of the event for any attached event handlers, then bubbles up through each respective parent element until it reaches the HTML element the inner most element's event is handled first and then the outer

How do you add an event listener to element with id myBtn to displayDate on click?

document.getElementById("myBtn").addEventListener("click", displayDate); - doesn't overwrite existing event handlers

How can you find HTML elements using DOM?

document.getElementById() document.getElementsByTagName() document.getElementsByClassName() can also find by CSS selectors: and by HTML object collections var x = document.querySelectorAll("p.intro"); can find an HTML object collection: var x = document.forms["from1"]; for (i=0; i<x.length; i++) { text += x.elements[i].value + "<br>"; }

How can you add an event handler using DOM?

document.getElementById(id).onclick=function() { //code }

Compare document.write() vs changing innerHTML of an element

document.write() writes to the bottom of the HTML page using JS changing innerHTML can update HTML anywhere in the page

Logical Operators

&& (and) || (or) ! (not)

If you have a <p> element inside a <div> element, and the user clicks on the <p> element, which event is handled first in capturing? In bubbling?

- Capturing: the <div> element's click event will be handled first, then the <p> element's click event - Bubbling: the <p> element's click event is handled first, then the <div> element's click event

What can you access through the window object?

- the current page's URL - the browser's history - what's being displayed in the status bar - opening new browser windows (fun fact: alert() function is method of window object)

Define the following: 1) window.innerHeight 2) window.innerWidth 3) window.open() 4) window.close() 5) window.moveTo() 6) window.resizeTo()

1) inner height of browser window (not including toolbar and scrollbar) - For IE 5-8: document.documentElement.clientHeight or document.body.clientHeight 2) inner width of browser window - For IE 5-8: document.documentElement.clientWidth or document.body.clientWidth 3) open a new window 4) close the current window 5) move the current window 6) resize current window

Define the following events for the DOM: 1) onload 2) onunload 3) onchange 4) onmouseover 5) onmouseout 6) onmousedown/up 7) onclick

1) triggered when user enters page; can be used to check browser type and version or deal with cookies: onload="checkCookies()" 2) triggered when user leaves page; can be used to deal with cookies 3) used in combo with validation of input fields onchange="upperCase()" 4) triggered when user mouses over element 5) triggered when user mouses out of element 6) truggered when mouse-button is clicked/released 7) when mouse-click is completed

DOM Reacting to Events

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute: onclick=JavaScript

What is the following: var patt = /w3schools/i;

A RegExp with w3schools as the pattern and i as the modifier - i modifier means the search is case-insensitive

Event Object preventDefault Method

A cancelable default action for an event can be stopped using the preventDefault() method

For Loop

A for loop combines the common components of a loop: initialization, condition, and post-loop operation into one statement.

Objects Included in JS

Array Boolean Date Math String Dom

Describe DOM as a tree structure

DOM Tree Root = Document Root Node = each element in the HTML doc - element nodes - text nodes - attribute nodes All nodes share common set of properties and methods

What is a better technique to use than to edit innerHTML if you want to update HTML page?

DOM functions createTextNode(), removeChild(), and appendChild() allow us to modify an element in a more rigorous way

DOM

Document Object Model - used to create dynamic HTML - a W3C standard for accessing docs - 3 diff parts: Core DOM, XML DOM, HTML DOM - owns all other objects on the web page

Properties

Each object might have properties that can be accessed, depending on its definition. When a property exists, it can be accessed using dot notation where a dot between the instance name and the property references that property.

Frame Events

Frame events are the events related to the browser frame that contains your web page. The most important event is the onload event, which tells us an object is loaded and therefore ready to work with

Functions

Functions are the building block for modular code in JavaScript. They are defined by using the reserved word function and then the function name and (optional) parameters. Since JavaScript is dynamically typed, functions do not require a return type, nor do the parameters require type.

DOM HTML Event Attributes

HTML Event Attributes To assign events to HTML elements you can use event attributes.

JavaScript Events

an action that can be detected by JavaScript We say then that an event is triggered and then it can be caught by JavaScript functions, which then do something in response.

Arrays

In practice, this class is defined to behave more like a linked list in that it can be resized dynamically. The implementation is browser specific, meaning the efficiency of insert and delete operations is unknown. The following code creates a new, empty array named greetings: var greetings = new Array(); var greetings = new Array("Good Morning", "Good Afternoon"); var greetings = ["Good Morning", "Good Afternoon"]; To access an element in the array you use the familiar square bracket notation from Java and C-style languages, with the index you wish to access inside the brackets.

Progressive Enhancement

In this case, the developer creates the site using CSS, JavaScript, and HTML features that are supported by all browsers of a certain age or newer. To that baseline site, the developers can now "progressively" (i.e., for each browser) "enhance" (i.e., add functionality) to their site based on the capabilities of the users' browsers.

JS Locations

Inline Embedded External

Conceptual Layers

JS (Framework, e.g. JQuery) JS (Aysnchronous) JS (Validation) JS (Presentation) CSS HTML

External JS

JS allows links to external files that contain JS. JS external files have the .js extension

Objects in JS

JS is not a full-fledged OO language doesn't really have classes Doesn't support inheritace and polymorphism But does support objects objects can have constructors, properties, and methods

Arrays Vs Objects

Many programming languages support arrays with named indexes. Arrays with named indexes are called associative arrays (or hashes). JavaScript does not support arrays with named indexes. In JavaScript, arrays always use numbered indexes though JS typeof operator returns object. If you use a named index, JavaScript will redefine the array to a standard object. After that, all array methods and properties will produce incorrect results. Avoid new Array() There is no need to use the JavaScript's built-in array constructor new Array(). Use [ ] instead.

Event Object

No matter which type of event we encounter, they are all DOM event objects and the event handlers associated with them can access and manipulate them. Typically we see the events passed to the function handler as a parameter named e. function someHandler(e) { // e is the event that triggered this handler. }

Constructors

Normally to create a new object we use the new keyword, the class name, and ( ) brackets with n optional parameters inside, comma delimited

Define the following in a DOM: objects property method

Objects = all HTML elements Property = value that you can get or set Method = action you can do

Methods

Objects can also have methods, which are functions associated with an instance of an object. These methods are called using the same dot notation as for properties, but instead of accessing a variable, we are calling a method. someObject.doSomething();

JavaScript Layers

Presentation layer - classes focused on the user interface Business layer - Classes that model real-world entities, such as customers, products, and sales. Data layer - Classes that handle the interaction with the data sources

Graceful Degradation

Something that was once supported is replaced with something simpler but still functional?

Submitting Forms

Submitting a form using JavaScript requires having a node variable for the form element. Once the variable, say, formExample is acquired, one can simply call the submit() method: var formExample = document.getElementById("loginForm"); formExample.submit(); This is often done in conjunction with calling preventDefault() on the onsubmit event.

DOM Access a Style Object

The Style object can be accessed from the head section of the document, or from specific HTML element(s). Accessing style object(s) from the head section of the document: var x = document.getElementsByTagName("STYLE"); Accessing a specified element's style object: var x = document.getElementById("myH1").style; x.color = "blue";

DOM addEventListener()

The addEventListener() method Example Add an event listener that fires when a user clicks a button: document.getElementById("myBtn").addEventListener("click", displayDate);

Event Object Cancelable Property

The cancelable property is also boolean and indicates whether or not the event can be cancelled

DOM Style Object

The style object represents an individual style statements

Assignment

an happen at declaration-time by appending the value to the declaration, or at run time with a simple right-to-left assignment

Validating forms

Writing code to prevalidate forms on the client side will reduce the number of incorrect submissions, thereby reducing server load. There are a number of common validation activities including email validation, number validation, and data validation.

Can you add many event handlers to ANY dom object?

Yes, even the window object

DOM Create a Style Object

You can create a <style> element by using the document.createElement() method: var x = document.createElement("STYLE"); You can also set the style properties of an existing element: document.getElementById("myH1").style.color = "red";

Event propagation

a way of defining the element order when an event occurs.

Variables

are dynamically typed, meaning a variable can be an integer, and then later a string, then later an object, if so desired. use var for variable declarations

Inline Event Handler Approach

can't put example but its inline... The problem with this type of programming is that the HTML markup and the corresponding JavaScript logic are woven together. It does not make use of layers; that is, it does not separate content from behavior.

Inline JS

refers to practice of including JS code directly w/in certain HTML attributes. Inline JS is a real maintenance nightmare

Event capturing

starts with the outer most element in the DOM and works inwards to the HTML element the event took place on and then out again. For example, a click in a web page would first check the HTML element for onclick event handlers, then the body element, and so on, until it reaches the target of the event the outer most element's event is handled first and then the inner

Listener Approach

this approach separates the html and JS layers. var greetingBox = document.getElementById('example1'); v1 greeting.onclink = alert('Good Morning'); v2 greetingBox.attachEvent('click', alert('Good Morning')); or you can replace alert('Good Morning') with a function call

What is the syntax for try-catch-finally block?

try { // block of code to try, throw errors if something goes wrong } catch(err) { // block of code to handle errors } finally { // block of code to be executed regardless of initial try and catch result }