What is the greeting?

This checks the day, and then checks the time within each day check to determine the appropriate greeting to display.">

What is the greeting?

This checks the day, and then checks the time within each day check to determine the appropriate greeting to display.">
[go: up one dir, main page]
Scribd
Upload
59 views52 pages

Javascript - Part 1: It1100 - Internet and Web Technologies

Here is a nested if/else example: if (day == "Monday") { if (time < 12) { document.write("Good Morning!"); } else { document.write("Good Afternoon!"); } } else { if (time < 18) { document.write("Good Day!"); } else { document.write("Good Evening!"); } } </script> <p>What is the greeting?</p> </body> </html> This checks the day, and then checks the time within each day check to determine the appropriate greeting to display.

Uploaded by

Dutheesh Chelaka Karunarathne
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
59 views52 pages

Javascript - Part 1: It1100 - Internet and Web Technologies

Here is a nested if/else example: if (day == "Monday") { if (time < 12) { document.write("Good Morning!"); } else { document.write("Good Afternoon!"); } } else { if (time < 18) { document.write("Good Day!"); } else { document.write("Good Evening!"); } } </script> <p>What is the greeting?</p> </body> </html> This checks the day, and then checks the time within each day check to determine the appropriate greeting to display.

Uploaded by

Dutheesh Chelaka Karunarathne
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/ 52

IT1100 - Internet and Web Technologies

Lecture 04
JavaScript – Part 1

1
Content

• Introduction to the JavaScript

• Variables in JS

• Operators in JS

• Control structures in JS

2
Using Console Tab of Web Browsers
• All the popular web browsers have built-in JavaScript engines. Hence,
you can run JavaScript on a browser. To run JavaScript on a browser,
• Open your favorite browser (here we use Google Chrome).
• Open the developer tools by right clicking on an empty area and
select Inspect. Shortcut: F12.
Using Console Tab of Web Browsers
• On the developer tools, go to the console tab. Then, write JavaScript
code and press enter to run the code.
Why JavaScript?
Methods of using JavaScript
Methods of using JavaScript

1. Internal Script
• Scripts in the <body> section

• Scripts in the <head> section

1. External Script files

7
Internal script
• JavaScript is embedded into the HTML document using
the script element

<script >

//JS code

</script>

8
Internal script Example in the <head> section
<html>
<head>
<title>Internal JavaScript</title>
<script>
document.write("Internal JavaScript in the head section"); output
</script>
</head>

<body>
<h3 style="color:red;"> JavaScript </h3>
</body>
</html>

9
Internal script Example in the <body> section
<html>
<head>
<title>Internal JavaScript</title>
</head>
output
<body>
<h3 style="color:purple;"> JavaScript </h3>
<script>
document.write("Internal JavaScript in the body section");
</script>
</body>
</html>

10
External script
• The external JS file should use the extension as .js

• External file is linked to the web page in head using


the script element

• The script element uses the src attribute to specify the


URL of the source JS file
src=“<Location>/<FileName>.js”
11
External script
External script file linking

<head>
<script src=“…/ClientScripts/MainJS.js”> </script>
</head>

• The same JS file can be linked to multiple pages

12
External JavaScript Example
<html> Page.html
<head>
<title>
external script example output
</title>
</head>
<body>
<h4 style="color:red">External JavaScript</h4>
<script src="ex1.js"></script>
</body>
</html>

document.write("This is from External Javascript File"); ex1.js

13
Variables in JS
Data types in JS
1. Numerical
• Integers – 1, 2, 3, -56, -135, 3464
• Floating point/Decimal – 34.46, -65.135
2. Strings
• Single characters – “a”, “b”, “c”, “2”, “7”
• Multiple characters – “abc”, “12/04/2012”, “34”
3. Boolean – true / false
4. Null
5. Undefined

15
Data types
Note:
• JavaScript does not make a distinction between integer
values and floating point values.
• All numbers in JavaScript are represented as floating-
point values.

16
Variable declaration
The keyword var and let is used to declare a variable
• Examples
• var age;
• var smallNumber;
• var initial
• var name
• var isPassed;
• var num1, num2, num3;

17
Standars for the variable name
• You should not use any of the JavaScript
reserved keywords as a variable name.

• No spaces

• Meaningful

• Use camel case

18
Variable Initialization

var age = 20;


var height = 5.5;
var initial = "K";
var name = "Kamal";
var isPassed = true;

19
Assign values to the variables

age = 20;
height = 5.5;
initial = "K";
name = "Kamal";
isPassed = true;

20
JavaScript Constant Variables
The const keyword was also introduced in the ES6(ES2015) version to
create constants. For example,
const x = 5;
x = 10; // Error! constant cannot be changed
console.log(x)

Also, you cannot declare a constant without initializing it. For example
const x; // Error! Missing initializer in const declaration
x = 5;
console.log(x)

21
Read and use the variable value
var age = 20; //Declare and initialize the variable
document.write(age);

age = 25; //Assign a new value to the variable


document.write("<br>Modified age = " + age);

22
<html>

JS is a <head><title>JavaScript Page</title> </head>


<body><script type="text/javascript">
output
weakly document.write("4"/3);

typed document.write("<br>");
document.write("5" +5);
language document.write("<br>");
document.write("5"- 3);
document.write("<br>");
document.write("5"*"5");
document.write("<br>");
document.write(4*3);
document.write("<br>");
document.write(5* "5");
</script>
<h1>Hello world</h1>
</body>
</html> 23
JavaScript popup boxes
• Alert box
• alert (“This is an important message !”);

• Confirm box
• var response=confirm("Press a button");

• Prompt box
• var name=prompt("enter your name",“Sir");

24
Operators in JS
• Arithmetic Operators

• Assignment Operators

• Comparison Operators

• Logical Operators

26
Arithmetic Operators

27
Assignment Operators

28
Comparison Operators

http://www.w3schools.com/js/js_operators.asp

29
Logical Operators

http://www.w3schools.com/js/js_operators.asp

30
Control Structures in JS
Selection / Branching
• Simple if-else
• If-else ladder
• Nested if-else
• Switch

Repetition / Iteration / Looping


• While loop
• For loop
32
Simple if-else

• Used to divide the algorithm execution path into


branches based on conditions

• Conditions produce Boolean results

• If the condition is true – we can do something

• Else we can do some other thing


33
Simple if-else

if (<Condition>)
{
//Do something
}
else
{
//Do some other thing
}

• Else is optional
34
Simple if-else example

• User enters the mark for Maths.


• If the mark is greater than or equals 50 then display a
message “Pass”

• Else display a message “Fail”

35
Simple if-else example
if(mark >= 50)
{
document.write ("Pass");
}
else
{
document.write ("Fail");
}
36
Simple if-else example
// check is the number is positive or negative/zero
const number = prompt("Enter a number: ");

// check if number is greater than 0


if (number > 0) {
console.log("The number is positive");
} // if number is not greater than 0

else {
console.log("The number is either a negative number or 0");
}

console.log("The if...else statement is easy");


37
Nested if-else
Start

true false
If (Condition)

If (Condition) true If (Condition)

true false
false
Perform
Perform actions
actions
Perform Perform
actions actions

Stop
38
Nested if-else
if(<Condition1>)
{
if(<Condition2>) { //Actions }
else { //Actions }
}
else
{
if(<Condition3>) { //Actions }
else { //Actions }
}

39
Nested if-else
• Are these equivalent?

40
<html>
Nested if-else example <body>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time<10)
output {
document.write("<b>Good morning</b>");
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>
<p>
This example demonstrates the if..else if...else statement.
</p>
</body> 41
</html>
Switch
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different
from case 1 and 2
}

42
Switch example
var grade=“B”;
switch (grade)
{
case "A":
alert("Excellent");
break;

case "B":
alert("Good");
break;

default:
alert("Average");
break;
}
43
<html>
Switch <body>
<script type="text/javascript">

example var d = new Date();


theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("<b>Finally Friday</b>");
break;
case 6:
document.write("<b>Super Saturday</b>");
break;
case 0:
document.write("<b>Sleepy Sunday</b>");
break;
default:
document.write("<b>I'm really looking forward to this weekend!</b>");
}
</script>
<p>This JavaScript will generate a different greeting based on what day it is. Note that
Sunday=0, Monday=1, Tuesday=2, etc.</p>
</body>
44
</html>
while loop
• The purpose of a while
loop is to execute a
statement or code
block repeatedly as
long as an expression
is true.
• Once the expression
becomes false, the
loop terminates.

45
while loop example
<html>
<body>
<table border="5"> output
<script>
var i=1;
while (i<=6)
{
document.write("<tr>”);
document.write("<td>col 1 row " + i + "</td>")
document.write("<td>col 2 row " + i + “</td>");
document.write("</tr>");
i++;
}
</script>
</table>
</body>
</html>

46
for loop

for (var=startvalue; var<=endvalue; var=var+increment)


{
//code to be executed
}

47
for loop example
<html>
<body> output
<table border="5">
<script>
for (i=0;i<=6;i++)
{
document.write("<tr>");
document.write("<td>col 1 row " + i + "</td>")
document.write("<td>col 2 row " + i + "</td>");
document.write("</tr>");
//i++;
}
</script>
</table>
</body>
</html>

48
• The break Statement
• The break statement will break the loop and continue executing
the code that follows the loop (if any).

• The continue Statement


• The continue statement will break the current loop and
continue with the next iteration.

49
Break statement example
<html>

<body>

<script

for (i=0;i<=10;i++){
output
if (i==8)

break;

document.write("The number is " + i);

document.write("<br />");

document.write("Break….");

</script>

</body>
50
</html>
Continue statement example
<!DOCTYPE html>
<html>
<body>
<script>
var i=0 output
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html> 51
Content
Today
• Introduction to the JavaScript
• Variables in JS
• Operators in JS
• Control structures in JS

Next weeks
• Arrays
• Functions
• DOM
52

You might also like