Khóa học lập trình web cơ bản tại Thanh Xuân

Khóa học lập trình web cơ bản tại Thanh Xuân. 
Nếu bạn đam mê, bạn muốn tự mình thiết kế và quản lý website của doanh nghiệp mình. Bạn đang ở khu vực Lê Trọng Tấn, Giải Phóng, Thanh Xuân, Cự Lộc, Khương Hạ, Khương Trung, Lê Văn Lương, Lương Thế Vinh, Kim Giang, Nhân Chính, Phương Liệt, Thượng Đình có nhu cầu học thiết kế web hãy liên hệ chia sẻ với chúng tôi về những dự định trong tương lại để có những lời khuyên hợp lý nhất.

Lợi ích của việc học thiết kế web:

Với bạn đi học ở trung tâm nào, trường lớp nào rồi cũng phải đi thực tập, đi làm để lấy kinh nghiệm.Vậy chẳng có lý do gì không học tại Việt Tâm Đức. Học thiết kế, làm web tại công ty chuyên về lĩnh vực lập trình thiết kế web. Chúng tôi dạy bạn từ những gì thực tế kinh nghiệm làm hàng ngày chứ không phải nghiệp vụ sư phạm. Mô hình học tập giống như bạn đang đi làm tại một công ty, bạn sẽ được trang bị đầy đủ kiến thức - kỹ năng - kinh nghiệm để làm được việc.

Với phương trâm đào tạo:

   - Áp dụng 1 phương pháp duy nhất: Học để hiểu chứ không nhồi nhét để nhớ. Có như thế bạn mới nắm chắc được

   - Làm việc  độc lập, theo nhóm,kết nối đến server

   - Cách học hoàn toàn khác so với trường lớp hình thức học như nhân viên chính thức đang làm việc tại công ty chứ không phải thầy viết trò nghe bởi lập trình phải ngồi code thực tế.

    Bạn sẽ học được gì sau khóa học này:

    - Tự  làm  được  web  theo  ý tưởng, làm ra được sản phẩm thực tế

    -  Quản trị được nội dung

    -  Năm  được  chiến lược  seo  để xây dựng  chiến  lược tổng  thể cho website nếu  như  bạn có ý định kinh doanh

   - Nếu bạn làm tốt công ty sẽ giao cho bạn các dự án của khách hàng để làm

   - Bạn sẽ có thêm kinh nghiệm kỹ năng làm việc  để có thể tự tin hơn khi đi xin việc

Nếu bạn chưa tự tin về vốn khả năng lập trình của mình có thể tham khảo khóa học lập trình web tại xưởng web của chúng tôi để có những kiến thức thực tế hợp lý và gần gũi nhất khi chúng ta làm việc thực sự tại các doanh nghiệp.

>>>Xem thêm:

học lập trình web php

tài liệu lập trình web

học lập trình web tại hà nội

Xem thêm ...

Đăng bởi: Unknown 09:49 0

HỌC HTML TỪ A->Z : BÀI 13

Tạo Form trên HTML

1. Form là gì? Để mở rộng khả năng phục vụ người sử dụng, dịch vụ Web cần phải sử dụng các ứng dụng  khác bên ngoài. Ví dụ người sử dụng yêu cầu tìm kiếm trong cơ sở dữ liệu, lấy các thông  tin tức thời, luôn được cập nhật.... Để làm được điều này dịch vụ Web phải chuyển yêu  cầu của người sử dụng đến một ứng dụng khác. Ứng dụng này sẽ thực hiện yêu cầu và  trả lại kết quả cho Web server để chuyển tiếp đến người sử dụng. Form là một cách để  chuyển dữ liệu từ người sử dụng đến cho Web Server xử lý. Form HTML là một phần của tài liệu, nó chứa các phần tử đặc biệt gọi là các điều khiển.  Các điều khiển được sử dụng để nhập thông tin từ người dùng và cung cấp một số tương  tác. Dữ liệu do người dùng nhập vào có thể được xác nhận hợp lệ nhờ các kịch bản phía  máy khách (client-side scripts) và được chuyển đến máy chủ để xử lý thêm. Khi tạo form bạn cũng cần phải chỉ rõ cho máy chủ dịch vụ biết cách xử lý form. Có nhiều  loại chương trình ứng dụng khác nhau trong máy chủ dịch vụ để làm việc này: các  chương trình CGI, ISAPI, các script ASP, JSP, Java Bean, Servlet... Tạo form là khâu đầu tiên trong việc xây dựng giao tiếp giữa người sử dụng với các ứng dụn g Internet / Intranet. Việc sử dụng form trên World Wide Web khá nhiều và liên tục tăng lên. Sau đây là một số  cách sử dụng thông thường: - Thu thập tên, địa chỉ, số điện thoại, địa chỉ e-mail và các thông tin khác để người dùng  đăng ký cho một dịch vụ hay một sự kiện nào đó. - Thu thập thông tin để đăng ký mua một mặt hàng nào đó, ví dụ, khi muốn mua một cuốn  sách trên Internet, ta phải điền tên, địa chỉ gửi thư, phương thức thanh toán và các thông tin  liên quan khác. - Thu thập thông tin phản hồi về một Website. Hầu hết các site cung cấp một dịch vụ nào  đó đều khuyến khích khách hàng gửi thông tin phản hồi. Ngoài việc xây dựng mối quan hệ  với khách hàng, đây còn là một nguồn thông tin để trao đổi hoặc cải tiến dịch vụ. - Cung cấp công cụ tìm kiếm cho Website. Các site cung cấp nhiều thông tin khác nhau  thường cung cấp cho người dùng hộp tìm kiếm để cho phép họ tìm kiếm thông tin nhanh hơn. 2. Thẻ tạo Form HTML Thẻ <FORM> được dùng để tạo một vùng trên trang như một biểu mẫu. Nó chỉ ra cách bố trí  của biểu mẫu. Trước khi đặt bất kỳ thành phần điều khiển nào trong Form, ta phải tạo Form theo cú pháp  sau: <FORM name=”myForm”> <!-- Thành phần điều khiển đặt ở đây --> </FORM> Thẻ <FORM> bao gồm các thuộc tính sau: THUỘC TÍNH MÔ TẢ Name Đặt tên cho Form Action Thuộc tính này xác định trang Script sẽ xử lý những dữ liệu nhập vào  từ  Form Cú pháp là: Action=”URL” Method Thuộc tính này xác định phương thức dữ liệu được gửi đến máy chủ. Nó cũng xác định giao thức được sử dụng khi máy khách gửi dữ liệu lên cho máy chủ. Nếu giá trị là GET thì trình duyệt sẽ tạo một câu hỏi có chứa địa chỉ URL của trang, một dấu chấm hỏi và các giá trị do biểu mẫu tạo ra. Trình duyệt sẽ trả lại câu hỏi cho kịch bản được xác định trong URL để xử lý. Nếu giá trị là POST, thì dữ liệu trên biểu mẫu được gửi đến kịch bản xử lý như một khối dữ liệu. Cú pháp là: Method=(GET | POST 3. Các thành phần trong Form 3.1. Thẻ <INPUT> Thẻ <INPUT> xác định loại và diện mạo của điều khiển sẽ hiển thị trên biểu mẫu.  Các thuộc tính của thẻ này là: THUỘC TÍNH MÔ TẢ Type Thuộc tính này xác định loại điều khiển. Có thể nhận giá trị sau: TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, HIDDEN và BUTTON. Mặc định là TEXT Name Thuộc tính này chỉ tên của điều khiển. Ví dụ nếu có nhiều hộp văn bản (text box) trên một biểu mẫu thì bạn nên sử dụng tên để xác định chúng (text1, text2,…). Phạm vi hoặt động của thuộc tính name nằm trong thẻ <FORM> Value Đây là thuộc tính tùy chọn, nó xác định giá trị khởi tạo của điều khiển Size Thuộc tính này xác định độ rộng ban đầu của điều khiển Maxlength Thuộc tính này được sử dụng để xác định số ký tự lớn nhất có thể nhập vào phần tử TEXT hoặc PASSWORD. Mặc định là không giới hạn Checked Đây là thuộc tính logic để xác định nút có được chọn hay không. Thuộc tính này được sử dụng khi kiểu nhập là RADIO hay CHECKBOX Src Src=”URL”. Thuộc tính này được dùng khi ta muốn sử dụng một ảnh trong kiểu INPUT. Nó xác định vị trí của ảnh Loại này tạo một điều khiển nhập văn bản có một dòng. Cú pháp: <INPUT type=”TEXT” name=”tentextbox”> b) Hộp văn bản dạng Password Điều khiển này giống như điều khiển hộp văn bản nhưng nó không hiển thị ký tự người dùng  nhập vào, thay vào đó nó chỉ hiển thị ký tự dấu “*”. Điều khiển này thường dùng cho mục  đích nhận mật khẩu người dùng. Cú pháp: <INPUT type=”PASSWORD” name=”txtpass”> Lưu ý: Việc hiển thị kí tự dấu * để thay thế chỉ có tác dụng che giấu với người nhìn tại máy  cục bộ. Password vẫn được gửi vào mạng dưới dạng rõ, không mã hoá, có thể bị xem trộm.  Nhiệm vụ mã là của giao thức mạng. c) Checkbox (hộp kiểm) Checkbox là một nút hình vuông được dùng để thể hiện một danh sách cho phép chọn một  hoặc nhiều tùy chọn. Cú pháp: <INPUT type=”CHECKBOX” name=”chk”> d) Radio Đây là nút hình tròn, khi được chọn sẽ có dấu chấm tròn màu đen trong vòng tròn của  nút. Nút Radio được dùng để hiển thị danh sách chọn lựa.Trong cùng một nhóm sẽ chỉ  có một nút được chọn và tất cả các nút sẽ có cùng tên. Khi một nút được chọn thì nút  được chọn trước đó sẽ tự động được xóa. Cú pháp: <INPUT type=”RADIO” name=”rd”> e) Nút bấm (Button) Được dùng để tính toán hay sử dụng một số phương thức của Client Script. Cú pháp: <INPUT type=”BUTTON” name=”btn”> f) Nút Submit Dùng để chuyển dữ liệu (giá trị của các thành phần điều khiển trên Form) về Web Server. Cú pháp: <INPUT type=”SUBMIT” name=”sbt” value=”nhãn hiển thị trên nút”> g) Nút Reset Được dùng để thiết lập giá trị của các điều khiển về giá trị ban đầu. Cú pháp: <INPUT type=”RESET” name=”rst” value=”nhãn hiển thị trên nút”> 5.3.2. Vùng văn bản (TextArea) Thẻ <TextArea> tạo ra một điều khiển nhập văn bản trên nhiều dòng so với hộp văn bản  nhập một dòng. Ta phải xác định kích thước của textarea, xác định số dòng,  số cột trong textarea và thẻ này phải kết thúc với thẻ đóng </TextArea>. Cú pháp: <TextArea name=”txta”> Giá trị khởi tạo cho vùng văn bản </TextArea> Để giới hạn chiều cao và chiều rộng trình bày trên trang Web của thẻ này, ta sử dụng  các thuộc tính sau: cols=”số ký tự” và rows=”số hàng”. Ví dụ 5.4: Tạo một hộp văn bản có tên là “ghichu”, số dòng hiển thị là 3 và số cột hiển thị  là 20 như sau: Đoạn mã: <TextArea name=”ghichu” rows=”3” cols=”20”> </TextArea> 5.3.3. Thành phần lựa chọn (Select) Phần tử Select được sử dụng để hiển thị một danh sách các lựa chọn cho người dùng. Mỗi  lựa chọn được biểu diễn bởi phần tử Option. Một phần tử Select phải chứa ít nhất một phần  tử Option. Mỗi lựa chọn trong hộp chọn được lấy giá trị thông qua mô tả văn bản của nó xem có được  chọn hay không. Cú pháp: <SELECT name=”slt” size=”số tùy chọn trong danh sách” multiple>      <OPTION> Tên sẽ xuất hiện trong danh sách chọn </option>      …... </SELECT> Sử dụng thuộc tính multiple nếu muốn cho người dùng chọn nhiều hơn một tùy chọn. Nếu muốn phần tử được chọn mặc định trong danh sách, ta khai báo thêm thuộc tính selected  trong thẻ <OPTION>. a) Trường hợp danh sách này là một combo box ta khai báo như sau: <SELECT name=”slt” size=”1” >      <OPTION> Tên sẽ xuất hiện trong danh sách chọn </option>      …... </SELECT> b) Trường hợp danh sách này là một listbox ta khai báo như sau: <SELECT name=”slt” size=”một số >1” >      <OPTION> Tên sẽ xuất hiện trong danh sách chọn </option>      …... </SELECT>

Xem thêm ...

Đăng bởi: Unknown 23:22 0

HỌC HTML TỪ A->Z : BÀI 12

Các thẻ Meta trong HTML

Thẻ <meta> là một thành phần quan trọng trong file HTML, nó chứa các thông tin về file HTML đó như tên tác giả, các từ khoá, các thông tin mô tả site đó,… Và có thể có 1 số thông tin điều khiển trình duyệt, chỉ định cho các máy tìm kiếm, …

Thẻ Meta có có cấu trúc như sau:

<META NAME=”"  HTTP-EQUIV=”" CONTENT=”" SCHEME=”" >

Trong đó NAME là tên của thẻ Meta, còn CONTENT là giá trị tương ứng với NAME đó, nội dung trong CONTENT chỉ có thể là Text chứ ko thể có các thẻ HTML trong đó.
SCHEME là định dạng của giá trị, ví dụ SCHEME=”Day-Month-Year” là định dạng ngày tháng năm
Không có chuẩn cho những thuộc tính của trong thẻ meta vì vậy bạn có thể tự định nghĩa thoải mái những metadata mà bạn thích. Ví dụ bạn có thể định nghĩa thông tin tác giả:
<META NAME=author CONTENT="Tac gia">
Một vài những bộ máy tìm kiếm như Google, sử dụng các meta keywords, description để  dựa vào đó để tìm kiếm thông tin

<meta name=”description” content=”VietNam PHP Blog, Việt Nam PHP Blog” />
<meta name=”keywords” content=”php, phpvn, phpvietnam, php vietnam, php vn, phpvn.info, vietphp, phpviet” />

Để tránh bị cắt cụt bởi máy tìm kiếm thì thông tin mô tả (description) nên nhỏ hơn 200 kí tự, từ khoá (keyword) được viết  cách nhau bởi dấu phẩy, và không phân biệt hoa thường, nếu có quá 2 từ khoá trong thẻ meta thì 1 vài máy tìm kiếm sẽ không lưu trang của bạn lại. Các bộ máy tìm kiếm hầu như chỉ làm việc với 1000 kí tự đầu tiên trong thẻ meta keyword.
Một vài bộ máy tìm kiếm còn sử dụng thẻ meta robots để xem trang mà nó vào có được phép lưu lại hoặc đi tiếp các link khác trong site hay không.
Giá trị của thẻ robots như sau:
- index: bộ máy tìm kiếm sẽ lưu trang này lại để giành cho việc tìm kiếm
- noindex: bộ máy tìm kiêm sẽ không nên lưu trang này
- follow: bộ máy tìm kiếm sẽ đi tiếp các Link trong trang này
- nofollow: bộ máy tìm kiếm sẽ không đi tiếp các Link trong trang này
- all tức là bao gồm index, follow
- none tức là noindex, nofollow
Ví dụ như sau: bạn muốn các bộ máy tìm kiếm ko lưu trang của bạn nhưng vẫn đi tiếp các link trong trang như sau:

<META NAME=robots CONTENT=”noindex,follow”>
Thuộc tính HTTP-EQUIV dùng để thay thế thuộc tính NAME trong 1 số trường hợp ví dụ:
<META HTTP-EQUIV=Expires CONTENT=”Thu, 29 Nov 2008 16:18:42 GMT”>
Thiết lập thời gian tồn tại của trang đó tới thời điểm nào
<META HTTP-EQUIV=”Content-Script-Type” CONTENT=”text/javascript”>
<META HTTP-EQUIV=”Content-Style-Type” CONTENT=”text/css”>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=Shift_JIS”>
<META HTTP-EQUIV=Refresh CONTENT=”10; URL=http://www.htmlhelp.com/”>
Tự động refesh trang đó sau 10s, ko phải tất cả các trình duyệt đều hỗ trợ thẻ meta này.

Nhiều bộ máy tìm kiếm theo từ khoá chỉ sử dụng các thông tin trong thẻ meta để tìm kiếm dựa trên những từ khoá đã được viết sẵn trong thẻ keyword mà không tìm kiếm trong toàn từ ngữ trong site và kém hiệu quả hơn những bộ máy tìm kiếm toàn bộ những từ khoá trong site. Những bộ máy tìm kiếm toàn bộ site sẽ sử dụng các thông tin metadata để đánh thứ hạng tìm kiếm cho site

Xem thêm ...

Đăng bởi: Unknown 23:14 0

HỌC HTML TỪ A->Z : BÀI 11

Định nghĩa danh sách trong HTML/XHTML có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách trong HTML/XHTML.

Danh sách có thứ tự

Để thể hiện danh sách có thứ tự ta sử dụng cặp thẻ: <ol></ol> và <li></li>, trong đó:

• <ol></ol> là viết tắt của chữ "ordered list" có nghĩa là danh sách có thứ tự.
• <li></li> viết tắt của chữ "list item" có nghĩa là mục của danh sách.

Danh sách sau đây gọi là danh sách có thứ tự:

1. 1. Cá lóc kho tiêu
2. 2. Cá rô kho tộ
3. 3. Cá thu chiên xoài bằm
4. 4. Cá điêu hồng nấu ngót

Hoặc:

1. a) Học HTML
2. b) Học XHTML
3. c) Học HTML5
4. d) Học CSS2
5. e) Học CSS3

HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<ol>
<li>Cá lóc kho tiêu</li>
<li>Cá rô kho tộ</li>
<li>Cá thu chiên xoài bằm</li>
<li>Cá điêu hồng nấu ngót</li>
</ol>
</body>
</html>

Hiển thị trình duyệt:

1. 1. Cá lóc kho tiêu
2. 2. Cá rô kho tộ
3. 3. Cá thu chiên xoài bằm
4. 4. Cá điêu hồng nấu ngót

Số thứ tự của danh sách trình duyệt sẽ tự thêm vào.

Xem thêm ví dụ

Danh sách không có thứ tự

Để thể hiện danh sách không có thứ tự ta sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:

• <ul></ul> là viết tắt của chữ: unordered list có nghĩa là danh sách không có thứ tự
• <li></li> viết tắt của chữ: list item có nghĩa là mục của danh sách.

Danh sách sau đây gọi là danh sách không có thứ tự:

• Trang chủ
• Giới thiệu
• Sản phẩm
• Dịch vụ
• Liên hệ

Hoặc:

• Học HTML
• Học XHTML
• Học HTML5
• Học CSS2
• Học CSS3

HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<ul>
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Sản phẩm</li>
<li>Dịch vụ</li>
<li>Liên hệ</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

• Trang chủ
• Giới thiệu
• Sản phẩm
• Dịch vụ
• Liên hệ

Xem thêm ví dụ

Cấu trúc thẻ danh sách có thứ tự và không có thứ tự

Cấu trúc thể hiện thẻ danh sách có thứ tự và không có thứ tự là tương tự nhau.

Cấu trúc phải theo các nguyên tắc sau đây:

• Lúc nào cũng phải tồn tại 1 cặp thẻ, không thể thiếu một trong 2:
  • Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: <ol></ol>, <li></li>.
  • Đối với danh sách không có thứ tự, phải tồn tại cặp thẻ: <ul></ul>, <li></li>.
• Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất <li></li>.
• Bên trong thẻ <li></li> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được chứa một số thẻ sau đây: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>. Và một số thẻ không nênchứa như: <style></style>, <script></script>.

<ol>
<li></li>
<li></li>
</ol>

<ul>
<li></li>
<li></li>
</ul>

• Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp thẻ <li></li>, không được xen kẻ bất kỳ thẻ nào khác, những cấu trúc như bên dưới đây là sai, không đúng chuẩn W3C:

<ol>
<h2></h2>
<li></li>
<li></li>
</ol>

<ul>
<li></li>
<p></p>
<li></li>
</ul>

<ul>
<li></li>
<div>
<li></li>
</div>
</ul>

Một số cấu trúc của danh sách có thứ tự và không có thứ tự

Cấu trúc <ol></ol> lồng bên trong <ol></ol>

HTML viết

<ol>
<li><p>Cơm trưa</p>
<ol>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ol>
</li>
<li><p>Tráng miệng trái cây</p>
<ol>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ol>
</li>
</ol>

Hiển thị trình duyệt:

1. Cơm trưa
   1. Cơm chiên hải sản
   2. Cơm sườn non nấu cam
   3. Cơm canh chua cá lóc
2. Tráng miệng trái cây
   1. Nho tươi
   2. Chuối
   3. Mận

Cấu trúc <ul></ul> lồng bên trong <ul></ul>

HTML viết

<ul>
<li><p>Cơm trưa</p>
<ul>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ul>
</li>
<li><p>Tráng miệng trái cây</p>
<ul>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ul>
</li>
</ul>

Hiển thị trình duyệt:

• Cơm trưa
  • Cơm chiên hải sản
  • Cơm sườn non nấu cam
  • Cơm canh chua cá lóc
• Tráng miệng trái cây
  • Nho tươi
  • Chuối
  • Mận

Cấu trúc <ul></ul> lồng bên trong <ol></ol>

HTML viết

<ol>
<li><p>Cơm trưa</p>
<ul>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ul>
</li>
<li><p>Tráng miệng trái cây</p>
<ul>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ul>
</li>
</ol>

Hiển thị trình duyệt:

1. Cơm trưa
   • Cơm chiên hải sản
   • Cơm sườn non nấu cam
   • Cơm canh chua cá lóc
2. Tráng miệng trái cây
   • Nho tươi
   • Chuối
   • Mận

Vấn đề đặt ra là làm sao ta có thể thay đổi dạng của các số, VD đổi thứ tự 1,2,3,4,... sang I,II,III,IV,... hay đổi hình dạng tròn thành hình vuông,... những vấn đề này chúng ta có thể tham khảo thêm bên phần list-sytle của CSS.

Xem thêm ...

Đăng bởi: Unknown 23:08 0

HỌC HTML TỪ A->Z : BÀI 10

Ứng dụng Java Script để xử lý tài liệu HTML – Tự học lập trình Java Script

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).

a. Giới thiệu mô hình đối tượng tài liệu HTML DOM

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:

b. 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ụ:
Code:

?

1	<H1 id=”thu_h1”>Chào mừng bạn đến với PHPVN</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:

Code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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ả:

Code:

?

1 2 3 4 5

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

Xem thêm ...

Đăng bởi: Unknown 16:55 0