PDA

View Full Version : Nhập môn Javascript



minhdiep
06-17-2009, 01:14 AM
Nhanh thật đấy vừa mới học được 2 buổi đã kết thúc1 môn rồi, tiếp tục ngày mai là môn JavaScript môn này thì không phải sở trường của mình rồi phải xem bài trước cái đã :D Có gì ngày mai học xong về post tiếp :D

minhdiep
06-17-2009, 10:54 PM
Mình biết js khá lâu nhưng chưa hiểu về nhiều về ưu nhược điểm của js buổi học hôm nay quả là thú vị thầy Huy phân tích về ưu & nhược điểm của js mình đã mở mang thêm được nhiều kiến thức.

Tuy nó có nhiều nhược điểm vậy nhưng tương lai của js mình nghĩ nó vẫn phát triển bởi nó là nền tảng của Ajax sau này :D

minhdiep
06-17-2009, 11:32 PM
Vừa học xong HTML hôm nay lại được học về JS vậy HTML và JS chúng kết hợp với nhau như thế nào? Đi tìm hiểu về ứng dụng Java Script để xử lý tài liệu HTML mình có đọc được bài viết này được dịch từ trang w3schools

Trước khi đi sâu vào lập trình JavaScript với HTML, chúng ta cần tìm hiểu một đối tượng được sử dụng để tham chiếu tới toàn bộ tài liệu HTML, đó là DOM (Document Object Model). Mô hình này được sử dụng để biểu diễn cấu trúc của một tài liệu HTML, cho phép tham chiếu tới từng phần tử thẻ trong HTML, qua đó cho phép sử dụng JavaScript để can thiệp vào nội dung của từng phần tử thẻ HTML. Cùng với JavaScript, DOM đã trở thành một cánh tay đắc lực để xây dựng các ứng dụng có khả năng tương tác với máy chủ ở mức độ cao như AJAX.
Mô hình của DOM như sau:

http://www.w3schools.com/htmldom/htmltree.gif

Truy xuất nội dung của một thẻ HTML

Như ta đã biết, HTML là một file văn bản thuần túy chứa các phần tử HTML. Các phần tử này sẽ chứa nội dung (nằm giữa cặp thẻ) và các thuộc tính (nằm trong thẻ mở). Nội dung và thuộc tính của một phần tử HTML có thể được truy cập thông qua DOM. Điều đó có nghĩa là chúng ta có thể sử dụng JavaScript để thay đổi hoặc thậm chí là xóa luôn nội dung của một phần tử nào đó.

Để đánh dấu một phần tử HTML nào đó, người ta thường thiết lập định danh (Identify hay id) hoặc tên (name) cho phần tử đó thông qua các thuộc tính id hoặc name. Nên nhớ rằng khi thiết lập id hoặc name cho một phần tử nào đó, chúng ta phải xác định id hoặc name đó là duy nhất.

Ví dụ:



<H1 id=”thu_h1”>Chào mừng bạn đến với Việt Chuyên</H1>


Để truy cập vào một phần tử nào đó thông qua định danh id, chúng ta sử dụng một phương thức của DOM có tên là getElementById(id), còn để truy cập vào một phần tử nào đó thông qua tên, chúng ta sử dụng một phương thức khác có tên là getElementByName(name). Trong đó, id và name là các thuộc tính được gán vào thẻ HTML.

Ví dụ sau đây hiển thị nội dung chứa trong thẻ h1:




<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">Đây là dòng tiêu đề</h1>
<p>Kích chuột vào dòng tiêu đề trên để hiển thị hộp thoại</p>

</body>
</html>


Ví dụ trên sẽ hiển thị dòng tiêu đề Đây là dòng tiêu đề nằm giữa cặp thẻ <h1>. Thẻ H1 được xác định bởi một định danh id là myHeader.

Khi kích chuột lên dòng tiêu đề, biến cố onclick sẽ được kích hoạt và gọi hàm getValue(). Hàm này chịu trách nhiệm khai báo một biến x. Biến này sẽ nhận giá trị là thẻ được định danh bởi myHeader (chính là thẻ h1). Hàm alert sẽ in giá trị được lưu trong thuộc tính innerHTML của biến x. Thuộc tính innerHTML lúc này chứa nội dung nằm giữa cặp thẻ <h1>...</h1>.

Để thay đổi nội dung nằm giữa một cặp thẻ có id hoặc name cho trước, ta cũng có thể gán thuộc tính innerHTML của biến tham chiếu tới thẻ đó với một chuỗi nội dung HTML xác định. Hãy sửa hàm getValue() trên theo ví dụ dưới đây rồi chạy thử để xem kết quả:




function getValue()
{
var x=document.getElementById("myHeader")
x.innerHTML=”Xin chào, tôi đây”
}


Các bạn có thể học tại đây
http://www.w3schools.com/HTMLDOM/default.asp

Kenny
06-18-2009, 08:54 PM
hì,
Em bỏ công sưu tầm kiến thức tốt lắm.

Phần mà em đang đề cập ở trên là DOM trong javascript. DOM chỉ thực sự phát huy sức mạnh khi nó kết hợp với XML (nội dung lớp PHP nâng cao). Còn xuất ra giá trị bình thường thì document.write lại đơn giản và dễ sử dụng hơn nhiều.

minhdiep
06-19-2009, 05:19 PM
Được thầy ủng hộ bữa nay mình tiếp tục về chủ đề JS và những ứng dụng thực tiễn.

Kiểm tra tính hợp lệ của giá trị trong form với JavaScript
Khi xây dựng một web site có thu thập các thông tin từ người sử dụng thông qua các form nhập liệu, bạn luôn cần chú ý đến việc kiểm tra các thông tin đó để xem dạng thức của chúng có phù hợp với yêu cầu của bạn không. Giả sử, bạn cung cấp một form nhập số điện thoại nhưng người sử dụng của bạn vô tình hay cố tình nhập vào đó các chữ cái. Rõ ràng là việc kiểm tra như vậy là cần thiết để sàng lọc tất cả các thông tin không hợp lệ ít nhất là về mặt hình thức trước khi đưa nó về bộ phận lưu trữ và quản lý dữ liệu. Bài viết này gợi ý cho bạn một trong những cách thức dùng Javascript để xác thực tính hợp lệ của các thông tin đó trên máy khách.

Giả sử chúng ta có một trang như sau:


<html>
<head>
<basefont face=”Arial”>
<script language=”JavaScript”>
function validateForm()
{
// kiểm tra tên
...
// kiểm tra chiều dài mật khẩu
...
// kiểm tra địa chỉ email
...
// kiểm tra số tuổi
...
// kiểm độ tuổi
...
return true;
}
</script>
</head>
<body>
<!-- Phần mã HTML cho form-->
<form action=”someform.php” method=”post” onSubmit=”return validateForm();”>
Tên họ: <br> <input type=”text” name=”name” id=”name”><p>
Mật khẩu:<br> <input type=”password” name=”password” id=”password”><p>
Địa chỉ email: <br> <input type=”text” name=”email” id=”email”><p>
Tuổi: <br><input type=”text” name=”age” id=”age”><p>
<input type=”submit” value=”Gửi thông tin đi”></form>
</body>
</html>


Bạn có thể thấy đây chỉ là một form đơn giản gồm các trường thu nhận dữ liệu từ người sử dụng: tên, mật khẩu, địa chỉ email, tuổi và cuối cùng là một nút nhấn. Trước khi form được gửi đi thì sự kiện “onSubmit” sẽ gọi hàm validateForm(), hàm này sẽ kiểm tra các thông tin sau:
• Tên trong form đã được điền chưa
• Chiều dài mật khẩu có từ 6 kí tự trở lên không
• Địa chỉ email address có định dạng đúng không
• Giá trị của tuổi có phải là con số và nằm từ 1 đến 99 không.
Nếu có một giá trị không phù hợp qua đợt kiểm tra thì hàm validateForm() sẽ in ra một thông báo lỗi và trả lại giá trị false, nghĩa là người sử dụng sẽ không gửi thông tin từ form đi được. Nếu các đợt kiểm tra không gặp lỗi thì hàm sẽ trả lại giá trị true và form được phép gửi giá trị đi. Như vậy sự kiểm tra trên máy khách sẽ giúp giảm thiểu các thông tin không đạt tiêu chuẩn nằm trong cơ sở dữ liệu.
Đây là một tác vụ rất bình thường trên mạng Internet và dựa trên cách tư duy lập trình hướng đối tượng, chúng ta cần xây dựng nó thành một đoạn mã cho phép sử dụng lại: bao gói các tác vụ kiểm tra trong một đối tượng và mỗi khi cần dùng cho một ứng dụng web khác, chúng ta sẽ tạo ra các mẫu của đối tượng đó.

Bắt đầu
Trở lại với vấn đề, theo đoạn mã lúc đầu thì chúng ta đã định nghĩa đối tượng formValidator gồm có 2 bộ phận:
1. Một chuỗi các phương thức nhận dữ liệu cần được kiểm tra như là các đối số phương thức, để kiểm tra các dữ liệu này xem hợp lệ hay không. Cái tiêu chuẩn để đưa ra đánh giá là “hợp lệ” có thể được định nghĩa bên trong phạm vi của phương thức, và trả lại một giá trị thích hợp.
2. Một cấu trúc dữ liệu JavaScript (ở đây là một mảng) dùng để lưu trữ một danh sách các lỗi phát hiện được trong suốt quá trình kiểm tra tính hợp lệ và các phương thức để thao tác trên cấu trúc dữ liệu này. Như bạn sẽ thấy, ở đây có 2 thành phần cơ bản làm cho việc xây dựng một đối tượng Validator, một đối tượng với nhiều phương thức tổng quát, trở nên rất dễ dàng.
Ta cần phải xác định cách thức làm việc của lớp này. Đây là cách của tôi: // khởi tạo đối tượng



fv = new formValidator();
// tiến hành kiểm tra
// kiểm tra trường dữ liệu rỗng
if (fv.isEmpty(document.forms[0].elements[0].value))
{
fv.raiseError(“Vui lòng nhập vào giá trị”);
}
// kiểm tra phạm vi dữ liệu
if (!fv.isWithinRange(document.forms[0].elements[1].value, 1, 99))
{
fv.raiseError(“Nhập giá trị trong khoảng từ 1-99”);
}
// nếu có lỗi thì hiển thị, ngược lại thì tiếp tục
if (fv.numErrors() > 0)
{
fv.displayErrors();
}

Như bạn thấy, một khi đối tượng được khởi tạo, có nhiều phương thức được gọi (với các giá trị nhập tương ứng trong form như là tham số) để kiểm tra xem dữ liệu nhập có hợp lệ không. Nếu không, thông báo lỗi sẽ được tạo ra và lưu vào ngăn xếp lỗi của đối tượng; những thông báo này có thể hiển thị sau đó, khi việc kiểm tra tất cả các trường dữ liệu hoàn tất. Sau khi đã xác định rõ các chức năng cơ bản của đối tượng, chúng ta nên dành thời gian liệt kê các phương thức quan trọng cùng với chức năng của nó:

• isEmpty() – kiểm tra một biến trong form có rỗng hay không;
• isNumber() – kiểm tra một biến trong form có phải là số hay không;
• isAlphabetic() – kiểm tra biến trong form có phải chỉ toàn chữ hay không;
• isAlphaNumeric() – kiểm tra một biến trong form có phải chỉ chứa toàn chữ và số hay không;
• isWithinRange() – kiểm tra một biến trong form có nằm trong một khoảng giá trị số định sẵn hay không;
• isEmailAddress() – kiểm tra một biến trong form có chứa một địa chỉ email hợp lệ hay không;
• raiseError() – chèn một thông báo lỗi vào ngăn xếp lỗi;
• displayErrors() – hiển thị danh sách các thông báo lỗi trong hộp thoại cảnh báo (alert box);
• numErrors() – trả về số lượng các thông báo lỗi đã tạo ra.
Đây là những phương thức chủ yếu; có thể có thêm các phương thức khác mà tôi sẽ thêm vào trong quá trình phát triển. Hãy bắt đầu bằng cách thiết lập định nghĩa cho lớp:


// tạo một đối tượng


function formValidator()
{
// phần còn lại
}



Do tôi dự định sẽ xây dựng một số phương thức quản lý lỗi cơ bản cho lớp này, tôi cần phải thêm vào một biến để giữ thông tin này.


// tạo đối tượng
function formValidator()
{
// tạo mảng lưu các thông báo lỗi
this.errorList = new Array;
// phần còn lại
}

Bây giờ chúng ta lần lượt xây dựng các phương thức kiểm tra.
Đây là phương thức đầu tiên, thực hiện một phép kiểm tra rất cơ bản, kiểm tra xem một biến có chứa giá trị nào nữa hay không.


// kiểm tra xem dữ liệu nhập có phải là toàn khoảng trắng hoặc rỗng hay không.
function isEmpty(val)
{
if (val.match(/^s+$/) || val == “”)
{return true;}
else
{return false;}
}

Đây là một phương thức khá đơn giản, nhưng đáng để xem xét một cách chi tiết, bởi vì tất cả các phương thức tiếp theo đều có cấu trúc tương tự. Phương thức isEmpty() được gọi với một đối số duy nhất: giá trị sẽ được kiểm tra. Sau đó nó sẽ sử dụng phương thức match() của đối tượng String của JavaScript để kiểm tra giá trị này so với một biểu thức chính quy. Trong ví dụ cụ thể này, biểu thức chính quy được thiết kế để so khớp với một chuỗi chỉ chứa các khoảng trắng thôi; những chuỗi những vậy được xem là không chứa một chút dữ liệu thực tế nào. Nếu tìm thấy một chuỗi như vậy, thì hàm này trả lại giá trị true; nếu không (nghĩa là, nếu giá trị tìm thấy thực sự chứa dữ liệu), thì hàm này trả lại false. Như bạn thấy, kiểu cấu trúc cho phương thức đối tượng này làm cho vấn đề trở nên đơn giản khi bạn muốn đưa lời gọi phương thức vào trong một biểu thức điều kiện nằm trong mã kịch bản xử lý form của bạn.
Bây giờ chúng ta chuyển sang một hàm khác:


// kiểm tra xem liệu giá trị nhập vào có phải là con số hay không
function isNumber(val)
{
if (isNaN(val))
{return false;}
else
{return true;}
}

Ở đây, hàm isNaN() của JavaScript được sử dụng để kiểm tra liệu giá trị được cung cấp cho nó có phải là một con số hay không.
Một phương thức hữu ích khác, nhất là khi làm việc với các con số, là WithinRange(). Phương thức này cung cấp một giải pháp khá đơn giản để kiểm tra liệu giá trị nhập vào có nằm trong một dãy số nhất định nào đó hay không.



// kiểm tra xem liệu giá trị đó có nằm trong vùng min và max hay không
function isWithinRange(val, min, max)
{
if (val >= min && val <= max)
{return true;}
else
{return false;}
}


Cuối cùng, bạn có thể thêm vào một phương thức isChecked() để kiểm tra xem liệu một hộp kiểm (checkbox) nào đó có được đánh dấu hay không:


// kiểm tra xem liệu giá trị đó có được chọn hay không
function isChecked(obj)
{
if (obj.checked)
{return true;}
else
{return false;}
}

Bạn hãy chú ý đến sự khác biệt giữa phương thức này và các phương thức trước nó. Các phương thức đối tượng trước được viết ra để chấp nhận lấy giá trị trên form làm đối số; còn phương thức này lại chấp nhận một đối tượng làm đối số. Đối tượng này biểu diễn một phần tử trong hộp thoại cảnh báo. Nó cũng có khả năng tạo ra các thủ tục (routines) kiểm tra phức tạp khác thông qua sự hỗ trợ các biểu thức chính quy có sẵn trong JavaScript. Bạn hãy xem phương thức tiếp theo, isAlphabetic(), phương thức này sử dụng một biểu thức chính quy để kiểm tra xem liệu có phải tất cả các kí tự nằm trong chuỗi nhập vào có phải là các chữ cái hay không…


// kiểm tra xem dữ liệu nhập vào có phải là chữ cái hay không function isAlphabetic(val)
{
if (val.match(/^[a-zA-Z]+$/))
{return true;}
else
{return false;}
}
… hoặc kiểm tra xem chuỗi nhập vào có chứa cả chữ cái nằm lẫn với số hay không.

// kiểm tra xem dữ liệu nhập vào có phải là có cả chữ nằm lẫn với số //(alphanumeric)
function isAlphaNumeric(val)
{
if (val.match(/^[a-zA-Z0-9]+$/))
{return true;}
else
{return false;}
}

Khả năng sử dụng các biểu thức chính quy để thực hiện việc kiểm tra dữ liệu sẽ trở nên rất có ích khi mà bạn muốn kiểm tra địa chỉ email mà người sử dụng cung cấp. Chúng ta sẽ dùng phương thức isEmailAddress() để làm việc đó:


// kiểm tra xem liệu thông tin nhập vào có đúng là một email hợp lệ hay không

function isEmailAddress(val)
{
if (val.match(/^([a-zA-Z0-9])+ ([.a-zA-Z0-9_-])* @([a-zA-Z0-9_-])+(.[a-zA-Z0-9_
-]+)+/))
{return true;}
else
{return false;}
}

Đây cũng mới chỉ là các thao tác kiểm tra tính hợp lệ ở mức độ cơ bản. Bạn có thể tự định nghĩa riêng cho mình các thủ tục mới vào để phục vụ cho nhu cầu của bạn; theo như mẫu mà tôi đã làm ở trên. Bây giờ chúng ta sẽ bổ sung thêm một số phương thức để đảm trách nhiệm vụ trả về các thông báo lỗi trong trường hợp một giá trị nào đó được coi là không hợp lệ khi kiểm tra.
Đầu tiên là ta đưa vào phương thức raiseError(), phương thức này cho phép bạn đưa thông báo lỗi mà người có thể đọc được vào trong ngăn xếp chứa lỗi. Nếu bạn nhìn vào lược đồ đầu tiên mà tôi dùng để thiết kế cách làm việc của đối tượng thì bạn sẽ thấy phương thức này thường được gọi nếu quá trình kiểm tra tính hợp lệ trả lại kết quả false. Phương thức này nhận một thông báo lỗi làm đối số. Đây chính là thông báo được đưa vào ngăn xếp chứa lỗi; ngăn xếp chứa lỗi này tự nó hoạt động như là một mảng JavaScript thông thường. Bạn hãy xem phương thức tạo đối tượng đã nói đến ở trên để hiểu được sự khởi tạo của nó.


// bổ sung một thông báo lỗi vào danh sách lỗi
function raiseError(msg)
{
this.errorList[this.errorList.length] = msg;
}

Phương thức numErrors() trả lại kích thước của mảng “errorList”; nếu kích thước của mảng lớn hơn 1, thì nó chỉ ra rằng có ít nhất một lỗi đã xuất hiện trong quá trình kiểm tra tính hợp lệ của dữ liệu. Xem mã sau:


// trả về các lỗi có trong danh sách lỗi
function numErrors()
{
return this.errorList.length;
}


Bây giờ, phương thức numErrors() sẽ chỉ cho bạn biết có bao nhiêu lỗi đã xuất hiện; chứ nó không cho bạn biết các thông báo lỗi thực sự. Vì thế, bạn cần phương thức displayErrors(), phương thức này trả lại nội dung của mảng errorList thông qua một loạt các hộp thoại của alert().


// hiển thị tất cả các lỗi
// duyệt lần lượt qua các phần tử trong mảng chứa thông báo
// lỗi và in ra nội dung tương ứng

function displayErrors()
{
for (x=0; x< } this.errorList[x]); + ? alert( ? Error : { x++)>= min && val <= max)
{return true;}
else
{return false;}
}
// kiểm tra xem dữ liệu nhập vào có đúng là một địa chỉ email hợp lệ hay không
function isEmailAddress(val)
{
if (val.match(/^([a-zA-Z0-9])+ ([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+
(.[a-zA-Z0-9_-]+)+/))
{return true;}
else
{return false;}
}
// kiểm tra xem giá trị trong form có được đánh dấu chọn hay không
function isChecked(obj)
{
if (obj.checked)
{return true;}
else
{return false;}
}
// thêm một lỗi vào danh sách chứa thông báo lỗi
function raiseError(msg)
{
this.errorList[this.errorList.length] = msg;
}
// trả lại số lượng lỗi chứa trong mảng chứa thông báo lỗi
function numErrors()
{
return this.errorList.length;
}
// kết thúc đối tượng

Lúc này, chúng ta đã có đủ các khối mã để có thể thực hiện quá trình kiểm tra tính hợp lệ. Chú ý là đối tượng kiểm tra tính hợp lệ phần trên được lưu trong file “formValidator.js”, file này sẽ được đọc ở phần đầu trang như sau.


<html>
<head>
<basefont face=”Arial”>
<script language=”JavaScript” src=”formValidator.js”>
</script>
<script language=”JavaScript”>
// kiểm tra giá trị dữ liệu trên form
function checkForm()
{
// khởi tạo đối tượng
fv = new formValidator();
// thực hiện các bước kiểm tra
// kiểm tra xem trường nhập tên có dữ liệu không
if (fv.isEmpty(document.forms[0].elements[0].value))
{
fv.raiseError(“Bạn chưa nhập tên”);
}
// kiểm tra xem trường nhập tuổi có dữ liệu không
if (fv.isEmpty(document.forms[0].elements[1].value))
{
fv.raiseError(“Bạn chưa nhập tuổi”);
}
// kiểm tra xem dữ liệu về tuổi có thuộc phạm vi mong muốn không
if (!fv.isWithinRange(document.forms[0].elements[1].value,1, 99))
{
fv.raiseError(“Vui lòng nhập tuổi trong khoảng từ 1-99”);
}
// kiểm tra xem trường nhập địa chỉ email có dữ liệukhông
if (fv.isEmpty(document.forms[0].elements[5].value))
{
fv.raiseError(“Bạn chưa nhập địa chỉ e-mail”);
}
// kiểm tra xem định dạng của địa chỉ email có hợp lệkhông
if (!fv.isEmpty(document.forms[0].elements[5].value)
&&
!fv.isEmailAddress(document.forms[0].elements[5].value))
{
fv.raiseError(“Địa chỉ e-mail không hợp lệ”);
}
// kiểm tra xem hộp kiểm có được đánh dấu không
if (!fv.isChecked(document.forms[0].elements[6]))
{
fv.raiseError(“Vui lòng xác nhận rằng bạn đồng ý với những điều khoản của chúng tôi”);
}
// thực hiện xong các bước
// nếu thấy có lỗi thì hiển thị, còn không thì tiếp tục
if (fv.numErrors() > 0)
{fv.displayErrors();return false;}
else
{return true;}
}
</script>
</head>
<body>
<form action=”action.cgi” method=”POST”
onSubmit=”return checkForm()”>
<b>Họ và tên:</b><br>
<input type=”text” name=”name” size=”15”><p>
<b>Tuổi:</b><br>
<input type=”text” name=”age” size=”2” maxlength=”2”><p>
<b>Giới tính:</b><br>
<input type=”Radio” name=”sex” value=”m” checked>Nam
<input type=”Radio” name=”sex” value=”f”>Nữ
<p><b>Loại báo đọc hằng ngày:<br>
<select name=”stype”>
<option value=”1”>Báo Học Lập Trình
<option value=”2”>PC Magazine
<option value=”3”>Java Developers Journal
</select>
<p>
<b>Địa chỉ email:<br>
<input type=”text” name=”email” size=”25”><p>
<input type=”Checkbox” name=”agree”>
Tôi chấp nhận tuân thủ theo các nội quy và điều lệ ghi trên site này
<p>
<input type=”Submit” name=”submit” value=”Lưu lại”>
</form>
</body>
</html>

Ở đây, khi form được gửi đi, sự kiện “onSubmit” sẽ gọi hàm checkForm(), hàm này sẽ khởi tạo một đối tượng mới của lớp formValidator. Sau khi đối tượng được khởi tạo xong, tất cả các thủ tục kiểm tra tính hợp lệ sẽ sẵn sàng cung cấp hoạt động cho trang chứa mã kịch bản như là các phưong thức đối tượng, và bạn có thể sử dụng chúng để kiểm tra nhiều giá trị nhập vào từ form.
Tổng kết
Trong bài viết này, tôi đã giới thiệu cách thức kiểm tra giá trị nhập vào từ người dùng trong một form bằng JavaScript theo phương pháp lập trình hướng đối tượng. Tất nhiên, bạn có thể không cần dùng đến đối tượng để thực hiện việc kiểm tra tính hợp lệ. Tuy nhiên, việc viết mã dựa theo phương pháp lập trình hướng đối tượng sẽ giúp giảm bớt thời gian viết mã bằng việc sử dụng lại thư viện các hàm, bao gộp chúng trong một đối tượng và gắn đối tượng đó vào form khi cần. Hy vọng bài viết này sẽ có ích cho bạn.

Báo Học Lập Trình

minhdiep
06-20-2009, 11:46 AM
Hôm rồi học đến các hàm thời gian, thầy cho bài ngồi loai hoay mới phát hiện ra 2 điều là
các hàm thời gian lưu giá trị theo mảng và bắt đầu từ giá trị 0
đối với tháng cộng thêm 1
còn hàm về năm không dùng getYear nữa mà thay bằng getFullYear()
Học về câu lênh rẽ nhánh thầy cho 1 ví dụ làm cả lớp ngỡ người (trong đó có cả mình quê wá :o)

Buổi tới học về mảng

Mảng trong JS
cú pháp khai báo mãng
tên_biến = new Array()
gán giá trị cho mảng
tên_biến[0]=Giá trị;
ta có thể khởi tạo giá trị của mảng ngay khi khai báo
VD mình khai báo 1 mảng ngày trong tuần:


var ngay= new Array('Thứ Nhật','Thứ Hai','Thứ Ba','Thứ Tư','Thứ Năm','Thứ Sáu','Thứ Bẩy');

Bài tập ứng dụng và cũng là ứng dụng thực tế trang web nào cũng có
In ra câu

Hôm nay, thứ ..., ngày...tháng...năm....

cũng tập tành phân tích đề bài như thầy nè :D
+ ngày tháng năm hiện tại Date()
+ 1 mảng chứa các thứ trong tuần Array(...)
+ thứ getDay()
+ ngày getDate()
+ tháng getMonth()
+ năm getFullYear()
+ Lấy ra ngày hiệntại
+ Gán giá trị của mảng

bắt đầu code :D




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Bắt đầu hàm thoigian()-->
<script>
function thoigian()
{
var dt = new Date();
var thu = new Array('Thứ Nhật','Thứ Hai','Thứ Ba','Thứ Tư','Thứ Năm','Thứ Sáu','Thứ Bẩy');
var thu_Now = dt.getDay() /*lấy thứ hiện tại*/
var d_Now=dt.getDate(); /*lấy ngày hiện tại*/
var m_Now=dt.getMonth()+1;/*lấy tháng hiện tại*/
var y_Now=dt.getFullYear();/*lấy năm hiện tại*/
var thu_trong_tuan = thu[thu_Now]; /*gán giá trị của của mãng */
document.write("<p align=right><font color=red face=tomaho>Hôm nay, " + thu_trong_tuan + ", ngày " + d_Now + " tháng " + m_Now + " năm " + y_Now + "</font></p>" );

}
thoigian(); /*muốn đưa vị trí nào ta ta gọi làm này */

<!--Kết thúc hàm thoigian()-->

</script>
</head>
<body>
</body>
</html>

minhdiep
06-20-2009, 01:22 PM
Bài tập về mảng


<script>
var banner= new Array()
banner[0]="<img src='banner1.jpg'/>"
banner[1]="<img src='banner2.jpg'/>"
banner[2]="<img src='banner3.jpg'/>"
banner[3]="<img src='banner4.jpg'/>"
var random=Math.round(3*Math.random());
document.write(banner[random]);
</script>

Bài tập thầy

Giả sử có 3 hính banner.jpg, banner1.jpg, banner2.jpg. Tạo trang web thỏa các dk sau:
+ Khi vừa mở trang web thì xuất hiện banner.jpg
+ Sau 2 giây banner.jpg->banner1.jpg. Tương tự như thế sau 2 giây tiếp tục chuyển qua banner2.jpg, rồi tiếp tục vòng trỡ lại.

Phân tích đề
ta có 3 tấm hình vậy ta phải lưu nó trong 1 mảng
do dk đề các tấm hình xuất hiện lần lượt
sau đó lặp lại

Code


<html>
<head>
</head>
<body>
<img id="banner" width="780" height="100">
<script>
var banner=0;
function banner_random()
{
if(banner<3){
var img ="";
img = "banner" + banner + ".jpg";
document.getElementById("banner").src= img;
banner++;
if(banner==3){
banner=0;
}
}
setTimeout("banner_random()",2000);
}
banner_random();
</script>

</body>
</html>



Thầy và các bạn giúp em chút về bài tập này, em làm sao không thể nào show ra cái hình banner.jpg đầu tiên. Nếu em để banner0.jpg, banner1.jpg, banner2.jpg thì mới show cả 3 hình ra.

minhdiep
06-22-2009, 08:56 PM
Hehe, hóa ra thầy cũng để banner1, banner2,banner3



</html>
<head>
<script language="javascript">
i=0;
a = new Array("hinh1.jpg","hinh2.jpg","hinh3.jpg");
function ch()
{
h.filters.blendTrans.apply();
document.h.src=a[i];
h.filters.blendTrans.play();
i++;
if(i>2){
i=0;
}
setTimeout(ch(),2000);
}
</script>
</head>
<body onload=ch()>
<img src="h1.jpg" name=h style="filter: blendTrans(duration=3)" />
</body>
</html>

minhdiep
06-26-2009, 08:54 PM
Sửa bài in ra từng ký tự dưới thanh status


<script>
i=1;
t="TRUNG TAM TIN HOC VIET CHUYEN";
function chuchay()
{
s1=t.substring(0,i);
window.status=s1;
i++;
if(i>=t.length)
{
i=1;
}
setTimeout("chaychu()",200);
}

</script>


Bài tập về Form




email=document.F1.T1
1. if (ducument.F1.T1.value=="")
2. if(ducument.F1.T1.value.length<5)
4. if(email.indexOf("@")==-1)
5. if(email.indexOf("@")==0)
6. if(email.indexOf("@")==email.length-1)
7. if(email.indexOf(".",email.idexOf("@")==1)
8. if(email.indexOf(".")-email.indexOf("@")==1)
9. if(email.indexOf(".")==email.length-1)
10. if(email.substring(email.indexOf("@")+1,email.indexOf("."))!="Yahoo")

tuanva
07-03-2009, 03:45 PM
Cậu này mang tính chia sẻ siêu cao, học được gì chia sẻ luôn cái nấy:D. Tớ thích cậu rồi đó nhé , hehe :D. Thanks cậu rất nhiều về loạt bài js này. Vì hồi tớ học, tớ cũng ko ghi chép kỹ đến thế này, tài liệu rất có ích khi cần học lại kiến thức :)

SundayForever
04-13-2011, 11:07 AM
Để truy cập vào một phần tử nào đó thông qua định danh id, chúng ta sử dụng một phương thức của DOM có tên là getElementById(id), còn để truy cập vào một phần tử nào đó thông qua tên, chúng ta sử dụng một phương thức khác có tên là getElementByName(name). Trong đó, id và name là các thuộc tính được gán vào thẻ HTML.

huyenthietkiem
06-02-2011, 12:34 PM
Đang đọc hay ngắt cái rụp