JavaScript - Variables and Data
CIW Website Design Manager Course Section 2, Part A1, Chapter 2
Communicating with the User
I am not sure why a chapter entitled variables and data should start with a topic on interactive methods, but it does. There are three methods for communicating with the user: alert, confirm, prompt and write.
The alert() method displays a pop-up
dialog with a text message. alert("Hello World!");
The confirm() method also displays a
pop-up dialog with a text message, but it now includes the OK and Cancel
buttons and will return a true or false value depending on the button
clicked.
The prompt() method goes a stage
further and allows the input of text.
You may click on the method names to see sample output. If you view this page's source you will also be able to study the embedded JavaScript that facilitates this.
The write() method allows text to be written to the browser window or document as it is referred to within the JavaScript object model. Because the write() method belongs to the document object it should be referenced thus: document.write()
Variables
JavaScript variables can store four data types but these are not explicitly declared. Variables should be declared, but the data type is not specified.
Variable names in JavaScript are case-sensitive and it is good practice to follow the established naming convention. A variable name, and a function name for that matter, should use two words without an intervening space, with the second word capitalised. For example: firstName or bigNumber. The first character should be a letter or an underscore, subsequent characters may be letters, numbers or the underscore.
JavaScript contains Keywords, the names of built-in functions, methods and commands, which may not be used as variable or function names.
| JavaScript Keyword Examples | |||
|---|---|---|---|
| break | continue | do | else |
| false | for | function | if |
| in | int | new | null |
| return | switch | true | typeof |
| var | void | while | with |
JavaScript also contains Reserved words that, while not currently in use may be used in the future, cannot be used as variable or function names.
| JavaScript Reserved Word Examples | |||
|---|---|---|---|
| abstract | byte | catch | default |
| delete | extends | final | goto |
| import | interface | native | package |
| protected | short | static | super |
| throw | transient | try | |
Expressions
There are four types of expression in JavaScript. These are Assignment, Arithmetic, String and Logical. An assignment operator assigns a value to a variable, an arithmetic operator perform an arithmetic operation which evaluates to a number and may be assigned to a variable, a string operator evaluates to a string and a logical operator evaluates to a true/false value.
| Operators | ||
|---|---|---|
| Operator | Type | Description |
| = | Assignment | Assigns the value of the right operand to the left operand. |
| += | Assignment | Adds together the operands and assigns the result to the left operand. |
| -= | Assignment | Subtracts the right operand from the left operand and assigns the result to the left operand. |
| *= | Assignment | Multiplies the operands and assigns the result to the left operand. |
| /= | Assignment | Divides the left operand by the right operand and assigns the result to the left operand. |
| %= | Assignment | Divides the left operand by the right operand and assigns the remainder to the left operand. |
| + | Arithmetic | Adds together the operands. |
| - | Arithmetic | Subtracts the right operand from the left operand. |
| * | Arithmetic | Multiplies the operands. |
| / | Arithmetic | Divides the left opernad by the right operand. |
| % | Arithmetic | Divides the left operand by the right operand and calculates the remainder. |
| + | String | Combines the operands into a single string. |
| ++ | Unary | Increases the value of the supplied operand by one. |
| - | Unary | Negates the value of the operand. |
| -- | Unary | Decreases the value of the supplied operand by one. |
| && | Logical | Evaluates to true when both operands are true. |
| || | Logical | Evaluates to true when either operand is true. |
| ! | Logical | Evaluates to true if the operand is false, and to false if the operand is true. |
| == | Comparison | Evaluates to true if the operands are equal. |
| != | Comparison | Evaluates to true if the operands are not equal. |
| > | Comparison | Evaluates to true if the left operand is greater than the right operand. |
| < | Comparison | Evaluates to true if the left operand is less than the right operand. |
| >= | Comparison | Evaluates to true if the left operand is greater than or equal to the right operand. |
| <= | Comparison | Evaluates to true if the left operand is less than or equal to th right operand. |
A good understanding of these operators and their use in basic expressions will provide the foundation for the bulk of your JavaScript programming.