Bài giảng HTML-DHTML-Javascript - Bài 06: Làm việc với javascript - Lê Quang Lợi

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