Bài giảng 'Lập trình web 1 - Chương 7: Javascript và DOM HTML'; cung cấp cho người học các kiến thức: Giới thiệu về Javascript, nhúng Javascript vào trang web, kiểu dữ liệu và cú pháp trong Javascript, xử lý sự kiện, DOM HTML với Javascript. Mời các bạn cùng tham khảo nội dung chi tiết.
Nội dung trích xuất từ tài liệu:
Bài giảng Lập trình web 1: Chương 7 - Nguyễn Huy Khánh JAVASCRIPT & DOM HTML Nội dung Giới thiệu về Javascript Nhúng Javascript vào trang web Kiểu dữ liệu & cú pháp trong Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ Nội dung Giới thiệu về Javascript Nhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ Giới thiệu về Javascript Là ngôn ngữ Client-side script hoạt động trên trình duyệt của người dùng ( client ) Chia sẻ xử lý trong ứng dụng web. Giảm các xử lý không cần thiết trên server. Giúp tạo các hiệu ứng, tương tác cho trang web. Giới thiệu về Javascript Client-Side Script: Script được thực thi tại Client-Side ( trình duyệt ): Thực hiện các tương tác với người dùng ( tạo menu chuyển động, … ) , kiểm tra dữ liệu nhập, … Server-Side Script: Script được xử lý tại Server-Side, nhằm tạo các trang web có khả năng phát sinh nội dung động. Một số xử lý chính: kết nối CSDL, truy cập hệ thống file trên server, phát sinh nội dung html trả về người dùng… Giới thiệu về Javascript o Khi trình duyệt (Client browser) truy cập trang web có chứa các đoạn mã xử lý tại server-side. Server ( run-time engine) sẽ thực hiện các lệnh Server-side Scipts và trả về nội dung HTML cho trình duyệt Nội dung html trả về chủ yếu bao gồm: mã html, client-script. Nội dung Giới thiệu về Javascript Nhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ Nhúng Javascript vào trang web Định nghĩa script trực tiếp trong trang html: Nhúng sử dụng script cài đặt từ 1 file .js khác: Nhúng Javascript vào trang web some javascript statements some statements some statements Nhúng Javascript vào trang web Đặt giữa tag và : script sẽ thực thi ngay khi trang web được mở. Đặt giữa tag và : script trong phần body được thực thi khi trang web đang mở (sau khi thực thi các đoạn script có trong phần ). Số lượng đoạn client-script chèn vào trang không hạn chế. VD: Nhúng Javascript vào trang web document.write(“Hello world!”); document.write(“Hello world!”); Nội dung Giới thiệu về Javascript Nhúng Javascript vào trang web Kiểu dữ liệu & Các cú pháp Javascript Xử lý sự kiện DOM HTML với Javascript Ví dụ Biến số trong Javascript 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 Khai báo biến Sử dụng từ khóa var Ví dụ: var count=10,amount; Không cần khai báo biến trước khi sử dụng, biến thật sự tồn tại khi bắt đầu sử dụng lần đầu tiên Kiểu dữ liệu trong Javascript Kiểu dữ liệu Ví dụ Mô tả Object var listBooks = new Array(10) ; Trước khi sử dụng, phải cấp phát bằng từ khóa new String “The cow jumped over the moon.” Chứa được chuổi unicode “40” Chuổi rỗng “” Number 0.066218 Theo chuẩn IEEE 754 12 boolean true / false undefined var myVariable ; myVariable = undefined null connection.Close(); connection = null Đổi kiểu dữ liệu Biến tự đổi kiểu dữ liệu khi giá trị mà nó lưu trữ thay đổi Ví dụ: var x = 10; // x kiểu Number x = “hello world !”; // x kiểu String Có thể cộng 2 biến khác kiểu dữ liệu Ví dụ: var x; x = “12” + 34.5; // KQ: x = “1234.5” Hàm parseInt(…), parseFloat(…) : Đổi KDL từ chuỗi sang số. Hàm trong Javascript Dạng thức khai báo chung: function Tên_hàm(thamso1, thamso2,..) { ……… } Hàm có giá trị trả về: function Tên_hàm(thamso1, thamso2,..) { ……… return (value); } Hàm trong Javascript Ví dụ: function Sum(x, y) { tong = x + y; return tong; } Gọi hàm: var x = Sum(10, 20); Các quy tắc chung Khối lệnh được bao trong dấu {} Mỗi lệnh nên kết thúc bằng dấu ; Cách ghi chú thích: // Chú thích 1 dòng /* Chú thích nhiều dòng */ Câu lệnh if if (condition) { statement[s] if true } else { statement[s] if false } Ví dụ: var x = 5, y = 6, z; - if (x == 5) { if (y == 6) z = 17; } else z = 20; Câu lệnh switch Ví dụ : switch (expression) var diem = “G”; { switch (diem) { case “Y”: case label : document.write(“Yếu); statementlist break; case “TB”: case label : document.write(“Trung bình); break; statementlist case “K”: ... document.write(“Khá); break; default : case “G” : statement list document.write(“Giỏi); break; } default: document.write(“Xuất sắc) } ...
