Scribd
Upload
6 views

JAVASCRIPT

The document discusses JavaScript including its use as a scripting language, examples of scripts, processing scripts on the client-side vs server-side, using JavaScript for validation and interactions, basic syntax, variables, operators, conditional statements, loops, functions and arrays.

Uploaded by

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

JAVASCRIPT

The document discusses JavaScript including its use as a scripting language, examples of scripts, processing scripts on the client-side vs server-side, using JavaScript for validation and interactions, basic syntax, variables, operators, conditional statements, loops, functions and arrays.

Uploaded by

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

JAVASCRIPT

Scripting Language
⦿ scaled down version of programming
language
⦿ usually interpreted by the computer (eg:
web browser )
⦿ Examples of script: Perl, VBScript and
JavaScript
⦿ Processing of a script :
⚫ Client-side : Interpreted by the web browser
⚫ Server-side : Interpreted by the web server
Javascript
⦿ It is not Java
⦿ Why use script?
⚫ Make a website more interactive and lively
⚫ To validate a form ( check for errors )
⚫ To do arithmetic operations
Javascript Example:
Javascript Example:
Javascript Declaration
<script language= “JavaScript”>
…
</script>
OR
<script type = “text /JavaScript”> ……
</script>
Hiding Javascript from Old
Browsers
<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>
Displaying Output
document.write

<script language = “JavaScript”>


document.write(“Hello world”);
</script>
Comment
⦿ To write some comments/notes about
the codes, use the comment.
⦿ It is also useful when you want to
disable a particular line of source codes
⦿ Single line comment : //
⦿ Multiline comment : /* … */
Comment
<script language = “JavaScript”>
// To display greetings to the user
document.write(“Hello world”);
</script>
<script language = “JavaScript”>
/* To display greetings to the user
using document.write */
document.write(“Hello world”);
</script>
Writing of script
<head> and <body>
<html>
<head>
<title>My First JavaScript</title>
<script language="JavaScript">
document.write("I'm Java script in the HEAD.");
</script>
</head>
<body>
<br>
I'm a plain HTML text.
<br>
<script language="JavaScript">
//To write script in the body
document.write("I'm Javascript in the BODY");
</script>
</body>
</html>
Allowing Scripts

Some settings of a web browser do


not allow scripts to be executed. To
enable the execution of scripts, left
click on the message and choose
Allow Blocked Content .

Initially, when the page is


loaded into the browser,
only plain HTML text is
displayed.
Allowing Scripts
A dialog box will
appear, click YES.

Scripts are executed


Embedding HTML tags in script

<script language= “JavaScript”>


document.write("Welcome<br>to<br>my homepage<hr>");
</script>
Embedding HTML tags in script
Variables
⦿ Variable is a container for the
information that you want to store.
⦿ The info could be a value, or expression.
⦿ Variables can be used to store string,
numbers and Boolean(true/false) value.
Variable Declaration
⦿ Eg: Variable name can be declared in many
ways, however its name must be descriptive
var studentname; (i.e represents the kind of data it stores).
var studentName; For example, to store data about student
name, you may declare the variable as
var student_name; shown on the left.

⦿ Eg: Variable declaration must be ended with


semicolon (;)
var age;
var Age;
Assigning Value to a Variable
⦿ Eg:
⦿ var studentname = “Ahmad”; // string
⦿ var message=“Hello students”; //string
⦿ var age = 21; // number
⦿ var price = 34.90; //number
⦿ var check = true; // Boolean
Concatenation
⦿ Concatenation is an operation to join/
combine string with string OR
string with variable.
⦿ Eg:
⚫ “My name is” “Ali”
⚫ document.write(“My name is” + “Ali”);
⦿ Eg:
⚫ var studentname = “Ali”;
⚫ “My name is”
⚫ document.write(“My name is” + studentname);
Getting Input From User
⦿ prompt
⦿ Eg:
⚫ var name = prompt(“Enter your name”);
⚫ var age = prompt(“Please enter your age”);
⚫ var favcolor = prompt(“What is your favourite
colour?”);
⚫ var birthdate = prompt(“Bilakah anda
dilahirkan?”);
Parsing User Input
⦿ parseInt
⦿ parseFloat
Escape Sequences
⦿ when a character in a string is preceded
by the backslash character “\” there is a
special effect on the character
immediately following the backslash
Escape Sequences
⦿ Example
alert(“We all say \n\”JavaScript \”\n is
great”);
⦿ Output
Lesson 2
⦿ If else
⦿ For loop
⦿ While loop
⦿ Do while loop
⦿ Array
⦿ Switch
If else
⦿ A conditional statement
⦿ For decision making
⦿ if (comparison)
{ statements; }

⦿ if (comparison)
{ statements; }
else
{ statements; }

⦿ if (comparison)
{ statements; }
else if (comparison)
{ statements; }
else
{ statements; }
if else example
<script language = “JavaScript”>
var marks;
marks = prompt(“Please type in your marks”);
marks = parseInt(marks);
if (marks>=50)
{
alert(“Pass”);
}
else if(marks < 50)
{
alert(“Fail”);
}
</script>
if else example
<script language = "JavaScript">
var marks;
marks = prompt("Please type in your Test 1 marks");
marks = parseInt(marks);
if (marks<0)
{alert("Your marks is out of range");}
else if (marks <50&&marks >0)
{ alert("You obtained E"); }

else if (marks >=50 && marks <60)


{ alert("You obtained D"); }

else if (marks >=60 && marks <70)


{ alert("You obtained C"); }

else if (marks >= 70 && marks <80)


{ alert("You obtained B"); }
else
{ alert ("Congratulations! You are an A student "); </script>
for loop
⦿ To do repetition

for (var i= start value; var i< limit; var++)


{
statements;
}
for loop example 1
<html>
<head><title>Looping</title></head>
<body>
<script language=“JavaScript”>
var i;

for (i=0; i<10; i++)


{
document.write("I’m number " +
i + "<br>");
}
</script>

</body>
</html>
for loop example 2
<html>
<head><title>Looping</title></head>
<body>
<script language=“JavaScript”>
var i;

for (i=0; i<10; i++)


{
document.write( “I’m happy” +
"<br>");
}
</script></body></html>
for loop example 3
<html>
<head><title>Looping</title></head>
<body>
<script language=“JavaScript”>
var i;

for (i=1; i<10; i++)


{
document.write("I’m number " +
i + "<br>");
}
</script>

</body>
</html>
Nested for loop
<html>
<head>
<title>My First JavaScript</title>
</head>
<body>
<script language= "JavaScript">

for (a=0;a<3;a++)
{
document.write("<p>a is " + a + "</p>");
for (b=1;b<3;b++)
{
document.write("welcome " + b + "<br>" );
}
}
</script></body></html>

Explanation:
The outer for loop iterates 3 times (a=0 until a=2) while the
inner for loop iterates 2 times only (b=1 until b=2).
While loop
while (condition)
{
statements;
}
statement block;

⦿ The statements will continue to be executed as long as the


condition is true.
while loop example 1
<html>
<head>
<title>while loop</title>
</head>
<body>
<script language= "JavaScript">
var i=0;
while (i<10)
{
document.write("I’m number " + i + "<br>");
i++;
}
</script></body></html>

Eg 1: This is an example to display the same


output like ‘Eg 1 for loop’ using while loop
while loop example 2
<html>
<head>
<title>while loop</title>
</head>
<body>
<script language= "JavaScript">
var i=1;
while (i<5)
{
var j=i+1;
document.write("Iteration " + i);
if (j > i)
document.write("<br>j is " + j + " and i is " + i + "<hr>");
i++;
}
document.write(" When value of i is 5, the loop stops. ");
</script></body></html>

Combining if statement inside while


loop
do while loop
⦿ This is a variation of the while loop. Since
the condition is placed at the end of the
loop, the statement is executed at least
ONCE.

do
{
statements;
}
while (condition);
do while example
<html>
<head>
<title>while loop</title>
</head>
<body>
<script language= "JavaScript">
var i=1;
do
{
document.write("i is " + i);
}
while (i>5)
document.write("<br>do while loop will execute
at least once");
</script></body></html>
do while VS while loop
do
{
document.write("i is " + i); while (i>5)
} {
while (i>5) document.write("i is " + i);
document.write("<br>do while loop }
will execute at least once"); document.write("<br>do while loop
will execute at least once");
Javascript Array
⦿ An array is a variable that can contain
multiple values
⦿ A variable is given array status using the
JS “new” keyword along with the JS
“Array()” constructor
⦿ Every item in an array has its own index
number. Index number starts with 0.
Array Declaration
⦿ EXAMPLE 1

var fruit = new Array();


fruit[0]= “melon”;
fruit[1] = “orange”;
fruit[2] = “rambutan”;
⦿ OR
var fruit = new Array(“melon”,”orange”,”rambutan”);
Array Declaration
⦿ EXAMPLE 2

var mynumber = new Array();


mynumber[0]= 34;
mynumber[1] = 150;
mynumber[2] = 9917;
mynumber[3] = 1;
⦿ OR
var mynumber = new Array(34,150,9917,1);
Array – length property
To determine the size of array, use the length property.
Array – join()
⦿ Array join() method will convert all array elements
to strings and concatenate them
Array – sort()
⦿ To sort the item in ascending
Switch

<script language= "Javascript">


var option;
alert("Please choose your program");
option = prompt(" Type 1= CS110 2= AS120 3=CS113 4=CS220", "");
switch(option)
{
case '1':
document.write("You are a Computer Science student");
break;
case '2':
document.write("You are a Science student");
break;
case '3':
document.write("You are a Quantitative Science student");
break;
case '4':
document.write("You are an Information Technology student");
break;
default:
alert("Error. Please choose an option.");

}
</script>

You might also like