Chapter JS All

Chapter Three
Client-Side Scripting Language
JavaScript
(JS)
1 Department of Software Engineering 04/30/2024
Introduction to JavaScript
The growth of WWW is resulted in demand for dynamic and

interactive websites.
 JavaScript is one of the 3 languages all web
developers must learn:
1. HTML defines the content of web pages.
2. CSS specifies the layout of web pages.
3. JavaScript programs the behavior of web pages.
 Javascript is a scripting language produced by Netscape for
use within HTML Web pages.
JavaScript is a lightweight, interpreted programming language.
JavaScript is loosely based on Java and it is built into all the
major modern browsers.
It is the most popular scripting language on the internet.
2 JavaScript is case-sensitive!
Department of Software Engineering 04/30/2024
JavaScript…
JavaScript is used:
to improve user interface.
to create pop-up window and alerts.
to Interact with the user.
to create dynamic pages.
to validate forms.
to detect browsers (reacting to user
actions on Browser).
to create cookies, and much more.

JavaScript…
 A JavaScript consists of JavaScript statements that are placed
within the <script>... </script> HTML tags in a web page.
The <script> tag tells the browser program to begin
interpreting all the text between these tags as a script.
JavaScript statements ends with semicolon.
The syntax of your JavaScript will be as follows
<script ...>
JavaScript code
</script>

JavaScript…
 The script tag takes three important attributes:
1. src: specify the location of the external script.
2. language: specifies what scripting language you are using.
Typically, its value will be “javascript”.
3. type: used to indicate the scripting language in use.
Its value should be set to "text/javascript".
Type and language have similar functions we use language to
specify the language used in the script.
So your JavaScript segment will look like this:
<script language="javascript" type="text/javascript">
JavaScript code
</script>
Placing JavaScript in an HTML file
Scripts in the head section: Scripts to be executed when

they are called, or when an event is triggered, must be
placed in the head section.
<html>
<head>
<script type="text/JavaScript">....
</script>
</head>

Placing JavaScript in an HTML file
Scripts in the body section: Scripts to be executed when
the page loads must be placed in the body section.
When you place a script in the body section it generates
the content of the page.
<html>
<head></head>
<body>
<script type="text/JavaScript">....</script>
</body>
</html>
You can also have scripts in both the body and the head
section.
Using an External JavaScript
Sometimes you might want to run the same JavaScript on

several pages, without having to write the same script on
every page.
To simplify this, you can write a JavaScript in an external
file.
Save the external JavaScript file with .js file extension.
Note: The external script cannot contain the <script>
tag!
To use the external script, write the JS file in the "src"
attribute of the <script> tag:
Note: Remember to place the script exactly where you
8
want to write the script!
Department of Software Engineering 04/30/2024
A Simple Script
<html>
<head> <title>First JavaScript Page</title>
</head>
<body>
<h1>First JavaScript Page</h1>
<script type="text/javascript">
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
</script>
</body>
</html>
Comment
Used to explain what the script does.
Two types of comments:
Comment on single line(//)
Comment on multiple line(/*…..*/)
The three methods of JS

1. alert() Method
2. confirm() Method
3. prompt() Method

Using the alert() Method
<head>
<script language=“JavaScript”>
alert(“An alert triggered by JavaScript”);
</script>
</head>
It is the easiest method to use amongst alert(), prompt()
and confirm().
You can use it to display textual information to the user.
The user can simply click “OK” to close it.

Using the confirm() Method
<head>
confirm(“Are you happy with the class?”);
</script>
</head>
This box is used to give the user a choice either
OK or Cancel.
You can also put your message in the method.

Using the prompt() Method
<head>
prompt(“What is your student id number?”);
prompt(“What is your name?”,”No name”);
</script>
</head>
This is the only one that allows the user to type in his
response to the specific question.
You can give a default value to avoid displaying
“undefined”.

Examples of the three methods:
<script language="JavaScript">
alert("This is an Alert method");
confirm("Are you OK?");
prompt("What is your name?");
prompt("How old are you?","20");
</script>

JavaScript Variables
A variable is a "container" for information you want to
store.
Variable names are case-sensitive.
They must begin with a letter, underscore character, or
dollar symbol.
It includes uppercase and lowercase letters, digits from 0
through 9, underscore, and dollar signs.
No space and punctuation characters.
You should not use any of the JavaScript-reserved
keywords as variable names.

JavaScript Variables…
You can create a variable with the var, let, const, and nothing
statements:
You can also create a variable with the var statement:
var strName = some value;
You can also create a variable with the let statement:
let strName = some value;
You can also create a variable with nothing statement:
strName = some value;
You can also create a variable with a const statement:
Assign a Value to a Variable:
var strName = “Software“;
let strName = “Software“;
strName = “Software“;
16  constofPI=
Department 3.14;
Software Engineering 04/30/2024
Which one is legal?
 My_variable
 $my_variable
legal
 1my_example
 _my_variable
 @my_variable
 My_variable_example
 ++my_variable
 %my_variable Illegal
 #my_variable
 ~my_variable
 myVariableExample

Variable on-the-fly
<head>
var id;
id = prompt(“Write your id number?”);
alert(id);
name = prompt(“What is your name?”,”No name”);
alert(name);
</script>
</head>
We should use “var” because it is more easy to keep track
of the variables.
The scope of a variable
The scope of a variable is the region of your program in
which it is defined.
JavaScript variable will have only two scopes.
Global Variables: A global variable has global scope
which means it is defined everywhere in your
JavaScript code.
Local Variables: A local variable will be visible only
within a function where it is defined.
Function parameters are always local to that function.

Data Types
JavaScript allows the same variable to contain different types
of data values.
Primitive data types:
Number: integer & floating-point numbers.
Boolean: logical values “true” or “false”.
String: a sequence of alphanumeric characters.
Composite data types (or Complex data types):
Object: a named collection of data.
Array: a sequence of values.
Function: a group of code to perform a particular task.
Special data types:
Null: as the initial value is assigned.
Undefined: the variable has been created but not yet assigned a
Department of Software Engineering
20
value. 04/30/2024
Numeric Data Types
It is an important part of any programming language for

doing arithmetic calculations.
JavaScript supports:
Integers: A positive or negative number with no
decimal places.
Ranged from –253 to 253
Floating-point numbers: usually written in
exponential notation.
3.1415…, 2.0e11

Integer and Floating-point number example
var integerVar = 100;
var floatingPointVar = 3.0e10;
// floating-point number 30000000000
document.write(integerVar);
document.write(floatingPointVar);
</script>
The integer 100 and the number 30,000,000,000 will be

appeared in the browser window.

Boolean Values
A Boolean value is a logical value of either true or false.

(yes/no, on/off)
Often used in decision-making and data comparison.
In JavaScript, you can use the words “true” and “false”
to indicate Boolean values.
True=1
False=0

Boolean value example
<head>
var result;
result = (true*10 + false*7);
alert(“true*10 + false*7 =“ , result);
</script>
</head>
The expression is converted to

(1*10 + 0*7) = 10

Strings
<head>
document.write(“This is a string.”);
document.write(“This string contains ‘quote’.”);
var myString = “My testing string”;
alert(myString);
</script>
</head>
 A string variable can store a sequence of alphanumeric
characters, spaces, and special characters.
 A string can also be enclosed in single quotation marks (‘Hello’) or double
quotation marks (“Hello”) and Backticks marks (`Hello `).
 What is the data type of “100”? It is a string but not a number
type.
typeof operator
<head>
var x = “hello”, y,z;
alert(“Variable x value is “ + typeof(x));
alert(“Variable y value is “ + typeof(y));
alert(“Variable z value is “ + typeof(z));
</script>
</head>
It is an unary operator.
Return either: Number, string, Boolean, object, function,
undefined, null.

What is an Object?
An object is a thing, anything, just as things in the real

world.
E.g. (cars, dogs, money, books, … )
In the web browser, objects are the browser window
itself, forms, buttons, and text boxes, …
Methods are things that objects can do.
Cars can move, and dogs can bark.
Window object can alert the user “message()”.
All objects have properties.
Cars have wheels, dogs have legs.
The browser has a name and version number.

Array
An Array contains a set of data represented by a single

variable name.
Arrays in JavaScript are represented by the Array
Object, we need “new Array()” to construct this object.
The first element of the array is “Array[0]” and the last
one is Array[n-1].
E.g. myArray = new Array(5)
We have myArray[0,1,2,3,4].

Array Example
Car = new Array(3);
Car[0] = “Ford”;
Car[1] = “Toyota”;
Car[2] = “Honda”;
document.write(Car[0] + “<br>”);
</script>
You can also declare arrays with variable length.
arrayName = new Array();
Null & Undefined
An “undefined” value is returned when you attempt to use

a variable that has not been defined or
you have declared but you forgot to provide with a
value.
Null refers to “nothing”
You can declare and define a variable as “null” if you
want absolutely nothing in it, but you just don’t want it to
be “undefined”.

Null & Undefined example
<html>
<head>
<title> Null and Undefined example </title>
var test1, test2 = null;
alert(“No value assigned to the variable” + test1);
alert(“A null value was assigned” + test2);
</script>
</head>
<body> … </body>
</html>
Expressions
It is a set of literals, variables, operators that are merged

and evaluated to a single value.
Left_operand operator right_operand
By using different operators, you can create the
following expressions.
Arithmetic,
logical
String and
conditional expressions.

Operators
 Arithmetic operators
Logical operators
Comparison operators
String operators
Bit-wise operators
Assignment operators
Conditional operators

Arithmetic operators
left_operand operator right_operand
Operator Name Description Example

+ Addition Adds the operands 3+5
- Subtraction Subtracts the right 5-3
operand from the left
operand
* Multiplication Multiplies the operands 3 * 5
/ Division Divides the left operand 30 / 5
by the right operand
% Modulus Calculates the 20 % 5
remainder

Unary Arithmetic Operators
Binary operators take two operands.

Unary type operators take only one operand.
Which one add value first, and then assign value to the
variable?
Name Example
Post Incrementing operator (postfix) Counter++
Post Decrementing operator Counter--
Pre Incrementing operator (prefix) ++counter
Pre Decrementing operator --counter

Logical operators
Used to perform Boolean operations on Boolean

operands
&& Logical and Evaluate to “true” 3>2 && 5<2
when both operands
are true
|| Logical or Evaluate to “true 3>1 || 2>5

when either operand
is true
! Logical not Evaluate to “true” 5 != 3

when the operand is
false

Comparison operators
Used to compare two numerical values

== Equal Perform type conversion before “5” == 5
checking the equality
=== Strictly equal No type conversion before testing “5” === 5
!= Not equal “true” when both operands are not 4 != 2
equal
!== Strictly not equal No type conversion before testing 5 !== “5”
nonequality
> Greater than “true” if left operand is greater than 2>5
right operand
< Less than “true” if left operand is less than 3<5
right operand
>= Greater than or “true” if left operand is greater than 5 >= 2
equal or equal to the right operand
<= Less than or equal “true” if left operand is less than or 5 <= 2
equal to the right operand

Strict Equality Operators
var currentWord=“75”;
var currentValue=75;
var outcome1=(currentWord == currentValue);
var outcome2=(currentWord === currentValue);
alert(“outcome1: “ + outcome1 + “ : outcome2: “ +
outcome2);
</script>
Surprised that outcome1 is True, outcome2 is False
JavaScript tries very hard to resolve numeric and string
differences.
String operator
JavaScript only supports one string operator for joining two

strings.
Operator Name Description Return value
+ String Joins two “HelloWorld”
concatenation strings
var myString = “ ”;
myString = “Hello” + “World”;
alert(myString);
</script>

Bit Manipulation operators
Perform operations on the bit representation of a value,

such as shift left or right.
Operator Name Description

& Bitwise AND Examines each bit position
| Bitwise OR If either bit of the operands is 1,
the result will be 1
^ Bitwise XOR Set the result bit 1, only if either
bit is 1, but not both
<< Bitwise left shift Shifts the bits of an expression to
the left
>> Bitwise signed right Shifts the bits to the right, and
shift maintains the sign
>>> Bitwise zero-fill right Shifts the bits of an expression to
shift right
Assignment operators
Used to assign values to variables

Operator Description Example
= Assigns the value of the right operand to A=2
the left operand
+= Add the operands and assigns the result to A += 5
the left operand
-= Subtracts the operands and assigns the A -= 5
result to the left operand
*= Multiplies the operands and assigns the A *= 5
result to the left operand
/= Divides the left operands by the right A /= 5
operand and assigns the result to the left
operand
%= Assigns the remainder to the left operand A %= 2

The most common problem
if (alpha = beta) { … }
if (alpha == beta) { … }
</script>
Don’t mix the comparison operator and the
assignment operator.
double equal sign (==) and the equal operator (=)

Order of Precedence
Precedence Operator
1 Parentheses, function calls
2 , ~, -, ++, --, new, void, delete
3 *, /, %
4 +, -
5 <<, >>, >>>
6 <, <=, >, >=
7 ==, !=, ===, !==
8 &
9 ^
10 |
11 &&
12 ||
13 ?:
14 =, +=, -=, *=, …
15 The comma (,) operator

Precedence Example
Value = (19 % 4) / 1 – 1 - !false

Value = 3 / 1 – 1 - !false
Value = 3 / 1 – 1 - true
Value = 3 – 1 - true
Value = 3 – 2
Value = 1

Example of variable, data types
<html><head><title> Billing System of Web Shoppe </title></head><body>
<h1 align="center"> Billing System of Web Shoppe </h1>
<script language="JavaScript">
firstCustomer = new Array();
billDetails = new Array(firstCustomer);
var custName, custDob, custAddress, custCity, custPhone;
var custAmount, custAmountPaid, custBalAmount;
custName=prompt("Enter the first customer's name:", "");
custDob=prompt("Enter the first customer's date of birth:", "");
custAddress=prompt("Enter the first customer's address:", "");
custPhone=prompt("Enter the first customer's phone number:", "");
custAmount=prompt("Enter the total bill amount of the first customer:", "");
custAmountPaid=prompt("Enter the amount paid by the first customer:", "");
custBalAmount = custAmount - custAmountPaid;
firstCustomer[0]=custName;
firstCustomer[1]=custDob;
firstCustomer[2]=custAddress;
firstCustomer[3]=custPhone;
firstCustomer[4]=custBalAmount;
document.write("<B>" + "You have entered the following details for first customer:" + "<BR>");
document.write("Name: " + billDetails[0][0] + "<BR>");
document.write("Date of Birth: " + billDetails[0][1] + "<BR>");
document.write("Address: " + billDetails[0][2] + "<BR>");
document.write("Phone: " + billDetails[0][3] + "<BR>");
(custBalAmount == 0) ? document.write("Amount Outstanding: " + custBalAmount):document.write("No
amount due")
</script></body></html>
Department of Software Engineering
45 04/30/2024
Conditional Statement
“if” statement
“if … else” statement
“else if” statement
“if/if … else” statement
“switch” statement

“if” statement
if (condition)
{
statements;
}
It is the main conditional statement in JavaScript.
The keyword “if” always appears in lowercase.
The condition yields a logical true or false value.
The condition is true, statements are executed.

“if” statement example
var chr = “ ”;
…
if (chr == ‘A’ || chr == ‘O’) {
document.write(“Vowel variable”);
}
</script>

“if … else” statement
if (condition)
{
statements;
}
else
{
statements;
}
You can include an “else” clause in an if statement
when you want to execute some statements if the
condition is false.
Ternary Shortcut (concise)
If (3 > 2) {
alert(“True”);
}
else {
alert(“False”);
}
(3 > 2) ? alert(“True”) : alert(“False”);
</script>
Substitute for a simple “if/else” statement.

“if..else.. if” statement
if (condition) {
statement;
}
else if (condition) {
statement;
}
…….
else {
statement;
}
 Allows you to test for multiple expression for one true
value and executes a particular block of code.
“if/if…else” statement example
var chr;
chr = prompt(“Please enter a character : “,””);
if (chr >= ‘A’)
{
if (chr <= ‘Z’)
alert(“Uppercase”);
else if (chr >= ‘a’)
{
alert(“Lowercase”);
}
}
</script>
“switch” statement
switch (expression)
{
case label1:
statements;
break;
default:
statements;
}
Allows you to merge several evaluation tests of the
same variable into a single block of statements.

“switch” statement example
var chr;
chr = prompt(“Pls enter a character in lowercase:”,””);
switch(chr){
case ‘a’ :
alert(“Vowel a”); break;
case ‘e’ :
alert(“Vowel e”); break;
default :
alert(“Not a vowel”);
}
</script>
Looping Statement
“for” Loops
“for/in” Loops
“while” Loops
“do … while” Loops

“for” statement
for (initial_expression; test_exp; change_exp)

{
statements;
}
One of the most used and familiar loops is the for loop.
It iterates through a sequence of statements for a
number of times controlled by a condition.
The change_exp determines how much has been added
or subtracted from the counter variable.

“for” statement example
var counter;
for (counter = 1; counter <= 10; counter++)
{
document.write(counter*counter + “ “);
}
</script>
Display the square of numbers
Output: 1 4 9 16 25 36 49 64 81 100

“for/in” statement
for (counter_variable in object)

{
statements;
}
When the for/in statement is used, the counter and
termination are determined by the length of the object.
The statement begins with 0 as the initial value of the
counter variable, terminates with all the properties of
the objects have been executed.
E.g. array - no more elements found

“for/in” statement example
var book;
var booklist = new Array(“Chinese”, “English”, “Jap”);
for (var counter in booklist) {
book += booklist[counter] + “ “;
}
alert(book);
</script>

“while” statement
initial value declaration;

while (condition)
{
statements;
increment/decrement statement;
}
The while loop begins with a termination condition
and keeps looping until the termination condition is
met.
The counter variable is managed by the context of the
statements inside the curly braces.
“While” statement example
<html>
<head>
<title>While loop example</title>
var counter = 100;
var numberlist = “”;
while (counter > 0) {
numberlist += “Number “ + counter + “<br>”;
counter -= 10;
}
document.write(numberlist);
</script> <body> … </body>
</html>

“do … while” statement
do
{
statements;
counter increment/decrement;
}
while (termination condition)
The do/while loop always executes statements in the
loop in the first iteration of the loop.
The termination condition is placed at the bottom of
the loop.

JavaScript function
A function is a reusable code block that will be executed by

an event or when the function is called.
Declare a function
function myfunction(prameter1, prameter2, etc)
{
Some statements;
}
Call a function
myfunction(argument1, argument2, etc);

Example
 There is a button having the value “Message” and if

u click it the function message() will be called.
<input type=“button” value=“Message”
onClick=“message()”>
 The function will display an alert which says Hello
World.
function message() {
alert(“Hello World");
}

Events & Event Handlers
 Every element on a web page has certain events
 Events can trigger invocation of event handlers.
 Events can be:
 A mouse click,
 A web page or an image loading,
 Mousing over a hot spot on the web page …, etc
 Some of pre defined event handler functions:
 onclick - Mouse clicks an object
 ondblclick - Mouse double-clicks an object
 onselect - Text is selected
 onsubmit - The submit button is clicked
 onunload - The user exits the page
65 Department of Software Engineering 04/30/2024qq
JavaScript HTML DOM
https://www.w3schools.com/js/js_htmldom_methods.asp
66 Department of Software Engineering 04/30/2024qq

Form Validation with JavaScript
 The process of checking that a form has been filled incorrectly before it is
processed.
 A simple form with validation
 The first part of the form is the form tag:
<form name=“myForm" onsubmit=“return validateForm( );">
<h1>Please Enter Your Name</h1>
<p>Your Name: <input type="text" name=“fname"></p>
<p><input type="submit" name="send" value="Send Details"></p>
</form>
 The form is given a name of "contact_form". This is so that we can
reference the form by name from our JavaScript validation function.
 The form tag includes an onsubmit attribute to call our JavaScript
validation function, validate_form(), when the submit type of button in the
form is pressed.
 The function validate_form() will validate whether the user enters Name
or not.
Validating text filed
 Checks to see whether the text filed Is fill or not
 Use built in function .value for validation
Example:
<html>
<head>
<script>
function validateForm() {
var x=document.myForm.fname.value;
if (x==null || x=="")
{
alert("First name must be filled out");
document.myForm.fname.focus();
return false;
}}
</script>
</head>
Cont.…
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

Validating radio buttons
• Checks to see whether either of the radio buttons

have been clicked.
• Mostly used for unique identification
• Use built in function .checked for validation

Example
<html>
<head>
<script>
function validation() {
if ( ( document.reg_form.dept[0].checked == false ) &&
(document.reg_form.dept[1].checked == false) ) {
alert ( "Please choose your Gender: Male or Female" );
valid = false; }
}
</script>
</head>

<body >
<form name="reg_form">
<input type="radio" name="dept" value="female">female
<input type="radio" name="dept" value="male">male
<input type="submit" onclick="validation()"
value="register">
</form>
</body>
</html>

Validating drop-down lists
 Used to make sure that one of the elements from drop down list has
been selected or not.
 The pre defined function .selctedIndex can get the selected element
from the drop down list.
example
<html>
<head>
<script>
function validation()
{
if ( document.reg_form.dept.selectedIndex == 0 ) {
alert ( "Please select your departement." );
return false; }
}
</script>
</head>

<body>
<form name="reg_form">
department<select name="dept">
<option>select your department here</option>
<option>computer science</option>
<option>information technology</option>
<option>information system</option>
</select>
<input type="button" value="register"
onclick="validation()">
</body>
</html>

me nt
s s i gn
i ng a .
ut J S
R ead Mo r e a b o
R e a d
h - 3
of C
END
A?
Q&

Chapter JS All

Uploaded by

Document Information

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

Chapter JS All

Uploaded by

Copyright:

Available Formats

Chapter Three

Client-Side Scripting Language

The growth of WWW is resulted in demand for dynamic and

3 Department of Software Engineering 04/30/2024

4 Department of Software Engineering 04/30/2024

Scripts in the head section: Scripts to be executed when

6 Department of Software Engineering 04/30/2024

Sometimes you might want to run the same JavaScript on

The three methods of JS

10 Department of Software Engineering 04/30/2024

11 Department of Software Engineering 04/30/2024

12 Department of Software Engineering 04/30/2024

13 Department of Software Engineering 04/30/2024

14 Department of Software Engineering 04/30/2024

15 Department of Software Engineering 04/30/2024

17 Department of Software Engineering 04/30/2024

19 Department of Software Engineering 04/30/2024

It is an important part of any programming language for

21 Department of Software Engineering 04/30/2024

The integer 100 and the number 30,000,000,000 will be

22 Department of Software Engineering 04/30/2024

A Boolean value is a logical value of either true or false.

23 Department of Software Engineering 04/30/2024

The expression is converted to

24 Department of Software Engineering 04/30/2024

26 Department of Software Engineering 04/30/2024

An object is a thing, anything, just as things in the real

27 Department of Software Engineering 04/30/2024

An Array contains a set of data represented by a single

28 Department of Software Engineering 04/30/2024

An “undefined” value is returned when you attempt to use

30 Department of Software Engineering 04/30/2024

It is a set of literals, variables, operators that are merged

32 Department of Software Engineering 04/30/2024

33 Department of Software Engineering 04/30/2024

Operator Name Description Example

34 Department of Software Engineering 04/30/2024

Binary operators take two operands.

Post Decrementing operator Counter--

Pre Incrementing operator (prefix) ++counter

Pre Decrementing operator --counter

35 Department of Software Engineering 04/30/2024

Used to perform Boolean operations on Boolean

|| Logical or Evaluate to “true 3>1 || 2>5

! Logical not Evaluate to “true” 5 != 3

36 Department of Software Engineering 04/30/2024

Used to compare two numerical values

Operator Name Description Example

37 Department of Software Engineering 04/30/2024

JavaScript only supports one string operator for joining two

39 Department of Software Engineering 04/30/2024

Perform operations on the bit representation of a value,

Operator Name Description

Used to assign values to variables

41 Department of Software Engineering 04/30/2024

42 Department of Software Engineering 04/30/2024

43 Department of Software Engineering 04/30/2024

Value = (19 % 4) / 1 – 1 - !false

44 Department of Software Engineering 04/30/2024

46 Department of Software Engineering 04/30/2024

47 Department of Software Engineering 04/30/2024

48 Department of Software Engineering 04/30/2024

50 Department of Software Engineering 04/30/2024

53 Department of Software Engineering 04/30/2024