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

JavaScript I

Uploaded by

nurin atira
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views

JavaScript I

Uploaded by

nurin atira
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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