Conditional Statements in JavaScript: Basic Concepts and Examples

DePaul University SNL 262 Advanced Web Page Design Chapt 7 - Conditional Statements - IV Instructor: David A. Lash

Chapt 7 - Conditional Statements • Conditional statements are one of the most basic programming constructs. • They provide a way to test for values and status and take proper action • For example: • If phone rings then answer it • If X = 1 then y=2 Test condition if (condition is true) { execute statements between the curly brackets } Stmts exec’ed if condition true

Chapt 7 - Conditional Example • Here is an example: x=0; if ( x == 1 ) { window.alert("Hey The Value of X is 1"); X = 2; } if ( x == 2 ) { window.alert("Hey The Value of X is 2"); x = 2; } • In reality, if there is only 1 statement to execute, the curly brackets '{' are not required: x=0; if ( x == 0 ) window.alert("Hey The Value of X is 0"); if ( x == 1 ) window.alert("Hey The Value of X is 1");

Chapt 7 - Conditional Example • Here is an example: <html> <head> <title> This is a title </title> <script language="JavaScript"> function writeit( invar ) { document.write( "variable=", invar, "<BR>" ); } </script> </head> <body> This is the body of the document <script language="JavaScript"> x=window.prompt(“Enter a number”); if ( x == 1 ) { window.alert("Hey The Value of X is 1"); } if ( x == 2 ) { window.alert("Hey The Value of X is 2”); } window.alert(“The really was value =“, x); </script> </body></html> See: http://www.depaul.edu/~dlash/extra/Advwebpage/examples/4_example7b.html

Chapt 7 - Conditional Operators • Here are the conditional operators you can use == equal to if ( x == y) != not equal if (x != y ) < less than if (x < y ) > greater than if (x > y ) <= less than or equal to if (x <= y ) >= grtr than or equal to if (x >= y )

Conditional Example <script language="JavaScript"> x=window.prompt("Enter Number"); if ( x!= 0 ) document.write("X != 0\n<BR>"); if ( x == 0 ) document.write("X == 0\n<BR>"); if ( x <= 1 ) document.write("Hey X less than = 1\n<BR>"); if ( x <= 2 ) document.write("Hey X less than = 2\n<BR>"); if ( x <= 3 ) document.write("Hey X less than = 3\n<BR>"); if ( x <= 4 ) document.write("Hey X less than = 4\n<BR>"); if ( x < 5 ) document.write("Hey X less than 5\n<BR>"); if ( x < 6 ) document.write("Hey X less than 6\n<BR>"); </script> See:http://www.depaul.edu/~dlash/extra/Advwebpage/examples/4_example7c.html

The else clause • Used in conjunction with an if statement, instructs JavaScript what to do if condition is not true. <script language="JavaScript"> x=window.prompt(“Enter Number”); if ( x == 1 ) window.alert("Hey X == 1"); else window.alert("Hey X is not == 1 "); </script>

The else-if clause • Combining The If-Then-Else Constructs. Instructs JavaScript what to do if condition is not true. <script language="JavaScript"> x=15; if ( x == 1 ) window.alert("Hey X == 1"); else if ( x == 2 ) window.alert("Hey X is == 2 "); else if (x == 3 ) window.alert("Hey X is == 3 "); else window.alert("Hey X is not any of those "); </script> See:http://www.depaul.edu/~dlash/extra/Advwebpage/examples/ 4_example7d.html

Compound Conditional Can combine multiple if conditional testing using and (&&) and or (||) <HTML> <HEAD> <TITLE>Compound IF</TITLE></HEAD> <BODY> <script language="JavaScript"> x=window.prompt("Enter Number x="); y=window.prompt("Enter Number y="); if (x == 1 && y ==2) window.alert("Hey X = 1 and y = 2"); else if (x == 3 && y ==4) window.alert("Hey X = 3 and y = 4"); else if (x == 3 && y ==5) window.alert("Hey X = 3 and y = 5"); else window.alert("None Of The Above"); if ( x == 1 || y == 2 ) window.alert("hey either x=1 or y=2"); </script> </body></html> See:http://www.depaul.edu/~dlash/extra/Advwebpage/examples/4_example7e.html

Switch Statement • Using Switch Statement <html> <head><title>case example </title> </head> <body> <script language="JavaScript"> button=window.prompt("Gimme a number"); switch (button) { case "1" : document.write("This is one"); break; case "2" : document.write("This is two"); break; case "3" : document.write("This is three"); break; default : { document.write("None of the above -- going to yahoo"); window.location="http://www.yahoo.com"; } } </script></body></html> See:http://www.depaul.edu/~dlash/extra/Advwebpage/examples/4_caseexample.html

An Example Switch Statement <SCRIPT LANGUAGE="JavaScript1.2"> where = prompt("Where do you want to go today?"); switch (where) { case "Netscape" : window.location="http://www.netscape.com"; break; case "Microsoft" : window.location="http://www.microsoft.com"; break; case "Yahoo" : window.location="http://www.yahoo.com"; break; default : window.location="http://www.mcp.com"; } </SCRIPT> </BODY> </HTML> See:http://www.depaul.edu/~dlash/extra/Advwebpage/examples/4_list7-5.html

An Example Useful Function <HTML> <HEAD> <TITLE>What's your browser?</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H2> <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">  </SCRIPT> </H2> </BODY> See:http://www.depaul.edu/~dlash/extra/Advwebpage/examples/4_list7-6.html

Conditional Statements in JavaScript: Basic Concepts and Examples

Télécharger la présentation

Plus de contenu associé