Scribd Logo
Upload

Welcome to Scribd!

  • 36 views

    Overview of Javascript and Dom: Instructor: Dr. Fang (Daisy) Tang

    Uploaded by

    Larisa Vasilache
    This document provides an overview of JavaScript and the DOM (Document Object Model). It discusses what JavaScript is, what it can do, how to insert it into HTML pages, and where it can be placed. The DOM represents HTML documents as objects that can be manipulated with JavaScript. Key JavaScript concepts covered include variables, operators, functions, events, objects like String and Date, and regular expressions. Examples are provided of DOM manipulation and dynamic HTML effects.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd

    Overview of Javascript and Dom: Instructor: Dr. Fang (Daisy) Tang

    Uploaded by

    Larisa Vasilache
    36 views18 pages
    This document provides an overview of JavaScript and the DOM (Document Object Model). It discusses what JavaScript is, what it can do, how to insert it into HTML pages, and where it can be placed. The DOM represents HTML documents as objects that can be manipulated with JavaScript. Key JavaScript concepts covered include variables, operators, functions, events, objects like String and Date, and regular expressions. Examples are provided of DOM manipulation and dynamic HTML effects.

    Original Description:

    d78ads2adxa

    Original Title

    JavaScript

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an overview of JavaScript and the DOM (Document Object Model). It discusses what JavaScript is, what it can do, how to insert it into HTML pages, and where it can be placed. The DOM represents HTML documents as objects that can be manipulated with JavaScript. Key JavaScript concepts covered include variables, operators, functions, events, objects like String and Date, and regular expressions. Examples are provided of DOM manipulation and dynamic HTML effects.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    36 views18 pages

    Overview of Javascript and Dom: Instructor: Dr. Fang (Daisy) Tang

    Uploaded by

    Larisa Vasilache
    This document provides an overview of JavaScript and the DOM (Document Object Model). It discusses what JavaScript is, what it can do, how to insert it into HTML pages, and where it can be placed. The DOM represents HTML documents as objects that can be manipulated with JavaScript. Key JavaScript concepts covered include variables, operators, functions, events, objects like String and Date, and regular expressions. Examples are provided of DOM manipulation and dynamic HTML effects.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    of 18

    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

    You might also like