29
JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc.

JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Embed Size (px)

DESCRIPTION

Values Booleans Numbers Strings null undefined

Citation preview

Page 1: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

JavaScript: The First Parts

Part TwoDouglas Crockford

Yahoo! Inc.

Page 2: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Learn to Program• Values• Variables• Expressions• Branching• Loops

• Functions• Recursion• Arrays• Objects• Trees

Page 3: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Values• Booleans• Numbers• Strings• null• undefined

Page 4: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Boolean• true• false

• Named for George Boole

• && and• || or• ! not

Page 5: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Numbers• Modern computers like to represent

numbers in binary (base 2).

27 26 25 24 23 22 21 20

128

64 32 16 8 4 2 1

Page 6: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Numbers• Binary numbers usually come in fixed

sizes, such as 8, 16, 32, 64.• The number of bits determines the

range of the values.

Number of bits

8 16 32 64

Maximum value

255 65535

4294967295

18446744073709551615

Page 7: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Numbers• JavaScript provides only one number

type.• It is a 64-bit binary floating-point number.

• Floating point numbers can cover an enormous range.

• 5E-324 to 1.7976931348623157E308

... 211

210

29 28 27 26 25 24 23 22 21 20 2-1 2-2

2-3

2-4 2-5

2-6 2-7

2-8

2-9 2-10 2-11 ...

mantissa or significand

Page 8: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

But it comes at a cost.• Most decimal fractions cannot be

represented accurately.

• A decimal fraction requires an infinite number of bits, but mantissas are finite.

... 211

210

29 28 27 26 25 24 23 22 21 20 2-1 2-2

2-3

2-4 2-5

2-6 2-7

2-8

2-9 2-10 2-11 ...

mantissa or significand

Page 9: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

But it comes at a cost.• Most decimal fractions cannot be

represented accurately.

• The associative and distributive laws do not hold.

(a + b) + c ≠ a + (b + c)

... 211

210

29 28 27 26 25 24 23 22 21 20 2-1 2-2

2-3

2-4 2-5

2-6 2-7

2-8

2-9 2-10 2-11 ...

abc

Page 10: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Integers that fit entirely within the mantissa are safe.

Page 11: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Write a program to compute safe_max

• There are integers such that adding 1 will not result in a larger integer. Such integers are unsafe integers.

Page 12: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Write a program to compute safe_max

• There are integers such that adding 1 will not result in a larger integer. Such integers are unsafe integers.

• We want to find the largest positive safe integer. Adding 1 to it produces an unsafe integer.

Page 13: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Write a program to compute safe_max

• There are integers such that adding 1 will not result in a larger integer. Such integers are unsafe integers.

• We want to find the largest positive safe integer. Adding 1 to it produces an unsafe integer.

• This will require a loop and a variable, in which we produce and test candidate integers.

Page 14: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

First Attemptvar safe_max = function () {

var integer = 1;

while (integer + 1 !== integer) {

integer = integer + 1;

}

return integer; };

Page 15: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

• Go to the JSMVHS group• Go to files• Get template1.txt• Start a text editor, such as Crimson

Editor.• Edit the template, save it as

safe_max.html

Page 16: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

<html><head><title>template1.html</title><style>div[id] { border: 1px solid black; margin: 1em; padding: 1em;}</style></head><body><script src="http://www.ADsafe.org/adsafe.js"></script>

<div id="MAX_"><p>Compute the largest safe integer.</p><p id="MAX_RESULT"></p><script>"use strict";ADSAFE.go("MAX_", function (dom, lib) {

// The safe_max function, as written, is too slow.// It will not be allowed to finished.// It needs to be corrected.

var safe_max = function () { var integer = 1; while (integer + 1 !== integer) { integer = integer + 1; } return integer; };

dom.q('#MAX_RESULT').value(safe_max());});</script></div>

</body></html>

Page 17: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

First Attemptvar safe_max = function () {

var integer = 1;

while (integer + 1 !== integer) {

integer = integer + 1;

}

return integer; };

Page 18: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Second Attemptvar safe_max = function () {

var integer = 1;

while (integer + 1 !== integer) {

integer = integer * 2;

}

return integer; };

Page 19: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

9007199254740992 • nine quadrillion seven trillion one

hundred ninety nine billion two hundred fifty four million seven hundred forty thousand nine hundred ninety two

• Integer operations are exact if the safe_max limit is never exceeded.

• If safe_max is exceeded, this might be false:

(a + 1) - 1 === a

Page 20: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

eps• eps is that smallest number which,

when added to 1 produces a number that is larger than 1.

• eps is short for epsilon.

... 211

210

29 28 27 26 25 24 23 22 21 20 2-1 2-2

2-3

2-4 2-5

2-6 2-7

2-8

2-9 2-10 2-11 ...

mantissa or significand

Page 21: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

First attemptvar compute_eps = function () {

var eps = 1;

while (1 + eps !== 1) {

eps = eps / 2;

}

return eps;

};

var eps = compute_eps();

Page 22: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Test the resultvar test_eps = function (e) {

if (1 + e <= 1) {

alert("Test failed.");

}

};

test_eps(eps);

Page 23: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Why did it fail?

Page 24: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Second attemptvar compute_eps = function () { var eps, next = 1; while (1 + next !== 1) { eps = next; next = next / 2; } return eps;};var eps = compute_eps();

Page 25: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Learn to Program• Values• Variables• Expressions• Branching• Loops

• Functions• Recursion• Arrays• Objects• Trees

Page 26: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Array• An array is a collection of values.• Each value is given a number.• The first value is 0, not 1.• Create an array with the [ ]

operator.• Access an element of an array with

the [ ] operator.

Page 27: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

http://jsmvhs.crockford.com/yellowbox.html

• data = [17, 19, 23, 29];• data.length• data[0]• data[1]• data[2] = 0• data[data[2]]• data[3]• data[4]• data[4] = 31• data.length

Page 28: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Looping• The for statement can be used to

visit every element of an array.var alert_array = function (array) {

var i;

for (i = 0; i < array.length; i = i + 1) {

alert(array[i]);

}

};

alert_array([36, 42, 10]);

Page 29: JavaScript: The First Parts Part Two Douglas Crockford Yahoo! Inc

Assignment 2• Write an average_array function

that takes an array of numbers and returns the average of its elements.

• Use template1 to package it in an HTML page.

• Add it to your assignments folder.