Đồ án Xây dựng từ điển Multimedia dùng công nghệ Ajax trên nền PHP

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