Lecture09 JAVASCRIPT Lập trình Java

TỔNG QUAN VỀ JAVASCRIPT GIỚI THIỆU VỀ JAVASCRIPT    Javascript đời với tên gọi LiveScript, sau Nescape đổi tên thành Javascript Tuy nhiên Java Javascript có điểm chung cú pháp chúng có điểm giống Ngôn ngữ Javascript tạo Nescape vào năm 1996 đưa vào trình duyệt Nescape Navigator 2.0 họ thông qua trình biên dịch để đọc thực mã lệnh Javascript kèm theo trang HTML Javascript ngôn ngữ kịch (script) để viết kịch cho phía client Client side yêu cầu người sử dụng xử lý máy khách Thông thường yêu cầu tính tóan, kiểm tra tính hợp lệ liệu hay hiệu ứng, yêu cầu thường không liên quan đến nguồn sở liệu server GIỚI THIỆU VỀ JAVASCRIPT  Đặc điểm JAVASCRIPT:  Javascript ngôn ngữ kịch viết chung với HTML  Javascript trình thông dịch  Javascript ngôn ngữ động đối tựơng có khả tương tác với thông qua người sử dụng kiện GIỚI THIỆU VỀ JAVASCRIPT  Đặc điểm JAVASCRIPT:  Là ngôn ngữ dựa đối tượng, nghĩa bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất chức toán học Nhưng JavaScript không ngôn ngữ hướng đối tượng C++/Java  Phân biệt chữ hoa, chữ thường  Được hỗ trợ tất trình duyệt Nescape Internet Explorer  JavaScript có khả tạo sử dụng đối tượng(Object) GIỚI THIỆU VỀ JAVASCRIPT Các đối tượng JavaScript gồm nhóm:  Các object có sẵn 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ó, đối tượng gồm phương thức (method) làm việc với thuộc tính (properties) b) Các Object người lập trình xây dựng: Định nghĩa thuộc tính, phương thức đối tượng: Cú pháp: ObjectName.PropertiesName ObjectName.Method() CẤU TRÚC CỦA ĐOẠN JAVASCRIPT  Nhúng Javascript vào tập tin HTML Các lệnh Javascript   Có thể viết nhiều đọan mã Javascript tập tin HTML Các khối mã Javascript đặt vị trí trang HTML CẤU TRÚC CỦA ĐOẠN JAVASCRIPT Ví dụ 1: document.write(“What is your name? ”); Nội dung trang CẤU TRÚC CỦA ĐOẠN JAVASCRIPT Ví dụ 2: Sưu tầm mã JavaScript từ Website http:// www.echip.com.vn hiệu ứng “Chuột đồng hồ” nhúng vào trang web CẤU TRÚC CỦA ĐOẠN JAVASCRIPT Sử dụng tập tin JavaScript bên ngoài: Có thể viết tập tin Javascript riêng sau kết nối với nhiều tập tin trang web khác Cú pháp: JavaScript program CẤU TRÚC CỦA ĐOẠN JAVASCRIPT Sử dụng tập tin JavaScript bên ngoài: Ví dụ: Sưu tầm mã JavaScript từ Website http:// www.echip.com.vn hiệu ứng “Ngoài rơi đầy” nhúng vào trang web 3.3 Các đối tượng thường dùng 3.3.2 Đối tượng forms(tt) Các phương thức: formName.submit () - Xuất liệu form tên formName tới trang xử lý Phương thức mô click vào nút submit form 84 84 3.3 Các đối tượng thường dùng 3.3.2 Đối tượng forms(tt) Cú pháp Các phần đối tượng Form: Button Một nút Phần tử Mô tả Checkbox Một checkbox FileUpload Một phần tử cho phép sử dụng gửi File Hidden Một trường ẩn Password Một trường text để nhập mật (*) Radio Một nút chọn Reset Một nút reset Select option1 option2 Một danh sách lựa chọn Submit Một nút submit Text Một trường text 85 textArea 85 defaulttext Một trường text cho nhập nhiều dòng 3.3 Các đối tượng thường dùng 3.3.2 Đối tượng forms(tt) Ví dụ: 86 function calculate(form) { form.results.value = eval(form.entry.value); } Enter a JavaScript mathematical expression: The result of this expression is: 86 3.3 Các đối tượng thường dùng 3.3.2 Đối tượng forms(tt) Ví dụ: function calculate(form,callingField) { if (callingField == "result") { if (form.square.checked){ form.entry.value = Math.sqrt(form.result.value); }else{ form.entry.value = form.result.value / 2;} }else{ if (form.square.checked){ form.result.value=form.entry.value*form.entry.value; }else { form.result.value = form.entry.value * 2; } } } Value: Action: Square Result: 87 87 3.3 Các đối tượng thường dùng 3.3.3 Đối tượng Date Các phương thức 88 dateVar.getYear() Trả lại năm dateVar.getMonth() Trả lại tháng (1-12) dateVar.getDate() Trả lại ngày tháng (1-31) dateVar.getDay() Trả lại ngày nhật, 6=thứ bảy) dateVar.getHours() Trả lại (0-23) dateVar.getMinutes() Trả lại phút (0-59) dateVar.getSeconds() Trả lại giây (0-59) tuần (0=chủ 88 3.3 Các đối tượng thường dùng 3.3.3 Đối tượng Date Các phương thức dateVar.setDay(day) Đặt ngày tháng day cho dateVar dateVar.setMonths(months) Đặt tháng months cho dateVar dateVar.setYear(years) Đặt năm years cho dateVar dateVar.setHours(hours) Đặt hours cho dateVar dateVar.setMinutes(minutes) Đặt phút minutes cho dateVar dateVar.setSeconds(seconds Đặt giây seconds cho dateVar ) 89 89 3.3 Các đối tượng thường dùng 3.3.3 Đối tượng Date Ví dụ d = new Date(); thu = d.getDay() ; ngay= d.getDate(); ngay= ((ngay< 10) ? '0' : '') + ngay; thang= d.getMonth()+1; thang= ((thang< 10) ? '0' : '') + thang; nam= 1900 + d.getYear(); gio = d.getHours(); phut = d.getMinutes(); phut= ((phut< 10) ? ':0' : ':') + phut; if(thu == 0) thu = " Chủ nhật"; if(thu == 1) thu = " Thứ hai"; if(thu == 2) thu = " Thứ ba"; if(thu == 3) thu = " Thứ tư"; if(thu == 4) thu = " Thứ năm"; if(thu == 5) thu = " Thứ sáu"; if(thu == 6) thu = " Thứ bảy"; 90 document.write("" +"Bây là: "+ gio + ":" + phut +"" ) ; document.write(" Hôm là:" + thu + ", ngày " + + " tháng " + thang + " năm " + nam + ""); 90 3.3 Các đối tượng thường dùng 3.3.4 Đối tượng Math Các thuộc tính 91 E LN2 LN10 LOG2E Hằng số Euler, khoảng 2,718 logarit tự nhiên 2, khoảng 0,693 logarit tự nhiên 10, khoảng 2,302 logarit số e, khoảng 1,442 PI SQRT1_2 SQRT2 Giá trị pi, khoảng 3,14159 Căn bậc 0,5, khoảng 0,707 Căn bậc 2, khoảng 1,414 91 3.3 Các đối tượng thường dùng 3.3.4 Đối tượng Math(tt) Các phương thức Math.abs (number) Trả lại giá trị tuyệt đối number Math.ceil (number) Trả lại số nguyên nhỏ lớn number Math.cos (number) Trả lại giá trị cosine number Math.floor (number) Trả lại số nguyên lớn nhỏ number Math.max (num1,num2) Trả lại giá trị lớn num1 num2 Math.min (num1,num2) Trả lại giá trị nhỏ num1 num2 Math.pos (base,exponent) Trả lại giá trị base luỹ thừa exponent 92 Math.round (number) Trả lại giá trị number làm tròn tới số nguyên Math.sqrt (number) Trả lại bậc number 92 3.3 Các đối tượng thường dùng 3.3.5 Đối tượng String Các phương thức str.charAt(a) Trả lại ký tự thứ a chuỗi str str.fontcolor() Kết giống thẻ str.fontsize(size) Kết giống thẻ str.index0f(srchStr [,index]) Trả lại vị trí chuỗi str vị trí xuất chuỗi srchStr Chuỗi str tìm từ trái sang phải Tham số index sử dụng để xác định vị trí bắt đầu tìm kiếm str.small() Kết giống thẻ chuỗi str str.sub() Tạo subscript cho chuỗi str, giống thẻ str.substring(a,b) Trả lại chuỗi str ký tự từ vị trí thứ a tới vị trí thứ b Các ký tự đếm từ trái sang phải str.sup() Tạo superscript cho chuỗi str, giống thẻ str.toLowerCase() Đổi chuỗi str thành chữ thường str.toUpperCase() Đổi chuỗi str thành chữ hoa 93…… ……………… 93 3.3 Các đối tượng thường dùng 3.3.6 Đối tượng history Sử dụng để lưu giữ thông tin URL trước sử dụng Danh sách URL lưu trữ theo thứ tự thời gian Các thuộc tính Length - Số lượng URL đối tượng Các phương thức history.back(): Để tham chiếu tới URL thăm trước history.forward(): Để tham chiếu tới URL danh sách 94 94 3.3 Các đối tượng thường dùng 3.3.7 Đối tượng links Là đoạn văn hay ảnh liên kết Các thuộc tính đối tượng link chủ yếu xử lý URL liên kết Các thuộc tính 95 Hostname Tên host domain (ww.abc.com) href Toàn URL cho document Pathname Phần đường dẫn URL (/chap1/page2.html) port Cổng truyền thông sử dụng cho máy tính host, thường cổng ngầm định Protocol Giao thức sử dụng(http:) Target Giống thuộc tính target ……… ………………… 95 3.3 Các đối tượng thường dùng 3.3.8 Đối tượng Navigator Được sử dụng để biết thông tin trình duyệt số phiên Các thuộc tính AppName Xác định tên trình duyệt AppVersion Xác định thông tin phiên đối tượng navigator …… 96 …………… 96 3.3 Các đối tượng thường dùng 3.3.9 Đối tượng document Đối tượng chứa thông tin document thời Được tạo cặp thẻ Các thuộc tính bgColor 97 Giống thuộc tính Bgcolor fgColor Giống thuộc tính Text forms Mảng tất form document links Mảng tất link document location URL đầy đủ văn referrer URL văn gọi title Nội dung thẻ …… ………… 97 3.3 Các đối tượng thường dùng 3.3.9 Đối tượng document (tt) Các phương thức document.clear Xoá document thời document.write(expression1 [,expression2] [,expressionN]) Viết biểu thức cửa sổ xác định ………… ………………… LỜI KẾT: Nên tham khảo toàn diện JavaScript Web hãng Netscape (http://www.netscape.com ) để có thông tin ngôn ngữ 98 98 [...]... CỦA ĐOẠN JAVASCRIPT Lưu ý: trong thẻ JavaScript ta có thể bỏ thuộc tính SRC và Language, khi đó ngôn ngữ mặc định là JavaScript 3 Môi trường viết JAVASCRIPT: − Frontpage − Notepad − Visual InterDev − Dreamweaver để viết mã Javascript, Dreamweaver hỗ trợ phân biệt từ khóa bằng màu chữ, hỗ trợ các hàm, thuộc tính của các tag, giúp người sử dụng thuận tiện trong việc thiết kế và viết chương trình CÚ... và khối lệnh:  Lệnh đơn: là một câu lệnh được kết thúc bằng dấu chấm phẩy(;) Trong JavaScript cuối mỗi câu lệnh ta có thể dùng dấu (;) hoặc không dùng dấu gì cả  Khối lệnh: là tập hợp nhiều câu lệnh đơn được bao bọc bởi cặp dấu {} Lời chú thích trong chương trình: trình duyệt sẽ bỏ qua khi thông dịch chương trình JavaScript hổ trợ 2 loại chú thích: − Chú thích trên một dòng: dùng cặp dấu // − Chú... document.writeln("Hello"); document.writeln("World"); BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT  Biến − Biến là tên của một phần tử trong chương trình, được sử dụng để lưu trữ thông tin do người dùng nhập vào hoặc kết quả trung gian của quá trình tính toán − Trong Javascript khi khai báo biến không cần xác định kiểu dữ liệu cho biến, do đó khi một biến được khai báo thì nó... 5 1) returns true hoặc x = 6 ; y =3 (x==5 || y==5) returns false not x=6; y =3; !(x==y) returns true BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT e) Toán tử chuỗi Ký hiệu: + : Là phép toán nối hai chuỗi Ví dụ: txt1=”Welcome to”; txt2= JavaScript! "; document.write(''+txt1+txt2+'');... 0; Biến cục bộ: Khai báo trong các hàm Chỉ được truy cập trong phạm vi chương trình mà nó khai báo Biến cục bộ được khai báo trong một hàm với từ khoá var: var x = 0; Lưu ý: Nếu tên biến toàn cục và cục bộ trùng nhau thì biến được sử dụng trong hàm là biến cục bộ BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT a) Cách khai báo biến: Trong JavaScript, để khai báo biến dùng từ khoá var, cũng có thể bỏ qua từ khóa var... kế tiếp nhau cách nhau bởi dấu (,) BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT Một biến có thể chứa bất kỳ kiểu dữ liệu nào, giá trị của biến có tác dụng từ vị trí khai báo trở đi Ví dụ: var a=”Hello World”; a=1999 ; Cách xuất giá trị của biến: document.write(VariableName ) Ví dụ: var a=”Hello World”; a=1999 ; document.write(a) − b) BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT c) d) Quy tắc đặt tên biến: Tên biến gồm các... nguyên tắc sau:  Tên biến phải bắt đầu bằng ký tự hoặc ký tự gạch dưới( _ )  Không bắt đầu bằng ký tự số  Không chứa khoảng trắng, tên biến phải gợi nhớ  Không trùng với từ khoá của JavaScript Các từ khoá trong JavaScript abstract extends int super Boolean false interface switch break final Long synchronized byte finally native this case float New throw catch for Null throws char Function package... var s1, s2, s3 ; s1=”Hello World” ; s2=’Hello World ‘ ; BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT Kiểu Boolean: Là dữ liệu chỉ có 2 giá trị False hoặc True thường dùng trong trường hợp biến hoặc hàm chỉ nhận một trong 2 trạng thái đúng hoặc sai d) Kiểu Null: trả về giá trị rỗng Tóan tử:  Tóan tử số học c) 3 BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT Tóan Tử Chức Năng Ví dụ Kết quả + * / % cộng Trừ Nhân Chia Chia lấy... dư x=2; x+2 x=2; 5-x x=4; x*5 5/2 5%2 4 3 20 2.5 1 ++ Tăng 1 Giảm 1 x=5; x++ x=5; x 6 x=4 BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT b)Toán tử gán Tóan Tử = Ví dụ x=y Tương đương x= y += x += y x = x+y -= *= /= %= x -= y x *= y x /= y x%=y x = x-y x = x*y x= x/y x = x%y BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT c) Toán tử so sánh Tóan Tử == != > < >=