RSSPHP

Hướng đối tượng trong Javascript

Bạn đã từng làm việc hướng đối tượng với Php, ASP.net, hay Java? Vậy bạn đã từng làm việc về hướng đối tượng trong javascript chưa? Hôm nay tôi sẽ hướng dẫn cho bạn chủ đề khá thú vị này

1. Giới thiệu

Bạn đã từng làm việc hướng đối tượng với Php, ASP.net, hay Java? Vậy bạn đã từng làm việc về hướng đối tượng trong javascript chưa? Hôm nay tôi sẽ hướng dẫn cho bạn chủ đề khá thú vị này

2. Khai báo

Đầu tiên bạn phải khai báo contructor (contructor trong js cũng giống như bên php, asp.net, … cũng là tên một function trùng với tên class

Ví dụ, như bạn khai báo một contructor tên là Tune có 2 đối số là song và title

function  Tune (song, title)
  {
  Code here
  }

3. Thiết kế

Thiết kế giao diện gồm

  • 2 textbox có id: txtSong, txtTile
  • Và button có id: btnTune và text là Tune
  • Mã source thiết kế như sau
<table cellpadding="0"cellspacing="0"> 
  <tr> 
  	<td class="style1"> 
  		Contructor</td>
  	<td> 
  		&nbsp;</td> 
  </tr> 
  <tr> 
  	<td> 
  		Song: </td>
  	<td>
  		<inputid="txtSong"type="text"/></td>
  </tr> 
  <tr>
  	<td> 
  		Title: </td>
  	<td> 
  		<input id="txtTitle"type="text"/></td> 
  </tr> 
  <tr> 
  	<td> 
  		Result: </td>
  	<td> 
  		<input id="txtResult"type="text"/></td> 
  </tr> 
  <tr> 
  	<td> 
  		&nbsp;</td> 
  	<td> 
  		<input id="btnTune"type="button"value="Tune"/></td> 
  </tr> 
</table>

4. Coding

<scripttype="text/javascript"language="javascript">
  • Khai báo function tên là Tune có 2 đối số là song và title
function  Tune(song, artist) {
  • Thuộc tính thuộc tính đối tượng title this.title là song
this.title  = song;
  • Khai báo thêm thuộc artist
this.artist  = artist;
  • Kết quả trả về là sự kết hợp 2 chuỗi title và artist
returnthis.title  + "-" + this.artist;
  }
function  reTune() {
  • Lấy giá trị từ textbox nhập vào Song
var  song = document.getElementById('txtSong').value;
  • Lấy giá trị textbox nhập vào từ Title
var  title = document.getElementById('txtTitle').value;
  • Khai báo biên re có kết quả trả về cho texbox result
var  re = Tune(song, title);
document.getElementById('txtResult').value = re;
}
</script>
  • Gọi hàm
<input id="btnTune"type="button"value="Tune"onclick="reTune()"/>

5. Kết quả

huong doi tuong trong js.jpg

GV Hồ Đức Duy

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu