Bai 09

INTERNET VÀ CÔNG NGHỆ WEB
Phần 3:JavaScritp
Mục Tiêu Của Bài Học
 Mục Tiêu
• Cung cấp kiến thức về ngôn ngữ lập trình Javascript
• Cung cấp kiến thức về các đối tượng trong javascript
• Sử dụng Javascript trên Website
 Sau khi hoàn thành bài học, sinh viên có thể

• Nắm bắt ngôn ngữ lập trình Javascript
• Sử dụng được Javascript
2
Nội Dung Bài Học
Bài 1 : Ngôn ngữ lập trình JavaScript
I. Giới thiệu tổng quan về JavaScript
II. Một số hộp thoại cơ bản – Popup Boxes
III. Sử dụng JavaScript trong trang HTML
IV. Ngôn ngữ lập trình JavaScript
Bài 2: Các đối tượng trong JavaScript
I. Các đối tượng cơ bản
II. Các đối tượng trong JavaScript
III. Các sự kiện trên trang HTML
3

I. Giới thiệu tổng quan về JavaScript
II. Một số hộp thoại cơ bản – Popup Boxes
III. Sử dụng JavaScript trong trang HTML
IV. Ngôn ngữ lập trình JavaScript
4
1. Giới thiệu tổng quan về JavaScript
 Của hãng Netscape Communications
 Là một ngôn ngữ kịch bản (scripting language)
dùng để tương tác với các trang HTML dựa trên
đối tượng (object-based scripting language )
 Chủ yếu dùng cho kỹ thuật lập trình ở phía client
 Code của JavaScript thường được nhúng
(embedded) trực tiếp hoặc tích hợp (integrated)
vào trang web
5
 Có một số đặc điểm sau:
 Là một ngôn ngữ thông dịch(interpreted language),
nghĩa là các script thi hành không cần biên dịch trước
(precompile). Trình duyệt dịch script, phân tích và thi
hành ngay tức thời
 Lập trình theo cấu trúc (Structured progarming)
 Có phân biệt chữ HOA và thường
6
 Các trình duyệt hỗ trợ JavaScript:
 Netscape Navigator (bắt đầu từ phiên bản 2.0)
 Microsoft Internet Explorer (bắt đầu từ phiên bản 3.0)
 Những trình duyệt khác có hỗ trợ JavaScript (như Opera,
…)
7
2. Một số hộp thoại cơ bản
 Hộp thông báo – Alert box

 Hộp xác nhận – Confirm box
 Hộp nhận giá trị - Prompt box
8
Hộp thông báo – Alert box
 Xuất câu thông báo trong một cửa sổ
alert(“Câu thông báo”)
Ví dụ:
<body>
<form id="nhap">
<input type="button" name="chao" value="Xuất câu chào"
onClick="alert('Chào bạn, chúc mừng bạn đến với ngôn ngữ JavaScript'); ">
</form>
</body> Click
9
Một số hộp thoại cơ bản

 Hộp thông báo – Alert box

 Hộp xác nhận – Confirm box

 Hộp nhận giá trị - Prompt box
10
Hộp xác nhận – Confirm box
 Có dạng hàm (true/false), giúp người dùng quyết

định đồng ý hoặc từ chối một yêu cầu
<biến> = confirm(“Câu hỏi”)
Ví dụ:
<body>
<form id="nhap">
<input type="button" name="chao" value="Đổi mật khẩu"
onClick="traloi=confirm('Bạn có đồng ý đổi mật khẩu');">
</form>
Click
</body>
11
Hộp nhận giá trị – Prompt box
 Có dạng hàm, yêu cầu nhập vào một giá trị
<biến> = prompt(“Câu hướng dẫn”, “giá trị mặc định”)
Ví dụ:
<body>
<form name="nhap">
<label id="chao" style="color:#3300CC"></label><br>
<input type="button" name="xuat" value="Xuất câu chào"
onClick="chao.innerText=prompt('Nhập tên của bạn:', '' )"></form>
</body>
12
3. Sử dụng JavaScript trong trang HTML
 Chèn JavaScript vào Head section
 Chèn JavaScript vào Body section
 Sử dụng tập tin thư viện – External script
 Chèn JavaScript vào sự kiện
 Chú thích trong JavaScript
13
Chèn JavaScript vào Head section
 Đặt đoạn lệnh JavaScript trong cặp tag <script>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ví dụ về script</title>
<script language="javascript" type="text/javascript">
//Đọan JavaScript
</script>
</head>
<body>
Nội dung trang web
</body>
</html>
14
Chèn JavaScript vào Body section
 Đặt cặp tag <script> trong cặp tag <body>
<html>
<head> <title>Ví dụ về script</title></head>
<body>
</script>
</script>
…
</body></html>
15
Sử dụng tập tin thư viện – External script
 Các đọan code dùng chung sẽ được viết trong
một tập tin và lưu với phần mở rộng là .js
 Sử dụng thuộc tính src (source) của tag <script>
để khai báo tập tin *.js
<html>
<head> <title>Ví dụ về script</title>
<script language="javascript" src="<tên tập tin>.js"></script>
</head>
<body>
</body>
</html>
16
Chèn JavaScript vào sự kiện
 HTML cho phép chèn JavaScript vào các sự kiện

của tag
 Code JavaScript sẽ được thi hành khi phát sinh
sự kiện
17
Chú thích trong JavaScript
 Chú thích trong JavaScript

 Chú thích cho một dòng, ta dùng ký hiệu //
 Chú thích từ 2 dòng trở lên, bắt đầu bằng ký hiệu /* và
kết thúc bằng */
Ví dụ:
<script language="javascript">
//In dòng tiêu đề
document.write("<h1>Đây là dòng tiêu đề</h1>");
/* Hai dòng lệnh sau
in hai đọan văn bản */
document.write("<p>Đây là đọan văn thứ nhất </p>");
document.write("<p>Đây là đọan văn thứ hai </p>");
</script>
18
4. Ngôn ngữ lập trình JavaScript
 Biến - Variable
 Các toán tử - Operators
 Một số hàm cơ bản trong JavaScript
 Hàm - Function
 Cấu trúc điều khiển
19
Biến – Variable
 Khai báo:
var <tên biến>;

hoặc var <tên biến> = <giá trị>;
hoặc <tên biến> = <giá trị>;
 <tên biến> phải bắt đầu bằng ký tự (a -> z) hoặc dấu
gạch dưới (_)
 <tên biến> có phân biệt chữ HOA/thường
20
Biến – Variable
 Khai báo:
 Khai báo bên ngoài hàm gọi là biến toàn cục (global
variable)
 Khai báo trong hàm gọi là biến cục bộ (local variable)
và chỉ được phép sử dụng trong hàm khai báo nó
21
Biến – Variable
 Giá trị của biến:

 Số - Number : một con số (như 23 hoặc 3.1415)
 Luận lý – Boolean : true hoặc false
 Chuỗi – String : một chuỗi các ký tự ( như “abc”)
 null : khi không xác định giá trị
 undefined : khi không xác định giá trị
22
Biến – Variable
 Phân biệt giá trị null và undefined:

 undefined: biến được khai báo nhưng chưa được gán
giá trị
Ví dụ:
var TestVar;
 null: biến đượcalert(TestVar);  undefined
khai báo và được gán = null
Ví dụ:
var TestVar = null;
alert(TestVar);  null
23
Biến – Variable
 Kiểm tra kiểu dữ liệu: dùng toán tử typeof
typeof <giá trị>

hoặc typeof (<giá trị>)
Ví dụ:
document.write(typeof 10);  “number”
document.write(typeof ('JS'));  “string”
document.write(typeof new Date());  “object”
document.write(typeof myVar);  “undefined”
24
Các toán tử - operators
 Toán tử số học – Arithmetic operators
25
 Toán tử gán – Assignment operators
26
 Toán tử so sánh – Comparision operators
27
 Toán tử luận lý – Logical operators
28
 Toán tử điều kiện – Conditonal operator
(<điều kiện>) ? <giá trị 1> : <giá trị 2>
Ví dụ:
tinhtrang = (tuoi>=18) ? “trưởng thành” : “vị thành niên”
29

Bai 09

Uploaded by

Document Information

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

Bai 09

Uploaded by

Copyright:

Available Formats

INTERNET VÀ CÔNG NGHỆ WEB

• Cung cấp kiến thức về các đối tượng trong javascript

• Sử dụng Javascript trên Website

 Sau khi hoàn thành bài học, sinh viên có thể

• Sử dụng được Javascript

Bài 1 : Ngôn ngữ lập trình JavaScript

 Hộp thông báo – Alert box

 Xuất câu thông báo trong một cửa sổ

alert(“Câu thông báo”)

 Có dạng hàm (true/false), giúp người dùng quyết

<biến> = confirm(“Câu hỏi”)

 Có dạng hàm, yêu cầu nhập vào một giá trị

<biến> = prompt(“Câu hướng dẫn”, “giá trị mặc định”)

 Đặt đoạn lệnh JavaScript trong cặp tag <script>

 Đặt cặp tag <script> trong cặp tag <body>

 HTML cho phép chèn JavaScript vào các sự kiện

 Chú thích trong JavaScript

var <tên biến>;

 Giá trị của biến:

 Phân biệt giá trị null và undefined:

 Kiểm tra kiểu dữ liệu: dùng toán tử typeof

typeof <giá trị>

 Toán tử số học – Arithmetic operators

 Toán tử gán – Assignment operators

 Toán tử so sánh – Comparision operators

 Toán tử luận lý – Logical operators

 Toán tử điều kiện – Conditonal operator

(<điều kiện>) ? <giá trị 1> : <giá trị 2>

You might also like