JavaScript Third Edition

1
JavaScriptThird Edition
Chapter 1
Introduction to JavaScript
2
The World Wide Web and JavaScript

• World Wide Webs (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

3
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

4
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

5
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 (World Wide Web Consortium) adopted formal
  standard of DHTML version found in version 4 of
  Internet Explorer

6
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

7
Basic HTML Syntax

• HTML documents are text documents
• Contain formatting instructions, called tags
• All HTML documents must use the lthtmlgt element as
  the root element
• A root element contains all the other elements in
  a document
• Opening and closing lthtmlgt...lt/htmlgt tags are
  required
• Two other important HTML elements are the ltheadgt
  element and the ltbodygt element
• and the corresponding lt/headgt and lt/bodygt tags

8
Basic HTML Syntax (Cont.)

• The ltheadgt element and elements it contains are
  referred to as document head
• Following document head is the ltbodygt element
• Contains document body
• The ltbodygt element and the text and elements it
  contains are referred to as document body
• Attributes are used to configure HTML elements
• syntax attributevalue is used to assign a
  value to an attribute

9
Basic HTML Syntax (Cont.)
10
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

11
Creating an HTML Document (Cont.)

• To create a simple HTML document, follow these
  steps
• Start your text editor and create a new document,
  if necessary
• Type the following elements to begin the HTML
  document. lthtmlgt lt/htmlgt
• Note HTML is not case sensitive. However,
  XHTML is case sensitive and you must use
  lowercase letters for elements

12
Creating an HTML Document (Cont.)

• 3. Add the following ltheadgt and lttitlegt
  elements between the lthtmlgt...lt/htmlgt tag pair
• ltheadgt
• lttitlegtCentral Valley Copy Centerlt/titlegt
• lt/headgt
• 4. Add the following elements above the closing
  lt/htmlgt tag
• ltbodygt
• ltbasefont face"Arial"gt
• lt/bodygt

13
Creating an HTML Document (Cont.)

• 5. Add the following above the closing lt/bodygt
  element
• ltfont color "olive"gt
• lth1gtCentral Valley Copy Centerlt/h1gtlthrgt
• lth2gtHours of Operationlt/h2gtlt/fontgt
• ltfont color "blue"gt
• ltpgtMonday through Thursday, 745 a.m. - 945 p.m.
  ltbrgt
• Friday, 745 a.m. - 430 p.m.ltbrgt
• Saturday, 900 a.m. - 400 p.m.ltbrgt
• Sunday, Noon - 900 p.m.lt/pgtlt/fontgtlthrgt
• ltfont color "olive"gt
• lth2gtWhat's in the Copy Centerlt/h2gtlt/fontgt
• ltfont color "blue"gt
• ltulgt
• ltligtCopierslt/ligt
• ltligtFax machineslt/ligt
• ltligtBinding equipmentlt/ligt

14
Creating an HTML Document (Cont.)

• Continue to add the following
• lt/ulgtlt/fontgtlthrgt
• ltfont color "olive"gt
• lth2gtForms of Paymentlt/h2gt lt/fontgt
• ltfont color "blue"gt
• ltpgtCash, ATM, Visa, American Express, Discover
  Card, and MasterCard.lt/pgtlt/fontgt

15
Creating an HTML Document (Cont.)

• Save document as CopyCenter1.html
• Open the CopyCenter1.html document in Internet
  Explorer
• File, Open, Browse, select file, OK
• Close your Web browser window

16
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 (mobile phone, PDA)
• HTML is not suitable for user agents
• Cannot process HTML elements that handle the
  display and formatting of data

17
XHTML Document Type Definitions-DTDs

• A well-formed document
• Conforms to rules and requirements of XHTML
• Must include a lt!DOCTYPEgt declaration and the
  lthtmlgt, ltheadgt, and ltbodygt elements
• The lt!DOCTYPEgt declaration
• Belongs in the first line of an XHTML document
• Determines the XHTML DTD with which the document
  complies

18
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

19
XHTML Document Type Definitions-DTDs (Cont.)

• One of XHTML goals
• Separate the way the HTML is structured from the
  way the Web page is displayed in the browser
• To accomplish this goal
• Several commonly used HTML elements and
  attributes for display and formatting were
  deprecated
• Obsolete and will eventually be eliminated
• The three DTDs distinguished in part by degree to
  which they allow or do not allow deprecated HTML

20
XHTML Document Type Definitions-DTDs (Cont.)

• Transitional DTDs
• Allow you to use deprecated style elements in
  your XHTML documents
• Only used to create Web pages that use the
  deprecated HTML elements
• lt!DOCTYPE html PUBLIC
• "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transition
  al.dtd"gt

21
XHTML Document Type Definitions-DTDs (Cont.)

• Frameset DTD
• Identical to transitional DTD, except it includes
  the ltframesetgt and ltframegt 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

lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http//www.w3.org/TR/xhtml1/DTD/xht
ml1-frameset.dtd"gt
22
XHTML Document Type Definitions-DTDs (Cont.)

• Strict DTD
• Eliminates elements that were deprecated in the
  transitional DTD and frameset DTD
• Always try to use the strict DTD

lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt

• Return to your CopyCenter1.html document
• Add the lines above as the first line (above the
  opening lthtmlgt tag.
• Save your changes.

23
XHTML Document Type Definitions-DTDs (Cont.)
24
Writing Well-formed Documents

• Well-formed document
• Must include a lt!DOCTYPEgt declaration and the
  lthtmlgt, ltheadgt, and ltbodygt elements
• Important components
• XHTML documents must use lthtmlgt 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

25
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

26
Writing Well-formed Documents (Cont.)

• Three most common empty elements in HTML are
• the lthrgt element
• the ltbrgt element
• the ltimggt element
• To close an empty element in XHTML
• Add a space and a slash before the elements
  closing bracket
• lthr /gt
• ltbr /gt
• ltimg /gt
• XHTML documents do not use a root element of
  ltxhtmlgt

27
Writing Well-formed Documents (Cont.)

• Modify your CentralValley1.html document so that
  is is well formed
• Save your CentralValley1.html document as
  CentralValley2.html
• Delete the ltbasefontgt element and the six ltfontgt
  elements (and the closing lt/fontgt tags)
• Above the closing lt/headgt tag , add the
  followingltstyle type "text/css"gtbody
  font-family Arial color blue
  background-color white h1, h2 font-family
  Arial colorolive lt/stylegt
• Add a space and slash before the closing bracket
  of the three lthrgt elements and the three ltbrgt
  elements
• Save CentralValley2.html
• Open it in your web browser

28
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

29
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 contains errors
• Most Web browsers will probably
• Treat it as an HTML document
• Ignore the errors
• Render the page anyway

30
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

31
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

32
The JavaScript Programming Language (Cont.)

• 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
• Todays Web-based scripting languages are
  anything but simple

33
The JavaScript Programming Language (Cont.)

• Browsers scripting engine
• Executes scripting language code
• Just one kind of interpreter
• Scripting host
• Web browser that contains scripting engine
• Example Internet Explorer and Netscape

34
The JavaScript Programming Language (Cont.)

• JavaScript and Java programming language are
  entirely different
• Java
• Advanced programming language
• Created by Sun Microsystems
• Java programs are external programs that execute
  independent of browser
• In contrast, JavaScript programs run within a Web
  page and control the browser

35
The ltscriptgt 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 ltscriptgt element tells Web browser that the
  scripting engine must interpret the commands it
  contains

36
The ltscriptgt Element (Cont.)

• The type attribute of the ltscriptgt 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
• ltscript typetext/javascriptgt
• statements
• lt/scriptgt

37
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

38
Understanding JavaScript Objects (Cont.)

• To incorporate an object and associated method in
  JavaScript code
• Type the objects name, followed by a period,
  followed by the method
• salary.calcOvertime( )
• Many methods need to be provided with more
  specific information, called an argument, between
  the parentheses
• salary.calcOvertime(45)
• Some methods require numerous arguments, while
  others dont require any
• Providing an argument for a method is referred to
  as passing arguments

39
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 windows 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

40
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

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

• ltpregt
• ltscript type"text/javascript"gt
• document.writeln("Mahatma Gandi once said")
• document.writeln("ltemgtHonest differences are
  often a healthy sign of progress.lt/emgt")
• lt/scriptgt
• lt/pregt

ltscript type"text/javascript"gt document.write
("ltpgtMahatma Gandi once saidltbr
/gt") document.write ("ltemgtHonest differences are
often a healthy sign of progress.lt/emgtlt/pgt") lt/sc
riptgt
42
Using the write() and writeln() Methods (Cont.)

• Modify your CentralValley1.html document so that
  is is well formed
• Save your CentralValley2.html document as
  CentralValley3.html
• Add the following after the lth2gt element for the
  Hours of Operation heading
• ltscript type"text/javascript"gt
• document.write("ltpgtMonday through Thursday, 745
  a.m. - 945 p.m.ltbr /gt")
• document.write("Friday, 745 a.m. - 430 p.m.ltbr
  /gt")
• document.write("Saturday, 900 a.m. - 400
  p.m.ltbr /gt")
• document.write("Sunday, Noon - 900 p.m.lt/pgtlthr
  /gt")
• lt/scriptgt
• Save CentralValley3.html
• Open it in your web browser

43
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

44
Comments in JavaScript

• 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

45
Comments in JavaScript

• Modify your CentralValley1.html document so that
  is is well formed
• Save your CentralValley3.html document as
  CentralValley4.html
• Add the following block comment after the opening
  ltscriptgt tag/JavaScript code for Chapter
  1.The purpose of this code is simply to
  demonstratehow to add a script section to a Web
  page./
• Add the following line comments after the block
  comment// your name// today's date
• Save CentralValley4.html
• Open it in your web browser

46
Structuring JavaScript Code

• When adding JavaScript code, follow these rules
• Include a ltscriptgt Element for Each Code Section
• Place JavaScript in the Document Head or Document
  Body
• Create a JavaScript Source File

47
Include a ltscriptgt 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 ltscriptgt element for each
  section

48
Include a ltscriptgt Element for Each Code Section

• Modify your CentralValley4.html document to have
  multiple script sections
• Save your CentralValley4.html document as
  CentralValley5.html
• Modify the code below the "What's in the Copy
  Center" heading as followsltscript type
  "text/javascript"gtdocument.write("ltulgt")documen
  t.write("ltligtCopierslt/ligt")document.write("ltligtF
  ax machineslt/ligt")document.write("ltligtBinding
  equipmentlt/ligt")document.write("lt/ulgtlthr
  /gt")lt/scriptgt
• Modify the code below the "Forms of Payment"
  heading as followsltscript type
  "text/javascript"gtdocument.write("ltpgtCash, ATM,
  Visa, American Express, Discover Card, and
  MasterCard.lt/pgt")lt/scriptgt
• Save CentralValley5.html
• Open it in your web browser

49
Placing JavaScript in the Document Head or
Document Body

• You can place ltscriptgt elements in either the
  document head or document body
• Where you place your ltscriptgt 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

50
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

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

• Modify your CentralValley5.html document
• Save your CentralValley5.html document as
  CentralValley6.html
• Create a new script section above the closing
  lt/headgt tagltscript type "text/javascript"gtlt/s
  criptgt
• Add the line below to that script
  sectiondocument.write("lth1gtCentral Valley Copy
  Centerlt/h1gtlthr /gt")
• Delete the lth1gt and lthrgt elements that follow the
  opening ltbodygt tag
• Save CentralValley6.html
• Open it in your web browser

52
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

53
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 ltscriptgt element
• To access JavaScript code that is saved in an
  external file, you use the src attribute of the
  ltscriptgt element

54
Creating a JavaScript Source File (Cont.)

• 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 ltscriptgt
  element

55
Creating a JavaScript Source File (Cont.)

• There are several reasons to use a .js source
  file instead of adding the code directly to a
  document
• The document will be neater
• The JavaScript code can be shared among multiple
  Web pages
• JavaScript source files hide JavaScript code from
  incompatible browsers
• A combination of embedded JavaScript code and
  JavaScript source files can be used in the
  document

56
Creating a JavaScript Source File (Cont.)

• Create a new document in Notepad
• Add (or copy from your html document) the
  following statementsdocument.write("ltulgt")docu
  ment.write("ltligtCopierslt/ligt")document.write("ltl
  igtFax machineslt/ligt")document.write("ltligtBinding
  equipmentlt/ligt")document.write("lt/ulgtlthr /gt")
• Save the cocument as Copies.js in the same
  folder, then close it.
• Modify your CentralValley6.html document
• Save your CentralValley6.html document as
  CentralValley7.html
• Delete the statements within the script section
  for "What's in the Copy Center" heading
• Add the src attribute to the opening ltscriptgt
  tagltscript type "text/javascript" src
  "copies.js"gt
• Save CentralValley7.html
• Open it in your web browser

57
Hiding JavaScript Code

• You can enclose the code within a ltscriptgt
  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
• Comments begin with lt!-- and end with --gt

58
Hiding JavaScript Code (Cont.)

• JavaScript-compatible browsers never display
  JavaScript code
• Instead, code is interpreted by browsers
  scripting engine
• Only JavaScript comment tags can be used to hide
  JavaScript code from the interpreter

59
Hiding JavaScript Code (Cont.)

• Modify your CentralValley7.html document
• Modify the script section in the document head to
  hide it from incompatible browsers by adding the
  opening and closing comment lineslt!--HIDE FROM
  INCOMPATIBLE BROWSERSdocument.write("lth1gtCentral
  Valley Copy Centerlt/h1gtlthr /gt")// STOP HIDING
  FROM INCOMPATIBLE BROWSERS --gt
• Add the same code to the script sections for the
  Hours of Operation and Forms of Payment headings.
• Move your name and date from the JavaScript
  comments to XHTML comments at the top of the
  document, just below the opening lthtmlgt tag.lt!--
  Your name September 7, 2006 --gtYour name
  and date should be at the top of all homework
  html documents.
• Save CentralValley7.html
• Open it in your web browser

60
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

61
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

62
Homework Assignments

• Multiple-choice and true/false questions on pages
  38 - 41
• (remember to skip questions 18, 19)
• Projects 1.1 and 1.2
• Case Projects 1.2 and 1.3
• Due at the beginning of class on 9/26/06
• Remember to pass in your flash drive, a printout
  of all html code, and a printout of the
  multiple-choice and true/false answers all in a
  9" x 11½ " envelope with your name on it