Unit M Programming Web Pages with

Why Javascript? JavaScript can be used to enhance a Web page, and all such enhancements are rooted in looking up and/or changing data associated with parts of the HTML document. Can add interactivity to a web page. Can customize a web page. Can check validity of inputs. Client side processing. Do More With Less Code. Don't Reinvent The Wheel. JavaScript is the most widely used programming language for modern web browsers.

Document Object Model (DOM) Standardized way of referring to parts of a Web page. Creates a hierarchical arrangement known as a DOM tree. Each part of HTML document represented by a node. DOM is designed to be language independent and to work with any programming language

Object Property Each HTML element in DOM is an object. Specific object must be identified in order to manipulate it using JavaScript. Property Each DOM node is associated with a set of information, and each piece of information is known as a property. Attributes are considered their own nodes and are associated with their own properties

Even though the DOM trees look like they show parent/child relationships, the DOM is not a set data structure, but a model that specifies interfaces. The parent child relationships shown in a DOM are logical relationships and not representations of any type of internal data structures.

<table> <tbody> <tr> <td>shady grove</td> <td>aeolian</td> </tr> <tr> <td>over the river, charlie</td> <td>dorian</td> </tr> </tbody> </table>

End of Part One.

Scripts Statement – a single script instruction. Can be used to add content to a Web page Statement – a single script instruction. Some goals can be achieved with one statement scripts A JavaScript instruction that performs an action. A script may have one or a hundred statement.

Script is placed in <script> tags Spaces outside of quoted text are ignored Script tag can receive a language attribute, which is used to specify the scripting language used for the script. JavaScript interprets the end of a line as the end of a statement. Ending every statement with a semicolon makes code easier for developers to interpret.

Separate js file Statements created in external JavaScript file Text file with .js extension Referenced within HTML document using script element

Method Actions that can be performed for a node. Method names are followed by parentheses between which you specify information specific to the method querySelector() method lets you access any HTML element by specifying a CSS selector Dot notation Connects all parts of statement into a single string. Objects, properties, and methods are listed in sequence, separated by a period.

querySelector method querySelector() method lets you reference objects and properties To use a method, specify its parent object, a period, and method name: document.querySelector() document is the parent object.

Element: To select an element: document.querySelector("aside") This selects the aside element Id: To select an element identified by an id: document.querySelector("#nameinput") This selects the element with the id value nameinput Class: To select an element identified by a class: document.querySelector(".name-content") This selects the element with the class of name-content

To access a property, add dot and property name after method: document.querySelector("aside").textContent document.querySelector("#nameinput").textContent document.querySelector(".name-content").textContent

Operators Symbols used to compare or change the values of objects or properties Assignment operator = Comparison operators == != determine the size relationship between two values Logical operators && || ! logically connect multiple variables in a comparison

Assignment operator (=): Part of a statement that lets you assign a new property value Code on left of = accesses property Code on right of = specifies new value often enclosed in quotes

Variable Used to store a value Can be used in subsequent statements Variable names are case sensitive, and must begin with a letter or an underscore character. var zip

Event User action defined for Web pages. Can be linked to a script. Examples of HTML events: When a user clicks the mouse When a web page has loaded When an image has been loaded When the mouse moves over an element When an input field is changed When an HTML form is submitted When a user strokes a key http://www.w3schools.com/js/js_htmldom_events.asp

Event handler HTML attribute that specifies a type of user action. Used to indicate that code should execute in response to specific type of user action. Allows Web page to respond to user activities.

Code containing event handler. What is the event?

Step by step instructions on how to get from GCC Main to GCC North. Instructions must be correct and in the correct sequence. Give the set of instructions a name i.e. “DriveToNorth” When you want to go to the north campus just do what “DriveToNorth” instructs you to do. This is what functions are all about.

Function:  src attribute in script tag indicates location of script Chunk of script code with a name assigned to it Code lines in function called as a single unit Characters after // treated as comment Syntax: function name() { statement; } Function can be stored in external file  src attribute in script tag indicates location of script Why put functions in a separate file?

When a function is called with the name of a variable included within the parentheses following the function name, the value of the variable is passed to the function. When text is to be rendered literally it must be included within quotes. When referring to a value of a variable, the variable name is used without quotes.

var goodOption = document.querySelector("#goodButton"); var feedbackInput = document.querySelector("#feedback"); function doit() { feedbackInput.value = “Good job"; if (form.checkValidity() === true) { submitinfo.className = "submitinfo show"; } } goodOption.addEventListener("click", doit, false);

Function code and code referencing function

Many scripts for common tasks exist on the Web Developers maintain Web sites where such scripts can be downloaded and are explained It is possible to customize an existing script to perform a task rather than write a totally new one Make sure downloaded script comes from a reliable source and be sure you know exactly what it does before using it

My script does not work – why”? Spelling is critical. onclick=‘doThis()’ function dothis() { Are you connecting to your script file? Do your { } match?

Javascript examples http://web.gccaz.edu/~timgo00001/javascript/

YouTube - Introduction to HTML DOM http://www.youtube.com/watch?v=SObk1cPul5Y  Good explanation YouTube - Document Object Model (DOM) Intro http://www.youtube.com/watch?v=aPW_wQEFvek DOM – Reference information http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID- 1590626202

CIS166 – Scripting Courses CIS166AA - Introduction to Javascripting CIS166AE - PHP

Code containing script that adds content <article id="content"> <h2 id="main">Contact Us</h2> <p id="message"></p> <script> document.getElementById("message").innerHTML=("Thanks for contacting Lakeland Reeds Bed & Breakfast!"); </script> <form name="contact" id="contact">