HTML - Bài 06: Làm việc với javascript

Lê Quang Lợi Bài 06: Làm việc với javascript Nội dung » Giới thiệu » Một số ví dụ » Cú pháp » Hàm cơ bản Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 6.1 Giới thiệu Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript » Ngôn ngữ kịch bản chạy trên trình duyệt » Javascirpt cho phép tương(đọc/ghi) tác với tài liệu HTML » Hỗ trợ tương tác với người dùng qua giao diện(sự kiện) » Ngôn ngữ thông dịch(mã nguồn => thành chương trình) » Cú pháp tương tự C,C++, java document.write("Hello World!"); 6.2 Tạo Javascript trong tài liệu HTML Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript » Thuộc tính Onclick: viết lệnh trên thẻ HTML Hello » Thẻ script: chứa mã javascript trên trang HTML alert(‘Chào các bạn!’); » Nhúng file script: nhiều file “.js” nhúng vào trong HTML 6.3 Cơ bản về cú pháp HTML Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript » Câu lệnh: một câu lệnh kết thúc bởi dấu “;” » Chú thích: miêu tả câu lệnh, khi dịch được bỏ qua  dòng: // Nội dung  khối: /* Nội dung chú thích*/ » Quy định về xâu: cặp “ và ” hoặc cặp ‘ và ’ “Chào các bạn” » Biến không cần phải khai báo trước, có thể gán dữ liệu bất kì » Từ khóa var: cho phép khai báo biến var a; var b=20; alert(b); 6.3.1 Một số đối tượng/hàm cơ bản Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript » Alert: thông báo lời nhắn ra ngoài màn hình alert(‘Chào các bạn’); » Write và writeline: viết ra tài liệu HTML một dòng document.write(“Chào các bạn ”); » Hàm NaN: kiểm tra giá trị không phải là số NaN(“ab123”);//=> true; NaN(“1213”); // => false » Hàm Eval: Chuyển đổi giá trị sang kiểu số var a= Eval(“12bc”); var b= Eval(“1213”);// b = 1213 6.3.2 Kiểu dữ liệu Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript » Kiểu đối tượng: đối tượng chứa dữ liệu bất kì » Kiểu boolean: kiểu đúng sai (true/false) » Kiểu mảng: thể hiện mảng các phần tử => buổi khác » Một số hằng số: * null: hằng trống của một xâu var myString=null; * true/false: hằng đúng hoặc sai của kiểu trả về (hàm, biểu thức, đối tượng ..) Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript » Kiểu số (số nguyên và số thực): 10, 10.5 » Đối tượng math: Chứa các hàm hỗ trợ tính toán với các con số Math.sin(x); Math.abs(X); Math.PI, Math.sqrt(x) Ví dụ: var a = Math.sqrt(10); » Kiểu chuỗi(mảng các ký tự): ký hiệu “ ” hoặc ‘ ’ » Thao tác với chuỗi: var myLen = s.length; last_char = s.charAt(s.length - 1); sub = s.substring(1,4); i = s.indexOf('a'); 6.3.2 Kiểu dữ liệu 6.3.3 Biểu thức và toán tử Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript » Toán tử toán học: +,-,*,%, ++,-- » Toán tử gán: =, +=, -=, *=, /= » Toán tử quan hệ: >, =>, <, <=, ==,!= » Toán tử logic: and(&&), or(||), not(!) » Toán tử thao tác chuỗi: =, +=, + » Biểu thức: kết hợp logic giữa các toán tử và toán hạng Ví dụ: a= 10*2 + 23; b= a/4; 6.4 Cấu trúc điều khiển Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript » Javascript hỗ trợ các cấu trúc điều khiển: if, if else, for, while » Cho phép điều khiển chương trình » Xây dựng cấu trúc lặp  Lựa chọn đúng cấu trúc  Xây dựng biểu thức điều khiện  Xây dựng nội dung phù hợp 6.4.1 Cấu tríc điểm khiển Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript Cấu trúc rẽ nhánh (if ) » if(bđk){ // khối lệnh 01 } » btđk: là biểu thức trả về giá trị logic » Nếu btđk đúng thì thực thi khối lệnh 01 » Nếu btđk sai: thực thi lệnh nằm ngay sau if Ví dụ: if(a==5){alert(a);} btđk Khối 01 true false 6.4.1 Cơ bản về cú pháp HTML Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript » if(bđk){ // khối lệnh 01 } else{ // khối lệnh 02 } » Nếu btđk đúng thì thực thi khối lệnh 01 » Nếu btđk sai: thực thi khối lệnh 02 Ví dụ: if(a==5){alert(a);}else{ alert(a + ” không phải là số 05 ”);} btđk Khối 01 true false Khối 02 6.4.2 Cấu trúc lặp Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript Var sum =0; Var i=0; // khởi gán while( i<20){ // điều kiện sum +=i; // lệnh i++; } Var sum =0; Var i=0; // khởi gán do{ sum +=i; // lệnh i++; } while( i<20); // điều kiện 6.4.2 Cấu trúc lặp Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript Giá trị đầu Điều kiện Khối lệnh true false Vòng lặp for: thực hiện các công việc lặp for(bt01; bt02; bt03){ // khối lệnh} + bt01: tạo giá trị bắt đầu + bt02: biểu thức điều kiện dừng (false) + bt03: biểu thức điều khiển bt02 về false var sum =0; for( var i=0; i<10; i++) { sum+=0; // lặp lại 10 lần } 6.4.2 Cấu trúc lặp Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript Giá trị đầu Điều kiện Khối lệnh true false Vòng lặp while: lặp không các định while( btđk){ // khối lệnh } do{// khối lệnh}while(btđk); + btđk: biểu thức logic điều kiện vòng lặp While nếu true thì tiếp tục, false dừng + khối lệnh: nội dung lặp lại Chú ý: khối lệnh luôn có câu lệnh làm Thay đổi giá trị của btđk về false