1. WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Using Data Types (No Audio Component) © Dr. David C. Gibbs 2003-04

2. WDMD 170 – UW Stevens Point 2 Tutorial 3 Data Types and Operators Section A - Using Data Types

3. WDMD 170 – UW Stevens Point 3 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

4. WDMD 170 – UW Stevens Point 4 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

5. WDMD 170 – UW Stevens Point 5 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

6. WDMD 170 – UW Stevens Point 6 Primitive Data Types JavaScript supports five primitive data types Numbers: Integers and floating point values Booleans Strings Undefined Null

7. WDMD 170 – UW Stevens Point 7 Primitive Types

8. WDMD 170 – UW Stevens Point 8 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

9. WDMD 170 – UW Stevens Point 9 Reference (composite) data types Collections of data represented by a single variable name JavaScript supports three reference data types –Functions –Objects –Arrays

10. WDMD 170 – UW Stevens Point 10 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

11. WDMD 170 – UW Stevens Point 11 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?

12. WDMD 170 – UW Stevens Point 12 typeof() operator

13. WDMD 170 – UW Stevens Point 13 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

14. WDMD 170 – UW Stevens Point 14 Numeric Data Types JavaScript supports two numeric data types: Integers –Positive or negative number with no decimal point –Range from –2 53 to 2 53 Floating points –Contains decimal places or written using exponential notation –Range from  1.7976931348623157 X 10 308 to  5 X 10 -324

15. WDMD 170 – UW Stevens Point 15 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

16. WDMD 170 – UW Stevens Point 16 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

17. WDMD 170 – UW Stevens Point 17 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

18. WDMD 170 – UW Stevens Point 18 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';

19. WDMD 170 – UW Stevens Point 19 JavaScript escape sequences

20. WDMD 170 – UW Stevens Point 20 JavaScript escape sequences (2)

21. WDMD 170 – UW Stevens Point 21 Program sample with JS escape sequences

22. WDMD 170 – UW Stevens Point 22 Program sample with JS escape sequences (2)

23. WDMD 170 – UW Stevens Point 23 Ou tpu t of pro gra m

24. WDMD 170 – UW Stevens Point 24 Using HTML tags in strings Use tags to format strings –Tag must be contained inside string quotes var newString = "Dave's house. "; document.write(newString);

25. WDMD 170 – UW Stevens Point 25 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. //sample1 line1 = "sample 1, first line "; line2 = "sample 1, second line "; document.write(line1); document.write(line2); //sample2 line1 = "sample 2, first line\n"; line2 = "sample 2, second line\n"; document.write(line1); document.write(line2); //sample3 line1 = "sample 3, first line"; line2 = "sample 3, second line"; document.writeln(line1); document.writeln(line2); end of code samples How are the carriage returns created in each sample? eTask 3

26. WDMD 170 – UW Stevens Point 26 Results of eTask 3: adding carriage returns to an HTML document Which of method do you prefer? –sample 1: use of within the string –sample 2: use of escape character \n –sample 3: use of writeln() statement 2 and 3 require

27. WDMD 170 – UW Stevens Point 27 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 function myArrayVar = new Array(numberOfElements);

28. WDMD 170 – UW Stevens Point 28 Arrays - conceptually

29. WDMD 170 – UW Stevens Point 29 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";

30. WDMD 170 – UW Stevens Point 30 Syntax of Array Use //example 1-declare array variable var 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 wish hospitalDepartments[9] = "Radiology"; // example 5-access the first position by its subscript document.writeln(hospitalDepartments[0]) //displays "Oncology"

31. WDMD 170 – UW Stevens Point 31 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

32. WDMD 170 – UW Stevens Point 32 Arrays can contain different data types //code sample from Gosselin page 126 multiple_types = new Array(5); multiple_types[0] = "Hello World";//string multiple_types[1] = 10;//integer multiple_types[2] = 3.156;//floating-point multiple_types[3] = true;//Boolean multiple_types[4] = null;//null

33. WDMD 170 – UW Stevens Point 33 Array elements are undefined unless value is assigned var myArray = new Array(5); document.write(myArray[0]);//displays “undefined”

34. WDMD 170 – UW Stevens Point 34 Array property length returns 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.

35. WDMD 170 – UW Stevens Point 35 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

36. WDMD 170 – UW Stevens Point 36 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.

37. WDMD 170 – UW Stevens Point 37 End of eLesson Jump to the Beginning of this eLesson WDMD 170 Course Schedule D2L Courseware Site