Scribd
Upload
23 views35 pages

Chapter 6 Eyad

Uploaded by

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

Chapter 6 Eyad

Uploaded by

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

Chapter 6: JavaScript

By: Eyad Alshareef

Introduction to Scripting
Eyad Ashareef 1
OBJECTIVES

In this chapter you will learn:


• To write simple JavaScript programs.
• To use input and output statements.
• Basic memory concepts.
• To use arithmetic operators.
• The precedence of arithmetic operators.
• To write decision-making statements.
• To use relational and equality operators.

Eyad Ashareef 2
JavaScript
• JavaScript is the programming language of the Web.
• All modern HTML pages are using JavaScript.
• JavaScript is the most popular programming language in the world.
• It is the language for HTML, for the Web, for computers, servers,
laptops, tablets, smart phones, and more.
• JavaScript is case sensitive

Eyad Ashareef 3
6.1 Introduction
• 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.

Eyad Ashareef 4
6.2 Your First Script: Displaying a Line of Text with JavaScript
in a Web Page
• 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.
• The JavaScript code and its result are shown in Fig. 6.1.

Eyad Ashareef 5
HTML File

Run a File

Eyad Ashareef 6
6.2 Your First Script: Displaying a Line of Text with JavaScript
in a Web Page (cont.)
• 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

Eyad Ashareef 7
6.2 Your First Script: Displaying a Line of Text with JavaScript
in a Web Page (cont.)
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.

Eyad Ashareef 8
6.2 Your First Script: Displaying a Line of Text with JavaScript
in a Web Page (cont.)
• A string of characters can be contained between double quotation
(") marks (also called a string literal)

Eyad Ashareef 9
6.2 Your First Script: Displaying a Line of Text with JavaScript
in a Web Page (cont.)
• Browser’s document object represents the HTML5 document currently being
displayed in the browser
• 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

Eyad Ashareef 10
6.2 Your First Script: Displaying a Line of Text with JavaScript
in a Web Page (cont.)

• 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.
• Browser will interpret the HTML5 elements as it normally does to render
the final text in the document

Eyad Ashareef 11
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> JVSCRIPT FIRST PROGRAM </title>
<script type = "text/javascript">
document.writln("<h1> First JS prohramming</h1>");
</script>
</head>
<body></body></html>

Output

Error

Eyad Ashareef 12
6.2 Your First Script: Displaying a Line of Text with JavaScript
in a Web Page (cont.)
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.

Eyad Ashareef 13
6.3 Modifying Your First Script
• A script can display Welcome to JavaScript
Programming! in many ways.
• 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

Eyad Ashareef 14
HTML File

Run a File

• The + operator (called the


“concatenation operator”
when used in this manner)
joins two strings together

Eyad Ashareef 15
6.3 Modifying Your First Script (Cont.)
Displaying Text in an Alert Dialog
 Dialogs
• Useful to display information in windows that “pop up” on the screen to
grab the user’s attention
• 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

Eyad Ashareef 16
HTML File

Run a File

Eyad Ashareef 17
6.3 Modifying Your First Script (Cont.)
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.

Eyad Ashareef 18
6.4 Obtaining User Input with prompt Dialogs

• 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

Eyad Ashareef 19
6.4.1 Dynamic Welcome Page
• The next script creates a dynamic welcome page that obtains the user’s name,
then displays it on the page.
• The script uses another predefined dialog box from the window object—a
prompt dialog—which allows the user to enter a value that the script can use.

Eyad Ashareef 20
HTML File

Run a File

Eyad Ashareef 21
6.4.1 Dynamic Welcome Page (cont.)

• 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.

Eyad Ashareef 22
6.4.1 Dynamic Welcome Page (cont.)

 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
• Comments do not cause the browser to perform any action when the script is interpreted;
rather, comments are ignored by the JavaScript interpreter
• Multiline comments begin with delimiter /* and end with delimiter */
 All text between the delimiters of the comment is ignored by the interpreter.

Eyad Ashareef 23
6.4.1 Dynamic Welcome Page (cont.)
• 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.

Eyad Ashareef 24
6.4.1 Dynamic Welcome Page (cont.)

• A variable is assigned a value with an assignment statement, using


the assignment operator, =.
• The = operator is called a binary operator, because it has two
operands.

Eyad Ashareef 25
6.4.1 Dynamic Welcome Page (cont.)

• null keyword
• Signifies that a variable has no value
• null is not a string literal, but rather a predefined term indicating the absence of 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

Eyad Ashareef 26
HTML File

Run a File

Eyad Ashareef 27
Eyad Ashareef 28
6.5 Memory Concepts
• 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.
• When a value is read out of a memory location, the process is
nondestructive.

Eyad Ashareef 29
6.5 Memory Concepts (Cont.)
 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
 JavaScript is referred to as a loosely typed language
 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.

Eyad Ashareef 30
6.6 Arithmetic
• 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

Eyad Ashareef 31
6.7 Decision Making: Equality and Relational Operators

 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
 Conditions in if statements can be formed by using the equality
operators and relational operators

Eyad Ashareef 32
6.7 Decision Making: Equality and Relational Operators
(Cont.)
• Equality operators both have the same
level of precedence, which is lower
than the precedence of the relational
operators.
• The equality operators associate from
left to right.

Eyad Ashareef 33
HTML File

Run a File
Eyad Ashareef 34
6.7 Decision Making: Equality and Relational Operators
(Cont.)
• Date object
• Used acquire the current local time
• Create a new instance of an object by using the new operator followed by
the type of the object, Date, and a pair of parentheses

Eyad Ashareef 35

You might also like