Scribd
Upload
6 views

Introduction To JavaScript - 060244

Uploaded by

daniloorestmarijani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Introduction To JavaScript - 060244

Uploaded by

daniloorestmarijani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 38

Introduction to

JavaScript
Introduction
• JavaScript is a scripting language that
sits in the HTML code of a Web page.
• JavaScript is a browser-based scripting
language developed by Netscape in
1995 and implemented in all major
browsers.
• JavaScript is used to perform simple
functions within web pages.
© K.S. Mbise JavaScript Slide 2
Introduction cont…
• JavaScript is what is known as a client-
side scripting language.
• Client side means that it runs in the
browser on the client's computer, as
opposed to logic that is processed on
the server before the results are sent
back to the client's computer.

© K.S. Mbise JavaScript Slide 3


Introduction cont…
• JavaScript scripting language
– Enhances functionality and
appearance of web pages.
– Client-side scripting
• Makes pages more dynamic and
interactive
– Foundation for complex server-side
scripting languages
© K.S. Mbise JavaScript Slide 4
JS Text in a Web Page
• Inline scripting – is written in the
HTML document
• <script> tag – indicates that the text
is part of a script
• type attribute – specifies the type of
file and the scripting language used in
the script

© K.S. Mbise JavaScript Slide 5


JS text cont…
• writeln method – writes a line in
the document.
• Escape character ( \ ) – indicates
“special” character is used in the
string
• alert method – prompts a dialog
box in your browser.

© K.S. Mbise JavaScript Slide 6


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 7.1: welcome.html -->
6 <!-- Displaying a line of text -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>A First Program in JavaScript</title>
11
12 welcome.html
<script type = "text/javascript">

(1 of 1)
13 <!--
14 document.writeln(
15 "<h1>Welcome to JavaScript Programming!</h1>" );
16 // -->
17 </script>
18
19 </head><body></body>
20 </html>

© K.S. Mbise JavaScript Slide 7


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 7.2: welcome2.html -->
6 <!-- Printing a Line with Multiple Statements -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Printing a Line with Multiple Statements</title>
11
12
13
welcome2.html
<script type = "text/javascript">
<!--
14
15
16
(1 of 1)
document.write( "<h1 style = \"color: magenta\">" );
document.write( "Welcome to JavaScript " +
"Programming!</h1>" );
17 // -->
18 </script>
19
20 </head><body></body>
21 </html>

© K.S. Mbise JavaScript Slide 8


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 7.3: welcome3.html -->
6 <!-- Printing Multiple Lines -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head><title>Printing Multiple Lines</title>
10
11
12
13
welcome3.html
<script type = "text/javascript">
<!--
document.writeln( "<h1>Welcome to<br />JavaScript" +
14
15
16
1 of 1 "<br />Programming!</h1>" );
// -->
</script>
17
18 </head><body></body>
19 </html>

© K.S. Mbise JavaScript Slide 9


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 7.4: welcome4.html -->
6 <!-- Printing multiple lines in a dialog box -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head><title>Printing Multiple Lines in a Dialog Box</title>
10
11 <script type = "text/javascript">
12 <!--
13 window.alert( "Welcome to\nJavaScript\nProgramming!" );
14 // -->
15 </script>
16
17 </head>
18
19 <body>
20 <p>Click Refresh (or Reload) to run this script again.</p>
21 </body>
22 </html>

© K.S. Mbise JavaScript Slide 10


© K.S. Mbise JavaScript Slide 11
JS text cont…
Escape Sequence Description

\n Newline. Position the screen cursor at


the beginning of the next line.

\t Horizontal tab. Move the screen cursor


to the next tab stop.
\r Carriage return. Position the screen
cursor to the beginning of the current
line; do not advance to the next line.
Any characters output after the carriage
return overwrite the characters
previously output on that line.

© K.S. Mbise JavaScript Slide 12


JS text cont…
Escape Sequence Description

\\ Backslash. Used to represent a backslash


character in a string.

\" Double quote. Used to represent a double


quote character in a string contained in
double quotes. For example,
window.alert( "\"in
quotes\"" );
displays "in quotes" in an alert
dialog.

\' Single quote. Used to represent a single quote


character in a string. For example,
window.alert( '\'in
quotes\'' );
displays 'in quotes' in an alert
dialog.

© K.S. Mbise JavaScript Slide 13


Dynamic welcome page
• A script can adapt the content based
on input from the user or other
variables.
• It means that a web page is no longer
static HTML, but can include programs
that interact with the user, control the
browser, and dynamically create HTML
content.
© K.S. Mbise JavaScript Slide 14
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 7.6: welcome5.html -->
6 <!-- Using Prompt Boxes -->
7
8

welcome5.html
<html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Using Prompt and Alert Boxes</title>

(1 of 2)
11
12 <script type = "text/javascript">
13 <!--
14 var name; // string entered by the user
15
16 // read the name from the prompt box as a string
17 name = window.prompt( "Please enter your name", "GalAnt" );
18
19 document.writeln( "<h1>Hello, " + name +
20 ", welcome to JavaScript programming!</h1>" );
21 // -->
22 </script>

© K.S. Mbise JavaScript Slide 15


23
24 </head>
25
26 <body>
27 <p>Click Refresh (or Reload) to run this script again.</p>
28 </body>
29 </html>

© K.S. Mbise JavaScript Slide 16


Dynamic page cont… When the user clicks OK, the
value typed by the user is
returned to the program as a
This is the string.
prompt
to the user.

This is the text field in


This is the default value
which the user types the
that appears when the
value.
dialog opens.

Fig. 7.7 Prompt dialog displayed by the window object’s prompt method.

© K.S. Mbise JavaScript Slide 17


Adding integers
• Prompt user for two integers and
calculate the sum (see example
on the next slide).
• NaN (not a number)
• parseInt – a function
that converts string argument
to an integer.
© K.S. Mbise JavaScript Slide 18
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 7.8: Addition.html -->
6 <!-- Addition Program -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">

Addition.html
9 <head>
10 <title>An Addition Program</title>
11
12
13
14
(1 of 2)
<script type = "text/javascript">
<!--
var firstNumber, // first string entered by user
15 secondNumber, // second string entered by user
16 number1, // first number to add
17 number2, // second number to add
18 sum; // sum of number1 and number2
19
20 // read in first number from user as a string
21 firstNumber =
22 window.prompt( "Enter first integer", "0" );
23

© K.S. Mbise JavaScript Slide 19


24 // read in second number from user as a string
25 secondNumber =
26 window.prompt( "Enter second integer", "0" );
27
28 // convert numbers from strings to integers
29 number1 = parseInt( firstNumber );
30 number2 = parseInt( secondNumber );

Addition.html
31
32 // add the numbers
33 sum = number1 + number2;

(2 of 2)
34
35 // display the results
36 document.writeln( "<h1>The sum is " + sum + "</h1>" );
37 // -->
38 </script>
39
40 </head>
41 <body>
42 <p>Click Refresh (or Reload) to run the script again</p>
43 </body>
44 </html>

© K.S. Mbise JavaScript Slide 20


© K.S. Mbise JavaScript Slide 21
Memory concepts

• Variable names correspond to


locations in the computer’s
memory
• Every variable has a name, a type,
and a value.
• Read value from a memory
location
© K.S. Mbise JavaScript Slide 22
Memory concepts cont…

number1 45

Fig. 7.9 Memory location showing the name and value of variable number1.

© K.S. Mbise JavaScript Slide 23


Memory concepts cont…
number1 45

number2 72

Fig. 7.10 Memory locations after values for variables number1 and number2 have been input.

© K.S. Mbise JavaScript Slide 24


Memory concepts cont…
number1 45

number2 72

sum 117

Fig. 7.11 Memory locations after calculating the sum of number1 and number2.

© K.S. Mbise JavaScript Slide 25


Arithmetic
• Many scripts perform arithmetic
calculations
• Expressions in JavaScript must
be written in straight-line form

© K.S. Mbise JavaScript Slide 26


Arithmetic operators
JavaScript Arithmetic Algebraic JavaScript
operation operator expression expression
Addition + f+7 f+7

Subtraction - p–c p-c


Multiplication * bm b*m
Division / x / y or or xy x/y

Remainder % r mod s r%s

© K.S. Mbise JavaScript Slide 27


Equality and relational operators
• Decision making is based on the
truth or falsity of a condition.
• Equality operators
• Relational operators

© K.S. Mbise JavaScript Slide 28


Equality and relational operators cont…
Standard algebraic JavaScript Sample Meaning of
equality operator or equality or JavaScript JavaScript
relational operator relational condition condition
operator
Equality operators
 ═ == x == y x is equal to y
≠ != x != y x is not equal to
£ y
Relational operators
> > x > y x is greater than
y
< < x < y x is less than y
≥ >= x >= y x is greater than
or equal to y
≤ <= x <= y x is less than or
equal to y
© K.S. Mbise JavaScript Slide 29
JavaScript events
• An HTML event can be something the
browser does, or something a user does.
• Here are some examples of HTML events:
• An HTML web page has finished
loading
• An HTML button is clicked
• An HTML form is submitted
• JavaScript lets you execute code when
events are detected.
© K.S. Mbise JavaScript Slide 30
JavaScript events cont…
• JavaScript events allow scripts to respond to
user interactions and modify the page
accordingly.
• Events allow scripts to respond to a user
who is moving the mouse, entering form
data or pressing keys.
• Events and event handling help to make web
applications more responsive, dynamic and
interactive.
© K.S. Mbise JavaScript Slide 31
JavaScript events cont…
Examples of JS events:
• onclick – fires when the user clicks using the
mouse.
• onmouseout – fires when the mouse leaves
an element.
• onmouseover – fires when the mouse enters
an element.
• onsubmit – fires when a form is submitted.

© K.S. Mbise JavaScript Slide 32


Handling of events
• Event handling refers to capturing events
and responding to them
• The system sends events to the program
and the program responds to them as
they arrive
• Events can include things a user does -
like clicking the mouse - or things that
the system itself does - like updating the
clock.
© K.S. Mbise JavaScript Slide 33
Handling of events cont…
• HTML allows event handler attributes,
with JavaScript code, to be added to
HTML elements.
• Single quotes syntax:
<HTML-element event='some JavaScript'>
• Double quotes syntax:
<HTML-element event="some JavaScript">

© K.S. Mbise JavaScript Slide 34


Handling of events cont…
• Event handlers are placed in the body part
of a web page as attributes in HTML tags
• Events can be captured and responded to
directly with JavaScript one-liners embedded
in HTML tags in the body section
• Alternatively, events can be captured in the
HTML code, and then directed to a
JavaScript function for an appropriate
response
© K.S. Mbise JavaScript Slide 35
Handling of events cont…
• The event handler attribute consists of
3 parts:
• The identifier of the event handler
• The equal sign
• A string consisting of JavaScript
statements enclosed in double or
single quotes

© K.S. Mbise JavaScript Slide 36


Inline handling of events
<html>
<head> <title> Inline JS event handling </title>
</head>
<body>
<marquee direction="right" onmouseover="this.stop()"
onmouseout="this.start()">Scrolling
text</marquee>
</body>
</html>

© K.S. Mbise JavaScript Slide 37


Thank you for listening!

© K.S. Mbise JavaScript Slide 38

You might also like