Scribd
Upload
1 views

Lec 4-JavaScript

Uploaded by

Thành Chu Văn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

Lec 4-JavaScript

Uploaded by

Thành Chu Văn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

JavaScript

1
src: https://www.index.dev/blog/12-most-in-demand-programming-languages-to-learn-in-2023

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

2
Content

• Scripts
• common tasks for client-side scripts
• JavaScript
• data types & expressions
• control statements
• functions & libraries
• date, document, string, array, user-defined classes

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

3
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

• Client-side programming
• programs are written in a separate programming (or scripting)
language, e.g., JavaScript,
• programs are embedded in the HTML of a Web page, with
(HTML) tags to identify the program component
• 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

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

4
Common Scripting Tasks

• adding dynamic features to Web pages


• validation of form data
• 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
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

5
JavaScript/ ECMAScript

• ECMA International
• European Computer Manufacturers Association
• Non-profit organization that develops standards in
computer hardware, communications, and
programming languages.

• JavaScript: A general purpose scripting language that


conforms to the ECMAScript specification
• 1997: ECMA-262 standard
• 2023: ECMAScript 14

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

6
JavaScript

• Javascript is a lightweight, interpreted or just-in-time


compiled programming language
• Many non-browser environtments use it such as
Node.js, Apache CouchDB, Adobe Acrobat
• Client-side: JS can run on browsers as a scripting
language that allows you to create dynamically updating
content, control multimedia, animate images,…
• Server-side: JS can run on server side with the
appearance of NodeJS – a Javascript runtime
environment.

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

7
JavaScript

<html>
• Use <script> tag to add Javascript
<head> code to a page
<title>JavaScript Page</title>
</head> • document.write displays text in the
<body>
page
<script type="text/javascript"> § text to be displayed can include
// silly code to demonstrate output
HTML tags
document.write("<p>Hello world!</p>");
• JavaScript comments similar to
document.write(" <p>How are <br/> " + C++/Java
" <i>you</i>?</p> ");
</script> // starts a single line
<p>Here is some static text as well.</p>
comment
/*…*/ enclose multi-line
</body>
</html> comments

view page

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

8
JavaScript Data Types & Variables

<html> • JavaScript has 7 primitive data types


<!–- CS443 js02.html 16.08.06 -->
String : "foo" 'how do you do”
<head>
<title>Data Types and Number: 12 3.14159 1.5E6
Variables</title>
</head>
<body>
Bigint (ES2020, > 253 -1)
<script type="text/javascript">
var x, y;
Boolean : true false
x= 1024;
y=x; x = "foobar";
Undefined: undefined
document.write("<p>x = " + y +
"</p>");
Symbol: s = Symbol(‘first name’);
document.write("<p>x = " + x +
"</p>");
null: null
</script>
</body>
</html>
variable names are sequences of
view page letters, digits, an underscores that start
with a letter or an underscore, case
sensitive

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

9
JavaScript Declaration

• var: function scope or global scope

• let: block scope

• const: same as let, except the user cannot update it

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

10
JavaScript Operators & Control Statements

<html>
<head>
standard C++/Java operators &
<title>Folding Puzzle</title> control statements are provided in
</head> JavaScript
<body>
• +, -, *, /, %, ++, --, …
<script type="text/javascript"> • ==, !=, <, >, <=, >=
const distanceToSun =
93.3e6*5280*12;
• &&, ||, !,===,!==
let thickness = .002; • if , if-else, switch
let foldCount = 0;
while (thickness < distanceToSun) • while, for, do-while, …
{
thickness *= 2;
foldCount++; PUZZLE: Suppose you took a piece
} of paper and folded it in half, then in
document.write("Number of folds = half again, and so on.
" + foldCount);
How many folds before the thickness
</script>
</body> of the paper reaches from the earth
</html> to the sun?
view page

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

11
Interactive Pages Using Prompt

<html>
<head>
<title>Interactive page</title> crude user interaction can take
</head> place using prompt
<body>
<script type="text/javascript"> 1st argument: the prompt
let userName = prompt("What is your
message that appears in the
name?", "");
let userAge = prompt("Your age?", ""); dialog box
let userAge = parseFloat(userAge);
document.write("Hello " + userName + 2nd argument: a default value
".") 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
else { entered by the user in the
document.write(" Welcome dialog box (a string)
friend!");
} if value is a number, must use
</script> parseFloat (or parseInt) to
<p>The rest of the page...</p> convert
</body>
</html> view page
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

12
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) {
return false;
}
else if (n == 2) {
return true;
}
else {
for (let i = 2; i <= Math.sqrt(n); i++) {
if (n % i == 0) {
return false;
}
}
return true;
}
}
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

13
Function Example

<html>
<head>
<title>Prime Tester</title>
<script type="text/javascript">
function isPrime(n)
// Assumes: n > 0
// Returns: true if n is prime
{
// CODE AS SHOWN ON PREVIOUS SLIDE Function definitions (usually) go in
}
the <head> section
</script>
</head>
<body>
<script type="text/javascript"> <head> section is loaded first, so
testNum = parseFloat(prompt("Enter a positive then the function is defined before
integer", "7")); code in the <body> is executed
if (isPrime(testNum)) {
document.write(testNum + " <b>is</b> a prime
number.");
}
else {
document.write(testNum + " <b>is not</b> a prime
number.");
}
</script>
</body>
</html>
view page

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

14
Another Example

<html>
<head>
<title> Random Dice Rolls Revisited</title>
<script type="text/javascript">
function randomInt(low, high)
// Assumes: low <= high
// Returns: random integer in range [low..high]
{
return Math.floor(Math.random()*(high-low+1)) + low;
}
</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> view page
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

15
Callback Function

• We can pass functions as parameters to other functions and call


them inside the outer function

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

16
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>

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

17
Library Example

<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>

view page

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

18
Objects

Objects are used to store keyed collections of various data and more
complex entities. An object contains list of properties. A property is a
“key:value” pair, where key is a string and value can be anything.

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology
Objects

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology
Objects

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology
Object references

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology
Garbage collection

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology
Garbage collection

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology
Garbage collection

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology
String Object

• 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
• 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)

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

26
String example: Palindromes

function strip(str)
// Assumes: str is a string suppose we want to test whether a
// Returns: str with all but letters removed
{
word or phrase is a palindrome
let copy = "";
for (let i = 0; i < str.length; i++) {
if ((str.charAt(i) >= "A" && str.charAt(i) <= "Z") noon Radar
|| Madam, I'm Adam.
(str.charAt(i) >= "a" && str.charAt(i) <= "z"))
{
copy += str.charAt(i);
}
} must strip non-letters out of the word or
return copy; phrase
}

function isPalindrome(str) make all chars uppercase in order to be


// Assumes: str is a string
// Returns: true if str is a palindrome, else false
case-insensitive
{
str = strip(str.toUpperCase());
finally, traverse and compare chars from
for(let i = 0; i < Math.floor(str.length/2); i++) { each end
if (str.charAt(i) != str.charAt(str.length-i-1)) {
return false;
}
}
return true;
}

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

27
<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>
view page

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

28
Math Object

<html> the built-in Math object contains


<!–- CS443 js04.html 08.10.10 -->
<head> functions and constants
<title>Random Dice Rolls</title>
</head>
<body>
Math.sqrt
<div style="text-align:center"> Math.pow
<script type="text/javascript">
let roll1 = Math.floor(Math.random()*6) + 1;
Math.abs
let roll2 = Math.floor(Math.random()*6) + 1; Math.max
document.write("<img Math.min
src='http://www.csc.liv.ac.uk/"+
"~martin/teaching/CS443/Images/die" + Math.floor
roll1 + ".gif‘ alt=‘dice showing ‘ + Math.ceil
roll1 />");
document.write("&nbsp;&nbsp;");
Math.round
document.write("<img
src='http://www.csc.liv.ac.uk/"+
"~martin/teaching/CS443/Images/die" +
Math.PI
roll2 + ".gif‘ alt=‘dice showing ‘ + Math.E
roll2 />");
</script>
</div> Math.random function returns a real
</body>
</html>
number in [0..1)
view page

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

29
Math Object

• ceil(4.7)=? 5
• floor(4.7)=? 4
• round(4.7)=? 5

• ceil(4.2)=? 5
• floor(4.2)=? 4
• round(4.2)=? 4

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

30
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
}

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

31
Array Example
<html>
<head>
<title>Dice Statistics</title>
<script type="text/javascript"
src="http://www.csc.liv.ac.uk/~martin/teaching/CS4
43/JS/random.js">
</script>
</head>
<body> suppose we want to
<script type="text/javascript"> simulate dice rolls and verify
const numRolls = 60000; even distribution
const diceSides = 6;
let rolls = new Array(dieSides+1);
for (i = 1; i < rolls.length; i++) { keep an array of counters:
rolls[i] = 0;
} -initialize each count to 0
for(i = 1; i <= numRolls; i++) {
rolls[randomInt(1, dieSides)]++; -each time you roll X,
} increment rolls[X]
for (i = 1; i < rolls.length; i++) {
document.write("Number of " + i + "'s = "
+ -display each counter
rolls[i] + "<br />");
}
</script> view page
</body>TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

</html>School of Inform ation and Com m unication Technology

32
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]

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

33
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.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)

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

34
Date Example
<html>
<!–- CS443 js11.html 16.08.2006 -->
<head>
<title>Time page</title>
</head> by default, a date will be displayed
<body>
in full, e.g.,
Time when page was loaded:
<script type="text/javascript">
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) { can pull out portions of the date
hours -= 12;
using the methods and display as
time = "PM"
} desired
else if (hours == 0) {
hours = 12; here, determine if "AM" or "PM"
} and adjust so hour between 1-12
document.write("<p>" + hours + ":" +
now.getMinutes() + ":" + 10:55:20 PM
now.getSeconds() + " " +
time + "</p>");
</script>
</body>
</html> view page
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

35
Another Example
<html>
<!–- CS443 js12.html 12.10.2012 -->
<head>
<title>Time page</title>
</head>
<body>
<p>Elapsed time in this year:
<script type="text/javascript">
now = new Date(); you can add and subtract Dates:
newYear = new Date(2012,0,1); the result is a number of
secs = Math.round((now-newYear)/1000); milliseconds
days = Math.floor(secs / 86400);
secs -= days*86400; here, determine the number of
hours = Math.floor(secs / 3600); seconds since New Year's day
secs -= hours*3600;
minutes = Math.floor(secs / 60);
(note: January is month 0)
secs -= minutes*60
document.write(days + " days, " + divide into number of days,
hours + " hours, " + hours, minutes and seconds
minutes + " minutes,
and " +
secs + " seconds.");
</script>
</p>
</body>
</html>
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG view page
School of Inform ation and Com m unication Technology

36
Document Object

Internet Explorer, Firefox, Opera, etc. allow you to access information


about an HTML document using the document object
<html> document.write(…)
<!–- CS443 js13.html 2.10.2012 -->
<head> method that displays text in the
<title>Documentation page</title> page
</head>
<body>
<table width="100%"> document.URL
<tr>
<td><i> property that gives the location of
<script type="text/javascript"> the HTML document
document.write(document.URL);
</script>
</i></td>
document.lastModified
<td style="text-align: right;"><i>
<script type="text/javascript"> property that gives the date & time
document.write(document.lastModified); the HTML document was last
</script>
</i></td> changed
</tr>
</table>
</body>
</html> view page

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

37
User-Defined Objects

• User can create a class by using keyword “class”

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

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

view page
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

39
• Ex 1. Complete 09 exercises of section DOM at:
https://www.w3schools.com/js/exercise_js.asp
•
Ex 2. Create a registration page including full name, phone number,
and email. Use JavaScript to check users’ inputs:
• Name: is not empty
• Phone number: contains 10 or 11 numbers
• Email: follows email address format
• Ex 3. Complete 16 exercises of section Basic Algorithm Scripting
at:

• https://www.freecodecamp.org/learn/javascript-algorithms-and-
data-structures/

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

40

You might also like