Scribd
Upload
7 views42 pages

Lec4 JavaScript

The document provides an overview of client-side programming with JavaScript, detailing its features, syntax, and capabilities compared to other scripting languages like JScript and VBScript. It covers essential topics such as data types, control statements, functions, and the integration of JavaScript within HTML to create dynamic web pages. Additionally, it discusses limitations of client-side scripting and includes examples of JavaScript code for various functionalities.

Uploaded by

tminh250404
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views42 pages

Lec4 JavaScript

The document provides an overview of client-side programming with JavaScript, detailing its features, syntax, and capabilities compared to other scripting languages like JScript and VBScript. It covers essential topics such as data types, control statements, functions, and the integration of JavaScript within HTML to create dynamic web pages. Additionally, it discusses limitations of client-side scripting and includes examples of JavaScript code for various functionalities.

Uploaded by

tminh250404
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

Client-side programming with

JavaScript
 scripts vs. programs
 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
 HTML is good for developing static pages
 can specify text/image layout, presentation, links, …
 Web page looks the same each time it is accessed

 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 the program component
e.g., <script type="text/javascript"> … </script>

 the browser executes the program as it loads the page, integrating


the dynamic output of the program with the static content of HTML
 could also allow the user (client) to input information and process it,
might be used to validate input before it’s submitted to a remote
server
 A scripting language is a simple, interpreted programming language

 scripts are embedded as plain text, interpreted by application

 simpler execution model: don't need compiler or development environment

 saves bandwidth: source code is downloaded, not compiled executable

 platform-independence: code interpreted by any script-enabledbrowser

 but: slower than compiled code, not as powerful/full-featured

JavaScript: the first Web scripting language, developed by Netscape in


1995 syntactic similarities to Java/C++, but simpler, more flexible in
some respects, limited in others (loose typing, dynamic variables, simple
objects)

JScript: Microsoft version of JavaScript, introduced in 1996


• same core language, but some browser-specific differences
• fortunately, IE, Netscape, Firefox, etc. can (mostly) handle both
VBScript: client-side scripting version of Microsoft Visual Basic
 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
 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 platform specific commands
 JavaScript code can be embedded in a Web page using <script> tags
 the output of JavaScript code is displayed as if directly entered in HTML
<html>
<!–- CS443 js01.html 16.08.06 -->
document.write displays text in the
page.
<head>
<title>JavaScript Page</title> - text to be displayed can include HTML
</head> tags the tags are interpreted by the
browser when the text is displayed as in
<body>
<script type="text/javascript"> C++/Java, statements end with ; but a
// silly code to demonstrate output line break might also be interpreted as
document.write("<p>Hello
the end of a statement (depends upon
world!</p>"); browser)
document.write(" <p>How are <br/> "
+" <i>you</i>?</p> ");
</script> JavaScript comments similar to
C++/Java
<p>Here is some static text as
well.</p> // starts a single line
comment
</body> /*…*/ enclose multi-line
</html>
comments
 JavaScript has only three primitive data types
String : "foo" 'how do you do?' "I said 'hi'." ""
Number: 12 3.14159 1.5E6
Boolean : false true *Find info on Null, Undefined

<html> assignments are as in C++/Java


<!–- CS443 js02.html 16.08.06 -->
message = "howdy";
<head> pi = 3.14159;
<title>Data Types and
Variables</title> variable names are sequences of letters,
</head> digits, and underscores that start with a
<body>
letter or an underscore variables names
<script type="text/javascript">
var x, y; are case-sensitive
x= 1024;
y=x; x = "foobar"; you don't have to declare variables, will
document.write("<p>x = " + y + be created the first time used, but it’s
"</p>"); better if you use var statements
document.write("<p>x = " + x +
"</p>");
</script> var message, pi=3.14159;
</body>
</html> variables are loosely typed, can be
assigned different types of values
(Danger!)
JAVASCRIPT OPERATORS & CONTROL STATEMENTS
<html>
standard C++/Java operators &
<!–- CS443 js03.html 08.10.10 --> control statements are
<head>
provided in JavaScript
<title>Folding Puzzle</title> • +, -, *, /, %, ++, --, …
</head> • ==, !=, <, >, <=, >=
• &&, ||, !,===,!==
<body>
<script type="text/javascript"> • if , if-else, switch
var distanceToSun = 93.3e6*5280*12;
var thickness = .002; • while, for, do-while, …
var foldCount = 0;
while (thickness < distanceToSun) { PUZZLE: Suppose you took a
thickness *= 2; piece of paper and folded it in
foldCount++;
} half, then in half again, and so
document.write("Number of folds = " + on.
foldCount);
</script>
</body> How many folds before the
</html> thickness of the paper reaches
from the earth to the sun?

*Lots of information is available


online
JAVASCRIPT MATH ROUTINES
<html>
<!–- CS443 js04.html 08.10.10 -->
the built-in Math object
<head> contains functions and
<title>Random Dice Rolls</title>
</head> constants
<body> Math.sqrt
<div style="text-align:center"> Math.pow
<script type="text/javascript"> Math.abs
var roll1 = Math.floor(Math.random()*6) + 1; Math.max
var roll2 = Math.floor(Math.random()*6) + 1;
document.write("<img
Math.min
src='http://www.csc.liv.ac.uk/"+ Math.floor
"~martin/teaching/CS443/Images/die" + Math.ceil
roll1 + ".gif‘ alt=‘dice showing ‘ + Math.round
roll1 />");
document.write("&nbsp;&nbsp;");
document.write("<img Math.PI
src='http://www.csc.liv.ac.uk/"+ Math.E
"~martin/teaching/CS443/Images/die" +
roll2 + ".gif‘ alt=‘dice showing ‘ +
roll2 />"); Math.randomfunction returns
</script> a real number in [0..1)
</div>
</body>
</html>
<html>
<!-- CS443 js05.html 08.10.10 --> crude user interaction can
<head>
<title>Interactive page</title>
take place using prompt
</head>
<body>
<script type="text/javascript">
1st argument: the prompt
var userName = prompt("What is your name?", message that appears in the
""); dialog box
var userAge = prompt("Your age?", "");
var userAge = parseFloat(userAge);
2nd argument: a default value
document.write("Hello " + userName + ".") that will appear in the box (in
if (userAge < 18) { case the user enters nothing)
document.write(" Do your parents know "
+ "you are online?");
the function returns the value
} entered by the user in the
else { dialog box (a string)
document.write(" Welcome friend!");
}
if value is a number, must
</script> use parseFloat (or
<p>The rest of the page...</p> parseInt) to convert
</body>
</html> forms will provide a better
interface for interaction (later)
 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 Can limit variable scope
// Returns: true if n is prime, else false to the function.
{
if (n < 2) { if the first use of a variable
return false;
is preceded with var, then
}
else if (n == 2) {
that variable is local to the
return true; function
}
else {
for (var i = 2; i <= Math.sqrt(n); i++) {
if (n % i == 0) {
for modularity, should
return false; make all variables in
} a function local
}
return true;
}
}
<html>
<!–- CS443 js06.html 16.08.2006 --> Function
<head> definitions
<title>Prime Tester</title>
<script type="text/javascript"> (usually) go in
function isPrime(n) the
// Assumes: n > 0
// Returns: true if n is prime <head>
{ section
// CODE AS SHOWN ON PREVIOUS SLIDE
} <head> section is
</script> loaded first, so then
</head>
<body>
the function is
<script type="text/javascript"> defined before code in
testNum = parseFloat(prompt("Enter a positive integer", the
"7"));
if (isPrime(testNum)) { <body> is executed
document.write(testNum + " <b>is</b> a prime number."); (and, therefore, the
} function can
else {
document.write(testNum + " <b>is not</b> a prime be used later in the
number."); body of the HTML
} document)
</script>
</body>
</html>
<html>
<!–- CS443 js07.html 11.10.2011 --> recall the dynamic dice
<head>
<title> Random Dice Rolls Revisited</title> page could define a
<script type="text/javascript"> function for generating
function randomInt(low, high)
// Assumes: low <= high random numbers in a
// Returns: random integer in range [low..high] range, then use
{
return Math.floor(Math.random()*(high-low+1)) + low;
whenever needed
} easier to remember,
</script> promotes reuse
</head>
<body>
<div style="text-align: center">
<script type="text/javascript">
roll1 = randomInt(1, 6);
roll2 = randomInt(1, 6);
document.write("<img src='http://www.csc.liv.ac.uk/"+
"~martin/teaching/CS443/Images/die" +
roll1 + ".gif'/>");
document.write("&nbsp;&nbsp;");
document.write("<img src='http://www.csc.liv.ac.uk/"+
"~martin/teaching/CS443/Images/die" +
roll2 + ".gif'/>");
</script>
</div>
</body>
</html>
better still: if you define functions that may be useful
to many pages, store in a separate library file and
load the library when needed load a library using the
SRC attribute in the SCRIPT tag (put nothing between
the beginning and ending tags)

<script type="text/javascript"
src="random.js">
</script>
<html>
<!–- CS443 js08.html 11.10.2011 -->
<head>
<title> Random Dice Rolls Revisited</title>
<script type="text/javascript"
src="random.js">
</script>
</head>
<body>
<div style="text-align: center">
<script type="text/javascript">
roll1 = randomInt(1, 6);
roll2 = randomInt(1, 6);
document.write("<img src='http://www.csc.liv.ac.uk/"+
"~martin/teaching/CS443/Images/die" +
roll1 + ".gif'/>");
document.write("&nbsp;&nbsp;");
document.write("<img src='http://www.csc.liv.ac.uk/"+
"~martin/teaching/CS443/Images/die" +
roll2 + ".gif'/>");
</script>
</div>
</body>
</html>
 an object defines a new type (formally, Abstract Data Type)
 encapsulates data (properties) and operations on that data (methods)
 a String object encapsulates a sequence of characters, enclosed in quotes
properties include
• length : stores the number of characters in the string
methods include
• charAt(index): returns the character stored at the given
index (as in C++/Java, indices start at 0)
• substring(start, end) : returns the part of the string
between the start (inclusive) and end (exclusive) indices
• toUpperCase() : returns copy of string with
uppercase letters
• toLowerCase()
lowercase : returns copy of string with
letters
to create a string, assign using new or (in this case) just make a direct
assignment (new is implicit)
word = new String("foo"); word = "foo";
properties/methods are called exactly as in C++/Java
• word.length word.charAt(0)
function strip(str)
// Assumes: str is a string suppose we want to
// Returns: str with all but letters removed test whether a word or
{
var copy = ""; phrase is a palindrome
for (var i = 0; i < str.length; i++) {
if ((str.charAt(i) >= "A" && str.charAt(i) <= "Z")
|| noon Radar
(str.charAt(i) >= "a" && str.charAt(i) <= "z")) Madam, I'm
{
Adam.
copy += str.charAt(i);
} A man, a plan, a
} canal: Panama!
return copy;
}

function isPalindrome(str) must strip non-letters out of the


// Assumes: str is a string word or phrase
// Returns: true if str is a palindrome, else false
{
str = strim(str.toUpperCase()); make all chars uppercase in
order to be case-insensitive
for(var i = 0; i < Math.floor(str.length/2); i++) {
if (str.charAt(i) != str.charAt(str.length-i-1)) {
return false; finally, traverse and
} compare chars from each
} end
return true;
}
<html>
<!–- CS443 js09.html 11.10.2011 -->
<head>
<title>Palindrome Checker</title>
<script type="text/javascript">
function strip(str)
{
// CODE AS SHOWN ON PREVIOUS SLIDE
}
function isPalindrome(str)
{
// CODE AS SHOWN ON PREVIOUS SLIDE
}
</script>
</head>
<body>
<script type="text/javascript">
text = prompt("Enter a word or phrase", "Madam, I'm Adam");
if (isPalindrome(text)) {
document.write("'" + text + "' <b>is</b> a palindrome.");
}
else {
document.write("'" + text + "' <b>is not</b> a
palindrome.");
}
</script>
</body>
</html>
 arrays store a sequence of items, accessible via an index
since JavaScript is loosely typed, elements do not have to be the same
type
 to create an array, allocate space using new (or can assign directly)

items = new Array(10); // allocates space for 10 items


items = new Array(); // if no size given, will adjust dynamically
items = [0,0,0,0,0,0,0,0,0,0]; // can assign size & values []

 to access an array element, use [] (as in C++/Java)


for (i = 0; i < 10; i++) {
items[i] = 0; // stores 0 at each index
}

 the length property stores the number of items in the


array
for (i = 0; i < items.length; i++) {
document.write(items[i] + "<br>"); // displays elements
}
<html>
<!–- CS443 js10.html 11.10.2011 -->
<head>
<title>Dice Statistics</title> suppose we want to
<script type="text/javascript"
src="http://www.csc.liv.ac.uk/~martin/teaching/CS443/JS/rand
simulate dice rolls and
om.js"> verify even
</script>
</head> distribution
<body>
<script type="text/javascript">
numRolls = 60000;
diceSides = 6;
rolls = new Array(dieSides+1);
for (i = 1; i < rolls.length; i++) {
rolls[i] = 0;
}
for(i = 1; i <= numRolls; i++) {
rolls[randomInt(1, dieSides)]++;
}
for (i = 1; i < rolls.length; i++) {
document.write("Number of " + i + "'s = " +
rolls[i] + "<br />");
}
</script>
</body>
</html> 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", 12, "green"]
var item = stack.pop(); // item is now equal to "green"

var q = [1,2,3,4,5,6,7,8,9,10];
item = q.shift(); // item is now equal to 1, remaining
// elements of q move down one position
// in the array, e.g. q[0] equals 2
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]
 String & Array are the most commonly used objects in JavaScript
 other, special purpose objects also exist
 the Date object can be used to access the date and time
 to create a Date object, use new & supply year/month/day/… as
desired
today = new Date(); // sets to current date & time
newYear = new Date(2002,0,1); //sets to Jan 1, 2002 12:00AM
 methods include:
newYear.getFullYear() can access individual components of a date
newYear.getMonth() number (0, 11)
newYear.getDay() number (1, 31)
newYear.getHours() number (0, 23)
newYear.getMinutes() number (0, 59)
newYear.getSeconds() number (0, 59)
newYear.getMilliseconds() number (0, 999)
DATE EXAMPLE
<html>
<!–- CS443 js11.html 16.08.2006 -->
<head>
<title>Time page</title>
</head>
<body> by default, a date will be
Time when page was loaded:
<script type="text/javascript">
displayed in full, e.g.,
now = new Date(); Sun Feb 03 22:55:20 GMT-0600
document.write("<p>" + now + "</p>"); (Central Standard Time) 2002
time = "AM";
hours = now.getHours();
if (hours > 12) {
hours -= 12; can pull out portions of the date
time = "PM" using the methods and display
}
else if (hours == 0) {
as desired
hours = 12;
}
here, determine if "AM" or "PM"
document.write("<p>" + hours + ":" + and adjust so hour between 1-12
now.getMinutes() + ":" + 10:55:20 PM
now.getSeconds() + " " +
time + "</p>");
</script>
</body>
</html>
ANOTHER EXAMPLE
<html>
<!–- CS443 js12.html 12.10.2012 -->
<head>
<title>Time page</title>
</head> you can add and subtract
<body> Dates:
<p>Elapsed time in this year:
<script type="text/javascript">
the result is a number of
now = new Date(); milliseconds
newYear = new Date(2012,0,1);
secs = Math.round((now-newYear)/1000); here, determine the
days = Math.floor(secs / 86400); number of seconds since
secs -= days*86400;
hours = Math.floor(secs / 3600); New Year's day (note:
secs -= hours*3600; January is month 0)
minutes = Math.floor(secs / 60);
secs -= minutes*60 divide into number of days,
document.write(days + " days, " + hours, minutes and seconds
hours + " hours, " +
minutes + " minutes, and " +
secs + " seconds.");
</script>
</p>
</body>
</html>
Internet Explorer, Firefox, Opera, etc. allow you to access
information about an HTML document using the document object
<html>
<!–- CS443 js13.html 2.10.2012 -->
<head>
document.write(…)
<title>Documentation page</title> method that displays text in
</head> the page
<body>
<table width="100%">
<tr>
document.URL
<td><i> property that gives the
<script type="text/javascript">
document.write(document.URL); location of the HTML
</script> document
</i></td>
<td style="text-align: right;"><i> document.lastModified
<script type="text/javascript">
document.write(document.lastModified); property that gives the date
</script>
</i></td>
& time the HTML
</tr> document was last
</table>
</body>
changed
</html>
<html>
<!–- CS443 js14.html 16.08.2006 -->
navigator.appName
<head>
property that gives <title>Dynamic Style Page</title>
the browser name
<script type="text/javascript">
navigator.appVer if (navigator.appName ==
sion property that "Netscape") {
gives the browser document.write('<link
version rel=stylesheet '+
'type="text/css"
<!-- MSIE.css --> href="Netscape.css">');
}
<!-- Netscape.css else {
a {text-
--> document.write('<link
decoration:none;
rel=stylesheet ' +
font- 'type="text/css"
a {font- size:larger;
family:Arial; href="MSIE.css">');
color:red;
color:white; }
font-
background- </script>
family:Arial} </head>
color:red} a:hover
{color:blue}
<body>
Here is some text with a
<a href="javascript:alert('GO
AWAY')">link</a>.
</body>
</html>
•In order to use an HTML validator, and not get error messages from
the JavaScript portions, you must “mark” the JavaScipt sections in a
particular manner. Otherwise the validator will try to interpret the
script as HTML code.

•To do this, you can use a markup like the following in your inline code
(this isn’t necessary for scripts stored in external files).

<script type=“text/javascript”>
// <![CDATA[

document.write(“<p>The quick brown fox jumped over the lazy


dogs.</p>”);
// **more code here, etc.

// ]]>
</script>
•Since the (new) XHTML standard is written as an XML application,
validators such as the one from the W3C are actually attempting to
check an XML document for the correct structure.

•The two tags <![CDATA[ and ]]> together form an XML directive,
meaning to interpret the data between them as literal (non-parsed)
“character data”. An XML validator will effectively ignore the data
between these two tags, meaning that any symbols that would result
in an invalid document structure are ignored and do not result in an
error message from the validator.

•Because we are using these tags inside of a JavaScript block, and


they are not JavaScript commands, we precede each of them with
a (JavaScript) comment marker, hence the two forward slashes
before each tag.
 Accessing elements on the page using
JavaScript functions
 JavaScript and forms
 Events, capturing user input
 The Document Object Model, and
manipulating the webpage
 In JavaScript, all numbers are floating point
 Special predefined numbers:
 Infinity, Number.POSITIVE_INFINITY -- the result of
dividing a positive number by zero
 Number.NEGATIVE_INFINITY -- the result of dividing a
negative number by zero
 NaN, Number.NaN (Not a Number) -- the result of dividing
0/0
• NaN is unequal to everything, even itself
• There is a global isNaN() function
 Number.MAX_VALUE -- the largest representable number
 Number.MIN_VALUE -- the smallest (closest to
zero) representable number
 In JavaScript, string is a primitive type
 Strings are surrounded by either single
quotes or double quotes
 There is no “character” type
 Special characters are:
\0 NUL \v vertical tab
\b backspace \' single quote
\f form feed \" double quote
\n newline \\ backslash
\r carriage return \xDD Unicode hex DD
\t horizontal tab \xDDDD Unicode hex DDDD
 charAt(n)
 Returns the nth character of a string
 concat(string1, ..., stringN)
 Concatenates the string arguments to the recipient string
 indexOf(substring)
 Returns the position of the first character of substring in
the recipient string, or -1 if not found
 indexOf(substring, start)
 Returns the position of the first character of substring in the
given string that begins at or after position start, or -1 if not
found
 lastIndexOf(substring), lastIndexOf(substring,
start)
 Like indexOf, but searching starts from the end of the recipient
string
 match(regexp)
 Returns an array containing the results, or null if no match
is found
 On a successful match:
• If g (global) is set, the array contains the matched substrings
• If g is not set:
• Array location 0 contains the matched text
• Locations 1... contain text matched by parenthesized groups
• The array index property gives the first matched position
 replace(regexp, replacement)
 Returns a new string that has the matched substring
replaced with the replacement
 search(regexp)
 Returns the position of the first matched substring in
the given string, or -1 if not found.
 The boolean values are true and false
 When converted to a boolean, the
following values are also false:
 0
 "0" and '0'
 The empty string, '' or ""
 undefined
 null
 NaN
 There are special values undefined and null
 undefined is the only value of its “type”
 This is the value of a variable that has been declared but
not defined, or an object property that does not exist
 void is an operator that, applied to any value, returns
the value undefined
 null is an “object” with no properties
 null and undefined are == but not ===
 As in C and Java, there are no
“true” multidimensional arrays
 However, an array can contain arrays
 The syntax for array reference is as in C
and Java
 Example:
var a = [ ["red", 255], ["green", 128] ];
var b = a[1][0]; // b is now "green"
var c = a[1]; // c is now ["green", 128]
var d = c[1]; // d is now 128
 The unary operator typeof returns one of
the following strings: "number", "string",
"boolean", "object", "undefined", and
"function"
 typeof null is "object"
 If myArray is an array, typeof myArray is "object"
 JavaScript has “wrapper” objects for when a
primitive value must be treated as an object
 var s = new String("Hello"); // s is now a String
 var n = new Number(5); // n is now a Number
 var b = new Boolean(true); // b is now a Boolean
 Because JavaScript does automatic conversions as
needed, wrapper objects are hardly ever needed
 JavaScript has no “casts,” but conversions can be
forced
 var s = x + ""; // s is now a string
 var n = x + 0; // n is now a number
 var b = !!x; // b is now a boolean
 Because JavaScript does automatic conversions as needed,
explicit conversions are hardly ever needed
 Every variable is a property of an object
 When JavaScript starts, it creates a global object
 In client-side JavaScript, the window is the global
object
 It can be referred to as window or as this
 The “built-in” variables and methods are defined here
 There can be more than one “global” object
 For example, one frame can refer to another frame with
code such as parent.frames[1]
 Local variables in a function are properties of a
special call object
 In HTML the window is the global object
 It is assumed that all variables are properties of this object, or
of some object descended from this object
 The most important window property is document
 HTML form elements can be referred to by
document.forms[formNumber].elements[elementNumber]
 Every HTML form element has a name attribute
 The name can be used in place of the array reference
 Hence, if
• <form name="myForm">
<input type="button" name="myButton" ...>
• Then instead of document.forms[0].elements[0]
• you can say document.myForm.myButton
 A variable is local to a function if
 It is a formal parameter of the function
 It is declared with var inside the function (e.g. var x = 5)
 Otherwise, variables are global
 Specifically, a variable is global if
 It is declared outside any function (with or without var)
 It is declared by assignment inside a function (e.g. x = 5)
 When a function is a property of an object,
we call it a “method”
 A method can be invoked by
either of call(object, arg1,
..., argN) or
apply(object, [arg1, ..., argN])
 call and apply are defined for all functions
• call takes any number of arguments
• apply takes an array of arguments
 Inside the funcBoth allow you to invoke a function as
if it were a method of some other object, object
 tion, the keyword this refers to the object

You might also like