1 / 12

Conditional Statements in JavaScript: Basic Concepts and Examples

Master conditional statements in JavaScript through testing for values and status, executing actions based on conditions, using operators, and understanding switch statements. See examples and learn key concepts.

claus
Télécharger la présentation

Conditional Statements in JavaScript: Basic Concepts and Examples

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. 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");

  4. 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

  5. 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 )

  6. 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

  7. 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>

  8. 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

  9. 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

  10. 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

  11. 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

  12. An Example Useful Function <HTML> <HEAD> <TITLE>What's your browser?</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H2> <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> <!-- Hide script from old browsers if (navigator.appName == "Netscape") { document.write("You're running Netscape Navigator, a fine JavaScript-enabled browser.") } else { document.write("You're not running Netscape Navigator--maybe you should?") } // End hiding script from old browsers --> </SCRIPT> </H2> </BODY> See:http://www.depaul.edu/~dlash/extra/Advwebpage/examples/4_list7-6.html

More Related