Lec3-1 - Javascript

IT4409: Web Technologies and e-Services
2020-2
JavaScript
Instructor: Dr. Thanh-Chung Dao

Slides by Dr. Binh Minh Nguyen
Department of Information Systems

School of Information and Communication Technology
Hanoi University of Science and Technology
Content
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
1
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 or

another
• 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
Scripts vs. Programs
• 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-enabled browser
§ 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
JavaScript & JScript
JavaScript 1.5 & JScript 5.0 cores both conform to ECMAScript standard
VBScript: client-side scripting version of Microsoft Visual Basic

4
2
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
• 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
§ 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 <script> tags
§ the output of JavaScript code is displayed as if directly entered in HTML
<html> document.write displays text in the page

<!–- CS443 js01.html 16.08.06 -->
<head>
text to be displayed can include HTML
<title>JavaScript Page</title> tags
</head>
the tags are interpreted by the browser
<body> when the text is displayed
<script type="text/javascript">
// silly code to demonstrate output
document.write("<p>Hello world!</p>"); as in C++/Java, statements end with ;

but a line break might also be interpreted as
document.write(" <p>How are <br/> " +
" <i>you</i>?</p> ");
the end of a statement (depends upon
</script> browser)
<p>Here is some static text as well.</p>

JavaScript comments similar to C++/Java
</body>
</html>
// starts a single line comment
/*…*/ enclose multi-line comments

view page
3
JavaScript Data Types & Variables
• JavaScript has only three primitive data types
String : "foo" 'how do you do?' "I said 'hi'." ""
Number: 12 3.14159 1.5E6
Boolean : true false *Find info on Null, Undefined
assignments are as in C++/Java

<html>
<!–- CS443 js02.html 16.08.06 -->
message = "howdy";
<head> pi = 3.14159;
<title>Data Types and Variables</title>
</head> variable names are sequences of letters,
<body> digits, and underscores that start with a letter
<script type="text/javascript"> or an underscore
var x, y;
x= 1024;
variables names are case-sensitive
y=x; x = "foobar";
document.write("<p>x = " + y + "</p>"); you don't have to declare variables, will be
document.write("<p>x = " + x + "</p>");
</script> created the first time used, but it’s better if
</body> you use var statements
</html>
var message, pi=3.14159;
view page
variables are loosely typed, can be assigned
different types of values (Danger!)
7
JavaScript Operators & Control Statements
<html> standard C++/Java operators &

<!–- CS443 js03.html 08.10.10 --> control statements are provided
<head> in JavaScript
<title>Folding Puzzle</title> • +, -, *, /, %, ++, --, …
</head>
• ==, !=, <, >, <=, >=
<body> • &&, ||, !,===,!==
var distanceToSun = 93.3e6*5280*12; • if , if-else, switch
var thickness = .002;
• while, for, do-while, …
var foldCount = 0;
while (thickness < distanceToSun) {
thickness *= 2; PUZZLE: Suppose you took a piece
foldCount++; of paper and folded it in half, then in
}
document.write("Number of folds = " + half again, and so on.
foldCount);
</script>
</body>
How many folds before the thickness
</html> of the paper reaches from the earth to
the sun?
view page
*Lots of information is available online
4
JavaScript Math Routines
<html> the built-in Math
<!–- CS443 js04.html 08.10.10 -->
object contains
<head> functions and
<title>Random Dice Rolls</title> constants
</head>
<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; Math.min
document.write("<img src='http://www.csc.liv.ac.uk/"+ Math.floor
"~martin/teaching/CS443/Images/die" + Math.ceil
roll1 + ".gif‘ alt=‘dice showing ‘ + roll1 />"); Math.round
document.write("  ");
document.write("<img src='http://www.csc.liv.ac.uk/"+ Math.PI
"~martin/teaching/CS443/Images/die" + Math.E
roll2 + ".gif‘ alt=‘dice showing ‘ + roll2 />");
</script>
</div>
Math.random
</body> function returns a real
</html>
number in [0..1)
view page
Interactive Pages Using Prompt

crude user interaction can
<html>

take place using prompt
<head>
<title>Interactive page</title> 1st argument: the prompt
</head> message that appears in the
dialog box
<body>
var userName = prompt("What is your name?", ""); 2nd argument: a default value
that will appear in the box (in
var userAge = prompt("Your age?", ""); case the user enters nothing)
var userAge = parseFloat(userAge);
document.write("Hello " + userName + ".") the function returns the value

if (userAge < 18) { entered by the user in the
document.write(" Do your parents know " +
"you are online?");
dialog box (a string)
}
else { if value is a number, must use
document.write(" Welcome friend!"); parseFloat (or parseInt) to
}
</script> convert
<p>The rest of the page...</p>

</body> forms will provide a better
</html>
view page interface for interaction
(later)
10
5
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 Can limit variable scope to the
// Returns: true if n is prime, else false
{
function.
if (n < 2) {
return false; if the first use of a variable is preceded
} with var, then that variable is local to
else if (n == 2) {
return true;
the function
}
else { for modularity, should make all
for (var i = 2; i <= Math.sqrt(n); i++) { variables in a function local
if (n % i == 0) {
return false;
}
}
return true;
}
}
11
Function Example
<html>
<!–- CS443 js06.html 16.08.2006 -->
<head> Function definitions

<title>Prime Tester</title>
(usually) go in the
<script type="text/javascript"> <head> section
function isPrime(n)
// Assumes: n > 0
// Returns: true if n is prime <head> section is
{
// CODE AS SHOWN ON PREVIOUS SLIDE
loaded first, so then
} the function is
</script> defined before code
</head> in the <body> is
<body> executed (and,
<script type="text/javascript"> therefore, the
testNum = parseFloat(prompt("Enter a positive integer", "7"));
function can be
if (isPrime(testNum)) { used later in the
document.write(testNum + " <b>is</b> a prime number."); body of the HTML
} document)
else {
document.write(testNum + " <b>is not</b> a prime number.");
}
</script>
</body> view page
</html>
12
6
<html>
<!–- CS443 js07.html 11.10.2011 --> Another
<head>
<title> Random Dice Rolls Revisited</title> Example
function randomInt(low, high)
// Assumes: low <= high
// Returns: random integer in range [low..high]
{
return Math.floor(Math.random()*(high-low+1)) + low; recall the dynamic dice
} page
</script>
</head>
could define a function for
<body>
<div style="text-align: center">
generating random
<script type="text/javascript"> numbers in a range, then
roll1 = randomInt(1, 6); use whenever needed
roll2 = randomInt(1, 6);
document.write("<img src='http://www.csc.liv.ac.uk/"+ easier to remember,

"~martin/teaching/CS443/Images/die" + promotes reuse
roll1 + ".gif'/>");
document.write("<img src='http://www.csc.liv.ac.uk/"+
"~martin/teaching/CS443/Images/die" +
roll2 + ".gif'/>");
</script>
</div>
</body> view page
</html>
13
JavaScript Libraries
• 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>
14
7
Library Example
<html>
<!–- CS443 js08.html 11.10.2011 -->
<head>
<title> Random Dice Rolls Revisited</title>
src="random.js">
</script>
</head>
<body>
<div style="text-align: center">
roll1 + ".gif'/>");
roll2 + ".gif'/>");
</script>
</div>
</body> view page
</html>
15
JavaScript Objects
• 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 letters uppercase
toLowerCase() : returns copy of string with letters lowercase
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)
16
8
String example: Palindromes
function strip(str)
// Assumes: str is a string
suppose we want to
// Returns: str with all but letters removed test whether a word
{
var copy = ""; or phrase is a
for (var i = 0; i < str.length; i++) {
if ((str.charAt(i) >= "A" && str.charAt(i) <= "Z") ||
palindrome
(str.charAt(i) >= "a" && str.charAt(i) <= "z")) {
copy += str.charAt(i);
} noon Radar
} Madam, I'm Adam.
return copy; A man, a plan, a canal:
}
Panama!
function isPalindrome(str)
// Assumes: str is a string
// Returns: true if str is a palindrome, else false must strip non-letters out of the
{
str = strip(str.toUpperCase()); word or phrase
for(var i = 0; i < Math.floor(str.length/2); i++) { make all chars uppercase in

if (str.charAt(i) != str.charAt(str.length-i-1)) {
order to be case-insensitive
return false;
}
} finally, traverse and compare
return true; chars from each end
}
17
<html>
<!–- CS443 js09.html 11.10.2011 -->
<head>
<title>Palindrome Checker</title>
function strip(str)
{
}
function isPalindrome(str)
{
}
</script>
</head>
<body>
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> view page
</html>
18
9
JavaScript Arrays
• 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
}
19
Array Example
<html>
suppose we want to
<!–- CS443 js10.html 11.10.2011 -->
<head> simulate dice rolls and
<title>Dice Statistics</title> verify even distribution
src="http://www.csc.liv.ac.uk/~martin/teaching/CS443/JS/ran
dom.js"> keep an array of counters:
</script>
</head>
<body> initialize each count to 0
numRolls = 60000; each time you roll X,
diceSides = 6; increment rolls[X]
rolls = new Array(dieSides+1); display each counter

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> view page
</html>
20
10
Arrays (cont.)
• 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]
21
Date Object
• 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.getYear() can access individual components of a date

newYear.getMonth()
newYear.getDay()
newYear.getHours()
newYear.getMinutes()
newYear.getSeconds()
newYear.getMilliseconds()
22
11
<html>
Date Example
<!–- CS443 js11.html 16.08.2006 -->
<head>
<title>Time page</title>
</head>
by default, a date will be displayed in
<body> full, e.g.,
Time when page was loaded:
<script type="text/javascript"> Sun Feb 03 22:55:20 GMT-0600
now = new Date(); (Central Standard Time) 2002
document.write("<p>" + now + "</p>");
time = "AM"; can pull out portions of the date using

hours = now.getHours();
if (hours > 12) {
the methods and display as desired
hours -= 12;
time = "PM" here, determine if "AM" or "PM" and
} adjust so hour between 1-12
else if (hours == 0) {
hours = 12; 10:55:20 PM
}
document.write("<p>" + hours + ":" +
now.getMinutes() + ":" +
now.getSeconds() + " " +
time + "</p>");
</script>
</body>
</html>
view page
23
Another Example
<html>
<!–- CS443 js12.html 12.10.2012 -->
<head>
<title>Time page</title>
</head>
you can add and subtract Dates:
<body> the result is a number of
<p>Elapsed time in this year:
milliseconds
now = new Date();
newYear = new Date(2012,0,1); here, determine the number of
seconds since New Year's day
secs = Math.round((now-newYear)/1000);
(note: January is month 0)
days = Math.floor(secs / 86400);
secs -= days*86400; divide into number of days, hours,
hours = Math.floor(secs / 3600); minutes and seconds
secs -= hours*3600;
minutes = Math.floor(secs / 60);
secs -= minutes*60
document.write(days + " days, " +

hours + " hours, " +
minutes + " minutes, and " +
secs + " seconds.");
</script>
</p>
</body> view page
</html>
24
12
Document Object
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 -->
document.write(…)
<head>
<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"> location of the HTML
document.write(document.URL); document
</script>
</i></td>
<td style="text-align: right;"><i> document.lastModified
document.write(document.lastModified); property that gives the date &
</script>
time the HTML document was
</i></td> last changed
</tr>
</table>
</body>
</html> view page
25
User-Defined Objects
• can define new objects, but the notation can be somewhat awkward
§ simply define a function that serves as a constructor
§ specify data fields & methods using this
§ no data hiding: can't protect data or methods
// CS443 Die.js 11.10.2011 // define Die function (i.e.,

// Die class definition
//////////////////////////////////////////// the object's constructor)
function Die(sides) initialize data fields in the

{
function, preceded with
this.numSides = sides;
this.numRolls = 0; "this"
this.roll = roll; // define a pointer to a function
} similarly, assign method to
function roll()
separately defined function
{ (which uses this to access
this.numRolls++; data)
return Math.floor(Math.random()*this.numSides) + 1;
}
26
13
<html>
<!–- CS443 js15.html 11.10.2011 -->
Object Example
<head>
<title>Dice page</title>
<script type="text/javascript" create a Die object using new

src="Die.js"> (similar to String and Array)
</script>
</head>
here, the argument to Die
<body> initializes numSides for that
die6 = new Die(6);
particular object
die8 = new Die(8);
each Die object has its own
roll6 = -1; // dummy value to start loop properties (numSides &
roll8 = -2; // dummy value to start loop
while (roll6 != roll8) { numRolls)
roll6 = die6.roll();
roll8 = die8.roll(); Roll(), when called on a
particular Die, accesses its
document.write("6-sided: " + roll6 +
"    " + numSides property and
"8-sided: " + roll8 + "<br />"); updates its NumRolls
}
document.write("<br />Number of rolls: " +

die6.numRolls);
</script>
</body>
</html> view page
27
JavaScript and HTML validators

•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>
28
14
•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.
29
More to learn…
• Accessing elements on the page using JavaScript functions

• JavaScript and forms
• Events, capturing user input
• The Document Object Model, and manipulating the webpage
30
15
email: chungdt@soict.hust.edu.vn
Q&A
31
16

Lec3-1 - Javascript

Uploaded by

Copyright:

Available Formats

Lec3-1 - Javascript

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lec3-1 - Javascript

Uploaded by

Copyright:

Available Formats

IT4409: Web Technologies and e-Services

Instructor: Dr. Thanh-Chung Dao

Department of Information Systems

• HTML is good for developing static pages

§ in order to develop interactive/reactive pages, must integrate programming in some form or

Scripts vs. Programs

• a scripting language is a simple, interpreted programming language

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

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

JScript: Microsoft version of JavaScript, introduced in 1996

VBScript: client-side scripting version of Microsoft Visual Basic

• defining programs with Web interfaces

• limitations of client-side scripting

<html> document.write displays text in the page

document.write("<p>Hello world!</p>"); as in C++/Java, statements end with ;

<p>Here is some static text as well.</p>

/*…*/ enclose multi-line comments

assignments are as in C++/Java

JavaScript Operators & Control Statements

<html> standard C++/Java operators &

Interactive Pages Using Prompt

document.write("Hello " + userName + ".") the function returns the value

<p>The rest of the page...</p>

<head> Function definitions

document.write("<img src='http://www.csc.liv.ac.uk/"+ easier to remember,

• a String object encapsulates a sequence of characters, enclosed in quotes

properties/methods are called exactly as in C++/Java

for(var i = 0; i < Math.floor(str.length/2); i++) { make all chars uppercase in

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)

§ the length property stores the number of items in the array

rolls = new Array(dieSides+1); display each counter

for(i = 1; i <= numRolls; i++) {

for (i = 1; i < rolls.length; i++) {

var stack = new Array();

today = new Date(); // sets to current date & time

newYear = new Date(2002,0,1); //sets to Jan 1, 2002 12:00AM

newYear.getYear() can access individual components of a date

document.write("<p>" + now + "</p>");

time = "AM"; can pull out portions of the date using

document.write(days + " days, " +

§ no data hiding: can't protect data or methods

// CS443 Die.js 11.10.2011 // define Die function (i.e.,

function Die(sides) initialize data fields in the

<script type="text/javascript" create a Die object using new

document.write("<br />Number of rolls: " +

JavaScript and HTML validators

document.write(“<p>The quick brown fox jumped over the lazy dogs.</p>”);

• Accessing elements on the page using JavaScript functions

You might also like

/…/ enclose multi-line comments