lập trình web - javascript cơ bản

Đồ án website Đánh giá đồ án môn học và tính điểm cho mỗi thành viên trong nhóm sẽ theo qui tắc sau:  Điểm đồ án không phải là điểm của mỗi thành viên nhóm  Điểm đồ án không phải là

Trang 1

ĐẠI HỌC SÀI GÒN – KHOA CNTT

1

Trang 2

Nội dung thiết kế web

Trang 5

giảng viên sẽ thông báo cụ thể.

5

Trang 6

Đồ án website

 Đánh giá đồ án môn học và tính điểm cho mỗi thành viên

trong nhóm sẽ theo qui tắc sau:

 Điểm đồ án không phải là điểm của mỗi thành viên nhóm

 Điểm cá nhân căn cứ trên % công việc làm trong nhóm

 Vd: Điểm đồ án của nhóm 1: là 8 điểm

 Ngược lại: (tính theo qui tắc sau)

Trang 7

Tài liệu tham khảo

 http://www.w3schools.com/ và

http://www.w3.org/ p // g/

Lisa Lopuck, Web Design For Dummies (2nd

Edition) Wiley Publishing 2006

Edition), Wiley Publishing, 2006

Craig Grannell, The Essential Guide to CSS and

Dave Thau, The book of JavaScript (2nd

edition), No Starch Press, 2007

Trang 9

Script language & DHTML

Trang 10

Script language

 Script : Ngôn ngữ lập trình thông dịch giúp

website tương tác với người dùng

 Client-side-script (JavaScript, VBScript, …)

 Được tải về máy client và thực thi bằng

WE  Server-side-script (Php, jsp, asp, aspx,…)

 Được thực thi ở web server và trả kết quả

Trang 11

Script language

 Khi Browser gởi yêu cầu truy cập 1 trang web

trên web server có chứa script server-side và client-side (HTML, client-side script, css, …)

 Khi nhận được 1 yêu cầu, web server

(runtime-engine) sẽ thực hiện các lệnh server

Trang 13

 Là ngôn ngữ dạng thông dịch

 Ngôn ngữ script phổ biến trên Internetgô gữ sc p p ổ b ế ê e e

 Giúp trang web có tính tương tác

 Khả năng của javascript:

 Cho phép đặt dữ liệu động vào trang HTML

 Tương tác với các sự kiện của HTML

g

 Thay đổi nội dung của các đối tượng HTML

 Kết hợp với HTML DOM để tương tác với người

Trang 14

Nhúng Javascript vào trang web

Trang 15

Nhúng Javascript vào trang web

 Đặt giữa tag <head> và </head> :

 Đoạn script sẽ thực thi ngay khi trang web

được mở

 Đặt giữa tag <body> và </body> :

 Đoạn script được thực thi khi trang web

 oạ sc pt được t ực t t a g ebđang mở (sau khi thực thi các đoạn script trong phần <head>

Trang 17

Giới thiệu JavaScript

 Web browser thực thi thẻ script khi load trang

web HTML theo thứ tự từ trên xuống dưới

 Source code JavaScript có thể đặt trong file

Trang 18

Trang 19

Trang 20

JavaScript – Cú pháp & quy ước

 Quy ước của ngôn ngữ lập trình

 Biến và kiểu dữ liệu

Trang 21

JavaScript – Cú pháp & quy ước

 JavaScript có cú pháp, ký hiệu tương tự

như Java và C++

 Phân biệt hoa thường

 Mọi lệnh phải kết thúc bằng dấu ;

( ) Sử dụng cho hàm \n, \t Xuống hàng, ký tự Tab

\’ Ký tự nháy đơn trong chuỗi \” Ký tự nháy kép trong chuỗi

Trang 22

JavaScript – Phân biệt chuỗi với ‘ và ‘’

Trang 23

JavaScript – Biến và kiểu dữ liệu

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

 Bắt đầu bằng một chữ cái hoặc dấu _

 A Z,a z,0 9, : phân biệt HOA, Thường

P  Ví dụ: var count 10,amount;

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

Trang 24

 Kiểu dữ liệu

 Number : số nguyên, thực g y

 Boolean - True or False

 String - “Hello World”

new để cấp phát Một số kiểu dữ liệu cơ bản,

Trang 25

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

Trang 26

Trang 29

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

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

29

Trang 30

JavaScript – Cấu trúc điều khiển

Trang 31

JavaScript – IF … ELSE

var d=new Date();

var time=d getHours();

else document.write("Good day!");

if (time<10) document.write("<b>Good morning</b>");

else if (time>10 && time<16)

Trang 32

JavaScript – while – do … while

Trang 33

JavaScript – for – For … IN

</script>

Trang 34

JavaScript – switch case

Trang 35

JavaScript - Function

 Hàm không cần khai báo kiểu trả về

 Hàm có thể trả về mọi kiểu giá trịà có ể ả ề ọ ểu g á ị

 Nên khai báo hàm trong thẻ head hoặc trong

file js để tái sử dụng

 Hàm chỉ được thực hiện khi có lệnh gọi

 Hàm thường kết với HTML DOM để xử lý sự

Trang 37

JavaScript - Một số đối tượng xây dựng sẵn

Trang 41

JavaScript - Math

Thuộc tính / Phương thức Mô tả Ví dụ / Giải thích

PI Hằng số PI document write("PI: “ + Math PI toFixed(2));

Trang 42

JavaScript - Array

var arr = new Array(3);

arr[0] = 2, arr[1] = 0, arr[2] = 1;

Th ộ tí h/

Thuộc tính/

Phương thức Mô tả Ví dụ / Giải thích Kết quả

length Số phần tử của var x = arr.length; x == 3

Trang 43

JavaScript - Date

Th ộ í h /

Thuộc tính / Phương thức Giá trị Mô tả

getDate() getMonth()

0 – 11 xxxx

0 – 23 0- 59

Lấy các thành phần của date

r date.setDate(date.getDate() + 5); // date1 < date

// tăng ngày lên 5 ngày, tự động đổi tháng, năm

Trang 44

JavaScript – Hàm toàn cục (global functions)

isNaN() Kiểm tra 1 đối tượng có giá trị là số hay không

Number() Đổi 1 đối tượng sang kiểu số String() Đổi 1 đối tượng sang kiểu chuỗi

Trang 45

JavaScript – Hàm toàn cục (global functions)

Trang 46

JavaScript – Các hàm mở cửa sổ (pop-up windows)

alert(msg) Mở cửa sổ thông báo

confirm(msg) Mở cửa sổ chờ người dùng trả lời Yes / No

prompt(msg, defaul_value) Mở cửa sổ cho người dùng nhập

Trang 47

Trang 48

Trang 50

ĐẠI HỌC SÀI GÒN – KHOA CNTT

Trang 51

Thực hành

 Demo code JavaScript (Lưu ý cách xác

định lỗi)

 JavaScript không báo lỗi! Từ đoạn code

ó lỗi t ở ố ẽ KHÔNG đượ thự

Tiêu đề	Lập Trình Web JavaScript Cơ Bản
Tác giả	Trần Đình Nghĩa
Người hướng dẫn	TS. Trần Đình Nghĩa
Trường học	Đại Học Sài Gòn
Chuyên ngành	Khoa Công Nghệ Thông Tin
Thể loại	Khóa học
Năm xuất bản	2011
Thành phố	TP. Hồ Chí Minh

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