MySQL - Nâng Cao

Đây là phần tiếp theo của phần trước " MySQL - Căn Bản"
Tạo cấu trúc database như sau: ( xem lại phần trước)

Hình minh họa:

Tạo table "person" có cấu trúc như sau:( xem phần trước cách tạo mới 1 table)

Hình minh họa:

Trong table "person" nhập giá trị như sau: ( xem phần trước cách nhập liệu cho table )

Hình minh họa:

Ok, vậy là xong các bước chuẩn bi, bây h tiến hành các thao tác nha !



select *from table_name; : lệnh này sẽ xuất ra màn hình giá trị của toàn table  "name_table".
Demo: hãy xuất toàn bộ  table "person".
Thực hiện: select *from person; ->Enter

Hình minh họa:

select distinct column_name from table_name; : lệnh này xuất ra màn hình  giá trị của cột "name_table"
Demo: hãy xuất ra màn hình cột "City" của table "prson".
Thực hiện : select distinct Address from

Hình minh họa:

select  *from table_name where coluomn_name like 'keyword%' ; : lệch này sẽ in ra màn hình những dòng mà có cột "Address" có ký tự đầu tiên là " keyword".
Demo: hãy xuất ra màn hình những dòng của table "person" có cột "Address" chứa ký tự đàu tiên là "T".
Thực hiện: select *from person where Address like 'T%'; ->Enter .

Hình minh họa:

select *from table_name where column_name like '%keyword' ; : lêch này sẽ trích những dòng của table "table_name" có cột "column_name" chứa ký tự cuối cùng bằng 'keyword'.
Demo: hãy trích những dòng của tble "person" có cột "City" mà ký tự cuối cùng là "nes".
Thực hiện: select *from person where City like '%nes' ;->Enter .

Hinh minh họa:

select *from table_name where column_name like '%keyword%' ; : lệnh này sẽ trích những dòng thuộc table "table_name" mà cột "column_name" có chứa từ "keyword" ở phía trong.
Demo: trích từ table "person" những dòng sao cho cột "City" có chứa từ "ndn" ("van").
Thực hiện: select *from person where City '%ndn%' ; ->Enter.

Hình minh họa:

select *from table_name where column_name like 'keyword1_keyword2_keyword3' ; : trích những dòng của table "table_name" sao cho cột "column_name" có hầu hết các ký tự giốnng "keyword1_keyword2_keyword3" chỉ có 2 ký tự ở 2 vị trí "_" là không quan tâm.
Demo: trích từ table "person" những dòng có cột "LastName" có  ký tự đâu tiên"H" , ký tự thứ 3 "n", 2 ký tự cuối cùng là "en".
Thực hiện: select *from person where LastName like 'H_n_en' ; ->Enter.

Hình minh họa:

select *from table_name where column_name in ('keyword_i', ... , 'keyword_j') ; : lệcnh này sẽ trích xuất những dòng thuộc table " table_name" sao cho cột "column_name" có giá trị là "keyword_i", .. ,"keyword_j".
Demo: trích những dòng của table "person"  sao cho  cột "LastName" có giá trị là "Hansen","Pettersen".
Thực hiện: select *from person where LastName in ('Hansen','Pettersen') ; ->Enter.

Hình minh họa:

MySQL - Căn Bản

Giới Thiệu:

MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng.
Vì MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh.Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet.
MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ. Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS, ... MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL). MySQL được sử dụng cho việc bổ trợ PHP, Perl, và nhiều ngôn ngữ khác, nó làm nơi lưu trữ những thông tin trên các trang web viết bằng PHP hay Perl,...


Cài Đặt: www.google.com

Cách Khởi Động Và Sử Dụng MySQL:

Chúng ta sử dụng command như sau:
mysql –h host –u username –p;
•    -h : sau do nhập tên host
•    -u : sau đó nhập username
sau do nhap password.
Ví dụ : với localhost, username = root , pass= rỗng
 mysql –h localhost –u root –p;


Lệnh Cơ Bản:
create databases name_data;     : tạo mới 1 data có với tên là "name_data"
Demo: tạo data có tên là "thang_cu" .Ta thực hien như sau: mở MySQL consolo trong WampServer -> nhập tên user và password vào, gõ vào lệnh "show databases;" để xem trong MySQL có những database nào, kế đến bạn gõ tiếp lệnh tạo database " create database thang_cu; " rồi "Enter" , nếu thành công ( đúng cú pháp, không bị trùng tên ) nó sẽ hiện ra dòng thông báo " Query Ok, 1 row acffected (0.00 sec). Tiếp theo là bạn kiểm tra xem mình có thật sự tạo thành công 1 data không bằng cách gõ lệnh "show databases;"

 Hình minh họa Demo trên :

create table name_table (column 1 ,column 2, .. ,column n); : tạo mới 1 table có tên là " name_table " , trong table này bạn phải nhập tên tương ứng côt nha ! ( column 1 : tên cột thứ nhất  kiểu DL , .. , column n : tên cột thứ n  kiểu DL )
Demo: tạo 1 table có tên là "ly_lich", table này có 2 cột : cột thứ nhất tên " ten " kiểu DL là " varchar " có
25 ký tự, cột thứ 2 có tên "nam_sinh" kiểu DL là " int" có 4 chữ số.
Để làm điều này, ta trước tiên phải chọn "data" là "thang_cu" chứa "table" của "ly_lich". Dùng lệnh "use name_data;" để chọn data .

Minh họa bởi hình sau:

Tiếp đến bạn gõ lệnh tạo table : "create table ly_lich (ten varchar(25),nam_sinh int(4));" ->Enter. Nếu thành công thì sẽ có thông báo : "Query Ok, ... "
Để xem trong data "thang_cu" có bao nhiêu table bạn dùng lệnh : "show tables;".
Để xem trong table "ly_lich" có bao nhiêu cột bàn dùng lệnh: "decsribe name_table;"

Hình minh họa:

alter table name_table add name_column+type  after name_column_befor; :lệnh này sẽ thêm 1 cột vào bảng có tên "name_table" , cột mới thêm vào có tên là " name_column" ( +kiểu DL của cột mới thêm vào nũa nha !), cột mới thêm vào nằm sau cột "name_column_befor"
Demo: thêm vào table "ly_lich" 1 cột có tên "que_quan" có kiểu DL là "varchar" tối đa  là 30 ký tự, thêm vào phía sau cột "nam_sinh".
Ta thực hiện như sau: "alter table ly_lich add column `que_quan` varchar(30) after `nam_sinh`;" -> "Enter". Nếu thành công  sẽ có thông báo :"Query Ok,  ... " . Để kiểm tra kết quả bạn dùng lệnh " describe ly_lich" .

Hình minh họa:

insert into name_table (name_column 1, .. , name_column n) values (value_column1, .. , value_column n); : lệnh này chèn giá trị "value_column 1", ... vào cột tương ứng "name_column 1", ... của table có tên "name_table". nếu giá trị của cột là chuỗi ký tự ta phải để trong ' ' (phím chứ dấu ngoăc kép gần phím Enter,  không phải ` ` phím bên trái số 1 nha !).
Demo: trong table "ly_lich" hãy nhập giá trị "cu_ngay" cho cột "ten", 2000 cho cột "nam_sinh", "hoc mon" cho cột "que_quan".
Ta thực hiện như sau: insert into ly_lich (ten, nam_sinh, que_quan) values ('cu_ngay', 2000, 'hoc mon'); -> Enter . Nếu thành công thì sẽ có thông báo : "Query Ok, 1 row affected (  số giây     sec)".

select name_table.name_column_1, ... , name_table.name_column_n from name_table; : xuất ra màn hình giá trị cột thứ " name_column_1" , .. ,"name_column_n" của table có tên là "name_table".
Demo:xuất ra màn hình cột "ten"  của table "ly_lich".
Ta thục hiện như sau: select ly_lich.ten from ly_lich; ->Enter . Nế thành công thì có thông báo :" số row in set  (số sec)".

Hình minh họa:

select name_table_a.name_column_1, ..., name_table_a.name_column_n, name_table_b.name_column_1, .., name_table_b.name_column_n from name_table_a, name_table_b where name_table_a.name_column_i=name_table_b.name_column_j; : xuất ra màn hình giá trị cột với điều kiện là giá trị cột i của "table_a" = giá trị cột j của "table_b" .
Demo: tạo table "ly_lich_a" sao cho cột "ten" có tên là "cu_ngay" như hình sau:

 Hình minh họa:

Demo: xuất ra màn hình lý lịch những người nào có tên giống nhau .
Ta thực hiện như hình sau: select ly_lich.ten, ly_lich.nam_sinh, ly_lich.que_quan,  ly_lich_a.ten, ly_lich_a.nam_sinh, ly_lich_a.que_quan from ly_lich, ly_lich_a where ly_lich.ten=ly_lich_a.ten; ->Enter. Nếu thành công thì nó sẽ hiện ra bảng kết quả và 1 dòng thông báo: " số row in set (số sec) ".

Hình minh họa:

select name_table.name_column_1, ..., name_table.name_column_n from name_table limit fisrt_number, number; :xuất ra màn hình giá trị cột bắt đầu từ dòng thứ "fisrt_number" , số dòng xuất ra là "number".
Demo: giả sử ta có bảng DL  là : "ly_lich" như ở trên. Xuất ra màn hình lý lịch 1 người đầu tiên, 2 người đầu tiên, người thứ 2.
Ta thực hiện như  sau: xuất 1 người đầu tiên : select ly_lich.ten, ly_lich.nam_sinh, ly_lich.que_quan from ly_lich limit 0,1; ->Enter

Hình minh họa :

select name_table.name_column_1, .. ,n from name_table where name_table.name_search_column like '%keyword'  order by name_table.name_search_column asc | desc; : xuất DL ra màn hình thỏa DK có cột "nam_table.name_search_column" có ký tự giống ký tự "keyword" theo thứ tự từ trên xuống ( ASC) hoặc từ dưới lên (DESC) ( DK where name_table.name_search_column like '%keyword' có thể bỏ đi ).

Demo: không dùng DK "where name_table.name_search_column like '%keyword' ". Giả sử ta có bảng DL "ly_lich" như ở trên, bây h xuất ra màn hình theo thứ tự từ trên xuống, từ dưới lên.

Ta thực hiện như sau: select ly_lich.ten, ly_lich.nam_sinh, ly_lich.que_quan from ly_lich order by ly_lich.ten asc; ->Enter.

Hình minh họa:

update name_table set name_column='new_valuse' where (name_column_ID='keyword') ; : cập nhật giá trị mới "new_value" cho "name_column" của bảng "name_table" khi giá trị "name_column_ID" bằng giá trị "keyword", nếu mệnh đề "where" trở về sau bỏ đi thì nó sẽ cạp nhật cả bảng.
Demo: giả sử ta có table "ly_lich" như ở trên, h ta muốn cập nhật lại năm sinh của "cu_ngay" là 1990.
Ta thực hiện như sau: update ly_lich set nam_sinh=1990 where (ten='cu_ngay'); ->Enter

Hình minh họa:

delete from name_table where (name_column_ID='keyword'); : xóa dòng nào có cột "name_column_ID" bằng "keyword" của bảng "name_table", nếu không có mệnh đề "where" thì xóa hết bảng.
Demo: giả sử có bảng "ly_lich" như trên, bây h ta muốn xóa dòng nào có cột "ten" là "cu_ngay" của bảng "ly_lich".
Ta  thực hiện : delete from ly_lich where(ten='cu_ngay'); ->Enter.

Hình minh họa:

Tham khảo thêm: w3schools

PHP - AJAX

Tạo ra ứng dụng tương tác:

Demo: Ứng dụng thường thấy nhất là "Search" của Web như "google" khi bạn nhập từ vào ô tìm kiếm thì no lập tức đưa ra từ gợi ý. Tương tự như chức Search của các Web mà ta thường gặp. Để làm điều ấy ta có 2 file : 1.  "search.html" có nhiệm vụ hiện ra khung Search và đưa ra  gợi ý, kết quả ; 2. "check_search.php" kiểm tra từ nhầp vào có trong CSDL không .
1.  "search.html"

<html>
<head>
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>

First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
Key Search: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

2. "check_search.php"

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>

Lấy CSDL :
Demo: giả sử ta có bảng CSDL có tên là "user" như sau:

Bây h làm sao ta lấy thông tim của 1 user và in nó ra màn hinh . Để làm được điều ấy thì cũng đơn giản thôi, ta tạo  fiel "show_user.html" để in thông tin user, và file "get_user.php" để lấy thông tin từ CSDL.
1. "show_user.html"

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_user.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>

2. "get_user.php"

<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'cu_ti', 'te');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>

Demo: lấy CSDL từ fiel xml . giả sử ta có fiel "cd_catalog.xml" có nội dung như sau:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<CATALOG>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD> 
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR></CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD> 
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>

<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>

<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>

<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>

File "show_CD.html" : để in thông tin CD ra màn hình.

<html><head>
<script type="text/javascript">
function showCD(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_CD.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
Select a CD:
<select name="cds" onchange="show_CD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>
</body>
</html>

Fiel "get_CD.php" để lấy thông tin CD từ file "cd_catalog.xml"

<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
{
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode);
}
}
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{
//Process only element nodes
if ($cd->item($i)->nodeType==1)
{
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br />");
}
}
?>

Tham khảo thêm : w3schools

AJAX

PHP - XML

XML

XML (viết tắt từ tiếng Anh eXtensible Markup Language, "Ngôn ngữ Đánh dấu Mở rộng") là ngôn ngữ đánh dấu với mục đích chung do W3C đề nghị, để tạo ra các ngôn ngữ đánh dấu khác. Đây là một tập con đơn giản của SGML, có khả năng mô tả nhiều loại dữ liệu khác nhau. Mục đích chính của XML là đơn giản hóa việc chia sẻ dữ liệu giữa các hệ thống khác nhau, đặc biệt là các hệ thống được kết nối với Internet. Các ngôn ngữ dựa trên XML (thí dụ: RDF, RSS, MathML, XHTML, SVG, GML và cXML) được định nghĩa theo cách thông thường, cho phép các chương trình sửa đổi và kiểm tra hợp lệ bằng các ngôn ngữ này mà không cần có hiểu biết trước về hình thức của chúng.
Vào giữa những năm 1990, các chuyên gia SGML đã có kinh nghiệm với World Wide Web (vẫn còn khá mới vào thời đó). Họ tin tưởng rằng SGML có thể cung cấp giải pháp cho các vấn đề mà Web đang gặp phải. Jon Bosak đưa ra ý kiến W3C nên tài trợ một chương trình mang tên "SGML trên Web".
XML cung cấp một phương tiện dùng văn bản (text) để mô tả thông tin và áp dụng một cấu trúc kiểu cây cho thông tin đó. Tại mức căn bản, mọi thông tin đều thể hiện dưới dạng text, chen giữa là các thẻ đánh dấu (markup) với nhiệm vụ ký hiệu sự phân chia thông tin thành một cấu trúc có thứ bậc của các dữ liệu ký tự, các phần tử dùng để chứa dữ liệu, và các thuộc tính của các phần tử đó. Về mặt đó, XML tương tự với các biểu thức S (S-expression) của ngôn ngữ lập trình LISP ở chỗ chúng đều mô tả các cấu trúc cây mà trong đó mỗi nút có thể có một danh sách tính chất của riêng mình.
Đơn vị cơ sở của XML là các ký tự theo định nghĩa của Universal Character Set (Bộ ký tự toàn cầu). Các ký tự được kết hợp theo các tổ hợp chuỗi hợp lệ để tạo thành một tài liệu XML. Tài liệu này gồm một hoặc nhiều thực thể, mỗi thực thể thường là một phần nào đó của các ký tự thuộc tài liệu, được mã hóa dưới dạng một chuỗi các bit và lưu trữ trong một tệp văn bản (text file).
Các tệp XML có thể dùng cho nhiều loại dữ liệu đa phương tiện. RFC3023 định nghĩa các loại "application/xml" và "text/xml", với ý rằng dữ liệu được biểu diễn bằng XML mà không nói gì đến ngữ nghĩa của dữ liệu.
Sự phổ biến của các phần mềm soạn thảo văn bản (word processor) đã hỗ trợ việc soạn thảo và bảo trì tài liệu XML một cách nhanh chóng. Trước XML, có rất ít ngôn ngữ mô tả dữ liệu với các đặc điểm đa năng, thân thiện với giao thức Internet, dễ học và dễ tạo. Thực tế, đa số các định dạng trao đổi dữ liệu thời đó đều chuyện dụng, có tính độc quyền, và có định dạng nhị phân (chuỗi bit thay vì chuỗi ký tự) khó dùng chung giữa các ứng dụng phần mềm khác nhau hay giữa các hệ nền (platform) khác nhau. Việc tạo và bảo trì trên các trình soạn thảo thông dụng lại càng khó khăn.
Bằng cách cho phép các tên dữ liệu, cấu trúc thứ bậc được phép, và ý nghĩa của các phần tử và thuộc tính có tính chất mở và có thể được định nghĩa bởi một giản đồ tùy biến được, XML cung cấp một cơ sở cú pháp cho việc tạo lập các ngôn ngữ đánh dấu dựa XML theo yêu cầu. Cú pháp chung của các ngôn ngữ đó là cố định — các tài liệu phải tuân theo các quy tắc chung của XML, bảo đảm rằng tất cả các phần mềm hiểu XML ít ra cũng phải có khả năng đọc (phân tích cú pháp - parse) và hiểu bố cục tương đối của thông tin trong các tài liệu đó. Giản đồ chỉ bổ sung một tập các ràng buộc cho các quy tắc cú pháp. Các giản đồ thường hạn chế tên của phần tử và thuộc tính và các cấu trúc thứ bậc được phép, ví dụ, chỉ cho phép một phần tử tên 'ngày sinh' chứa một phần tử tên 'ngày' và một phần tử có tên 'tháng', mỗi phần tử phải chứa đúng một ký tự. Đây là điểm khác biệt giữa XML và HTML. HTML có một bộ các phần tử và thuộc tính không mềm dẻo, chỉ có một tác dụng và nói chung là không thể dùng cho mục đích khác.
XML không hạn chế về việc nó được sử dụng như thế nào. Mặc dù XML về cơ bản là dạng text, các phần mềm với chức năng trừu tượng hóa nó thành các định dạng khác giàu thông tin hơn đã nhanh chóng xuất hiện, quá trình trừu tượng hóa này được thực hiện chủ yếu qua việc sử dụng các giản đồ định hướng kiểu dữ liệu (datatype-oriented schema) và khuôn mẫu lập trình hướng đối tượng (mà trong đó, mỗi tài liệu XML được thao tác như là một đối tượng). Những phần mềm như vậy có thể coi XML như là dạng text đã được tuần tự hóa chỉ khi nó cần truyền dữ liệu qua mạng.

PHP - MySQL

Kết nối CSDL:

Để làm việc với CSDL thì ta phải kết nối với CSDL đó, sau khi kết nối thành công rồi thì phải đóng kết nối lại. Ok
Cấu trúc kết nối CSDL:

            mysql_connect(servername,username,password);

Demo: giả sử chúng ta muốn kết nối sever trên " localhost" , tên server la " cu_ti", password  là "te" thì ta làm như sau: ( nhớ sau khi kết nối phải đống lại )

<?php

$con = mysql_connect("localhost","cu_ti","te");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
// some code
mysql_close($con);
?>

Tạo CSDL: để tao CSDL trong My SQL ta sử dụng cấu trúc sau:

        CREATE DATABASE database_name

Demo: giả sử ta tạo 1 bảng (table) có tên là "person", có 3 cột (column) : "FirtsName"  kiểu DL la char với độ dài 20 kí tự, "LastName" có kiểu DL la char với độ dài là 20 kí tự, "Age" có kiểu DL là int .

<?php
$con = mysql_connect("localhost","cu_ti","te");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
// Create database
if (mysql_query("CREATE DATABASE my_db",$con))
{
echo "Database created";
}
else
{
echo "Error creating database: " . mysql_error();
}
// Create table
mysql_select_db("my_db", $con);
$sql = "CREATE TABLE person
(
FirstName varchar(20),
LastName varchar(20),
Age int
)";
// Execute query
mysql_query($sql,$con);
mysql_close($con);
?>

Chèn CSDL: Dùng cấu trúc sau:

INSERT INTO table_name
VALUES (value1, value2, value3,...)

hoặc:

INSERT INTO table_name (column1, column2, column3,...)
VALUES (value1, value2, value3,...)

Demo: giả sử ta có bảng CSDL như trên , bây h ta muốn nhập dữ liệu vào bảng đó. FirstName là: cu_ngay, cu_queo, LastName là : do, deo, Age : 17, 18 thì ta làm như sau:

<?php
$con = mysql_connect("localhost","cu_ti","te");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
mysql_query("INSERT INTO persons (FirstName, LastName, Age)
VALUES ('cu_ngay', 'do',17)");
mysql_query("INSERT INTO Persons (FirstName, LastName, Age)
VALUES ('cu_queo', 'deo',18)");
mysql_close($con);
?>

Demo: giả sử nhập liệu từ Form của trang HTML  có tên "insert.html", sau khi nhấp nust " submit"  thì dữ liệu sẽ được chèn vào bảng DL ở trang "insert.php"

"insert,html" :

<html>
<body>
<form action="insert.php" method="post">
Firstname: <input type="text" name="firstname" />
Lastname: <input type="text" name="lastname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
</body>
</html>

"insert.php" :

<?php
$con = mysql_connect("localhost","cu_ti","te");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
$sql="INSERT INTO persons (FirstName, LastName, Age)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[age]')";
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
echo "1 record added";
mysql_close($con);
?>

Xuất DL : Xuất  ra màn hình  (  cả table) .
Cấu trúc:

SELECT column_name(s)
FROM table_name

Demo: giả sử ta xuất kết quả của bảng DL trên ra màn hình, ta làm như sau:

<?php
$con = mysql_connect("localhost","cu_ti","te");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
$result = mysql_query("SELECT * FROM persons");
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>

Xuất DL  Có DK :  tức là ta chỉ xuất những dòng nào của table thỏa điều kiện mà thôi.
Cấu trúc:

SELECT column_name(s)
FROM table_name
WHERE column_name operator value

Demo: xuất DL có "FirstName" là "cu_ngay".

<?php
$con = mysql_connect("localhost","cu_ti","te");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
$result = mysql_query("SELECT * FROM persons
WHERE FirstName="cu_ngay");
while($row = mysql_fetch_array($result))
{
echo $row['FirstName'] . " " . $row['LastName'];
echo "<br />";
}
?>

Xuất DL Theo Thứ Tự: tức là xuất DL tăng hoặc giảm theo value của 1 cột nào đó.
Cấu trúc:

SELECT column_name(s)
FROM table_name
ORDER BY column_name(s) ASC|DESC

Demo: xuất DL của bảng trên theo thứ tự tuổi (Age) tăng dần (ASC).

<?php
$con = mysql_connect("localhost","cu_ti","te");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
$result = mysql_query("SELECT * FROM persons ORDER BY Age");
while($row = mysql_fetch_array($result))
{
echo $row['FirstName'];
echo " " . $row['LastName'];
echo " " . $row['Age'];
echo "<br />";
}
mysql_close($con);
?>

Cập nhật DL : tức là sau khi ta chỉnh  sửa (edit) DL thì ta phải cập nhật lạ DL.
Cấu trúc:

UPDATE table_name
SET column1=value, column2=value2,...
WHERE some_column=some_value

Demo: giả sử ta có bảng DL như trên, bây h muốn sửa lại tuổi của tên " cu_ngay do" là 19 thì ta làm như sau:

<?php
$con = mysql_connect("localhost","cu_ti","te");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
mysql_query("UPDATE persons SET Age=19
WHERE FirstName='cu_ngay' AND LastName='do'");
mysql_close($con);
?>

Xóa DL: tức là xóa bỏ một số dòng DL của 1 table.
Cấu trúc:

DELETE FROM table_name
WHERE some_column = some_value

Demo: ta có bảng DL như ở trên xóa bỏ những tên nào có "LastName" là "do", thì ta làm như sau:

<?php
$con = mysql_connect("localhost","cu_ti","te");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
mysql_query("DELETE FROM persons WHERE LastName='do'");
mysql_close($con);
?>

PHP- Upload File

Việc upload  1 file khá quan trong trong 1 số trang web, như diễnn đàn, forum, ...

Đầu tiên tạo 1 form  HTML  đẻ uplaod file như sau:

<html>
<body>
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
<br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

Sau đó chúng ta dùng các hàm sau kiểm tra file upload:

$_FILES["file"]["name"] : tên file upload
$_FILES["file"]["type"] : kiểu / loại file upload
$_FILES["file"]["size"] : kích thươt file upload
$_FILES["file"]["tmp_name"] : thư mục chứa file upload
$_FILES["file"]["error"] : thông báo lỗi

File "upload_file.php" : có nội dung như sau:

<?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 20000))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br />";
}
else
{
echo "Upload: " . $_FILES["file"]["name"] . "<br />";
echo "Type: " . $_FILES["file"]["type"] . "<br />";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
echo "Stored in: " . $_FILES["file"]["tmp_name"];
}
}
else
{
echo "Invalid file";
}
?>

Sau đó lưu fiel upload vao thư mực " upload" :

<?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 20000))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    echo "Type: " . $_FILES["file"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";


    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
  }
else
  {
  echo "Invalid file";
  }
?>

PHP - Mail Form

Trong PHP ta dùng hàm mail() để gủi Email, có cấu trúc như sau:

mail(to,subject,message,headers,parameters)

Trong đó: "to": địa chỉ Email cần gửi đến, "subject": chủ đề Email, "message" : nội dung Email, "headerr" : gửi đi phần head, "parameters": lấy giá trị .
Demo: Gủi Email

<html>
<body>
<?php
if (isset($_REQUEST['email']))
//if "email" is filled out, send email
{
//send email
$email = $_REQUEST['email'] ;
$subject = $_REQUEST['subject'] ;
$message = $_REQUEST['message'] ;
mail("someone@example.com", $subject,
$message, "From:" . $email);
echo "Thank you for using our mail form";
}
else
//if "email" is not filled out, display the form
{
echo "<form method='post' action='mailform.php'>
Email: <input name='email' type='text' /><br />
Subject: <input name='subject' type='text' /><br />
Message:<br />
<textarea name='message' rows='15' cols='40'>
</textarea><br />
<input type='submit' />
</form>";
}
?>
</body>
</html>

Demo: kiểm tra email gửi có hợp lệ không

<html>
<body>
<?php
function spamcheck($field)
{
//filter_var() sanitizes the e-mail
//address using FILTER_SANITIZE_EMAIL
$field=filter_var($field, FILTER_SANITIZE_EMAIL);
//filter_var() validates the e-mail
//address using FILTER_VALIDATE_EMAIL
if(filter_var($field, FILTER_VALIDATE_EMAIL))
{
return TRUE;
}
else
{
return FALSE;

}

if (isset($_REQUEST['email']))
{//if "email" is filled out, proceed
//check if the email address is invalid
$mailcheck = spamcheck($_REQUEST['email']);
if ($mailcheck==FALSE)
{
echo "Invalid input";
}
else
{//send email
$email = $_REQUEST['email'] ;
$subject = $_REQUEST['subject'] ;
$message = $_REQUEST['message'] ;
mail("someone@example.com", "Subject: $subject",
$message, "From: $email" );
echo "Thank you for using our mail form";
}
}
else
{//if "email" is not filled out, display the form
echo "<form method='post' action='mailform.php'>
Email: <input name='email' type='text' /><br />
Subject: <input name='subject' type='text' /><br />
Message:<br />
<textarea name='message' rows='15' cols='40'>
</textarea><br />
<input type='submit' />
</form>";
}
?>
</body>
</html>

PHP Nâng Cao

PHP Căn Bản

jQuery

Giới thiệu:

JQuery thư viện JavaScriptđa trình duyệt được thiết kế để đơn giản hóa lập trình phía máy người dùng của HTML  Đó là phát hành vào tháng 1 năm 2006 tại BarCamp NYC bởi John Resig. Được sử dụng bởi hơn 52% trong 10.000 truy cập nhiều nhất các trang web, jQuery là phổ biến nhất của thư viện JavaScript trong sử dụng ngày nay .
jQuery là miễn phí, mã nguồn mở phần mềm, kép cấp phép theo MIT Giấy phép GNU General Public License, phiên bản 2  jQuery của được để làm cho nó dễ dàng hơn để di chuyển một tài liệu, chọn DOM các yếu tố, tạo ra hoạt hình s, xử lý Sự kiện, và phát triển Ajax (lập trình) | Ajax ứng dụng . jQuery cũng cung cấp khả năng cho các nhà phát triển để tạo ra plug-in s trên đầu trang của thư viện JavaScript. Điều này cho phép các nhà phát triển để tạo ra trừu tượng hóa ở mức độ thấp tương tác và hình ảnh động, hiệu ứng tiên tiến và vật dụng cao cấp, chủ đề có thể. Cách tiếp cận mô-đun để thư viện jQuery cho phép tạo ra các công cụ mạnh mẽ và năng động web và các ứng dụng web.

Cách dùng:
Ta có 2 cách khai báo thư viện jQuery như sau:
C1: Dùng thư viện trực tuyến

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
</head>

C2: Tải thư viện jQuery về rồi để vào thư mục web ( Link:jQuery ,-> save as -> name: jquery.js)

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Demo:

     <html>

<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){    $("p").hide();  });});</script></head>
<body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button>Click me</button></body></html>

JQuery Events:
Xử lý sự kiện khi click
Cú pháp:

          $("button").click(function() {..some code... } )

$("p").hide();

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Ngoài thu viện chuẩn, chúng ta cũng có thể tạo ra cái mang phong cách riêng ta, khi do ta khai bao như sau:

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

JQuery Effects:

jQuery hide(): khi ta click thì con trỏ " this" gọi phương thức " hide()" , những gì thuộc biến "p" sẽ thực thi " ẩn đi".
Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Hay Clck de thay co su thay doi.</p>
<p>Click B!</p>
<p>Click A!</p>
</body>
</html>

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Helen Bennett<br />
Garden House Crowther Way<br />
London</p>
</div>
<h3>Paris spécialités</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>
</body>
</html>

jQuery slideToggle(): Dùng ẩn hiện 1 đối tượng nào đó

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
<p class="flip">Show/Hide Panel</p>
</body>
</html>

jQuery fadeTo(): Ẩn đi 1 vùng nằm trong "style"
Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
});
</script>
</head>
<body>
<div style="background:yellow;width:300px;height:300px">
<button>Click to Fade</button>
</div>
</body>
</html>

jQuery Callback:  dùng cấu trúc sau: $(selector).hide(speed,callback) , trong đó " selector" thuộc tính chọn, " speed" số giây ẩn đối tượng, "callback" hàm.
Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

jQuery HTML: dùng cấu trúc :$(selector).html(content), trong đó : thay những gì ở "selector" bằng thẻ html " content".

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html("W3Schools");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>W3Schools</b>.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after(" W3Schools.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

jQuery và CSS:  có các phương thức sau:
css(name): trả ve giá tri thuộc tính
css(name,value): lấy  thuộc tính và giá trị
css(properties); lấy nhiều thuộc tính và giá trị


Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
$("p").html($(this).css("background-color"));
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;background:#ff0000"></div>
<p>Click in the red box to return the background color.</p>
</body>
</html>

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","yellow");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").height("200px");
});
});
</script>
</head>
<body>
<div id="div1" style="background:yellow;height:100px;width:100px">HELLO</div>
<div style="background:yellow;height:100px;width:100px">W3SCHOOLS</div>
<button>Click me</button>
</body>
</html>

Demo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div2").width("300px");
});
});
</script>
</head>
<body>
<div style="background:yellow;height:100px;width:100px">HELLO</div>
<div id="div2" style="background:yellow;height:100px;width:100px">W3SCHOOLS</div>
<button>Click me</button>
</body>
</html>

jQuery và Ajax: có 2 phương thức sau:

$(selector).load(url,data,callback): 
$.ajax(options):
Demo: tạo file "test1.txt" để ở thư mục web, file chứa cái khỉ khô gì cũng được tùy you, sau khi nhấp" Change Content " thi nó sẽ in nọi dung file "test1.txt" ra màn hình.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").load('test1.txt');
});
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>

Demo: giống như trên nhưng có tí khác

<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){ $.ajax({url:"test1.txt", success:function(result){ $("div").html(result); }});});});</script></head><body><div><h2>Let AJAX change this text</h2></div><button>Change Content</button></body></html>

Tham khảo thêm : w3schools

HTML - JavaScript

JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. .js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.
Phiên bản mới nhất của JavaScript là phiên bản 1.5, tương ứng với ECMA-262 bản 3. ECMAScript là phiên bản chuẩn hóa của JavaScript. Trình duyệt Mozilla phiên bản 1.8 beta 1 có hỗ trợ không đầy đủ cho E4X - phần mở rộng cho JavaScript hỗ trợ làm việc với XML, được chuẩn hóa trong ECMA-357.
Cùng thời điểm Netscape bắt đầu sử dụng công nghệ Java trên trình duyệt Netscape, LiveScript đã được đổi tên thành JavaScript để được chú ý hơn bởi ngôn ngữ lập trình Java lúc đó đang được coi là một hiện tượng. JavaScript được bổ sung vào trình duyệt Netscape bắt đầu từ phiên bản 2.0b3 của trình duyệt này vào tháng 12 năm 1995. Trên thực tế, JavaScript không được phát triển dựa từ Java. Do đó JavaScript chỉ dựa trên các cách đặt tên của Java. Java Script gồm 2 mảng là client-server thực hiện lệnh trên máy của end-user và web-server.
Sau thành công của JavaScript, Microsoft bắt đầu phát triển JScript, một ngôn ngữ có cùng ứng dụng và tương thích với JavaScript. JScript được bổ sung vào trình duyệt Internet Explorer bắt đầu từ Internet Explorer phiên bản 3.0 được phát hành tháng 8 năm 1996.
DOM (Document Object Model), một khái niệm thường được nhắc đến với JavaScript trên thực tế không phải là một phần của chuẩn ECMAScript, DOM là một chuẩn riêng biệt có liên quan chặt chẽ với XML.

JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu với cú pháp phát triển từ C. Giống như C, JavaScript có khái niệm từ khóa, do đó, JavaScript gần như không thể được mở rộng.
Cũng giống như C, JavaScript không có bộ xử lý xuất/nhập (input/output) riêng. Trong khi C sử dụng thư viện xuất/nhập chuẩn, JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuất/nhập.
Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh,... Ở Việt Nam, JavaScript còn được ứng dụng để làm bộ gõ tiếng Việt giống như bộ gõ hiện đang sử dụng trên trang Wikipedia tiếng Việt. Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Một số công nghệ nổi bật dòng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA.
Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của Adobe Acrobat và Adobe Reader. Điều khiển Dashboard trên hệ điều hành Mac OS X phiên bản 10.4 cũng có sử dụng JavaScript. Công nghệ kịch bản linh động (active scripting) của Microsoft có hỗ trợ ngôn ngữ JScript làm một ngôn ngữ kịch bản dùng cho hệ điều hành. JScript .NET là một ngôn ngữ tương thích với CLI gần giống JScript nhưng có thêm nhiều tính năng lập trình hướng đối tượng.
Mỗi ứng dụng này đều cung cấp mô hình đối tượng riêng cho phép tương tác với môi trường chủ, với phần lõi là ngôn ngữ lập trình JavaScript gần như giống nhau.


Khoảng trắng:
Dấu cách, tab và ký tự dòng mới sử dụng bên ngoài một chuỗi ký tự được gọi là khoảng trắng. Khác với C, khoảng trắng trong JavaScript có thể ảnh hưởng trực tiếp tới ý nghĩa của câu lệnh. Sử dụng phương pháp "tự động thêm dấu chấm phẩy", bất cứ một dòng JavaScript nào thích hợp sẽ được coi là một câu lệnh hợp lệ (giống như có dấu chấm phẩy trước ký tự dòng mới).
Tuy trong phần lớn trường hợp, dấu chấm phẩy trước khi kết thúc một dòng JavaScript là không cần thiết để đoạn mã nguồn hoạt động chính xác, lập trình viên nên sử dụng dấu chấm phẩy sau mỗi câu lệnh để đoạn mã nguồn dễ nhìn hơn. Ngoài ra, do đặc thù của JavaScript - chuyên dùng trên trang web, kích cỡ của đoạn mã nguồn là quan trọng, có một số phần mềm có thể làm giảm kích cỡ của đoạn mã nguồn JavaScript bằng cách bỏ đi những khoảng trắng không cần thiết, để những phần mềm này hoạt động chính xác, lập trình viên cần thêm dấu chấm phẩy vào cuối mỗi câu lệnh.


Chú giải:
Cú pháp chú giải của JavaScript giống với C++. Lập trình viên có thể chú giải trên nhiều dòng bằng cách bao bọc chú giải với /* và */ hoặc sử dụng // để chú giải từ vị trí // đến hết dòng.
Biến:
Trước khi sử dụng biến trong JavaScript, lập trình viên không nhất thiết phải khai báo biến. Có hai cách để định nghĩa biến trong JavaScript. Một là sử dụng cú pháp var để khai báo biến:

<script language="JavaScript">

    var tên_biến;

</script>

Ngoài ra, lập trình viên có thể chỉ việc gán cho biến một giá trị để sử dụng biến đó. Biến được định nghĩa ngoài tất cả các hàm hoặc được sử dụng mà không khai báo với cú pháp var sẽ được coi là biến toàn cục, những biến này có thể sử dụng trên toàn trang web. Biến được khai báo với var bên trong một hàm là biến cục bộ của hàm đó và chỉ có thể sử dụng được bên trong hàm đó.

Đối tượng:
Kiểu của JavaScript được chia ra làm hai loại: kiểu cơ bản và đối tượng. Đối tượng trong JavaScript là một thực thể có tên xác định và có thuộc tính trỏ đến giá trị, hàm hoặc cũng có thể là một đối tượng khác. Có nghĩa là, đối tượng trong JavaScript là một mảng kết hợp (associative array) tương tự như mảng trong PHP hay từ điển trong Python, PostScript hoặc Smalltalk.
JavaScript có một số đối tượng định nghĩa sẵn, bao gồm mảng (Array), đối tượng đại số Bool (Boolean), đối tượng ngày tháng (Date), đối tượng hàm (Function), đối tượng toán học (Math), đối tượng số (Number), đối tượng đối tượng (Object), đối tượng biểu thức tìm kiếm (RegExp) và đối tượng chuỗi ký tự (String). Các đối tượng khác là đối tượng thuộc phần mềm chủ (phần mềm áp dụng JavaScript - thường là trình duyệt).
Bằng cách định nghĩa hàm khởi tạo, lập trình viên có thể tạo đối tượng. JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu do đó thừa kế diễn ra giữa các đối tượng, không phải giữa các lớp (JavaScript không hề có lớp). Đối tượng thừa kế thuộc tính từ các nguyên mẫu của chúng.
Lập trình viên có thể thêm hoặc xóa thuộc tính hoặc hàm trong đối tượng sau khi đối tượng đã được tạo. Để làm việc này cho tất cả các đối tượng được tạo từ cùng một hàm khởi tạo, lập trình viên có thể sử dụng thuộc tính prototype của hàm khởi tạo để truy cập đối tượng nguyên mẫu. Lập trình viên không nhất thiết phải tự xóa các đối tượng đã tạo, JavaScript tự động gom rác tất cả những biến không còn được dùng nữa.

<script language="JavaScript">

    function samplePrototype() {

        this.attribute1 = "someValue"; // thêm một thuộc tính cho đối tượng

        this.attribute2 = 234; // thêm thuộc tính nữa cho đối tượng

        this.function1 = testFunction; // thêm một hàm vào đối tượng

    }

    function testFunction() {

        alert(this.attribute2); //hiển thị 234

    }

    var sampleObject = new samplePrototype; // khởi tạo một đối tượng

    sampleObject.function1(); // gọi hàm function1 của đối tượng sampleObject

    sampleObject.attribute3 = 123; // thêm một thuộc tính nữa cho đối tượng sampleObject

    delete sampleObject.attribute1; // xóa bỏ 1 thuộc tính

    delete sampleObject; // xóa bỏ đối tượng

</script>

Cấu trúc dữ liệu:
Một cấu trúc dữ liệu tiêu điểm là mảng (Array), mảng trong JavaScript là một bảng liên kết chỉ mục đến giá trị. Trong JavaScript, tất cả các đối tượng đều có thể liên kết chỉ mục đến giá trị, nhưng mảng là một đối tượng đặc biệt có thêm nhiều tính năng xử lý chỉ mục và dữ liệu đặc biệt (ví dụ: push, join, v.v.)
Mảng trong JavaScript có thuộc tính length. Thuộc tính length của JavaScript luôn luôn lớn hơn số chỉ mục lớn nhất trong mảng một đơn vị. Trong phần lớn ngôn ngữ lập trình, những thuộc tính có tính năng như length thường là thuộc tính chỉ đọc, tuy nhiên, với JavaScript, lập trình viên có thể thay đổi thuộc tính length. Bằng cách thay đổi thuộc tính length, lập trình viên có thể làm mảng lớn hơn hoặc nhỏ hơn (và xóa đi những chỉ mục lớn hơn hoặc bằng thuộc tính length mới).
Mảng trong JavaScript là mảng rải rác, có nghĩa là cho dù lập trình viên có một mảng như sau:

<script language="JavaScript">

    var test = new Array();

    test[2] = 0;

    test[100] = 5;

</script>

 Trong trường hợp này, dù mảng có đến chỉ mục mang số 100 thì mảng cũng chỉ chiếm bộ nhớ của hai số 0 và 5. Tuy nhiên, thuộc tính length sẽ có giá trị 101 do chỉ mục lớn nhất của mảng trong ví dụ trên là 100.
Một số ví dụ về mảng:

<script language="JavaScript">

    var test = new Array(10); // Tạo một mảng 10 chỉ mục

    var test2 = new Array(0,1,2,,3); // Tạo một mảng với bốn giá trị và 5 chỉ mục

    var test3 = new Array();

    test3["1"] = 123; // Hoàn toàn đúng cú pháp

</script>

Lập trình viên cũng có thể định nghĩa cấu trúc bằng đối tượng như sau:

<script language="JavaScript">

    var myStructure = {

        name: {

            first: "Mel",

            last: "Smith"

        },

        age: 33,

        hobbies: [ "chess", "jogging" ]

    };

</script>

Cấu trúc điều khiển:

Rẽ nhánh theo điều kiện với if ... else

Cú pháp if ... else dùng trong trường hợp muốn rẽ nhánh theo điều kiện. Cú pháp này tương đương với nếu x thì làm y, còn nếu không thì làm z. Các câu lệnh if ... else có thể lồng trong nhau.

Cú pháp:

<script language="JavaScript">

    if (biểu_thức_1)

    {

        khối lệnh được thực hiện nếu biểu thức 1 đúng;

    }

    else if (biểu_thức_2)

    {

        khối lệnh được thực hiện nếu biểu thức 2 đúng;

    }

    else

    {

        khối lệnh được thực hiện nếu cả hai biểu thức trên đều không đúng;

    }

</script>

VD: Đoạn mã nguồn trên mở một hộp thoại yêu cầu nhập vào một giá trị số, sau đó hiển thị thông báo số đó lớn hơn 0, bằng 0 hay nhỏ hơn 0.

<script language="JavaScript">

    var x = prompt("Nhập vào giá trị của x:");

    x = parseFloat(x);

    if (!isNaN(x)) {

        if (x > 0)

        {

            alert("x > 0");

        }

        else if (x == 0)

        {

            alert("x = 0");

        }

        else

        {

            alert("x < 0");

        }

    }

    else

    {

        alert("giá trị bạn nhập không phải là một số");

    }

</script>

Toán tử điều kiện

Toán từ điều kiện còn được biết đến với tên gọi toán tử tam phân.

Toán tử này sẽ trả lại giá trị là kết quả của biểu_thức_đúng nếu điều_kiện có giá trị bool bằng true, ngược lại nó sẽ trả lại giá trị bằng biểu_thức_sai.

 Cú pháp của toán tử này như sau:

<script language="JavaScript">

    điều_kiện ? biểu_thức_đúng : biểu_thức_sai;

</script>

Vòng lặp while:

Vòng lặp while có mục đích lặp đi lặp lại một khối lệnh nhất định cho đến khi biểu thức điều kiện trả về false. Khi dùng vòng lặp while phải chú ý tạo lối thoát cho vòng lặp (làm cho biểu thức điều kiện có giá trị false), nếu không đoạn mã nguồn sẽ rơi vào vòng lặp vô hạn, là một lỗi lập trình. Vòng lặp while thường được dùng khi lập trình viên không biết chính xác cần lặp bao nhiêu lần. Cú pháp của vòng lặp while như sau:

<script language="JavaScript">

    while (biểu_thức_điều_kiện) {

        khối lệnh cần thực hiện nếu biểu_thức_điều_kiện trả về true;

    }

</script>

Vòng lặp do ... while

Về cơ bản, vòng lặp do ... while gần như giống hệt như vòng lặp while. Tuy nhiên, trong trường hợp biểu thức điều kiện trả về false ngay từ đầu, khối lệnh trong vòng lặp while sẽ không bao giờ được thực hiện, trong khi đó, vòng lặp do ... while luôn đảm bảo khối lệnh trong vòng lặp được thực hiện ít nhất một lần.

Cú pháp của vòng lặp do ... while như sau:

<script language="JavaScript">

    do

    {

        khối lệnh;

    } while (biểu_thức_điều_kiện);

</script>

Ví dụ:

<script language="JavaScript">

    while (0 > 1)

    {

        alert("while"); // Câu lệnh này sẽ không bao giờ được thực hiện

    }

    do

    {

        alert("do ... while"); // Bạn sẽ nhận được thông báo do ... while một lần duy nhất

    } while (0 > 1);

</script>

Vòng lặp for:

Vòng lặp for thường được sử dụng khi cần lặp một khối lệnh mà lập trình viên biết trước sẽ cần lặp bao nhiêu lần. 

Khi bắt đầu vòng lặp for, lập trình viên cần khởi tạo một biến nhất định bằng biểu_thức_khởi_tạo để dùng trong biểu_thức_điều_kiện, nếu biểu_thức_điều_kiện trả về true, khối lệnh cần lặp sẽ được thực hiện, sau khi thực hiện xong khối lệnh cần lặp, biểu_thức_thay_đổi_giá_trị sẽ được thực hiện, tiếp theo, biểu_thức_điều_kiện sẽ lại được kiểm tra, cứ như vậy cho đến khi biểu_thức_điều_kiện trả về false, khi đó vòng lặp sẽ kết thúc.

Cú pháp của vòng lặp for như sau:

<script language="JavaScript">

    for (biểu_thức_khởi_tạo; biểu_thức_điều_kiện; biểu_thức_thay_đổi_giá_trị)

    {

        Khối lệnh cần lặp;

    }

</script>

Vòng lặp for ... in:

Vòng lặp for ... in dùng để lặp qua tất cả các thuộc tính của một đối tượng (hay lặp qua tất cả các phần tử của một mảng). Cú pháp của vòng lặp này như sau:

<script language="JavaScript">

    for (biến in đối_tượng)

    {

        khối lệnh cần thực hiện, có thể sử dụng đối_tượng[biến] để truy cập từng thuộc tính (phần tử) của đối tượng;

    }

</script>

Cú pháp switch:

Cú pháp switch cũng là cú pháp điều kiện như if ... else hay toán tử tam phân. Tuy nhiên, cú pháp switch thường được dùng khi chỉ cần so sánh bằng với số lượng kết quả cần kiểm tra lớn. Sau mỗi khối lệnh trong một mục kiểm tra kết quả (trừ mục default), lập trình viên cần phải thêm vào break.Cách sử dụng cú pháp switch:

<script language="JavaScript">

    switch (biểu_thức_điều_kiện)

    {

        case kết_quả_1 :

            khối lệnh cần thực hiện néu biểu_thức_điều_kiện bằng kết_quả_1;

            break;

        case kết_quả_2 :

            khối lệnh cần thực hiện néu biểu_thức_điều_kiện bằng kết_quả_2;

            break;

        default :

            khối lệnh cần thực hiện nếu biểu_thức_điều_kiện cho ra một kết quả khác;

    }

</script>

Hàm:

Hàm là một khối các câu lệnh với một danh sách một hoặc nhiều đối số (có thể không có đối số) và thường có tên (mặc dù trong JavaScript hàm không nhất thiết phải có tên). Hàm có thể trả lại một giá trị. Cú pháp của hàm như sau:

<script language="JavaScript">

    function tên_hàm(đối_số_1, đối_số_2)

    {

        các câu lệnh cần thực hiện mỗi khi hàm được gọi;

        return giá_trị_cần_trả_về;

    }

    tên_hàm(1, 2); // Gọi hàm tên_hàm với hai đối số 1 và 2 ứng với đối_số_1 và đối_số_2

    tên_hàm(1); // Gọi hàm tên_hàm với đối_số_1 có giá trị 1, đối_số_2 có giá trị undefined

</script>

Trong JavaScript, khi gọi hàm không nhất thiết phải gọi hàm với cùng số đối số như khi định nghĩa hàm, nếu số đối số ít hơn khi định nghĩa hàm, những đối số không được chuyển cho hàm sẽ mang giá trị undefined.

Các kiểu cơ bản sẽ được chuyển vào hàm theo giá trị, đối tượng sẽ được chuyển vào hàm theo tham chiếu.

Hàm là đối tượng hạng nhất trong JavaScript. Tất cả các hàm là đối tượng của nguyên mẫu Function. Hàm có thể được tạo và dùng trong phép toán gán như bất kỳ một đối tượng nào khác, và cũng có thể được dùng làm đối số cho các hàm khác. Do đó, JavaScript hỗ trợ hàm cấp độ cao. Ví dụ:

<script language="JavaScript">

    Array.prototype.fold =

    function (value, functor) {

        var result = value;

        for (var i = 0; i < this.length; i++) {

            result = functor(result, this[i]);

        }

        return result;

    }

    var sum = [1,2,3,4,5,6,7,8,9,10].fold(0, function (a, b) { return a + b })

</script>

Đoạn mã nguồn trên sẽ trả lại kết quả là 55.

Vì hàm trong JavaScript là đối tượng, lập trình viên có thể khởi tạo hàm không tên:

<script language="JavaScript">

    function() { thân hàm; }

</script>

Một ví dụ sử dụng hàm không tên trong JavaScript:

<script language="JavaScript">

    document.onkeypress = function(e) {

        alert("Bạn vừa nhấn một phím trên bàn phím");

    }

</script>

Hàm trên sẽ hiển thị thông báo khi một số phím trên bàn phím có thể gây sự kiện onkeypress được nhấn.

Mặc định, tất cả các thành phần của đối tượng thuộc phạm vi công cộng (public). Trong JavaScript, không có khái niệm thành phần riêng hay thành phần được bảo vệ (private và protected), tuy nhiên những tính năng này có thể được giả lập.

Quản lý lỗi:

Tùy theo môi trường phát triển, sửa lỗi JavaScript có thể sẽ rất khó khăn. Với JavaScript dùng trên trang web, hiện tại, các trình duyệt dựa trên Gecko (như Mozilla, Mozilla Firefox) có công cụ tìm diệt lỗi rất tốt (Venkman), ngoài ra còn kèm theo một công cụ kiểm tra DOM.

Các phiên bản mới hơn của JavaScript (như bản dùng trên Internet Explorer 5 và Netscape 6) hỗ trợ mệnh đề quản lý lỗi try ... catch ... finally, mệnh đề này bắt nguồn từ Java giúp lập trình viên quản lý lỗi thời gian chạy hoặc quản lý ngoại lệ xuất phát từ cú pháp throw. Cú pháp của mệnh đề này như sau:

<script language="JavaScript">

    try

    {

        Khối lệnh cần thực hiện có thể gây lỗi;

    }

    catch (error)

    {

        Khối lệnh cần thực hiện trong trường hợp có lỗi;

    }

    finally

    {

        Khối lệnh luôn được thực hiện;

    }

</script>

Trong cú pháp trên error là một đối tượng Error có hai thuộc tính theo chuẩn ECMAScript phiên bản 3:

error["message"]: Thông điệp diễn giải lỗi

error["name"]: Tên lỗi

Tuy nhiên mỗi trình duyệt sử dụng một bản JavaScript khác nhau, trong các trình duyệt lớn và phổ dụng không có trình duyệt nào hoàn toàn tuân thủ theo chuẩn ECMAScript phiên bản 3. Ví dụ như Internet Explorer 6 SP 1 có thêm hai thuộc tính:

error["number"]: Bí số của lỗi

error["description"]: Thông điệp diễn giải lỗi

Còn Mozilla Firefox 1.07 có thêm ba thuộc tính:

error["fileName"]: Tên tập tin xảy ra lỗi

error["lineNumber"]: Dòng xảy ra lỗi

error["stack"]: Cả hai thuộc tính trên gộp lại trong một chuỗi ký tự

Phần finally là không bắt buộc. Lập trình viên hoàn toàn có thể sử dụng try ... catch mà không có finally.

Phạm vi ảnh hưởng của lỗi:

Các ngôn ngữ lập trình kịch bản rất dễ bị ảnh hưởng bởi lỗi, hơn nữa, mỗi một trình duyệt, mỗi một công ty ứng dụng JavaScript một cách hoàn toàn khác nhau nên lập trình viên JavaScript thường phải dành rất nhiều thời gian sửa lỗi để đảm bảo đoạn mã nguồn của mình sẽ hoạt động tốt. Trong những trang HTML mà thẻ script và các đoạn mã HTML khác xen kẽ lẫn nhau, lỗi cú pháp có thể được phát hiện dễ dàng hơn bằng cách để mỗi hàm trong một thẻ script riêng biệt hoặc có thể sử dụng nhiều tệp .js khác nhau. Trong nhiều trường hợp, cách này còn giúp tránh làm hỏng cả trang web trong trường hợp có lỗi trong một đoạn mã nguồn.

Các Phương Pháp Nhúng Javascript Vào HTML:
Ngôn ngữ Javascript họat động tương tác với Ngôn ngữ HTML. Bởi vì chương trình dịch Mã Javascript đã được tích hợp vào Trình duyệt, do vậy cũng giống nhiều ngôn ngữ thiết kế Web khác (như CSS), Javascript cung cấp 3 phướng pháp chèn mã vào trang HTML như sau:
3 Phương pháp nhúng Javascript vào HTML:

Phương pháp 1: Nhúng trực tiếp trong trang HTML hoặc khai báo trong thành phần <Head></Head>-Heading Embed
Nhúng trực tiếp các đọan mã vào trang HTML.
Xem ví dụ:

<html><head><title>Nhúng trong trang</title></head><body bgcolor="#FFFFF" text="#000000"><script language="javascript" type="text/javascript"><!--document.write("Hello, World!!!");//--></script></body></html>

Trong đó: <script language="javascript"> là khai báo ngôn ngữ scripting đang dùng. Thẻ này và khai báo này là bắt buộc trong trường hợp bạn sử dụng nhiều Scripting language trên cùng một trang. Phần khai báo: type="text/javascript" có thể có hoặc không, tùy theo ứng dụng đoạn codes này vào mục đích nào cho trang HTML(như trong trường hợp này là cho Text). Khai báo: <!-- dùng để che giấu script với các trình duyệt không hỗ trợ Javascript. Tuy vậy hầu hết các Trình duyệt mới đều hỗ trợ Jvascript để đáp ứng nhu cầu của Web. Và kế đến là các codes để chạy đoạn mã Javascript, trong ví dụ này là document.write("Hello, World!!!");, là một phương pháp viết text ra trình duyệt của Javascript. Khai báo: //--> để đóng khóa mở <!--. Trong trường hợp bạn không muốn che giấu Javascript thì bạn có thể bỏ hai khóa này.

Cuối cùng, để đóng đoạn mã, chúng ta dùng thẻ đóng: </script>

Một các nhúng khác là đặt trong thành phần <Head></Head>, như ví dụ dưới đây:

Xem ví dụ 2:

<head><script language="javascript" type="text/javascript">message = "No Download Please!";function NoRightClick(b) {if(((navigator.appName=="Microsoft Internet Explorer")&&(event.button > 1))||((navigator.appName=="Netscape")&&(b.which > 1))){alert(message);return false;}}document.onmousedown = NoRightClick;</script>

</head>

Đoạn Codes trên đây dùng để chận phím bên phải. Khi phím này click vào trang Web có chứa đọan mã này thì trình duyệt hiển thị cảnh báo "No DownLoad Please".

Phương pháp 2: Call an external file- Gọi một file từ ngòai.
Giả sử bạn có một tập tin Javascript dài và phức tạp và File này cần đặt trong tất cả các trang HTML hoặc ASP. Nếu như trang nào bạn cũng phải chèn đoạn mã như phương pháp 1 thì mất nhiều thời gian và phải kiểm tra đoạn codes. Để giảm kích thước của trang Web và đở tốn thời gian, Javascript cho chúng ta 1 phương pháp chèn đoạn mã Javascript bằng cách gọi từ ngoài vào. Muốn gọi tập tin Javascript, trước hết tập tin đó phải có phần mở rộng là .js. Và trong tập tin này không được chứa thẻ mở và đóng <script></script>

Ví dụ bạn có tập tin tooltip.js và muốn tập tin này được chèn vào các trang Web, thì trong mỗi trang Web bạn dùng đoạn Codes này ở phần <Head></Head> hoặc tại vị trí nơi bạn muốn trang Web tương tác với mã HTML như sau:

<script language="javascript" src="tooltip.js"> </script>

Trong đó tập tin tooltip.js là tập tin được lưu với phần mở rộng .js. Trong tập tin này chứa dòng code sẽ là các đoạn code và các hàm điều khiển tooltip. Khi đó tại vị trí cần hiển thị tooltip, bạn chỉ việc gọi các Function thông qua các Event handler. Ngoài ra các đoạn mã Javascript hợp lệ Form cũng dùng phương pháp này, nhưng với điều kiện các tham chiếu đến các vùng trong Form phải cùng tên với các khai báo trong hàm Hợp Lệ Form. Chúng ta sẽ đề cập đến phương pháp tham chiếu đối tượng và thuộc tính trong các bài học và ví dụ về Javacript.

Phương pháp 3: Nhúng trong câu-Inline Implementation
Ngoài hai phương pháp trên dành cho các đoạn Codes Javascript dài và phức tạp, Javascript cung cấp 1 phương pháp đơn giản dành cho các Event handlers hoặc gọi các đối tượng như Javascript:window.location... Dưới đây là một ví dụ sử dụng Event Handler để thay đổi màu nền của Thẻ Table Data (TD).

Xem ví dụ:

<td onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor='blue' " bgcolor="blue"><a href="Link đến trang tài liệu html">Tên của đường link</a></td>

Trong đó: onMouseOver và onMouseOut là 2 event handlers (tạm dịch là: Lệnh điều khiển 1 sự kiện, bộ quản lý sự kiện) điều khiển chuột. Nghĩa là: Khi chuột đặt lên đường Link(onMouseOver) thì This=đối tượng này, Style=Phong cách của đối tượng này. backgroundColor: đặc tính của đối tương là màu nền của TD thành đỏ, khi chuột rời khỏi Link (OnMouseOut) thì background của TD chuyển sang màu xanh. Và giá trị màu nền mặt nhiên của TD là màu xanh. Chúng ta sẽ đề cập đến lệnh này nhiều hơn. Phương pháp này được dùng khi đọan code ngắn và thực hiện một công việc nhỏ nào đó.



Tham khảo thêm: w3schools