Nhập môn HTML và thiết kế Web - Nền tảng cơ bản của JavaScript

JavaScript là ngôn ngữ dưới dạng script.  JavaScript là ngôn ngữ dựa trên đối tượng, có nghĩa là bao gồm nhiều kiểu đối tượng.  JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form. Khả năng này cho phép JavaScript trở thành một ngôn ngữ script động.  Javasript có thể làm việc khác nhau trên các trình duyệt khác nhau

pdf34 trang | Chia sẻ: thuongdt324 | Ngày: 01/12/2020 | Lượt xem: 10 | Lượt tải: 0download
Bạn đang xem trước 20 trang tài liệu Nhập môn HTML và thiết kế Web - Nền tảng cơ bản của JavaScript, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin NỀN TẢNG CƠ BẢN CỦA JAVASRIPT NHẬP MÔN HTML VÀ THIẾT KẾ WEB 1 Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Giới thiệu,  Khai báo NỘI DUNG Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  JavaScript là ngôn ngữ dưới dạng script.  JavaScript là ngôn ngữ dựa trên đối tượng, có nghĩa là bao gồm nhiều kiểu đối tượng.  JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form. Khả năng này cho phép JavaScript trở thành một ngôn ngữ script động.  Javasript có thể làm việc khác nhau trên các trình duyệt khác nhau GIỚI THIỆU Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  JavaScript là gì? JavaScript là ngôn ngữ kịch bản dựa trên đối tượng nhằm phát triển các ứng dụng Internet chạy trên client và phía Server GIỚI THIỆU Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Tương tác với người dùng:  Viết mã để đáp ứng lại các sự kiện  Thay đổi nội dung động  Thay đổi nội dung và vị trí các phần tử một cách động trên một trang nhằm đáp ứng sự tương tác người dùng  Kiểm tra tính hợp lệ của dữ liệu  Kiểm tra tính hợp lệ dữ liệu do người dùng nhập vào trước khi gửi lên web server để xử lý CÁC HIỆU ỨNG Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Dùng Caps:  Javascript phân biệt chữ hoa và chữ thường  Dùng Pairs:  Luôn luôn có ký hiệu mở và đóng, nếu dùng thiếu hoặc sai sẽ xuất hiện lỗi  Dùng Spaces  Javascript bỏ qua các ký tự trắng, dùng các tab để cho các file script dễ đọc và sửa  Dùng chú thích MỘT SỐ QUY TẮC Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Nhúng JavaScript vào một file HTML theo một trong các cách sau đây:  Nhúng các câu lệnh trực tiếp vào trong tài liệu bằng cách sử dụng thẻ  Liên kết file nguồn Javascript vời tài liệu HTML  Đặt các biểu thức Javascript làm giá trị cho các thuộc tính của thẻ HTML  Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó Nhúng Javascript vào trong trang web Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Nhúng các câu lệnh trực tiếp vào trong tài liệu bằng cách sử dụng thẻ <!-- // ; -->  Thuộc tính language: Chỉ ngôn ngữ  Chú thích: ; -->  Các câu lệnh kết thúc bằng dấu ; Nhúng Javascript vào trong trang web Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Nhúng các câu lệnh trực tiếp vào trong tài liệu bằng cách sử dụng thẻ document.write("Xin chào!"); // Nên đặt các script trong thẻ Head --> Nhúng Javascript vào trong trang web Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Sử dụng các file nguồn JavaScript - File test.js: document.write("Hello"); - File .html <script language="javascript" type="text/javascript" src="Test.js"> Nhúng Javascript vào trong trang web Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Đặt tên biến  Tên bắt đầu chữ cái hoặc dấu gạch dưới  Tên biến có thể chứa chữ số  Phân biệt chữ hoa và chữ thường Khai báo biến Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Khai báo tên biến: var tenbien [=]; Ví dụ: <script language="javascript" type="text/javascript" > var a = 10; var ans = null; var result = 'xin chào'; var b; Khai báo biến Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Phạm vi của biến: Khai báo biến Script Biến Global Funtion 1 Biến local Funtion 3 Biến local Funtion 3 Biến local Biến Global có thể được truy cập bởi các hàm 1, 2, 3 Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin Khai báo biến Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Khai báo biến: Khai báo biến Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Numbers: Kiểu số nguyên và số thực  Logical và boolean: giá trị true hoặc false  Strings: Chuỗi ký tự  Null: Giá trị null Các kiểu dữ liệu Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Phép gán (=):  Phép toán so sánh: ==(bằng), != (khác), >, >=, <, <=  Phép toán số học: +, -, *, /, % (chia lấy phần dư), ++, -- Các toán tử: Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Ghép chuỗi(+)  Phép toán Logic: && (và), || (hoặc), ! (phủ định).  Phép toán Bitwise: & (và), | (hoặc), ^ (phủ định), > Toán tử dịch phải. Các toán tử: Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Toán tử điều kiện (condition)?trueVal:falseVal <!-- var todays_date = new Date(); var second = todays_date.getSeconds(); var b_color = (second >= 10 && second <= 50)?"Red":"Blue"; document.write(""); //--> Xin chào Các toán tử: Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Toán tử typeof(): Trà về kiểu dữ liệu của toán hạng <!-- var todays_date = new Date(); var second = todays_date.getSeconds(); document.write(typeof(second)); //--> Xin chào Các toán tử Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Biểu thức là sự liên kết các biến, hằng với nhau thông qua các toán tử  Các dạng biểu thức:  Số học: trả về giá trị là một số  Logic: Trả về giá trị Boolean  Chuỗi: Trà về một chuỗi Biểu thức Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Biểu thức quy tắc là một mẫu tìm kiếm dùng để tìm kiếm các chuỗi ký tự cùng dạng trong một xâu  Các mẫu đơn giản: Thực hiện tìm kiếm chính xác //  Kết hợp các ký tự đơn giản và đặc biệt Biểu thức Ký tự Ý nghĩa \ Giải thoát nghĩa hằng của ký tự ^ Tương xứng ký tự đầu chuỗi $ Tương xứng ký tự đầu chuỗi * Tương xứng ký tự phía trước là 0 hoặc nhiều lần + Tương xứng ký tự phía trước là 1 hoặc nhiều lần Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Biểu thức quy tắc: Biểu thức Ký tự Ý nghĩa ? Tương xứng ký tự phía trước là 0 hoặc 1 lần . Tương xứng bất kỳ ký tự đơn trừ ký tự newline (x) Tương xứng ‘x’ và ghi nhớ ký tự đó x|y Tương xứng ‘x’ hoặc ‘y’ {n,m} Tương xứng ít nhất n và nhiều nhất m số lần xuất hiện của ký tự phía trước [xyz],[y-z] Tương xứng bất kỳ ký tự nào nằm trong dấu ngoặc, dấu gạch nối chỉ một khoảng [^xyz] Tương xứng bất kỳ ký tự nào không nằm trong ngoặc Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Biểu thức quy tắc: Biểu thức Ký tự Ý nghĩa \d Tương xứng ký tự số \s Tương xứng ký tự trắng, goomd space, tab, \t Tương xứng một tab \w Tương xứng các ký tự alpha, tương đương [A-Za- z0-9] Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Sử dụng biểu thức quy tắc: Biểu thức Phương thức Ý nghĩa Exec Tìm kiếm một mẫu tương xứng trong chuỗi, trả về một mảng thông tin Test Kiểm tra tương xứng của một chuỗi, trả về đúng hoặc sai Match Tìm kiếm tương xứng trong một chuỗi Search Kiểm tra sự tương ứng trong một chuỗi Replace Tìm kiếm sự tương xứng trong một chuỗi, thay thế chuỗi con tìm kiếm bằng một chuỗi con khác. Split Dùng để tách một chuỗi thành một mảng các chuỗi con. Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Sử dụng biểu thức quy tắc: <!-- re = /xin/ str = re.test("Xin chào"); window.alert(str); //--> <!-- re = /[xyz]/ str = re.exec("xin chao!") window.alert(str); //--> Biểu thức Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Mảng dùng để lưu một tập hợp các biến cùng tên  Chỉ số mảng để phân biệt biến này với biến khác, chỉ số được bắt đầu từ 0  Khai báo mảng: arrayObjectName=new Array([element0, element1, , elementN]) MẢNG Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Thêm các phần tử mảng: arrayObjectName[i]=; <!-- emp = new Array(3); emp[0] = "Hạnh"; emp[1] = "Hoa"; emp[2] = "Dũng"; document.write(emp[0]); document.write(emp[1]); document.write(emp[2]); //--> MẢNG Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Truy cập phần tử mảng: arrayObjectName[i] <!-- emp = new Array(3); emp[0] = "Hạnh"; emp[1] = "Hoa"; emp[2] = "Dũng"; document.write(emp[0]); document.write(emp[1]); document.write(emp[2]); //--> MẢNG Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Sử dụng các phương thức của mảng:  Join: Kết hợp các phần tử của mảng thành mọt chuỗi  Pop: trà về phần tử cuối cùng của mảng  Push: Thêm một hoặc nhiều phần tử vào cuối mảng  Reverse: Đảo ngược phần tử mảng  Shift: Xóa phần tử đầu tiên của mảng và trả về phần tử đó  Sort: Sắp xếp các phần tử mảng MẢNG Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Sử dụng các phương thức của mảng: <!-- emp = new Array(3); emp[0] = "Hạnh"; emp[1] = "Hoa"; emp[2] = "Dũng"; emp.sort(); document.write(emp[0]); document.write(emp[1]); document.write(emp[2]); //--> MẢNG Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Mảng nhiều chiều: <!-- emp = new Array(3,2); emp[0, 0] = "Hạnh"; emp[1, 0] = "Hoa"; emp[2, 0] = "Dũng"; emp[0, 1] = "001"; emp[1, 1] = "002"; emp[2, 1] = "003"; document.write(emp[0,0]); document.write(emp[1,0]); document.write(emp[2,0]); //--> MẢNG Tên Mã Hạnh 001 Hoa 002 Dũng 003 Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin THẢO LUẬN – CÂU HỎI Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin  Thực hành các ví dụ  Thiết kế các chức năng cho bài tập lớn BÀI TẬP