Tutorial 1
Introduction to
JavaScript
Section A – Programming, HTML,
and JavaScript
JavaScript Tutorial 1 - Intr 1
oduction to JavaScript
Tutorial 1A Topics
Section A – Programming, HTML, and
JavaScript
• About the World Wide Web
• Uses of JavaScript
• About Hypertext Markup Language
• How to creating an HTML document
• About the JavaScript programming language
• About logic and debugging
JavaScript Tutorial 1 - Intr 2
oduction to JavaScript
Programming, HTML, and
JavaScript
The World Wide Web
• Created in 1989
European Laboratory for Particle Physics
(Geneva Switzerland)
• Purpose
Provide an easy way to access cross-
referenced documents that exist on the
internet
JavaScript Tutorial 1 - Intr 3
oduction to JavaScript
Programming, HTML, and
JavaScript
The World Wide Web
• Hypertext links
Contain reference to locate and open
specific documents
• Hypertext Markup Language (HTML)
Language used to design web pages
(documents)
• Web Browser
Program that displays HTML documents
JavaScript Tutorial 1 - Intr 4
oduction to JavaScript
Programming, HTML, and
JavaScript
The World Wide Web
• Uniform Resource Locator (URL)
A type of Uniform Resource Identifier (URI)
• Identifies names and addresses on the WWW
A unique identifier for a web document
• e.g., a telephone number or mailing address
JavaScript Tutorial 1 - Intr 5
oduction to JavaScript
Programming, HTML, and
JavaScript
The World Wide Web
• Uniform Resource Locator (URL)
Consists of 4 parts:
• Protocol Hyper Text Transfer Protocol (HTTP)
• Domain Name or Internet Protocol (IP) address
• Directory
• Filename
Specific document filename
index.(s)htm(l) or default.(s)htm(l)
JavaScript Tutorial 1 - Intr 6
oduction to JavaScript
JavaScript Tutorial 1 - Intr 7
oduction to JavaScript
Programming, HTML, and
JavaScript
JavaScript’s role on the Web
• HTML
Purpose tell the browser how a document
should appear
Static can view or print (no interaction)
JavaScript Tutorial 1 - Intr 8
oduction to JavaScript
Programming, HTML, and
JavaScript
JavaScript’s role on the Web
• JavaScript Programming Language
Developed by Netscape for use in Navigator
Web Browsers
Purpose make web pages (documents)
more dynamic and interactive
• Change contents of document, provide forms and
controls, animation, control web browser window,
etc.
JavaScript Tutorial 1 - Intr 9
oduction to JavaScript
JavaScript Tutorial 1 - Intr 10
oduction to JavaScript
JavaScript Tutorial 1 - Intr 11
oduction to JavaScript
JavaScript Tutorial 1 - Intr 12
oduction to JavaScript
Programming, HTML, and
JavaScript
Hypertext Markup Language
• HTML Document
Text document that contains:
• Tags formatting instructions
• Text to be displayed
Document is parsed or rendered by browser
JavaScript Tutorial 1 - Intr 13
oduction to JavaScript
Programming, HTML, and
JavaScript
Hypertext Markup Language
• HTML Document
Tags
• Enclosed in brackets <tag>
• Generally consist of:
Opening tags <tag>
Closing tags </tag>
• Text contained between the opening and closing
tags are formatted according to tag instructions
JavaScript Tutorial 1 - Intr 14
oduction to JavaScript
Programming, HTML, and
JavaScript
Hypertext Markup Language
• HTML Document
Tags
• All HTML documents begin with <html> tag and
end with </html>
• HTML is not case sensitive
JavaScript Tutorial 1 - Intr 15
oduction to JavaScript
Programming, HTML, and
JavaScript
Hypertext Markup Language
• HTML Document
Tag Attributes
• Used to configure tags
• Placed before closing bracket of opening tag
<tag attribute=“value”>some text</tag>
JavaScript Tutorial 1 - Intr 16
oduction to JavaScript
JavaScript Tutorial 1 - Intr 17
oduction to JavaScript
JavaScript Tutorial 1 - Intr 18
oduction to JavaScript
JavaScript Tutorial 1 - Intr 19
oduction to JavaScript
Programming, HTML, and
JavaScript
Hypertext Markup Language
• HTML Document
Web browser only acknowledges text and
valid tags
Web browser ignores non-printing
characters
• Spaces, tabs, carriage returns
Must use valid tags or special character
codes to accomplish this:
• Non-breaking space
JavaScript Tutorial 1 - Intr 20
oduction to JavaScript
JavaScript Tutorial 1 - Intr 21
oduction to JavaScript
JavaScript Tutorial 1 - Intr 22
oduction to JavaScript
Programming, HTML, and
JavaScript
Creating an HTML Document
• Text editor (text)
Notepad, WordPad
• Word Processor (that can create text
files)
Word
• HTML Editor (WYSIWYG)
FrontPage, PageMill
• HTML Converters (WYSIWYG)
Word, PowerPoint
JavaScript Tutorial 1 - Intr 23
oduction to JavaScript
JavaScript Tutorial 1 - Intr 24
oduction to JavaScript
Programming, HTML, and
JavaScript
The JavaScript Programming
Language
• Scripting Languages
Executed by an interpreter contained within
the web browser (scripting host)
Interpreter uses a scripting engine
• Converts code to executable format each time it
runs
• Converted when browser loads web document
JavaScript Tutorial 1 - Intr 25
oduction to JavaScript
Programming, HTML, and
JavaScript
The JavaScript Programming Language
• JavaScript
Originally called LiveScript when introduced in
Netscape Navigator
In Navigator 2.0, name changed to JavaScript
Current version 1.5
• JScript
MS version of JavaScript
• Current version 5.5
JavaScript Tutorial 1 - Intr 26
oduction to JavaScript
Programming, HTML, and
JavaScript
The JavaScript Programming
Language
• ECMAScript
International, standardized version (Edition
3)
Both versions (JavaScript and JScript)
conform to the standard
• Although both have proprietary extensions
Focus of this text
JavaScript Tutorial 1 - Intr 27
oduction to JavaScript
Programming, HTML, and
JavaScript
The JavaScript Programming
Language
• JavaScript
Two formats:
• Client-side
Program runs on client (browser)
• Server-side
Program runs on server
Proprietary to web server platform
JavaScript Tutorial 1 - Intr 28
oduction to JavaScript
JavaScript Tutorial 1 - Intr 29
oduction to JavaScript
Programming, HTML, and
JavaScript
Logic and Debugging
• Syntax
Rules of the language
• Logic
Order of execution of various parts of the
program
JavaScript Tutorial 1 - Intr 30
oduction to JavaScript
Programming, HTML, and
JavaScript
Logic and Debugging
• Syntax error
Misuse of syntax
• e.g., typing fer instead of for
• Logic errors
Unintended operation of program
• e.g., Infinite loop
JavaScript Tutorial 1 - Intr 31
oduction to JavaScript
Programming, HTML, and
JavaScript
Logic and Debugging
• Debugging
Tracing and resolving errors in a program
Coined by Admiral Grace Hopper
• Moth short-circuited a relay
“bug” in the system
• Removed it system “debugged”
Not an exact science
JavaScript Tutorial 1 - Intr 32
oduction to JavaScript