What you typed in the box in the last lesson is called an argument. That argument was used to define the contents of the alert box. Here is how it traveled:
<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <script type="text/javascript"> function MsgBox(textstring) { alert(textstring); } </script> </head> <body> <form id="aform" action="text/javascript"> <div> <input name="text1" value="Type some Text" type="text">
<input name="submit" type="button" value="Show Me" onclick="MsgBox(document.getElementById('aform').text1.value)">
</div>
</form>
</body>
</html>
The MsgBox() function was created to include an arguement which it referred to as textstring. The MsgBox() function then takes textstring and runs it through another built-in function alert() which creates an alert box of whatever is in the arguement. Therefore, what you type in the text box is really passed through 2 functions before it creates the alert box you see.
Now let's get down to some specifics. We will go through a line by line explanation of the code.
Line 1
<script type="text/javascript">
This signals that the language is javascript. You must have this line before you start your block of javascript code in the head or in the body.
Line 2
function MsgBox(textstring) {
This cues that a function called MsgBox is going to be defined, and it will have an argument (again, whatever goes in the parenthesis is an argument). You must use the forward curly bracket to start the block of code that is inside the function and end the block of code with a backwards curly bracket.
Line 3
alert(textstring);
Alert is a method. It creates a message box with whatever is inside the parenthesis. Now you could just do alert("Hello") - which would produce a message box that had "hello" as the text - but since we wanted what you typed to show in the message box, we had to use a variable. Notice how there are no quotes around textstring. That means that the word is not a string, but a variable (if there were quotes, the result would be an alert box with "texstring" as the text). When quotation marks are around a block of text the block of text is a string, when they are not the block of text is a variable.
Line 4
}
This just closes definition as stated earlier.
Line 5 and 6
<form id="aform" action="text/javascript">
<div>
This creates a form, which is followed by a div for validation purposes.
Line 7
<input name="text1" type="Text" value="Type some text" >
This input line creates a text box which we will have the user use to input text for the message box. It is given a name so that it can be called later.
Line 8
<input name="submit" type="button" value="Show Me" onclick="MsgBox(document.getElementById('aform').text1. value)">
This creates a button with the text "Show Me". It also says when someone clicks the button the MsgBox() function is called and given form.text1.value as the arguement. However instead of form.tex... we use document.getElementById('aform').tex... as a way of referring to the form. Note that we used the name given to the form and the name given the text box (very important).
After this all that really happens is you end the div and the form (</div></form>).
Now it's your turn. Write a very basic function that will show an alert box with the contents "Hi". Now - the function we showed you involved having the contents be whatever the user put in - but this is a lot easier. All you need to do is create a function that has an alert box pop up with "Hi", and you need to create an input button where if you click on it, the function is called.
In the next lesson we have a challenge for you that will require you to do more inputs (similar to how we did above)
Congratulations, you have finished Lesson 2;