Download JavaScript for Client-Side Programming: Scripts, Languages, and Tasks and more Slides Web Programming and Technologies in PDF only on Docsity!
COMP519: Web Programming
Autumn 2011
client-side programming with JavaScript
scripts vs. programs
JavaScript vs. JScript vs. VBScript
JavaScript vs. JScript vs. VBScript
common tasks for client-side scripts
JavaScript
data types & expressions
control statements
functions & libraries
strings & arrays
Date, document, navigator, user-defined classes
Client-Side Programming
•^
HTML is good for developing
static
pages
can specify text/image layout, presentation, links, …
Web page looks the same each time it is accessed
in order to develop interactive/reactive pages, must integrate programming in some form oranother
•^
client-side programming
programs are written in a separate programming (or scripting) language
e.g., JavaScript, JScript, VBScript
programs are embedded in the HTML of a Web page, with (HTML) tags to identify theprogram component
e.g.,
the browser executes the program as it loads the page, integrating the dynamic output ofthe program with the static content of HTML
could also allow the user (client) to input information and process it, might be used tovalidate input before
it’s submitted to a remote server
Common Scripting Tasks
•^
adding dynamic features to Web pages
validation of form data
(probably the most commonly used application)
image rollovers
time-sensitive or random page elements
handling cookies
•^
defining programs with Web interfaces
utilize buttons, text boxes, clickable images, prompts, etc
utilize buttons, text boxes, clickable images, prompts, etc
•^
limitations of client-side scripting
since script code is embedded in the page, it is viewable to the world
for security reasons, scripts are limited in what they can do
e.g., can't access the client's hard drive
since they are designed to run on any machine platform, scripts do not contain platformspecific commands
script languages are not full-featured
e.g., JavaScript objects are very crude, not good for large project development
JavaScript
•^
JavaScript code can be embedded in a Web page using
Here is some static text as well.
when the text is displayed
as in C++/Java, statements end with
;
but a line break might
also
be interpreted as
the end of a statement (depends uponbrowser)JavaScript comments similar to C++/Java
starts a single line comment
enclose multi-line comments
view page
JavaScript Operators & Control Statements
Folding Puzzle
•^
while, for, do
- while, …
PUZZLE: Suppose you took a pieceof paper and folded it in half, then inhalf again, and so on.How many folds before the thicknessof the paper reaches from the earth tothe sun? *Lots of information is available online
view page
JavaScript Math Routines
Random Dice Rolls
Math.min Math.floorMath.ceilMath.roundMath.PIMath.E
Math.random function returns a realnumber in [0..1)
view page
User-Defined Functions
•^
function definitions are similar to C++/Java, except:
no return type for the function (since variables are loosely typed)
no variable typing for parameters (since variables are loosely typed)
by-value parameter passing only
(parameter gets copy of argument)
function isPrime(n)// Assumes: n > 0// Returns: true if n is prime, else false{
if (n < 2) {
Can limit variable scope to thefunction. if the first use of a variable is preceded
if (n < 2) {
return false; } else if (n == 2) {
return true; } else {
for (
var
i = 2; i <= Math.sqrt(n); i++) {
if (n % i == 0) {
return false; } } return true;
} }
if the first use of a variable is preceded with
var
, then that variable is local
to
the function for modularity, should make all variables in a function local
docsity.com
Function Example
Prime Tester
Function definitions
(usually) go in the
section
section is
loaded first, so thenthe function is defined before code
defined before code in the
is
executed (and,therefore, thefunction can beused later in thebody of the HTMLdocument)
view page
JavaScript Libraries
•^
better still: if you define functions that may be useful to many pages, store in aseparate library file and load the library when needed
•^
the file at
http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js
contains definitions of the following functions:
randomNum(low,
high)
returns random real in range [low..high)
randomInt
(low
high)
returns random integer in range [low..high)
randomInt
(low
high)
returns random integer in range [low..high)
randomChar(string)
returns random character from the string
randomOneOf([item1,…,itemN])
returns random item from list/array
Note: as with external style sheets,
do not put
Library Example
Random Dice Rolls Revisited
view page
String example: Palindromes
function strip(str)// Assumes: str is a string// Returns: str with all but letters removed{
var copy = "";for (var i = 0; i <
str.length
; i++) {
if ((
str.charAt(i)
>= "A" &&
str.charAt(i)
<= "Z") ||
(
str.charAt(i)
>= "a" &&
str.charAt(i)
<= "z")) {
copy +=
str.charAt(i)
;
} } return copy;
suppose we want totest whether a wordor phrase is apalindrome
noon
Radar
Madam, I'm Adam. A man, a plan, a canal:
return copy; } function isPalindrome(str)// Assumes: str is a string// Returns: true if str is a palindrome, else false{
str =
strip(str.toUpperCase())
;
for(var i = 0; i < Math.floor(
str.length
/2); i++) {
if (
str.charAt(i)
!=
str.charAt(str.length-i-1)
) {
return false; } } return true; }
A man, a plan, a canal:
Panama!
must strip non-letters out of theword or phrasemake all chars uppercase inorder to be case-insensitivefinally, traverse and comparechars from each end
Palindrome Checker^
view page
Array Example
Die Statistics
display each counter
view page
Arrays have predefined methods that allow them to be used as stacks,
queues, or other common programming data structures. var
stack
new
Array();
stack.push("blue");stack.push(12);
stack
is
now
the
array
["blue",
12]
stack.push("green");
stack
["blue",
"green"]
var
item
stack.pop();
item
is
now
equal
to
"green"
Arrays (cont.)
var
q
[1,2,3,4,5,6,7,8,9,10];
item
q.shift();
item
is
now
equal
to
remaining
elements
of
q
move
down
one
position
in
the
array,
i.e.
q[0]
equals
q.unshift(125);
q
is
now
the
array
[125,2,3,4,5,6,7,8,9,10]
q.push(244);
q
[125,2,3,4,5,6,7,8,9,10,244]
