web development -2

sri999

t9.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Getting Started with JavaScript

Tutorial 9

Carey

Objectives

Insert a script element

Write JavaScript comments

Display an alert dialog box

Use browser debugging tools

Reference browser and page objects

Use JavaScript properties and methods

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Write HTML code and text content into a page

Work with a Date object

Use JavaScript operators

Create a JavaScript function

Create timed commands

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Server-Side and Client-Side Programming

Server-side programming: Program code runs from the server hosting the website

Advantage

Connects a server to an online database containing information not directly accessible to end users

Disadvantages

Use server resources and requires Internet access

Long delays in cases of system over-load

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Server-Side and Client-Side Programming (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Server-Side and Client-Side Programming (continued 2)

Client-side programming: Programs run on the user’s computer using downloaded scripts with HTML and CSS files

Distributes load to avoid overloading of program-related requests

Client-side programs can never replace server-side programming

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Server-Side and Client-Side Programming (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The Development of JavaScript

JavaScript is a programming language for client-side programs

It is an interpreted language that executes a program code without using an application

Compiler is an application that translates a program code into machine language

JavaScript code can be directly inserted into or linked to an HTML file

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with the script Element

JavaScript code is attached to an HTML file using the script element

where url is the URL of the external file containing the JavaScript code

An embedded script can be used instead of an external file by omitting the src attribute

code

</script>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Loading the script Element

script element can be placed anywhere within an HTML document

When a browser encounters a script, it immediately stops loading the page and begins loading and then processing the script commands

async and defer attributes can be added to script element to modify its sequence of processing

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Loading the script Element (continued)

async attribute tells a browser to parse the HTML and JavaScript code together

defer attribute defers script processing until after the page has been completely parsed and loaded

async and defer attributes are ignored for embedded scripts

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Inserting the script Element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a JavaScript Program

JavaScript programs are created using a standard text editor

Adding Comments to your JavaScript Code

Comments help understand the design and purpose of programs

JavaScript comments can be entered on single or multiple lines

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a JavaScript Program (continued 1)

Syntax of a single-line comment is as follows:

// comment text

Syntax of multiple-line comments is as follows:

comment text spanning

several lines

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a JavaScript Program (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a JavaScript Program (continued 3)

Writing a JavaScript Command

A command indicates an action for a browser to take

A command should end in a semicolon

JavaScript command;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a JavaScript Program (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a JavaScript Program (continued 5)

Understanding JavaScript Syntax

JavaScript is case sensitive

Extra white space between commands is ignored

Line breaks placed within the name of a JavaScript command or a quoted text string cause an error

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Debugging your Code

Debugging: Process of locating and fixing a programming error

Types of errors

Load-time errors – occur when a script is first loaded by a browser

Run-time errors – occur during execution of a script without syntax errors

Logical errors – are free from syntax and executable mistakes but result in an incorrect output

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Opening a Debugger

Debugging tools locate and fix errors in JavaScript codes

Shortcut to open a debugging tool is F12 key

The tools can also be opened by selecting Developer Tools from the browser menu

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Inserting a Breakpoint

A useful technique to locate the source of an error is to set up breakpoints

Breakpoints are locations where a browser pauses a program to determine whether an error has occurred at that point during execution

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Inserting a Breakpoint (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Strict Usage of JavaScript

Strict mode enables all lapses in syntax to result in load-time or run-time errors

To run a script in strict mode, add the following statement to the first line of the file:

“use strict”;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Objects

Object: Entity within a browser or web page that has properties and methods

Properties: Define objects

Methods: Act upon objects

JavaScript is an object-based language that manipulates an object by changing one or more of its properties

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Objects (continued 1)

Types of JavaScript objects

Built-in objects – intrinsic to JavaScript language

Browser objects – part of browser

Document objects – part of web document

Customized objects – created by a programmer to use in an application

Browser object model (BOM) and document object model (DOM) organize browser and document objects in hierarchical structures, respectively

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Objects (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Object References

Objects within the object hierarchy are referenced by their object names such as window, document, or navigator

Objects can be referenced using the notation

object1.object2.object3 ...

where object1 is at the top of the hierarchy, object2 is a child of object1, and so on

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Referencing Object Collections

Object collections: Objects organized into groups

To reference a specific member of an object collection, use

collection[idref]

or collection.idref

where collection is a reference to the object collection and idref is either an index number or the value of id attribute

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Referencing Object Collections (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Referencing an Object by ID and Name

An efficient approach to reference an element is to use its id attribute using the expression

document.getElementById(id)

where id is the value of id attribute

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Changing Properties and Applying Methods

Object Properties

Object property is accessed using

object.property

where object is a reference to an object and property is a property associated with that object

Read-only properties cannot be modified

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Changing Properties and Applying Methods (continued)

Applying a Method

Objects can be modified using methods

Methods are applied using the expression

object.method(values)

where object is a reference to an object, method is the name of the method applied to the object, and values is a comma-separated list of values associated with the method

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Writing HTML Code

HTML code stored within a page element is referenced using

element.innerHTML

where element is an object reference to an element within a web document

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Writing HTML Code (continued 1)

HTML code stored within a page element is referenced using

element.innerHTML

where element is an object reference to an element within a web document

For example,

/* Display the current date and time */

document.getElementById(“dateNow”).innerHTML = “m/d/y<br />h:m:s”;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Writing HTML Code (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Writing HTML Code (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Variables

Variable: Named item in a program that stores a data value

Declaring a Variable

Introduced into a script by declaring the variable using the var keyword

var variable = value;

where variable is the name assigned to the variable and value is the variable’s initial value

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Variables (continued)

Conditions to assign variable names in JavaScript

First character must be either a letter or an underscore character ( _ )

The characters after the first character can be letters, numbers, or underscore characters

No spaces

No using names that are part of JavaScript language

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Variables and Data Types

Data type: Type of information stored in a variable

Supported data types

Numeric value

Text string

Boolean value

Object

null value

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Variables and Data Types (continued)

Numeric value: Any number

Text string: Group of characters enclosed within either double or single quotation marks

Boolean value: Indicates the truth or falsity of a statement

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Variables and Data Types (continued 1)

Object – Simplifies code by removing the need to rewrite complicated object references

null value – Indicates that no value has yet been assigned to a variable

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Date Objects

Date object: Built-in JavaScript object used to store information about dates and times

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Date Objects (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Date Objects (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting Date and Time Values

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Operators and Operands

Operator: Symbol used to act upon an item or a variable within an expression

Operands: Variables or expressions that operators act upon

Types of operators

Binary operators – require two operands in an expression

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Operators and Operands (continued)

Unary operators – require only one operand

Increment operator (++) – increases the value of an operand by 1

Decrement operator (--) – decreases the value of an operand by 1

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Assignment Operators

Assignment operator: Assigns a value to an item

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with the Math Object

Math object: Built-in object used to perform mathematical tasks and store mathematical values

Syntax to apply a Math method is

Math.method(expression)

where method is the method applied to a mathematical expression

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with the Math Object (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with the Math Object (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Math Constants

Math functions refer to built-in constants stored in JavaScript Math object

Syntax to access mathematical constants is

Math.CONSTANT

where CONSTANT is the name of one of the mathematical constants supported by Math object

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Math Constants (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with JavaScript Functions

Function: Collection of commands that performs an action or returns a value

A function name identifies a function and a set of commands that are run when the function is called

Parameters: Variables associated with the function

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with JavaScript Functions (continued)

General syntax of a JavaScript function is

function function_name(parameters){

commands

}

where,

function_name is the name of the function

parameters is a comma-separated list of variables used in the function

commands is the set of statements run by the function

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Calling a Function

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Function to Return a Value

Functions return values using return statement

function function_name(parameters){

commands

return value;

}

where value is the calculated value that is returned by the function

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Running Timed Commands

Methods to update the current and the remaining time constantly

Time-delayed commands

Timed-interval commands

Working with Time-Delayed Commands

Time-delayed commands: JavaScript commands run after a specified amount of time has passed

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Running Timed Commands (continued 1)

Time delay is defined using

setTimeout(“command”, delay);

where command is a JavaScript command and delay is the delay time in milliseconds before a browser runs the command

Running Commands at Specified Intervals

The timed-interval command instructs browsers to run a command repeatedly at a specified interval

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Running Timed Commands (continued 2)

Timed-interval commands are applied using setInterval() method

setInterval(“command”, interval);

where interval is the interval in milliseconds before the command is run again

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Running Timed Commands (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Controlling How JavaScript Works with Numeric Values

Handling Illegal Operations

Mathematical operations can return results that are not numeric values

JavaScript returns NaN if an operation does not involve only numeric values

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Controlling How JavaScript Works with Numeric Values (continued)

isNaN() function returns a Boolean value of true if the value is not numeric and false if otherwise

Infinity value is generated for an operation whose result is less than the smallest numeric value and greater than the largest numeric value supported by JavaScript

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining a Number Format

JavaScript stores a numeric value to 16 decimal places of accuracy

The number of digits displayed by browsers is controlled using toFixed() method

value.toFixed(n)

where value is the value or variable and n is the number of decimal places displayed in the output

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining a Number Format (continued)

toFixed() limits the number of decimals displayed by a value and converts the value into a text string

toFixed() rounds the last digit in an expression rather than truncating it

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Converting Between Numbers and Text

+ operator adds a text string to a number

For example,

testNumber = 123; // numeric value

testString = testNumber + “”; // text string

where + operator concatenates a numeric value with an empty text string resulting in a text string

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Converting Between Numbers and Text (continued 1)

parseInt() function extracts the leading integer value from a text string

It returns the integer value from the text string by discarding any non-integer characters

Example,

parseInt(“120.88 lbs”); // returns 120

parseInt(“weight equals 120 lbs”); // returns NaN

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Converting Between Numbers and Text (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition