Scribd
Upload
3 views

Chapter 1

The document provides an overview of JavaScript and its integration into web development, covering topics such as the history of the World Wide Web, basic HTML syntax, and the role of client-side and server-side scripting. It includes objectives for each chapter, customization options for presentations, and details on JavaScript programming concepts like variables, expressions, and event handling. Additionally, it discusses the structure of JavaScript code and best practices for including scripts in web documents.

Uploaded by

kentbaguio2234
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Chapter 1

The document provides an overview of JavaScript and its integration into web development, covering topics such as the history of the World Wide Web, basic HTML syntax, and the role of client-side and server-side scripting. It includes objectives for each chapter, customization options for presentations, and details on JavaScript programming concepts like variables, expressions, and event handling. Additionally, it discusses the structure of JavaScript code and best practices for including scripts in web documents.

Uploaded by

kentbaguio2234
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

About the Presentations

• The presentations cover the objectives found in the


opening of each chapter.
• All chapter objectives are listed in the beginning of
each presentation.
• You may customize the presentations to fit your
class needs.
• Some figures from the chapters are included. A
complete set of images from the book can be found
on the Instructor Resources disc.
JavaScript, Fifth Edition

Chapter 1
Introduction to JavaScript
Objectives

In this chapter, you will:


• Study the history of the World Wide Web
• Learn about Web development
• Add basic JavaScript code to your Web pages
• Learn about the JavaScript programming language
• Add structure to your JavaScript programs

JavaScript, Fifth Edition 3


Introduction to the World Wide Web

• 1962: memos by J. C. R. Licklider


• 1960s: ARPANET
– First Internet implementation
– Developed by Advanced Research Projects Agency
(ARPA): U.S. Department of Defense
• 1990 and 1991: World Wide Web (Web)
– Created by Tim Berners-Lee
– Hypertext linking
• Method of accessing cross-referenced documents

JavaScript, Fifth Edition 4


Introduction to the World Wide Web
(cont’d.)
• “Web” and “Internet”
– Not synonymous
• Hypertext link or hyperlink
– Reference to a specific Web page: click to open page
• Web page
– Document on the Web
– Identified by the Uniform Resource Locator (URL)
• Unique Web address
• Uniform Resource Identifier (URI)
– Many types of names and addresses on the Web
JavaScript, Fifth Edition 5
Introduction to the World Wide Web
(cont’d.)
• Web site
– Location on the Internet
• Contains Web pages and related files belonging to a
company, organization, individual
• Web browser
– Program displaying Web page on the screen
• Web server
– Computer delivering Web pages
• Handles requests
• Provides responses

JavaScript, Fifth Edition 6


Understanding Web Browsers

• NCSA Mosaic
– 1993: created at the University of Illinois
– Allowed Web navigation using a graphical user
interface (GUI)
• Netscape Navigator
– 1994: released by Netscape
– Soon controlled 75% of the market
• Microsoft Internet Explorer
– 1996: released by Microsoft

JavaScript, Fifth Edition 7


Understanding Web Browsers (cont’d.)

• Browser wars began over DHTML


– Forced Web industry to rapidly develop and adopt
advanced Web page standards
• 1994: World Wide Web Consortium (W3C)
established
– Oversee Web technology standards development
– Adopted Internet Explorer version four DHTML
• Loyal Netscape followers defected to Microsoft
• Firefox (open source)
– Now controls approximately 47% of the browser
market
JavaScript, Fifth Edition 8
Creating Web Pages

• Hypertext Markup Language (HTML)


– Markup language
• Set of characters or symbols defining a document’s
logical structure
– Based on an older Standard Generalized Markup
Language (SGML)

JavaScript, Fifth Edition 9


Basic HTML Syntax

• Tags: formatting instructions


– Determines how data displayed on a Web page
• Element: tag pair and any data it contains
– Element content: information contained in element’s
opening and closing tags
– Empty elements: do not require a closing tag
• Root element: contains all other elements in a
document
– <head> element: information used by the browser
– Document body: <body> element and the text and
elements it contains
JavaScript, Fifth Edition 10
Basic HTML Syntax (cont’d.)

Table 1-1 Common HTML elements


JavaScript, Fifth Edition 11
Basic HTML Syntax (cont’d.)

Figure 1-1 Fitness Center Web


page

JavaScript, Fifth Edition 12


Creating an HTML Document

• Text editors: Notepad or WordPad


– Word-processing applications
• Capable of creating simple text files
• HTML editors: Adobe Dreamweaver and Microsoft
Expression Web
– Graphical interfaces allowing immediate view of the
results
– Automates process of applying elements
• May add many unfamiliar elements and attributes to
documents

JavaScript, Fifth Edition 13


Working with XHTML and Well-Formed
Web Pages
• Extensible Hypertext Markup Language (XHTML)
– Next generation markup language for creating Web
pages
– Replaces HTML
• User agent
– Application retrieving and processing HTML and
XHTML documents
– Cannot process HTML elements handling data
display and formatting
– Examples: mobile phones and PDAs

JavaScript, Fifth Edition 14


Introduction to Web Development
• Web page design (Web design)
– Visual design and creation of documents appearing
on the World Wide Web
• Web page authoring (Web authoring)
– Creation and assembly of the tags, attributes, data
making up a Web page
• Web development or Web programming
– Design of software applications for a Web site
• Web browsers contain commands to view
underlying HTML code
– Only view to improve skills
JavaScript, Fifth Edition 15
Understanding Client/Server
Architecture
• Two-tier system
– Client and server
• Server or back end
– Usually a database: client requests information
• Client or front end
– Responsible for user interface
– Gathers information from user
• Submits information to server
• Receives, formats, presents results returned from the
server

JavaScript, Fifth Edition 16


Understanding Client/Server
Architecture (cont’d.)

Figure 1-3 The design of a two-tier client/server system

• Web built on a two-tier client/server system


– Requests and responses through which a Web
browser and Web server communicate happen with
HTTP

JavaScript, Fifth Edition 17


Understanding Client/Server
Architecture (cont’d.)

Figure 1-4 The design of a three-tier client/server system


• Three-tier, multitier, client/server system
– Client tier
– Processing tier
– Data storage tier
JavaScript, Fifth Edition 18
JavaScript and Client-Side Scripting

• Static Web pages


– Cannot change after browser renders them
• HTML and XHTML produced static documents
• JavaScript
– Allows Web page authors to develop interactive Web
pages and sites
– Client-side scripting language: runs on local browser
• Scripting engine executes scripting language code
• Scripting host
– Web browser containing scripting engine
JavaScript, Fifth Edition 19
JavaScript and Client-Side Scripting
(cont’d.)
• JavaScript history
– First introduced in Navigator (LiveScript)
– Navigator 2.0: name changed to JavaScript 1.0
– Microsoft released Internet Explorer 4.0 version of
JavaScript (Jscript)
• ECMAScript
– International, standardized version of JavaScript
– Most recent version: edition 3

JavaScript, Fifth Edition 20


JavaScript and Client-Side Scripting
(cont’d.)
• Limitations of JavaScript
– Cannot be used outside the Web browser
– No mechanism for creating a network connection or
accessing a database
– Cannot run system commands or execute programs
on a client

JavaScript, Fifth Edition 21


Understanding Server-Side Scripting

• Server-side scripting
– Scripting language executed from a Web server
– Popular languages: PHP, ASP, JSP
• Can develop interactive Web sites to communicate
with a database
• Server-side scripting language limitations
– Cannot access or manipulate a Web browser
– Cannot run on a client tier

JavaScript, Fifth Edition 22


Understanding Server-Side Scripting
(cont’d.)

Figure 1-5 How a Web server processes a server-side script

JavaScript, Fifth Edition 23


Should You Use Client-Side or Server-
Side Scripting?
• General rule of thumb
– Allow client to handle user interface processing and
light processing (data validation)
– Have the Web server perform intensive calculations
and data storage
• Important to perform as much processing as
possible on the client

JavaScript, Fifth Edition 24


Adding JavaScript to Your Web Pages

• Basic procedures
– Used for adding JavaScript to Web pages

JavaScript, Fifth Edition 25


Using the <script> Element

• Scripts
– JavaScript programs contained within a Web page
• <script> element
– Tells the browser that the scripting engine must
interpret the commands it contains
– Type attribute
• Tells the browser which scripting language and which
version of the scripting language being used

JavaScript, Fifth Edition 26


Understanding JavaScript Objects

• Object
– 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
– Procedures associated with an object

JavaScript, Fifth Edition 27


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

JavaScript, Fifth Edition 28


Using the write() and writeln()
Methods
• Document object
– Represents content of a browser’s window
• Create new Web page text with the write()
method or the writeln() method of the
Document object
– Both methods require a text string as an argument
– Text string or literal string
• Text contained within double or single quotation marks
• writeln() method adds a line break after the line
of text
JavaScript, Fifth Edition 29
Using the write() and writeln()
Methods (cont’d.)

Figure 1-6 Output of a script that uses the


writeln() method of the Document object
JavaScript, Fifth Edition 30
Case Sensitivity in JavaScript

• JavaScript is case sensitive


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

JavaScript, Fifth Edition 31


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

JavaScript, Fifth Edition 32


Writing Basic JavaScript Code

• Learn how to write basic JavaScript code


– Start with variables

JavaScript, Fifth Edition 33


Using Variables

• Variables
– Values a program stores in computer memory
• Assigning a value to a variable
– Same as storing a value in a variable

JavaScript, Fifth Edition 34


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
JavaScript, Fifth Edition 35
Assigning Variable Names (cont’d.)

Table 1-2 JavaScript reserved words


JavaScript, Fifth Edition 36
Assigning Variable Names (cont’d.)

• Declaring and initializing variables


– Use reserved keyword var to create variables
• Example: var myVariable;
– Initialize variable using the following syntax:
• var variable_name = value;
– Assignment operator: equal sign (=)
• Assigns value on the right side of the expression to the
variable on the left side of the expression
– Assigning a literal string value to a variable
• Enclose text in quotation marks
– Can assign the value of one variable to another
JavaScript, Fifth Edition 37
Assigning Variable Names (cont’d.)

• Displaying variables: print 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
JavaScript, Fifth Edition 38
Assigning Variable Names (cont’d.)

• Displaying variables (cont’d.)


– Use a plus sign to perform arithmetic operations
involving variables containing numeric values

Figure 1-9 Results of


script that adds the
values of two variables
JavaScript, Fifth Edition 39
Assigning Variable Names (cont’d.)

• 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

JavaScript, Fifth Edition 40


Assigning Variable Names (cont’d.)

Figure 1-10 Results of script that


includes a changing variable

JavaScript, Fifth Edition 41


Building Expressions

• Expression
– Literal value or variable or a combination of literal
values, variables, operators, and other expressions
• Evaluated by JavaScript interpreter to produce a result
• 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
JavaScript, Fifth Edition 42
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

JavaScript, Fifth Edition 43


Understanding Events (cont’d.)

Table 1-3 JavaScript events

JavaScript, Fifth Edition 44


Understanding Events (cont’d.)

• Working with elements and events


– Events: associated with XHTML elements
– Event handler
• Code that executes in response to a specific event
– JavaScript code for an event handler
• Contained within the quotation marks following the
name of the JavaScript event handler

JavaScript, Fifth Edition 45


Understanding Events (cont’d.)

Table 1-4 XHTML elements and their associated events


JavaScript, Fifth Edition 46
Understanding Events (cont’d.)

• 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

JavaScript, Fifth Edition 47


Structuring JavaScript Code

• Adding JavaScript code to a document


– Must follow certain rules regarding placement and
organization of that code

JavaScript, Fifth Edition 48


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

JavaScript, Fifth Edition 49


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

JavaScript, Fifth Edition 50


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
JavaScript, Fifth Edition 51
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
JavaScript, Fifth Edition 52
Writing Valid JavaScript Code

• JavaScript statements contain symbols


– Prevents XHTML document from being well formed
• HTML handles successfully
– <script> element statements interpreted as
character data
– Character data (CDATA)
• Section of a document not interpreted as markup
• XHTML documents
– <script> element statements interpreted as markup
• Parsed character data (PCDATA)

JavaScript, Fifth Edition 53


Writing Valid JavaScript Code (cont’d.)

• JavaScript code in an XHTML document


– Treated as PCDATA
• Validation fails
• 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 54


Summary

• Hypertext linking: allows quick opening of Web


pages
• HTML replaced by XHTML
• Web built on a two-tier client/server system
• JavaScript programming language allows for
interactive Web pages and sites
– <script> element tells Web browser to interpret the
commands it contains
– Can save JavaScript code in a source file
• Validating parser verifies a Web page
JavaScript, Fifth Edition 55

You might also like