Javascript Programming 101
After the color variable, we use another plus sign, and another double quotation mark to signify that we are adding another line of text to be printed. This time, we print this out:
Make sense? This will close out the opening FONT tag (after inserting the "color" variable), display some text as before, and then close the FONT tag. The document.write command is followed be the right bracket - which tells the script that the function is done. Once again: the function process the code inside the left and right brackets whenever it is called. Don't forget that!
Here is the next line of code:
Aha! Something new! As you can plainly see, this is your standard HTML body tag - with a little JavaScript thrown into the mix. After the plain old "body" text - you see this squished in between the closing greater-than sign:
onLoad is what is called an "event handler" - it basically describes an event of some sort. In this case, the event is "onLoad" - which means, "when this thing loads, do this:" - if used inside the BODY tag, as it is here, the onLoad event handler executes when the page loads.
Once again, we have an assignment operator - the equals ("=") sign. In this case, we're assigning an operation to the onLoad event handler. The operation is the calling of a function - the function we created up above in the HEAD tag.
A quick note: it is good practice to store your JavaScript functions, and other variables and such in the HEAD tag of your page, while calling upon them and making use of them with commands in your BODY tag - at times, this is a must, and at other times, it is simply good habit.
Back to the code: as you can see, the text "coloredText" is the same text we used to name our function earlier. What next? Parentheses once again - this time, inside them, we have the word "green" inside of single quotes, followed by the standard semi-colon to end the command, and then the double quotes to end the properties of the onLoad event handler.
Now, you may be wondering why we have the word "green" encased in single quotes, rather than double quotes, as is the usual custom. Simple: that command is already inside double quotes - using them again would confuse the page, and an error would be the likely result. Single quotes can be used in place of double quotes in most cases if you find yourself in such a situation.
As you'll remember, the opening line of code for our function looked like this:
When we call the function, and place the text "green" afterwards in parentheses and single quotes, we're sending a value to the function - the value of "green", of course. This value needs a container - IE: a variable, to hold it, so that we can use it. The variable used to hold it is named "color".
Quick tip: You can easily pass more than one variable to a function…like this:
Then, when calling your function, it would look a bit like this:
Functions make it easy to execute the same code over and over again, but send different information to it so the output is slightly different.
All right, back to the script: when the page loads, you should see the text "Welcome to this page!" colored green - if you change the text to say "blue" - your text will be blue. This is simply because we passed a value of "green" to the function, which gave it a variable named "color" - we then printed out some HTML (and text) inside our function, where the value of the "color" variable was stuck in between two strings of text in such a way that the color passed to the function would be used to color the text displayed on the page! You may have to read that last sentence more than once - it's worth it.
That's all for the first day - try renaming the function, and changing your call to it accordingly, just to get a feel for things.
Until next time, here's a challenge: write a script, using a function that accepts multiple arguments, which allows you to specify both the color of the text, and the text itself inside the call to the function, and have the function bold the text with the <b> and </b> tags. Good luck!
Site Categories
Recent Blog Posts
