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
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
-
- 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";
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
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:
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
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
isNaN(a) // this will be true if a is
***********************************************************
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
-
- 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.