Event handlers
16
<element attributes onclick="function();">...
HTML
<button onclick="myFunction();">Click me!</button>
HTML
¨ JavaScript functions can be set as event handlers
¤ when you interact with the element, the function will execute
¨ onclick is just one of many event HTML attributes
¨ but popping up an alert window is disruptive and
annoying
¤ A better user experience would be to have the message
appear on the page...
CSC309
Document Object Model (DOM)
17
¨ most JS code manipulates
elements on an HTML page
¤ we can examine elements’ state
(e.g. see whether a box is checked)
¤ we can change state (e.g. insert
some new text into a div)
¤ we can change styles (e.g. make a
paragraph red)
DOM element objects
18
Access element: [Link]
19
var name = [Link]("id");
JS
<button onclick="changeText();">Click me!</button>
<span id="output">replace me</span>
<input id="textbox" type="text" />
HTML
function changeText() {
var span = [Link]("output");
var textBox = [Link]("textbox");
[Link] = "red";
}
JS
CSC309
Access element: [Link]
20
¨ [Link] returns the DOM object
for an element with a given id
¨ can change the text inside most elements by setting
the innerHTML property
¨ can change the text in form controls by setting the
value property
CSC309
Change elem. style: [Link]
21
Attribute Property or style object
color color
padding padding
background-color backgroundColor
border-top-width borderTopWidth
Font size fontSize
Font famiy fontFamily
CSC309
Preetify
22
function changeText() {
//grab or initialize text here
// font styles added by JS:
[Link] = "13pt";
[Link] = "Comic Sans MS";
[Link] = "red"; // or pink?
}
JS
CSC309
23 The JavaScript Language
CSC309
Variables
24
var name = expression;
JS
var clientName = "Connie Client";
var age = 32;
var weight = 127.4;
JS
¨ variables are declared with the var keyword (case
sensitive)
¨ types are not specified, but JS does have types
("loosely typed")
¤ Number, Boolean, String, Array, Object,
Function, Null, Undefined
¤ can find out a variable's type by calling typeof
CSC309
Number type
25
var enrollment = 99;
var medianGrade = 2.8;
var credits = 5 + 4 + (2 * 3);
JS
¨ integers and real numbers are the same type (no int
vs. double)
¨ same operators: + - * / % ++ -- = += -= *= /=
%=
¨ similar precedence to Java
¨ many operators auto-convert types: "2" * 3 is 6
CSC309
Comments (same as Java)
26
// single-line comment
/* multi-line comment */
JS
¨ identical to Java's comment syntax
¨ recall: 4 comment syntaxes
¤ HTML: <!-- comment -->
¤ CSS/JS/PHP: /* comment */
¤ Java/JS/PHP: // comment
¤ PHP: # comment
CSC309
Math object
27
var rand1to10 = [Link]([Link]() * 10 + 1);
var three = [Link]([Link]);
JS
¨ methods: abs, ceil, cos, floor, log,
max, min, pow, random, round, sin,
sqrt, tan
¨ properties: E, PI
CSC309
Special values: null and undefined
28
var ned = null;
var benson = 9;
var caroline;
// at this point in the code,
// ned is null
// benson's 9
// caroline is undefined
JS
¨ undefined : has not been declared, does not
exist
¨ null : exists, but was specifically assigned an
empty or null value
CSC309
Logical operators
29
¨ > < >= <= && || ! == != === !==
¨ most logical operators automatically convert types:
¤ 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
CSC309
if/else statement (same as Java)
30
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
JS
¨ identical structure to Java's if/else statement
¨ JavaScript allows almost anything as a condition
CSC309