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.
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
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
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:
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#ID1590626202
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">