In JavaScript we have the following conditional statement
• If statement
• If....else statement
• If...else if...else statement
• Switch statement
If statement
• You should use if statement if you want to execute some code only if a specified condition is true
• Syntax
if (condition)
{
code to be executed if condition is true
}
• <html>
• <body>
Example
• <p>Click the button to get a "Good day" greeting if the time is less than 20:00.</p>
• <button onclick="myFunction()">Try it</button>
• <p id="demo"></p>
• <script>
• function myFunction() •{
• var x="";
• var time=new Date().getHours();
• if (time<20) •{
• x="Good day";
•}
• document.getElementById("demo").innerHTML=x; •}
• </script>
• </body>
• </html>
If...else statement
• If you want to execute some code if a condition is true and another code if the condition is not true, use the if...else statement
• Syntax
if (condition)
{
code to be executed if condition is true
} else
{
code to be executed if condition is not true
}
• <html>
• <body>
• <p>Click the button to get a time-based greeting.</p>
• <button onclick="myFunction()">Try it</button>
• <p id="demo"></p>
• <script>
• function myFunction() •{
• var x="";
• var time=new Date().getHours();
• if (time<20) •{
• x="Good day";
•}
• else
•{
• x="Good evening";
•}
• document.getElementById("demo").innerHTML=x; •}
• </script>
• </body>
• </html>
Example
If...else if...else statement
• You should use if ...else if...else statement if you want to select one of many sets of lines to execute
• Syntax if (condition)
{
code to be executed if condition 1 is true
}
else if (condition 2)
{
code to be executed if condition 2 is true
} else
{
code to be executed if condition 1 and condition 2 are not
true }
•
Example
<script type=“text/javascript”>
var d=new Date();
var time=d.getHours();
if(time<10) {
document.write(“<b>Good morning</b>”); }
else if (time>10 && time<16) {
document.write(“Good day!”); }
else {
document.write(“<b>Hello World</b>”); }
</script>
The JavaScript switch statement
• Conditional statements in JavaScript are used to perform different actions based on different conditions
• You should use the switch statement if you want to select one of many blocks of code to be executed
Syntax
• Switch(n)
{
Case 1:
Execute code block1 break;
Case 2:
Execute code block 2
break;
default:
code to be executed if n is different from case1 and 2
}
Example
• <script type=“text/javascript”>
//You will receive the different greeting based
// on what day it is .note that Sunday=0, //Monday=1,Tuesday=2,etc.
Var d=new Date(); theDay=d.getDay();
Switch(theDay) {
case 5:
document.write(“Finally friday”); break;
case 6:
document.write(“Super saturday”); break;
case 0:
document.write(“Sleep sunday”);
break; default:
document.write(“I'm looking forward to this weekend!”);
} </script>
JavaScript function
• A function is a reusable code-block that will be executed by an event, or when the function is called
• You can call the function from anywhere within the page(or even from other pages if the function is embedded in an external .js file)
• Function can be defined both in the <head> and in the <body> section of document
• <html> <head>
<script type=“text/javascript”> function displaymessage()
{
alert(“hello word”); }
</script>
</head>
<body>
<form>
<input type=“button” value=“click me!” onclick=“displaymessage()”>
</form> </body> </html>
Example
How to define a Function
• The syntax for creating a function is function functionname(var1,var2,,,,varx)
{
some code }
var1,var2,etc are variables or values passed into the function. The { and the } defines the start and end of the function
The return statement
• The return statement is used to specify the value that is returned from the function
• So, function that are going to return the value must use the return statement
• Example
The function below should return the product of two numbers(a
and b):
Function prod(a,b) {
X=a*b; Return x;
}
When you call the function above, you must pass along two parameters:
Product=prod(2,3);
The returned value from the prod() function is 6,and it will be stored in the variable called product.
|
DISPLAY PROPERTY AND THE VISIBILITY PROPERTY
✓ Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results: ✓ visibility: hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. ✓ display: none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there: |
|
Positioning
|
|
There are four different positioning
methods.
|
|
POSITION
• The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. |
|
Absolute Positioning
• An absolute position element is positioned
relative to the first parent element that has a
position other than static
|
|
Overlapping Elements
|
In JavaScript we have the following conditional statement
• If statement • If....else statement • If...else if...else statement • Switch statement If statement • You should use if statement if you want to execute some code only if a specified condition is true • Syntax if (condition) { code to be executed if condition is true } • <html> • <body> Example • <p>Click the button to get a "Good day" greeting if the time is less than 20:00.</p> • <button onclick="myFunction()">Try it</button> • <p id="demo"></p> • <script> • function myFunction() •{ • var x=""; • var time=new Date().getHours(); • if (time<20) •{ • x="Good day"; •} • document.getElementById("demo").innerHTML=x; •} • </script> • </body> • </html> If...else statement • If you want to execute some code if a condition is true and another code if the condition is not true, use the if...else statement • Syntax if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } • <html> • <body> • <p>Click the button to get a time-based greeting.</p> • <button onclick="myFunction()">Try it</button> • <p id="demo"></p> • <script> • function myFunction() •{ • var x=""; • var time=new Date().getHours(); • if (time<20) •{ • x="Good day"; •} • else •{ • x="Good evening"; •} • document.getElementById("demo").innerHTML=x; •} • </script> • </body> • </html> Example If...else if...else statement • You should use if ...else if...else statement if you want to select one of many sets of lines to execute • Syntax if (condition) { code to be executed if condition 1 is true } else if (condition 2) { code to be executed if condition 2 is true } else { code to be executed if condition 1 and condition 2 are not true } • Example <script type=“text/javascript”> var d=new Date(); var time=d.getHours(); if(time<10) { document.write(“<b>Good morning</b>”); } else if (time>10 && time<16) { document.write(“Good day!”); } else { document.write(“<b>Hello World</b>”); } </script> The JavaScript switch statement • Conditional statements in JavaScript are used to perform different actions based on different conditions • You should use the switch statement if you want to select one of many blocks of code to be executed Syntax • Switch(n) { Case 1: Execute code block1 break; Case 2: Execute code block 2 break; default: code to be executed if n is different from case1 and 2 } Example • <script type=“text/javascript”> //You will receive the different greeting based // on what day it is .note that Sunday=0, //Monday=1,Tuesday=2,etc. Var d=new Date(); theDay=d.getDay(); Switch(theDay) { case 5: document.write(“Finally friday”); break; case 6: document.write(“Super saturday”); break; case 0: document.write(“Sleep sunday”); break; default: document.write(“I'm looking forward to this weekend!”); } </script> JavaScript function • A function is a reusable code-block that will be executed by an event, or when the function is called • You can call the function from anywhere within the page(or even from other pages if the function is embedded in an external .js file) • Function can be defined both in the <head> and in the <body> section of document • <html> <head> <script type=“text/javascript”> function displaymessage() { alert(“hello word”); } </script> </head> <body> <form> <input type=“button” value=“click me!” onclick=“displaymessage()”> </form> </body> </html> Example How to define a Function • The syntax for creating a function is function functionname(var1,var2,,,,varx) { some code } var1,var2,etc are variables or values passed into the function. The { and the } defines the start and end of the function The return statement • The return statement is used to specify the value that is returned from the function • So, function that are going to return the value must use the return statement • Example The function below should return the product of two numbers(a and b): Function prod(a,b) { X=a*b; Return x; } When you call the function above, you must pass along two parameters: Product=prod(2,3); The returned value from the prod() function is 6,and it will be stored in the variable called product.
|
|||||||||||||||||
This post was written by: Author Name
Your description comes here!
Get Free Email Updates to your Inbox!
Post a Comment