1. Trang chủ
  2. » Công Nghệ Thông Tin

Tài liệu hướng dẫn giảng dạy - Lập trình Web nâng cao potx

60 440 10

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 60
Dung lượng 1 MB

Nội dung

Giới thiệu bài học Nội dung bài học „ JavaScript và hỗ trợ của trình duyệt „ Sơ lược về ngôn ngữ JavaScript „ Sử dụng Visual InterDEV „ Thời điểm thực hiện một đoạn Script „ Phạm vi của

Trang 1

227 Nguyễn Văn Cừ – Quận 5 – Tp Hồ Chí Minh

Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn

Mã tài liệu: DT_NCM_LT_HDGD_LTWEBNC

TÀI LIỆU HƯỚNG DẪN GIẢNG DẠY

CHƯƠNG TRÌNH KỸ THUẬT VIÊN

Học phần 5 LẬP TRÌNH WEB NÂNG CAO

Trang 2

Mục lục

I Giới thiệu bài học 6

II JavaScript và hỗ trợ của trình duyệt 7

II.1 Đoạn JavaScript đầu tiên 8

III Sơ lược về ngôn ngữ JavaScript 9

III.1 Demo: Sử dụng Visual InterDEV để lập trình JavaScript 12

IV Thời điểm thực hiện một đoạn Script 13

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

VI Các đối tượng cơ sở trong JavaScript 16

Bài 2 Các đối tượng JavaScript trong trang Web 17 I Giới thiệu bài học 18

II Các đối tượng trong trang web 19

II.1 Sơ đồ các đối tượng trong trang web 20

II.2 Truy cập đến các đối tượng 21

III Đối tượng window và document 22

III.1 Sử dụng đối tượng Windows 23

III.2 Sử dụng đối tượng Document 26

IV Đối tượng form và các thành phần 28

IV.1 Sử dụng đối tượng form 29

IV.2 Tổng quan các đối tượng trong form 31

IV.3 Tổng quan các đối tượng trong form (tt) 32

IV.4 Đối tượng Text 33

IV.5 Đối tượng CheckBox và RadioButton 34

IV.6 Đối tượng Select 36

V Kiểm tra dữ liệu nhập trên form 38

Trang 3

Bài 3 Các đối tượng mở rộng trong JavaScript 39

I Giới thiệu bài học 40

II Xử lý các sự kiện bằng đối tượng event 41

II.1 Đối tượng event 42

II.2 Xử lý các sự kiện bàn phím 43

II.3 Xử lý các sự kiện chuột 45

III Các đối tượng mở rộng 46

III.1 Sử dụng đối tượng Image 47

III.2 Sử dụng đối tượng location 49

III.3 Sử dụng đối tượng history 50

III.4 Sử dụng đối tượng navigator 51

IV Làm việc với các frame 52

Trang 4

GIỚI THIỆU

Sau khi hoàn thành khóa học, học viên sẽ có khả năng:

• Sử dụng thành thạo ngôn ngữ JavaScript

• Sử dụng thành thạo môi trường lập trình web Visual InterDEV

• Xây dựng các ứng dụng web hoàn chỉnh

Với thời lượng là 36 tiết LT và 60 tiết TH được phân bổ như sau:

STT Bài học Số tiết LT Số tiết TH

Trang 5

GIÁO TRÌNH LÝ THUYẾT

Sử dụng giáo trình “Lập Trình Ứng Dụng Web” của tác giả Nguyễn Thái Hưng, in lần thứ 1

TÀI LIỆU THAM KHẢO

Trang 6

HƯỚNG DẪN PHẦN LÝ THUYẾT

Bài 1 TỔNG QUAN VỀ JAVASCRIPT

Tóm tắt

Lý thuyết 6 tiết - Thực hành 10 tiết

Mục tiêu Các mục chính Bài tập bắt

việc xây dựng các đọan

client-side script Truyền

đạt cho học viên những

khái niệm quan trọng về

thời điểm thực hiện của

một đoạn JavaScritp, biến

và phạm vi sử dụng cũng

như việc sử dụng các đối

tượng cơ bản của

JavaScritp như String,

I Giới thiệu bài học

II JavaScript và hỗ trợ của trình duyệt

III Sơ lược về ngơn ngữ JavaScript

IV Thời điểm thực hiện một đoạn Script

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

VI Các đối tượng cơ sở trong JavaScript

1.1 – 1.10

Trang 7

I Giới thiệu bài học

Nội dung bài học

„ JavaScript và hỗ trợ của trình duyệt

„ Sơ lược về ngôn ngữ JavaScript

„ Sử dụng Visual InterDEV

„ Thời điểm thực hiện một đoạn Script

„ Phạm vi của biến

„ Các đối tượng cơ sở trong JavaScript

Trong mô hình 3 lớp của ứng dụng web, tới giờ này bạn có thể thấy rõ vai trò xử

lý của 2 lớp CSDL và web server Nhiệm vụ của web browser lúc này vẫn chỉ là hiển thị những kết quả xử lý của web server Thực sự, client (web browser) cũng

có khả năng thực hiện các xử lý, tính toán riêng của mình

Bài này trình bày với bạn cách sử dụng JavaScript để lập trình trên Web browser Bạn sẽ biết cách sử dụng môi trường Visual InterDEV để viết các đoạn JavaScript, xác định thời điểm mà đoạn Script sẽ được thực hiện và làm việc với các đối tượng

cơ sở của JavaScript như String, Date,…

Trang 8

II J avaScript và hỗ trợ của trình duyệt

JavaScript và hỗ trợ của trình duyệt

„ Một số xử lý đơn giản không cần thiết gửi vềServer Cần có:

{ Một cơ chế thi hành chương trình tại browser{ Một công cụ để viết chương trình cho browser

„ JavaScript là công cụ lập trình Client Script phổbiến nhất

{ Được hỗ trợ bởi các web browser phổ biến{ Nhiều lập trình viên Web sử dụng, chia sẻ

Ứng dụng Web với HTML và ASP

Với HTML và ASP hay một Server script nào khác ta hoàn toàn có thể xây dựng một ứng dụng Web hoàn chỉnh với đầy đủ các tính năng về truy xuất và quản lý CSDL Mô hình ứng dụng của chúng ta đặt toàn bộ các xử lý ở Web server, mỗi lần

thực hiện một chức năng client sẽ gửi yêu cầu cho Web server và chờ nhận kết

quả

Nếu bạn đang thực hành trên máy đơn với Web server đặt chính tại máy mà bạn chạy trình duyệt hoặc trên một máy trong hệ thống mạng Intranet, tốc độ tương tác giữa Web server và Client sẽ không quan trọng hay thậm chí nhanh gần bằng tốc độ của một ứng dụng Windows Application Tuy nhiên, nếu thử ứng dụng thực

sự trên Internet, bạn sẽ thấy tốc độ là một yếu tố ảnh hưởng rất nhiều tới một ứng dụng web

Tìm cách tăng tốc độ cho ứng dụng web

Nếu cân nhắc kỹ, ta thấy một số xử lý đơn giản thực ra không cần thiết gửi về cho Server Ví dụ, nếu người dùng nhập dữ liệu sai hay thiếu thì gửi dữ liệu đó về cho Web server cũng không xử lý được Vậy, những xử lý đó có thể đặt ở vị trí nào? Cần có một cơ chế thực thi chương trình được hỗ trợ bởi trình duyệt và một công

cụ để viết chương trình chạy ngay tại trình duyệt, đó chính là Client Script mà chúng ta đã có dịp nói tới

JavaScript là công cụ lập trình Client Script phổ biến nhất Đầu tiên, nó được Nestcape xây dựng với tên gọi LiveScript LiveScript lấy nhiều ý tưởng từ Java của Sun và sau đó được đổi tên thành JavaScript Các bộ trình duyệt đầu tiên hỗ trợ JavaScript là của Nestcape, tiếp theo chân Nestcape, Microsoft cung cấp các phiên bản IE từ 4.0 hỗ trợ JavaScript để các trình duyệt web nhỏ khác “noi gương” theo Microsoft thậm chí còn tung ra ngôn ngữ Jscript của riêng mình bên cạnh VBScript khá giống với JavaScript của Nestcape

Với sự hỗ trợ của các trình duyệt, JavaScript liên tục được nâng cấp qua nhiều phiên bản và chứng tỏ được tính hiệu quả qua sự cuốn hút của nó với các nhà lập trình Web Giờ đây trên Internet, bạn có thể tìm ra vô số những đoạn JavaScript hữu dụng cho trang web của mình Ứng dụng của JavaScript có thể nói chủ yếu gồm 2 phần: Kiểm tra dữ liệu nhập và trình bày giao diện cho trang web

Trong chương này và chương kế, chúng tôi sẽ tập trung vào việc kiểm tra dữ liệu nhập Ở chương sau đó, bạn sẽ được cung cấp các ví dụ đa dạng cho các ứng dụng về giao diện của JavaScript

Trang 9

II.1 Đoạn JavaScript đầu tiên

Đoạn JavaScript đầu tiên

„ Các đoạn code JavaScript cần đặt trong tag

<Script></Script>

„ JavaScript phân biệt chữ HOA/thường

„ Đối tượng document đại diện cho trang web vàhành động write dùng để ghi một chuỗi HTML trong trang web

Ví dụ

<HEAD>

<SCRIPT LANGUAGE=javascript>

function cmdOK_onclick() { document.write(frm.txtTen.value) }

<P>Ten cua ban <INPUT id=txtTen name=txtTen>&nbsp;

<INPUT id=cmdOK name=cmdOK type=button value=OK

onclick="return cmdOK_onclick()"></P>

</FORM>

</BODY>

Khi chạy thử và nhập tên vào textbox:

Click vào nút OK, tên của bạn sẽ được hiện trên một trang web khác, chỉ có 1 dòng: Nguyen Thai Hung

Bạn cần nắm 3 điểm cơ bản sau:

Các đoạn code JavaScript cần đặt trong tag <Script></Script>

JavaScript phân biệt chữ HOA/thường

Đối tượng document đại diện cho trang web và hành động write dùng để ghi một chuỗi

HTML trong trang web

Trang 10

III Sơ lược về ngôn ngữ JavaScript

Sơ lược về ngôn ngữ JavaScript

„ Câu lệnh: khai báo, điều khiển, thực thi

„ Biến: không có kiểu, có thể (không) khai báo trước

„ Chỉ có một loại chương trình con: function

{ Luôn phải có dấu () khi gọi hàm

alert(“chuỗi thông báo”) hiện lên hộp thoại thông báo document.write(“chuỗi HTML”) ghi chuỗi HTML vào trang web promt(“nội dung nhập liệu”) hiện một hộp thoại nhập liệu

Chúng tôi không muốn dài dòng về các chi tiết của ngôn ngữ lập trình và cũng như đã làm với VBScript, bạn sẽ dễ dàng nắm những điểm chủ chốt trong cách viết chương trình bằng JavaScript

Ngoài ra, nếu bạn từng viết C hay Java bạn sẽ không cần thiết phải đọc phần này

Câu lệnh

Có thể chia các câu lệnh trong JavaScript thành 3 loại:

Các câu lệnh khai báo biến, hàm Các câu lệnh điều khiển (if, for, while) Các câu lệnh thực thiOK

Về nguyên tắc, các câu lệnh thực thi và khai báo biến phải kết thúc bằng dấu ; nhưng bạn thực sự không cần tới hai ngón tay cho ký tự rườm rà này cuối mỗi dòng

Biến

Điểm tương tự này bạn đã từng gặp trong VBScript: biến không có kiểu dữ liệu

Bạn sẽ khai báo biến bằng câu lệnh:

var <tên biến> [= <giá trị>]

gán ngay một giá trị cho biến là không cần thiết nhưng nếu có, giá trị sẽ giúp bạn

dễ xác định kiểu dữ liệu của biến hơn Biến có thể là một giá trị số, chuỗi, ngày giờ hay một đối tượng

Ví dụ:

var doc = document

" Chú ý: Hãy cẩn thận với biểu thức có nhiều biến vì JavaScript không làm tốt việc tự động chuyển đổi kiểu dữ liệu, thông thường dữ liệu được chuyển thành kiểu chuỗi

Ví dụ:

x = 5

y = “1”

z = x + y // z = “51”

Trang 11

Một số hàm đơn giản

Bạn sẽ cần vài hàm đơn giản để hiển thị thông tin sau:

alert(“chuỗi thông báo”): hiện lên hộp thoại thông báo document.write(“chuỗi HTML”): ghi chuỗi HTML vào trang web promt(“nội dung nhập liệu”): hiện một hộp thoại nhập liệu

Ví dụ:

nhập vào một chuỗi và hiện lại thông báo là chuỗi vừa nhập

ten = prompt(“Nhap vao ten cua ban:”) alert(“Xin chao, ” + ten)

document.write(“Xin chao, <b>” + ten + “</b>”)

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

Cấu if … else có dạng

if (điều kiện){

các lệnh … }else{

các lệnh … }

" Chú ý: Biểu thức điều kiện cần đặt trong dấu (), khi có nhiều điều kiện nối với nhau bạn dùng && thay cho AND, || thay cho OR và ! thay cho NOT

I là biến đếm trong vòng lặp Vòng lặp sẽ lặp trong khi điều kiện ở biểu thức thứ 2 còn đúng Biểu thức thứ 3 chỉ ra cách thay đổi giá trị của I sau mỗi lần lặp Toán

tử ++ có nghĩa tăng lên 1: I = I + 1

Ví dụ:

for ( i= 1; i <= 10; i++) document.write(i + “<br>”)

Ví dụ trên sẽ in ra trang web 10 số từ 1 đến 10, mỗi số trên một dòng

Trang 12

Cấu trúc lặp while có dạng

while (điều kiện lặp){

khối lệnh … }

Chừng nào điều kiện lặp còn đúng, vòng lặp while sẽ vẫn còn thực hiện Hãy xem

ví dụ sau biến vòng lặp for thành while:

Ví dụ:

i = 1 while (i <= 10){

document.write(i + “<br>”) i++

}

Nhiều lập trình viên cũng thích viết điều kiện lặp theo kiểu while (1) và dùng câu

lệnh break break có thể dùng cho cả for và while để thoát ra khỏi vòng lặp

Hàm

JavaScript giống C và Java, không phân biệt thủ tục và hàm, tất cả các chương trình con đều coi là hàm và phải có giá trị trả về Nếu bạn không biết phải trả về cái gì, kiểu trả về là void Tuy nhiên, JavaScript thậm chí không có kiểu nên bạn

dùng từ khoá function để khai báo hàm, không cần khai báo giá trị trả về

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

khối lệnh … }

Cũng đừng ngạc nhiên khi bạn chỉ cần liệt kê danh sách các tham số, đơn giản là

vì biến không có kiểu Nếu bạn cần trả về giá trị nào đó, hãy dùng lệnh return

return không có tham số cũng sẽ kết thúc xử lý hàm ngay tại dòng được gọi

Ví dụ:

function SoNT(n){

SoNT = (n > 1) for (i=2; i<n; i++)

if (i % n = 0) return false }

Hàm trên kiểm tra số n có phải là số nguyên tố hay không

Trang 13

III.1 Demo: Sử dụng Visual InterDEV để lập trình

Trang 14

IV Thời điểm thực hiện một đoạn Script

Thời điểm thực hiện một đoạn Script

„ Các lệnh không nằm trong function được thực hiện ngay lập tức

„ Function chỉ thực hiện khi được gọi Function cóthể được gọi

{ Do một sự kiện{ Do một câu lệnh

Khi viết chương trình, điều quan trọng mà người lập trình cần biết là thời điểm mà một dòng lệnh được thực hiện Bạn có thể chèn các đoạn JavaScript ở bất cứ đâu trong trang web tuy nhiên, thời điểm mà các script đó được thực hiện như sau: Các lệnh JavaScript không nằm trong function sẽ được thực hiện ngay khi trình duyệt xử lý trang web vào lúc khởi động

Các function chỉ thực hiện khi được gọi Một function được gọi từ một lệnh JavaScript hay bởi một sự kiện mà nó xử lý

Một số sự kiện tự động phát sinh trong khi một số sự kiện phát sinh do tác động của người dùng

function window_onload() { alert("Khoi dong")

Trang 15

<INPUT id=button1 type=button value=Button name=button1

Khi thực hiện ví dụ trên, bạn sẽ thấy kết quả là trang web như sau:

Trang web sẽ hiện ra trước khi hộp thông báo “Khoi dong” hiển thị Các đoạn document.write không nằm trong function và được thực hiện theo thứ tự từ trên xuống dưới trong trang web

Function windows_onload() được thực hiện do sự kiện onload của đối tượng window phát sinh Trong trang web, đối tượng window được coi là tag <body> Hộp thông báo hiện ra sau khi toàn bộ trang web đã được hiển thị chứng tỏ sự kiện onload diễn ra sau khi toàn bộ document đã được trình duyệt xử lý

Khi bạn click vào Button, hộp thông báo “Button click!!!” hiện lên, đây là thời điểm

mà function button1_onclick được thực hiện

Trang 16

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

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

„ Biến cục bộ chỉ có thể tham chiếu trong phạm vi của hàm mà nó được khai báo

„ Biến toàn cục phải được khai báo ở ngoài các hàm

và có phạm vi sử dụng trong toàn bộ trang web

Phạm vi sử dụng biến cũng là mối quan tâm không nhỏ của người lập trình JavaScript cũng phân biệt hai loại biến:

Biến toàn cục: Khai báo ngoài phạm vi của các function Biến cục bộ: Khai báo trong một function

Phạm vi của biến cục bộ là function mà nó khai báo Điều này có nghĩa là các câu lệnh nằm ngoài function khi tham chiếu tới biến này thì sẽ có thể gây ra lỗi Đương nhiên là bạn không gặp lỗi gì cả nếu bạn tham chiếu tới biến đó để gán giá trị vì điều này cũng giống như bạn khai báo một biến mới vậy

Phạm vi của biến toàn cục là toàn bộ trang web Điều này có nghĩa là giữa các

đoạn <Script> khác nhau, bạn vẫn có thể chia sẻ một biến toàn cục Biến toàn cục chỉ có phạm vi trong một trang web, không liên quan gì tới trang web khác trong cùng một website, nếu bạn muốn lưu một biến toàn cục trong website, bạn

var y = 10 x++

document.write("x=" + x + ", y=" +y) }

</SCRIPT>

Trang 17

</BODY>

VI Các đối tượng cơ sở trong JavaScript

Các đối tượng cơ sở trong JavaScript

„ JavaScript sử dụng các ĐỐI TƯỢNG để xử lý dữ liệu

„ Các đối tượng cơ bản: String, Math, Date, Array

“JavaScript”.toUpperCase () //JAVASCRIPT

a = new Array() a(2) = 3

JavaScript cung cấp các hàm công cụ thông qua những đối tượng Khi cần xử lý các loại dữ liệu cơ bản kiểu chuỗi, số, ngày giờ hay mảng ta sẽ dùng những đối tượng tương ứng:

String: xử lý dữ liệu chuỗi Math: xử lý dữ liệu số Date: xử lý dữ liệu ngày, giờ Array: xử lý dữ liệu mảng

Vì một biến trong JavaScript không có kiểu dữ liệu, JavaScript sẽ dựa vào giá trị chứa trong biến để xác định biến đó thuộc loại đối tượng nào Ví dụ sau đây minh hoạ cách sử dụng đối tượng String

JavaScript cũng có thể áp dụng các hành động (method) hay thuộc tính (property) trực tiếp trên các giá trị

Trang 18

Bài 2 Các đối tượng JavaScript trong trang Web

Tóm tắt

Lý thuyết 6 tiết - Thực hành 8 tiết

Mục tiêu Các mục chính Bài tập bắt

tượng trong trang web

dựa vào sơ đồ các đối

tượng được trình bày ở

đầu bài giảng Bên cạnh

việc hướng dẫn sử dụng

từng đối tượng cụ thể,

giáo viên nên thường

xuyên tham chiếu lại sơ

đồ đối tượng để học viên

I Giới thiệu bài học

II Các đối tượng trong trang web III Đối tượng window và document

IV Đối tượng form và các thành phần

V Kiểm tra dữ liệu nhập trên form

2.1 – 2.5

Trang 19

I Giới thiệu bài học

Nội dung bài học

„ Các đối tượng trong trang web

„ Đối tượng window và document

„ Đối tượng form và các thành phần

„ Kiểm tra dữ liệu nhập trên form

Ở bài trước, bạn đã nắm hết các nền tảng của JavaScript bao gồm các đối tượng

cơ bản, cách đưa script vào trang web và cách xử lý các sự kiện phát sinh từ trang web Trong bài này, chúng ta sẽ tiếp tục với những đối tượng như form, textbox, button,… Làm sao để truy cập đến những đối tượng này? Chúng có những thuộc tính và sự kiện gì? Nắm được những điểm này, bạn đã có thể toàn quyền kiểm soát được trang web trong khi người dùng thao tác

Trang 20

II Các đối tượng trong trang web

Các đối tượng trong trang web

„ Sơ đồ các đối tượng trong trang web

„ Truy cập đến các đối tượng

Về mặt cấu trúc, trang web có thể coi là một tài liệu với các thành phần bên trong như các liên kết, hình ảnh, form,… Để có thể làm việc với từng thành phần đó, JavaScript cung cấp cho người lập trình một sơ đồ tổ chức các đối tượng phân cấp trong trang web Dựa trên sơ đồ này, người lập trình có thể truy cập và làm việc được với bất kỳ đối tượng nào

Trang 21

II.1 Sơ đồ các đối tượng trong trang web

Sơ đồ các đối tượng trong trang web

window document navigator event location history screen

form image all styleSheet link anchor

text textarea radio checkbox button select option password

Đọc sơ đồ đối tượng là một kỹ năng rất quan trọng của người lập trình Hầu hết các ngôn ngữ lập trình đều sử dụng kỹ thuật lập trình hướng đối tượng, do đó, khi làm việc người viết chương trình chỉ cần nắm vững các đối tượng và mối liên hệ giữa chúng là có thể xử lý rất nhiều công việc thông thường

Dưới đây là sơ đồ các đối tượng trong trang web, sơ đồ này sẽ giúp bạn nhìn ra cách truy cập đến bất cứ đối tượng nào

window

documen navigator event location history screen

form image all styleShee link anchor

text textarea radio checkbox button select option password

Trang 22

II.2 Truy cập đến các đối tượng

Truy cập đến các đối tượng

„ Truy cập các đối tượng:

Truy cập các thành phần trong đối tượng

Toán tử (.) chính là cách để bạn truy cập vào các thành phần bên trong của một đối tượng Một đối tượng có thể bao gồm các thành phần: thuộc tính, hành động

và sự kiện

Thuộc tính tập hợp

Trong các thuộc tính có một loại thuộc tính đặc biệt là các tập hợp hay đơn giản có thể coi là các mảng Ví dụ, trong document sẽ có một tập hợp các form Tập hợp này có tên là forms (chú ý đến chữ s ở cuối) Nếu trong trang web chỉ có một form

là frmThongTin bạn có thể truy cập frmThongTin như sau:

document.forms(0) document.frmThongTin

Đôi khi, việc sử dụng sơ đồ đối tượng để truy cập các đối tượng trong trang web

sẽ trở nên dài dòng vì ngoài việc truy cập tới đối tượng, mục tiêu chính của bạn là

sử dụng những thuộc tính hay hành động của nó Lúc này, ta thường khai báo thêm biến để lưu lại đối tượng muốn sử dụng:

var f = document.frmThongTin f.txtTen.value = “Nguyen Thai Hung”

Trang 23

III Đối tượng window và document

Đối tượng window và document

„ Sử dụng đối tượng Windows

„ Sử dụng đối tượng Document

Hai đối tượng ở cấp cao nhất trong sơ đồ các đối tượng là window và document Hai đối tượng này nắm quyền kiểm soát trang web và cửa sổ hiển thị nó So sánh với ứng dụng trên Windows, đối tượng window cũng tương tự như đối tượng form trong khi document có thể là một đối tượng chính mà form hiển thị và xử lý

Trang 24

III.1 Sử dụng đối tượng Windows

Sử dụng đối tượng Windows

„ Đối tượng window đại diện cho cửa sổ trình duyệt

chứa trang web

Trên sơ đồ đối tượng, bạn có thể thấy đối tượng window nằm ở mức cao nhất,

không có đối tượng nào chứa nó window đại diện cho cửa sổ chứa trang web

<P><INPUT id="" type=button value="New window" name=cmdNew

onclick="return cmdNew_onclick()"> &nbsp;

<INPUT type=button value=Close name=cmdClose onclick="return

cmdClose_onclick()"></P>

</BODY>

Ví dụ trên minh hoạ hai hành động close và open của window Khi click vào nút New window, một cửa sổ trình duyệt mới sẽ hiện truy cập tới trang web của

Yahoo! Đây là cách mà các trang web vẫn “làm phiền” bạn mỗi khi truy cập tới

nó, một loạt các cửa sổ popup hiện ra các trang quảng cáo!

Hành động open có cú pháp như sau:

window.open(“URL”,”Tên cửa sổ”,”Các đặc điểm”)

trong đó, các đặc điểm của cửa số như toolbar, statusbar, width, heigh,… Ví dụ sau mở một cửa số mới không có thanh toolbar và statusbar, rộng 200, dài 300 và

có thể thay đổi kích thước

window.open("http://www.yahoo.com","","toolbar=0, statusbar=0,width=200,height=300,resizable=1")

Trang 25

Thuộc tính status

Thanh statusbar của cửa sổ trình duyệt dùng để hiển thị các thông tin như địa chỉ URL của một mối liên kết, trạng thái download của trang web, khởi động applet,… Một số trang web tận dụng JavaScript để biến statusbar thành nơi hiển thị tiêu đề trang web với các ký tự chạy qua chạy lại,… Bạn cũng thường dùng statusbar khi cần đưa ra những giúp đỡ khi người dùng di chuyển chuột tới một vị trí nào đó trên trang web Trong trang web của ví dụ trên, bạn có thể sử dụng sự kiện onMouseOver của cmdClose để hiện thông báo trên statusbar như “Dong cua so nay.”

window.status = “Dong cua so nay.”

Hành động setInterval và clearInterval

window.setInterval() dùng để định khoảng chu kỳ thời gian một hành động được thi hành Ngược lại với nó, window.clearInterval() dùng để xoá bỏ chu kỳ thời

gian mà setInterval() đã tạo ra

Để tạo ra một chu kỳ thời gian và thực hiện một hành động:

Trang 26

} function cmdOn_onclick() {

window.clearInterval(id)

id = window.setInterval("time()",1000)

} function cmdOff_onclick() {

<INPUT id="" name=txtTime>&nbsp;

<INPUT id="" type=button value=ON name=cmdOn onclick="return cmdOn_onclick()">&nbsp;

<INPUT id="" type=button value=OFF name=cmdOff onclick="return cmdOff_onclick()">

if (window.confirm(“Ban co muon dong cua so nay khong?”)) window.close()

Trang 27

III.2 Sử dụng đối tượng Document

Sử dụng đối tượng Document

„ Đối tượng document đại diện cho toàn bộ nội dung

của trang web

„ Mỗi trang web chỉ có một đối tượng document

„ Truy cập đối tượng document

„ Sử dụng đối tượng document

doc = window.document //sau đó sử dụng doc hoặc

Một trang web chỉ có một đối tượng document giống như chỉ có một đối tượng window Bạn có thể truy cập tới document bằng hai cách:

doc = window.document //sau đó sử dụng doc hoặc document

Cách trên thường dùng khi doc là đối tượng document của một cửa sổ mới mở Hãy xem ví dụ sau:

Ví dụ

document.write(“<H1>Hành động write của document</H1>”)

Ví dụ trên minh hoạ hành động write của đối tượng document

Ví dụ

win = window.open() doc = win.document doc.write("<a href='JavaScript:window.close()'>Close window</a>")

Ví dụ này tạo ra một trang web mới theo kiểu “on the fly” tức là không cần một file html cụ thể mà trực tiếp thông qua hành động write

Trong cả hai ví dụ, bạn có thể xem source code của trang web mới để xem kết quả của write như thế nào

Trang 28

Tập hợp all

Internet Explorer từ phiên bản 4.0 cung cấp thêm tập hợp all trong đối tượng

document Mục tiêu của all là đơn giản hoá việc truy cập các đối tượng qua nhiều cấp Dưới all, bạn có thể chỉ tới bất cứ đối tượng nào, chẳng hạn một textbox nằm trong một form

Ví dụ, nếu ta có một textbox txtUserName trong form frmUserInfo, bạn có 2 cách truy cập:

document.frmUserInfo.txtUserName document.all.txtUserName

Chúng ta sẽ còn gặp lại document rất nhiều trong các phần sau, do đó, tới đây chúng tôi xin tạm dừng phần document để đề cập tới phần quan trọng nhất: xử lý form với JavaScript

Trang 29

IV Đối tượng form và các thành phần

Đối tượng form và các thành phần

„ Sử dụng đối tượng form

„ Tổng quan các đối tượng trong form

„ Đối tượng Text

„ Đối tượng CheckBox và RadioButton

„ Đối tượng Select

JavaScript có thể thực hiện khá nhiều thao tác trên giao diện, xử lý các cửa sổ web browser, thực hiện các hiệu ứng hình ảnh,… Tuy nhiên, một trong những điểm mạnh mà nó đem lại cho người lập trình là khả năng xử lý các form nhập liệu của trang web Với khả năng này, JavaScript giúp ứng dụng thực hiện nhiều xử lý tại server, làm cho tốc độ xử lý và thời gian hồi đáp với người dùng của chương trình được cải thiện

Trong phần này, bạn sẽ học các sử dụng JavaScirpt để truy cập vào các form, đọc

và xử lý các thông tin nhập liệu trên form hay xử lý các sử kiện mà người dùng trong quá trình thao tác với form phát sinh ra cũng giống nhưng việc lập trình trên các màn hình của một ứng dụng Windows

Trang 30

IV.1 Sử dụng đối tượng form

Sử dụng đối tượng form

„ Mỗi form được đại diện bởi một đối tượng form

„ Truy cập đối tượng form qua document.formshoặc document.tenForm

„ Thuộc tính action, target và method

„ Hành động submit và reset

Một form trong trang web được đại diện bởi đối tượng form Do một trang web có

thể có nhiều form JavaScript cho phép bạn truy cập các form từ đối tượng

document thông qua tập hợp forms Ví dụ, để truy cập form đầu tiên trong trang

web:

document.forms(0) hoặc

document.TênForm

Thuộc tính action, target và method

Ta đã biết rằng chức năng chính của form là để gửi dữ liệu đến server File tại server sẽ nhận dữ liệu gửi tới được chỉ ra trong thuộc tính action của tag <form> Đối tượng form cũng mô phỏng thuộc tính action một cách tương tự Với thuộc tính này, bạn có thể thay đổi file sẽ nhận dữ liệu tuỳ theo từng điều kiện nhập liệu

Ví dụ, trên form đăng nhập frmLogin bạn có một checkbox dành cho người quên password đăng nhập vào sẽ chuyển tới một trang kiểm tra email để gửi password thay vì trang kiểm tra username, password như bình thường Ta có thể viết đoạn code sau:

Ví dụ:

Nếu checkbox được chọn frmLogin.action=”SendPassword.asp”

Ngược lại frmLogin.action=”CheckPassword.asp”

frmLogin.submit()

Thuộc tính target giúp định vị kết quả xử lý của trang web trong action sẽ được hiển thị ở đâu Khi ứng dụng web thiết kế với nhiều frame, bạn có thể cần chỉ ra tên frame sẽ thể hiện kết quả trong target

Tương tự với action, bạn có thể thay đổi cách thức gửi dữ liệu từ form về server thông qua thuộc tính method method có hai giá trị là “POST” và “GET”

Ngày đăng: 04/07/2014, 05:21

HÌNH ẢNH LIÊN QUAN

Sơ đồ các đối tượng trong trang web - Tài liệu hướng dẫn giảng dạy - Lập trình Web nâng cao potx
Sơ đồ c ác đối tượng trong trang web (Trang 21)
Sơ đồ quan hệ giữa các bảng - Tài liệu hướng dẫn giảng dạy - Lập trình Web nâng cao potx
Sơ đồ quan hệ giữa các bảng (Trang 57)
Hình 3.1 – Trang ChuyenBay.asp - Tài liệu hướng dẫn giảng dạy - Lập trình Web nâng cao potx
Hình 3.1 – Trang ChuyenBay.asp (Trang 58)
Hình 3.2 – Thông tin đặt vé - Tài liệu hướng dẫn giảng dạy - Lập trình Web nâng cao potx
Hình 3.2 – Thông tin đặt vé (Trang 59)

TỪ KHÓA LIÊN QUAN

TRÍCH ĐOẠN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w