Bài giảng môn Thiết kế web - Phần 2: Ngôn ngữ kịch bản JavaScript

Bài giảng môn Thiết kế web - Phần 2: Ngôn ngữ kịch bản JavaScript trình bày tổng quan về JavaScript, ngôn ngữ kịch bản JavaScript, đối tượng và sự kiện. Bài giảng phục vụ cho các bạn chuyên ngành Công nghệ thông tin và những bạn quan tâm tới vấn đề này.

Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript Chương 01 TỔNG QUAN VỀ JAVASCRIPT Giới Thiệu Nhúng JavaScript vào trang Web Các lệnh I Giới thiệu Với HTML cho ta biết cách tạo trang Web - nhiên mức biểu diễn thông tin chưa phải trang Web động có khả đáp ứng kiện từ phía người dùng Hãng Netscape đưa ngơn ngữ script có tên LiveScript để thực chức Sau ngơn ngữ đổi tên thành JavaScript để tận dụng tính đại chúng ngơn ngữ lập trình Java Mặc dù có điểm tương đồng Java JavaScript, chúng hai ngôn ngữ riêng biệt JavaScript ngôn ngữ dạng script gắn với file HTML Nó khơng biên dịch mà trình duyệt diễn dịch, trình duyệt đọc JavaScript dạng mã nguồn Chính ta dễ dàng học JavaScript trang Web có sử dụng JavaScript JavaScript ngơn ngữ dựa đối tượng, nghĩa bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất chức tốn học Tuy JavaScript khơng ngôn ngữ hướng đối tượng C++ hay Java khơng hỗ trợ lớp hay tính thừa kế II Nhúng JavaScript vào File HTML Sử dụng cách sau: • Sử dụng câu lệnh hàm cặp thẻ • Sử dụng File nguồn JavaScript • Sử dụng biểu thức JavaScript làm giá trị thuộc tính HTML • Sử dụng thẻ kiện (event handlers) thẻ HTML Trong đó, sử dụng cặp thẻ nhúng File nguồn JavaScript sử dụng nhiều Nhúng JavaScript vào trang HTML JavaScript đưa vào File HTML cách sử dụng cặp thẻ Nếu đặt phần , tải sẵn sàng trước phần lại văn tải.Sử dụng cú pháp sau : // Chèn mã Javacript vào Ví dụ: Tạo trang web (Clock1.htm) sử dụng nhúng mã JavaScript trực tiếp vào trang Ghi chú: Có thể sưu tầm mã JavaScript từ Website http://www.javascriptbank.com.vn, www.echip.com.vn Biên sọan: Dương Thành Phết Trang 31 Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript Sử dụng File nguồn JavaScript Dùng phương pháp hay nhúng trực tiếp lệnh JavaScript vào trang HTML Cú pháp: Ví dụ: Các File JavaScript bên chứa câu lệnh JavaScript định nghĩa hàm Tên File hàm JavaScript bên ngồi cần có js, Ví dụ: Tạo trang web(Clock.htm) sử dụng nhúng mã JavaScript thông qua tập tin Javascript III Các lệnh Cú pháp lệnh : JavaScript xây dựng hàm, phát biểu, toán tử biểu thức dòng kết thúc ; Cách gọi phương thức đối tượng sau: object_name.property_name; VÍ Dụ: document.write("Chào bạn!"); Hiển thị dòng văn Đối tượng document JavaScript thiết kế sẵn hai phương thức để xuất dịng văn hình client: write() writeln() document.write(“Chuỗi văn bản”); Ví dụ: document.write("Chào bạn"); document.writeln(“Chúc bạn vui vẽ!”); Phương thức write(): Xuất hình dịng văn khơng xuống dịng Phương thức writeln(): Sau viết xong dòng văn tự động xuống dịng Ghi chú: Có thể dùng “+” để ghép nhiều chuỗi ký tự Cho phép dùng kí tự đặc biệt chuổi: \n : Xuống dòng \t : Tab Khi có dùng ký tự đặc biệt lệnh Writeln phải đặt khối JavaScript cặp thẻ (Thẻ quy định văn định dạng trước) Ví dụ: Tạo trang (OutputText.htm) để phân biệt khác write() writeln(): document.writeln("One,"); document.write("Two,\n"); document.write("Three "); document.write(" "); Biên sọan: Dương Thành Phết Trang 32 Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript Hiển thị hộp thoại thông báo –Lệnh alert() Cú pháp: alert("Câu thơng báo"); Khi chờ người sử dụng nhấn vào nút OK Thông thường, cách thức alert() sử dụng trường hợp: • Thơng tin đưa vào form khơng hợp lệ • Kết sau tính tốn khơng hợp lệ • Khi dịch vụ chưa sẵn sàng để truy nhập liệu Ví dụ: Tạo trang (Thongbao.htm) alert("Chào mừng bạn đến với JavaScript! \n Nhấn Ok để tiếp tục"); Chúc bạn thành công!!! Giao tiếp với người sử dụng – Lệnh prompt() Một hộp thoại gồm dịng thơng báo, trường nhập liệu, nút OK nút Cancel Người sử dụng nhập vào trường kích vào OK Khi đó, ta xử lý liệu vừa đưa vào Cú pháp: window.prompt("Câu thông báo",”nội dung mặc định”); Ví dụ: Tạo trang (Hello.htm) thị hộp thoại hỏi tên người dùng sau hiển thị thông báo chào tên đưa vào var name=window.prompt("Xin chào!Bạn tên gì?",""); document.write("Xin chào bạn " + name + " ! Chúc bạn học tốt JavaScript "); Biên sọan: Dương Thành Phết Trang 33 Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript Hỏi đáp người sử dụng – Lệnh confirm() Lệnh confirm() tạo hộp thoại gồm dịng thơng báo, nút OK nút Cancel Người sử dụng click vào OK Khi xử lý thực hành động theo yêu cầu, ngược lại Click vào Cancel bỏ đóng hộp thọai thông bao Thường sử dụng trường hỏi đáp, xác nhận định xử lý thơng tin từ phía người dùng Cú pháp: confirm("Câu thơng báo hỏi ?"); Ví dụ: Tạo trang (HoiDap.htm) sau function Hoidap(){ question = confirm("Bạn thật muốn truy cập Website") if (question !="0"){ top.location = "http://www.tuoitre.com.vn/" } } Hãy click vào để truy cập website:Báo Tuổi Trẻ Biên sọan: Dương Thành Phết Trang 34 Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript Chương 02 NGÔN NGỮ KỊCH BẢN JAVASCRIPT Biến khai báo biến Kiểu liệu Lệnh, khối lệnh Toán tử biểu thức Cấu trúc lập trình Mảng Hàm I Biến Cũng ngơn ngữ lập trình khác javascript dùng biến để lưu trữ giá trị nhập vào, giá trị tính tốn Nói cách khác biến vùng nhớ sử dụng để lưu trữ giá trị khác trình chương trình hoạt động Mỗi biến có tên, Tên biến JavaScript phải bắt đầu ký tự Phạm vi biến hai kiểu sau: • Biến tồn cục: Có thể truy cập từ đâu ứng dụng Được khai báo: x = 0; • Biến cục bộ: Chỉ truy cập phạm vi chương trình mà khai báo Biến cục khai báo hàm với từ khoá var: var x = 0; II Kiểu liệu Khác với C++ hay Java, JavaScript ngơn ngữ có tính định kiểu thấp Nghĩa khơng phải kiểu liệu cho biến Kiểu liệu tự động chuyển thành kiểu phù hợp cần Ví dụ: Tạo trang (DataType.htm) sau var a='Trái táo'; var n=12; n = n + 20; var tb ="Có tất " + n + " " + a; document.write(tb); Trong JavaScript, có bốn kiểu liệu sau đây: KIểu nguyên (Interger) Số nguyên biểu diễn theo ba cách: Hệ số 10 (hệ thập phân), Hệ số (hệ bát phân) Hệ số 16 (hệ thập lục phân) -Với hai chữ số 0x (VÍ Dụ: 0x5F) Kiểu dấu phẩy động (Floating Point) Một biến có kiểu dấu phẩy động có thành phần sau: Phần nguyên thập phân Dấu chấm thập phân (.) Phần dư Phần mũ Ví dụ: 9.87 hay Biên sọan: Dương Thành Phết -0.85E4 Trang 35 Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript Kiểu logic (Boolean) Kiểu logic sử dụng để hai điều kiện : sai Miền giá trị kiểu có hai giá trị : true , false Kiểu chuỗi (String) Một biến kiểu chuỗi biểu diễn không hay nhiều ký tự đặt cặp dấu " " hay ' ' Ví dụ: “The dog ran up the tree” hay “100” Ghi chú: Để biểu diễn dấu nháy kép ( " ), chuỗi sử dụng ( \" ), Ví dụ: document.write(“ \”This text inside quotes.\” ”); III Lệnh, khối lệnh JavaScript Các câu lệnh JavaScript kết thúc dấu chấm phẩy (;) Một khối lệnh đoạn chương trình gồm hai lệnh trở lên đặt cặp ngoặc nhọn: { } Bên khối lệnh chứa hay nhiều khối lệnh khác { // khối { // khối lệnh 2.1 lệnh 2.2 … } // kết thúc khối lệnh lệnh 1.1 lệnh 1.2 } // kết thúc khối lệnh IV Tóan tử & Biểu thức JavaScript Định nghĩa phân loại biểu thức Tập hợp biến toán tử nhằm đánh giá giá trị gọi biểu thức (expression) Về có ba kiểu biểu thức: • Số học: Nhằm để lượng giá giá trị số VÍ Dụ: (3+4)+(84.5/3) 197.1666666667 • Chuỗi: Nhằm để đánh giá chuỗi VÍ Dụ: "The dog”+”barked!" “The dog barked!” • Logic: Nhằm đánh giá giá trị logic VÍ Dụ: 23>32 False Ngịai JavaScript hỗ trợ biểu thức điều kiện, cú pháp sau: (condition) ? valTrue : valFalse False Nếu điều kiện condition đúng, biểu thức nhận giá trị valTrue, ngược lại nhận giá trị Ví dụ: ketqua = (diemtb>=5) ? "Đậu" : "Rớt" Trong ví dụ biến ketqua gán giá trị "Đậu" giá trị biến tdiemtb lớn 5; ngược lại nhận giá trị "Rớt" Biên sọan: Dương Thành Phết Trang 36 Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript Các Toán tử Toán tử sử dụng để thực phép tốn Được nhóm thành loại sau đây: gán, so sánh, số học, chuỗi logic = Gán giá trị toán hạng bên phải cho toán hạng bên trái == (Bằng)Trả lại giá trị toán hạng bên trái toán hạng bên phải != (Khác)Trả lại giá trị toán hạng bên trái khác toán hạng bên phải > Trả lại giá trị toán hạng bên trái lớn toán hạng bên phải >= (Lớn bằng)Trả lại giá trị toán hạng bên trái lớn toán hạng bên phải < Trả lại giá trị toán hạng bên trái nhỏ toán hạng bên phải = 12) ? 'Buổi chiều ' : ' Buổi sáng '; myminutes = mydate.getMinutes(); myminutes = ((mytime < 10) ? ':0' : ':') + mytime; if(myday == 0) day = " Chủ nhật , "; else if(myday == 1) day = " Thứ hai , "; else if(myday == 2) day = " Thứ ba, "; else if(myday == 3) day = " Thứ tư, "; else if(myday == 4) day = " Thứ năm , "; else if(myday == 5) day = " Thứ sáu , "; else if(myday == 6) day = " Thứ bảy , "; document.write("" +"Bây là: "+ ampmhour + "" + myminutes +" "+ ampm) document.write(" - " + day + " Ngày " + myweekday +" "); document.write( " Tháng " + mymonth + " Năm " + year + ""); Đối tượng Math Đối tượng Math đối tượng nội JavaScript Các thuộc tính đối tượng chứa nhiều số toán học, hàm toán học, lượng giác phổ biến Các thuộc tính E LN2 LN10 LOG2E PI SQRT1_2 Biên sọan: Dương Thành Phết Hằng số Euler, khoảng 2,718 logarit tự nhiên 2, khoảng 0,693 logarit tự nhiên 10, khoảng 2,302 logarit số e, khoảng 1,442 Giá trị , khoảng 3,14159 Căn bậc 0,5, khoảng 0,707 Trang 56 Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript SQRT2 Các phương thức Math.abs (number) Math.acos (number) Math.asin (number) Math.atan (number) Math.ceil (number) Math.cos (number) Math.exp (number) Math.floor (number) Math.log (number) Math.max (num1,num2) Math.min (num1,num2) Math.pos (base,exponent) Math.random (r) Math.round (number) Math.sin (number) Math.sqrt (number) Math.tan (number) Căn bậc 2, khoảng 1,414 Trả lại giá trị tuyệt đối number Trả lại giá trị arc cosine (theo radian) number Giá trị number phải nămg Trả lại giá trị arc sine (theo radian) number Giá trị number phải nămg Trả lại giá trị arc tan (theo radian) number Trả lại số nguyên nhỏ lớn number Trả lại giá trị cosine number Trả lại giá trị e^ number, với e số Euler Trả lại số nguyên lớn nhỏ number Trả lại logarit tự nhiên number Trả lại giá trị lớn num1 num2 Trả lại giá trị nhỏ num1 num2 Trả lại giá trị base luỹ thừa exponent Trả lại số ngẫu nhiên Phwong thức thực tảng UNIX Trả lại giá trị number làm tròn tới số nguyên gần Trả lại sin number Trả lại bậc number Trả lại tag number Đối tượng String Đối tượng String đối tượng xây dựng nội JavaScript cung cấp nhiều phương thức thao tác chuỗi Các phương thức str.anchor (name) str.big() str.blink() str.bold() str.charAt(a) str.fixed() str.fontcolor() str.fontsize(size) str.index0f(srchStr [,index]) str.italics() str.lastIndex0f(srchStr [,index]) str.link(href) str.small() str.strike() str.sub() str.substring(a,b) str.sup() str.toLowerCase() Biên sọan: Dương Thành Phết Được sử dụng để tạo thẻ (một cách động) Tham số name thuộc tính NAME thẻ Kết giống thẻ chuỗi str Kết giống thẻ chuỗi str Kết giống thẻ chuỗi str Trả lại ký tự thứ a chuỗi str Kết giống thẻ chuỗi str Kết giống thẻ Kết giống thẻ Trả lại vị trí chuỗi str vị trí xuất chuỗi srchStr Chuỗi str tìm từ trái sang phải Tham số index sử dụng để xác định vị trí bắt đầu tìm kiếm Kết giống thẻ chuỗi str Trả lại vị trí chuỗi str vị trí xuất cuối chuỗi srchStr Chuỗi str tìm từ phải sang trái Tham số index sử dụng để xác định vị trí bắt đầu tìm kiếm Được sử dụng để tạo kết nối HTML động cho chhuỗi str Tham số href URL đích liên kết Kết giống thẻ chuỗi str Kết giống thẻ chuỗi str Tạo subscript cho chuỗi str, giống thẻ Trả lại chuỗi str ký tự từ vị trí thứ a tới vị trí thứ b Các ký tự đếm từ trái sang phải Tạo superscript cho chuỗi str, giống thẻ Đổi chuỗi str thành chữ thường Trang 57 Bài Giảng Môn Thiết Kế Web str.toUpperCase() Phần : Ngôn Ngữ Kịch Bản JavaScript Đổi chuỗi str thành chữ hoa Đối tượng history Đối tượng sử dụng để lưu giữ thông tin URL trước người sử dụng sử dụng Danh sách URL lưu trữ theo thứ tự thời gian Các thuộc tính Length - Số lượng URL đối tượng Các phương thức history.back() - Được sử dụng để tham chiếu tới URL thăm trước history.forward() - Được sử dụng để tham chiếu tới URL danh sách history.go (delta | "location") - Được sử dụng để chuyển lên hay chuyển xuống delta bậc hay di chuyển đến URL xác định location danh sách Dịch chuyển lên phía delta dương xuống phía delta âm Đối tượng links Đối tượng link đoạn văn hay ảnh xem siêu liên kết Các thuộc tính đối tượng link chủ yếu xử lý URL siêu liên kết VÍ Dụ:http:// www.abc.com/ chap1/page2.html#topic3 Các thuộc tính hash Tên anchor vị trí thời (VÍ DỤ: topic3) Host Phần hostname:port URL (VÍ DỤ: www.abc.com) Hostname Tên host domain (VÍ DỤ: ww.abc.com) href Tồn URL cho document Pathname Phần đường dẫn URL (VÍ DỤ: /chap1/page2.html) port Cổng truyền thơng sử dụng cho máy tính host, thường cổng ngầm định Protocol Giao thức sử dụng (cùng với dấu hai chấm) (VÍ DỤ: http:) Search Câu truy vấn tìm kiếm cuối URL cho script CGI Target Giống thuộc tính TARGET Đối tượng location thời Các thuộc tính đối tượng location trì thơng tin URL document Ví dụ: http:// www.abc.com/ chap1/page2.html#topic3 Các thuộc tính hash Tên anchor vị trí thời (VÍ DỤ: topic3) Host Phần hostname:port URL (VÍ DỤ: www.abc.com ) Hostname Tên host domain (VÍ DỤ: www.abc.com ) href Tồn URL cho document Pathname Phần đường dẫn URL (VÍ DỤ: /chap1/page2.html) Port Cổng truyền thông sử dụng cho máy tính host, thường cổng ngầm định Protocol Giao thức sử dụng (cùng với dấu hai chấm) (VÍ DỤ: http:) Search Câu truy vấn tìm kiếm cuối URL cho script CGI Đối tượng Navigator Đối tượng sử dụng thông tin trình duyệt số phiên Đối tượng khơng có phương thức hay kiện Các thuộc tính appCodeName AppName Biên sọan: Dương Thành Phết Xác định tên mã nội trình duyệt (Atlas) Xác định tên trình duyệt Trang 58 Bài Giảng Mơn Thiết Kế Web AppVersion userAgent Phần : Ngôn Ngữ Kịch Bản JavaScript Xác định thông tin phiên đối tượng navigator Xác định header user - agent 10 Đối tượng document Đối tượng chứa thông tin document thời Đối tượng document tạo cặp thẻ Một số thuộc tính gắn với thẻ Các thuộc tính alinkColor Giống thuộc tính ALINK anchor Mảng tất anchor document bgColor Giống thuộc tính BGCOLOR cookie Sử dụng để xác định cookie fgColor Giống thuộc tính TEXT forms Mảng tất form document lastModified Ngày cuối văn sửa linkColor Giống thuộc tính LINK links Mảng tất link document location URL đầy đủ văn referrer URL văn gọi title Nội dung thẻ vlinkColor Giống thuộc tính VLINK Các phương thức document.clear Xố document thời document.close Đóng dịng liệu vào đưa tồn liệu hình document.open (["mineType"]) Mở stream để thu thập liệu vào phương thức write writeln document.write(expression1 [,expression2] [,expressionN]) Viết biểu thức HTML lên văn trông cửa sổ xác định document.writeln (expression1 [,expression2] [,expressionN] ) Giống phương thức hết biểu thức lại xuống dòng LỜI KẾT Bạn tham khảo tồn diện JavaScript Teach Yourself JavaScript in 14 Days, JavaScript Guide Do JavaScript ngơn ngữ cịn có thay đổi nhanh chóng, bạn nên đến với trang Web hãng Netscape ( http://www.netscape.com ) để có thơng tin ngôn ngữ Biên sọan: Dương Thành Phết Trang 59 ... thành phần sau: Phần nguyên thập phân Dấu chấm thập phân (.) Phần dư Phần mũ Ví dụ: 9.87 hay Biên sọan: Dương Thành Phết -0 .85E4 Trang 35 Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript. .. 45 Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript Một số kiện JavaScript: onBlur Xảy input focus bị xoá từ thành phần form onClick Xảy người dùng kích vào thành phần hay liên kết... sọan: Dương Thành Phết Trang 44 Bài Giảng Môn Thiết Kế Web Phần : Ngôn Ngữ Kịch Bản JavaScript II Sự Kiện & Xư Ly Sự Kiện Khái niệm kiện xư ly kiện JavaScript ngôn ngữ định hướng kiện, nghĩa phản