1
Tutorial 1
Introduction to JavaScript
Ahmad Al KawamB – A First
JavaScript ProgramA
2
Topics
• A First JavaScript Program
▫ About the <script> tag
▫ How to create a JavaScript source file
▫ How to add comments to a JavaScript Program
▫ How to hide JavaScript from incompatible
browsers
▫ About placing JavaScript in <head> or <body>
sections of HTML documents
3
A First JavaScript Program
• The <script> Tag
▫ JavaScript programs are run from within an
HTML document
▫ <script> and </script>
Used to notify the browser that JavaScript
statements are contained within
4
A First JavaScript Program
• The <script> Tag
▫ language attribute
Denotes the scripting language being used
Default JavaScript
Other languages (e.g., VBScript) may be used
Can also specify script language version
▫ No space between name and version
▫ Checked by browser, scripts ignored if browser
doesn’t support version
For ECMAScript compatible browsers, omit
version
5
A First JavaScript Program
• The <script> Tag
▫ JavaScript
Object-based language
Object
▫ Programming code and data that can be treated
as an individual unit or component
Statements
▫ Individual lines in a programming language
Methods
▫ Groups of statements related to a particular
object
6
A First JavaScript Program
• The <script> Tag
▫ Document object
Represents the content of a browser’s window
▫ write() & writeln() methods of Document
object
Creates new text on a web page
Called by appending method to object with a
period
Methods accept arguments
Information passed to a method
7
A First JavaScript Program
• The <script> Tag
▫ Preformatted text
<pre> and </pre> tags
Tag set known as a container element because
it contains text and other HTML tags
Translates literal text to presentation area
Required to get carriage return in writeln()
method to be sent to presentation area
8
JavaScript
Tutorial 1 -
Introduction to
JavaScript
9
JavaScript
Tutorial 1 -
Introduction to
JavaScript
10
A First JavaScript Program
• The <script> Tag
▫ Document object
Considered a top-level object
Naming convention
Capitalize first letter of object
▫ Unlike HTML, JavaScript is case sensitive
11
JavaScript
Tutorial 1 -
Introduction to
JavaScript
12
A First JavaScript Program
• Creating a JavaScript Source File
▫ JavaScript programs can be used in two
ways:
Incorporated directly into an HTML file
Using <script> tag
Placed in an external (source) file
Has file extension .js
Contains only JavaScript statements
13
A First JavaScript Program
• Creating a JavaScript Source File
▫ JavaScript source files
Use src attribute of <script> tag to denote
source of JavaScript statements
Browser will ignore any JavaScript statements
inside <script> and </script> if src attribute is
used
Cannot include HTML tags in source file
<script language=“JavaScript” src=“c:\source.js”>
</script>
14
A First JavaScript Program
• Creating a JavaScript Source File
▫ Advantages of JavaScript source files
Makes HTML document neater (less
confusing)
JavaScript can be shared among multiple
HTML files
Hides JavaScript code from incompatible
browsers
15
A First JavaScript Program
• Creating a JavaScript Source File
▫ Can use a combination of embedded and
non–embedded code
Allows finer granularity in coding
functionality
JavaScript sections executed in order of
location within HTML document
16
JavaScript
Tutorial 1 -
Introduction to
JavaScript
17
A First JavaScript Program
• Adding comments to a JavaScript Program
▫ Comments
Non-printing lines that are placed in the code
to contain various remarks about the code
Makes it easier to understand the code
operation
Two types
Line comments
▫ // ignore all text to the end of the line
Block comments
▫ /* ignore all text between these symbols */
18
JavaScript
Tutorial 1 -
Introduction to
JavaScript
19
A First JavaScript Program
• Hiding JavaScript from Incompatible
Browsers
▫ Two methods
Place JavaScript in external source file
Enclose the code within HTML comments
<!-- beginning of HTML block comment
end of HTML block comments -->
20
JavaScript
Tutorial 1 -
Introduction to
JavaScript
21
JavaScript
Tutorial 1 -
Introduction to
JavaScript
22
JavaScript
Tutorial 1 -
Introduction to
JavaScript
23
A First JavaScript Program
• Hiding JavaScript from Incompatible
Browsers
▫ Alternate message display
If browser doesn’t support JavaScript
Use <noscript> & </noscript> to place
alternate message to users of back-level
browsers
24
JavaScript
Tutorial 1 -
Introduction to
JavaScript
25
A First JavaScript Program
• Placing JavaScript in <head> or
<body> sections
▫ Script statements interpreted in order of
document rendering
▫ <head> section rendered before <body>
section
Good practice to place as much code as
possible in <head> section
