Đọc truyện javaScript

Chào các bạn! Vì nhiều lý do từ nay Truyen2U chính thức đổi tên là Truyen247.Pro. Mong các bạn tiếp tục ủng hộ truy cập tên miền mới này nhé! Mãi yêu... ♥

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: Truyen247.Pro

Trước Sau

Tags: #lạp #trinh #web