Lập trình web chạy ở phía ClientJavaScript

Lập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptLập trình web chạy ở phía ClientJavaScriptPowerPoint Presentation MÔN HỌC LẬP TRÌNH TRÊN NỀN WEB Đại học Sư phạm Hà Nội 2 KHOA CÔNG NGHỆ THÔNG TIN Trình bày Nguyễn Xuân Trường xuantruong12121991gmail com NỘI DUNG MÔN HỌC 1 Tổng quan về lập t.

Trang 2

NỘI DUNG MÔN HỌC

1 Tổng quan về lập trình trên nền web

2 Các mô hình kiến trúc phần mềm

3 Ngôn ngữ HTML

4 Lập trình web chạy ở phía Client

5 Lập trình web chạy ở Server

11/09/2015 xuantruong12121991@gmail.com 2

Trang 3

LẬP TRÌNH WEB CHẠY Ở PHÍA

Trang 4

NỘI DUNG

• Tổng quan về Script

• Ngôn ngữ kịch bản JavaScript

Trang 5

NỘI DUNG

Kết thúc chương này người học có thể:

• Viết các câu lệnh JavaScript và nhúng vào

Trang 6

Ngôn ngữ kịch bản Script

• Tổng quan:

• Là ngôn ngữ hỗ trợ lập trình Web

• Là ngôn ngữ lập trình kiểu thông dịch

• Gắn với các file HTM giúp các trang Web có khả

năng tương tác

• Các ngôn ngữ thông dụng

• JavaScript (do Netscapte phát triển)

• VBScript (do Microsoft phát triển)

Trang 9

• Cú pháp khi dùng cặp thẻ <SCRIPT> :

<script language=“ JavaScript / Vscript/ …”>

//các khai báo biến // các lệnh

//các lệnh gọi hàm và các hàm

}

</script>

• Cú pháp khi sử dụng file Script (*.js) đã có:

<script language="JavaScript / Vscript/…"

src="*.js/*.vbs/…"></script>

(tách 2 slide) Lập trình mạng – Chương 5 9

Trang 10

Ví dụ mô hình hoạt động

Trang 11

JavaScript

Nội Dung

• Biến, kiểu dữ liệu

• Số, mảng, chuỗi, đối tượng

• Các cú pháp:

• Gán, điều kiện, lặp

• Hàm, đối tượng hàm

• Sử dụng các đối tượng trong HTML

• document, form, frame, window …

• Xử lý các sự kiện của các đối tượng giao diện

• Xử lý sự kiện timer

• Sử dụng JavaScript trong kiểm tra dữ liệu Form

• Sử dụng JavaScript trong xử lý hiệu ứng

Trang 12

Biến số

• Cách đặt tên biến

• A Z,a z,0 9,_ : phân biệt HOA, thường

• Khai báo biến

• Dùng từ khóa var (var count=10, amount;)

• Thật sự tồn tại khi bắt đầu sử dụng lần đầu tiên

• Phạm vi sử dụng biến

• Toàn cục, cục bộ(trong hàm)

Trang 13

Kiểu dữ liệu

• Kiểu số: số nguyên, thực

• Boolean: True or False

• Chuỗi: “Hello World”

Trang 14

JavaScript

Chuyển kiểu dữ liệu

• Biến số tự đổi kiểu dữ liệu khi giá trị thay

đổi

• Ví dụ, var x = 10

• sau đó ta có thể đổi x: x= “I change your value?”

• Có thể cộng hai biến khác kiểu dữ liệu

• “12”+ 34.5 kết quả “1234.5”

• Hàm parseInt(), parseFloat():

• đổi chuỗi sang số

Trang 15

• Biểu thức điều kiện:

• status = (age >= 18) ? "adult" : "minor“(sua)

Trang 16

JavaScript

Mảng -Array

• Dùng để lưu các biến dùng chung tên

• Chỉ số bắt đầu từ 0

• Không có kiểu dữ liệu rõ ràng

• Được tích hợp trong đối tượng kiểu Array (sử dụng

một số các method: pop, push, )

• Cú pháp:

• var Tenmang = new Array(n)

• Để truy xuất tới phần tử thứ i ta viết A[i] (Ví dụ)

Trang 17

Hàm trong JavaScript

• Khai báo chung

function <tên hàm>(<danh sách các tham số>){

• Đối tượng this

• Chỉ đối tượng hiện thời

Trang 18

Hàm trong JavaScript

function add(x,y) {

Trang 19

Các lệnh trong JavaScript

• Các quy tắc chung

• Khối lệnh được bao trong dấu { }

• Mỗi lệnh kết thúc bởi dấu ;

Trang 21

case value1: lệnh 1; break;

Trang 23

do

{ //Hành động ; }

while(btĐiều_Kiện);

Trang 25

Một số hộp thoại trong Javascript

• Hộp thông báo Alert box

• Cú pháp: alert(“nội dung thông báo”);

• Dùng để xuất nội dung thông báo trong một

Trang 26

Một số hộp thoại trong Javascript

• Hộp nhận giá trị Prompt box

• Cú pháp:

prompt(“Gợi ý”,”giá trị mặc định”);

• Dùng để nhập dữ liệu vào và dữ liệu trả về

thông qua tên hàm này

Trang 27

Tổng kết nội dung Javascript cơ bản

Các cách chèn Javascript vào HTML

Trang 28

Trang 29

Trang 30

Trang 31

• Ngoài ra chúng ta còn có thể chèn JavaScript

vào sự kiện của các thẻ trong HTML

• Khi sự kiện phát sinh thì mã JavaScript sẽ

được thực thi

• Khi học về sự kiện chúng ta sẽ đề cập cụ

thể hơn

Trang 32

• Kiểu dữ liệu trong JavaScript

• Không có sự ràng buộc

• Không cần khai báo kiểu khi khai báo biến

• Có thể kiểm tra kiểu của một biến bằng

typeof(tenbien)

Trang 33

• Các phép toán trong JavaScript

Trang 34

• Các phép toán logic và so sánh trong JavaScript

Trang 35

Nội dung chương sau JavaScript nâng cao

Một số đối tượng

• Đối tượng String

• Đối tượng Array

• Đối tượng Date, Math

• Đối tượng Window

• Đối tượng Frame

• Đối tượng Form

(Gioi thieu day du)

Trang 36

Nội dung chương sau JavaScript nâng cao

Trang 37

Bài tập

• Câu 1: Sử dụng while và for viết chương trình in ra màn hình trang web các giá trị từ 1-100 mỗi giá trị các nhau một khoảng trắng

• Câu 2: Sử dụng lệnh lặp để in ra màn hình các số chẵn trong khoảng từ 1-50

• Câu3: Cho người dùng nhập vào tên và tuổi Hãy viết lại tên và tuổi của người đó ra màn hình bằng hàm document.write, trong

đó tên có màu đậm, tuổi được gạch chân

• Câu 4: Cho người dùng nhập vào một số nguyên kiểm tra xem

số nguyên đó là tương ứng với thứ mấy trong tuần và in ra chuỗi thông báo nếu không phải thì in ra không chính xác (thứ

tự 1 sẽ là thứ 2 tương tự…)

Trang 39

NỘI DUNG MÔN HỌC

1 Tổng quan về lập trình trên nền web

2 Các mô hình kiến trúc phần mềm

3 Ngôn ngữ HTML

4 Lập trình web chạy ở phía Client

5 Lập trình web chạy ở Server

Trang 40

LẬP TRÌNH WEB CHẠY Ở PHÍA

Trang 42

NỘI DUNG

Kết thúc chương này người học có thể:

• Viết các câu lệnh JavaScript và hiểu được về

cài đặt sự kiện cũng như nhúng các sự kiện vào các thẻ HTML

• Sử dụng thành thạo các đối tượng trong

JavaScript

• Nắm được một số hàm thường hay sử dụng

trong JavaScript

Trang 43

JavaScript Nâng cao Các đối tượng cơ bản

Trang 44

Các đối tượng cơ bản

• JavaScript là ngôn ngữ lập trình dựa trên

hướng đối tượng

• Trong JavaScript có nhiều đối tượng

(Math, String, Date,…) giúp người lập trình

có thể xử lý các công việc khách nhau

Trang 45

Các đối tượng cơ bản

Sơ đồ phân cấp của đối tượng WinDow

Trang 46

• Nếu chuỗi được xác định là một biểu thức, hàm

eval sẽ tính toán biểu thức

Trang 48

Một số hàm thông dụng

• Hàm isNaN

• Cú pháp: isNaN(testValue)

• TestValue là một số một chuỗi hoặc một tên

biến cần kiểm tra

• Ý nghĩa:

• Được dùng để kiểm tra xem đối số truyền vào

có phải là một số hay không

Trang 50

• Thường được sử dụng để chuyển các số nguyên

sang cơ số 10 và đảm bảo rằng các dữ liệu đưọc nhập dưới dạng ký tự được chuyển thành số trước khi tính toán

Trang 51

• Hàm parseInt

• Ý nghĩa :

• Trong trường hợp dữ liệu vào không hợp lệ, hàm

parseInt sẽ đọc và chuyển dạng chuỗi đến vị trí nó tìm thấy ký tự không phải là số

• Ngoài ra hàm này chuyển một chuỗi số thành số

nguyên với cơ số là tham số thứ hai (tham số này không bắt buộc)

• Hàm này còn cắt dấu phẩy động

Trang 54

• Hàm parseFloat

• Cú pháp: parseFloat (string)

• Ý nghĩa:

• Hàm này giống hàm parseInt nhưng nó

chuyển chuỗi thành số biểu diễn dưới dạng dấu phẩy động

Trang 56

ĐỐI TƯỢNG TRONG Javascript

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

• Tên đối tượng.Tên thuộc tính;

• Tên đối tượng.Tên phương thức;

Trang 57

Trang 58

• Định nghĩa một đối tượng (Hàm tạo mặc

định)

• Cú pháp: var Tên biến = new Object();

• Sau đó tạo các thuộc tính và phương thức

Trang 59

• Sử dụng hàm tạo

• Cú pháp: function Tên hàm(đối số) {}

Trang 60

• Phương thức cho đối tượng

• Khai báo phương thức

• Khai báo đối tượng và gọi phương thức

Trang 61

Trang 62

Sự kiện (Event) trong Javascript

• Sự kiện là một hành động của người dùng tác động

lên ứng dụng đang thực thi:

• Nhấn phím

• Kích chuột,…

• Lập trình hướng sự kiện : các thành phần giao diện có

khả năng nhận biết được các sự kiện từ phía người dùng

• Khả năng đáp ứng tùy thuộc người lập trình cài đặt

• Một trang Web bao gồm các hoạt động và tương

tác(tải, di chuyển, nhập, lựa chọn, nhấp,…) tạo nên

sự kiện của web

Trang 63

Trang 64

• Ví dụ sự kiện onClick:

Trang 65

Debug trong Javascript

Trang 66

Debug trong Javascript

• Google Chrome: Ctrl+Shift+J để mở Debug

• Firefox: Cài Add-on

Trang 67

DOM trong Javascript

• Khi một trang web được tải, trình duyệt sẽ tạo ra một

mô hình đối tượng về trang web (DOM – Document Object Model)

• DOM đại diện cho những gì chứa trong trang web

• Webpage = DOM + Javascript

Trang 68

• Với DOM, chúng ta có thể thay đổi các phần tử, nội

dung, style(css), các thuộc tính và tạo ra các sự kiện bên trong tài liệu HTML

Trang 69

Trang 70

Phương thức trong DOM

• Phương thức getElementById()

• Phương thức này cho phép truy cập đến một phần

tử HTML thông qua thuộc tính id của nó

• Cú pháp:

var tên biến = tên đối tượng getElementById(“Id phần tử)

• Phương thức getElementsByTagName()

• Cho phép truy cập đến phần tử HTML thông qua

tên gọi của phần tử đó

Trang 71

String Object

• Kiểu String:

• Được đặt trong cặp dấu “chuỗi” hoặc ‘chuỗi’

• Không được vừa đôi vừa đơn

• VD: “chuỗi’ hoặc ‘chuỗi” là sai về cú pháp

• Khai báo một biến chuỗi với cú pháp sau

• var tên biến=“chuỗi”;

• Toán tử nối chuỗi “+”;

• Tạo một đối tượng String với cú pháp sau:

var tên biến= new String([chuỗi]);

Trang 72

String Object

• Ví dụ :

var Lop= new String(“K38 CNTT”);

document.write(Lop);

• Đi kèm với đối tượng chuỗi là các thuộc

tính(properties), các phương thức(methods)

• Thuộc tính(properties):

• length: độ dài của chuỗi

Trang 73

String Object

• Phương thức(methods):

charAt() Trả ký tự ở 1 vị trí trong chuỗi

concat() Nối nhiều chuỗi lại thành 1

toLowerCase() Chuyển 1 chuỗi sang chữ hoa

trim() Loại bỏ khoẳng trắng ở đầu và

cuối chuỗi

valueOf() Trả về giá trị của đối tượng

Trang 74

String Object

• Ví dụ :

var str=" Hello world!";

document.write(str.substring(3)+"<br />");// lo world! document.write(str.substring(3,7));//lo w

Trang 75

console.log('Kiểu dữ liệu y: '+typeof(y));

Trang 76

8

MIN_VALUE Gán giá trị nhỏ nhất mà một

số trong Javascript có thể có:5E-324

…

Trang 77

• Nếu gán là 2 thì đối tượng Number được chuyển thành chuỗi nhị phần,

8 là hệ bát phân, 16 là hệ thập lục phân Nếu radix không được gán giá trị nào, đối tượng Number đơn giản sẽ được chuyển đổi thành chuỗi tương ứng với số

Trang 78

Date Object

• Đối tượng ngày tháng(Date Object):

• L à một kiểu dữ liệu dùng để làm việc với ngày,

tháng, năm và thời gian

• Cú pháp:

var varName = new Date(param);

• Trong đó param là một tham số không bắt buộc ta có

4 cách tạo đối tượng Date:

Trang 79

Date Object

• var myDate = new Date(); //Không đối số

• var myDate = new Date(123); //Đối số là milliseconds

• var myDate = new Date("May 3, 2013"); //Đối số date

string

• var myDate = new Date(2013,11,12); //Không đối số

là năm,tháng,ngày(có thể thêm giờ,phút,giây,mili giây)

Trang 80

getYear Trả về năm từ đối tượng Date ( năm (–

)1900) getTime Trả về số mili giây của thời gian hiện tại (

tính từ 1/1/1970)

Trang 81

setSeconds Thiết lập giây cho đối tượng Date ( 0-59)

setTime Thiết lập giá trị thời gian (tính bằng mili

giây) cho đối tượng Date

setMonth Thiết lập tháng cho đối tượng Date (1-12)

setYear Thiết lập năm cho đối tượng Date, năm

phải lớn hơn 1900 (năm (–) 1900)

Trang 82

Math Object

• Cho phép bạn thực hiện các thao tác tính toán

về toán học

• Không có hàm tạo

• Tất cả các thuộc tính và phương thức của đối

tượng toán học đều tĩnh

• Có thể gọi trực tiếp bằng việc sử dụng từ

khóa Math như một đối tượng mà không cần tạo ra chúng

Trang 83

Math Object

E Trả về dãy số Euler (khoảng 2.718)

LN2 Trả về logarit của 2 (khoảng 0.693)

LN10 Trả về logarit của 10 (khoảng 2.302)

LOG2E Trả về logarit cơ bản 2 của E (khoảng

Trang 84

Math Object

Abs (number) Trả về giá trị tuyệt đối của một số

Sin (number) Trả về giá trị sin của của một số (tính bằng

Trang 85

Math Object

Định dạng
Số trang	85
Dung lượng	2,04 MB