JAVASCRIPT Bài 1: TỔNG QUAN VỀ JAVASCRIPT Đặc tính ngôn ngữ Javascript: J avascript ngôn ngữ thông dịch (interpreter), chương trình nguồn nhúng (embedded) tích hợp (integated) vào tập tin HTML chuẩn Khi file load Browser (có support cho JavaScript), Browser thông dịch Script thực công việc xác định Chương trình nguồn JavaScript thông dịch trang HTML sau toàn trang load trước trang hiển thị Javascript ngôn ngữ có đặc tính: • Đơn giản • Động (Dynamic) • Hướng đối tượng (Object Oriented) Ngôn ngữ JavaScript: Một đặc tính quan trọng ngôn ngữ JavaScript khả tạo sử dụng đối tượng (Object) Các Object cho phép người lập trình sử dụng để phát triển ứng dụng Trong JavaScript ,các Object nhìn theo khía cạnh: a Các Object tồn b Các Object người lập trình xây dựng Trong Object tồn chia thành kiểu: a Các Object JavaScript (JavaScript Built-in Object) b Các đối tượng cung cấp môi trường Netscape Built-in Object JavaScript: JavaScript cung cấp Built-in Object để cung cấp thông tin hành đối tượng load trang Web nội dung nó.Các đối tượng bao gồm phương pháp (Method) làm việc với thuộc tính (Properties) Các đối tượng cung cấp môi trường Netscape: Netscape Navigator cung cấp đối tượng cho phép JavaScript tương tác với file HTML, đối tượng cho phép điều khiển việc hiển thị thông tin đáp ứng kiện môi trường Navigator.Ví dụ Đối tượng Window JAVASCRIPT Mô tả Cung cấp phương pháp tính chất cho cửa sổ hành trình duyệt,bao gồm đối tượng cho frame MEDIASPACE CLUB (HTD) PAGE: Location History Document Cung cấp tính chất phương pháp làm việc với địa URL hành mở Các đối tượng history cung cấp thông tin danh sách cũ giới hạn tương tác với danh sách Đây đối tượng sử dụng nhiều Nó chứa đựng Đối tượng,tính chất phương pháp làm việc với thành phần tài liệu :form,link,anchor,applet Các đối tượng người lập trình xây dựng: a Định nghóa thuộc tính đối tượng: (Object Properties) Cú pháp : Object-name.Property-name (tên đối tượng.tên đặc tính) Ví dụ :Một đối tượng airplane có thuộc tính sau: Airplane.model Airplane.maxspeed Airplane.price Airplane.fuel Airplane.seating b Thêm phương pháp cho đối tượng:( Method to Object) Sau có thông tin airplane ta tiếp tục xây dựng phương pháp để sử dụng thông tin này.Ví dụ bạn muốn in mô tả airplane tính toán khoảng cách tối đa hành trình với nhiên liệu có: Airplane.description() Airplane.distance() c Tạo instance đối tượng: Trước thao tác với đối tượng JavaScript ta phải tạo instance cho đối tượng Nhúng JavaScript vào tập tin HTML: Cú pháp: JavaScript Program Thuộc tính thẻ SCRIPT + SRC :Địa URL đến tập tin chương trình JavaScript (*.js) + LANGUAGE: Chỉ định ngôn ngữ sử dụng Script phiên sử dụng (ví dụ :JavaScript ,JavaScript 1.2 vv… ,VBScript) Ẩn Scripts Browser không cung cấp JavaScript: JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: Sử dụng tập tin JavaScript bên : Thêm chương trình vào tập tin HTML: Listing 2.1 Here is result: Bài 2: SỬ DỤNG JAVASCRIPT Cú pháp lệnh : JavaScript xây dựng hàm,các phát biểu,các toán tử biểu thức dòng kết thúc ; Ví dụ: document.writeln("It work"); Các khối lệnh: Nhiều dòng lệnh liên kết với bao { Ví dụ: { document.writeln("Does It work"); document.writeln("It work!"); } } Xuaát liệu cửa sổ trình duyệt: Dùng phương pháp document.write() document.writeln() Ví dụ: document.write(“Test”); document.writeln(“Test”); Xuất thẻ HTML từ JavaScript JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: Ví dụ 1: Outputting Text This is text plain Ví duï 2: document.write(''); document.write("WELCOME TO NETSCAPE 2.1"); - -> Example 2.4 Outputting Text Các kí tự đặc biệt chuoåi: \n : New line \t : Tab \r : carriage return \f : form feed \b: backspace Ví dụ: document.writeln("It work!\n"); Làm việc với dialog boxes Sử dụng hàm alert() để hiển thị thông báo hộp Ví dụ: Example 2.5 MEDIASPACE CLUB (HTD) PAGE: Tương tác với người sử dụng: Sử dụng phương pháp promt() để tương tác với người sử dụng Ví dụ 1: Listing 2.6 Ví dụ 2: document.write("Greeting ,"); document.writeln(prompt("enter your name:","name")); document.write("Welcome to netscape navigator 2.01 "); - -> Listing 2.6 Listing 2.6 Example 3.1 Ví du 2: tạo lại giá trị cho biến Example 3.2 var name=prompt("enter your name:","name"); alert ("greeting " + name + " , "); name=prompt("enter your friend's name:","friend's name"); 11 Làm việc với biến biểu thức: • Thiết lập biểu thức: Cú pháp: * Toán tử: = Thiết lập giá trị bên phải cho bên trái Ví dụ :x=5 += Cộng trái phải ,sau gán kết cho bên trái phép toán Ví dụ: cho x=10,y=5 x+=y => x=15 -= Trừ bên trái cho bên phải ,gán kết lại cho bên trái x-=y => x=5 JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: *= Nhân bên trái cho bên phải,gán kết cho bên trái x*=y => x=50 /= Chia bên trái cho phải ,gán kết lại cho bên trái x/=y => x=2 %= Chia bên trái cho bên phải lấy số dư gán lại cho bên trái x%=y => x=0 * Các toán tử khác: Ví dụ: x+=15+3 y=++x; (=> y=6 x tăng lên 6) => x=18 z=x++; (=> z=6 sau x gán cho z) 8+5 sau x tăng => x=7 32.5 * 72.3 Do ta có kết cuối là: 12 % x=7;y=6;z=6; Dấu ++ dấu - - dấu Ví dụ: x=5; Ví dụ: x=-x => x=-5 x=5; Phép toán Logic && : ||: ! not Ví dụ: x=5 ,y=2 ,c=3 (x>y) && (x>c) false && anything is always false (x>y) || (c true !x • Toán tử so saùnh JavaScript: == 1==1 => true != 3false > >=4 =>true < “the” != “he” => true >= 4==”4” =>true 12 Cấu trúc điều kiện if – else if điều kiện lệnh ; if điều kiện { Mã JavaScript } Ví duï: if (day==”Saturday”) { document.writeln(“It‘s the weekend”); alert(“ It’s the weekend”); } Ví dụ: If (day==”Saturday”) { document.writeln(“It‘s the weekend”); } If (day!=”Saturday”) { document.writeln(“It‘s not Saturday”); } Sử dụng cấu trúc else – if cho ví dụ If (day==”Saturday”) { document.writeln(“It‘s the weekend”); } else { document.writeln(“It‘s not Saturday”); } Cấu trúc kết hợp : if điều kiện { Các lệnh JavaScript JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: if điều kiện { Các lệnh JavaScript } else { lệnh khác } Các lệnh JavaScript } else { Các lệnh khác } Ví dụ : Sử dụng phương pháp confirm() với phát biểu if response=prompt(question,"0"); Example 3.3 } var question="What is 10+10 ?"; var answer=20; var correct=''; var incorrect=''; var response=prompt(question,"0"); if (response != answer) { if (confirm("Wrong ! press OK for a second change")) var output = (response ==answer ) ? correct:incorrect ; Ví dụ : Sử dụng phương pháp confirm() với phát biểu if - else question="What is 10*10"; answer=100; Example 3.3 var question="What is 10+10 ?"; var answer=20; var correct=''; var incorrect=''; var response=prompt(question,"0"); if (response != answer) { if (confirm("Wrong ! press OK for a second change")) response=prompt(question,"0"); }else { if (confirm("Correct ! press OK for a second question")) { response=prompt(question,"0"); } } var output = (response ==answer ) ? correct:incorrect ; MTWRFSS JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: BÀI 3: HÀM VÀ ĐỐI TƯNG Trong kỹ thuật lập trình lập trình viên thường sử dụng hàm để thực đoạn chương trình thể cho module để thực công việc Trong Javascript có hàm xây dựng sẵn để giúp bạn thực chức ví dụ hàm alert(), document.write(), parseInt() bạn định nghóa hàm khác để thực công việc bạn, để định nghóa hàm bạn theo cú pháp sau: function function_name(parameters, arguments) { command block } Truyền tham số: function printName(name) { document.write(“Your Name is ”); document.write(name); document.write(“”); } Ví dụ: Gọi hàm printName()với lệnh sau printName(“Bob”); Khi hàm printName()được thi hành giá trị name "Bob" gọi hàm printName()với đối số biến var user = “John”; printName(user); Khi name “John” Nếu bạn muốn thay đổi giá trị name bạn làm sau : name = “Mr “ + name; Phạm vi biến: Biến toàn cục (Global variable) Biến cục (Local variable) Trả giá trị: Ví dụ: Dùng return để trả giá trị biến cube function cube(number) { var cube = number * number * number; return cube; } MTWRFSS JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 10 Ví dụ: MTWRFSS Example 4.1 ’; var incorrect=’’; //ASK THE QUESTION var response=prompt(output,”0"); //CHECK THE RESULT return (response == answer) ? correct : incorrect; } // STOP HIDING FROM OTHER BROWSERS -> Hàm eval dùng chuyển đổi giá trị chuổi số thành giá trị số eval(“10*10”)trả giá trị 100 Hàm gọi lại hàm: Ví dụ: Example 4.2 ’; var incorrect=’’; //ASK THE QUESTION var response=prompt(output,”0"); //CHECK THE RESULT return (response == answer) ? correct : testQuestion(question); } // STOP HIDING FROM OTHER BROWSERS -> Ví dụ 2: Example 4.2 ’; MEDIASPACE CLUB (HTD) PAGE: 11 var incorrect=’’; //ASK THE QUESTION var response=prompt(output,”0"); //CHECK THE RESULT if (chances > 1) { return (response == answer) ? correct : testQuestion(question,chances-1); } else { return (response == answer) ? correct : incorrect; } } // STOP HIDING FROM OTHER BROWSERS -> Bài 4: TẠO ĐỐI TƯNG TRONG JAVASCRIPT Định nghóa thuộc tính đối tượng: function student(name,age, grade) { this.name = name; this.age = age; this.grade = grade; } Để tạo Object ta sử dụng phát biểu new.Ví dụ để tạo đối tượng student1 student1 = new student(“Bob”,10,75); thuộc tính đối tượng student1 : student1.name student1.age student1.grade Ví dụ để tạo đối tượng student2 student2 = new student(“Jane”,9,82); Để thêm thuộc tính cho student1 bạn làm sau: student1.mother = “Susan”; bạn định nghóa lại hàm student MTWRFSS function student(name, age, grade, mother) { this.name = name; this.age = age; this.grade = grade; this.mother = mother; } JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 12 Đối tượng thuộc tính đối tượng khác Ví dụ: function grade (math, english, science) { this.math = math; this.english = english; this.science = science; } bobGrade = new grade(75,80,77); janeGrade = new grade(82,88,75); student1 = new student(“Bob”,10,bobGrade); student2 = new student(“Jane”,9,janeGrade); student1.grade.math:dùng để lấy điểm Toán student1 student2.grade.science: dùng lấy điểm môn Khoa học student2 Thêm phương pháp cho đối tượng: function displayProfile() { document.write(“Name: “ + this.name + “”); document.write(“Age: “ + this.age + “”); document.write(“Mother’s Name: “ + this.mother + “”); document.write(“Math Grade: “ + this.grade.math + “”); document.write(“English Grade: “ + this.grade.english + “”); document.write(“Science Grade: “ + this.grade.science + “”); } function student(name,age, grade) { this.name = name; this.age = age; this.grade = grade; this.mother = mother; this.displayProfile = displayProfile; } student1.displayProfile(); Ví du: Example 4.3 Employee Profile: “ + this.name + “”); document.writeln(“Employee Number: “ + this.number); MEDIASPACE CLUB (HTD) PAGE: 13 document.writeln(“Social Security Number: “ + this.socsec); document.writeln(“Annual Salary: “ + this.salary); document.write(“”); } //DEFINE OBJECT function employee() { this.name=prompt(“Enter Employee’s Name”,”Name”); this.number=prompt(“Enter Employee Number for “ + this.name,”000-000"); this.socsec=prompt(“Enter Social Security Number for “ + this.name,”000-00-0000"); this.salary=prompt(“Enter Annual Salary for “ + this.name,”$00,000"); this.displayInfo=displayInfo; } newEmployee=new employee(); // STOP HIDING FROM OTHER BROWSERS -> Vi du: 12) ? myhours 12 : myhours; ampm = (myhours >= 12) ? 'Buổ i Chiề u ' : ' Buổ i Saù ng '; mytime = mydate.getMinutes(); myminutes = ((mytime < 10) ? ':0' : ':') + mytime; if(myday == 0) day = " Chủ Nhậ t , "; else if(myday == 1) day = " Thứ hai, "; else if(myday == 2) day = " Thứ ba, "; else if(myday == 3) MEDIASPACE CLUB (HTD) PAGE: 14 day = " Thứ tư, "; else if(myday == 4) day = " Thứ nă m, "; else if(myday == 5) day = " Thứ sá u , "; else if(myday == 6) day = " Thứ bả y , "; if(mymonth == 0) { month = "thá ng mộ t ";} else if(mymonth ==1) month = "thaù ng hai "; else if(mymonth ==2) month = "thaù ng ba "; else if(mymonth ==3) month = "thá ng tư "; else if(mymonth ==4) month = "thá ng nă m, "; else if(mymonth ==5) month = "thaù ng saù u "; else if(mymonth ==6) month = "thá ng bả y "; else if(mymonth ==7) month = "thaù ng taù m "; else if(mymonth ==8) month = "thá ng chín "; else if(mymonth ==9) month = "thá ng mườ i "; else if(mymonth ==10) month = "thá ng mườ i mộ t "; else if(mymonth ==11) month = "thá ng mườ i hai "; // End > Trong phần body bạn xuất dạng sau: document.write("" + ampmhour + "" + myminutes + ampm) document.write(" - " + day + " ngaø y " + myweekday +" "); document.write( month + " , naê m " + year + ""); Bài 5: SỰ KIỆN TRONG JAVASCRIPT Các kiện cung cấp tương tác với cửa sổ trình duyệt tài liệu hành load trang web, hành động user nhập liệu vào form click vào button form Khi sử dụng quản lý kiện bạn viết hàm để biểu diễn cho hành động dựa vào kiện đựoc chọn Bảng kiện Javascript JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 15 Tên kiện blur click change focus load mouseover select submit unload Mô tả Xãy điểm tập trungcủa ngõ vào di chuyển khỏi thành phần Form (Khi user click trường) Khi user Click vào link thành phần Form Xãy giá trị Form Field bị thay đổi user Xãy ngõ vào tập trung vào thành phần Form Xãy trang Load vào duyệt Xãy User di chuyển mouse qua Hyperlink Xãy User chọn trường thành phần Form Xãy User xác nhận nhập xong liệu Xãy User rời khỏi trang Web Bộ quản lý kiện (Event Handler) Để quản lý kiện javascript ta dùng quản lý kiện Cú pháp quản lý kiện: Ví dụ: Ví dụ: Vi du MTWRFSS JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 17 Example 5.1 Các kiện Form Cac kiện sử dụng để truy xuất Form như: OnClick, onSubmit, onFocus, onBlur, onChange Ví dụ: Khi giá trị thay đổi function check() gọi Ta dùng từ khóa this để chuyển đối tượng trường hành đến hàm check() Bạn dựa vào phương pháp thuộc tính đối tượng phát biểu sau: this.methodName() & this.propertyName Ví dụ: Example 5.3 Enter a JavaScript mathematical expression: MEDIASPACE CLUB (HTD) PAGE: 18 The result of this expression is: MTWRFSS formObjectName.fieldname:Dùng để tên trường hành Form formObjectName.fieldname.value: dùng lấy giá trị trường form hành Sử dụng vòng lặp JavaScript Vòng lặp for : Cú phaùp : for ( init value ; condition ; update expression ) Ví dụ : for (i = ; i < ; i++) { lệnh ; } Ví duï: for loop Examle Voøng lặp while : Cú pháp: While ( điều kiện) { lệnh JavaScript ; } Ví dụ: var num=1; while(num PLC, Sua chua, Thiet ke web Để đóng cửa sổ ta dùng phương pháp close() Ví duï: Close Example Close This Sample Sử dụng đối tượng string String đối tượng JavaScript,khi dùng đối tượng string không cần phát biểu để tạo instance (thể nghiệm) đối tượng ,bất kỳ lúc ta đặt text hai dấu ngoặc kép gán đến biến thuộc tính ta tạo đối tượng string Các thuộc tính đối tượng string Thuộc tính length giữ số kí tự string Các hành vi (Methods) đối tượng string a Anchor (nameAttribute) b big() c blink() d bold() e charAt(index) f fixed() g fontcolor(color) JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 23 h fontsize(size) i indexOf(character,[fromIndex]) j italics() k lastIndexOf(character,[fromIndex]) l link(URL) m small() n strike() o sub() p substring(startIndex,endIndex) q sup() r toLowerCase() s toUpperCase() JAVASCRIPT MEDIASPACE CLUB (HTD) Biên soạn: Phạm phú Tài Huu Thanh Design PAGE: 24 ... ,JavaScript 1 .2 vv… ,VBScript) Ẩn Scripts Browser không cung cấp JavaScript: WINDOWS