The address for this web page is: www.crosswinds.net/~fishcaro/day_J3_data_types.htm
On to the next lesson! Back to the COURSE SYLLABUS

J3. DATA TYPES

To understand a programming language, you need to understand the data types supported by that language. In this lesson, we begin our study of JavaScript data types.

INDEX CARD #J3:

DATA TYPES IN JAVASCRIPT (J3a)

JavaScript supports a variety of data types:

Numbers (like 7 or 3.2 or -4.3e5)
Strings (like "cat" or 'Carol'; a sequence of characters inside single or double quotes)
Boolean values (true or false)
Objects (a collection of similar things)
Functions (to automate a desired sequence of operations)
Arrays (like [1,2,3])

Each of these is discussed in more detail in this lesson, or later lessons.

LITERALS (J3b)

A literal is a specific data value that appears directly in a program. Here are examples of literals:

12 (a number)
"12" (a string)
1.2 (a number)
"hello world" (a string)
'Hi' (a string)
true (a Boolean value)
null (a special value that indicates "no value")

IDENTIFIERS (J3c)

An identifier is simply a name given to something of interest. Identifiers are used to name variables, functions, and to provide labels for loops in JavaScript code.

RULES FOR LEGAL IDENTIFIER NAMES:

first character must be an ASCII letter (uppercase or lowercase), an underscore (_), or a dollar sign ($)
(Note: Numbers aren't allowed as the first character, so JavaScript can easily tell numbers and identifiers apart.)
subsequent characters may be any letter or digit, an underscore, or a dollar sign.
don't begin with two consescutive underscores: JavaScript often uses identifiers of this kind for internal purposes
Certain "reserved words" cannot be used as identifiers, because they have special meaning to JavaScript, e.g., if, true, while, and continue.

OBJECT DATA TYPE (J3d)

A primitive data type (number, string, or boolean value) holds a single data value. An object, on the other hand, is a compound data type: it collects many data values into a group and allows us to store and retrieve those values by name.

More precisely, an object is a collection of named pieces of data; the named values are usually referred to as properties of the object. We also need tools to work with the objects: these tools (functions) are called the methods of the object.

To refer to a property of an object, you put the object name, followed by a period, followed by the property name.

For example, if an object named image has properties named width and height, then we would refer to those properties like this:

image.width

image.height

As a second example, to invoke the write() method (function) of the document object, you would write:
document.write("Hello there!");

NUMBERS (J3e)

All numbers in JavaScript are represented internally as floating-point values. (Think of a "floating-point value" as a decimal. In other programming languages, there is a distinction between integer values (...,-3,-2,-1,0,1,2,3,...) and other numbers.)

INTEGER LITERALS: all integers between -2⁵³ and 2⁵³ can be represented exactly
OCTAL and HEXADECIMAL LITERALS:
An octal value begins with the digit zero. This is followed by an octal number: i.e., a sequence of digits, each between 0 and 7.
For example, 012 is the octal name for the number ten.
A hexadecimal value begins with 0x or 0X . This is followed by a hexadecimal number: i.e., a sequence of digits 0 through 9, or the letters a (or A) through f (or F). For example, 0A2 is the hexadecimal name for the number 162.
FLOATING POINT LITERALS: these use traditional scientific notation. Examples: 3.14 -2.71 .12345 6.02e+23 6.02E+23 -1.3e-15

CONVERTING A NUMBER TO A STRING (J3f)

The toString() method is used to convert a number to a string. The argument of toString() (that is, the number inside the parentheses) gives the base of the desired output.

For example:

x = 10;
y = x.toString(8);
document.write("The value of y is " + y + "<BR>");

will give the octal (base 8) representation of the number ten:

The value of y is 12
Note: This result is NOT a number; it is a STRING!
Shorthand notation (the number MUST be in parentheses):
y = (10).toString(8);

Printable version of Index Card J3a

Printable version of Index Card J3b

Printable version of Index Card J3c

Printable version of Index Card J3d

Printable version of Index Card J3e

Printable version of Index Card J3f

WORKSHEET #J3:

(WJ3.1) Which of the following are legal identifier names? If NOT a legal identifer name, state a reason why.
1. this_object
2. cat3
3. $abc
4. ifa
5. object1
6. thing$2
7. 3things
8. _3things
9. #five
10. hey#2
11. true
12. t/2
13. cat:dog

(WJ3.2) In Netscape, bring up a JavaScript Interpreter Screen, as discussed in the previous lesson.
Type in the following line with each of the values of x given below, to explore numbers and strings:

x = 5; document.write("The value of x is " + x + "<BR>");

Try to PREDICT what you'll get in each case BEFORE you press enter!
Also, identify each value of x as either a number or a string.
(In the example above, x is a NUMBER.)
Here are the values of x that you'll be using:
1. x = 0x10;
2. x = 0X10;
3. x = 12;
4. x = "12";
5. x = '12';
6. x = 12+1;
7. x = "12" + "1";
8. x = 3e2;
9. x = 3e50;
10. x = 3e-2;
11. x = (10).toString(8);
12. x = (10).toString(3);
13. x = (100).toString(16);

ASSIGNMENT #J3:
(AJ3.1) Please continue with the tutorial located at: http://www.pageresource.com/jscript/index2.htm Work through the first part of the lesson titled:
Using Buttons for JavaScripts
(You'll do the second part in tomorrow's class.) Be sure that you can do all the following:

Write the code to put a button on your page. (This is a good review of some "Form" stuff!) Know how to label the button with desired text. Don't forget to assign a NAME to the button (if you ever want to refer to it).
What does the attribute "onClick" do? Is it case-sensitive? Is "window.status" case-sensitive? Be able to write code that will make a desired message appear in the status bar at the bottom of the browser when you click a button. What happens if you put double-quotes (",") inside double-quotes (",")? Does it still work?
Be able to write code that will change the background color when a button is clicked. Is "document.bgColor" case-sensitive?
How can you GO SOMEWHERE when a button is linked? That is, how can you use a button as a link?
Make a button that says "Click here to go to snap.com!" that takes you to http://www.snap.com when it is clicked.
Put your knowledge from the last lesson and this one together to do the following:
WITHOUT LOOKING AT ANYTHING, be able to write the code that will create a button that does the following:
- the button says: "Click here to make the background green!"
- When the mouse is over the button, the status area should say "You have the power to make the background green..." .
- When the mouse is clicked, the background should become green.
- When the mouse is clicked, the status area should say "You're doing it! You're making the background green!"
  When you code the word "you're" (two times) you have to do something special: you have to code it as "you\'re"; i.e., you have to put a backslash in front of the apostrophe. Otherwise, JavaScript thinks this is the closing apostrophe.
- When the mouse leaves the button, the status area should say: "Look what you did!"