You may wonder what all of the semicolons are about. A semicolon is how Javascript marks the end of a code
statement, similar to a period at the end of a sentence. You'll pretty much have a semicolon at the and of every line of code unless A) a statement spans two or more lines, in which case the semicolon will just go on the very end of the last line of the statement, B) the statement includes a
block of code, or C) the statement is being used as a
conditional or as an
argument.
A
block is a bunch of code that is all tied together by being surrounded with the curly-braces { and }. You'll usually create code blocks when you have code that should only be executed under certain circumstances... that's exactly what's going on in the first example, there are two blocks, one after the
if (...) and one after
else:
Code:
if (confirm(prompt)) {
document.bgColor = "red";
}
else {
alert("We'll make it blue then.");
document.bgColor = "blue";
}
...so, the first block will execute if the
if conditional tests TRUE, otherwise that block will be skipped, and the second block will be executed. A code block can contain many sub-blocks, which can also contain sub-blocks, ad infinitum.
A
conditional is basically a test that the program can use to make a decision. A conditional will ALWAYS be true or false. The next line in the first example contains a conditional (everything inside the parenthases) and opens up a new block with the opening curly-brace:
Code:
if (confirm(prompt)) {
if is a basic test... it basically reads as "if the test in these parenthases proves true, then execute the code in this block." The test can be as simple as "if the number one is greater than the number five," or "if the value in the variable
myNumber is equal to 10."
The
if statement in the example is followed by an
else, which is a completely optional condition, which basically reads as "if the preceeding
if statement tested as false, then execute this block of code instead." An
if statement can stand alone, or it can include an
else, depending on the needs of your program.
So we know what
if is, and we know that it's conditional is contained inside parethases that immediately follow... so let's take a look at the conditional statement in our example:
confirm() is a built-in Javascript
function.
confirm() opens up a window with OK and Cancel buttons... if the user clicks OK, confirm() will
return TRUE, and otherwise it will return FALSE. So when the program gets to this line, it will sit and wait for the user to do click something, so that it knows whether the conditional is TRUE or FALSE, and execute the appropriate block of code.
A
function is a way of taking a bunch of code which completes a task, and separating it out of your main chunk of code. This way you can call that whole chunk of logic over and over as needed without cluttering up your main code with repetitive stuff. Javascript includes a bunch of built-in functions, and allows you to create your own. When we create the MadLibs example, we'll probably create a function which asks the user for the next word, and stores it in a variable for us... since that's something we'll have to do over and over.
A function may take one or more
arguments, which are passed to the function inside the parenthases that directly follow the function name. Arguments are just pieces of data which the function needs in order to do what it does. They can be passed to the function as variables, or as just values like
10 or
"Some text".
In our example, we passed the
prompt variable as an argument to the confirm() function with
confirm(prompt). If a function takes multiple arguments, they are separated by commas. Let's say we have a function called
getWordFromUser() which takes two arguments... the first argument is the text that the user should be prompted with, like "Please enter a NOUN," and the second argument is the default value... the value that should be used in case the user hits Enter without entering anything. Our function call might look like this:
Code:
getWordFromUser("Please enter a NOUN", "dog");
A function will sometimes
return a value, which can then be used by your program. Sometime it's a true or false like confirm() returns, but sometimes it's a number, a phrase, etc. We'll see how to make use of return values later on.
I'll continue to go through the first example line-by-line later today, when I get a chance to post again. If there's anything I haven't explained very well, or if you have any questions, speak up. There's a bunch of groundwork to cover before we get started programming, so be patient.
Remember, we're still just in the introductory phase, so it's OK if you don't understand all of this yet.