Upload
jayson-watts
View
217
Download
1
Embed Size (px)
Citation preview
1WDMD 170 – UW Stevens Point
WDMD 170 Internet Languages
eLesson: Using Data Types
(No Audio Component)
© Dr. David C. Gibbs2003-04
2WDMD 170 – UW Stevens Point
Tutorial 3
Data Types and Operators
Section A - Using Data Types
3WDMD 170 – UW Stevens Point
Tutorial 3A Topics
• Section A - Using Data Types– What is a data type?– Two types of data: primitive and composite– How to use data types– About numeric data types– About Boolean values– How to use JavaScript objects– How to use strings– How to use arrays
4WDMD 170 – UW Stevens Point
Why “data types”?
• Programs must keep track of many different types of values– e.g., time of day, person’s name,
currency amount• Programming languages use
variables to store those values• JavaScript variables are classified
into categories known as data types
5WDMD 170 – UW Stevens Point
Two Data Types in JS
• Primitive data types– Data types that can be assigned only a
single value
• Reference (composite) data types– Collections of data represented by a
single variable name
6WDMD 170 – UW Stevens Point
Primitive Data Types
JavaScript supports five primitive data types
• Numbers: Integers and floating point values• Booleans• Strings• Undefined• Null
7WDMD 170 – UW Stevens Point
Primitive Types
8WDMD 170 – UW Stevens Point
Peculiar Primitive Data Types
• Null value– Data type and a value– Signifies that the variable contains no
value• Undefined variable
– Has never had a value assigned to it– Has not been declared
or– Does not exist
9WDMD 170 – UW Stevens Point
Reference (composite) data types
• Collections of data represented by a single variable name
• JavaScript supports three reference data types– Functions– Objects– Arrays
10WDMD 170 – UW Stevens Point
Strong vs. Weakly “typed” data
• Strongly typed programming languages– Data types do not change after they have
been declared (data type declaration required)
– Also know as static typing• Loosely typed programming languages
– Variable data types are not required to be declared
– Also know as dynamic typing
11WDMD 170 – UW Stevens Point
• JavaScript language– Loosely typed programming language– JavaScript does not allow data typing– Determined automatically by JavaScript
interpreter• Can be displayed using typeof() operator
var myVar = 5;document.write(typeof(myVar))
• Would display “number”
Is JS data WEAKLY or STRONGLY typed?
12WDMD 170 – UW Stevens Point
typeof() operator
13WDMD 170 – UW Stevens Point
Refer to the instructions on pages 111-2 (Gosselin).
• Create the file PrintDataTypes.htm and save it in your Tutorial03 folder.
• Preview the .htm file.
• Are there any surprises?
eTask 1
14WDMD 170 – UW Stevens Point
Numeric Data Types
JavaScript supports two numeric data types:• Integers
– Positive or negative number with no decimal point
– Range from –253 to 253
• Floating points– Contains decimal places or written using
exponential notation– Range from 1.7976931348623157 X 10308 to
5 X 10-324
15WDMD 170 – UW Stevens Point
Refer to the instructions on pages 114 (Gosselin).
• Create the file PrintNumbers.htm and save it in your Tutorial03 folder.
• Preview the .htm file.
eTask 2
16WDMD 170 – UW Stevens Point
Boolean Values
• Logical value of true or false– Can be thought of as yes or no, on or off, 1 or 0
• Used for decision making and comparing data– Recall use in overriding internal event handler
with custom code
• Will use them in expressions• Will see operators to manipulate them
17WDMD 170 – UW Stevens Point
Strings
• Text string contains zero or more characters delimited by double or single quotation marks
• Text strings can be: – Used as literal values: – "Hello World"– Assigned to a variable: myVar = 'Yes'
– A zero-length string value (empty string): myVar = ""; //an empty string
18WDMD 170 – UW Stevens Point
Issue: using Quotation marks in a
string• Using quotation marks and apostrophes• JS allows paired double quotes ("…")or
single quotes ('…')to delimit strings• Use one to delimit and the other in the
literal• var thisString = "Dave's house";• var anotherString = 'The "house" of Dave';
• Or, use escape sequence (i.e. \')• var aThirdString = 'Dave\'s house';
19WDMD 170 – UW Stevens Point
JavaScript escape sequences
20WDMD 170 – UW Stevens Point
JavaScript escape sequences (2)
21WDMD 170 – UW Stevens Point
Program sample with JS escape sequences
22WDMD 170 – UW Stevens Point
Program sample with JS escape sequences (2)
23WDMD 170 – UW Stevens Point
Output of program
24WDMD 170 – UW Stevens Point
Using HTML tags in strings
• Use tags to format strings– Tag must be contained inside string
quotesvar newString = "Dave's house.<br>";
document.write(newString);
25WDMD 170 – UW Stevens Point
Copy and paste the following three code samples into a new HTML document in HTML-Kit. Save the file as CarriageReturnExamples.htm in your Tutorial03 folder.
<script>
//sample1
line1 = "sample 1, first line<br>";
line2 = "sample 1, second line<br>";
document.write(line1);
document.write(line2);
</script>
<pre><script>
//sample2
line1 = "sample 2, first line\n";
line2 = "sample 2, second line\n";
document.write(line1);
document.write(line2);
</script></pre>
<pre><script>
//sample3
line1 = "sample 3, first line";
line2 = "sample 3, second line";
document.writeln(line1);
document.writeln(line2);
</script></pre>
end of code samples
How are the carriage returns created in each sample?
eTask 3
26WDMD 170 – UW Stevens Point
Results of eTask 3: adding carriage returns to an HTML document
• Which of method do you prefer?– sample 1: use of <br>
within the string– sample 2: use of
escape character \n– sample 3: use of
writeln() statement
• 2 and 3 require <pre>
27WDMD 170 – UW Stevens Point
Arrays
• Contains a set of data represented by a single variable name– i.e., collection of variables contained in a
single variable– Used to store related things– To create, use Array() constructor
functionmyArrayVar = new Array(numberOfElements);
28WDMD 170 – UW Stevens Point
Arrays - conceptually
29WDMD 170 – UW Stevens Point
Details of Arrays
• Each piece of data in array is an element• Numbering of elements in array starts
with 0• Size of array is declared and each
element in array is accessed using brackets [ ]var hospitalDepartments;hospitalDepartments = new Array(10);hospitalDepartments[0] = "Oncology";
30WDMD 170 – UW Stevens Point
Syntax of Array Use//example 1-declare array variablevar hospitalDepartments;
// example 2-get a new array capable of holding 10 elements, numbered 0-9
hospitalDepartments = new Array(10);
//NOTE difference in () vs []
// example 3-assign the first position the string "Oncology"hospitalDepartments[0] = "Oncology";…// example 4-assign subsequent positions as you wishhospitalDepartments[9] = "Radiology";
// example 5-access the first position by its subscriptdocument.writeln(hospitalDepartments[0]) //displays "Oncology"
31WDMD 170 – UW Stevens Point
JS Array Peculiarities
• Arrays can contain different data types
• Array elements are undefined unless value is assigned
• Array property length– Returns the number of elements in the
array
32WDMD 170 – UW Stevens Point
Arrays can contain different data types
//code sample from Gosselin page 126multiple_types = new Array(5);
multiple_types[0] = "Hello World"; //stringmultiple_types[1] = 10; //integermultiple_types[2] = 3.156; //floating-pointmultiple_types[3] = true; //Booleanmultiple_types[4] = null; //null
33WDMD 170 – UW Stevens Point
Array elements are undefined unless value is assigned
var myArray = new Array(5);
document.write(myArray[0]); //displays “undefined”
34WDMD 170 – UW Stevens Point
Array property lengthreturns the number of elements in
the array
var myArray = new Array(5);
document.write(myArray.length); //displays “5”
Very useful when processing an array using a loop; specifically, the “for” loop.
The length property tells you how many times to iterate through the array.
35WDMD 170 – UW Stevens Point
Refer to the instructions on pages 128-9 (Gosselin).
• Create the file MonthsOfYear.htm and save it in your Tutorial03 folder.
• Preview the .htm file.
eTask 4
36WDMD 170 – UW Stevens Point
Assignment
• Complete exercises #1-6, 8 on pages 133-4 (Gosselin, Tutorial 03A).
• Attach the file for exercise 8 in a post to your eReview discussion group.
• Describe any difficulties you might have had in completing exercise 8.
• You may also post any questions (and the exercise file) to the eReview group – for discussion purposes.
• One week later, add each of the files to your web page in a folder labeled Tutorial03.
37WDMD 170 – UW Stevens Point
End of eLesson
• Jump to the Beginning of this eLesson
• WDMD 170 Course Schedule
• D2L Courseware Site