xp tutorial 10new perspectives on html and xhtml, comprehensive 1 working with javascript creating a...
TRANSCRIPT
![Page 1: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/1.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
1
XP
Working with JavaScript
Creating a Programmable Web Page for North Pole Novelties
Tutorial 10
![Page 2: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/2.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
2
XPObjectives
• Introducing JavaScript• Inserting JavaScript into a Web Page File• Writing Output to the Web Page
![Page 3: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/3.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
3
XPObjectives
• Working with Variables and Data• Working with Dates• Working with Expressions and Operators• Creating JavaScript Functions• Creating the XmasDays Function
![Page 4: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/4.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
4
XPObjectives
• Working with Conditional Statements• Using Arrays• Working with Program Loops• Debugging Your JavaScript Programs
![Page 5: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/5.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
5
XPIntroduction to JavaScript
• Server-side Programs pose problems
• Client-side Programs were developed to run programs and scripts on the client side of a Web browser.
![Page 6: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/6.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
6
XPThe Development of JavaScript
• JavaScript is a subset of Java.• Differences between Java and JavaScript:
– Java is a compiled language– JavaScript is an interpreted language
![Page 7: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/7.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
7
XPComparing Java and JavaScript
![Page 8: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/8.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
8
XPThe Development of JavaScript
• Jscript is a version of JavaScript supported by Internet Explorer.
• The European Computer Manufacturers Association (ECMA) develops scripting standards.– The standard is called ECMAScript but browsers
still generally call is JavaScript.
![Page 9: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/9.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
9
XPInserting JavaScript into a Web Page File
• Outline the main tasks you want the program to perform first.
• A JavaScript program can either be placed directly in a Web page file or saved in an external text file.
![Page 10: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/10.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
10
XPInserting JavaScript into a Web Page File
• Insert a client-side script in a Web page when using the script element.
• Comments are useful for hiding scripts from older browsers.
• Specify alternative content using the nonscript element for browsers that don’t support scripts (or have their script support disabled).
![Page 11: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/11.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
11
XPWriting Output to the Web Page
• An object-oriented programming language writes the output by manipulating tasks.
• An action you perform on an object is called a method.
![Page 12: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/12.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
12
XPWorking with Variables and Data
• A variable is a named item in a program that stores information.
• Variable names have restrictions (see pages HTML 531-532).
![Page 13: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/13.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
13
XPWorking with Variables and Data
• JavaScript variable types:– Numeric variables– String variables– Boolean variables– Null variables
• You must declare a variable before using it.
![Page 14: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/14.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
14
XPWorking with Variables and Data
• Numeric variable- any number, such as 13, 22.5, etc. – Can also be expressed in scientific notation.
• String variable- any group of text characters, such as “Hello” or “Happy Holidays!”– Must be enclosed within either double or single quotations
(but not both).
• Boolean variable- accepts only true and false values• Null variable- has no value at all.
![Page 15: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/15.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
15
XPWorking with Dates
• Create a date object to store date information.
Date Methods
![Page 16: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/16.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
16
XPWorking with Expressions and Operators
• Expressions are JavaScript commands that assign values and variables.
• Operators are elements that perform actions within expressions.– Arithmetic operators: perform simple mathematical
calculations– Binary operators: work on two elements in an expression– Unary operators: work on only one variable– Increment operators: can be used to increase the value of a
variable by 1– Assignment operators: used to assign values in expressions
![Page 17: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/17.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
17
XPWorking with Expressions and Operators
• The Math object is a JavaScript object used for calculations other than simple math.
![Page 18: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/18.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
18
XPCreating JavaScript Functions
• A function is a series of commands that perform an action or calculates a value.
• A function name identifies a function.• Parameters are values used by the function.
![Page 19: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/19.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
19
XPWorking with Conditional Statements
• Conditional statements are commands that run only when specific conditions are met.
• Conditional statements require a Boolean expression.– you need one of the following operators to create
a Boolean expression:• Comparison operator• Logical operator• Conditional operator
![Page 20: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/20.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
20
XPUsing Arrays
• An array is an ordered collection of values referenced by a single variable name.
var variable = new Array (size);
Where variable is the name of the array variable and
size is the number of elements in the array.
![Page 21: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/21.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
21
XPWorking with Program Loops
• A program loop is a set of instructions that is executed repeatedly.– Use program loops to configure a group of
commands to be executed a set number of times.– The loop uses a counter to track the number of
times the command block has been run.
![Page 22: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/22.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
22
XPWorking with Program Loops
Creating a For loop
![Page 23: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/23.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
23
XPWorking with Program Loops
Nesting a For loop
![Page 24: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/24.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
24
XPWorking with Program Loops
Creating a While loop
![Page 25: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/25.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
25
XPWorking with Program Loops
Nesting a While loop
![Page 26: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/26.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
26
XPDebugging Your JavaScript Programs
• Three types of errors:– Load-time errors (occurs when the script is
loading)– Run-time errors (occurs when the being executed)– Logical errors (free from syntax and structural
mistakes, but result in incorrect results)
![Page 27: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/27.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
27
XPCommon Mistakes
• You need to debug your program to fix the mistakes.
• Common mistakes include:– Misspelling a variable name– Mismatched parentheses or braces– Mismatched quotes– Missing quotes– Using ( instead of [– Using = in place of ==
![Page 28: XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial](https://reader035.vdocument.in/reader035/viewer/2022070401/56649f1f5503460f94c37ff6/html5/thumbnails/28.jpg)
Tutorial 10 New Perspectives on HTML and XHTML, Comprehensive
28
XPDebugging Tools and Techniques
• To avoid making mistakes and quickly located those you do make:– Write modular code– Use the Microsoft Script Debugger to debug (for
use with Internet Explorer)– Use the Netscape JavaScript Console to debug
(for use with Netscape)