Java Script

Java script
TBS/2019-2020
Introduction
2
 JavaScript was designed to

 To create interactive user interface in a web page (e.g., menu, pop-up
alert, windows, etc.)
 Manipulating web content dynamically

 Change the content and style of an element
 Replace images on a page without page reload
 Hide/Show contents
 detect browsers,
 create cookies,
 etc.
 It works in all major browsers.

 Everyone can use JavaScript without purchasing a license.
Introduction
3
 JavaScript is
 NOT Java: the similarity in syntax is due to the C language.
 a scripting language : lightweight programming language.
 the most popular scripting language on the Internet.
 an interpreted language : the scripts execute without
preliminary compilation.
 executed on the client side: the browser.
 usually embedded directly into web pages.
How to Insert Javascript? (1/3)
4
 Javascripts can be added to HTML elements in 2

ways:
 Internal javascript: Inside the HTML page
 canbe placed in the <body>, or in the <head> section of an
HTML page, or in both.
 External javascript: Outside the HTML page

 in a separate javascript file (.js)
 practical when the same code is used in many different web pages.
Internal: Inside the HTML page
5
page.html
Result
External: Outside the HTML page
6
page.html
script.js
Result
Remarks
7
<script type="text/javascript” >
 The type attribute is NOT required. JavaScript is the default

scripting language in HTML.
 You can place an external script reference

in <head> or <body> as you like.
 The script will behave as if it was located exactly where
the <script> tag is located.
Javascript statements
8
 JavaScript statements are composed of:

 Values, Operators, Expressions, Keywords, and Comments.
var x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
A JavaScript program is a list of

programming statements.
 In HTML, JavaScript programs are executed by the web
browser.
Ending Statements With a Semicolon?
9
 With traditional programming languages, like C++ and

Java, each code statement has to end with a semicolon (;).
 With javascript, ending statements with semicolon is not

required(optional), but highly recommended.
 However, semicolons are required if you want to put more

than one statement on a single line.
JavaScript Variables (1/2)
10
 Variables are used to store data.

 A variable is a "container" for information you want to
store.
 The value of a variable can change during the script.
 You can refer to a variable by its identifier (name) to see its
value or to change it.
 Rules for variable identifiers
 Variable identifiers are case sensitive
 Name, NAME and name refer to 3 different variables
 They MUST begin with a letter or the underscore character
 e.g.: name, _name
JavaScript Variables (2/2)
11
 Declaration: with the keyword var

 Example:
var x; // x is: undefined
x=10.0; // x is 10
x=“Hello“; // x contains the string “Hello”
var y =6; //y is 6
 You do not need to specify the type of a variable at the declaration
 var is used only once at the declaration
 Remark:
 Keywords are NOT case sensitive in javascript
 e.g.: VAR , var and Var are the same keyword
JavaScript Operators (1/4)
12
 Arithmetic Operators
Operator Description Example Result
+ Addition x=2 4
y=2
x+y
 Operators allow operation on
- Subtraction x=5 3
two or more values. y=2
 JavaScript has two types of x-y

* Multiplication x=5 20
operators: arithmetic and
y=4
computation operators x*y
/ Division 15/5 3
5/2 2,5
% Modulus (division 5%2 1
remainder)
10%8 2
10%2 0
++ Increment x=5 x=6
x++
-- Decrement x=5 x=4
x--
13
 Assignment Operators
Operator Example Is The Same As
 The assignment expression (=) = x=y x=y

allows a variable to be
assigned a value. += x+=y x=x+y
 Variables can be assigned any

value that matches their type -= x-=y x=x-y
and their description.

*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
14
 Comparison Operators Operator Description Example
== is equal to 5==8 returns false
=== is equal to (checks for x=5

 The comparison operator both value and
type) y="5"
returns a logical value of true
or false by comparing two or x==y returns true
more values with each other.

x===y returns
false
!= is not equal 5!=8 returns true
> is greater than 5>8 returns false
< is less than 5<8 returns true
>= is greater than or equal 5>=8 returns false

to
<= is less than or equal to 5<=8 returns true

15
 Logical Operators
Operator Description Example
&& and x=6
y=3
 Binary operators combine

multiple comparison (x < 10 && y > 1)
returns true
operations into a single || or x=6
condition expression y=3
(x==5 || y==5)
returns false
! not x=6
y=3
!(x==y) returns
true
JavaScript Basic Examples
16
<script>
document.write("Hello World!")
</script>
TO DO: format the text with HTML code - heading
<script>
alert("Hello World!")
</script>
JavaScript Basic Examples
17
<script>
x=“Hello World!”
document.write(x)
</script>
<script>
x=“World”
document.write(“Hello” +x)
</script>
TO DO: add line breaks to separate the text in two lines

Remarks
18
 The document.write() method should only be used for

testing.
 Using document.write() after an HTML document is
loaded, will delete all existing HTML.
 Example
<!DOCTYPE html>
<html>
<body>
<h1>Page Title here</h1>

<p>First paragraph here.</p>
<button type="button" onclick="document.write(5+6)">Try it</button>
</body>
</html>
Dialog Boxes
19
■ window.alert( )
message
Example:
window.alert("message"); OK
OK
Insert your name
cancel
■ window.prompt( )
Example:
var nom=window.prompt(“Insert your name:”);
■ window.confirm( ) Are you sure?
Example: OK cancel
var rep=window.confirm(“Are you sure?”);

JavaScript Popup Boxes (1/3)
20
 Alert Box :
 Syntax: window.alert(..) or alert(..)
 An alert box is often used if you want to make sure information

comes through to the user.
 When an alert box pops up, the user will have to click "OK" to
proceed.
<script>
alert("Hello World!")
</script>
21
 Prompt Box
 Syntax: window.prompt(..) or prompt(..)
 A prompt box is often used if you want the user to input a

value before entering a page.
 When a prompt box pops up, the user will have to click either
"OK" or "Cancel" to proceed after entering an input value.
 If the user clicks "OK“, the box returns the input value. If the
user clicks "Cancel“, the box returns null.
<script>
var name=prompt("What is your name? "," ")
document.write("Hello <br>"+name)
</script>
22
 Confirm Box
 Syntax: window.confirm(..) or confirm(..)
 A confirm box is often used if you want the user to verify or

accept something.
 When a confirm box pops up, the user will have to click either
"OK" or "Cancel" to proceed.
 If the user clicks "OK", the box returns true. If the user clicks
"Cancel", the box returns false.
var answer=confirm("Are you sure!")

Conditional Statements (1/3)
23
• Conditional statements are used to perform different

actions based on different conditions.
• if you want to execute some code only if a specified condition is true
if (condition)
{
code to be executed if condition is true
}
• if you want to execute some code if the condition is true and another
code if the condition is false
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
24
• Conditional statements are used to perform different

actions based on different conditions
 if you want to select one of many blocks of code to be executed
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition1 is false and condition2 is true
}
else {
code to be executed if condition2 is false
}
25
<script>
var x=prompt(" Enter a number ");
if(x<0)
{
alert ("You entered a negative number");
}
else
{
alert ("You entered a positive number");
}
</script>
JavaScript – When is it Executed?
26
 JavaScript code is executed during the page loading or

when the browser fires an event
 All statements are executed at page loading
 Some statements just define functions that can be called later
 Function calls or code can be attached as "event
handlers" via tag attributes
 Executed when the event is fired by the browser
<img src="logo.gif" onclick="alert('clicked!')" />

Events
27
 An event occurs as a result of some activity
A user clicks on a link in a page

 Page finished loaded
 Mouse cursor enter an area
 A preset amount of time elapses
 A form is being submitted
Calling a JavaScript Function from
Event Handler – Example
28
<html> image-onclick.html
<head>
<script type="text/javascript">
function test (message) {
alert(message);
}
</script>
</head>
<body>
<img src="logo.gif"
onclick="test('clicked!')" />
</body>
</html>
Document Object Model (DOM)
29
 JavaScript arranges objects in a Document Object

Model or DOM.
 The document object model can be thought of as a
hierarchy moving from the most general object to the most
specific.
window
frame event history document location navigator screen
document anchor form image link style tag
button checkbox input radio reset select submit textarea

Document Object Model (DOM)
30
 Using the object model, the JS code manipulates

elements on an HTML page
 we can examine elements' state

 e.g. see whether a box is checked
 we can change state
 e.g. insert some new text into a div
 we can change styles
 e.g. make a paragraph red
DOM element objects
31
Accessing elements
32
 Can be done in 3 ways:

 document.getElementById(id) Finds an element by element id
 Example
var myElement = document.getElementById("demo");
 document.getElementsByTagName(name)Find elements by tag

name
 Example
var x = document.getElementsByTagName("p");
 document.getElementsByClassName(name)Find elements by class

name
 Example
var x = document.getElementsByClassName("intro");
Changing HTML content
33
 To change the content of an HTML element, use InnerHTML property

it sets or returns the HTML content (inner HTML) of an element.
 Syntax
document.getElementById(id).innerHTML = new HTML
 Example
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Changing the Value of an Attribute
34
 Syntax
document.getElementById(id).attribute = new value
 Example
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src=”scenery.gif">
<script>
document.getElementById("myImage").src = "sunrise.jpg";
</script>
</body>
</html>
Changing HTML Style
35
 Syntax
document.getElementById(id).style.property = new style
 Example
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello World!</p>
<script>
document.getElementById("demo").style.color = "blue";
</script>
<button type="button"
onclick="document.getElementById('demo').style.fontSize = '50px’ ">
click me</button>
</body>
</html>
Exercise 1
36
 Change the background image of the web page created

on “lab1” depending on time of day
 Use the following images

 Day (http://eskipaper.com/images/sunny-day-background-1.jpg)
 Night (http://images.all-free-
download.com/images/graphiclarge/traffic_at_night_184569.jpg)
Exercise 2
37
 Create a web form containing three input fields as

follows
 The user is asked to enter two integer values

 The sum should be automaticaly displayed in the
third field
Exercise 3
38
 Define a web form in which a user can specify if he

has kids or not using radio butons
 If the user clicks on ‘yes’, a new text field in shown

Java Script

Uploaded by

Copyright:

Available Formats

Java Script

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Script

Uploaded by

Copyright:

Available Formats

Java script

 JavaScript was designed to

 Manipulating web content dynamically

 It works in all major browsers.

 Javascripts can be added to HTML elements in 2

 External javascript: Outside the HTML page

<script type="text/javascript” >

 The type attribute is NOT required. JavaScript is the default

 You can place an external script reference

 JavaScript statements are composed of:

A JavaScript program is a list of

 With traditional programming languages, like C++ and

 With javascript, ending statements with semicolon is not

 However, semicolons are required if you want to put more

 Variables are used to store data.

 Declaration: with the keyword var

 JavaScript has two types of x-y

 The assignment expression (=) = x=y x=y

 Variables can be assigned any

and their description.

 Comparison Operators Operator Description Example

== is equal to 5==8 returns false

=== is equal to (checks for x=5

more values ​with each other.

!= is not equal 5!=8 returns true

> is greater than 5>8 returns false

< is less than 5<8 returns true

>= is greater than or equal 5>=8 returns false

<= is less than or equal to 5<=8 returns true

&& and x=6

 Binary operators combine

TO DO: format the text with HTML code - heading

TO DO: add line breaks to separate the text in two lines

 The document.write() method should only be used for

<h1>Page Title here</h1>

<button type="button" onclick="document.write(5+6)">Try it</button>

■ window.confirm( ) Are you sure?

var rep=window.confirm(“Are you sure?”);

 An alert box is often used if you want to make sure information

 A prompt box is often used if you want the user to input a

 A confirm box is often used if you want the user to verify or

var answer=confirm("Are you sure!")

• Conditional statements are used to perform different

• Conditional statements are used to perform different

 JavaScript code is executed during the page loading or

<img src="logo.gif" onclick="alert('clicked!')" />

 An event occurs as a result of some activity

A user clicks on a link in a page

 JavaScript arranges objects in a Document Object

frame event history document location navigator screen

document anchor form image link style tag

button checkbox input radio reset select submit textarea

 Using the object model, the JS code manipulates

 we can examine elements' state

 Can be done in 3 ways:

 document.getElementsByTagName(name)Find elements by tag

 document.getElementsByClassName(name)Find elements by class

 To change the content of an HTML element, use InnerHTML property

 Change the background image of the web page created

more values with each other.