Sie sind auf Seite 1von 12

JavaScript While Loop Executes code while a condition is true.

Code: While Loop Statement


<script type="text/javascript"> <!-var myBankBalance = 0; while (myBankBalance <= 10) { document.write("My bank balance is $" + myBankBalance + " "); myBankBalance ++; } //--> </script>

Resulting output: Right now, my bank balance is $0 Right now, my bank balance is $1 Right now, my bank balance is $2 Right now, my bank balance is $3 Right now, my bank balance is $4 Right now, my bank balance is $5 Right now, my bank balance is $6 Right now, my bank balance is $7 Right now, my bank balance is $8 Right now, my bank balance is $9 Right now, my bank balance is $10

JavaScript For loop Executes code for a specified number of times.

Code: For Loop Statement


<script type="text/javascript"> <!-var myBankBalance = 0; for (myBankBalance = 0; myBankBalance <= 10; myBankBalance++) { document.write("My bank balance is $" + myBankBalance + " "); } //--> </script>

The resulting output: My bank balance is $0 My bank balance is $1 My bank balance is $2 My bank balance is $3 My bank balance is $4 My bank balance is $5 My bank balance is $6 My bank balance is $7 My bank balance is $8 My bank balance is $9 My bank balance is $10

The JavaScript TryCatch The JavaScript "Try... Catch" statement helps you handle errors in a "nice" way.

Code: Code without a Try... Catch statement:


<script type="text/javascript"> <!-document.write("My bank balance is $" + myBankBalance); //--> </script>

The above code will result in an error. This is because the variable "myBankBalance" hasn't been declared yet.

Code: With a TryCatch statement: <script type="text/javascript"> <!-try { document.write("My bank balance is $" + myBankBalance); } catch(err) { document.write("Sorry, an error has occurred"); document.write("...but hey, don't let that stop you!"); } //--> </script> The resulting output: Sorry, an error has occurred...but hey, don't let that stop you! The above code will hide the error and present something more user friendly to the user. This is because the code with the error was wrapped inside a "try" statement. And, because there was an error, the browser outputs whatever is between the "catch" statement.

JavaScript Popup Boxes Popup box displays a message, along with an "OK" button. Depending on the popup box, it might also have a "Cancel" button, and you might also be prompted to enter some text. These are all built into JavaScript and are what I call "JavaScript popup boxes". They can also referred to as "dialog boxes", "JavaScript dialogs", "popup dialog" etc. Types of Popups Alert - Displays a message to the user. Confirm - Asks the user to confirm something. Often, this is in conjunction with another (potentially significant) action that the user is attempting to perform. Prompt - Prompts the user for information.

Code:
<script type="text/javascript"> <!-alert('Hey, remember to tell your friends about Quackit.com!'); --> </script>

Result:

Declaring JavaScript variables First, you need to declare your variables. You do this using the var keyword. You can declare one variable at a time or more than one. You can also assign values to the variables at the time you declare them. Different methods of declaring JavaScript variables // declaring one javascript variable var firstName; // declaring multiple javascript variables var firstName, lastName; // declaring and assigning one javascript variable var firstName = 'Homer'; // declaring and assigning multiple javascript variables var firstName = 'Homer', lastName = 'Simpson';

Code: JavaScript variables <script language="javascript" type="text/javascript" > <!-- hide me var firstName = prompt("What's your first name?", ""); // end hide --> <!-- hide me document.write(firstName); // end hide --> </script> The above example opens a JavaScript prompt, prompting the user for their first name. It will then write the name to the page ( you would output the name somewhere between the <body></body> tags). Rules for JavaScript Variables Can contain any letter of the alphabet, digits 0-9, and the underscore character. No spaces No punctuation characters (eg comma, full stop, etc) The first character of a variable name cannot be a digit. JavaScript variables' names are case-sensitive. For example firstName and FirstName are two different variables.

JavaScript If statement JavaScript If statements are an example of conditional statements. With If statements, you can tell the browser to execute a piece of code only if a given condition is true.

Code: If statement: <script type="text/javascript"> <!-var myColor = "Blue"; if (myColor == "Blue") { document.write("Just like the sky!"); } //--> </script>

The resulting output: Just like the sky!

To create a JavaScript If statement 1. Start with the word "if" 2. Between open and closed brackets, write the actual condition that is being tested (i.e. if something is equal to something else). 3. Between open and closed curly brackets (or braces), specify what will happen if the condition is satisfied.

JavaScript If Else statement The "Else" is what tells the browser what to do if the condition is not true.

Code: If Else statement <script type="text/javascript"> <!-var myColor = "Red"; if (myColor == "Blue") { document.write("Just like the sky!"); } else { document.write("Didn't pick blue huh?"); } //--> </script>

The resulting output: Didn't pick blue huh?

JavaScript If Else If statement The If Else If statement is more powerful than If Statement and If Else Statement. This is because you can specify many different outputs based on many different conditions - all within the one statement. You can also end with an "else" to specify what to do if none of the conditions are true.

Code: If Else If statement: <script type="text/javascript"> <!-var myColor = "Red"; if (myColor == "Blue") { document.write("Just like the sky!"); } else if (myColor = "Red") { document.write("Just like shiraz!"); } else { document.write("Suit yourself then..."); } //--> </script>

The resulting output: Just like shiraz!

JavaScript Functions A function (also known as a method) is a self-contained piece of code that performs a particular "function". You can recognize a function by its format - it's a piece of descriptive text, followed by open and close brackets.

Code: Writing a function in JavaScript Write the function: <script type="text/javascript"> <!-function displayMessage(firstName) { alert("Hello " + firstName + ", hope you like JavaScript functions!") } //--> </script> Call the function: <form> First name: <input type="input" name="yourName" /> <input type="button" onclick="displayMessage(form.yourName.value)" value="Display Message" /> </form>

The resulting output: First name: Display Message

JavaScript Date and Time JavaScript provides you with the ability to access the date and time of your users' local computer, which can be quite useful at times. Displaying the current date and time in a nice user friendly way using JavaScript is not quite as simple.

Code: Displaying the Current Date var currentDate = new Date() var day = currentDate.getDate() var month = currentDate.getMonth() var year = currentDate.getFullYear() document.write("<b>" + day + "/" + month + "/" + year + "</b>")

Result: 28/8/2011

Code: Displaying the Current Time var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes() if (minutes < 10) minutes = "0" + minutes document.write("<b>" + hours + ":" + minutes + " " + "</b>")

Result: 21:08

JavaScript Void() To prevent the load from refreshing, you could use the JavaScript void() function and pass a parameter of 0 (zero). If you click once, nothing should happen, it will display a message upon two clicks (i.e. a double click). We can specify the double click code by using JavaScript's "ondblclick" method. To prevent the page reloading upon a single click, we can use "JavaScript:void(0);" within the anchor link.

Code: Void() <a href="JavaScript:void(0);" ondblclick="alert('Well done!')">Double Click Me!</a>

Result: Double Click Me!

Code: Without void(0): <a href="" ondblclick="alert('Well done!')">Double Click Me!</a> Result: Double Click Me!

JavaScript Dropdown Menu Dropdown menus like this are sometimes referred to as a "Jump menu". This is because it "jumps" to the selected URL as soon as you make the selection. (Other drop down menus require you to click on a "go" button after you've made your selection - which is the safe way to go if you're worried about users who don't have JavaScript enabled).

Code: Dropdown menu <script language="javascript" type="text/javascript" > <!-- hide function jumpto(x){ if (document.form1.jumpmenu.value != "null") { document.location.href = x } } // end hide --> </script> Result: "Jump menu"

Das könnte Ihnen auch gefallen