wdmd 170 – uw stevens point 1 wdmd 170 internet languages elesson: using data types (no audio...

1WDMD 170 – UW Stevens Point

WDMD 170 Internet Languages

eLesson: Using Data Types

(No Audio Component)

© Dr. David C. Gibbs2003-04


Tutorial 3

Data Types and Operators

Section A - Using Data Types


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


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


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


Primitive Data Types

JavaScript supports five primitive data types

• Numbers: Integers and floating point values• Booleans• Strings• Undefined• Null


Primitive Types


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


Reference (composite) data types

• Collections of data represented by a single variable name

• JavaScript supports three reference data types– Functions– Objects– Arrays


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


• 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?


typeof() operator


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


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


Refer to the instructions on pages 114 (Gosselin).

• Create the file PrintNumbers.htm and save it in your Tutorial03 folder.


eTask 2


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


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


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';


JavaScript escape sequences


JavaScript escape sequences (2)


Program sample with JS escape sequences


Program sample with JS escape sequences (2)


Output of program


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);


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);


</script>

<pre><script>

//sample2

line1 = "sample 2, first line\n";

line2 = "sample 2, second line\n";



</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


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>


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);


Arrays - conceptually


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";


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"


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


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


Array elements are undefined unless value is assigned

var myArray = new Array(5);

document.write(myArray[0]); //displays “undefined”


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.


Refer to the instructions on pages 128-9 (Gosselin).

• Create the file MonthsOfYear.htm and save it in your Tutorial03 folder.


eTask 4


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.


End of eLesson

• Jump to the Beginning of this eLesson

• WDMD 170 Course Schedule

• D2L Courseware Site

wdmd 170 – uw stevens point 1 wdmd 170 internet languages elesson: using data types (no audio...

Documents