Home HTML căn bản Chapter 6: JavaScript - JS - Giáo trình HTML căn bản - Đại học Tây Đô March 07, 2023 Giáo trình hướng dẫn HTML căn bản theo chương trình Đại học.Chương 5: JAVASCRIPT - JS ->Bấm vào Đây để tải về!key: Chương 5 JAVASCRIPT - JS - Giới thiệu về ngôn ngữ script • Các đối tượng trình duyệt trong Javascript • Sử dụng form và các sự kiện cho các phần tử • Javascript – Bảng kiểu • Javascript – Định thời gian • Nội dung động và định vị động Ngôn ngữ Script • Là ngôn ngữ dạng thông dịch • Giúp trang web có tính tương tác với người • Các ngôn ngữ script thông dụng – Javascript (Netscape) – Jscript (Microsoft) – VBScript (Microsoft) Server-Side Script • Các script phía máy chủ được thực thi trên • Khi máy khách yêu cầu một trang HTML chứa một script chạy trên máy chủ, máy chủ Web khởi động các runtime engine. Engine thực hiện các mã lệnh và gửi HTML kết quả về cho máy khách để hiển thị. Server-Side Script Client-Side Script • Các script phía máy khách được thực thi trên máy tính người dùng – (Web Browser). • Các trang Web có chứa script chạy trên máy khách cũng giống như những trang Web bình thường, nghĩa là chúng là những tập tin có phần mở rộng .htm hoặc .html. • Khi trình duyệt nhận tài liệu, nó thực hiện các câu lệnh HTML và JavaScript/VBScript mà không cần tương tác với máy chủ. Nhúng Script vào trang web • Định nghĩa script trực tiếp <script type=“text/javascript”> <script type=“text/vbscript”> <!-- ‘Lệnh VBScript --> </script> • Nhúng script từ 1 file khác <script src=“xxx.js”></script> <script src=“xxx.vbs”></script> Vị trí đặt script trong HTML • Đặt giữa tag <head> và </head>: đoạn script sẽ thực thi ngay khi trang web được mở. • Đặt giữa tag <body> và </body>: Đoạn script trong phần body được thực thi khi trang web đang mở (sau khi thực thi các đoạn script có trong phần <head>). • Số lượng đoạn script không hạn chế. Nhúng Javascript vào trang web <script type="text/javascript"> alert(“from head”);</script> <h1> first line</h1><script type="text/javascript"> alert(“from body”);</script> <h1> second line</h1>• Giới thiệu về ngôn ngữ script • Các đối tượng trình duyệt trong Javascript • Sử dụng form và các sự kiện cho các phần tử • Javascript – Bảng kiểu • Javascript – Định thời gian • Nội dung động và định vị động • Cú pháp và quy ước • Một số cấu trúc lập trình cơ bản – Cấu trúc điều khiển – Một số đối tượng dữ liệu Cú pháp và qui ước • Javascript phân biệt chữ hoa – chữ thường Vd: Hai biến Java, java là khác nhau • Tất cả các câu lệnh javascript đều cách nhau • Không phân biệt khoảng trắng, Tab, xuống dòng trong câu lệnh. Cú pháp và qui ước – Chuỗi trong javascript được đặt trong cặp nháy đơn(„‟) hoặc nháy kép (“”) Vd: „You did\‟t get that done‟ Cú pháp và qui ước • Các loại dấu ngoặc: • Ghi chú : Theo cú pháp ghi chú của C++ // Đây là ghi chú /* Đây là ghi chú nhiều dòng*/ Cú pháp và qui ước • Tên biến và hàm : – Bắt đầu bằng Ký tự (A..Z, a..z), _, $ – Không được bắt dầu bằng ký số (0..9) – Không có khoảng trắng giữa tên(biến hoặc hàm) – Không được đặt tên trùng từ khóa Vd: x x13 _money $money add_two_num(....) addTwoNum(.....) Danh sách từ khóa Khai báo biến • Phân biệt giữa ký tự thường và hoa var strname = some value; strname = some value; var strname = "Hege"; strname = "Hege" ; • 1 Biến trong javascript có thể lưu bất kỳ kiểu dữ liệu nào Chuyển kiểu dữ liệu • Được chuyển tự động : – var answer = 42; – answer = "Thanks for all the fish...“; – x = "The answer is " + 42; • Chuyển chuỗi sang số: – parseInt(), parseFloat() Chuyển kiểu dữ liệu => Kết quả: str_Tuoi = "Bạn được 20 tuổi" Phép toán (Toán tử) • Phép tăng hoặc giảm 1: ++, -- • Gán rút gọn: +=, -= , /=, %= *= , , !=, <, <=, >, >= • Phép tính số học: +, -, • Phép toán luận lý: &&, ||, !, • Phép : (cond) ? Expr1:Expr2 * , /, % Cấu trúc điều khiển • Lựa chọn switch • Vòng lặp while • Vòng lặp do.. While • Từ khóa : break, continue Cấu trúc lựa chọn IF-ELSE if (condition) statements1 if (condition) { statements1 } else { statements2 } Cấu trúc lựa chọn IF-ELSE Cấu trúc lựa chọn Switch-Case { case 1: execute code block 1 break case 2: execute code block 2 break default: code to be executed if n is different from case 1 and 2 Cấu trúc lựa chọn Switch-Case Cấu trúc lặp FOR for (initial-expression; condition; increment-expression) statements Cấu trúc lặp FOR Cấu trúc lặp WHILE, DO-WHILE while (var<=endvalue) code to be executed do { code to be executed } while (var<=endvalue) Cấu trúc lặp WHILE, DO-WHILE Cấu trúc lặp WHILE, DO-WHILE Break trong cấu trúc lặp Continue trong cấu trúc lặp • JavaScript có sẵn các hàm đinh nghĩa trước dùng • Một vài hàm định nghĩa trước trong JavaScript • Hàm do người dùng tự tạo function funcName(argument1,argument2,etc) { statements; } • Câu lệnh Return Demo 39 Định nghĩa hàm function functionname(var1,var2,...,varX) some code Vd: function total(a,b) return x product=total(2,3) 40 Định nghĩa hàm Định nghĩa hàm alert(sometext) confirm(sometext) prompt(sometext, defaultvalue) Một số đối tượng dữ liệu • Number Object String: Thuộc tính • length : chiều dài của chuỗi • constructor : Dùng để kiểm tra kiểu của biến • Nối kết các chuỗi bằng toán tử + String: Thuộc tính – ví dụ String: Phương thức String: Phương thức String: Phương thức String: Phương thức – ví dụ • Phương thức – abs – acos – asin – atan – atan2 – ceil – cos – exp – floor : – log – max – min – pow – random – round – sin – sqrt – tan var x = Math.random(); document.write(x); // x = 0 -> 1 Date: thuộc tính Date: phương thức • setDate • setFullYear • setHours • setMilliseconds • setMinutes • setMonth • setSeconds • setTime • setYear • parse • toDateString • toGMTString • toLocaleDateString • toLocaleString • toLocaleTimeString • toString • toTimeString • toUTCString • getYear 57 Array: thuộc tính • Chỉ số mảng bắt đầu bằng chỉ mục 0 length constructor Array: phương thức Array – ví dụ Array nhiều chiều – ví dụ JavaScript hỗ trợ đến 60 chiều • Giới thiệu về ngôn ngữ script Các đối tượng trình duyệt trong Javascript • Sử dụng form và các sự kiện cho các phần tử • Javascript – Bảng kiểu • Javascript – Định thời gian • Nội dung động và định vị động Các đối tượng • Các sự kiện thông thường trong • Các đối tượng trong trình duyệt – Thuộc tính và phương thức Đối tượng Event – Khái niệm • Sự kiện là kết quả của các hành động được thực hiện bởi người sử dụng • Một sự kiện có thể được khởi tạo bởi người sử dụng hoặc hệ thống • Mỗi sự kiện được kết hợp với một đối tượng Event. Đối tượng Event cung cấp thông tin về: – Vị trí của con trỏ tại thời điểm xảy ra sự kiện • Đối tượng Event được xem như một phần của trình xử lý sự kiện Chu trình sống của sự kiện • Chu trình sống của sự kiện thông thường bao – Hành động của người sử dụng hoặc một điều kiện tương ứng khi sự kiện xảy ra – Đối tượng Event được cập nhật ngay lập tức để phản ánh sự kiện – Phát sinh sự kiện – Trình xử lý sự kiện tương ứng được gọi – Trình xử lý sự kiện thực hiện các hành động và trả về kết quả JavaScript Event • Các sự kiện thông thường mà JavaScipt hỗ trợ: • onMouseOver • onMouseOut • onLoad • onSubmit • onMouseDown • onMouseUp • Sự kiện onClick được khởi tạo khi người sử dụng click chuột vào button hoặc các phần tử form hoặc <script LANGUAGE="JavaScript"> function compute(form) if (confirm("Are you sure?")) form.result.value = eval(form.expr.value) alert("Please come back again.") Enter an expression: <input TYPE="text" NAME="expr" SIZE=15 ><br><br> <input TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)" > <br><br><br> Result: <input TYPE="text" NAME="result" SIZE=15 > <br> </FORM> </BODY> </HTML> • Sự kiện onChange xảy ra khi một phần tử form thay đổi. Điều này có thể xảy ra khi nội dung của phần tử text thay đổi, hoặc khi một lựa chọn trong danh sách lựa chọn thay đổi. else alert ("Thank you"); <script LANGUAGE="JavaScript"> <!--- hide script from old function checkNum(num) { alert("Please enter a } // end hiding from old alert("Please enter a numeric browsers --> </SCRIPT> </HEAD> <body bgColor = white> <form> <input type = text size = 5 onChange="checkNum(this.value)"> </FORM> </BODY> </HTML> 70 Please enter a number: onFocus/onBlur/onMouseOver/o • Sự kiện onFocus được gởi đi bất cứ khi nào phần tử form trở thành phần tử form hiện thời. Chỉ khi phần tử nhận được focus nó mới chấp nhận dữ liệu nhập từ người dùng. • Blur ngược với focus. Khi người dùng rời khỏi phần tử form, sự kiện onBlur được kích hoạt. onFocus/onBlur/onMouseOver/o • onMouseOver • Sự kiện onMouseOver được khởi tạo khi con trỏ chuột di chuyển lên trên một phần tử. • Sự kiện onMouseOut được khởi tạo khi con trỏ chuột rời khỏi phần tử đó. onMouseOut – ví dụ function showLink(num) document.forms[0].elements[0]. value= “Bạn chọn WEB"; document.forms[0].elements[ 0].value = “Bạn chọn C++"; document.forms[0].elements[0]. value = “Bạn chọn Oracle"; </head> <body> <form> <input type=text size=60 > </form><a href="#" onMouseOver="showLink(1)"documen t.bgcolor= “ green">WEB</a><br> <a href="#" onMouseOver="showLink(2)">C++</a ><br> <a href="#" onMouseOver="showLink(3)">Oracle </a><br> </body> </html> onMouseOut • Di chuyển con trỏ chuột lên trên từ WEB, xem kết onLoad/onSubmit/onMouseDown/ – Sự kiện onLoad được gửi đến đối tượng document khi đã tải xong tài liệu – Sự kiện onSubmit phát sinh bất cứ khi nào người dùng gửi form đi (sử dụng nút Submit). Sự kiện xảy ra trước khi form thật sự được gửi onLoad/onSubmit/onMouseDown/ • onMouseDown – Sự kiện này được kích hoạt khi hành động nhấp – Sự kiện này được kích hoạt khi hành động nhả onResize - Example – Sự kiện này được kích hoạt khi sự kiện resize xảy ra, nghĩa là khi người dùng hoặc script chỉnh kích thước cửa sổ hay frame. <script language="JavaScript"> window.onresize= notify; alert("Window resized!"); <body> Please resize the window. Điều khiển các sự kiện • Phân đoạn này của mã JavaScript chạy để đáp ứng với sự kiện được gọi là trình điều khiển sự kiện. <input TYPE="button" NAME="docode" onClick="DoOnClick();"> • Trình điều khiển sự kiện được xếp loại theo: – Trình điều khiển sự kiện như là thuộc tính của <tag eventHandler="JavaScript Code"> – Trình điều khiển sự kiện như là thuộc tính của object.eventhandler = function; Các đối tượng trên trình duyệt • Trình duyệt là một ứng dụng được sử dụng để hiển thị nội dung của tài liệu HTML. • Các trình duyệt cũng đưa ra một số đối tượng có thể được truy cập và sử dụng trong script . • Một tính năng quan trọng của JavaScript là ngôn ngữ dựa trên đối tượng. • Giúp người dùng phát triển chương trình theo môđun và có thể sử dụng lại. • Đối tượng được định nghĩa là một thực thể đơn nhất bao gồm các thuộc tính và phương • Thuộc tính là giá trị của một đối tượng. Vd: Document.bgcolor Đối tượng Window • Đối tượng này tương ứng với cửa sổ của trình duyệt và có thể được sử dụng để truy xuất thông tin về trạng thái của cửa sổ. Các thuộc tính: Các phương thức: • alert • blur • close • focus • navigate • open Đối tượng Document • Đối tượng này thể hiện tài liệu HTML trong cửa sổ trình duyệt và cho phép truy xuất thông tin trong cửa số đó. • alinkColor, bgColor • fgColor, linkColor Các phương thức: • clear • close • open • write • writeln Đối tượng History • Đối tượng này cung cấp danh sách URL được thăm gần đây nhất của client • Chẳng hạn, phương thức "back()" của history hiển thị tài liệu ngay trước đó trong cửa số trình duyệt: history.back(); Phương thức: • back • forward • go Đối tượng Location • Đối tượng này chứa thông tin về URL hiện thời. Nó cung cấp phương thức cho phép trình duyệt có thể tải lại URL đó. Các thuộc tính: Các phương thức: • assign • reload • replace • Giới thiệu về ngôn ngữ script • Các đối tượng trình duyệt trong Javascript Sử dụng form và các sự kiện cho các phần tử • Javascript – Bảng kiểu • Javascript – Định thời gian • Nội dung động và định vị động • Làm việc với đối tượng form và các thành phần trên Form • Sử dụng các sự kiện của đối tượng Form • Kiểm tra tính hợp lệ của Form Đối tượng Form • Đối tượng Form chứa 3 thuộc tính: <form ACTION="Simple.htm“ Accept=“TEXT/HTML” Method=“POST”> Đối tượng Textfield (1) • Textfield nhận biết các sự kiện onBlur, onFocus và – onFocus xuất hiện khi nhấp chuột vào bên trong trường văn bản. – onBlur xảy ra khi người dùng di chuyển ra khỏi trường văn bản – onChange xảy ra khi người dùng có sự thay đổi trong trường văn bản và sau đó di chuyển ra khỏi trường văn bản Đối tượng Textfield(2) <input type="text" name="first_text" onFocus="writeIt('focus');" onBlur="writeIt('blur');" onChange="writeIt('change');"> Đối tượng Command Button • Command button nhận biết sự kiện • onClick xuất hiện khi người sử dụng nhấp chuột vào command button <input TYPE="button" value="Copy" onClick="writeIt(myfm.first_text.value);"> Đối tượng Checkbox • Checkbox là một đối tượng form HTML, hoạt động theo cơ chế bật tắt • Checkbox có thể được Check hoặc không • Giống như nút lệnh checkbox cũng hiểu được sự kiện onClick Nút lệnh tuỳ chọn/Đối tượng Radio • Radio buttons gần giống như checkboxes • Sự khác biệt ở đây là chỉ có một Radio được chọn. Khi một Radio được chọn, nó sẽ giữ nguyên sự lựa chọn đó cho đến khi nút khác • Radio button hiểu được sự kiện onClick. Nút tuỳ chọn/ Đối tượng Radio Button (2) ComboBox/Đối tượng Select(1) • Đối tượng ComboBox trong form HTML xuất hiện giống như một danh mục sổ xuống hoặc danh mục cuộn của các tuỳ chọn • Có thể sử dụng thanh cuộn để thay đổi sự hiển thị danh sách các lựa chọn • ComboBox hỗ trợ các sự kiện onBlur, onFocus, and onChange ComboBox/Đối tượng Select (2) Kiểm tra tính hợp lệ của Form(1) • Việc kiểm tra rất quan trọng, vì có thể có trường không chứa dữ liệu. • Cũng có thể có trường chứa dữ liệu không • Xem ví dụ sau: <title> Form Events </TITLE> <script LANGUAGE="JavaScript"> Kiểm tra tính hợp lệ của Form(2) function validateFirstName() { var str= form1.fname.value; if(str.length==0) { alert(" The first name cannot be empty"); function validateLastName() { var str= form1.lname.value; if(str.length==0) { alert(" The last name cannot be empty"); Kiểm tra tính hợp lệ của Form(3) var str= form1.email.value; if(str.length==0) { alert(" The Email field cannot be empty"); function processForm() { disp=open("", "result") disp.document.write("<title> Result Page </TITLE>"+"<pre>") disp.document.write("<h2 ALIGN='CENTER'>"+ "Thanks for signing in"+"</H2>"+"<hr>"+"<br><br>") disp.document.write("First name \t\t: "+form1.fname.value+"<br>") disp.document.write("Last name \t\t: "+form1.lname.value+"<br>") disp.document.write("Email \t\t\t: "+form1.email.value+"<br>") disp.document.write("Your Comments \t\t: "+form1.comment.value+"<br>") disp.document.write("<pre>") Kiểm tra tính hợp lệ của Form(4) if(disp.confirm("Is this information correct")) disp.close() } Kiểm tra tính hợp lệ của Form(4) <body BGCOLOR="#FFFFFF"> <h2 ALIGN="CENTER"> Handling Form Events</H2><hr> <input TYPE="text“ NAME="fname" size=10 onBlur="validateFirstName()"> <input TYPE="text" NAME="lname" size=15 onBlur="validateLastName()"> <input TYPE="text" NAME="email" size=10 onBlur="validateEmail()"> Comments : <textarea NAME="comment" rows=4 cols=30 > <input TYPE="button" value="Submit this form“ onClick="processForm()"> <input TYPE="reset"></P> </BODY></HTML> 102 Kiểm tra tính hợp lệ của Form(5) • Giới thiệu về ngôn ngữ script • Các đối tượng trình duyệt trong Javascript • Sử dụng form và các sự kiện cho các phần tử Javascript – Bảng kiểu • Javascript – Định thời gian • Nội dung động và định vị động Thay đổi kiểu trên trang • Viết kịch bản để thay đổi kiểu – Khai báo bảng kiểu dùng cú pháp javascript <script language=”JavaScript”> <id>.style.<thuộc tính>=<giá trị>; Thay đổi kiểu trên trang • Các thuộc tính của đối tượng Style giống như tên kiểu CSS nhưng ta cần: – Bỏ dấu gạch nối ra khỏi tên của kiểu CSS – Thay đổi ký tự đầu tiên của từ sau dấu gạch nối thành ký tự hoa – Vd: font-size của CSS trở thành thuộc tính fontSize của đối tượng Style Bảng kiểu dùng cú pháp Javascript Bảng kiểu dùng cú pháp Javascript • Kịch bản: Khi chúng ta di chuyển chuột lên một chuỗi văn bản thì kích thước và màu của <script language="JavaScript"> function change(size,color){ <body> <p id="id1“ onMouseOver="change(20,'red');" onMouseOut="change(16,'black');" >Move mouse over me ! </p></body> </html> • Giới thiệu về ngôn ngữ script • Các đối tượng trình duyệt trong Javascript • Sử dụng form và các sự kiện cho các phần tử • Javascript – Bảng kiểu Javascript – Định thời gian • Nội dung động và định vị động Định thời gian • setTimeout(f, n): quy định sau khoảng thời gian n mili giây hàm f sẽ được gọi. (f là chuỗi lưu lệnh cần thực hiện) • clearTimeout(timeID): Hủy setTimeout • setInterval(f, n): Sau mỗi khoảng thời gian n mili giây lệnh f được gọi. • clearInterval(intervalID): Hủy interval. • Giới thiệu về ngôn ngữ script • Các đối tượng trình duyệt trong Javascript • Sử dụng form và các sự kiện cho các phần tử • Javascript – Bảng kiểu • Javascript – Định thời gian Nội dung động và định vị động Nội dung động • Nội dung động là khả năng cho phép thay đổi nội dung của trang web bằng các lệnh Script. • Thay đổi nội dung của một phần tử theo 4 thuộc tính sau: document.all.<id>.<Tên thuộc tính> = <Giá trị mới> Định vị động • Để thay đổi vị trí của một phần tử nào đó trong IE và Netscape, trước hết cần phải đặt phần tử đó trong một tầng (<div>/<layer>). • Thay đổi vị trí thông qua thuộc tính sau: – pixelLeft : qui định di chuyển sang phải / sang trái – pixelTop: qui định di chuyển lên trên / xuống dưới document.all.<id>. style.pixelLeft = <vị trí mới> document.all.<id>. style.pixelTop = <vị trí mới>
Post a Comment