chapter 1 introduction to javascript javascript, third edition

Chapter 1

Introduction to JavaScript

JavaScript, Third Edition

JavaScript, Third Edition 2

Objectives• Study the history of the World Wide Web

• Work with structured Web pages

• Learn about the JavaScript programming language

• Add structure to your JavaScript programs

• Learn about logic and debugging


The World Wide Web and JavaScript

• World Wide Web’s (WWW) original purpose: – Locate and display information

• As WWW grew, greater interactivity

– Web more useful

– New Web programming language needed:• JavaScript created to fill programming need


The World Wide Web and JavaScript (Cont.)

• JavaScript:– Considered a critical part of Web page design and

authoring– Can turn static documents into applications– Code can change contents of a Web page after a

browser has rendered it– Creates visual effects – Can control Web browser window itself

• None of this was possible before the creation of JavaScript


The World Wide Web• Internet is vast network that connects computers all

over the world• Common misconception:

– That “Web” and “Internet” are synonymous• The Web is only one part of the Internet

– Means of communicating on the Internet• The Internet is composed of other communication

methods – Example: E-mail systems that send and receive

messages


Web Browsers• Internet Explorer and Netscape: web browsers• Browser wars began over DHTML

– DHTML allows a Web page to change after it has been rendered by browser

– Examples of DHTML include: change document background color and create effects such as animation

• Earlier versions of Internet Explorer and Navigator – DHTML elements were incompatible

• W3C adopted formal standard of DHTML version found in version 4 of Internet Explorer


HTML Documents• HTML is a simple language

– Used to create Web pages that appear on World Wide Web

– Based on an older language • SGML: Standard Generalized Markup Language

• Like SGML, HTML originally designed to define elements in a document independent of how they would appear

• HTML now capable of defining how elements should appear in a browser


Basic HTML Syntax• HTML documents are text documents

– Contain formatting instructions, called tags– Should be defining the contents

• All HTML documents must use the <html> element as the root element

• A root element contains all the other elements in a document

• Opening and closing <html>...</html> tags are required• Two other important HTML elements are the <head>

element and the <body> element


Basic HTML Syntax (Cont.)

• The <head> element and elements it contains are referred to as document head

• Following document head is the <body> element– Contains document body– The <body> element and the text and elements it

contains are referred to as document body• Attributes are used to configure HTML elements• syntax attribute=“value” is used to assign a value to an

attribute


Basic HTML Syntax (Cont.)


Creating an HTML Document

• You can create HTML document in any text editor– Notepad and WordPad

– Or in HTML editors like Macromedia Dreamweaver

• To view final results, open document in a Web browser

• HTML editors automatically add elements and attributes that may be unfamiliar to you


Creating an HTML Document (Cont.)

• To create a simple HTML document, follow these steps:

1. Start your text editor and create a new document, if necessary

2. Type the following elements to begin the HTML document. <HTML> </HTML>



3. Add the following <head> and <title> elements between the <html>...</html> tag pair

<head><title>Central Valley Copy Center</title></head>

4. Add the following elements above the closing </html> tag

<body><basefont face="Arial"></body>

5. Add any text above the closing </body> element



• Save document as CopyCenter.html

• Open the CopyCenter.html document in Internet Explorer or another Web browser

• Close your Web browser window


Working with Well-Formed Web Pages

• HTML is being replaced with XHTML (extensible hypertext markup language)

– HTML is useful only for rendering documents in traditional browsers

• Web is expanding to other media, called user agents:

– Devices capable of retrieving and processing HTML and XHTML document

• HTML is not suitable for user agents


XHTML Document Type Definitions-DTDs

• A well-formed document:

– Conforms to rules and requirements of XHTML

– Must include a <!DOCTYPE> declaration and the <html>, <head>, and <body> elements

• The <!DOCTYPE> declaration:

– Belongs in the first line of an XHTML document

– Determines the XHTML DTD with which the document complies


XHTML Document Type Definitions-DTDs (Cont.)

• A document type definition (DTD):– Defines the elements and attributes that can be used in

a document, along with the rules that a document must follow when it includes them

• You can use three types of DTDs with XHTML documents: – Transitional– Strict– Frameset



• One of XHTML goals:– Separate the way the HTML is structured from the way

the parsed Web page is displayed in the browser• To accomplish this goal:

– Several commonly used HTML elements and attributes for display and formatting were deprecated

• There are three types of DTDs:– Transitional DTD– Frameset DTD– Strict DTD



• The three DTDs distinguished in part by degree to which they allow or do not allow deprecated HTML

• Traditional DTDs

– Allow you to use deprecated style elements in your XHTML documents

– Only used to create Web pages that use the deprecated HTML elements



• Frameset DTD

– Identical to transitional DTD, except it includes the <frameset> and <frame> elements

• Allows you to split browser window into two or more frames

– Frames have been deprecated in favor of tables

– However, frameset documents are still widely used



• Strict DTD

– Eliminates elements that were deprecated in the transitional DTD and frameset DTD

– Always try to use the strict DTD


Writing Well-formed Documents• Well-formed document:

– Must include a <!DOCTYPE> declaration and the <html>, <head>, and <body> elements

• Important components:– XHTML documents must use <html> as the root element– XHTML is case sensitive– XHTML elements must have a closing tag– Attribute values must appear within quotation marks– Empty elements must be closed– XHTML elements must be properly nested


Writing Well-formed Documents (Cont.)

• Nesting refers to how elements are placed inside other elements

• In an HTML document, it makes no difference how the elements are nested

• In XHTML, each innermost element must be closed before another element is closed


Writing Well-formed Documents (Cont.)

• Three most common empty elements in HTML are:– the <hr> element– the <br> element– the <img> element

• To close an empty element in XHTML:– Add a space and a slash before the element’s closing

bracket• XHTML documents do not use a root element of

<xhtml>


Validating Web Pages

• The Web browser cannot tell whether or not the XHTML document is well formed

• To ensure that your XHTML document is well formed and its elements are valid:

– Use a validating parser

• Program that checks whether an XHTML document is well formed and whether the document conforms to a specific DTD


Validating Web Pages (Cont.)• Validation:

– Process of verifying that your XHTML document is well formed

– Check that document elements are correctly written according to element definitions in a specific DTD

• If an XHTML document is not validated and contains errors:– Most Web browsers will probably

• Treat it as an HTML document• Ignore the errors• Render the page anyway


The JavaScript Programming Language

• JavaScript

– Client-side scripting language

– Allows Web page authors to develop interactive Web pages and sites

– Used in most Web browsers including Internet Explorer


The JavaScript Programming Language (Cont.)

• Client-side scripting

– Scripting language that runs on local browser (the client) instead of on Web server

• Server-side scripting

– Scripting language that executes on a Web server



• Some popular server-side scripting languages include:– Common Gateway Interface (CGI), Active Server

Pages (ASP), and Java Server Pages (JSP)

• Scripting language:– Originally, fairly simple programming languages

– Today’s Web-based scripting languages are anything but simple



• Browser’s scripting engine:

– Executes scripting language code

– Just one kind of interpreter

• Scripting host

– Web browser that contains scripting engine

– Example: Internet Explorer and Netscape



• JavaScript and Java programming language are entirely different

• Java – Advanced programming language – Created by Sun Microsystems – Considerably more difficult to master than JavaScript– Java programs are external programs that execute

independent of browser• In contrast, JavaScript programs run within a Web

page and control the browser


The <script> Element

• JavaScript programs– Run from within a Web page (either an HTML or

XHTML document)

– Code is typed directly into Web page code as separate section

– Contained within a Web page are often called scripts

• The <script> element tells Web browser that the scripting engine must interpret the commands it contains


The <script> Element (Cont.)• The type attribute of the <script> element

– Tells browser which scripting language and which version is being used

– You assign a value of “text/javascript” to the type attribute to indicate that the script is written with JavaScript

– You include the following code in a document to tell Web browser the statements that follow must be interpreted by JavaScript scripting engine:

<script type=“text/javascript”>statements</script>


Understanding JavaScript Objects• JavaScript is also considered an Object-based

programming language• An object

– Programming code and data that can be treated as individual unit or component

• A method– Procedures associated with an object

• A property– Piece of data, such as a color or a name that is

associated with an object


Understanding JavaScript Objects (Cont.)

• To incorporate an object and associated method in JavaScript code:– Type the object’s name, followed by a period, followed

by the method• Many methods need to be provided with more specific

information, called an argument, between the parentheses

• Some methods require numerous arguments, while others don’t require any

• Providing an argument for a method is referred to as passing arguments


Using the write() and writeln() Methods

• JavaScript treats many things as objects• Document object

– One of the most commonly used objects in JavaScript programming

– Represents browser window’s content• To create new text on a Web page

– use the write() method or the writeln() method of the Document object

• Only reason to use the write() and writeln() methods is to add new text to a Web page while it is being rendered


Using the write() and writeln() Methods (Cont.)

• the write() and writeln() methods – Require a text string as an argument

– Perform essentially the same function that is performed when a text is manually added to the body of a standard Web page document

• The only difference between the write() and writeln() methods is that the writeln() method adds a line breaks after the line of text


Case Sensitivity in JavaScript

• JavaScript – Like XHTML, is case sensitive– Within JavaScript code, object names must always be

all lower case

• Comments – Good programming practice to add comments to your

code– Nonprinting lines placed in the code to contain various

types of remarks


Case Sensitivity in JavaScript (Cont.)

• JavaScript supports two kinds of comments: • line comment

– Hides single line of code – To create:

• Add two slashes // before the text you want to use as a comment

• Block comments – Hide multiple lines of code– To create:

• Add /* to the first line that you want included in the block• Close by typing */ after the last character in the block


Structuring JavaScript Code

• When adding JavaScript code, follow these rules:

– Include a <script> Element for Each Code Section

– Place JavaScript in the Document Head or Document Body

– Create a JavaScript Source File


Include a <script> Element for Each Code Section

• You can include as many script sections as you like within a document.

• However, when you include multiple script sections in a document

– You must include a <script> element for each section


Placing JavaScript in the Document Head or Document Body

• You can place <script> elements in either the document head or document body

• Where you place your <script> elements varies, depending on the program you are writing

• The statements in a script are rendered in the order in which they appear in the document


Placing JavaScript in the Document Head or Document Body (Cont.)

• Good idea to place as much of your JavaScript code as possible in document head because:– Head of a document is rendered before the document

body

– JavaScript code is processed before the main body of the document is displayed

– Your code might be performing behind-the-scenes tasks that are required by script sections located in document body


Creating a JavaScript Source File

• You can also save JavaScript code in an external file called a JavaScript source file

• You can then write a statement in the document that executes (or “calls”) the code saved in the source file

• When a browser encounters a line calling a JavaScript source file

– It looks in the JavaScript source file and executes it


Creating a JavaScript Source File (Cont.)

• A JavaScript source file

– Is usually designated by the file extension .js and contains only JavaScript statements

– It does not contain a <script> element

– To access JavaScript code that is saved in an external file, you use the src attribute of the <script> element



• A Java Script Source File

– You assign to the src attribute the Uniform Resource Locator (URL) of a JavaScript source file

– Cannot include XHTML elements

– When you specify a source file in your document using the src attribute, the browser ignores any other JavaScript code located within the <script> element



• There are several reasons to use a .js source file instead of adding the code directly to a document:1.The document will be neater2.The JavaScript code can be shared among multiple Web

pages3. JavaScript source files hide JavaScript code from

incompatible browsers4.A combination of embedded JavaScript code and

JavaScript source files can be used in the document


Hiding JavaScript Code

• You can enclose the code within a <script> element in an XHTML comment block

– Hides embedded code from incompatible browsers

• Browsers compatible with JavaScript will ignore XHTML comment tags and execute the JavaScript code normally


Hiding JavaScript Code (Cont.)

• JavaScript-compatible browsers never display JavaScript code

– Instead, code is interpreted by browser’s scripting engine

• Only JavaScript comment tags can be used to hide JavaScript code from the interpreter


Logic and debugging

• All programming languages, including JavaScript, have their own syntax, or rules

• To write a program, you must understand the syntax of the programming language and computer-programming logic

• The term logic

– Refers to the order in which various parts of a program run, or execute


Logic and debugging (Cont.)• A logical error

– Might be multiplying two values when you meant to divide them

• bug – Any error in a program that causes it to function

incorrectly

• debugging – refers to the act of tracing and resolving errors in a

program


Chapter Summary

• HTML documents– Text documents that contain formatting instructions

called tags• DTDs (Document type definition)

– Define elements and attributes that can be used in a document and the rules that a document must follow

• JavaScript– Client-side scripting language that allows Web pages

to be interactive


Chapter Summary (Cont.)

• Object

– Programming code and data that can be treated as an individual unit

• External files

– Files that contain JavaScript code

– Also called source files


W3C Links:

• http://www.w3schools.com/• JavaScript Reference:

http://www.w3schools.com/jsref/default.asp

• JavaScript Tutorial:http://www.w3schools.com/js/default.asp

• Validation:http://validator.w3.org/

http://www.w3schools.com/

http://www.w3schools.com/jsref/default.asp

http://www.w3schools.com/js/default.asp

http://validator.w3.org/