Trang chủ
Cách chèn javascript vào HTML: Mỗi 1 đoạn js được nằm trong cặp thẻ <script> và </script>
<html>
<head>
<head>
<body>
<script language="JavaScript">
<!--
document.write("Nội dung hiển thị bằng javascript.")
-->
</script>
<NOSCRIPT>
Dòng này sẽ xuất hiện khi trình duyệt không chạy được Javascript
</NOSCRIPT>
</body>
</html>
hoặc:
<script language="JavaScript" SRC="path_to_testscript.js">
vói path_to_testscript.js là file chứa nội dung của code javascript, chú ý là: file .js không chứa cặp <script> và </script>, ví dụ: vói nội dung của đoạn code trên thì file path_to_testscript.js sẽ có nội dung như sau:
document.write("Nội dung hiển thị bằng javascript.")
Ghi chú:
Dùng <!-- và --> để ẩn nội dung của js trong các trình duyệt cũ(khi mà trình duyệt không hổ trợ js)
Comment trong Javascript: có thể comment theo 2 cách sau
// comment trên 1 dòng
/* comment trên
nhiều dòng
*/
/* comment trên
nhiều dòng
*/
Chú ý: Trong Javascript, 1 biến phải được khai báo trước khi sủa dụng
Ví dụ:
- Script lỗi
<script>
a['test']= 'value';
</script>
- script đúng
<script>
a = new Array();
a['test']= 'value';
</script>
<script>
a['test']= 'value';
</script>
- script đúng
<script>
a = new Array();
a['test']= 'value';
</script>
Các ký tự đặc biệt trong js:
\b - backspace
\f - Form feed
\n - New line
\r - Carriage return
\t - Tab
Cách khai báo biến: biến trong javascript được khai báo như sau:
a = 7;
//hoặc
var a = 5;
//hoặc
var a = 5;
Lưu ý: Mỗi câu lênh trong js được kết thúc bằng dấu xuống dòng (Enter) hoặc dấu chấm phẩy (;) ( ; được khuyên nên dùng)
Ví dụ: các câu lệnh sau là hợp lệ
var a = 4
var b = 7;
var c=7; var d =8
var b = 7;
var c=7; var d =8
và cách viết sau là sai cấu trúc của JS:
var a = 4 var b= 7
// 2 câu lệnh nằm trên 1 dòng và không có dấu ; ngăn cách
// 2 câu lệnh nằm trên 1 dòng và không có dấu ; ngăn cách
* Kiến thức cơ bản: đây là tập hợp 1 số note dựa trên kinh nghiệm thôi, chỉ dành riêng cho những bạn mới bắt đầu thôi.
- Lấy thông tin của thẻ HTML: có thể lấy bằng các cách sau:
+ document.getElementsByTagName('tag_name') : lấy thông tin của tất cả các thẻ tag_name ( a, img, span, div,.....)
<a href="1.html" title="test 1">1</a> <a href="2.html title="test 2">2</a>
<script>
var oA = document.getElementsByTagName('a'); // sẽ là 1 đối tượng gồm oA.length phần tử , mỗi phần tử là 1 đối tượng chứa nội dung của 1 thẻ A ( mỗi 1 attribute của <a sẽ là 1 thuộc tính của
// code mẫu
var str = '';
for(var j=0;j<oA.length;j++){
str += 'Title of a'+(j+1)+': '+oA[j].title+ '; ';
}
alert(str); //Title of a1: test 1; Title of a2: test 2;
</script>
+document.getElementsByName('nametag'): lấy thông tin của tất cả cá thẻ HTML có name="nametag"
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many elements named 'myInput'?" />
sẽ hiển thị thông báo: 3 ( có 3 thẻ HTML có name="myInput")
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many elements named 'myInput'?" />
sẽ hiển thị thông báo: 3 ( có 3 thẻ HTML có name="myInput")
+ document.getElementById('id_name'): lấy thông tin của thẻ HTML có id="id_name"
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
// innerHTML dùng để lấy/gán content cho 1 đối tượng
}
</script>
<h1 id="myHeader" onclick="getValue()">Click me!</h1>
Kết quả: Click me!
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
// innerHTML dùng để lấy/gán content cho 1 đối tượng
}
</script>
<h1 id="myHeader" onclick="getValue()">Click me!</h1>
Kết quả: Click me!
+ document.nameform: lấy thông tin của form có name="nameform"
<form name="nameform" method="post" action="">
Username <input type="text" name="username" id="username" value="tg" /><br />
Email<input type="text" name="email" id="email" value="admin@phpbasic.com" /><br />
<input type="submit" name="button" id="button" value="Submit" />
<input type="reset" name="button2" id="button2" value="Reset" />
</form>
<script>
var doc = document.nameform;
// lúc này doc sẽ là 1 đối tượng có nhièu phần tử với mỗi phần tử là 1 đối tượng chứa thông tin của các thẻ input, checkbox, radio, area bên trong form
var name = doc.username;
// name sẽ là 1 đối tượng của thẻ input có name="username"
var username = name.value;
alert(username);
</script>
Username <input type="text" name="username" id="username" value="tg" /><br />
Email<input type="text" name="email" id="email" value="admin@phpbasic.com" /><br />
<input type="submit" name="button" id="button" value="Submit" />
<input type="reset" name="button2" id="button2" value="Reset" />
</form>
<script>
var doc = document.nameform;
// lúc này doc sẽ là 1 đối tượng có nhièu phần tử với mỗi phần tử là 1 đối tượng chứa thông tin của các thẻ input, checkbox, radio, area bên trong form
var name = doc.username;
// name sẽ là 1 đối tượng của thẻ input có name="username"
var username = name.value;
alert(username);
</script>
Chú ý: đối tượng doc.nameform có vài hàm thừong sử dụng: submit(): submit form thay vì bấm nút Submit;
reset(): reset form thay vì phải bấm nút Reset
+ document.forms: lấy thoong tin của tất cả thẻ <form
<form name="Form1"></form>
<form name="Form2"></form>
Number of forms:
<script type="text/javascript">
document.write(document.forms.length) // 3
// khi đó document.forms[0] tương đương với document.Form1;
// document.forms[1] tương đương với document.Form2
</script>
<form name="Form2"></form>
Number of forms:
<script type="text/javascript">
document.write(document.forms.length) // 3
// khi đó document.forms[0] tương đương với document.Form1;
// document.forms[1] tương đương với document.Form2
</script>
Chú ý: ở trên là cách lấy thông tin của HMLT từ ngoài, còn nếu lấy trực tiêp trên chính bản thân nó thì dùng dối tượng this
Ví dụ:
<a href="#" onclick="alert(this.title);" title="Test 1">1</a>
// ở đây this tương đương document.getElementsByTagName('a')[0];
<form name="form1">
<input name="username" type="text" title="Lele" onfocus="alert(this.title)" value="" />
// this tương đương document.form1.username
</form>
// ở đây this tương đương document.getElementsByTagName('a')[0];
<form name="form1">
<input name="username" type="text" title="Lele" onfocus="alert(this.title)" value="" />
// this tương đương document.form1.username
</form>
- cách gắn 1 hàm js vào 1 tag html
Ví dụ:
<script>
function a1(str){ alert(str);}
function a2(b,c){ alert(b+c);}
<script>
Cách gắn link: thẻ html có thể goi các hàm js thông qua các sự kiện
<img src="image.gif" onclick="a1('abc')" />
<img src="image.gif" onclick="a1('abc');a2(4,6)" />
<a href="#" onclick="a1('abc');a2(4,6)">Click</a>
Trong trường hợp thẻ a ta có thể dùng cách sau:
<a href="javascript:a1('abc')">Click</a>
Tác giả:TG
Webmaster
http://phpbasic.com
