giáo trình thiết kế website với javascript bản chuẩn phần 2

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

Định dạng
Số trang	24
Dung lượng	161,95 KB