|
|
| Line 35: |
Line 35: |
| --[[User:Xora K Joken|Xora K Joken]] 19:18, 3 April 2007 (UTC) | | --[[User:Xora K Joken|Xora K Joken]] 19:18, 3 April 2007 (UTC) |
|
| |
|
| ==Second Lesson==
| |
|
| |
|
| This second lesson will introduce the topics of variables and operators.
| |
|
| |
|
| ===Variables===
| |
|
| |
|
| One of the things JavaScript is used for is the manipulation of data. In JavaScript, pieces of data can either be stored in variables or arrays.
| |
|
| |
|
| Variables are declared using the ''var'' keyword:
| | GO SUN!!!!!!!!!!!!!! |
| var numValue;
| | ] |
| var textValue;
| |
| var binaryValue;
| |
| and can be given values when they are created:
| |
| var numValue = 3;
| |
| var textValue = "This is text.";
| |
| var binaryValue = true;
| |
| Multiple variables can even be declared at the same time:
| |
| var numValue = 3, textValue = "This is text.", binaryValue = true;
| |
| Variables in JavaScript are weakly typed, meaning that the types of individual variables are not determined by the programmer. Unlike many languages, JavaScript only provides a generic ''var'' rather than separate types for integers, floating point numbers, characters, and strings. For example, in the statement
| |
| var x = 0;
| |
| it is fairly obvious to any individual reading the code that x is a number. However, if the statement
| |
| x = x + "This is text that is probably not a number";
| |
| were to appear later in the code, JavaScript would change the variable to a text variable. This is one of the reasons that JavaScript is referred to as weakly typed; at any particular point in time, it is impossible to tell exactly what type a particular variable is.
| |
|
| |
|
| ====Arrays====
| |
|
| |
|
|
| |
|
| Arrays in most languages are a means of collecting variables so that they can be referred to by an index. This is usually a numerical index beginning at 0(i.e., 0,1,2,...), but does not necessarily have to be a number. Arrays are declared in several ways; they can be declared either explicitly, indicating the number of variables in the array:
| | Shut up Joe |
| | |
| var colors = new Array(7);
| |
| | |
| or not:
| |
| | |
| var colors = new Array();
| |
| | |
| In the last case, the programmer leaves the number of colors open-ended. This may allow him to be more flexible in the long run.
| |
| | |
| To use a particular variable within the array, simply indicate the index of the element using brackets. :
| |
| | |
| colors[2] = "orange";
| |
| x = colors[7] ;
| |
| z = "The book's color is " + colors[5] + ".";
| |
| | |
| | |
| It was mentioned before that arrays can use indexes other than numbers. One example of this might be using an index based on text instead of numbers. We might wish to index on the names of various fruits to get their colors:
| |
|
| |
| colors["lemon"] = "yellow";
| |
| colors["lime"] = "green";
| |
| colors["cherry"] = "red";
| |
| | |
| Programs can be made significantly more readable using this feature.
| |
| | |
| document.write("The color of a cherry is " + colors[cherry]
| |
| + ", but the color of a lime is " + colors[lime]);
| |
| | |
| ===Operators===
| |
| ----
| |
| ==== Arithmatic Operators ====
| |
| {| border=1 cellspacing=0 cellpadding=5
| |
| | '''Operator'''
| |
| | '''Description'''
| |
| | '''Example'''
| |
| | '''Result'''
| |
| |-
| |
| | +
| |
| | Addition
| |
| | x = 2
| |
| y = 2
| |
| | |
| x + y
| |
| | 4
| |
| |-
| |
| | -
| |
| | Subtraction
| |
| | x = 5
| |
| y = 2
| |
| | |
| x - y
| |
| | 3
| |
| |-
| |
| | *
| |
| | Multiplication
| |
| | x = 5
| |
| y = 4
| |
| | |
| x * y
| |
| | 20
| |
| |-
| |
| | /
| |
| | Division
| |
| | 15 / 5
| |
| 5 / 2
| |
| | 3
| |
| 2.5
| |
| |-
| |
| | %
| |
| | Modulus (division remainder)
| |
| | 5 % 2
| |
| 10 % 8
| |
| | |
| 10 % 2
| |
| | 1
| |
| 2
| |
| | |
| 0
| |
| |-
| |
| | ++
| |
| | Increment
| |
| | x = 5
| |
| x++
| |
| | 6
| |
| |-
| |
| | --
| |
| | Decrement
| |
| | x = 5
| |
| x--
| |
| | 4
| |
| |}
| |
| | |
| ==== Assignment Operators ====
| |
| {| border=1 cellspacing=0 cellpadding=5
| |
| | '''Operator'''
| |
| | '''Example'''
| |
| | '''Is The Same As'''
| |
| |-
| |
| | =
| |
| | x = y
| |
| | x = y
| |
| |-
| |
| | +=
| |
| | x += y
| |
| | x = x + y
| |
| |-
| |
| | -=
| |
| | x -= y
| |
| | x = x - y
| |
| |-
| |
| | *=
| |
| | x *= y
| |
| | x = x * y
| |
| |-
| |
| | /=
| |
| | x /= y
| |
| | x = x / y
| |
| |-
| |
| | %=
| |
| | x %= y
| |
| | x = x % y
| |
| |}
| |
| | |
| ==== Comparison Operators ====
| |
| {| border=1 cellspacing=0 cellpadding=5
| |
| | '''Operator'''
| |
| | '''Description'''
| |
| | '''Example'''
| |
| |-
| |
| | ==
| |
| | is equal to
| |
| | 5 == 8 returns false
| |
| |-
| |
| | ===
| |
| | is equal to (checks for both value and type)
| |
| | x = 5
| |
| y = "5"
| |
| | |
| x == y returns true
| |
| | |
| x === y returns false
| |
| |-
| |
| | !=
| |
| | is not equal
| |
| | 5 != 8 returns true
| |
| |-
| |
| | >
| |
| | is greater than
| |
| | 5 > 8 returns false
| |
| |-
| |
| | <
| |
| | is less than
| |
| | 5 < 8 returns true
| |
| |-
| |
| | >=
| |
| | is greater than or equal to
| |
| | 5 >= 8 returns false
| |
| |-
| |
| | <=
| |
| | is less than or equal to
| |
| | 5 <= 8 returns true
| |
| |}
| |
| | |
| ==== Logical Operators ====
| |
| {| border=1 cellspacing=0 cellpadding=5
| |
| | '''Operator'''
| |
| | '''Description'''
| |
| | '''Example'''
| |
| |-
| |
| | &&
| |
| | and
| |
| | x = 6
| |
| y = 3
| |
| | |
| (x < 10 && y > 1) returns true
| |
| |-
| |
| | <!-- The || operator can't be expressed because the MediaWiki technology thinks you are defining new columns. I don't know how to escape the ||... so if you do fix this please. Thanks. -->
| |
| | or
| |
| | x = 6
| |
| y = 3
| |
| | |
| (x == 5 || y == 5) returns false
| |
| |-
| |
| | !
| |
| | not
| |
| | x = 6
| |
| y = 3
| |
| | |
| <!-- !(x == y) returns true --> <!-- The example to the left can't be displayed as is because conflicts with the MediaWiki parsing technology... Please fix. Thanks. -->
| |
| |}
| |
| | |
| ==== String Operator ====
| |
| The string operator is used to [[w:concatenate | concatenate]] two strings together. For example:
| |
| | |
| <pre> var x = "Hello" + "world!" </pre>
| |
| | |
| The above example would result in the variable x equaling "Hello world!".
| |
| | |
| ==== Conditional Operator ====
| |
| JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
| |
| | |
| The syntax would be:
| |
| | |
| <pre> variablename = ( condition ) ? value1 : value2 </pre>
| |
| | |
| For example:
| |
| | |
| <pre> greeting = ( visitor == "PRES" ) ? "Dear President " : "Dear " </pre>
| |
| | |
| [[Category:JavaScript]]
| |
| [[Category:Basics]]
| |