Chúng ta cũng nên phân tích: Các ưu điểm của CSS trong thiết kế web a. CSS giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web. Style trong phiên bản HTML 4.0 qui định cách thức thể hiện các thẻ. Style thường được lưu trong các file nằm ngoài trang web. Chúng giúp thay đổi cách thức định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS. b. CSS cho phép điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web với chỉ duy nhất một lần thay đổi tại một vị trí. c. Có thể định nghĩa nhiều style vào một thẻ HTML . CSS cho phép đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được qui định ở trong chỉ một thẻ HTML, được qui định trong một trang web hoặc ở trong một file CSS bên ngoài. d. Thứ tự áp dụng các định dạng Như trên đã nói, có thể sử dụng nhiều cách khác nhau để làm CSS. Điều gì sẽ xảy ra nếu áp dụng nhiều cách định dạng cho một thẻ HTML? Theo một cách chung nhất ra có thể nói các style sẽ được "xếp tầng" (cascade). Việc xếp tầng này tuân theo thứ tự ưu tiên giảm dần như sau: Inline Style (Style được qui định trong một thẻ HTML cụ thể) Internal Style (Style được qui định trong phần <HEAD> của một trang HTML) External Style (style được qui định trong file CSS ngoài) Browser Default (thiết lập mặc định của trình duyệt) Bài sau chúng ta sẽ đi vào: Cú pháp cơ bản của CSS. ngocha85(Updatesofts.com) Bài 9: Công nghệ trong AJAX - Javascript JavaScript là một ngôn ngữ lập trình đa năng, nó tương đối giống C. JavaScript được biết dưới dạng một ngôn ngữ có kiểu tự do, thông dịch, ngôn ngữ kịch bản đa năng. Kiểu tự do nghĩa là các biến không được khai báo cụ thể như string, integer, hay object, và các biến giống nhau có thể được gán bới các kiểu khác nhau. Ví dụ, đoạn mã sau là hợp lệ: PHP Code: var x=3.1415926; x='pi'; Biến x lúc đầu được định nghĩa là giá trị số và sau đó được gán lại bởi giá trị xâu kí tự. Thông dịch nghĩa là các mã nguồn không được biên dịch thành các đoạn mã nhị phân có thể thực thi được, và nó được thực thi trực tiếp, cụ thể là qua các trình duyệt. Khi triển khai một ứng dụng JavaScript, ta đặt mã nguồn trên web server, và mã nguồn này được truyền trực tiếp qua Internet tới web browser. Đa năng nghĩa là ngôn ngữ này thích hợp để lập trình theo hầu hết các thuật toán và các tác vụ. JavaScript cơ bản hỗ trợ các kiểu số - number, string, date và time, array, các biểu thức toán học được xử lí trong văn bản, và các hàm toán học như các hàm lượng giác và bộ tạo số ngẫu nhiên. Hoàn toàn có thể định nghĩa cấu trúc một đối tượng bằng JavaScript, điều này mang đến nguyên lý cơ bản cho lập trình và để viết lên nhưng đoạn mã phức tạp. Trong môi trường trình duyệt web, các chức năng cơ bản của trình duyệt, gồm CSS, DOM, và các đối tượng XMLHttpRequest, được coi là các phương tiện của JavaScript, cho phép các nhà phát triển điều khiển các trang ở các mức độ khác nhau. Trong chồng công nghệ (tức là các công nghệ sử dụng liệt kê từ trên xuống dưới ) của Ajax, JavaScript là chất kết dính các thành phần lại với nhau. Học Javascript tiếng việt: Code: http://crazivn.com/uds_JS.rar Học bằng tiếng Anh: Code: http://crazivn.com/Oreilly.Java.Script.And.DHTML.Cookbook.eBook-LiB.rar Hôm nay chủ nhật, các bạn nghiên cứu luôn. ngocha85(Updatesofts.com) Bài 3: Các công nghệ trong AJAX - CSS - Cú pháp & thuộc tính CSS Style. Cú pháp cơ bản của CSS Cú pháp của CSS gồm ba thành phấn: Thành phần lựa chọn (thường là một thẻ HTML) (Selector) Thuộc tính (Property) Giá trị (Value) Thể hiện của cú pháp CSS Code: Selector { Property1: Value1; Property2: Value2; } Selector có thể là các thẻ/nhóm thẻ HTML, các lớp khai báo, hay bằng định danh duy nhất của phần tử. Khi chèn các đoạn mã CSS vào trang web, trình duyệt sẽ hiển thị trang web theo cách CSS đã qui định cho nó, có ba cách để chèn CSS vào trang web. a. External Style Sheet (sử dụng file CSS được định nghĩa thành trong file riêng) Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ <LINK>. Thẻ <LINK> được đặt bên trong thẻ <HEAD>. Code: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> b. Internal Style Sheet (định nghĩa các style sheet ngay trong trang web) Trong trường hợp mỗi trang web của sử dụng các định dạng khác nhau, dùng Internal Style Sheet. Để định nghĩa Internal Style Sheet, sử dụng thẻ <STYLE> đặt bên trong thẻ <HEAD>. Code: <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> c. Internal Style Sheet (style được qui định ngay trong mỗi thẻ HTML) Đây là phương pháp kém hiệu quả nhất, không nên sử dụng phương pháp này vì đã làm mất các ưu điểm của CSS. Code: <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> Các thuộc tính của CSS Style Mỗi phần tử trong trang HTML có thể được qui định theo nhiều kiểu. Một phần text của một phần tử có thể được quy định theo các thuộc tính color, font size, độ đậm của phông, và kiểu chữ sử dụng. Có rất nhiều tùy chọn được áp dụng cho thuộc tính trên. Ví dụ để qui định cho một paragraph: Code: .robotic{ font-size: 14pt; font-family: courier new, courier, monospace; font-weight: bold; color: gray; } ngocha85(Updatesofts.com) Bài 4: Các công nghệ trong AJAX - DOM - Document Object Model. Document Object Model (DOM) giúp phân tích một tài liệu (một trang web chẳng hạn) phục vụ cho cơ chế của JavaScript. Sử dụng DOM, cấu trúc của tài liệu có thể được phân rã theo cấu trúc cây và thao tác theo các nút. Đây là một khả năng đặc biệt hữu ích để viết một ứng dụng Ajax. Trong các ứng dụng web truyền thống, trình duyệt phải tái nạp các trang HTML theo một luồng từ server. Trong một ứng dụng AJAX, sự thay đổi giao diện người dùng chủ yếu được tạo ra bởi DOM. Các thẻ HTML trong trang web được tổ chức theo cấu trúc cây. Gốc của cây là thẻ <HTML>, để biểu diễn tài liệu. Trong đó thẻ <BODY> biểu diễn phần thân của tài liệu, là gốc của phần hiển thị của tài liệu. Trong thân của tài liệu, có các bảng, paragraph, list, và các loại thẻ khác với các thẻ ở mức thấp hơn nữa. Một biểu diễn theo mô hình DOM của một trang web là một cấu trúc cây, có các phần tử là các nút, rồi nó chứa các nút con trong nó, và cứ tiếp tục một cách đệ qui như thế. JavaScript làm việc với nút gốc của trang web hiện thời qua một biến toàn cục gọi là document, biến này là điểm bắt đầu của mọi thao tác trên DOM. Phần tử DOM đã được đặc tả bởi W3C. Mỗi phần tử DOM có một phần tử cha duy nhất, có hoặc không có các phần tử con, và có một số bất kỳ các thuộc tính, chúng được lưu trữ trong mảng móc nối. Mối quan hệ giữa các phần tử DOM có thể được đối chiếu bởi danh sách các thành phần HTML. Mối quan hệ này là hai chiều. Sửa đổi mô hình DOM sẽ thay đổi cấu trúc HTML và dẫn đến thay đổi cách biểu diễn một trang web. ngocha85(Updatesofts.com) Bài 4 (tiếp): Các công nghệ trong AJAX - DOM - Làm việc với DOM bằng JavaScript. Làm việc với DOM bằng JavaScript. Trong một ứng dụng bất kỳ, nếu muốn thay đổi giao diện người dùng khi họ đang làm việc, thì phải cung cấp các phản hồi lại khi người dùng gửi các yêu cầu. Để hiểu rõ cơ chế làm việc với DOM bằng JavaScript, chúng ta cùng xét một ví dụ về một trang HTML đơn giản. Quote: