1 / 34

Cơ bản về JavaScript

Cơ bản về JavaScript. Session 7. MỤC TIÊU. M ô tả về JavaScript N ắm bắt nền tảng cú pháp của JavaScript Sử dụng các loại toán tử Sử dụng biểu thức có quy tắc. JavaScript là gì?.

diella
Download Presentation

Cơ bản về JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cơ bản về JavaScript Session 7

  2. MỤC TIÊU • Mô tả về JavaScript • Nắm bắt nền tảng cú pháp của JavaScript • Sử dụng các loại toán tử • Sử dụng biểu thức có quy tắc Thiết kế website với HTML, DHTML, JavaScript

  3. JavaScript là gì? • Ngôn ngữ kịch bản dùng để tạo các script phía client và server, các ứng dụng client chạy trên trình duyệt như Netscape Navigator hoặc IE • Tăng tính năng “động”, tương tác cho các trang bằng các hiệu ứng • Ngôn ngữ kịch bản dựa trên đối tượng, thông dịch, được hãng Sun Microsystems và Netscape phát triển • JavaScript được phát triển từ Livescript của Netscape Thiết kế website với HTML, DHTML, JavaScript

  4. Tác dụng và các quy tắc của JavaScript • Các đoạn mã JavaScript được nhúng vào các trang • Cung cấp sự tương tác người dùng • Thay đổi nội dung “động” • Xác nhận tính hợp lệ của dữ liệu trong form • JavaScript cũng tuân theo các quy tắc ngữ pháp • Phân biệt chữ hoa/thường • Sử dụng các cặp kí hiệu đóng/mở như “”, {} • Sử dụng khoảng trắng tăng tính rõ ràng của mã • Sử dụng chú thích Thiết kế website với HTML, DHTML, JavaScript

  5. Các công cụ phát triển JavaScript • Các công cụ IDE phát triển JavaScript • Dialog Box : tạo hộp thoại • Pop – up Menu Builder : tạo menu pop up • Remotes : tạo cửa sổ pop up • Môi trường thực thi • Các Script ở Client • Java Script trên Web Server • Kết nối cơ sở dữ liệu • Truy cập hệ thống file ở server • Chia sẻ thông tin Thiết kế website với HTML, DHTML, JavaScript

  6. Nhúng JavaScript vào trang • JavaScript được chèn vào tài liệu HTML theo các cách • Sử dụng thẻ SCRIPT <script language="JavaScript"> <!-- JavaScript statements; //--> </script> • Liên kết một file JavaScript (.js) ở bên ngoài <script language="JavaScript" src="filename.js"> </script> • Sử dụng các biểu thức JavaScript trong các giá trị thuộc tính của thẻ <HR width = “ &{length};%” align = “center”> • Sử dụng JavaScript trong các trình điều khiển sự kiện <P onclick = “greeting()”> Thiết kế website với HTML, DHTML, JavaScript

  7. Sử dụng các hộp thoại • Alert (“your message”) • Tạo hộp thoại thông báo • Confirm (“Your message”) • Tạo hộp thoại xác nhận hành động xảy ra • Trả về true nếu chọn OK, false nếu chọn Cancel • Prompt (“Your message”, “Your suggestion”) • Tạo hộp thoại cho phép nhập dữ liệu • Trả về chuỗi dữ liệu nhập vào Thiết kế website với HTML, DHTML, JavaScript

  8. Ví dụ Kết quả: Ví dụ: <HTML> <HEAD> <SCRIPT LANGUAGE = "Javascript"> confirm ("Are you Sure?"); alert("OK"); document.write(" Thank You !"); </SCRIPT> </HEAD> </HTML> Thiết kế website với HTML, DHTML, JavaScript

  9. Biến • Biến là một tham chiếu đến vị trí trong bộ nhớ máy tính • Được sử dụng để lưu giữ giá trị và có thể thay đổi trong khi kịch bản thực thi • Biến được khai báo với từ khoá var ví dụ: var A = 10; • Phạm vi của biến được xác định trong khi khai báo • Biến toàn cục • Biến cục bộ • Nguyên dạng – literal - là các giá trị không đổi được dùng trong script Thiết kế website với HTML, DHTML, JavaScript

  10. Biến (t.t) • Quy tắc khai báo biến • Bắt đầu chữ cái hay dấu _ • Phân biệt kiểu chữ • Không chứa khoảng trắng • Không trùng từ khóa • Các kiểu dữ liệu • number – số • boolean - giá trị logic (true/false) • string - chuỗi • null • Các biến khác kiểu dữ liệu có thể kết hợp với nhau ví dụ: A = “ This apple costs Rs.” + 5 Kết quả A là một chuỗi với giá trị là "This apple costs Rs. 5" Thiết kế website với HTML, DHTML, JavaScript

  11. Kiểu dữ liệu – Ví dụ Ví dụ: <HTML> <HEAD> <SCRIPT LANGUAGE = "Javascript"> var A = "12" + 7.5; document.write(A); </SCRIPT> </HEAD> </HTML> Kết quả: Thiết kế website với HTML, DHTML, JavaScript

  12. Nguyên dạng - literal • Literal có thể là • Integer – là các hệ thống số thập phân, thập lục phân và nhị phân • Floating - point (số thực) – biểu diễn khoa họccủasố thập phân • String – là một chuỗi rỗng hay chuỗi ký tự được đặt trong cặp nháy đơn hoặc nháy kép • boolean – giá trị true/false • null • Các kí tự đặc biệt trong chuỗi • \b : khoảng trắng • \t : khoảng tab • \n : xuống dòng mới Thiết kế website với HTML, DHTML, JavaScript

  13. Toán tử • Thực hiện phép toán trên biến hay toán hạng • Các loại toán tử • Một ngôi • Hai ngôi • Phân loại các toán tử • Toán tử số học • Toán tử so sánh • Toán tử logic • Toán tử liên quan đến chuỗi • Toán tử lượng giá Thiết kế website với HTML, DHTML, JavaScript

  14. Toán tử số học • Thao tác với các giá trị số (biến/literal) và trả về giá trị số • Toán tử số học gồm: • Cộng (+) • Trừ (-) • Nhân (*) • Chia (/) • Chia lấy phần dư (%) • Toán tử tăng (++) • Toán tử giảm (- -) • Toán tử phủ định (-) Thiết kế website với HTML, DHTML, JavaScript

  15. Toán tử so sánh • So sánh các toán hạng và trả về giá trị logic • Toán tử so sánh bao gồm: • So sánh bằng (==) • So sánh khác (!=) • So sánh lớn hơn (>) • So sánh lớn hơn hoặc bằng (>=) • So sánh nhỏ hơn (<) • So sánh nhỏ hơn hoặc bằng (<=) Thiết kế website với HTML, DHTML, JavaScript

  16. Toán tử logic • Kết hợp với toán tử so sánh trong một biểu thức điều kiện và trả về giá trị logic • Bao gồm Thiết kế website với HTML, DHTML, JavaScript

  17. Ví dụ về toán tử logic Kết quả: Ví dụ: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var x = 10; var y = 5; alert ("The value of x is " + x + "The value of y is " + y); alert("x AND y = " + (x && y)); alert("NOT x = " + (!x)); </SCRIPT> </HEAD> </HTML> Thiết kế website với HTML, DHTML, JavaScript

  18. Toán tử chuỗi • Toán tử chuỗi kết hợp các chuỗi tạo thành chuỗi mới Ví dụ: var x = ‘yellow’; var y = ‘green’; var z = x + y + ‘white’; // z = “yellowgreenwhite” var w = y + 9; // w = “green9” • Các hàm đổi chuỗi thành số • parseInt (s) : đổi chuỗi s thành số nguyên • parseFloat (s) : đổi chuỗi s thành số thực Thiết kế website với HTML, DHTML, JavaScript

  19. Toán tử lượng giá • Toán tử điều kiện (condition) ? value1 : value2 Nếu btđk đúng, biểu thức có giá trị value1, ngược lại biểu thức có giá trị value2 ví dụ var status = (age >= 18) ? "adult" : "minor" • Toán tử typeof : trả về chuỗi chỉ ra kiểu dữ liệu của toán hạng ví dụ var x = 5; document.write(typeof(x)); Thiết kế website với HTML, DHTML, JavaScript

  20. Mức ưu tiên của toán tử • Biểu thức được thực hiện • Từ trái sang phải • Theo thứ tự ưu tiên của toán tử • Mức ưu tiên theo thứ tự từ cao đến thấp Thiết kế website với HTML, DHTML, JavaScript

  21. Biểu thức • Biểu thức là sự kết hợp các literal, biến, và các toán tử để trả về một giá trị đơn • Các loại biểu thức của JavaScript • Số học : tính toán trên các giá trị số -> trả về giá trị số • Logic : tính toán trên giá trị logic -> trả về giá trị logic • Chuỗi : kết hợp các chuỗi -> trả về chuỗi Thiết kế website với HTML, DHTML, JavaScript

  22. Biểu thức quy tắc – regexp • Mẫu tìm kiếm theo quy tắc chỉ ra • Được xác định bởi các kí tự, các kí hiệu chỉ số lượng • Sử dụng trong việc tìm kiếm sự tương ứng của chuỗi trong chuỗi, kí tự trong một chuỗi • Mẫu tìm kiếm của biểu thức quy tắc • Các mẫu đơn giản : chỉ chứa các kí tự đơn, tìm kiếm chính xác Ví dụ var exp = /abc/ • Kết hợp các ký tự đơn giản và ký tự đặc biệt Ví dụ var exp = /\d{3} - \d{6}/ Thiết kế website với HTML, DHTML, JavaScript

  23. Biểu thức có quy tắc (t.t) • Các kí tự chỉ số lượng và các kí tự đặc biệt Thiết kế website với HTML, DHTML, JavaScript

  24. Biểu thức có quy tắc (t.t) • Cách tạo biểu thức có quy tắc • Khởi tạo giá trị cho đối tượng objectname = expression var s = /ab+c/ • Khởi tạo đối tượng RegExp với toán tử new var patt1 = new RegExp("e"); Thiết kế website với HTML, DHTML, JavaScript

  25. Các phương thức của RegExp • test(s) : tìm kiếm sự tương khớp của reg trong chuỗi, trả về true hay false • exec(s) : tìm kiếm sự tương khớp của reg trong chuỗi, trả về chuỗi tương khớp đầu tiên, ngược lại trả về null • compile(new_reg) : thay thế biểu thức cũ bởi new_reg Thiết kế website với HTML, DHTML, JavaScript

  26. Ví dụ <script> var re = /^\d{4}$/; var sdt = "1234"; document.write(re.test(sdt)); sdt = “12345”; document.write(re.test(sdt)); sdt = “a1234”; document.write(re.test(sdt)); </script> true false false Thiết kế website với HTML, DHTML, JavaScript

  27. Mảng • Mảng được dùng để lưu trữ một dãy các biến với cùng tên. • Chỉ số của mảng dùng để phân biệt các phần tử mảng. • Mảng bắt đầu với chỉ số 0 • Tạo mảng: Cú pháp arrayObjectName = new Array([element0, element1, ..., elementN]) Thiết kế website với HTML, DHTML, JavaScript

  28. Ví dụ • Khởi tạo các phần tử của mảng. Ví dụ. emp[0] = "Ryan Dias" • Các phần tử của một mảng có thể truy cập theo tên hoặc chỉ số của phần tử. Ví dụ emp[“Ryan Dias”] hay emp[0] var a = new Array(12, 3, "a"); var b = new Array(); b[0] = 12; b[1] = 23; Thiết kế website với HTML, DHTML, JavaScript

  29. Mảng(t.t) • Các phương thức của đối tượng array • join : nối các phần tử trong mảng • pop : trả về giá trị phần tử cuối cùng và xoá phần tử này khỏi mảng • push : thêm phần tử vào mảng, trả về vị trí phần tử tiếp theo • reverse : đảo ngược các phần tử của mảng • shift : trả về phần tử đầu tiên và xoá phần tử này • sort : sắp xếp các phần tử của mảng • concat : nối 2 mảng với nhau, mảng ban đầu không thay đổi • JavaScript hỗ trợ mảng nhiều chiều • Ví dụ : a = new array(3,4) • a[0,1] = “Mai Anh” Thiết kế website với HTML, DHTML, JavaScript

  30. Ví dụ <script> var a = new Array(12, 3, 7); for(var i = 0 ; i < a.length ; i++) { document.write(a[i] + "\t"); } document.write("<br>" + a.join(", ")); document.write("<br>" + a.pop()); document.write("<br>Mang sau khi xoa: " + a); document.write("<br>" + a.push(5)); document.write("<br>Mang sau khi them: " + a); a.reverse(); document.write("<br>Mang sau khi dao nguoc: " + a); var b = new Array(3, 4, 5, 0); b = a; document.write("<br>Cac phan tu cua b la: " + b); </script> Thiết kế website với HTML, DHTML, JavaScript

  31. Kết quả Thiết kế website với HTML, DHTML, JavaScript

  32. Các câu lệnh điều điện • Câu lệnh điều kiện được dùng để kiểm tra điều kiện. Kết quả xác định câu lệnh hoặc khối lệnh được thực thi. • Các câu lệnh điều kiện bao gồm: • if….. else • switch…case Thiết kế website với HTML, DHTML, JavaScript

  33. LỆNH LẶP • Các kiểu lệnh lặp bao gồm: • for • do …. while • while • for….in • with • break & continue Thiết kế website với HTML, DHTML, JavaScript

  34. Hàm • JavaScript có sẵn các hàm đinh nghĩa trước dùng trong script • Hàm eval • Hàm isNaN • Hàm do người dùng tự tạo function funcName(argument1,argument2,etc) { statements; } • Gọi hàm • Câu lệnh Return Thiết kế website với HTML, DHTML, JavaScript

More Related