1 Intro to Javascript

Client Side Scripting

2
 Why use client-side
3
programming?
PHP already allows us to create dynamic
web pages. Why also use client-side
scripting?
 client-side scripting (JavaScript) benefits:

 usability: can modify a page without

having to post back to the server (faster UI)
 efficiency: can make small, quick changes
to page without waiting for server
 event-driven: can respond to user actions
like clicks and key presses
 Why use client-side
4
programming?
 server-side programming (PHP) benefits:
 security: has access to server's private
data; client can't see source code
 compatibility: not subject to browser
compatibility issues
 power: can write files, open connections to
servers, connect to databases, ...
 What is Javascript?
5

 a lightweight programming language

("scripting language")
 used to make web pages interactive
 insert dynamic text into HTML (ex: user
name)
 react to events (ex: page load user click)
 get information about a user's computer
(ex: browser type)
 perform calculations on user's computer
(ex: form validation)
 What is Javascript?
6

 a web standard (but not supported

identically by all browsers)
 NOT related to Java other than by name
and some syntactic similarities
 Linking to a JavaScript file:
7
script
<script src="filename" type="text/javascript"></script>

HTML
 script tag should be placed in HTML
page's head
 script code is stored in a separate .js file
 JS code can be placed directly in the
HTML file's body or head (like CSS)
 but this is bad style (should separate
content, presentation, and behavior
 Event-driven programming
8

 split breaks apart a string into an array

using a delimiter
 can also be used with regular expressions
(seen later)
 join merges an array into a single string,
placing a delimiter between them
 A JavaScript statement:
9
alert
alert("IE6 detected. Suck-mode enabled.");
JS

 a JS command that pops up a dialog box

with a message
 Event-driven programming
10

 you are used to programs start with a

main method (or implicit main like in
PHP)
 JavaScript programs instead wait for user
actions called events and respond to
them
 event-driven programming: writing
programs driven by user events
 Let's write a page with a clickable button
that pops up a "Hello, World" window...
 Buttons
11
<button>Click me!</button> HTML

 button's text appears inside tag; can

also contain images
 To make a responsive button or other UI
control:
1. choose the control (e.g. button) and event
(e.g. mouse 1. click) of interest
2. write a JavaScript function to run when
the event occurs
3. attach the function to the event on the
control
 JavaScript functions
12
function name() {
statement ;
statement ;
...
statement ;
} JS
function myFunction() {
alert("Hello!");
alert("How are you?");
} JS
 the above could be the contents of
example.js linked to our HTML page
 statements placed into functions can be
evaluated in response to user events
 Event handlers
13
<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 we'll use
 but popping up an alert window is
disruptive and annoying
 Document Object Model
14
(DOM)
 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
 DOM element objects
15
 Accessing elements:
16
document.getElementById
var name = document.getElementById("id");

JS
<button onclick="changeText();">Click me!</button>
<span id="output">replace me</span>
<input id="textbox" type="text" />
HTML
function changeText() {
var span = document.getElementById("output");
var textBox = document.getElementById("textbox");

textbox.style.color = "red";

}
JS
 Accessing elements:
17
document.getElementById
 document.getElementById 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
 Changing element style:
18
element.style

Property or style
Attribute
object
color color
padding padding
background-color backgroundColor
border-top-width borderTopWidth
Font size fontSize
Font famiy fontFamily
 Preetify
19

function changeText() {
//grab or initialize text here

// font styles added by JS:

text.style.fontSize = "13pt";
text.style.fontFamily = "Comic Sans MS";
text.style.color = "red"; // or pink?
}
JS
20 More Javascript Syntax
 Variables
21

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
 Number type
22

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
 Comments (same as Java)
23

// 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
 Math object
24

var rand1to10 = Math.floor(Math.random() * 10 + 1);

var three = Math.floor(Math.PI);
JS

 methods: abs, ceil, cos, floor, log,

max, min, pow, random, round, sin,
sqrt, tan
 properties: E, PI
 Logical operators
25

 > < >= <= && || ! == != === !==

 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
 if/else statement (same as
26
Java)
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
 for loop (same as Java)
27

var sum = 0;
for (var i = 0; i < 100; i++) {
sum = sum + i;
}
JS
var s1 = "hello";
var s2 = "";
for (var i = 0; i < s.length; i++) {
s2 += s1.charAt(i) + s1.charAt(i);
}
// s2 stores "hheelllloo"
JS
 Popup boxes
28

alert("message"); // message
confirm("message"); // returns true or false
prompt("message"); // returns user input string
JS