Lập Web HTML sv cong nghe thuc pham bai22

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 tốn tử biểu thức dòng kết thúc dấu ( ; ) 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 hai dấu { } Ví dụ:: { document.writeln("Nó có làm việc"); document.writeln("Nó làm việc!"); } Xuất liệu cửa sổ trình duyệt: Dùng phương thức document.write() document.writeln() Ví dụ:: document.write(“Test”); document.writeln(“Test”); Xuất thẻ HTML từ JavaScript J Ví dụ 1: Outputting Text Đây văn đơn giản > Ví dụ 2: Example 2.4 > Sử dụng phương thức writeln() với thẻ PRE: Outputting Text > Các kí tự đặc biệt chuỗ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 > JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: Tương tác với người sử dụng: Sử dụng phương thức promt( ) để tương tác với người sử dụng Ví dụ 1: Listing 2.6 > Ví dụ 2: Listing 2.6 > Sử dụng dấu + để cộng chuỗi đơn lại: Ví dụ 3: Listing 2.6 > Các kiểu liệu JavaScript: a Dữ liệu kiểu số: + Số nguyên: + Số Octal: Ví dụ: 720 Ví dụ: :056 + Số Hexa: Ví dụ::0x5F + Số thập phân : Ví dụ: :7.24 , -34.2 ,2E3 b Dữ liệu kiểu chuỗi: Ví dụ: ” Hello” ’245’ ““ c Dữ liệu kiểu Boolean: Kết trả true false JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: d Dữ liệu kiểu null: Trả giá trị rỗng e Dữ liệu kiểu văn (giống kiểu chuỗi) 10 Tạo biến JavaScript: Var example; Var example=”Hello”; Ta dùng document.write(example); để xuất nội dung biến Ví dụ: 1: dùng từ khóa var để khai báo biến Example 3.1 > > Ví dụ 2: tạo lại giá trị cho biến Example 3.2 var name = prompt("Nhap ten cua ban:","name"); alert ("greeting" + name + " , "); name = prompt("Ten mot nguoi ban cua ban:","friend's name"); 11 Làm việc với biến biểu thức: Thiết lập biểu thức: 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; } JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 11 Ví dụ::MT Example 4.1 ẨN ĐỐI VỚI TRÌNH DUYỆT //Dinh nghia Ham testQuestion() function testQuestion(question) { //Định nghĩa biến cục hàm var answer=eval(question); var output=”The nao la “ + question + “?”; var correct="DUNG"; var incorrect="SAI"; //ĐẶT CÂU HỎI var response=prompt(output,”0"); //KIỂM TRA KẾT QUẢ return (response == answer) ? correct : incorrect; } // THÔI ẨN ĐỐI VỚI CÁC TRÌNH DUYỆT > ẨN ĐỐI VỚI CÁC TRÌNH DUYỆT //ĐẶT CÂU HỎI VÀ KẾT QUẢ ĐẦU RA var result=testQuestion(“10 + 10”); document.write(result); //THƠI ẨN ĐỐI VỚI TRÌNH DUYỆT > 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 ẨN ĐỐI VỚI TRÌNH DUYỆT //ĐỊNH NGHĨA HÀM testQuestion() function testQuestion(question) { //ĐỊNH NGHĨA CÁC BIẾN CỤC BỘ TRONG HÀM var answer=eval(question); var output=”What is “ + question +“?”; //Có thể thay ảnh cho câu trả lời Đúng Sai var correct=’’; var incorrect=’’; //ĐẶT CÂU HỎI var response = prompt(output,”0"); //KIỂM TRA KẾT QUẢ return (response == answer) ? correct : testQuestion(question); } //THƠI ẨN ĐỐI VỚI TRÌNH DUYỆT > ẨN ĐỐI VỚI TRÌNH DUYỆT //ĐẶT CÂU HỎI VÀ CÁC KẾT QUẢ ĐẦU RA var result = testQuestion(“10 + 10”); document.write(result); //THÔI ẨN ĐỐI VỚI TRÌNH DUYỆT > Ví dụ 2: Example 4.2 ẨN ĐỐI VỚI TRÌNH DUYỆT //ĐỊNH NGHĨA HÀM testQuestion() function testQuestion(question,chances) { //ĐỊNH NGHĨA BIẾN CỤC BỘ CHO HÀM var answer=eval(question); var output=”What is “ + question +“?”; var correct=’’;AVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 12 var incorrect=’’; //ĐẶT CÂU HỎI var response=prompt(output,”0"); //KIỂM TRA KẾT QUẢ if (chances > 1) { return (response == answer) ? correct : testQuestion(question,chances1); } else { return (response == answer) ? correct: incorrect; } } // THƠI ẨN VỚI TRÌNH DUYỆT > ẦN VỚI TRÌNH DUYỆT //ĐẶT CÂU HỎI VỚI KẾT QUẢ ĐẦU RA var result = testQuestion(“10 + 10”,3); document.write(result); //THÔI ẨN VỚI TRÌNH DUYỆT > 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 function student(name, age, grade, mother) { this.name = name; this.age = age; this.grade = grade; this.mother = mother; } JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 13 Đố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 thức 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í dụ: Example 4.3 Ẩn với trình duyệt khác //Định nghĩa phương thức(Method) function displayInfo() { document.write(“Employee Profile:“ + this.name + “”); document.writeln(“Employee Number: “+ this.number); document.writeln(“Social Security Number: “ + this.socsec); document.writeln(“Annual Salary: “ + this.salary); document.write(“”); } //Định nghĩa Đối tượng(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,”00000-0000"); this.salary=prompt(“Enter Annual Salary for “ + this.name,”$00,000"); this.displayInfo=displayInfo; } newEmployee = new employee(); // Ngừng ẩn > Ẩn với trình duyệt newEmployee.displayInfo(); // Ngừng ẩn > Ví dụ: Begin var day = ""; var month = ""; var ampm = ""; var ampmhour = ""; var myweekday = ""; var year = ""; mydate = new Date(); myday = mydate.getDay(); mymonth = mydate.getMonth(); myweekday= mydate.getDate(); weekday= myweekday; myyear= myd ate.getYear(); year = myyear; myhours = mydate.getHours(); ampmhour = (myhours > 12) ? myhours - 12 : myhours; ampm = (myhours >= 12) ? 'Buổi Chiều ': ' Buổi Sá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) 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 ";} else if(mymonth ==1) month = "tháng hai "; else if(mymonth ==2) month = "tháng ba "; else if(mymonth ==3) month = "tháng tư "; else if(mymonth ==4) month = "tháng năm, "; else if(mymonth ==5) month = "tháng sáu "; else if(mymonth ==6) month = "tháng bảy "; else if(mymonth ==7) month = "tháng tá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 "; 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 + " ngà y " + myweekday +" "); document.write( month + " , năm " + year + ""); ... document.write("xin chao ," + name + " Hoan nghenh ban den voi SARA  "); ­­> < /HTML> 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ị... document.write("Xin chao ," + name + " Hoan nghenh ban den voi SARA "); > < /HTML> Ví dụ 2: tạo lại giá trị cho biến Example 3.2 ... LANGUAGE="Javascript"> < /HTML B (HTD) PAGE: 10 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