Scribd
Upload
5 views37 pages

Web Programming 03

This document provides an overview of JavaScript as a scripting language for enhancing web pages, detailing its integration within HTML5 documents and the use of the <script> tag. It covers key concepts such as variables, data types, operators, and control structures like if statements, along with methods for user interaction through dialogs. The document emphasizes the dynamic nature of web pages generated with JavaScript and the importance of proper syntax and structure in scripting.

Uploaded by

ayaalaakamal15
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
5 views37 pages

Web Programming 03

This document provides an overview of JavaScript as a scripting language for enhancing web pages, detailing its integration within HTML5 documents and the use of the <script> tag. It covers key concepts such as variables, data types, operators, and control structures like if statements, along with methods for user interaction through dialogs. The document emphasizes the dynamic nature of web pages generated with JavaScript and the importance of proper syntax and structure in scripting.

Uploaded by

ayaalaakamal15
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/ 37

Web Programming

CS333-CS644

Dr Safa’a Saleh

1
Lecture 3
JavaScript
 Scripting language which is used to enhance the functionality
and appearance of web pages.
Before you can run code examples with JavaScript on
your computer, you may need to change your browser’s
security settings.
 IE9 prevents scripts on the local computer from running by
default
 Firefox, Chrome, Opera, Safari (including on the iPhone) and
the Android browser have JavaScript enabled by default.
We begin with a simple script that displays the text
"Welcome to JavaScript Programming!" in the
HTML5 document.
All major web browsers contain JavaScript interpreters,
which process the commands written in JavaScript.
Spacing displayed by a browser in a web page is determined
by the HTML5 elements used to format the page
Often, JavaScripts appear in the <head> section of the
HTML5 document
The browser interprets the contents of the <head> section
first
The <script> tag indicates to the browser that the text that
follows is part of a script.
Attribute type specifies the scripting language used in the
script—such as text/javascript
The script Element and Commenting Your Scripts
The <script> tag indicates to the browser that the text
which follows is part of a script.
The type attribute specifies the MIME type of the script as
well as the scripting language used in the script—in this
case, a text file written in javascript.
In HTML5, the default MIME type for a <script> is
"text/html", so you can omit the type attribute from
your <script> tags.
You’ll see it in legacy HTML documents with embedded
JavaScripts.
A string of characters can be contained between double
quotation (") marks (also called a string literal)
Browser’s document object represents the HTML5
document currently being displayed in the browser
 Allows a you to specify HTML5 text to be displayed in the
HTML5 document
Browser contains a complete set of objects that allow
script programmers to access and manipulate every
element of an HTML5 document
Object
 Resides in the computer’s memory and contains information
used by the script
 The term object normally implies that attributes (data) and
behaviors (methods) are associated with the object
 An object’s methods use the attributes’ data to perform useful
actions for the client of the object—the script that calls the
methods
The parentheses following the name of a method
contain the arguments that the method requires to
perform its task (or its action)
Every statement should end with a semicolon (also
known as the statement terminator), although none is
required by JavaScript
JavaScript is case sensitive
 Not using the proper uppercase and lowercase letters is a
syntax error
The document object’s writeln method
 Writes a line of HTML5 text in the HTML5 document
 Does not guarantee that a corresponding line of text will
appear in the HTML5 document.
 Text displayed is dependent on the contents of the string
written, which is subsequently rendered by the browser.
A Note About Embedding JavaScript Code into HTML5
Documents
JavaScript code is typically placed in a separate file,
then included in the HTML5 document that uses the
script.

This makes the code more reusable, because it can be


included into any HTML5 document—as is the case
with the many JavaScript libraries used in professional
web development today.
A script can display Welcome to JavaScript
Programming! in many ways.
Figure 6.2 displays the text in magenta, using the CSS
color property.
Method write displays a string like writeln, but
does not position the output cursor in the HTML5
document at the beginning of the next line after writing
its argument
The + operator joins two strings together
Displaying Text in an Alert Dialog
Dialogs
 Typically used to display important messages to the user
browsing the web page
 Browser’s window object uses method alert to display an
alert dialog
 Method alert requires as its argument the string to be
displayed
Escape Sequences
When a backslash is encountered in a string of
characters, the next character is combined with the
backslash to form an escape sequence. The escape
sequence \n is the newline character. It causes the
cursor in the HTML5 document to move to the
beginning of the next line.

©1992-2012 by Pearson Education, Inc. All


Rights Reserved.
Scripting
 Gives you the ability to generate part or all of a web page’s
content at the time it is shown to the user
 Such web pages are said to be dynamic, as opposed to static,
since their content has the ability to change
Keywords are words with special meaning in JavaScript
Keyword var
 Used to declare the names of variables
 A variable is a location in the computer’s memory where a value can be stored
for use by a script
 All variables have a name, type and value, and should be declared with a var
statement before they are used in a script
A variable name can be any valid identifier consisting of
letters, digits, underscores ( _ ) and dollar signs ($) that does
not begin with a digit and is not a reserved JavaScript
keyword.
Declarations end with a semicolon (;) and can be split over several lines,
with each variable in the declaration separated by a comma (forming a
comma-separated list of variable names)
 Several variables may be declared in one declaration or in multiple
declarations.
Comments
 A single-line comment begins with the characters // and terminates at
the end of the line
 Multiline comments begin with delimiter /* and end with delimiter */
All text between the delimiters of the comment is ignored by the interpreter.
The window object’s prompt method displays a
dialog into which the user can type a value.
 The first argument is a message (called a prompt) that directs
the user to take a specific action.
 The optional second argument is the default string to display in
the text field.
Script can then use the value that the user inputs.
null keyword
 Signifies that a variable has no value
 Writing a null value to the document, however, displays the word “null”
Function parseInt
 converts its string argument to an integer
JavaScript has a version of the + operator for string
concatenation that enables a string and a value of another data
type (including another string) to be concatenated
Our next script illustrates another use of prompt dialogs to
obtain input from the user.
Figure 6.7 inputs two integers (whole numbers, such as 7, –11,
0 and 31914) typed by a user at the keyboard, computes the sum
of the values and displays the result.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
Variable names correspond to locations in the
computer’s memory.
Every variable has a name, a type and a value.
When a value is placed in a memory location, the value
replaces the previous value in that location.
JavaScript does not require variables to have a type before
they can be used in a script
A variable in JavaScript can contain a value of any data type,
and in many situations, JavaScript automatically converts
between values of different types for you
When a variable is declared in JavaScript, but is not given a
value, it has an undefined value.
 Attempting to use the value of such a variable is normally a logic error.
When variables are declared, they are not assigned default
values, unless specified otherwise by the programmer.
 To indicate that a variable does not contain a value, you can assign the value
null to it.
The basic arithmetic operators (+, -, *, /, and %) are
binary operators, because they each operate on two
operands
JavaScript provides the remainder operator, %, which
yields the remainder after division
6.6 Arithmetic
if statement allows a script to make a decision based
on the truth or falsity of a condition
 If the condition is met (i.e., the condition is true), the
statement in the body of the if statement is executed
 If the condition is not met (i.e., the condition is false), the
statement in the body of the if statement is not executed
The script in Fig. 6.14 uses four if statements to
display a time-sensitive greeting on a welcome page.

You might also like