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

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