JavaScript là một
ngôn ngữ lập trình được sử dụng để làm cho các website tương tác với nhau. JavaScript chạy trên máy tính của khách truy cập của bạn, không cần phải download liên tục từ các trang web của bạn và thường được sử dụng để tạo ra các
poll và quizz. Ví dụ: Cách nhúng mã JavaScript | <html> <head> <title>This is a JavaScript example</title> <script language="JavaScript"> <!-- document.write("Hello World!"); //--> </script> </head> <body> Hi, man! </body> </html> |
Javascript thường được bắt đầu với thẻ
<script language=”JavaScript”> và kết thúc với thẻ </
script>. Giữa dòng mã
<head> và </head>, thỉnh thoảng, bạn có thể nhúng mã vào trong thẻ <body>
| <html> <head></head> <body> <script> .....// The code embedded in the <body> tags. </script> </body> </html> |
Đặt đoạn mã JavaScript trong thẻ
<!– and //–>? có nghĩa là mã Script không được hiển thị và tương tác trên trình duyệt, không được tương tác bởi
JavaScript.
Việc thêm đoạn mã trong thẻ <!– and //–>? là việc tùy chọn, không khuyến khích làm. Bạn có thể làm với version sau của javascript:
| <script language="JavaScript1.2"> |
Bạn có thể sử dụng thuộc tính khác như
SRC để thêm một file ngoài có chứa mã JavaScript:
| <script language="JavaScript" src="hello.js"></script> |
Ví dụ, đoạn mã dưới đây thể hiện file ngoài là
hello.js:
| document.write("Hello World!") |
File ngoài là một đoạn văn bản đơn giản gồm những dòng mã javascript với file có đuôi là “.
js“.
Chú ý: – Tập tin ngoài chỉ có chức năng đáng tin cậy trên 4 trình duyệt.
– Các đoạn mã không thêm thẻ
<script language … > và </script>, hoặc bạn sẽ có một lỗi văn bản.
– Bao gồm một tập tin bên ngoài chỉ có chức năng đáng tin cậy trên nền tảng trong phiên bản 4 trình duyệt.
Lệnh write và writeln trong JavaScript
Văn bản đầu ra sử dụng trong JavaScript là write() và writeln(). Dưới đây là ví dụ:
| <HTML> <HEAD> <TITLE> Welcome to my site</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- document.write("Welcome to my site!"); // --> </SCRIPT> </BODY> </HTML> |
Chú ý: Chủ đề đoạn văn viết là chữ thường bởi
JavaScript là trường hợp có tính nhạy cảm. Sự khác nhau giữa write và writeln là: write chỉ đầu ra với văn bản, writeln là đầu ra với văn bản và một dòng xuống dòng.
Đối tượng văn bản trong JavaScript
Các đối tượng tài liệu là một trong những đối tượng quan trọng nhất của JavaScript. Dưới đây là một đoạn mã JavaScript rất đơn giản:
| document.write("Hi there.") |
Trong mã này, tài liệu là đối tượng. write là phương pháp của đối tượng này. Hãy có một cái nhìn tại một số các phương pháp khác mà các đối tượng tài liệu sở hữu.
lastModified Bạn có thể cập nhật ngày cuối cùng vào trang của bạn bằng cách sử dụng đoạn mã sau:
| <script language="JavaScript"> document.write("This page created by John N. Last update:" + document.lastModified); </script> |
Tất cả điều bạn cần làm ở đây là sử dụng thuộc tính của văn bản. Chú ý rằng các bạn đã sử dụng “+” để đặt chúng với nhau.
bgColor và fgColor Cố gắng làm quen với bgColor và fgColor:
| <script> document.bgColor="black" document.fgColor="#336699" </script |
Hộp thư trong JavaScript
Ở đây có 3 loại hộp thư : alert(cảnh báo), confirm(xác nhận) và prompt(nhắc nhở). Dưới đây là ví dụ đầu tiên:
| <body> <script> window.alert("Welcome to my site!") </script> |
Bạn có thể đặt bất kỳ những gì bạn muốn trong dấu ngoặc kép.
confirm Ví dụ về hộp thư xác nhận:
| window.confirm("Are you sure you want to quit?") |
prompt Hộp thư nhắc nhở được sử dụng để cho phép một người sử dụng để nhập điều cần vào hộp thư nhắc nhở:
| window.prompt("please enter user name") |
Trong tất cả ví dụ trên, chúng ta đã viết phương thức window.alert(). Thực tế, các bạn viết như sau:
Biến và điều kiện trong JavaScript
Ví dụ: Biến và điều kiện
| <script> var x=window.confirm("Are you sure you want to quit") if (x) window.alert("Thank you.") else window.alert("Good choice.") </script> |
Có một số khái niệm mà bạn nên biết. Trước hết,
“var x =” là các khai báo một biến. Nếu bạn muốn tạo một biến, bạn phải khai báo các biến sử dụng câu lệnh var. x sẽ là kết quả có được, một cách chính xác là
true hoặc false. Sau đó các bạn sử dụng một câu lệnh var if else để đưa mã script có khả năng lựa chọn giữa hai đường dẫn. phụ thuộc vào kết quả. Nếu kết quả là true(người dùng chọn
OK), hộp thông báo sẽ xuất hiện thông báo với dòng chữ “
Thank you”. Nếu kết quả là “false”(người dùng ấn”cancel”), hộp thông báo xuất hiện dòng chữ “
Good choice“. Vì vậy bạn cần tạo nhiều hộp thông báo sử dụng var với những phương thức cơ bản.
| <script> var y=window.prompt("please enter your name") window.alert(y) </script> |
Ví dụ: | <html><head> <script> var x=confirm("Are you sure you want to quit?") if (!x) window.location="http://www.yahoo.com" </script> </head> <body> Welcome to my website!. </body></html> |
Nếu abnj chọn “cancel”, nó sẽ đưa bạn tới yahoo và bạn chọn OK sẽ tiếp tục với việc tải trang hiện tại với dòng chữ “
Welcome to my website“. Chú ý: câu lệnh
if(!x): có nghĩa là nếu chọn người dùng chọn “
cancel“. Trong JavaScript, thì dấu “!” có nghĩa là không.
Hàm trong JavaScript
Hàm là các khối có chứa các dòng mã. Ví dụ dưới đây tạo một hàm đơn giản:
| function test() { document.write("Hello can you see me?") } |
Chú ý rằng if này chỉ sử dụng trong thẻ
<script></script>, bạn sẽ không nhìn thấy cụm từ “
Hello can you see me ?” trên màn hình bởi vì hàm này không được thực thi bởi chúng trong khi các bạn gọi nó. Vì vậy bạn nên làm như sau:
| function test() { document.write("Hello can you see me?") } test() |
Cuối dòng có gọi hàm
test() vì vậy hàm có thể nhìn thấy dòng chữ “Hello can you see me?”.
Xử lý sự kiện trong JavaScript
Làm thế nào để bạn có thể xử lý sự kiện. Chúng ta có thể được voi là sự bắt đầu để thực thi JavaScript khi điều gì đó xảy ra, như việc click hoặc di chuyển một link, chấp nhận một form,…
onClick Xử lý
onClick thực thi một điều gì đó khi người dùng chọn một nút, link, … . Xem ví dụ dưới đây:
| <script> function ss() { alert("Thank you!") } </script> <form> <input type="button" value="Click here" onclick="ss()"> </form> |
Hàm ss() là được gọi khi người sử dụng ấn vào nút button. Chú ý: xử lý sự kiện là không được thêm vào trong thẻ <
script>, nhưng được thêm vào thẻ html.
onLoad Xử lý sự kiện onload là được gọi để gọi thực thi JavaScript sau khi tải xong:
| <body onload="ss()"> <frameset onload="ss()"> <img src="whatever.gif" onload="ss()"> |
onMouseover,onMouseout Xử lý này được sử dụng duy nhất với liên kết (link).
| <a href="#" onMouseOver="document.write('Hi, nice to see you!">Over Here!</a> <a href="#" onMouseOut="alert('Good try!')">Get Out Here!</a> |
onUnload onunload thực thi JavaScript trong khi một số người dùng ra khỏi web. Ví dụ dưới đây:
| <body onunload="alert('Thank you for visiting us. See you soon')"> |
Xử lý nhiều sự kiện
Bạn có thể làm một xử lý sự kiện gọi nhiều hàm hoặc lệnh. Rất đơn giản, bạn cần phải nhúng các hàm trong xử lý sự kiện, nhưng mỗi sự tách biệt của câu lệnh xử lý được tách biệt bởi dấu “;” .
| <form> <input type="button" value="Click here!" onClick="alert('Thanks for visiting my site!');window.location='http://www.yahoo.com'"> </form> |
Form trong JavaScript
Hình thức form như sau:
| <form name="aa"> <input type="text" size="10" value="" name="bb"><br> <input type="button" value="Click Here"onclick="alert(document.aa.bb.value)"> </form> |
Chú ý rằng chúng ta đưa tên tới form và các thành phần. Vì vậy JavaScript có thể tiếp cận được chúng.
onBlur Nếu bạn muốn lấy thông tin của từ người dùng và muốn kiểm tra các thành phần cá nhân(username, password, email); cảnh báo cho người dùng những lỗi sai khi nhập dữ liệu đầu vào trước khi rời, bạn có thể sử dụng onblur. Xem ví dụ sử dụng onblur:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html><head><script> function emailchk() { var x=document.feedback.email.value if (x.indexOf("@")==-1) { alert("It seems you entered an invalid email address.") document.feedback.email.focus() } } </script> <form> name="feedback"> Email:<input type="text" size="20" name="email" onblur="emailchk()"><br> Comment: <textarea name="comment" rows="2" cols="20"></textarea><br> <input type="submit" value="Submit"> </form> </body></html> |
Nếu bạn nhập địa chỉ email mà không @, bạn sẽ nhận được một cảnh báo yêu cầu bạn nhập lại dữ liệu.
x.indexOf(@)==-1? Đây là một phương pháp mà JavaScript có thể tìm kiếm tất cả các ký tự trong một chuỗi và tìm kiếm những gì các bạn muốn. Nếu tìm thấy nó sẽ trở lại vị trí của các char trong chuỗi. Nếu không, nó sẽ trả về -1. Do đó,
x.indexOf(“@”)==-1 về cơ bản có nghĩa là: “nếu chuỗi không bao gồm @, sau đó:
| alert("It seems you entered an invalid email address.") document.feedback.email.focus() |
Điều quan trong ()?, đây là một phương pháp của hộp văn bản, trong đó bắt buộc phải trỏ để được vào hộp textbox. onsubmit không giống như
onBlur, xử lý
onsubmit được chèn vào bên trong thẻ <
form> và không phải bên trong bất kỳ một phần tử, ví dụ dưới đây:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script> <!-- function validate() { if(document.login.userName.value=="") { alert ("Please enter User Name") return false } if(document.login.password.value=="") { alert ("Please enter Password") return false } } //--> </script> <form name="login" onsubmit="return validate()"> <input type="text" size="20" name="userName"> <input type="text" size="20" name="password"> <input type="submit" name="submit" value="Submit"> </form> |
Chú ý: if(document.login.userName.value==””). Có nghĩa là “
Nếu hộp tên là userName của tên hình thức đăng nhập có chứa gì, sau đó …”. trả về false. Điều này được sử dụng để ngăn chặn các hình thức từ submit. Theo mặc định, một hình thức trả về true nếu được submitting. trả về validate() điều đó có nghĩa, “nếu submitting, sau đó gọi hàm validate()”.
Bảo vệ tập tin bằng cách sử dụng Đăng nhập
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html><head> <SCRIPT Language="JavaScript"> function checkLogin(x) { if ((x.id.value != "Sam")||(x.pass.value !="Sam123")) { alert("Invalid Login"); return false; } else location="main.htm" } </script> </head><body> <form> <p>UserID:<input type="text" name="id"></p> <p>Password:<input type="password" name="pass"></p> <p><input type="button" value="Login" onClick="checkLogin(this.form)"></p> </form> </body></html> |
|| có nghĩa là “or” và != nghĩa là “not equal”- không bằng. Vì vậy bạn có thể giải thích mã script như sau: ” Nếu id không bằng Sam hoặc mật khẩu không là Sam123 thì sẽ hiển thị cảnh cảo “Invalid Login” và ngừng quá trình. Hoặc mở lại trang main.htm.
Link
Trong hầu hết các trường hợp, 1 form có thể được thay thế bởi link:
| <a href="JavaScript:window.location.reload()">Click to reload!</a> |
Ví dụ : 2 ví dụ về link
| <a href="#" onClick="alert('Hello, world!')">Click me to say Hello</a><br> |
| <a href="#" onMouseOver="location='main.htm'">Mouse over to see Main Page</a> |
Date trong JavaSript
Xem ví dụ dưới đây:
| <HTML><HEAD><TITLE>Show Date</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var x= new Date(); document.write (x); </SCRIPT> </BODY></HTML> |
Để kích hoạt đối tượng Date Object, bạn có thể làm điều này:
var x = new Date(). Bất cứ khi nào bạn muốn tạo một thể hiện của đối tượng ngày, sử dụng từ này là quan trọng: theo sau bởi đối tượng mới là name().
Tự động hiển thị các trang khác nhau Bạn có thể hiển thị các trang khác nhau theo thời gian khác nhau. Dưới đây là một ví dụ:
| var banTime= new Date() var ss=banTime.getHours() if (ss<=12) document.write("<img src='banner1.gif'>") else document.write("<img src='banner2.gif'>") |
Date object| Methods |
getDate
getTime
getTimezoneOffset | getDay
getMonth
getYear | getSeconds
getMinutes
getHours |
Window trong JavaScript
Để mở một cửa sổ, cách đơn giản là sử dụng phương thức “
window.open()“:
| <form> <input type="button" value="Click here to see" onclick="window.open('test.htm')"> </form> |
Bạn có thể thay đổi test.htm với mọi URL, với ví dụ với
http://www.yahoo.com. Size, toolbar, menubar, scrollbars, location, status trong JavaScript
Hãy thêm một số thuộc tính cho script ở trên để kiểm soát kích thước của cửa sổ, và hiển thị: thanh công cụ, thanh cuộn,… . Cú pháp để thêm thuộc tính là:
| open("URL","name","attributes") |
Ví dụ:
| <form> <input type="button" value="Click here to see" onclick="window.open('page2.htm','win1','width=200,height=200,menubar')"> </form> |
Ví dụ không có thuộc tính hoạt động, từ kích cỡ có thể thay đổi:
| <form> <input type="button" value="Click here to see" onclick="window.open('page2.htm','win1','width=200,height=200')"> </form> |
Dưới đây là danh sách của thuộc tính bạn muốn thêm:
| width | height | toolbar |
| location | directories | status |
| scrollbars | resizable | menubar |
Reload Tải lại một x=cửa sổ, sử dụng phương thức sau:
Close Window Bạn có thể sử dụng một trong những mã code sau:
| <form> <input type="button" value="Close Window" onClick="window.close()"> </form> <a href="javascript:window.close()">Close Window</a> |
Loading Cú pháp đơn giản khi taie nội dung mới trong trang là:
| window.location="test.htm" |
hoặc | <a href="test.htm>Try this </a> |
Ví dụ: Nơi xác nhận để cho phép người dùng chọn giữa hai lựa chọn:
| <script> <!-- function ss() { var ok=confirm('Click "OK" to go to yahoo, "CANCEL" to go to hotmail') if (ok) location="http://www.yahoo.com" else location="http://www.hotmail.com" } //--> </script> |
Remote Control Window trong JavaScript
Mở cửa sổ mới từ cửa sổ hiện tại. Sau đó, bạn sẽ phải chọn làm thế nào để điều khiển hai cửa sổ. như sau:
| aa=window.open('test.htm','','width=200,height=200') |
Cửa sổ này có tên “aa”, nó sẽ đưa bạn truy cập đến mọi điều trong cửa sổ này từ những cửa sổ khác. Tuy nhiên, nếu bạn muốn truy cập mọi điều từ cửa sổ mới, bạn có thể làm như sau : aa.document.write(“This is a test.”).
Ví dụ: Cách thay đổi màu sắc của background của cửa sổ:
| <html><head><title></title></head> <body> <form> <input type="button" value="Open another page" onClick="aa=window.open('test.htm','','width=200,height=200')"> <input type="radio" name="x" onClick="aa.document.bgColor='red'"> <input type="radio" name="x" onClick="aa.document.bgColor='green'"> <input type="radio" name="x" onClick="aa.document.bgColor='yellow'"> </form> </body></html> |
opener Sử dụng thuộc tính “opener”, các bạn có thể truy cập cửa sổ chính từ những cửa sổ mới. Hãy tạo trang chính:
| <html> <head> <title></title> </head> <body> <form> <input type="button" value="Open another page" onClick="aa=window.open('test.htm','','width=100,height=200')"> </form> </body> </html> |
Bạn điều khiểm Remote cho trang web (trong ví dụ này, có trong file test.htm):
| <html> <head> <title></title> <script> function remote(url){ window.opener.location=url } </script> </head> <body> <p><a href="#" onClick="remote('file1.htm')">File 1</a></p> <p><a href="#" onClick="remote('file2.htm')">File 2</a></p> </body> </html> |
Frame trong JavaScript
Một điều phổ biến sử dụng của tải nhiều khung là để tải và thay đổi nội dung của nhiều hơn một khung cùng một lúc. Đoạn mã thể hiện dưới đây:
| <html> <frameset cols="150,*"> <frame src="page1.htm" name="frame1"> <frame src="page2.htm" name="frame2"> </frameset> </html> |
Các bạn có thể thêm một liên kết trong khung con “frame1”, nó sẽ thay đổi nội dung không phải trang 1, nhưng trang 2 là có thể. Dưới đây là code html cho nó:
| <html> <body> <h2>This is page 1 </h2> <a href="page3.htm" onClick="parent.frame2.location='page4.htm'">Click Here</a> </body> </html> |
bạn nên sử dụng “
parent.frameName.location” để truy cập khung. “
parent” là khung mẹ cho các khung con.
Nguồn: hocthietkeweb.net.vn
Đăng nhận xét