MỤC LỤC
Phần 1: TÌM HIỂU VẤN ĐỀ
Chương 1: TỔNG QUAN .1
1. Tiền đềxuất hiện công nghệAjax 1
1.1. Nguyên nhân xuất hiện công nghệAjax .1
1.2. Công nghê web thểhệthứhai – Web 2.0 .4
1.3. Các thếmạnh của Ajax .9
2. Nhiệm vụ đồán . . .12
Chương 2: MÔ HÌNH MVC . .14
1. Giới thiệu mô hình MVC .14
2. View trong ứng dụng Ajax . .15
3. Controller trong ứng dụng Ajax . .17
4. Model trong ứng dụng Ajax . .19
5. Ví dụvềmô hình MVC trên nền PHP . .22
6. Mô hình MVC cho ứng dụng từ điển . . . .30
Chương 3: CÁC CÔNG NGHỆTRONG AJAX . . 32
1. Cascading Style Sheet . . . .32
2. JavaScript . .35
3. DOM . 39
4. Đối tượng XMLHttpRequest . . .43
4.1. Giới thiệu . .43
4.2. Phương thức, thuộc tính . 45
4.3. Sựtương tác . .46
4.4. Get và Post . 49
4.5. Gởi Request . .50
5. Streaming . .53
5.1. Giới thiệu . .53
5.2. Các phương thức streaming . .54
Phần 2: THIẾT KẾVÀ CÀI ĐẶT
Chương 4: THIẾT KẾ 56
1. Sơ đồ ứng dụng . .56
2. Cơsởdữliệu . .56
3. Cài đặt server .57
Chương 5: CÁC MODULE, LỚP CHÍNH CỦA ỨNG DỤNG . .60
1. Hệthống tập tin . 60
2. Các module của ứng dụng . 60
3. Các lớp đối tượng chính trong từng module . 60
Phần 3: KẾT QUẢ, ĐÁNH GIÁ VÀ HƯỚNG PHÁT TRIỂN
1. Kết quảthửnghiệm . . .61
2. Hoạt động của ứng dụng . .61
3. Kết luận . . . .69
4. Hướng phát triển . . 70
80 trang |
Chia sẻ: netpro | Lượt xem: 2809 | Lượt tải: 1
Bạn đang xem trước 20 trang tài liệu Đồ án Xây dựng từ điển Multimedia dùng công nghệ Ajax trên nền PHP, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
thành phần lớp chính sẽ thực hiện yêu cầu của user. Đây chính là chức năng điều khiển
application flow của Controller. Vì là nơi đón nhận user input cho nên thường thì các
thành phần xử lý form (ví dụ ActionForm trong Struts) sẽ thuộc về Controller.
Controller cũng sẽ có chức năng validate form đơn giản nhằm thực hiện chức năng
điều khiển luồng của mình.
Một khi xuất hiện các Event phức tạp, như là một Observer, Controller cần bổ sung
thêm các lớp mới vào để xử lý chúng theo các quy trình độc lập, giúp phân tán bớt
code tập trung vào lớp Action. Do là thành phần điều phối, Controller không nhất thiết
phải tương tác với Model rồi mới tương tác với View. Bất cứ lỗi ngoại lệ nào xảy ra
hay một trạng thái request không mong muốn xuất hiện thì Controller có thể phản ứng
bằng cách chọn View trực tiếp.
26
Khi giao tiếp với Model, Controller sẽ tiến hành 2 cách:
+ extract dữ liệu hay trạng thái.
+ update dữ liệu.
Ví dụ:
// Trong lớp Action của Controller
$productId = $this->request->get(’product_id’);
$electronicWarehouse = new ElectronicProductWarehouse();
$availableProducts =
$electronicWarehouse->findAvailableProductsById($productId);
Sau khi có được dữ liệu, theo cách hành xử thông thường, View thích hợp sẽ được lựa
chọn. Controller sẽ chuyển tiếp dữ liệu vào View để nó xử lý
Ví dụ:
// Trong lớp Action của Controller
// Load the PHP Savant2 class file and create an view instance.
require_once ‘Savant2.php’;
$view = new Savant2();
if (true === $availableProducts->empty()) {
// Assign values to the Savant instance.
$view->assign(’products’, $availableProducts);
// Display a template using the assigned values.
$view->display(’products.tpl.php’);
}
else {
// Display a template using the assigned values.
$view->display(’products_unavailable.tpl.php’);
}
CakePHP, Zend Framework, Symfony, Ruby on Rails, Struts hay Spring MVC lựa
chọn cách làm này. Bằng việc xóa khỏi bộ não View kiến thức về Model, Controller
có thể thay thế nhiều Model, các API trên Model nhưng không cần phải nhắc View về
điều đó. Điều này là đặc biệt quan trọng khi mà kiến trúc ứng dụng đòi hỏi phải phù
27
hợp với việc các lớp Model cần thay đổi một cách linh hoạt (ví dụ như có sự can thiệp
của Dependency Injection). Nhưng có vẻ như đây là nhiệm vụ của tầng Integration.
Có một số người khi thiết kế ứng dụng theo MVC đã cố gắng dồn hết chức năng điều
khiển luồng vào lớp Action cho nên dẫn đến hiện tượng Fat Controller. Ví dụ như
những người code Rails sau khi đã định nghĩa Model dựa trên ActiveRecords để làm
các công việc như extract data, update data và validate dữ liệu thì họ bỏ hết trách
nhiệm xử lý business logic sang cho Controller. Thực tế là:
+ Fat Controller hay Thin Controller là các từ gọi nôm na của một thiết kế tồi. Từ Fat
có lẽ đến từ thế giới Ruby on Rails khi mà nhiều người ở đó quá cứng nhắc trong việc
tuân thủ theo mô hình Rails mà không biết rằng bản thân Controller cũng có thể có các
sub layer giúp giải phóng các tác vụ dạng thủ tục thành các thành phần nhỏ riêng biệt,
nhưng vẫn thuộc về Controller. Hoặc theo 1 hướng khác, Model tỏ ra vô tránh nhiệm
với dữ liệu trả về khiến cho công việc điều khối của Controller thêm nặng nề.
+ Theo code mẫu trên thi View có vẻ như hơi ít trách nhiệm. Một phần trách nhiệm
xác định cấu trúc để hiển thị đã được đẩy sang cho Controller. Đây cũng là vấn đề làm
cho Controller trở nên nặng nề hơn.
Do tính chất công việc của Controller là khá phức tạp và đa dạng cho nên việc Event
Handler Controller có thể tiếp tục tách ra nhỏ hơn cũng là điều cần tính đến thay vì
thực hiện việc xử lý tất cả các signal, user input … trên cùng một lớp.
4. MODEL TRONG ỨNG DỤNG AJAX
Model là các lớp cung cấp dữ liệu, dịch vụ liên quan đến dữ liệu và business logic.
Chúng có thể là:
+ Đánh giá tính hợp lệ của dữ liệu. Ví dụ kiểm tra user input có đúng với rule của hệ
thống không (ví dụ user credentials…)
+ Chuyển đổi dữ liệu: Ví dụ convert định dạng file, chuyển đổi tỉ giá, language
translation ….
+ Đưa ra quyết định về nghiệp vụ: Ví dụ đưa ra các dữ liệu, lời khuyên tư vấn đầu tư
dựa trên user input và các dữ liệu đang có.
28
+ Thực hiện việc xử lý dữ liệu theo một quy trình (workflows): Ví dụ Controller tiếp
nhận yêu cầu xuất kho 300 chiếc ô tô từ kho A từ user. Sau khi kiểm tra tính chính quy
của việc gửi yêu cầu, Controller chuyển yêu cầu này thành lợi gọi hệ thống để thông
báo cho Model. Tuy nhiên việc xuất kho 300 chiếc ô tô cần phải được thực hiện theo 1
workflow mà chỉ có Model biết. Tạm thời bỏ qua sự xuất hiện của một rule engine,
chúng ta có thể thấy Model thực hiện một số đoạn code có tính thủ tục như: 1) Thông
báo với module sales về việc bán được 300 chiếc ô tô và yêu cầu trả lời. 3) Model
sales ghi nhận và kiểm tra chính sách hoa hồng và thời điểm hiện tại và chuyển tiếp
yêu cầu đến module Inventory và module Accounting 4) module Accounting thực hiện
việc tính toán, báo giá thanh toán theo USD và VND với tỉ giá ở thời điểm hiện tại
cũng như không quên trừ triết khấu và hoa hồng và gửi kèm thông báo thanh toán theo
theo yêu cầu xuất kho 5) module Inventory kiểm tra yêu cầu xuất kho từ Sales và
thông báo thanh toán từ Accounting để xuất kho, và ghi nhận giao dịch bằng cách ghi
lại mã số yêu cầu của Sales và mã số thanh toán của Accounting. module này tiếp tục
kiểm tra số ô tô có trong kho theo chất lượng và đặc tả yêu cầu rồi trả lời: có được hay
không 6) Nếu được, nó sẽ thành lập thông báo xuất kho ….. Cuối cùng Model trả lại
trạng thái xử lý và dữ liệu nếu có.
Do có 2 vai trò tương đối tách biệt cho nên một Model thường được tách thành các lớp
có các domain xử lý khác biệt.
+ Business logic thường là xử lý rule hay policy của nghiệp vụ cũng như business
workflows. Tầng này có sự góp mặt của các rule engine và các integration engine
(trong đó có Spring bên Java và Flow3, Scarlet, Seasar, PHPCrafty bên PHP).
+ Domain data: Cung cấp/lưu trữ dữ liệu và việc chuyển đổi dữ liệu thành các dạng
khác nhau theo yêu cầu. Các tầng như Persistent Layer nằm ở đây. Vì thế chúng ta sẽ
gặp các lớp của PDO (PHP Data Object), Pear MDB2, PHP Doctrine, JDBC, JTA,
JPA, Hibernate, JDO … và cả các lớp thực hiện DAO.
Trong các tình huống đơn giản, Model chỉ làm vài thao tác đơn giản như fetch dữ liệu
từ database. Trong các tình huống phức tạp, việc xử lý có thể là tổ hợp của hàng trăm
lớp diễn ra trên 1 hoặc vài server hoặc thậm chí dữ liệu hay quyết định được đưa ra từ
29
Model lại là tổng hợp kết quả từ 1 vài data center nằm rải rác trên vài lục địa. Do vậy
trong Model không chỉ có các thao tác trên database và có còn là file system, memory,
networking I/O …
Worlflow mà Model điều khiển hoàn toàn có tính nghiệp vụ đặc thù. Nó khác với
Application Flow vốn có tính hệ thống và thiên về technical analysis (phần cứng hay
phần mềm) của Controller. Applicaton flow được xử lý như thế nào chủ yếu là do
software architect xác định nhưng với workflows thì đó là do các business analyst xác
định do nó thiên về nghiệp vụ (gần với cuộc sống và cách tổ chức quy trình làm việc
của 1 tổ chức chứ không phải là quy trình kĩ thuật của thiết kế hướng đối tượng).
Model là Passive để hoạt động như là một Service Layer nhằm có thể re-use giữa các
Controller nhưng nó không phải là dead-end. Thay vào đó nó cần biết giao tiếp với
Controller như thế nào cho có hiệu quả. Sự hiệu quả này thể hiện ở 2 hướng:
+ Signal hay message
+ Data type
Khi Controller gọi Model thông qua API của Model, nó cần biết 1 số behavior chung
của Model (tức là common interface). Ví dụ:
+ Cách Model đó gửi signal về quá trình nó xử lý yêu cầu. Có hay không có
Exception, kiểu của Exception, Exception trong trường hợp nào. Những cái đó cần
được comment chi tiết.
+ Kiểu trả lại cần nhất quán và well-defined
Cái mà Controller quan tâm đến output của Model chính là trạng thái (message : false,
true) hay dữ liệu. Vì Model thực hiện phần nghiệp vụ nên dữ liệu trả lại của nó cần
phải phản ánh tính nghiệp vụ. Thông thường một kiểu trả lại được coi là well-defined
nếu nó là một BO (Business Object) tức là một lớp getter/setter để nhận và xuất dữ
liệu. BO thường là có kiểu phản ánh bản chất dữ liệu mà nó có ví dụ như:
+ User
+ Product
+ Employee
30
Bằng cách trả lại các đối tượng được định nghĩa rõ ràng, Model trả tỏ ra có trách
nhiệm với Controller hay các thành phần gọi nó để giúp các thành phần này bớt
confused (giảm các đoạn mã if/else/switch/instanceof/try/catch) và tạo ra sức mạnh
của cái gọi là The Power Of Sameness. Tuy nhiên, việc BO có thể chỉ là một data
container thuần túy hay là một Domain Object thì còn đang gây tranh cãi vì
getter/setter thuần túy sẽ gây sự nghi ngờ về tính hợp lệ của encapsulation. Tuy nhiên
tôi vẫn có một quan điểm khác về kiểu của BO trong khi lập trình PHP.
Tương tự như trong trường hợp Controller lấy state từ Model, khi Controller cung cấp
thông số cho Model để Model trả lại state theo hướng mà Controller mong muốn từ
Controller cũng phải định nghĩa được 1 common interface.
5. VÍ DỤ VỀ MÔ HÌNH MVC TRÊN NỀN PHP
html
application
controller
includes
model
views
.htaccess
index.php
Cấu trúc của một MVC framework thường gồm các thành phần cây như trên. Trong
đó:
index.php
Là file truy xuất đầu tiên. File này sẽ gọi file include/init.php, nó có nội dung sau:
<?php
/*** error reporting on ***/
error_reporting(E_ALL);
/*** define the site path constant ***/
$site_path = realpath(dirname(__FILE__));
define ('__SITE_PATH', $site_path);
/*** include the init.php file ***/
31
include 'includes/init.php';
?>
Và đây là file includes/init.php:
<?php
/*** include the controller class ***/
include __SITE_PATH . '/application/' . 'controller_base.class.php';
/*** include the registry class ***/
include __SITE_PATH . '/application/' . 'registry.class.php';
/*** include the router class ***/
include __SITE_PATH . '/application/' . 'router.class.php';
/*** include the template class ***/
include __SITE_PATH . '/application/' . 'template.class.php';
/*** auto load model classes ***/
function __autoload($class_name) {
$filename = strtolower($class_name) . '.class.php';
$file = __SITE_PATH . '/model/' . $filename;
if (file_exists($file) == false) {
return false;
}
include ($file);
}
/*** a new registry object ***/
$registry = new registry;
?>
Registry
Là một đối tượng, nơi các biến rộng của site được lưu trữ mà không sử dụng các biến
toàn cục. Thông qua đối tượng registry để điều khiển. Chúng ta cần thiết lập các biến
registry và lấy chúng bằng hàm _set() và _get(). Vậy registry.class.php có nội dung:
<?php
Class Registry {
/* @the vars array
* @access private
*/
private $vars = array();
/**
* @set undefined vars
* @param string $index
* @param mixed $value
* @return void
32
*/
public function __set($index, $value) {
$this->vars[$index] = $value;
}
/* @get variables
* @param mixed $index
* @return mixed
*/
public function __get($index) {
return $this->vars[$index];
}
}
?>
Model
Đặt code sau vào file init.php:
<?php
/*** create the database registry object ***/
$registry->db = db::getInstance();
?>
Router
Lớp router đáp ứng cho việc nạp controller trực tiếp. Nó không làm gì hết. Giá trị của
controller đến từ URL. URL có dạng như sau:
hoặc có htaccess và mod_rewrite thì có dạng:
Code sau nằm trong file router.class.php trong thư mục ứng dụng:
<?php
class router {
/* @the registry */
private $registry;
/* @the controller path */
private $path;
private $args = array();
public $file;
public $controller;
public $action;
function __construct($registry) {
$this->registry = $registry;
}
33
?>
Chúng ta cũng có thể nạp router vào registry bằng cách thêm code sau vào file
index.php:
/*** load the router ***/
$registry->router = new router($registry);
Bây giờ lớp router có thể được nạp, chúng ra tiếp tục với lớp router bằng cách thêm
một phương thức để thiết lập đường dẫn thư mục controller. Thêm code sau vào
router.class.php:
<?php
/* @set controller directory path
* @param string $path
* @return void
*/
function setPath($path) {
/*** check if path i sa directory ***/
if (is_dir($path) == false) {
throw new Exception ('Invalid controller path: `' . $path .'`');
}
/*** set the path ***/
$this->path = $path;
}
?>
Và để thiết lập đường dẫn controller trong registry ta thêm code sau vào index.php:
/*** set the path to the controllers directory ***/
$router->setPath (__SITE_PATH . 'controller');
Với thiết lập đường dẫn controller ta có thể nạp controller. Ta tạo một phương thức gọi
là loader() để lấy controller và nạp nó. Phương thức này gọi phương thức
getController() để quyết định controller nào để nạp. Nếu một controller không được
tìm thấy thì mặc định nói trở lại index. Phương thức loader như sau:
<?php
/* @load the controller
* @access public
* @return void
*/
public function loader() {
/*** check the route ***/
$this->getController();
34
/*** if the file is not there diaf ***/
if (is_readable($this->file) == false) {
echo $this->file;
die ('404 Not Found');
}
/*** include the controller ***/
include $this->file;
/*** a new controller class instance ***/
$class = $this->controller . 'Controller_';
$controller = new $class($this->registry);
/*** check if the action is callable ***/
if (is_callable(array($controller, $this->action)) == false) {
$action = 'index';
}
else {
$action = $this->action;
}
/*** run the action ***/
$controller->$action();
}
?>
Thêm phương thức getController() vào file router.class.php:
<?php
/* @get the controller
* @access private
* @return void
*/
private function getController() {
/*** get the route from the url ***/
$route = (empty($_GET['rt'])) ? '' : $_GET['rt'];
if (empty($route)) {
$route = 'index';
}
else {
/*** get the parts of the route ***/
$parts = explode('/', $route);
$this->controller = $parts[0];
if(isset( $parts[1])) {
$this->action = $parts[1];
}
35
}
if (empty($this->controller)) {
$this->controller = 'index';
}
/*** Get action ***/
if (empty($this->action)) {
$this->action = 'index';
}
/*** set the file path ***/
$this->file = $this->path .'/'. $this->controller . '.php';
}
?>
Controller
Thêm code sau vào controller.class.php:
<?php
Abstract Class baseController {
/* @registry object */
protected $registry;
function __construct($registry) {
$this->registry = $registry;
}
/* @all controllers must contain an index method */
abstract function index();
}
class indexController extends baseController {
public function index() {
/*** set a template variable ***/
$this->registry->template->welcome = 'Welcome to PHPRO MVC';
/*** load the index template ***/
$this->registry->template->show('index');
}
}
Class blogController Extends baseController {
public function index() {
$this->registry->template-blog_heading = 'This is the blog Index';
$this->registry->template->show('blog_index');
36
}
public function view(){
/*** should not have to call this here.... FIX ME ***/
$this->registry->template->blog_heading = 'This is the blog heading';
$this->registry->template->blog_content = 'This is the blog content';
$this->registry->template->show('blog_view');
}
}
?>
View
Phần này hiển thị template. Code sau trong file template.class.php:
<?php
Class Template {
/* @the registry
* @access private
*/
private $registry;
/* @Variables array
* @access private
*/
private $vars = array();
/* @constructor
* @access public
* @return void
*/
function __construct($registry) {
$this->registry = $registry;
}
/* @set undefined vars
* @param string $index
* @param mixed $value
* @return void
*/
public function __set($index, $value) {
$this->vars[$index] = $value;
}
function show($name) {
$path = __SITE_PATH . '/views' . '/' . $name . '.php';
37
if (file_exists($path) == false) {
throw new Exception('Template not found in '. $path);
return false;
}
// Load variables
foreach ($this->vars as $key => $value) {
$$key = $value;
}
include ($path);
}
}
?>
Template
Template bản thân nó các file HTML với một số PHP được nhúng vào. Đây là file
index.php:
blog_index.php:
blog_view.php:
38
6. MÔ HÌNH MVC CHO ỨNG DỤNG TỪ ĐIỂN
View
Controller
Model
TreeNodes,
Connnections...
Hình 2.3 – Mô hình MVC cho
các chức năng bên trong của
một cây widget
onMouseMove(){
}
onClick(){
Controller code
Model
JavaScript
Objects
View
Hình 2.4 – Mô hình MVC cho
}
ứng dụng Ajax client
39
Controller trong mô hình này là code liên kết giao diện với các đối tượng dịch vụ trong
JavaScript.
Browser
View
onMouseMove(){
}
onClick(){
}
Controller code
Model
JavaScript
Objects
Controller
PHP Controller
Server
Smarty
View Model Hình 2.5 – Ki ến trúc MVC lồng
40
CHƯƠNG 3: CÁC CÔNG NGHỆ TRONG AJAX
1. CASCADING STYLE SHEET
1.1. GIỚI THIỆU
AJAX là một tập hợp các công nghệ bổ sung lẫn nhau. JavaScript có vai trò là chất kết
dính các ứng dụng lại với nhau. Giao diện người dùng được tạo và tái nạp bằng cách
dùng JavaScript để điều khiển Document Object Model, đồng thời xử lí các tương tác
trên chuột và bàn phím.
Cascading Style Sheets (CSS) cung cấp một sự nhất quán trên cảm quan “look and
feel” cho ứng dụng và khả năng thao tác mạnh mẽ với DOM. Đối tượng
XMLHttpRequest (hay một cơ chế tương đương nào đó) được dùng để liên lạc một
cách bất đồng bộ với server, đảm bảo việc gửi yêu cầu người dùng và tái nạp dữ liệu
trong khi người dùng vẫn làm việc.
Cascading Style Sheet – tạm dịch là bảng kiểu xếp chồng - là một phần không thể
thiếu trong thiết kế Web. Nó được dùng rất nhiều trong các ứng dụng web truyền
thống cũng như trong Ajax. Một stylesheet đưa ra cách kiểm soát các loại định dạng
trực quan. Nó có thể được áp dụng cho các thành phần riêng lẻ trên các trang.
Hơn nữa, cho các thành phần định dạng trực quan như màu sắc, lề, hình nền, tính trong
suốt, kích cỡ. Stylesheet có thể xác định cách mà các phần tử được bố trí quan hệ với
các phần tử khác và tương tác với người dùng, cho phép các hiệu ứng khá mạnh mẽ.
Trong ứng dụng web truyền thống, stylesheet cung cấp một cách hiệu quả để xác định
cách thể hiện vị trí và có thể được dùng lại trong nhiều trang web khác nữa.Với AJAX,
stylesheet cung cấp một “kho chứa” các giao diện xác định trước, có thể áp dụng cho
các phần tử động với độ dài các đoạn mã nguồn là nhỏ nhất.
CSS định dạng một trang web theo ba cách:
Sử dụng trực tiếp với các thẻ HTML (Inline Style Sheet).
Định nghĩa trong một trang web (Internal Style Sheet).
Định nghĩa thành một file CSS riêng (External Style Sheet), trang web của ta sẽ
tham chiếu tới file CSS này.
41
Một quy tắc định dạng và bố trí gồm có hai phần: thành phần lựa chọn (selector) và
phần khai báo (style declaration). Selector đặc tả các phần tử được định dạng và bố trí;
style declaration khai báo các thuộc tính định dạng sẽ được áp dụng.
Giả sử muốn tạo ra dòng text level-1 heading trong tài liệu (đó là đoạn nằm trong thẻ
) có màu đỏ, ta có thể khai báo các thuộc tính CSS như sau: h1 {color :
#FF0000}
ƯU ĐIỂM CỦA CSS
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.
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ó 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 chỉ
trong một thẻ HTML, trong một trang web hoặc trong một file CSS bên ngoài.
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 của 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).
1.2. CÚ PHÁP VÀ THUỘC TÍNH
CÚ PHÁP CƠ BẢN CỦA CSS
Cú pháp của CSS gồm ba phần: Thành phần lựa chọn (Selector), thuộc tính (Property),
giá trị (Value). Thể hiện dưới dạng code như sau:
42
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.
Inline Style: Đâ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.
Ví dụ:
<span style=”font-family : Arial; font-size : 12px; color :
#FF0000”>
Hello Ajax
Internal Style: Trong trường hợp mỗi trang web 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ẻ
đặt bên trong thẻ .
Ví dụ:
body {background-image:url(“images/button.gif”)}
External Style: Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ
. Thẻ được đặt bên trong thẻ .
Ví dụ:
THUỘC TÍNH CỦA CSS
Mỗi phần tử trong trang HTML có thể được qui định theo nhiều kiểu. 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 font,
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.
43
Ví dụ: Để qui định cho một paragraph
arial12 {
font-family : Arial;
font-size : 12px;
color : #FF0000;
font-weight : bold;
}
2. 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, 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ệ:
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, mà 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 number, string, date, 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,
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 để viết 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 các công nghệ của Ajax, JavaScript là chất kết dính các thành phần lại với nhau.
44
2.1. BIẾN
Trước khi sử dụng biến trong JavaScript, ta 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:
var tên_biến;
Ngoài ra, ta 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 đó.
2.2. ĐỐI TƯỢNG
Kiểu của JavaScript được chia ra làm
Các file đính kèm theo tài liệu này:
- Xây dựng từ điển multimedia dùng công nghệ ajax trên nền php.pdf