CIS 228 The Internet 11/17/11 Of Timers and Cookies

Attaching JavaScript to XHTML element (in ) Attribute: type=“text/javascript” Attribute: src=“cookie.js” (JavaScript in a file) Event attributes of elements (in ) Attribute: onload=”action” Action executes when page loads Attribute: onclick=”action” Action executes when mouse clicks element Attribute: onblur=”action” Action executes when mouse stops hovering

JavaScript Functions Reusable chunks of code that accomplish common tasks Built in functions alert('hello world'); Displays text in a pop up window prompt('first message', 'second message'); Solicits data from user Example User defined functions Bundle together small tasks into bigger ones

More JavaScript Functions function touchRock() { var userName = prompt(“Your name is?” “Enter name.”); if (userName) { alert(“Hi, ” + userName); document.getElementById(“rockImg”).src = rock_happy.png; }

JavaScript Data Types String (text) ( e.g. “this is a string”, 'so is this', 'don\'t worry') Number Integer ( e.g., 23, 0, -37 ) Decimal ( e.g., , , ) Boolean true or false Object ( e.g., document )

JavaScript Locations Associate a name with a value Variable – the value may change Declaration: var s = “The user name is ”; Use: s = s + userName; Constant – the value is fixed Warning: constants are not supported by IE Declaration: const userName = “malcolmX”; Use: s = s + userName; Values have types; locations do not! Declarations should initialize locations

JavaScript Identifiers Identifiers name functions and locations Rules: 1 or more characters First character must be: letter or “_” or “$” All characters must be: letter or digit or “_” or “$” Spaces and other special characters are not allowed Camel case convention (for variables) thisIsACamelCaseVariableId Upper case convention (for constants) THIS_IS_AN_UPPER_CASE_CONSTANT_ID

JavaScript Expressions String operator: + (concatination) e.g., s + userName, “Bowen” + “ ” + “Alpern” Numeric operators: +, -, *, /, % e.g., 3+4, 3-4, 3*4, 3/4, 3%4, 3.14*r*r/2 Comparison operators: ==, !=,, >= e.g., 3+4 != 8, 4/2 == 2, userName == “malcolmX” Boolean operators: !, &&, || e.g., !done && ((3*x+7 2*x || x==0)) e.g., s==“done” || ! (name!=“Bowen” && s==“first”)

JavaScript Conversions Error values: undefined – uninitialized locations (always initialize) NaN – not a number (e.g., 'sam' / 3 == NaN ) Automatic conversions “12” / “6” == “12” / 6 == 12 / “6” == 12 / 6 == 2 “6” + “3” == “6” + 3 == 6 + “3” == “63” == 63 != == == = 5.14 Explicit conversions ParseInt(“6”) + parseInt(“3”) == == 9 ParseFloat(“3.14”) + 2 == 5.14

The document Object Can appear on either side of an assignment document (the root of the “DOM” object).getElementById(“x”) (the element with id=“x”).sytle (the style attribute of that element).height (the height of the element).color (the color of the element).getElementById(“i”) (and the element is img ).src (the URL of the file containing an image).getElementById(“f”) (and the element is a form field).value (the value entered in the field)

Timers One-time timers setTimeout(what, when); what – action to take ( e.g., “alert('wake up!');” ) when – time delay in milliseconds ( e.g., 5 * 60 * 1000 ) Repeating timers const timerId = setInterval(what, when); when – time between repeated actions Canceling repeating timers clearInterval(timerId);

Sizing Images The size (height) of the viewport document.body.clientHeight The size (height) of an image (with id=“im” ) document.getElementById(“im”).style.height Resizing an image when the page is resized onresize event attribute of

Cookies Medium-term persistent storage for small values List of name-value pairs (total size is browser dependent) Name is an identifier Value is a String Expiration date Helper functions (cookie.js) writeCookie(name, value, days); readCookie(name); eraseCookie(name); Not all browsers support cookies Navigator.cookiesEnabled