Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
13 views

JavaScript I

Uploaded by

nurin atira
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

JavaScript I

Uploaded by

nurin atira
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 46

JAVASCRIPT

CSC264: Introduction To Web And Mobile Application


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>
…..
</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 (i.e
var studentname;
represents the kind of data it stores). For
var studentName;
example, to store data about student name, you
var student_name; may declare the variable as shown on the left.
• Eg:
var age; Variable declaration must be ended with
var Age; semicolon (;)
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

\b Backspace
\f Formfeed
\n New line
\r Carriage return
\t Tab
\' Single quote that will nor terminate a sring
\" Double quote that will not terminate a string
\\ Single backslash character
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
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>
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
{
while (i>5)
document.write("i is " + i);
{
} document.write("i is " + i);
while (i>5) }
document.write("<br>do while loop will document.write("<br>do while loop will
execute at least once"); 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>
THANK YOU
Next lesson  JavaScript II

You might also like