\n\n\n\n\n\n The return Statement
\nslide5. 5 In JavaScript we have the following conditional statements:\n\nif statement - use this statement to execute some code only if a specified condition is true\n\nif...else statement - use this statement to execute some code if the condition is true and another code if the condition is false\n\nif...else if....else statement - use this statement to select one of many blocks of code to be executed\n\nswitch statement - use this statement to select one of many blocks of code to be executed\n\nNote that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error! Conditional Statements
\nslide6. 1. if Statement\nSyntax if (condition)\n{\ncode to be executed if condition is true\n}\n\nExample:\n\nHello World\n\n\n 6
\nslide7. 7 2. If else Statement •Use the if....else statement to execute some code if a condition is true and another code if the condition is not true.\n\nSyntax\nif (condition)\n{\ncode to be executed if condition is true\n}\nelse\n{\ncode to be executed if condition is not true\n}
\nslide8. 8 If..else Statement–Example
\nslide9. 9 3. If…else if…else Statement •Use the if....else if...else statement to select one of several blocks of code to be executed. Syntax\nif (condition1)\n{\ncode to be executed if condition1 is true\n}\nelse if (condition2)\n{\ncode to be executed if condition1 is false and condition2 is true\n}\nelse\n{\ncode to be executed if neither condition1 nor condition2 is true\n}
\nslide10. 10 If…else if…else Statement– Example
\nslide11. 11 4. Switch Statement Use the switch statement to select one of many blocks of code to be executed.\n\nSyntax\nswitch(n)\n{\ncase 1:\nexecute code block 1 break;\ncase 2:\nexecute code block 2 break;\ndefault:\ncode to be executed if n is different from case 1 and 2\n}
\nslide12. 12 Switch Statement–Example
\nslide13. 13 Loops execute a block of code a specified number of times, or while a specified condition is true.\n\nThe for loop has the following syntax:\n\n\nfor (statement 1; statement 2; statement 3) { code block to be executed\n} For loop
\nslide14. 14 Loop through the six different HTML Headings.\n\n\n\n\n\n\n\n For Loop–Example
\nslide15. 15 While Loop Syntax\nwhile (condition)\n{\ncode to be executed\n}\nExample:\n\n\n

Introduction to Web Programming Lecture 9:

tatyana-admore
Published  . 0 views
↓ Download
Introduction to Web Programming Lecture 9:
1 / 1
Introduction to Web Programming Lecture 9: - slide 1 of 28 Introduction to Web Programming Lecture 9: - slide 2 of 28 Introduction to Web Programming Lecture 9: - slide 3 of 28 Introduction to Web Programming Lecture 9: - slide 4 of 28 Introduction to Web Programming Lecture 9: - slide 5 of 28 Introduction to Web Programming Lecture 9: - slide 6 of 28 Introduction to Web Programming Lecture 9: - slide 7 of 28 Introduction to Web Programming Lecture 9: - slide 8 of 28 Introduction to Web Programming Lecture 9: - slide 9 of 28 Introduction to Web Programming Lecture 9: - slide 10 of 28 Introduction to Web Programming Lecture 9: - slide 11 of 28 Introduction to Web Programming Lecture 9: - slide 12 of 28 Introduction to Web Programming Lecture 9: - slide 13 of 28 Introduction to Web Programming Lecture 9: - slide 14 of 28 Introduction to Web Programming Lecture 9: - slide 15 of 28 Introduction to Web Programming Lecture 9: - slide 16 of 28 Introduction to Web Programming Lecture 9: - slide 17 of 28 Introduction to Web Programming Lecture 9: - slide 18 of 28 Introduction to Web Programming Lecture 9: - slide 19 of 28 Introduction to Web Programming Lecture 9: - slide 20 of 28 Introduction to Web Programming Lecture 9: - slide 21 of 28 Introduction to Web Programming Lecture 9: - slide 22 of 28 Introduction to Web Programming Lecture 9: - slide 23 of 28 Introduction to Web Programming Lecture 9: - slide 24 of 28 Introduction to Web Programming Lecture 9: - slide 25 of 28 Introduction to Web Programming Lecture 9: - slide 26 of 28 Introduction to Web Programming Lecture 9: - slide 27 of 28 Introduction to Web Programming Lecture 9: - slide 28 of 28
Description: Introduction to Web Programming Lecture 9: Introduction to JavaScript (Part 2) 1 Natheer Gharaibeh 2 Outlines of todays lecture Functions Conditional statements Loops Popup windows Events 3 A JavaScript function is a block of

Related Topics

Download Presentation

"Introduction to Web Programming Lecture 9:" is the property of its rightful owner. Permission is granted to download and print the materials on this website for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Presentation Transcript

slide1. Introduction to Web Programming Lecture 9: Introduction to JavaScript (Part 2) 1 Natheer Gharaibeh<br>
slide2. 2 Outlines of today’s lecture • Functions • Conditional statements • Loops • Popup windows • Events<br>
slide3. 3 • A JavaScript function is a block of code designed to perform a particular task.
A function will be executed by an event or by a call to the function.
JavaScript Function Syntax
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
The parentheses may include parameter names separated by commas: (parameter1, parameter2, …)
The code to be executed, by the function, is placed inside curly brackets: {} functionName(parameter1, parameter2, parameter3)
{
code to be executed
} JavaScript Functions<br>
slide4. 4 functions that are going to return a value must use the return statement.
The example below returns the product of two numbers (a and b):
<html>
<head>
<script type="text/javascript"> function product(a,b)
{
return a*b;
}
</script>
</head>

<body>
<script type="text/javascript"> document.write(product(4,3));
</script>
</body>
</html> The return Statement<br>
slide5. 5 In JavaScript we have the following conditional statements:

if statement - use this statement to execute some code only if a specified condition is true

if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false

if...else if....else statement - use this statement to select one of many blocks of code to be executed

switch statement - use this statement to select one of many blocks of code to be executed

Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error! Conditional Statements<br>
slide6. 1. if Statement
Syntax if (condition)
{
code to be executed if condition is true
}

Example:
<html>
<head><title>Hello World</title></head>
<body>
<script>//Write a "Good morning" greeting if
//the time is less than 12
var d=new Date();var time=d.getHours(); if(time<12) {
document.write("<b>Good morning</b>”);
}
</script>
</body> </html> 6<br>
slide7. 7 2. If else Statement •Use the if....else statement to execute some code if a condition is true and another code if the condition is not true.

Syntax
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}<br>
slide8. 8 If..else Statement–Example <script type="text/javascript">
//If the time is less than 12, you will get a "Good morning" greeting.
//Otherwise you will get a "Good afternoon" greeting.

var d = new Date();
var time = d.getHours(); if (time < 12)
{
document.write("Good morning!");
}
else
{
document.write("Good afternoon!");
}
</script><br>
slide9. 9 3. If…else if…else Statement •Use the if....else if...else statement to select one of several blocks of code to be executed. Syntax
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition1 is false and condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}<br>
slide10. 10 <script type="text/javascript"> var d = new Date()
var time = d.getHours() if (time<12)
{
document.write("<b>Good morning</b>");
}
else if (time>=12 && time<19)
{
document.write("<b>Good afternoon</b>");
}
else
{
document.write("<b>Good night!</b>");
}
</script> If…else if…else Statement– Example<br>
slide11. 11 4. Switch Statement Use the switch statement to select one of many blocks of code to be executed.

Syntax
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
}<br>
slide12. 12 <script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.

var d=new Date();
var theDay=d.getDay(); switch (theDay)
{
case 5:
document.write("Finally Friday"); break;
case 6:
document.write("Super Saturday"); break;
case 0:
document.write("Sleepy Sunday"); break;
default:
document.write("I'm looking forward to this weekend!");
}
</script> Switch Statement–Example<br>
slide13. 13 Loops execute a block of code a specified number of times, or while a specified condition is true.

The for loop has the following syntax:

for (statement 1; statement 2; statement 3) { code block to be executed
} For loop<br>
slide14. 14 Loop through the six different HTML Headings.

<html>
<body>

<script type="text/javascript"> for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is heading " + i); document.write("</h" + i + ">");
}
</script>

</body>
</html> For Loop–Example<br>
slide15. 15 While Loop Syntax
while (condition)
{
code to be executed
}
Example:
<html>
<body>
<script type="text/javascript"> var i=0;
while (i<=5)
{
document.write("The number is " + i); document.write("<br />");
i++;
}
</script>
</body>
</html><br>
slide16. Syntax
do
{
code to be executed
} while (condition);

Example
<html>
<body>
<script type="text/javascript"> var i=0;
do
{
document.write("The number is " + i); document.write("<br />");
i++;
} while (i<=5);
</script>
</body> </html> The do…while Loop 16<br>
slide17. 17 The for...in statement loops through the properties of an object.
Syntax
for (variable in object)
{
code to be executed
}
Example
var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
document.write(person[x] + " ");
} The for…in Statement<br>
slide18. 18 The continue statement will break the current loop and continue with the next value.

<html>
<body>
<script type="text/javascript"> var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i); document.write("<br />");
}
</script>
</body>
</html> The continue Statement<br>
slide19. 19 Popup Boxes JavaScript has three kinds of popup boxes:

•Alert box

•Confirm box

•Prompt box<br>
slide20. Alert Box An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.

Syntax
alert(“sometext");

Example
<html>
<head>
<script type="text/javascript"> function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
</html> 20<br>
slide21. 21 Alert Box–Another Example <html>
<head>
<script type="text/javascript"> function disp_alert()
{
alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="Display alert box" />
</body>
</html><br>
slide22. Confirm Box • • • A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax
confirm("sometext"); 22<br>
slide23. 23 Confirm Box–Example <html>
<head>
<script type="text/javascript"> function show_confirm()
{
var r=confirm("Press a button");
if (r==true) alert("You pressed OK!"); else alert("You pressed Cancel!");
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
</body>
</html><br>
slide24. Prompt Box A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax
prompt("sometext","defaultvalue"); 24<br>
slide25. 25 <html>
<head>
<script type="text/javascript"> function show_prompt()
{
var name=prompt("Please enter your name","Harry Potter"); if (name!=null)
document.write("Hello " + name + "! How are you today?");
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt box" />
</body>
</html> Prompt Box–Example<br>
slide26. 26 HTML events are "things" that happen to HTML elements.

Events are actions that can be detected by JavaScript.

When JavaScript is used in HTML pages, JavaScript can "react" on these events.

For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

Examples of events:
A mouse click
A web page or an image loading
Mousing over a hot spot on the web page
Selecting an input field in an HTML form

Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs! JavaScript Events<br>
slide27. 27 The example below displays the date when a button is clicked:

<html>
<head>
<script type="text/javascript"> function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html> JavaScript Events–Example<br>
slide28. 28 References www.w3schools.com
Deitel & Deitel (2011). Internet and World Wide Web How to Program, 5th Edition, Harvey & Paul Deitel & Associates.<br>