Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.
PHP already allows us to create dynamic web pages. Why also use client-side scripting?
noun.verb()
, less procedural: verb(noun)
script
<script src="filename" type="text/javascript"></script>
<script src="example.js" type="text/javascript"></script>
script
tag should be placed in HTML page's head
.js
filebody
or head
(like CSS)
alert
alert("message");
alert("IE6 detected. Suck-mode enabled.");
var name = expression;
var clientName = "Connie Client"; var age = 32; var weight = 127.4;
var
keyword (case sensitive)Number
, Boolean
, String
, Array
, Object
, Function
, Null
, Undefined
typeof
Number
type
(7.2.2)
var enrollment = 99; var medianGrade = 2.8; var credits = 5 + 4 + (2 * 3);
int
vs. double
)+ - * / % ++ -- = += -= *= /= %=
"2" * 3
is 6
// single-line comment
/* multi-line comment */
<!-- comment -->
/* comment */
// comment
# comment
String
type
(7.2.7)
var s = "Connie Client"; var fName = s.substring(0, s.indexOf(" ")); // "Connie" var len = s.length; // 13 var s2 = 'Melvin Merchant';
charAt
,
charCodeAt
,
fromCharCode
,
indexOf
,
lastIndexOf
,
replace
,
split
,
substring
,
toLowerCase
,
toUpperCase
charAt
returns a one-letter String
(there is no char
type)length
property (not a method as in Java)""
or ''
+
:
1
+ 1 is 2
, but
"1"
+ 1 is "11"
String
\' \" \& \n \t \\
String
s:
var count = 10; var s1 = "" + count; // "10" var s2 = count + " bananas, ah ah ah!"; // "10 bananas, ah ah ah!" var n1 = parseInt("42 is the answer"); // 42 var n2 = parseFloat("booyah"); // NaN
String
:
var firstLetter = s[0]; // fails in IE var firstLetter = s.charAt(0); // does work in IE var lastLetter = s.charAt(s.length - 1);
for
loop
(same as Java)
(7.2.8)
for (initialization; condition; update) { statements; }
var sum = 0; for (var i = 0; i < 100; i++) { sum = sum + i; }
var s1 = "hello";
var s2 = "";
for (var i = 0; i < s.length; i++) {
s2 += s1.charAt(i) + s1.charAt(i);
}
// s2 stores "hheelllloo"
var rand1to10 = Math.floor(Math.random() * 10 + 1); var three = Math.floor(Math.PI);
null
and undefined
(7.2.10)
var ned = null;
var benson = 9;
// at this point in the code,
// ned is null
// benson's 9
// caroline is undefined
undefined
: has not been declared, does not existnull
: exists, but was specifically assigned an empty or null
value> < >= <= && || ! == != === !==
5 < "7"
is true
42 == 42.0
is true
"5.0" == 5
is true
===
and !==
are strict equality tests; checks both type and value
"5.0" === 5
is false
if/else
statement
(same as Java)
(7.3.2)
if (condition) { statements; } else if (condition) { statements; } else { statements; }
if/else
statementvar iLike190M = true; var ieIsGood = "IE6" > 0; // false if ("web dev is great") { /* true */ } if (0) { /* false */ }
Boolean
0
, 0.0
, NaN
, ""
, null
, and undefined
Boolean
explicitly:
var boolValue = Boolean(otherValue);
var boolValue = !!(otherValue);
while
loops
(same as Java)
(7.3.5)
while (condition) { statements; }
do { statements; } while (condition);
break
and continue
keywords also behave as in Javaalert("message"); // message confirm("message"); // returns true or false prompt("message"); // returns user input string
var name = []; // empty array var name = [value, value, ..., value]; // pre-filled name[index] = value; // store element
var ducks = ["Huey", "Dewey", "Louie"]; var stooges = []; // stooges.length is 0 stooges[0] = "Larry"; // stooges.length is 1 stooges[1] = "Moe"; // stooges.length is 2 stooges[4] = "Curly"; // stooges.length is 5 stooges[4] = "Shemp"; // stooges.length is 5
length
property (grows as needed when elements are added)var a = ["Stef", "Jason"]; // Stef, Jason a.push("Brian"); // Stef, Jason, Brian a.unshift("Kelly"); // Kelly, Stef, Jason, Brian a.pop(); // Kelly, Stef, Jason a.shift(); // Stef, Jason a.sort(); // Jason, Stef
split
and join
var s = "the quick brown fox"; var a = s.split(" "); // ["the", "quick", "brown", "fox"] a.reverse(); // ["fox", "brown", "quick", "the"] s = a.join("!"); // "fox!brown!quick!the"
split
breaks apart a string into an array using a delimiter
join
merges an array into a single string, placing a delimiter between themmain
method (or implicit main
like in PHP)<button>
the canonical clickable UI control (inline)
<button>Click me!</button>
function name() { statement ; statement ; ... statement ; }
function myFunction() { alert("Hello!"); alert("How are you?"); }
example.js
linked to our HTML page<element attributes onclick="function();">...
<button onclick="myFunction();">Click me!</button>
onclick
is just one of many event HTML attributes we'll usealert
window is disruptive and annoying
a set of JavaScript objects that represent each element on the page
div
objectName.attributeName
document.getElementById
var name = document.getElementById("id");
<button onclick="changeText();">Click me!</button> <span id="output">replace me</span> <input id="textbox" type="text" />
function changeText() { var span = document.getElementById("output"); var textBox = document.getElementById("textbox"); textBox.value = span.innerHTML; span.innerHTML = "Hello, how are you?"; }
document.getElementById
returns the DOM object for an element with a given id
innerHTML
property
value
property