Đọc truyện javaScript

♥ AzTruyen.Top - Trang đọc truyện hoàn toàn miễn phí!

javaScript

Trước Sau

Màu nền

Font chữ

Font size

Chiều cao dòng

NGÔN NGỮ JAVASCRIPT

Giảng viên: Lê Bá Vui

Viện CNTT-TT - ĐH Bách Khoa Hà Nội

JAVASCRIPT LÀ GÌ?

 Là ngôn ngữ kịch bản đƣợc thực hiện trên máy client.

 Đƣợc nhúng vào trong trang web.

 Đƣợc thiết kế để tăng khả năng tƣơng tác cho trang web.

 Là ngôn ngữ thông dịch

 Đƣợc hỗ trợ bởi trình duyệt

 Đƣợc phát triển bởi hãng Netscape (khác với Java)

JAVASCRIPT CÓ THỂ LÀM GÌ?

 Đặt dữ liệu động vào trong trang HTML

 Đáp ứng các sự kiện

 Đọc ghi các đối tƣợng HTML

 Sử dụng để kiểm tra dữ liệu trƣớc khi gửi đến

server

 Lƣu trữ và đọc thông tin ngƣời sử dụng (cookie)

CHÈN JAVASCRIPT VÀO HTML

 Chèn trực tiếp mã vào trong HTML

<!--

// Các dòng lệnh JavaScript

//-->

</script>

 Chèn một file JavaScript chứa mã

</script>

VÍ DỤ

VỊ TRÍ ĐẶT JAVASCRIPT

 Các kịch bản đƣợc đặt trong phần <head>

 Chỉ đƣợc thực hiện khi có lời gọi

 Đáp ứng các sự kiện  Thƣờng là các hàm

 Các kịch bản đƣợc đặt trong phần <body>  Đƣợc thực hiện khi trang web đƣợc nạp bởi trình duyệt

VỊ TRÍ ĐẶT JAVASCRIPT

 Có thể đặt các kịch bản ở cả phần <head> và

phần <body>

 Số lƣợng các kịch bản đƣợc nhúng vào HTML

không giới hạn

CHÚ THÍCH TRONG JAVASCRIPT

 Giống nhƣ trong ngôn ngữ C++

 Chú thích cho một dòng

// Dòng chú thích

 Chú thích cho một đoạn

Đoạn chú thích

CHÚ Ý

 Các lệnh trong JavaScript phân biệt chữ hoa và

chữ thƣờng

 Ví dụ Document.Write("") là sai

 Kết thúc lệnh bằng dấu ;

BIẾN TRONG JAVASCRIPT

 Đƣợc sử dụng để lƣu trữ dữ liệu và có thể thay đổi khi kịch bản đƣợc thực hiện

 Quy tắc đặt tên biến

 Phải bắt đầu bằng một chữ cái hoặc ký tự gạch dƣới _

 Ví dụ: x, y, z, length, _height, _width

 Phân biệt chữ hoa và chữ thƣờng

 Biến X khác với biến x

KHAI BÁO BIẾN

 Cú pháp: var tên_biến;  Ví dụ

var st; var length;

 Khởi tạo giá trị cho biến

var tên_biến = giá_trị_khởi_tạo;  Ví dụ var st = "Hello"; var length = 100;

 Không xác định kiểu cụ thể của biến

GÁN GIÁ TRỊ CHO BIẾN

 Cú pháp

tên_biến = giá_trị;

 Ví dụ

st = "Hello world";

length = 10;

 Chú ý

 Kiểu của biến đƣợc xác định dựa vào giá trị gán

=> có thể thay đổi đƣợc kiểu

KIỂU DỮ LIỆU

 Kiểu số

 x = 10;

 Kiểu logic

 ans = true;

 Kiểu chuỗi

 s = "Hello";

CÁC TOÁN TỬ SỐ HỌC

Toán tử Ý nghĩa Ví dụ (y = 5) Kết quả

+ Cộng x = y + 2 x = 7

- Trừ x = y - 2 x = 3

* Nhân x = y * 2 x = 10

/ Chia x = y / 2 x = 2.5

% Lấy số dư x = y % 2 x = 1

++ Cộng 1 x = ++y x = 6

-- Trừ 1 x = --y x = 4

PHÉP CỘNG VỚI CHUỖI KÝ TỰ

 Ghép các chuỗi với nhau

 Ví dụ s1 = "hello"; s2 = "world"; s = s1 + s2; // s = "helloworld"

 Cộng chuỗi với số, kết quả thu đƣợc là chuỗi  Ví dụ s1 = "5"; s2 = 5; s = s1 + s2; // s = 55

CÁC TOÁN TỬ SO SÁNH

Toán tử Ý nghĩa Ví dụ (x = 5) Kết quả

== So sánh bằng (giá trị) x == 5 true

=== So sánh bằng (giá trị và kiểu)

x === "5" false

!= So sánh khác x != 3 true

> Lớn hơn x > 6 false

< Nhỏ hơn x < 7 true

>= Lớn hơn hoặc bằng x >= 6 false

<= Nhỏ hơn hoặc bằng x <= 6 true

TOÁN TỬ LOGIC

Toán tử Ý nghĩa Ví dụ (x = 5, y = 7) Kết quả

&& và (x > 5) && (y <= 7) false

|| hoặc (x > 5) || (y <= 7) true

! đảo !(x == y) true

TOÁN TỬ ĐIỀU KIỆN

 Cú pháp

tên_biến = (điều_kiện)?giá_trị_1:giá_trị_2;

 Tùy vào điều kiện mà biến đƣợc gán giá trị 1

hoặc giá trị 2

 Ví dụ

x = 4;

y = (x > 5)?x + 1:x - 1;

// y = 3

BIỂU THỨC LỰA CHỌN IF...ELSE...

 Cú pháp Dạng 1: if (điều_kiện)

{ // lệnh }

Dạng 2: if (điều_kiện) {

} else {

}

// lệnh

VÍ DỤ

<html> <body> <script language="JavaScript"> var d = new Date(); var time = d.getHours(); if (time < 12) { document.write("Good morning"); } else if ((time >= 12) && (time < 18)) { document.write("Good afternoon"); } else { document.write("Good evening"); } </script> </body> </html>

BIỂU THỨC LỰA CHỌN SWITCH

 Cú pháp switch (tên_biến) { case giá_trị_1: // khối lệnh 1 break; case giá_trị_2: // khối lệnh 2 break; ... default: // khối lệnh default }

VÍ DỤ

<html> <head> <title>Switch Case Statement</title> </head> <body> <script language="JavaScript"> var date = new Date(); var day = date.getDay(); switch (day) { case 0: document.write("Today is Sunday."); break; case 6: document.write("Today is Saturday."); break; default: document.write("Today is not weekend."); } </script> </body> </html>

CÁC HỘP THOẠI THÔNG BÁO

 Hộp thoại alert

 Cú pháp alert("thông_báo");

 Ví dụ:

alert("Hello world!");

CÁC HỘP THOẠI THÔNG BÁO

 Hộp thoại confirm

 Cú pháp return = confirm("thông_báo");

 Ví dụ:

var ret = confirm("Are you sure?"); if (ret == true) document.write("You pressed OK"); else document.write("You pressed Cancel");

CÁC HỘP THOẠI THÔNG BÁO

 Hộp thoại prompt

 Cú pháp value = prompt("thông_báo",

"giá_trị_mặc định");

 Ví dụ

name = prompt("What's your name?", "Peter");

document.write("Hello " + name);

HÀM TRONG JAVASCRIPT

 Định nghĩa hàm

 Cú pháp

function tên_hàm()

{

// các lệnh thực hiện bên trong hàm

}

 Lời gọi hàm

tên_hàm();

VÍ DỤ

<html> <head> <title>Function 1</title> <script language="JavaScript"> function thongbao() { alert("Hello"); } </script> </head> <body> <script language="JavaScript"> thongbao(); </script> </body> </html>

TRUYỀN THAM SỐ CHO HÀM

 Cú pháp

function tên_hàm(tham_số_1, tham_số_2, ...)

{

...

}

 Lời gọi hàm

tên_hàm(tham_số_1, tham_số_2, ...);

VÍ DỤ

<html> <head> <title>Function 2</title> <script language="JavaScript"> function thongbao(msg) { alert(msg); } </script> </head>

<body> <script language="JavaScript"> thongbao("Chao cac ban!"); </script> </body> </html>

GIÁ TRỊ TRẢ VỀ CỦA HÀM

 Cú pháp

function tên_hàm(danh_sách_tham_số)

{ // nội dung hàm return giá_trị_trả_về;

}

 Lời gọi hàm

giá_trị = tên_hàm(danh_sách_tham_số);

VÍ DỤ

<html> <head> <title>Function 2</title> <script language="JavaScript"> function cong3so(x, y, z) { var t = x + y + z; return t; } </script> </head>

<body> <script language="JavaScript"> var t = cong3so(1, 2, 3); document.write(t); </script> </body> </html>

BIẾN TOÀN CỤC BIẾN ĐỊA PHƢƠNG

 Biến toàn cục

 Định nghĩa bên ngoài hàm

 Tồn tại từ khi đƣợc định nghĩa đến khi trang web đóng lại

 Có thể truy nhập từ mọi nơi

 Biến địa phƣơng

 Định nghĩa bên trong hàm

 Tồn tại từ khi đƣợc định nghĩa đến khi kết thúc hàm

 Chỉ truy nhập đƣợc ở bên trong hàm

VÕNG LẶP FOR

 Cú pháp

for (biến=giá_trị_bắt_đầu;

biến<giá_trị_kết_thúc;thay_đổi_giá_trị_biến)

{

// các lệnh cần lặp

}

 Lặp một đoạn mã theo số lần xác định

VÍ DỤ

VÕNG LẶP WHILE

 Cú pháp

while (điều_kiện)

{

// các lệnh cần lặp

}

 Lặp khi nào điều kiện còn đúng

 Kiểm tra điều kiện trƣớc khi thực hiện lệnh

VÍ DỤ

<html> <head> <title>While Loop</title> </head>

<body> <script language="JavaScript"> var i = 0; while (i < 10) { document.write(i + "
"); i++; } </script> </body> </html>

VÕNG LẶP DO ... WHILE

 Cú pháp

{

// các lệnh cần lặp

}

while (điều_kiện);

 Lặp khi nào điều kiện còn đúng

 Kiểm tra điều kiện sau khi thực hiện lệnh

VÍ DỤ

<html> <head> <title>Do While Loop</title> </head>

<body> <script language="JavaScript"> var i = 0; do { document.write(i + "
"); i++; } while (i < 10); </script> </body> </html>

LỆNH BREAK VÀ LỆNH CONTINUE

 Lệnh break

 Thoát khỏi vòng lặp hiện tại

 Lệnh continue

 Chuyển tới vòng lặp tiếp theo

VÍ DỤ - LỆNH BREAK

<html> <head> <title>Break Statement</title> </head>

VÍ DỤ - LỆNH CONTINUE

<html> <head> <title>Continue Statement</title> </head>

CÁC SỰ KIỆN TRONG JAVASCRIPT

 Là các hành động đƣợc xác định bởi JavaScript.

 Là thuộc tính của các thành phần trong HTML.

 Mỗi thành phần trong trang web có những sự kiện nào đó.

 Các sự kiện có thể kích hoạt các hàm

JavaScript.

MỘT SỐ SỰ KIỆN

 Mở, đóng một trang web

 Di chuyển chuột trên các đối tƣợng, nhấp chuột

vào các đối tƣợng

 Thay đổi giá trị các đối tƣợng

 Nhập ký tự từ bàn phím

HÀM XỬ LÝ SỰ KIỆN

 Là một hàm JavaScript

 Đƣợc thực hiện khi sự kiện xảy ra

 Cú pháp

sự_kiện="tên_hàm();"

SỰ KIỆN MỞ ĐÓNG TRANG WEB

 Mở một trang web

 onLoad

 Đóng một trang web

 onUnload

VÍ DỤ

<html> <head> <title>Load and Unload Event</title> <script language="JavaScript"> function load() { alert("Mo trang web"); } function unload() { alert("Dong trang web"); } </script> </head>

</body> </html>

SỰ KIỆN CHUỘT

 onMouseDown

 onMouseUp

 onMouseMove

 onMouseOver

 onMouseOut

VÍ DỤ

<html> <head> <title>Mouse Events</title> <script language="JavaScript"> function mouseDown() { alert("onMouseDown event"); } function mouseUp() { alert("onMouseUp event"); } function mouseMove() { alert("onMouseMove event"); } function mouseOver() {

function mouseOut() { alert("onMouseOut event"); } </script> </head>

</body> </html>

alert("onMouseOver event"); }

SỰ KIỆN CHUỘT

 onClick

 onDblClick

VÍ DỤ

<html> <head> <title>Mouse Events</title> <script language="JavaScript"> function Click() { alert("onClick event"); } function DblClick() { alert("onDblClick event"); } </script> </head>

CÁC KÝ TỰ ĐẶC BIỆT

 Một số ký tự đặc biệt

 " „ & \

 Hiện ký tự đặc biệt sử dụng JavaScipt

 \" \‟ \& \\

\r \t

CÁC ĐỐI TƯỢNG TRONG JAVASCIPT

 JavaScript là một ngôn ngữ lập trình hướng đối tượng

 Mỗi đối tượng bao gồm các thuộc tính và phương thức

 Thuộc tính là giá trị gắn với đối tượng

 Ví dụ: một chuỗi có độ dài khác nhau

 Phương thức là hành động được thực hiện trên đối tượng

 Ví dụ: đổi các ký tự trong chuỗi thành chữ hoa

THUỘC TÍNH VÀ PHƢƠNG THỨC

 đối_tƣợng.thuộc_tính

 đối_tƣợng.phƣơng_thức()

ĐỐI TƢỢNG STRING

 Đƣợc tạo khi gán giá trị với một chuỗi

 Ví dụ: var st = "Hello"; // st là đối tƣợng chuỗi document.write(st.length); // thuộc tính

var stt1 = st.toUpperCase(); // phƣơng thức

 Thuộc tính

 length độ dài chuỗi (số ký tự)

MỘT SỐ PHƢƠNG THỨC

 charAt(index)

 trả về ký tự tại vị trí index trong chuỗi

 indexOf(searchvalue, fromindex)

 tìm vị trí của chuỗi ký tự searchvalue từ vị trí

fromindex

 nếu không tìm thấy thì trả về -1

 lastIndexOf(searchvalue, fromindex)

 giống indexOf nhƣng bắt đầu từ bên phải

MỘT SỐ PHƢƠNG THỨC

 match(searchString)

 trả về chuỗi searchString nếu tìm thấy, trả về null nếu không tìm thấy

 search(searchString)

 trả về vị trí chuỗi searchString nếu tìm thấy, trả về null nếu không tìm thấy

 substr(start, length)

 trích ra chuỗi ký tự có độ dài length bắt đầu tự vị trí start

ĐỐI TƢỢNG DATE

 Đƣợc sử dụng để làm việc với dữ liệu là thời gian

 Tạo đối tƣợng Date

 var myDate = new Date();

 sau khi khởi tạo, đối tƣợng lƣu trữ thời gian hiện tại

MỘT SỐ PHƢƠNG THỨC

 getDate()

 trả về dữ liệu là ngày (1 - 31)

 getDay()

 trả về dữ liệu là thứ (0 - 6)

 getMonth()

 trả về dữ liệu tháng (0 - 11)

 getFullYear()

 trả về dữ liệu năm, gồm 4 chữ số

MỘT SỐ PHƢƠNG THỨC

 getHours()

 trả về dữ liệu giờ (0 - 23)

 getMinutes()

 trả về dữ liệu phút (0 - 59)

 getSeconds()

 trả về dữ liệu giây (0 - 59)

MỘT SỐ PHƢƠNG THỨC

 setDate(day)

 Thiết lập ngày (1 - 31)

 setMonth(month)

 Thiết lập tháng (0 - 11)

 setFullYear(year)

 Thiết lập năm

MỘT SỐ PHƢƠNG THỨC

 setHours(hour)

 Thiết lập giờ (0 - 23)

 setMinutes(minute)

 Thiết lập phút (0 - 59)

 setSeconds(second)

 Thiết lập giây (0 - 59)

ĐỐI TƢỢNG ARRAY

 Lƣu trữ mảng dữ liệu

 Khai báo

var myArray = new Array();

 Gán dữ liệu cho mảng myArray[0] = "value1"; myArray[1] = "value2"; myArray[2] = "value3";

 Gán giá trị lúc khởi tạo

var myArray = new Array("value1", "value2", "value3");

TRUY NHẬP ĐỐI TƢỢNG MẢNG

 tên_mảng[chỉ_số]

 Ví dụ:

 document.write(myArray[0])

MỘT SỐ PHƢƠNG THỨC

 concat(array1, array2,...)

 ghép các mảng với nhau

 pop()

 trả về và xóa đối tƣợng cuối cùng trong mảng

 push()

 thêm 1 hoặc nhiều đối tƣợng vào sau mảng, trả về độ

dài mới

ĐỐI TƢỢNG MATH

 Thực hiện các hàm toán học

 Không khai báo đối tƣợng mới

 Sử dụng đối tƣợng toàn cục

MỘT SỐ THUỘC TÍNH

 Math.E

 hằng số Euler

 Math.PI

 hằng số PI

MỘT SỐ PHƢƠNG THỨC

 Math.abs(x)

 Math.cos(x)

 Math.sin(x)

 Math.log(x)

 Math.exp(x)

 Math.sqrt(x)

 Math.round(x)

 Math.pow(x, y)

ĐỐI TƢỢNG WINDOWS

 Là đối tƣợng ở mức cao nhất trong JavaScript

 Biểu diễn cho một cửa sổ trình duyệt

 Đƣợc tự động tạo khi có thẻ <body> hoặc

MỘT SỐ THUỘC TÍNH

 closed

 kiểm tra cửa sổ đƣợc đóng hay chƣa

 document

 đối tƣợng con Document

 history

 đối tƣợng con History

 location

 đối tƣợng con Location

 status

 dòng thông báo trên thanh trạng thái

MỘT SỐ PHƢƠNG THỨC

 alert(), comfirm(), prompt()

 open(), close()

 đóng mở cửa sổ

 focus()

 thiết lập focus cho cửa sổ

 setTimeout(code, millisec)

 thực hiện một đoạn mã sau một khoảng thời gian

VÍ DỤ

<html> <head> <title>Windows Object</title> <script language="JavaScript"> function open_new() { mywin = window.open(''); mywin.document.write('Day la cua so moi');

} function close_win() { mywin.close(); } </script> </head>

ĐỐI TƯỢNG SCREEN

 Chứa thông tin về màn hình hiển thị

 screen.width, screen.height - chiều rộng,

chiều cao màn hình

 screen.availWidth, screen.availHeight - chiều rộng và chiều cao màn hình (không bao gồm thanh taskbar)

VÍ DỤ

<html>

<head>

<title>Screen Object</title>

</head>

<body>

</script>

</body>

</html>

ĐỐI TƯỢNG HISTORY

 Chứa thông tin về các địa chỉ đã được duyệt bởi trình duyệt

 Thuộc tính history.length chỉ ra số các địa chỉ trong history

 Phương thức

 history.go() nạp lại một địa chỉ cụ thể

 history.back() nạp lại địa chỉ trước địa chỉ hiện tại

 history.forward() nạp lại địa chỉ sau địa chỉ hiện tại

VÍ DỤ

<html> <head> <title>History Object</title> <script language="JavaScript"> function myFunc() { var num = prompt("Di chuyen den trang:"); history.go(num); } </script> </head>

<body>

<a onClick="history.back()"> Trang truoc</a>
<a onClick="history.forward() "> Trang sau</a>

<a onClick="myFunc()">Di chuyen den trang xac dinh</a> </body> </html>

ĐỐI TƢỢNG DOCUMENT

 Biểu diễn toàn bộ thành phần nội dung của trang

HTML

 Đƣợc sử dụng để truy nhập đến các thành phần

THUỘC TÍNH

 title

 tiêu đề của trang web hiện tại

 URL

 địa chỉ của trang web hiện tại

VÍ DỤ

<html> <head> <title>Document Object</title> </head>

<body>

PHƢƠNG THỨC

 getElementById()

 trả về đối tƣợng thông qua ID của đối tƣợng đó

 đƣợc sử dụng để truy nhập đến đối tƣợng

 write()

 ghi một chuỗi lệnh HTML ra cửa sổ trình duyệt

 writeln()

 giống lệnh write(), nhƣng chèn thêm ký tự xuống

dòng

CÁC ĐỐI TƢỢNG DOCUMENT

 Truy nhập thông qua thuộc tính của các đối tƣợng

 Thuộc tính innerHTML

 Nội dung văn bản mà đối tƣợng tác động

VÍ DỤ

<html> <head> <title>Document Object</title> <script language="JavaScript"> function changeColor() { document.getElementById("myBody").bgColor = "red"; } </script> </head>

VÍ DỤ

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Thuoc tinh innerHTML</title> <script language="javascript"> function change() { document.getElementById("heading").innerHTML = "Tiêu đề đã thay đổi"; } </script> </head> <body> <h1 id="heading">Đây là tiêu đề đoạn văn</h1> <script language="javascript"> setTimeout("change()", 5000); </script> </body> </html>

BÀI TẬP

Bạn đang đọc truyện trên: AzTruyen.Top

Trước Sau

Tags: #lạp #trinh #web