Lesson 12- Unit L Programming Web Pages with JavaScript

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.

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

HTML 5 and CSS 3 – Illustrated Complete

shady grove aeolian over the river, charlie dorian

Object 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 Commonly used properties: innerhtml the content of an object value the current value of another property

Method Action that can be performed for a node. Method names are followed by parentheses between which you specify information specific to the method Write add text content and / or code to a web page getElementById Locate an element with a given id value within the DOM tree Alert Opens a small alert box that displays a customized message.

A combination of objects, properties, and methods used to specify element in DOM that you want to access. Reference to DOM node begins with the document object getElementById method can specify node innerHTML property can get value of node Match the following: WhoinnerHTML WhatgetElementById

This piece of code creates a div element named "myDiv": This is the content of myDiv You can see what the innerHTML of the "myDiv" element looks like by using the following: javascript:alert(document.getElementById("myDiv").innerHTML);

YouTube - Introduction to HTML DOM  Good explanation YouTube - Document Object Model (DOM) Intro DOM – Reference information Core/core.html#ID

Dot notation connects all parts of statement into a single string. Objects, properties, and methods are listed in sequence, separated by a period document.getElementById(‘nameinput’).value

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.

Scripts Can be used to add content to a Web page Statement – a single script instruction. Some goals can be achieved with one statement scripts Specify element and value using the getElementById method and innerHTML property Script is placed in 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. You may have one or may have a hundred statements between your begin and end script tags.

Code containing script that adds content

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

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?

Function : 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?

Function code and code referencing function

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

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

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. However, when referring to a value of a variable, the variable name is used without quotes.

The concatenation operators are used to combine multiple string literals into a single string. What will each of these become if the name variable contains the value Fred? “You“+name+”may already be a winner!” “YouFredmay already be a winner!” “You “+name+” may already be a winner!” “You Fred may already be a winner!”

Code using a variable when validating form input If (name==null || name==“”) What does this mean?

JavaScript can be used to reconfigure Web pages based on user activities or inputs Done by accessing, storing, manipulating, and writing values that are based on user input Helps create Web pages customized in response to user inputs Example: specifying a user’s name, taken from a form field, when displaying a thank- you or greeting message

Code for customizing text based on user input.

Fallback options for some newer CSS and HTML features can be provided using JavaScript code You can use Modernizr script elements to identify whether the current browser supports specific attributes Example: Modernizr.input.placeholder Use conditional clauses, such as if statements, to cause fallback statements to be executed only if desired feature is not supported by current browser

 W3schools innerhtml W3schools innerhtml  W3schools events W3schools events  W3schools getElementById W3schools getElementById

Code including script statements that generate placeholder text for older browsers.

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

Javascript examples javascript/main.html javascript/main.html Javascript madlib javascript/javascript-story.htm javascript/javascript-story.htm

CIS166 – Scripting Courses   CIS166AA - Introduction to Javascripting   CIS166AE - PHP HTML 5 and CSS 3 – Illustrated Complete