Javascript

BRIEF INTRODUCTION

TBS/2016201-7
 Introduction
2

JavaScript was designed to

improve the presentation of the web page: animations,
ergonomics, etc.
add interactivity to the web pages: popup boxes to involve the
user.
validate forms,
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:
Inside the HTML page
Most used one
Inside of any HTML tag: in the head or the body

Outside the HTML page

in a separate javascript file (.js)
How to Insert Javascript? (2/3)
Inside the HTML page
5

page.html

Result
How to Insert Javascript? (3/3)
Outside the HTML page
6

page.html

script.js

Result
 Ending Statements With a Semicolon?
7

With traditional programming languages, like C++ and

Java, each code statement has to end with a semicolon (;).

With javascript, semicolons are optional but it is a good

habit to keep.

However, semicolons are required if you want to put more

than one statement on a single line.
 JavaScript Variables (1/2)
8

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)
9

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)
10

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--
 JavaScript Operators (2/4)
11

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
 JavaScript Operators (3/4)
12

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

 JavaScript Operators (4/4)
13

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
14

<script>
document.write("Hello World!")
</script>

TO DO: format the text with HTML code - heading

<script>
alert("Hello World!")
</script>
 JavaScript Basic Examples
15

<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

 JavaScript Popup Boxes (1/3)
16

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>
 JavaScript Popup Boxes (2/3)
17

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>
TO DO: change it to display : Hello firstname lastname
 JavaScript Popup Boxes (3/3)
18

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)
19

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
}
 Conditional Statements (2/3)
20

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
}
 Conditional Statements (3/3)
21

<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 Executed?

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!')" />

22
 Calling a JavaScript Function from
Event Handler Example

<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>
23
 Document Object Model (DOM)
24

most 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
25
 Accessing elements:
document.getElementById
26

var name = document.getElementById("id");

JS

<button onclick="changeText();">Click me!</button>

<span id="output">replace me</span>
<input id="textbox" type="text" /> HTML

function changeText() {
var span = document.getElementById("output");
var textBox = document.getElementById("textbox");

textbox.style.color = "red";

} JS