Ngôn ngữ Java script

Tài liệu hướng dẫn chèn javascript vào trang HTML, cú pháp khai báo biến, các lệnh rẽ nhánh, vòng lặp, tạo hàm và gọi hàm, các đối tượng String, Array, Date, Math, kỹ thuật HTML DOM: đối tượng window, document,....

Nội dung  Ngôn ngữ JavaScript    Giới thiệu Chèn JavaSript vào HTML Toán tử, hàm, cấu trúc điều khiển, biến, đối tượng Array, String, Date, Math, quản lý lỗi, gỡ rối mã lệnh JavaScript Xử lý kiện (event), HTML DOM, mơ hình đối tượng (object model) JavaScript Giới thiệu  JavaScript gì?  – JS ngơn ngữ kịch dùng rộng rãi Internet Nó làm việc tốt hầu hết trình duyệt IE, Firefox, Mozilla, Nescape, Opera – JS thiết kế để thêm tương tác cho trang HTML – JS thường nhúng trực tiếp vào trang HTML – JS ngôn ngữ thông dịch (interpretered) – JS không liên quan đến ngơn ngữ lập trình Java: JS làm gì?  JS  JS hỗ trợ người thiết kế HTML công cụ lập trình đặt đoạn văn động vào trang HTML  JS phản ứng với kiện (events)  JS đọc ghi phần tử HTML  JS dùng để kiểm tra tính hợp lệ liệu  JS dùng để tạo cookies  JS dùng để dò browse user • JS phát triển Netscape (Java phát triển Sun) • Chỉ thực thi trình duyệt • Cú pháp đơn giản (gần giống ngơn ngữ lập trình C) – Khơng cần phải mua quyền để sử dụng JS Chèn JavaScript vào HTML  JS thực thi ? Trình duyệt tải trang web Trình duyệt kiểm tra xem có đoạn mã JS có trang web hay khơng? Nếu có, trình duyệt chuyển đoạn mã JS cho thơng dịch (của trình duyệt) Bộ thơng dịch xử lý thực thi mã lệnh JS Các mã lệnh tác động đến thành phần trang web Trình duyệt hiển thị tồn nội dung trang web  Internal: Đặt vào phần hay  External: Tạo tập tin chứa mã lệnh JS bên liên kết đến tập tin phần Ví dụ 3.1 Tốn tử (Operator)  Các toán tử toán học Toán tử document.write(“hello”); Mơ tả Ví dụ Kết + Cộng (addition) x=y+2 x=7 - Trừ (subtraction) x=y-2 x=3 * Nhân (multiplication) x=y*2 x=10 / Chia (division) x=y/2 x=2.5 % Chia lấy dư (modulus) x=y%2 x=1 ++ Tăng (increment) x=++y x=6 Giảm (decrement) x= y x=4 với y =  Các tốn tử gán Tốn tử  Ví dụ Tương tự với Kết Các toán tử so sánh Toán tử Mơ tả Ví dụ Kết Với x=7, x==8 False = Với y=5, x=y x=5 == Bằng += x+=y x=x+y x=10 != Không x!=8 True -= x-=y x=x-y x=5 > Lớn x>8 False *= x*=y x=x*y x=25 < nhỏ x= Lớn x>=8 False %= x%=y x=x%y x=0 5)?1:2;  Cú  Ví Biến vùng nhớ dùng để lưu liệu Có thể hiểu biến nơi chứa liệu Khai báo biến 11 var ; var n; n = 1; var = ; var s = “JavaScript string”; 12 Ví dụ 3.2  Cách đặt tên biến var x = 10; var y = 5; alert(“Gia tri cua x la: ” + x + “ Gia tri cua y la: ” + y); alert(“x AND y = ” + (x && y)); alert(“x OR y = ” + (x || y)); alert(“NOT x = ” + (!x)); – Dùng ký tự A Z, a z, 9, dấu gạch (_), dấu $ – Tên biến không đặt trùng với từ khoá dành riêng JS – Tên biến không bắt đầu số – Tên biến khơng có ký tự khoảng trắng – Tên biến có phân biệt chữ hoa, chữ thường 13 14 Các kiểu liệu   JS không quy định kiểu biến khai báo biến, kiểu biến tự động xác định gán liệu cho biến Các kiểu liệu JS  Kiểu số (number): số nguyên (interger), số thực (float)  Kiểu chuỗi (string)  Kiểu luận lý (boolean): true/false  Kiểu đối tượng (object)  Kiểu hàm (function) 15 Interger: tập số nguyên  Float: Số thực  String: Là chuỗi đặt cặp ngoặc đơn kép  Boolean: Chỉ có hai giá trị true false  Null: Hàm ý khơng có giá trị  16 Ví dụ 3.3 Cấu trúc điều khiển  Cấu trúc điều khiển if if (điều kiện) { var a = “12” + 7.5; document write(a); //khối lệnh thực biểu thức đúng; } else { //khối lệnh thực hai biểu thức không đúng; } 17 18 Bài tập 3.1  if (m != ) { Dùng if để biểu diễn yêu cầu: alert(“m khac 0”); } else {  Khai báo biến m gán giá trị Nếu m khác thơng báo “m khác 0”, ngược lại thông báo “m = 0”  Nếu lương lớn triệu trừ 50 000đ, ngược lại cộng 10 000đ  Nếu m nhỏ thơng báo “m txt.length) { c=0; } window.status = txt.slice(c); c++; setTimeout(chuchay,100); } 85 Bài tập  86 HTML DOM Tạo nút lệnh: nút có nhãn dấu +, nút có nhãn dấu -, nút có nhãn dấu *, nút có nhãn dấu / Khi nhấn vào nút thực phép tốn tương ứng số 87  DOM (Document Object Model) giao diện lập trình dùng để thao tác tài liệu HTML hay XML  DOM cho phép thay đổi thứ trang web  DOM biễu diễn tài liệu HTML cấu trúc cây, với phần tử, thuộc tính văn 88 22 Document  Root element: Element:  Window Element: Element: Attribute: href Text: “My title” Tất trang web có đối tượng sau:  Nevigator  Screen Element: Element:  History Text: “My link” Text: “My header”  Document  Location 89 90 Đối tượng window  Cấu trúc phân cấp đối tượng: Tồn mở tài liệu HTML  Sử dụng để truy cập thông tin window  Điều khiển kiện xảy window  Nếu tài liệu định nghĩa nhiều frame, trình duyệt tạo đối tượng window cha đối tượng window cho frame  Window Screen Document Location History Navigator 91 92 23  Thuộc tính  Document  Event  Phương thức   alert(“msg”)  blur() Ví dụ 1: Sử dụng thuộc tính status đối tượng window để ghi dòng thơng báo lên trạng thái trình duyệt  close()  History  Location  Name  focus()  open(URL)  Navigator  confirm(“msg”)  createPopup()  Screen  prompt(“msg1”, “msg2”) window.status = "Dang tai trang web cua tui";  status 93  Ví dụ 2: Sử dụng phương thức open() 94  window.status = "Dang tai trang web cua tui"; window.open("http://www.yahoo.com"); 95 Ví dụ 3: Sử dụng thuộc tính title đối tượng document mà đối tượng document thuộc tính đối tượng window Lop K4b alert(window.document.title); 96 24 Đối tượng document Đối tượng document biểu diễn cho tài liệu HTML  Dùng để lấy thông tin tài liệu, thành phần HTML xử lý kiện   Thuộc tính           aLinkColor bgColor body fgColor linkColor location title uRL vlinkColor domain 97  Phương thức  clear()  close()  write(expr1,…)  writeln(expr1,…)  getElementById(id)  getElementsByName(name)  getElementsByTagName(tagName) 98  Ví dụ 1: Sử dụng thuộc tính URL đối tượng document alert(document.URL);  Ví dụ 2: Sử dụng thuộc tính bgColor đối tượng document để xem trang web có màu gì? alert(document.bgColor); 99 100 25  Ví dụ 3: Đếm số lượng thành phần có tên “myInput” function getElements(){ var x=document.getElementsByName("myInput"); alert(x.length); }  Hàm getElementById  Cú pháp đổi nội dung phần tử HTML document.getElementById(id).innerHTML = giá_trị;  Cú pháp đổi giá trị thuộc tính HTML document.getElementById(id).tt = giá_trị; 101 102 Bài tập  Ví dụ:  Tạo textbox nút lệnh hình  Yêu cầu: Khi nhấp vào nút transfer chuyển giá trị textbox bên trái sang textbox bên phải function f(){ document.getElementById("id1").innerHTML=“Chơi"; }

Học

Đổi màu 103 104 26 Bài tập  Đáp án: function transfer(){ document.getElementById('t2').value=document.getElementById('t1').value; }       105 106 Hết 107 27 ... < /script> < /script>  External: Tạo tập tin chứa mã lệnh JS bên liên kết đến tập tin phần i=0;... for (i=0; i Viết hình lần thơng báo “Tơi học JavaScript”