|
|
|
|
Lesson Two | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
All values in JavaScript are called variables. The reason for this is that the values "vary". Anytime you create a variable, you use var to declare the variable. This is not required, but it makes good practice to use var when declaring variables. Leaving it out also changes where it can be used in a program. Variables are case sensitive. So, if you have MYNAME and MyNaMe in a program, they would represent two different variables. You declare a variable by typing: var myName; This would give you a variable with no assigned value. or var hisName = "John"; This shows a value being assigned to the variable. There are reserved words, or keywords, that cannot be use as variables. They are:
There are a few other things you need to be aware of. You cannot use spaces in a variable, but you may use an underscore to separate words or names. Common practice is to use a lower case letter in the first word and capitalizing the first letter in each subsequent word. The lists below show legal and illegal versions of variable names.
Declaring variables makes it easier to use certain characters or strings (groups of characters, such as words). If you're just typing a person's name, it may get repetitive. However, if you are storing a sentence, it would be much easier to store it in a variable. For instance: you could type document.write("Hello. My name is Fred."); If you wanted to store the name in a variable because you might want to change the name or store many names in an array to use at a later date, you would type: var name = "Fred"; Using the "+" on either side of the variable adds the variable to the rest of the sentence. This is called concatenation. If you had a list of sayings that you wanted to print a different one each time the page loads, you could set the variable to the sentence and print it later: var greeting = "Hello. My name is Fred."; You can add a date to your web site using the Date() object by typing the following code:
var Today = new Date(); Click here to see how this works. You declare the variable Today with the Date() object. The Date() object sets the year, month, day, hours, minutes, and seconds. You can then use the Today variable to set the variables ThisMonth, ThisDay, and ThisYear with their respective get() methods. Notice we added +1 on the end of the getMonth() method. The getMonth() method's initial value is zero. This means that December would be the eleventh month, and we all know that's not true. Adding one to the end sets January to one instead of zero, making it easier to code if we happen to use an array; which runs on the same principle. We'll get into arrays in later chapters. A function is a group of commands that allow you to treat JavaScript statements as a single unit. Functions are usually created in the <HEAD> of the document because the commands within a function have to be declared before it can be used. If they were declared after, you'd get a null value or an error. Below is a typical function: The word "num" in parentheses is called a parameter. A parameter is a variable that a function uses. Not all functions require parameters. A function that executes once and is done does not need a parameter to function. The curly braces { and } contain the variables and other information that the function will use. To execute a function, you must call the function. To do that, you create a generic version of the function in the <BODY> of the document using the function name followed parentheses and any variables required to be sent to the function. To call the function we created above, we would type this: This would give us the number 37 because the call to the function sends 36 and the function adds 1 to it to get the number 37. This is how the call to a function operates. Sometimes these two work in opposite directions. In this case, you would type: Next, you would create a function to return the value back to the calling function. This will give us the answer 2 because sum_of_numbers adds the numbers up and becomes 6, then result takes sum_of_numbers and divides it by 3. Your programming, when you're done, should look something like this:
<html> Click here to see how a different version of this same program works. Most object-oriented languages create objects based on the classes that contain them through which you access procedures and data. Functions that are used as a basis for objects is called a constructor function. Here you are instantiating a new object or extending an old one. Think of a constructor function as a template that an object can be based from. Constructor functions have two elements: properties, which are fields or variables, and methods, which are functions called from within an object. Below is the code for a constructor function named Automobile that contains three properties: automobile_make, automobile_model, automobile_color:
function Automobile(make, model, color) { We used this keyword to refer to the current object that called the constructor function. It can also be used in the <FORM> tag to refer to a form that contains an object. Objects are created using the new keyword. The code below shows how this is done: car = new Automobile("Kia", "Sephia", "white"); Now, the car object has three properties: make (Kia), model (Sephia), and color (white). To access this object, you would write document.write(car.model);. If you were to put parenthesis after car.model, this would make it a method instead of an object and you would get an error. You can also assign additional properties to an object like car.engine = "3.0 liter";. Constructor functions don't require arguments like make, model, and color, nor to you have to pass arguments to the functions. However, you do need to assign a property a value at some point or you will get the value undefined. You can use the prototype property to extend new properties from the constructor function and it's objects. One way is to extend it directly as in car.prototype.engine = "3.0 liter";. You may also extend properties from other functions, as shown below:
function SportAutomobile() { Object methods are functions associated with a particular object that can print the objects properties. Below is an example of an object method. This writes literal strings to browser instead of needing to be preformatted, hence the need for the <BR> tag.
function displayAutomobileProperties() { You then add it to the constructor function by typing this.methodName = functionName;. In our case, this would look like this.displayAutomobileProperties = displayAutomobileProperties;. Next, we need to call the object's methods using objectName.methodName(arguments);. Here is an example of how we'd do this:
car = new Automobile("Kia", "Sephia", "white"); One last bit of advice, you need to be aware of variable scope, or where it can be used. A global variable can be used outside of your function and is available to all parts of your program. A local variable is only available to the function it was created in. Question: Sounds easy enough. So where do the events part of the programming come in? Answer: Now that you have a general understanding of this part of JavaScript, we can move on to events. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
If you have a questions about any of the lessons, feel free to ask. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||