SlideShare a Scribd company logo

javaScript.ppt

•Download as PPT, PDF•
•

This document provides an overview of JavaScript and the DOM (Document Object Model) for a web programming course. It introduces JavaScript as a scripting language used to add interactivity to HTML pages. It describes what JavaScript can do, such as dynamically updating text and reacting to events. It also covers JavaScript syntax, variables, operators, functions, and objects. A significant portion of the document is devoted to explaining the DOM and how it allows JavaScript to access and modify HTML elements and structure programmatically.

1 of 18

1

CS 299 – Web Programming and Design Overview of JavaScript and DOM Instructor: Dr. Fang (Daisy) Tang

2

CS 299 – Web Programming and Design 2 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

3

CS 299 – Web Programming and Design 3 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

4

CS 299 – Web Programming and Design 4 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>

5

CS 299 – Web Programming and Design 5 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

6

CS 299 – Web Programming and Design 6 JavaScript Basics • Variables • If … Else • Switch • Operators • Popup Boxes • Functions • Loops (for, while) • Events • Try … Catch • Throw • onerror • Special Text • Guidelines

7

CS 299 – Web Programming and Design 7 Java Objects • String • Date • Array • Boolean • Math • RegExp • HTML DOM

8

CS 299 – Web Programming and Design 8 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

9

CS 299 – Web Programming and Design 9 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

10

CS 299 – Web Programming and Design 10 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"]

11

CS 299 – Web Programming and Design 11 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

12

CS 299 – Web Programming and Design 12 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

13

CS 299 – Web Programming and Design 13 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

14

CS 299 – Web Programming and Design 14 HTML DOM Structure

15

CS 299 – Web Programming and Design 15 DOM Resources • Tutorials: – http://www.w3schools.com/htmldom/default.asp • DOM examples: – http://www.w3schools.com/htmldom/dom_examples.asp

16

CS 299 – Web Programming and Design 16 Java Advanced • Browser • Cookies • Validation • Animation • Timing • Create your own object

17

CS 299 – Web Programming and Design 17 Some Dynamic HTML Examples • http://www.w3schools.com/dhtml/dhtml_examples.asp

18

CS 299 – Web Programming and Design 18 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

More Related Content

javaScript.ppt

  • 1. CS 299 – Web Programming and Design Overview of JavaScript and DOM Instructor: Dr. Fang (Daisy) Tang
  • 2. CS 299 – Web Programming and Design 2 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
  • 3. CS 299 – Web Programming and Design 3 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
  • 4. CS 299 – Web Programming and Design 4 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>
  • 5. CS 299 – Web Programming and Design 5 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
  • 6. CS 299 – Web Programming and Design 6 JavaScript Basics • Variables • If … Else • Switch • Operators • Popup Boxes • Functions • Loops (for, while) • Events • Try … Catch • Throw • onerror • Special Text • Guidelines
  • 7. CS 299 – Web Programming and Design 7 Java Objects • String • Date • Array • Boolean • Math • RegExp • HTML DOM
  • 8. CS 299 – Web Programming and Design 8 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
  • 9. CS 299 – Web Programming and Design 9 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
  • 10. CS 299 – Web Programming and Design 10 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"]
  • 11. CS 299 – Web Programming and Design 11 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
  • 12. CS 299 – Web Programming and Design 12 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
  • 13. CS 299 – Web Programming and Design 13 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
  • 14. CS 299 – Web Programming and Design 14 HTML DOM Structure
  • 15. CS 299 – Web Programming and Design 15 DOM Resources • Tutorials: – http://www.w3schools.com/htmldom/default.asp • DOM examples: – http://www.w3schools.com/htmldom/dom_examples.asp
  • 16. CS 299 – Web Programming and Design 16 Java Advanced • Browser • Cookies • Validation • Animation • Timing • Create your own object
  • 17. CS 299 – Web Programming and Design 17 Some Dynamic HTML Examples • http://www.w3schools.com/dhtml/dhtml_examples.asp
  • 18. CS 299 – Web Programming and Design 18 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