Scribd
Upload
8 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 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
We take content rights seriously. If you suspect this is your content, claim it here.
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