Download presentation
Presentation is loading. Please wait.
1
The Internet 11/22/11 Conditionals and Loops
CIS 228 The Internet 11/22/11 Conditionals and Loops
2
Attaching JavaScript to XHTML
<script> element (in <head>) Attribute: type=“text/javascript” Attribute: src=“cookie.js” (JavaScript in a file) Event attributes of elements (in <body>) 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
3
JavaScript Functions Built in functions Example User defined 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 <body onload=“alert('hello world');”> User defined functions Bundle together small tasks into bigger ones
4
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)
5
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”; Values have types; locations do not! Declarations should initialize locations
6
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
7
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<21 || 5>2*x || x==0)) e.g., s==“done” || !(name!=“Bowen” && s==“first”)
8
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 != 6 + 3 == == = 5.14 Explicit conversions ParseInt(“6”) + parseInt(“3”) == == 9 ParseFloat(“3.14”) + 2 == 5.14
9
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)
10
Timers One-time timers Repeating timers Canceling repeating 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);
11
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 <body> <body onload=“size();” onresize=“size();”>
12
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
13
Comments XHTML comments CSS comments JavaScript comments
<!--This is an HTML comment--> CSS comments /* This is a CSS comment */ JavaScript comments // text to the end of line ignored /* Multi-line comment */ Temporary comments are useful for debugging
14
Conditionals Conditional Expressions Conditional Statements
cond ? expr1 : expr2 Conditional Statements if ( cond ) statement statement1 else statement2
15
Block A sequence of statements packaged into one
A block can be used anywhere a statement can { statement1 statement2 … statementn }
16
Arrays A collection of variables with the same name
differentiated by an index Declaration: var a = new array(5); // size, 5, optional var b = [“red”, “yellow”, “blue”]; Use: var c = “color: ” + b[2]; a[2] = (a[1] + a[3]) / 2; Size: a.length
17
Repetition while loops for loops while ( cond ) statement
Var i=0 ; While (i<a.length) { a[i] = a[i]*a[i] ; i = i+1; } for loops for ( init ; cond ; inc ) statement for ( var i=0 ; i<a.length ; i = i+1 )
Similar presentations
