CIS 89C  Client-Side Programming with JavaScript

 

Unit 4 - Data types, Variables, and Literals (week 3)

 

References:

 

McDuffie - Chapter 3 Data types, Variables, and Literals

 

Topics:

 

Opening statement

JavaScript data types - McDuffie page 76

Literal - McDuffie page 81

Variable - McDuffie page 81

Variable naming rules - McDuffie page 83

Expressions - McDuffie page 84

Data type Conversions - McDuffie page 87

typeof operator and debugging - McDuffie page 95

Testing for null, undefined, and NaN - McDuffie page 92

Member and global conversion functions - McDuffie page 95

Summary - McDuffie page 100

 

 

***********************************************************

Opening statement

 

Important:

 

Data has data types in JavaScript.

Variables do NOT have data types in JavaScript.

A variable can contain any type of data,

and the data in a variable can change type.

 

This is very different than C or other strongly typed languages.

 

 

***********************************************************

JavaScript data types

 

There are three primitive data types in JavaScript:

- number

- string

- Boolean

 

Examples:

 

4   0   -4.2434              number

"hello there"   "gedoffit"   string

true   false                             Boolean

 

Special data values in JavaScript:

 

- null             A value of null specifically states that there is no value

- undefined        Variable exists, but has never given a value

- NaN              not a number

- Infinity         value produced from division by zero

 

Examples:

 

x;                 undefined; has no value

var y = null;             value that says there is no value

z = "hello";                              NaN; not a number;

you get this if you try to use as a number

w = 0 / 3;                                             Infinity; note it is spelled with an upper case I

 

Number:

 

127   127.38              decimal number

0127                           octal number, base 8, leading 0

0x127   0X127           hexadecimal, base 16, leading 0x or 0X

 

Floating point numbers:

 

7   7.35

7.35E3                       7350   move the decimal point 3 to the right

 

String:

 

"Double quoted string"

'Single quoted string'           

 

Use either double or single quotes.

 

Sometimes you use one type within the other.

Example:

 

<button onclick = "functionX('hello');" />

 

You could escape inner quotes, to get the quote mark as a character in the string.

Example:

 

"He said \"That is not Jim\'s coat\""

document.write("<a href=\"http://voyager.deanza.edu\"> our server </a> 

 

\ is used to escape the inner punctuation, making them ordinary text characters.

 

Special text characters:

 

\"                      quote mark

\'                      apostrophe

\\                      a single backslash

\n                     new line

\t                      tab

\xFF                Latin-1 character, hexadecimal 00 to FF

\uFFFF           Unicode character, hexadecimal 0000 to FFFF

\377                Latin-1 character, octal 000 to 377

 

See Appendix G on page 679 for a list of characters in Latin-1

Latin-1 is also called ISO 8859-1

 

I have been using Latin-1, which includes ASCII for a few years.

Now I am going to UTF-8, which is one of the Unicode formats.

UTF-8 also includes ASII and Latin-1.

 

Boolean:

 

Boolean values are   true and   false

This is like C99, the latest version of C.

 

 

***********************************************************

Literal

 

What you type is the value.

Examples:

 

"hello"

427.3

 

These are fixed values.  What you see is what you get.

 

 

***********************************************************

Variable

 

A variable is a place where you can put anything.

I mean anything.

A variable in JavaScript does not have a type.

 

Use the keyword var to set up a variable.

Example:

 

var x;

 

x = 25;

x = "hello";

x = function() {document.write("whosit");}

 

You can put anything in a variable.

You can change what is in a variable.

This is very different than a strongly typed language, such as C.

 

You can give a variable an initial value, when you set it up.

Examples:

 

var x = 25;

var flag = true;

 

If you try to use a variable name, that does not exist, it will be undefined.

Example:

var x = 4;

var z;

z = x + y;

This is a problem if y does not exist.

 

On the other hand, if you put a value into a variable name, that does not exist,

JavaScript makes it a variable.

Example:

y = 13;

If y is not a variable, JavaScript will make it a variable and put 13 in it.

 

 

***********************************************************

Variable naming rules

 

1) Variable names must begin with:

_, a to z, A to Z          Underscore, lower case letter, upper case letter

                                                Nothing else

2) Additional characters may be

_, a to z, A to Z, 0 to 9           Same as first letter plus numerals are permitted

 

3) Do not use reserved words.  The list of reserved words is not consistent across all browsers.  A list of reserved words is given in Appendix C on page 617

 

Examples:

 

var sum;

var schedule1044;

var time_of_day;

 

Not allowed would be reserved words, such as:

if  while  new  true  try  null  Boolean

 

JavaScript is case sensitive.  These are all different names:

 

var hello;

var Hello;

var hEllo;

 

These are all different.

However, you might not choose to use all them in your program, unless you are trying to confuse the persons who read your code.

 

 

***********************************************************

Expressions

 

An expression is a sequence of variables, literals, and operators.

An expression has a single value.

Examples:

 

var x = 5;

var y = 7;

 

x + y

4 + 8

 

These two expressions have the same value, 12.

 

 

***********************************************************

Data type Conversions

 

When JavaScript evaluates an expression, it must consider the type of the data.

Examples:

 

String concatenation using +

 

var a = "hello";

b = "there";

 

(

  Notice I did not specify that b is a variable.

  b is a variable. 

  JavaScript accepts it as a variable.

  It would be better if you specified that it is a variable.

)

 

a + b

+ between two strings concatenates the strings to produce:

"hellothere"

 

Number addition using +

 

var c = 7;

var d = 8;

 

c + d

+ between two numbers adds them to produce:

15

 

Mixed string and Number using +

 

JavaScript must deal with cases where the data types do not match.  What is it to do with:

 

a + d

 

a contains a number.

d contains a string.

This mix-up is confusing.

Adding a number, concatenating a string; what to do.

Adding a string makes no sense.

Concatenating a number could be done, if you considered it as a string of numerical characters; this is what JavaScript does.

 

a + d

 

Evaluates to:

"hello8"

 

Converting a string to a number

parseInt() and parseFloat()

 

JavaScript provides two functions, that you can use to force the data conversion you want.

parseInt()           converts a string of numeric characters to a number.

parseFloat()      converts a string of numeric characters to an integer.

They stop on the first character that is not acceptable.

If they stop without finding any numeric characters, they return NaN,

Not a Number

 

Example:

 

var x = "123.24"

 

parseFloat(x)

Evaluates to the number:

123.24

 

parseFloat(x)

Stops on the first character that is not acceptable in an integer.

It evaluates to the integer:

123

 

Example:

 

var y = "B52s";

 

parseNumber() and parseInt() are very useful when you ask the user to type a number into an input text box.  They type a string of numerals.  You use parseNumber() or parseInt() to convert the string into a number.

 

parseInt(y);

Stops on the first character that is not acceptable in an integer.

It evaluates to:

NaN

 

There is also a function called Number().

It is similar to parseFloat(), except it has some restrictions, so I suggest you never use it for string conversions.

We may have a different use for the Number() function later.

// (The restriction is that no non-space characters may follow the number in the string.)

// (The Number function is used as a constructor for a Number object.)

 

Converting a number to a string

String()and toString()

 

There is also a function called String().

It will convert a number, or anything else, to a string.

Note that Sting() is spelled with a capital letter.

 

Example:

 

var y = 37.2; // y contains the number  37.2

 

var z;

z = String(y); // z contains the four character string 37.2

 

There is also a member function called toString().

It also will convert a number, or anything else, to a string.

Member functions belong to the object, so they are coded differently.

 

Example:

 

var y = 37.2; // y contains the number  37.2

 

var z;

z = y.toString(); // z contains the string 37.2

 

Note that y is the object, and toString() is its member function.  This is different than String(), which does not belong to the y object, so y needs to be passed as a parameter.

 

 

***********************************************************

typeof operator and debugging

 

typeof operator

 

You can check the type of data in a variable using the typeof operator.

 

Example:

 

typeof y

 

alert ("The type of y is: " +  typeof y + "<br />");

document.write("The type of y is: " +  typeof y +  "<br />");

document.write("The type of y is: ", typeof y, "<br />");

 

alert() produces a pop-up box.

Use alert to test what is happening in your program.

You can show the value of any expression with alert.

Comment out, or remove, these alerts in the final program, after you finish testing it.

 

alert() will only write ONE string.

You make one string by concatenating using the + operator between strings.

 

cocument.write() puts the text in your xhtml document body.

document.write can write one string, like alert.

document.write can also write several strings, separated by commas. 

(You cannot use commas between multiple strings in alert.)

 

 

***********************************************************

Testing for null, undefined, and NaN

 

var a;

We can test to see if a is null:

var a = null;

a == null     // this will be true if a is null

 

We can test to see if a is undefined:

var b;

b == undefined // this will be true if a is undefined

 

There is a different way to find out if a is NaN:

isNaN(a)      // this will be true if a is NaN

 

 

***********************************************************

Member and global conversion functions

 

Some functions are global.  The following functions take a variable as a parameter.

 

parseFloat(x)

parseInt(x)

string(x)

 

Other functions are member functions.  They are used with the dot notation.

 

x.toString()

 

There is also the operator

 

typeof x

 

***********************************************************

Summary

 

We have seen the three primitive data types in JavaScript.

They are:

- number

- string

- Boolean

 

We have seen the four special values in JavaScript:

 

- null             A value of null specifically states that there is no value

- undefined        Variable exists, but has never given a value

- NaN              not a number

- Infinity         value produced from division by zero

 

We have seen variables.

Variables have no type, and can contain anything; and what they contain can be changed.

 

We have seen some functions.

 

We have seen a little about objects.

We will learn much more about objects, as we go along in this course.

Objects can have properties, which can each have a value.

Objects can have member functions.

Both the properties and the member functions work with the dot notation.

 

var x = 24.8;

var y = x.toString();

 

x contains a number.

y contains a string.

 

Almost everything in JavaScript is an object.

Even primitive values can work as temporary objects.

That is what is happening with:

 

x.toString

 

the value of x is not really an object.

but, it works as an object, using the member function toString(),

which is a member function, that is available to all objects.