JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript.

JavaScript, Fifth Edition

Chapter 1Introduction to JavaScript

Development of JavaScript

JavaScript is a subset of Java Differences between Java and JavaScript:

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

Running script Two places where script executes:

◦ Server-side - programs that run on the server that hosts a Web site◦ Client-side - programs that run on each user’s computer

Adding JavaScript to Your Web Pages

JavaScript, Fifth Edition 5


Using the <script> Element

• Scripts– JavaScript programs contained within a Web page– A JavaScript program can either be placed directly in

a Web page file or saved in an external text file

• <script> element– Tells the browser that the scripting engine must

interpret the commands it contains– <script type="mime-type">

• Tells the browser which scripting language and which version of the scripting language being used


Using the <script> Element

<script type="mime-type">

script statements;

</script>– Each statement inside the script tags is a single line

that indicates an action for the browser to take– The semicolon notifies the browser that it has reached

the end of the statement

Understanding JavaScript Objects

• Object– any item—from the browser window itself to a document displayed in

the browser to an element displayed within the document

– Programming code and data

• Treated as an individual unit or component

• Procedures– Individual statements used in a computer program grouped into logical

units

– Used to perform specific tasks

• Methods– a process by which JavaScript manipulates or acts upon the properties

of an object

– Procedures associated with an object


Understanding JavaScript Objects (cont’d.)

• Property– Piece of data associated with an object– Assign value to a property using an equal sign

• Argument– Information that must be provided to a method

• Passing arguments– Providing an argument for a method



Using the write() and writeln()Methods

• Document object– Represents content of a browser’s window

• 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.


Using the write() and writeln()Methods

document.write(“text”);

or

document.writeln(“text”)’

The document.write() and document.writeln() methods are identical, except that the document.writeln() method preserves any line breaks in the text string

– Both methods require a text string as an argument– Text string (aka literal string)

• Text contained within double or single quotation marks


Figure 1-6 Output of a script that uses the writeln() method of the Document object

Using the write() and writeln()Methods (cont’d.)

Case Sensitivity in JavaScript

• JavaScript is case sensitive

• Ignores most occurrences of extra white space

• Do not break a statement into several lines

• Within JavaScript code:– Object names must always be all lowercase


Let’s Practice

• Write a basic HTML page containing script tags.

• Inside the script, use the document object to write out your name

Syntax is: objectname.methodname

document.write


Adding Comments to a JavaScript Program

• Comments– Nonprinting lines placed in code containing various

types of remarks

• Line comment– Hides a single line of code– Add two slashes // before the comment text

• Block comments– Hide multiple lines of code– Add /* before the first character included in the block

and */ after the last character in the block


Variables


Using Variables

• Variables– A variable is a named item in a program that stores

information– Values a program stores in computer memory

• Assigning a value to a variable– Same as storing a value in a variable


Declaring a 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. • Use reserved keyword var to create variables

• 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

• Assignment operator: equal sign (=)– Assigns value on the right side of the expression to the variable on the

left side of the expressionJavaScript, Fifth Edition 18

Assigning Variable Names

• Identifier– Name assigned to a variable– Rules and conventions

• Must begin with an uppercase or lowercase ASCII letter, dollar sign ($), or underscore ( _ )

• Can use numbers in an identifier: not as the first character

• Cannot include spaces in an identifier

• Cannot use reserved words for identifiers

• Reserved words (keywords)– Special words: part of the JavaScript language syntax



Table 1-2 JavaScript reserved words

Assigning Variable Names (cont’d.)

JavaScript variable types

• Numeric variables– any number, such as 13, 22.5, etc

• String variables– any group of text characters, such as “Hello” or “Happy

Holidays!”– Must be enclosed within either double or single quotations (but

not both)

• Boolean variables– accepts only true and false values

• Null variables– has no value at all

• You must declare a variable before using itJavaScript, Fifth Edition 21


Printing variables

• Printing a variable– Pass variable name to document.write() or document.writeln()method

– Do not enclose it in quotation marks

Figure 1-8 Results of script that assigns the value of one variable to another

The + sign

• JavaScript is a weakly typed language

• The + symbol can be used with either numeric values or text strings

var total = 5 + 4;

var emLink = "cadler" + "@" + "mpl.gov";



The + sign

– The plus sign can be used to perform arithmetic operations involving variables containing numeric values

Figure 1-9 Results of script that adds the values of two variables

Modifying variables

• Modifying variables– Change a variable’s value at any point in a script

• Use a statement including the variable’s name

• Followed by an equal sign

• Followed by the value to assign to the variable

var total = 5 + 4;var total = 22;


Building Expressionsvar total = 5 + subtotal;

• Variables and data are useful when used in an expression

• Expression– Literal value or variable or a combination of literal

values, variables, operators, and other expressions• Can be evaluated by JavaScript interpreter to produce

a result


Building Expressionsvar total = 5 + 4;

• Use operands and operators to create expressions– Operands

• Variables and literals contained in an expression

• Literal– Value such as a literal string or a number

– Operators• Symbols used in expressions to manipulate operands

+, -, *, /


Lets Practice

• Write a basic HTML page containing script tags.

• Inside the script, create a variable to store your name in.

• Use the document object to write out the variable’s contents

Syntax is: objectname.methodname, as in

document.write()



Understanding Events

• Event– Specific circumstance monitored by JavaScript– Script can respond to in some way– Allows users to interact with Web pages

• Common events: actions users perform

• Can also monitor events not resulting from user actions


Table 1-3 JavaScript events

Understanding Events (cont’d.)



• Working with elements and events– Events: associated with HTML elements– Event handler

• Code that executes in response to a specific event

– JavaScript code for an event handler• Can be contained within the quotation marks following

the name of the JavaScript event handler

<element eventhandler=“Javascript Code”><input type=“button” onclick=“window.alert(‘hi there’);” />


Table 1-4 XHTML elements and their associated events



Referencing web page elements

– Append element’s name to the name of any elements in which it is nested

• Start with the Document object

– Specific element properties• Appended to the element name

– Allows for the retrieval of information about an element or the ability to change the values assigned to its attributes

Structuring JavaScript Code



Including a <script> Element for Each Code Section

• Can include as many script sections as desired– Must include a <script> element for each section– Example code below

• See Figure 1-13 for results


Placing JavaScript in the Document Head or Document Body

• <script> element placement varies– Can place in the document head or document body– Statements in a script

• Rendered in the order in which they appear in the document

– General rule• Place as much JavaScript code as possible in the

document head

• Important if code performs behind-the-scenes tasks required by script sections located in the document body


Creating a JavaScript Source File

• External file containing JavaScript code– Usually designated by the .js file extension

• Can legally have any extension

– Contains only JavaScript statements• No <script> element and no XHTML elements

– Use the src attribute of the <script> element

• Advantages– Neater code; code sharing; ability to hide JavaScript

code from incompatible browsers

• Can use embedded JavaScript code and JavaScript source files combination


Validating Web Pages

• Validating parser– Checks for a well formed Web page– Verifies document conforms to a specific DTD

• Validation– Process of verifying a well-formed document and

checking the elements in your document

• Web development tools offer validation capabilities

• Validating services found online– W3C Markup Validation Service:

• http://validator.w3.org

http://validator.w3.org/


Writing Valid JavaScript Code

• JavaScript statements contain symbols– Prevents HTML document from being well formed– Web pages will not validate when they contain script

• Two options to resolve validation issue– Move code into a source file– Keep JavaScript code within the document

• Enclose code within a <script> element within a CDATA

JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript.

Documents