NỀN T ẢNG C Ơ B ẢN C ỦA JAVASRIPT · Bộ môn H ệ th ống thông tin – Khoa Công...

Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin

NỀN TẢNG CƠ BẢN CỦA JAVASRIPT

NHẬP MÔN HTML VÀ THIẾT KẾ WEB

1


� Giới thiệu,� Khai báo

NỘI DUNG


� JavaScript là ngôn ngữ dưới dạng script.� JavaScript là ngôn ngữ dựa trên đối tượng,

có nghĩa là bao gồm nhiều kiểu đối tượng.� JavaScript có thể đáp ứng các sự kiện như

tải hay loại bỏ các form. Khả năng này chophép JavaScript trở thành một ngôn ngữscript động.

� Javasript có thể làm việc khác nhau trên cáctrình duyệt khác nhau

GIỚI THIỆU


� JavaScript là gì?JavaScript là ngôn ngữ kịch bản dựa trên đốitượng nhằm phát triển các ứng dụng Internetchạy trên client và phía Server

GIỚI THIỆU


� Tương tác với người dùng:� Viết mã để đáp ứng lại các sự kiện

� Thay đổi nội dung động� Thay đổi nội dung và vị trí các phần tử một cáchđộng trên một trang nhằm đáp ứng sự tương tácngười dùng

� Kiểm tra tính hợp lệ của dữ liệu� Kiểm tra tính hợp lệ dữ liệu do người dùng nhập

vào trước khi gửi lên web server để xử lý

CÁC HIỆU ỨNG


� Dùng Caps:� Javascript phân biệt chữ hoa và chữ thường

� Dùng Pairs:� Luôn luôn có ký hiệu mở và đóng, nếu dùng

thiếu hoặc sai sẽ xuất hiện lỗi� Dùng Spaces

� Javascript bỏ qua các ký tự trắng, dùng các tabđể cho các file script dễ đọc và sửa

� Dùng chú thích<! – Chú thích //-->

MỘT SỐ QUY TẮC


� Nhúng JavaScript vào một file HTML theomột trong các cách sau đây:� Nhúng các câu lệnh trực tiếp vào trong tài liệu bằng cách

sử dụng thẻ <Script>� Liên kết file nguồn Javascript vời tài liệu HTML� Đặt các biểu thức Javascript làm giá trị cho các thuộc

tính của thẻ HTML� Sử dụng thẻ sự kiện (event handlers) trong một thẻ

HTML nào đó

Nhúng Javascript vào trong trang web

� Nhúng các câu lệnh trực tiếp vào trong tàiliệu bằng cách sử dụng thẻ <Script>

<script language="javascript" type="text/javascript">



</script>

� Thuộc tính language: Chỉ ngôn ngữ� Chú thích: 

� Các câu lệnh kết thúc bằng dấu ;


� Nhúng các câu lệnh trực tiếp vào trong tàiliệu bằng cách sử dụng thẻ <Script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script language="javascript" type="text/javascript">

document.write("Xin chào!");

// Nên đặt các script trong thẻ Head -->

</script>

</head>

<body>

</body>

</html>



� Sử dụng các file nguồn JavaScript<script type ="text/javascript" src =“filename.js" >…</ script >

- File test.js: document.write("Hello");

- File .html<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script language="javascript" type="text/javascript"src="Test.js">

</script></head>

<body>

</body>

</html>



� Đặt tên biến� Tên bắt đầu chữ cái hoặc dấu gạch dưới� Tên biến có thể chứa chữ số� Phân biệt chữ hoa và chữ thường

Khai báo biến


� Khai báo tên biến:var tenbien [=<giá trị>];

Ví dụ:<script language="javascript"type="text/javascript" >

var a = 10;

var ans = null;

var result = 'xin chào';

var b;

</script>

Khai báo biến


� Phạm vi của biến:

Khai báo biến

Script

Biến Global

Funtion 1Biến local



Biến Global có thểđược truy cập bởicác hàm 1, 2, 3


Khai báo biến


� Khai báo biến:

Khai báo biến


� Numbers: Kiểu số nguyên và số thực� Logical và boolean: giá trị true hoặc false� Strings: Chuỗi ký tự� Null: Giá trị null

Các kiểu dữ liệu


� Phép gán (=):

� Phép toán so sánh: ==(bằng), != (khác), >,>=, <, <=

� Phép toán số học: +, -, *, /, % (chia lấy phầndư), ++, --

Các toán tử:


� Ghép chuỗi(+)� Phép toán Logic: && (và), || (hoặc), ! (phủđịnh).

� Phép toán Bitwise: & (và), | (hoặc), ^ (phủđịnh), << Toán tử dịch trái, >> Toán tửdịch phải.

Các toán tử:

� Toán tử điều kiện(condition)?trueVal:falseVal

<html><head>

<title></title><script language="javascript" type="text/javascript" >

</script>

</head><h1> Xin chào</h1></body></html>

Các toán tử:

� Toán tử typeof(): Trà về kiểu dữ liệu củatoán hạng

<html><head>


</script>

</head><h1> Xin chào</h1></body></html>

Các toán tử


� Biểu thức là sự liên kết các biến, hằng với nhauthông qua các toán tử

� Các dạng biểu thức:� Số học: trả về giá trị là một số� Logic: Trả về giá trị Boolean� Chuỗi: Trà về một chuỗi

Biểu thức


� Biểu thức quy tắc là một mẫu tìm kiếm dùng để tìmkiếm các chuỗi ký tự cùng dạng trong một xâu� Các mẫu đơn giản: Thực hiện tìm kiếm chính xác

/<chuỗi>/� Kết hợp các ký tự đơn giản và đặc biệt

Biểu thức

Ký tự Ý ngh ĩa

\ Giải thoát nghĩa hằng của ký tự

^ Tương xứng ký tự đầu chuỗi

$ Tương xứng ký tự đầu chuỗi

* Tương xứng ký tự phía trước là 0 hoặc nhiều lần

+ Tương xứng ký tự phía trước là 1 hoặc nhiều lần


� Biểu thức quy tắc:

Biểu thức

Ký tự Ý ngh ĩa

? Tương xứng ký tự phía trước là 0 hoặc 1 lần

. Tương xứng bất kỳ ký tự đơn trừ ký tự newline

(x) Tương xứng ‘x’ và ghi nhớ ký tự đó

x|y Tương xứng ‘x’ hoặc ‘y’

{n,m} Tương xứng ít nhất n và nhiều nhất m số lần xuất hiện của ký tự phía trước

[xyz],[y-z] Tương xứng bất kỳ ký tự nào nằm trong dấu ngoặc, dấu gạch nối chỉ một khoảng

[^xyz] Tương xứng bất kỳ ký tự nào không nằm trong ngoặc


� Biểu thức quy tắc:

Biểu thức

Ký tự Ý ngh ĩa

\d Tương xứng ký tự số

\s Tương xứng ký tự trắng, goomd space, tab,…

\t Tương xứng một tab

\w Tương xứng các ký tự alpha, tương đương [A-Za-z0-9]


� Sử dụng biểu thức quy tắc:

Biểu thức

Phương thức

Ý ngh ĩa

Exec Tìm kiếm một mẫu tương xứng trong chuỗi, trả về một mảng thông tin

Test Kiểm tra tương xứng của một chuỗi, trả về đúng hoặc sai

Match Tìm kiếm tương xứng trong một chuỗi

Search Kiểm tra sự tương ứng trong một chuỗi

Replace Tìm kiếm sự tương xứng trong một chuỗi, thay thế chuỗi con tìm kiếm bằng một chuỗi con khác.

Split Dùng để tách một chuỗi thành một mảng các chuỗi con.

� Sử dụng biểu thức quy tắc:<script language="javascript" type="text/javascript" >

</script>

<script language="javascript" type="text/javascript" ></script>

Biểu thức


� Mảng dùng để lưu một tập hợp các biến cùng tên� Chỉ số mảng để phân biệt biến này với biến khác,

chỉ số được bắt đầu từ 0� Khai báo mảng:arrayObjectName=new Array([element0, element1,… , elementN])

MẢNG

� Thêm các phần tử mảng:arrayObjectName[i]=<giá trị>;<html><head>




</script></head>

MẢNG

� Truy cập phần tử mảng:arrayObjectName[i]<html><head>




</script></head>

MẢNG


� Sử dụng các phương thức của mảng:� Join: Kết hợp các phần tử của mảng thành mọt chuỗi� Pop: trà về phần tử cuối cùng của mảng� Push: Thêm một hoặc nhiều phần tử vào cuối mảng� Reverse: Đảo ngược phần tử mảng� Shift: Xóa phần tử đầu tiên của mảng và trả về phần tửđó

� Sort: Sắp xếp các phần tử mảng

MẢNG

� Sử dụng các phương thức của mảng:<script language="javascript" type="text/javascript" >



</script>

MẢNG

� Mảng nhiều chiều:<script language="javascript" type="text/javascript" >

</script>

MẢNG

Tên Mã

Hạnh 001

Hoa 002

Dũng 003


THẢO LUẬN – CÂU HỎI


� Thực hành các ví dụ� Thiết kế các chức năng cho bài tập lớn

BÀI TẬP

NỀN T ẢNG C Ơ B ẢN C ỦA JAVASRIPT · Bộ môn H ệ th ống thông tin – Khoa Công...

Documents

Transcript of NỀN T ẢNG C Ơ B ẢN C ỦA JAVASRIPT · Bộ môn H ệ th ống thông tin – Khoa Công...