Bài giảng Lập trình Web - Chapter 3: Introduction to Javascript

Chapter 3

Introduction to Javascript

Lectured by:

Nguyễn Hữu Hiếu

JavaScript

n JavaScript is the programming language of HTML

and the Web.

n Programming makes computers do what you want

them to do. JavaScript is easy to learn.

n This tutorial will teach you JavaScript from basic to

advanced.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

2

Why Study JavaScript?

n JavaScript is one of the 3 languages all web

developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behaviour of web

pages

n This lecture is about JavaScript, and how

JavaScript works with HTML and CSS.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

3

JavaScript Introduction

n JavaScript Can Change HTML Content

One of many HTML methods is getElementById().

n This example uses the method to "find" an HTML

element (with id="demo"), and changes the

element content (innerHTML) to "Hello JavaScript”:

document.getElementById("demo").innerHTML

= "Hello JavaScript”;

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

4

Example

<!DOCTYPE html>

<html>

<body>

<h1>What Can JavaScript Do?</h1>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button"

onclick="document.getElementById('demo').innerHTML =

'Hello JavaScript!'">

Click Me!

</button>

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

5

JavaScript Can Change HTML Attributes

This example changes an HTML image, by changing the src attribute of an

<img> tag:

<!DOCTYPE html><html>

<body>

<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100"

height="180”>

<p>Click the light bulb to turn on/off the light.</p>

function changeImage() {

var image = document.getElementById('myImage');

if (image.src.match("bulbon")) {

image.src = "pic_bulboff.gif"; } else {

image.src = "pic_bulbon.gif"; }

}

</script>

</body> </html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

6

JavaScript Can Change HTML Styles (CSS)

<!DOCTYPE html>

<html>

<body>

<h1>What Can JavaScript Do?</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

function myFunction() {

var x = document.getElementById("demo");

x.style.fontSize = "25px";

x.style.color = "red";

}

</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

7

JavaScript Can Validate Data

n

JavaScript is often used to validate input

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

8

Did You Know?

n JavaScript and Java are completely different

languages, both in concept and design.

n JavaScript was invented by Brendan Eich in 1995,

and became an ECMA standard in 1997.

n ECMA-262 is the official name. ECMAScript 5

(JavaScript 1.8.5 - July 2010) is the current

standard

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

9

JavaScript Where To

n JavaScript can be placed in the <body> and the

<head> sections of an HTML page.

n The <script> Tag In HTML, JavaScript code must

be inserted between <script> and </script> tag

document.getElementById("demo").innerHTML = "My First JavaScript”;

</script>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

10

JavaScript Functions and Events

n A JavaScript function is a block of JavaScript code,

that can be executed when "asked" for.

n For example, a function can be executed when an

event occurs, like when the user clicks a button.

n You will learn much more about functions and

events in later chapters.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

11

JavaScript in <head> or <body>

n You can place any number of scripts in an HTML

document.

n Scripts can be placed in the <body>, or in the

<head> section of an HTML page, or in both.

n Keeping all code in one place, is always a good

habit.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

12

JavaScript in <head>

n In this example, a JavaScript function is placed in

the <head> section of an HTML page.

n The function is invoked (called) when a button is

clicked:

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

13

Example

<!DOCTYPE html>

<html>

<head>

function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph

changed."; }

</script>

</head>

<body>

<p id="demo">A Paragraph</p>

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

14

JavaScript in <body>

n In this example, a JavaScript function is placed in

the <body> section of an HTML page.

n The function is invoked (called) when a button is

clicked:

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

15

Example

<!DOCTYPE html>

<html>

<body>

<p id="demo">A Paragraph</p>

function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph

changed."; }

</script>

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

16

External JavaScript

n

Scripts can also be placed in external files.

n

External scripts are practical when the same code is used in

many different web pages.

n

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in

the src (source)

attribute of the <script> tag:

<!DOCTYPE html>

<html>

<body>

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

17

External JavaScript

n

You can place an external script reference in <head> or

<body> as you like.

The script will behave as if it was located exactly where the

External scripts cannot contain <script> tags.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

18

External JavaScript Advantages

n Placing JavaScripts in external files has some

advantages:

n

It separates HTML and code

n

It makes HTML and JavaScript easier to read and

maintain

n

Cached JavaScript files can speed up page loads

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

19

JavaScript Output

n

JavaScript does not have any built-in print or display

functions.

n

JavaScript Display Possibilities JavaScript can "display" data

in different ways:

1. Writing into an alert box, using window.alert().

2. Writing into the HTML output using document.write().

3. Writing into an HTML element, using innerHTML.

4. Writing into the browser console, using console.log().

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

20

Bài giảng Lập trình Web - Chapter 3: Introduction to Javascript - Nguyễn Hữu Hiếu