Overview of JavaScript and DOM
Instructor: Dr. Fang (Daisy) Tang
CS 299 – Web Programming and Design
Introduction to JavaScript
• What is JavaScript?
– It is designed to add interactivity to HTML pages
– It is a scripting language (a lightweight programming
language)
– It is an interpreted language (it executes without
preliminary compilation)
– Usually embedded directly into HTML pages
– And, Java and JavaScript are different
CS 299 – Web Programming and Design 2
What can a JavaScript Do?
• JavaScript gives HTML designers a programming tool:
– simple syntax
• JavaScript can put dynamic text into an HTML page
• JavaScript can react to events
• JavaScript can read and write HTML elements
• JavaScript can be used to validate data
• JavaScript can be used to detect the visitor’s browser
• JavaScript can be used to create cookies
– Store and retrieve information on the visitor’s computer
CS 299 – Web Programming and Design 3
JavaScript How To
• The HTML <script> tag is used to insert a JavaScript into an
HTML page
<script type=“text/javascript”>
document.write(“Hello World!”)
</script>
• Ending statements with a semicolon?
– Optional; required when you want to put multiple statements on a
single line
• JavaScript can be inserted within the head, the body, or use
external JavaScript file
• How to handle older browsers?
<script type=“text/javascript”>
<!—
document.write(“Hello World!”)
// -->
</script>
CS 299 – Web Programming and Design 4
JavaScript Where To
• You can include JavaScripts in head, body, or
simply use external JavaScript file (.js)
• JavaScripts in the body section will be
executed while the page loads
• JavaScripts in the head section will be
executed when called
• Examples:
– http://www.w3schools.com/js/js_whereto.asp
CS 299 – Web Programming and Design 5
JavaScript Basics
• Variables
• If … Else
• Switch
• Operators
• Popup Boxes
• Functions
• Loops (for, while)
• Events
• Try … Catch
• Throw
• onerror
• Special Text
• Guidelines
CS 299 – Web Programming and Design 6
Java Objects
• String
• Date
• Array
• Boolean
• Math
• RegExp
• HTML DOM
CS 299 – Web Programming and Design 7
RegExp: Regular Expression
• Two ways to define regular expression:
– new RegExp(“[xyz]”)
– or, /[xyz]/
• String object methods that supports regular
expressions:
– search: search a string for a specified value. Returns
the position of the value
– match: search a string for a specified value. Returns
an array of the found value(s)
– replace: replace characters with other characters
– split: split a string into an array of strings
CS 299 – Web Programming and Design 8
JavaScript Regular Expression Examples
• Check input for 5 digit number
– http://www.javascriptkit.com/javatutors/re.shtml
• Different categories of pattern matching:
– http://www.javascriptkit.com/javatutors/re2.shtml
CS 299 – Web Programming and Design 9
More RegExp Examples
• Example 1:
– var string1="Peter has 8 dollars and Jane has 15"
– parsestring1=string1.match(/\d+/g)
– returns the array [8,15]
• Example 2:
– var string2="(304)434-5454"
– parsestring2=string2.replace(/[\(\)-]/g, "")
– Returns "3044345454" (removes "(", ")", and "-")
• Example 3:
– var string3="1,2, 3, 4, 5"
– parsestring3=string3.split(/\s*,\s*/)
– Returns the array ["1","2","3","4","5"]
CS 299 – Web Programming and Design 10
More RegExp Examples
• Valid number: contains only an optional minus
sign, followed by digits, followed by an
optional dot (.) to signal decimals
• Valid date format
– 2-digit month, date separator, 2-digit day, date
separator, and a 4-digit year
– e.g., 02/02/2000, 02-02-2000, 02.02.2000
• http://www.javascriptkit.com/javatutors/re4.shtml
CS 299 – Web Programming and Design 11
HTML DOM
• What is the DOM?
– It stands for Document Object Model
– With JavaScript, we can restructure an entire HTML
document by adding, removing, changing, or
reordering items on a page
– JavaScript gains access to all HTML elements through
the DOM
CS 299 – Web Programming and Design 12
Using JavaScript Objects
• When you load a document in your web
browser, it creates a number of JavaScript
objects
• These objects exist in a hierarchy that reflects
the structure of the HTML page
CS 299 – Web Programming and Design 13
HTML DOM Structure
CS 299 – Web Programming and Design 14
DOM Resources
• Tutorials:
– http://www.w3schools.com/htmldom/default.asp
• DOM examples:
– http://www.w3schools.com/htmldom/dom_examples.asp
CS 299 – Web Programming and Design 15
Java Advanced
• Browser
• Cookies
• Validation
• Animation
• Timing
• Create your own object
CS 299 – Web Programming and Design 16
Some Dynamic HTML Examples
• http://www.w3schools.com/dhtml/dhtml_examples.asp
CS 299 – Web Programming and Design 17
Case Study
• More Examples:
– http://www.pages.org/javascript/index.html
– http://www.csupomona.edu/~ftang/www/courses/C
S299-S09/examples/changestyle.html
• Form validation:
– http://www.xs4all.nl/~sbpoley/webmatters/formval.html
CS 299 – Web Programming and Design 18
