New%20Perspectives%20on%20HTML,%20XHTML,%20and%20DHTML,%20Comprehensive - PowerPoint PPT Presentation

About This Presentation
Title:

New%20Perspectives%20on%20HTML,%20XHTML,%20and%20DHTML,%20Comprehensive

Description:

Tutorial 10 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Objectives Introducing JavaScript Inserting JavaScript into a Web Page ... – PowerPoint PPT presentation

Number of Views:101
Avg rating:3.0/5.0
Slides: 34
Provided by: Course339
Category:

less

Transcript and Presenter's Notes

Title: New%20Perspectives%20on%20HTML,%20XHTML,%20and%20DHTML,%20Comprehensive


1
Working with JavaScript
Tutorial 10
  • Creating a Programmable Web Page for North Pole
    Novelties

2
Objectives
  • Introducing JavaScript
  • Inserting JavaScript into a Web Page File
  • Writing Output to the Web Page

3
Objectives
  • Working with Variables and Data
  • Working with Dates
  • Working with Expressions and Operators
  • Creating JavaScript Functions
  • Creating the XmasDays Function

4
Objectives
  • Working with Conditional Statements
  • Using Arrays
  • Working with Program Loops
  • Debugging Your JavaScript Programs

5
Introduction 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

6
The Development of JavaScript
  • JavaScript is a subset of Java
  • Differences between Java and JavaScript
  • Java is a compiled language
  • JavaScript is an interpreted language

7
Comparing Java and JavaScript
8
The 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

9
Inserting 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

10
Inserting 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 dont support scripts
    (or have their script support disabled)

11
Writing 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

12
Writing Output to the Web Page
  • To write text to a Web page, use the following
    JavaScript commands
  • document.write(text)
  • or
  • document.writeln(text)
  • Where text is the content to be written to the
    page. The
  • doucment.write() and document.writeln() methods
    are identical,
  • except that the document.writeln() method
    preserves any line
  • breaks in the text string.

13
Working 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)

14
Working with Variables and Data
  • JavaScript variable types
  • Numeric variables
  • String variables
  • Boolean variables
  • Null variables
  • You must declare a variable before using it

15
Working 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

16
Declaring a JavaScript Variable
  • You can declare variables with any of the
    following JavaScript commands
  • var variable
  • var variable value
  • variable value
  • Where variable is the name of the variable and
    value is the initial value of the variable. The
    first command creates the variable without
    assigning it a value the second and third
    commands both create the variable and assign it a
    value.

17
Working with Dates
  • Create a date object to store date information

Date Methods
18
Working 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

19
Working with Expressions and Operators
  • The Math object is a JavaScript object used for
    calculations other than simple math

20
Creating 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

21
Creating JavaScript Functions
  • A group of commands set off by curly braces is
    called a command block. Command blocks exist for
    other JavaScript structures in addition to
    functions.

22
Working 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

23
Using 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

24
Working 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

25
Working with Program Loops
Creating a For loop
26
Working with Program Loops
Nesting a For loop
27
Working with Program Loops
Creating a While loop
28
Working with Program Loops
Nesting a While loop
29
Debugging 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)

30
Common 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

31
Debugging 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)

32
Tips for Writing Good JavaScript Code
  • Use good layout to make your code more readable.
    Indent command blocks to make them easier to read
    and to set them off from other code
  • Use descriptive variable names to indicate the
    purpose of your variables
  • Be careful how you use uppercase and lowercase
    letters in your code, because JavaScript commands
    and names are case-sensitive

33
Tips for Writing Good JavaScript Code
  • Add comments to your code to document the purpose
    of each script
  • Initialize all variables at the top of your
    script and insert comments describing the purpose
    and nature of your variables
  • Create customized functions that can be reused in
    different scripts. Place your customized
    functions in external files to make them
    available to your entire Web site
Write a Comment
User Comments (0)
About PowerShow.com