Introduction to JavaScript
1
Client Side Scripting
CS380 2
Why use client-side 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
3
Why use client-side 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, ...
4
What is JavaScript?
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)
5
What is JavaScript?
a web standard (but not supported identically by all browsers)
NOT related to Java other than by name and some syntactic similarities
6
JavaScript vs Java
interpreted, not compiled
more relaxed syntax and rules
fewer and "looser" data types
variables don't need to be declared
errors often silent (few exceptions)
key construct is the function rather than the class
"first-class" functions are used in many situations
contained within a web page and integrates with its HTML/CSS content
7
JavaScript vs. PHP
similarities:
both are interpreted, not compiled
both are relaxed about syntax, rules, and types
both are case-sensitive
bothhave built-in regular expressions for
powerful text processing
8
JavaScript vs. PHP
differences:
JS is more object-oriented: [Link](), less
procedural: verb(noun)
JS focuses on user interfaces and interacting
with a document; PHP is geared toward HTML
output and file/form processing
JS code runs on the client's browser; PHP code
runs on the web server
9
Linking to a JavaScript file: 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
10
Buttons
<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
11
JavaScript functions
function name() {
statement ;
statement ;
...
statement ;
} JS
function myFunction() {
alert("Hello!");
alert("How are you?");
} JS
the above could be the contents of
[Link] linked to our HTML page
statements placed into functions can be
evaluated in response to user events 12
Event handlers
<element attributes > HTML
<button 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
A better user experience would be to have the message appear on the page...
13
Document Object Model (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
e.g. make a paragraph red
14
DOM element objects
15
Accessing elements:
[Link]
var name = [Link]("id");
JS
<button 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
16
Accessing elements:
[Link]
[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
17
Changing element style:
[Link]
Attribute Property or style object
color color
padding padding
background-color backgroundColor
border-top-width borderTopWidth
Font size fontSize
Font famiy fontFamily
18
Preetify
function changeText() {
//grab or initialize text here
// font styles added by JS:
[Link] = "13pt";
[Link] = "Comic Sans MS";
[Link] = "red"; // or pink?
} JS
19
Variables
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
20
Number type
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
21
Comments (same as Java)
// 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
22
Math object
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
23
Special values: null and undefined
var ned = null;
var benson = 9;
// 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
Why does JavaScript have both of these? 24
Logical operators
> < >= <= && || ! == != === !==
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
25
if/else statement (same as 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
26
Boolean type
var iLike190M = true;
var ieIsGood = "IE6" > 0; // false
if ("web devevelopment is great") { /* true */ }
if (0) { /* false */ }
JS
any value can be used as a Boolean
"falsey" values: 0, 0.0, NaN, "", null, and
undefined
"truthy" values: anything else
converting a value into a Boolean explicitly:
var boolValue = Boolean(otherValue);
var boolValue = !!(otherValue); 27
for loop (same as Java)
var sum = 0;
for (var i = 0; i < 100; i++) {
sum = sum + i;
} JS
var s1 = "hello";
var s2 = "";
for (var i = 0; i < [Link]; i++) {
s2 += [Link](i) + [Link](i);
}
// s2 stores "hheelllloo" JS
28
while loops (same as Java)
while (condition) {
statements;
} JS
do {
statements;
} while (condition);
JS
break and continue keywords also behave as
in Java
29
Popup boxes
alert("message"); // message
confirm("message"); // returns true or false
prompt("message"); // returns user input string
JS
30
Arrays
var name = []; // empty array
var name = [value, value, ..., value]; // pre-filled
name[index] = value; // store element
JS
var ducks = ["Huey", "Dewey", "Louie"];
var stooges = []; // [Link] is 0
stooges[0] = "Larry"; // [Link] is 1
stooges[1] = "Moe"; // [Link] is 2
stooges[4] = "Curly"; // [Link] is 5
stooges[4] = "Shemp"; // [Link] is 5
JS
31
Array methods
var a = ["Stef", "Jason"]; // Stef, Jason
[Link]("Brian"); // Stef, Jason, Brian
[Link]("Kelly"); // Kelly, Stef, Jason, Brian
[Link](); // Kelly, Stef, Jason
[Link](); // Stef, Jason
[Link](); // Jason, Stef
JS
array serves as many data structures: list,
queue, stack, ...
methods: concat, join, pop, push, reverse,
shift, slice, sort, splice, toString, unshift
push and pop add / remove from back
unshift and shift add / remove from front
shift and pop return the element that is removed
32
String type
var s = "Connie Client";
var fName = [Link](0, [Link](" ")); // "Connie"
var len = [Link]; // 13
var s2 = 'Melvin Merchant';
JS
charAt, charCodeAt, fromCharCode, indexOf,
methods:
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)
Strings can be specified with "" or ''
concatenation with + :
1 + 1 is 2, but "1" + 1 is "11"
33
More about String
escape sequences behave as in Java: \' \" \&
\n \t \\
converting between numbers and Strings:
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 JS
accessing the letters of a String:
var firstLetter = s[0]; // fails in IE
var firstLetter = [Link](0); // does work in IE
var lastLetter = [Link]([Link] - 1); JS
34
Splitting strings: split and join
var s = "the quick brown fox";
var a = [Link](" "); // ["the", "quick", "brown", "fox"]
[Link](); // ["fox", "brown", "quick", "the"]
s = [Link]("!"); // "fox!brown!quick!the"
JS
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
35
Thank You
