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
<table>
<tbody>
<tr>
<td>shady grove</td>
<td>aeolian</td>
</tr>
<tr>
<td>over the river, charlie</td>
<td>dorian</td>
</tr>
</tbody>
</table>
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:
Who
innerHTML
What
getElementById
This piece of code creates a div element named "myDiv":
<div id=“myDiv”>This is the content of myDiv</div>
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
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-2Core/core.html#ID-1590626202
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 <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.
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
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?
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 thankyou 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 events
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
• http://www.gc.maricopa.edu/business/cis133/v7/
javascript/main.html
• Javascript madlib
• http://www.gc.maricopa.edu/business/cis133/v7/
javascript/javascript-story.htm
CIS166 – Scripting Courses

CIS166AA - Introduction to Javascripting

CIS166AE - PHP
HTML 5 and CSS 3 – Illustrated Complete
HTML 5 and CSS 3 – Illustrated Complete