last updated: Nov. 24, 2014 • practice
your Javascript instantly
ask for the username and password
check the username and password against what's stored in the database
if the username and password are correct then show the welcome page
otherwise show an error message
<script>
document.write("Hello, world.");
</script>
x=x+100; x= x+100; x = x + 100; x = x + 100 ;For readability, we'll generally put spaces before and after any of these: =+-*/
/* This is a program that converts pounds to kilograms. I wrote it on Nov. 18, 2014. I'm so happy I could scream. */
x=5;
x=12;
x=4;
then x will hold the value 4. It doesn't matter what was
there previously. apples = 100; bananas = 50; cherries=200; total = apples + bananas + cherries;If you're wondering why we didn't just type total = 100 + 50 + 200, there are a couple of answers. First, by adding up the variables, we can understand the concept; that is, the total is the sum of the different fruits. Names have meanings, numbers don't. Second, as your programs become more complex, you won't know the values because they'll always be changing: the values will be supplied by the users, or you'll be running the calculation dozens of times with different sets of values.
Example
#1: Numbers and operators. Try this code
on the practice page.
<script>
/* This is a sample Javascript program
that does some operations on the variable x
and then outputs the result.
Dude.
*/
x = 5; // put the value 5 into the variable x x = 9; // put 9 into the variable x; this erases the 5 that was already there x = 3 * 8 / (2*3); // put the value 4 into x (3 x 8 ÷ 6); this erases the 9 that was already there x = x * 2; // take x (which is 4), multiply it by 2, and put the result (8) back into x x++; // increment x by 1; x is now equal to 9 x--; // decrement x by 1; x is now equal to 8 document.write("x"); // This doesn't output the value of x, it outputs the letter x,
// because it's in quotes. This is a logic error. document.write("<p>"); // Output a blank line document.write(x); // This outputs the value of x, which is 8. </script>
<script>
//-------------------------------
// PUT VALUES INTO THE VARIABLES
//-------------------------------
numberOfApples = 5; numberOfPears = 6; username = "Trudy"; //-------------------------------
// SHOW THE OUTPUT
//-------------------------------
output = "You have " + numberOfApples + " apples and " + numberOfPears + "pears, for a total of " + (numberOfApples+numberOfPears) + " pieces of fruit, " + username + "."; document.write(output); </script>
Notice how we cleverly used the // to comment some lines so we could label parts of the program. This will come in very handy when we have very long programs. Without these kinds of labels, it becomes really hard to find your way around long programs. Remember this tip.
The output of the program is: You have 5 apples and 6 pears, for a total of 11 pieces of fruit, Trudy.
Note the parentheses around (numberOfApples+numberOfPears). That tells Javascript to evaluate that first, and since the values are both numbers, the numbers are added together. Without the parentheses, Javascript would try to add numberOfApples to the previous string, so it would figure that the value in numberOfApples was also a string, and when we then added numberOfPears to that string it would figure that numberOfPears must be a string too, so the result would be: You have 5 apples and 6 pears, for a total of 56 pieces of fruit, Trudy. That's an example of a logic error.
Try this code on the practice page.
Write your own program. Use the practice page to write your own program. If you need some ideas, try any of the following:
A function is a block of code that's set up to run later. For example, you could set up a function to handle adding up a bunch of numbers, but you don't have any data to add up yet because the user hasn't entered anything. Here's an example:
x=5;
function showErrorMessage() {
alert("I'm terribly sorry, but there has been an error.");
}
y=10;
When the above code is run, x will be set to 5, the function will be set up and saved for later, and y will be set to 10. When we need to show the error message, we can tell the function to run at that time. Telling a function to run is called calling the function.
Note that it doesn't matter where in your code you put the function. You could put it at the beginning of your script, or at the end, or right smack dab in the middle as we did in our example. Generally you'll put it at the beginning or at the end for readability.
Look at the function so you can see its format. The format is the word function, followed by the name of the function (which you make up), then the parentheses (), then the braces {}, inside which you put your code.
Notice that we indented the line that starts with alert by a few spaces. That's a normal programming habit to make the code more readable. The code will run fine even if you don't indent it.
Another handy thing about functions is that they can be used over and over. Here's an example:
<script>
function calculate() {
y = (x /2 - 3) * 100 + 42 / 4 *37;
document.write(y);
document.write("<p>");
}
x=5;
calculate();
x=8;
calculate();
x=11;
calculate();
</script>
We start by defining a function that we'll use later. That function
will do a complex (and meaningless) calculation on the variable x.
After we define that function, we put 5 into x, an call the
function to run the calculation and show the result. We then put 8
into x and call the function again. Finally, we put 11
into x and call the function a third and final time.<script>
function calculate(kilograms) {
pounds = kilograms * 2.2;
document.write(pounds);
}
kg = 5;
calculate(kg);
</script>
In that example we passed in the value 5, via the variable kg. So the function receives the value 5, and puts it into the variable kilograms. It then uses that variable in the formula, multiplying by 2.2 and putting the result into the variable pounds. It then outputs the value of pounds.
You can pass multiple values by separating them with a comma.
<script>
function calculate(feet,inches) {
document.write(feet * 12 + inches);
}
calculate(5,8);
</script>
DOCUMENT THE ABOVE SCRIPT.
returning a value
scope