Bài giảng Thiết kế Web: Chương 6 - JavaScript trình bày về giới thiệu JavaScript, chèn JavaScript vào HTML, vị trí đặt JavaScript trong trang web, cú pháp và quy ước,... Mời các bạn tham khảo bài giảng để bổ sung thêm kiến thức về lĩnh vực này.
Vũ Chí Hiếu hieuvc@gmail.com Là ngơn ngữ kịch phổ biến Internet, làm việc hầu hết trình duyệt Là ngơn ngữ thơng dịch Được nhúng trực tiếp vào trang HTML, thực thi client (trình duyệt web) Tăng cường tính động tính tương tác cho trang web ◦ Tương tác với kiện ◦ Thay đổi nội dung động ◦ Xác nhận tính hợp lệ liệu Sử dụng thẻ SCRIPT: Sử dụng file JavaScript Sử dụng biểu thức JavaScript giá trị thuộc tính thẻ, trình điều khiển kiện … confirm ("Are you sure?"); alert("OK"); document.write(" Thank You !"); Đặt phần HEAD ◦ Thực thi trang web mở Đặt phần BODY ◦ Thực thi trang web mở (sau thực thi script phần HEAD) JavaScript phân biệt chữ HOA – chữ thường Các câu lệnh cách dấu “;” Khơng phân biệt khoảng trắng, Tab, xuống dịng câu lệnh Chuỗi dấu nháy đặt dấu nháy đơn ‘ ’ nháy kép “ ” Ghi chú: theo cú pháp C++ //Đây ghi /*Đây ghi nhiều dòng*/ Các loại dấu ngoặc ◦ {} Khối lệnh ◦ [] Sử dụng cấu trúc mảng ◦ () Sử dụng hàm, thuộc tính đối tượng Khai báo biến: sử dụng từ khoá var var a; var b=5; a=“HTML”; var c=a+b; Biến phải khai báo trước sử dụng Phạm vi biến: ◦ Biến toàn cục ◦ Biến cục Kiểu liệu Mơ tả Ví dụ Object Đối tượng Phải cấp phát từ khóa var list = new Array(10); new trước sử dụng String Chứa chuỗi Unicode Number Kiểu số Boolean Kiểu logic true/false Date Ngày tháng var today = new Date(); alert(today.getFullYear()); Array Kiểu mảng var myCars=new Array(); myCars[0]=“Civic"; myCars[1]="Volvo"; myCars[2]="BMW"; document.write(myCars[0]); var str=“Chào năm mới”; str+=“2010”; alert(str); Kiểu liệu Mơ tả Ví dụ undefined Chưa khai báo biến chưa giữ giá trị alert(typeof abc); var abc; alert(typeof abc); null Chưa có giá trị (Được gán kiểu null) var abc; abc=null; connection.close(); //connection=null function Hàm var add = function(a,b){ return(a+b); }; alert(add(2,3)); *** biến JavaScript lưu kiểu liệu window đối tượng quản lý cửa sổ trình duyệt Đối tượng window có thuộc tính status để xác định thơng báo tạm thời xuất trạng thái VD: Để thể dòng chữ Hello World trạng thái ta sử dụng lệnh: window.status = 'Hello World' Lệnh setTimeout(f, n)quy định sau khoảng thời gian n mili giây hàm f gọi (f chuỗi lưu lệnh cần thực hiện) Giả sử str chuỗi ta có ◦ str.length: Thuộc tính cho biết độ dài chuỗi ◦ str.substr(i, n): lấy n ký tự kể từ vị trí thứ i (Ký tự đánh số 0) Vài lệnh khác nhóm setTimeout ◦ timeID = setTimeout(f, n) ◦ clearTimeout(timeID): Hủy setTimeout ◦ intervalID = setInterval(f, n): Sau khoảng thời gian n ms lệnh f gọi ◦ clearInterval(intervalID): Hủy interval Ý tưởng giải thuật ◦ Để có cảm giác chữ chạy trạng thái ta cần thay đổi thuộc tính status cửa sổ cách copy ký tự đầu dòng trạng thái đưa xuống cuối lặp lại sau khoảng thời gian Giải thuật: Giả sử ta có biến str lưu chuỗi cần chạy Cơng việc thực sau: ◦ B1: Thể chuỗi str lên trạng thái Chuyển sang bước ◦ B2: Chuyển ký tự đầu str cuối (bằng cách gán str = xâu kể từ vị trí thứ str đến cuối + ký tự str) Chuyển sang bước ◦ B3: Trễ khoảng thời gian quay lại bước var str= 'Khoa CNTT-DHKTCN TP.HCM' //Đưa vào nhìn cho đẹp (có khoảng cách trống lần chạy) for (i=str.length; i4 ký tự Nếu hợp lệ submit, ngược lại thông báo lỗi Web link dạng combo box: Trong combo box có tên đơn vị liên kết Người dùng chọn đơn vị web site đơn vị cửa sổ Làm đồng hồ điện tử (hiện số) trang web ◦ Hiển thị thời gian ◦ Hiển thị khoảng thời gian đến đích ... SCRIPT: Sử dụng file JavaScript Sử dụng biểu thức JavaScript giá trị... function(a,b){ return(a+b); }; alert(add(2,3)); *** biến JavaScript lưu kiểu liệu Loại Các toán tử Toán học + - * / % ++ Gán = += -= *= /= %= So sánh > < >=