SVTH: Mai Thị Hồng My – Lớp 09CNTT1 19
III.7. Cấu trúc cơ bản của file HTML5
Hình 4. Cấu trúc thẻ HTML5 <!DOCTYPE html> <!DOCTYPE html> <html> <head> <title>Tên tệp HTML5</title> </head> <body>
Nội dung tệp tin </body>
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 20
IV. CSS - CSS3
IV.1. CSS
IV.1.1. Khái niệm:
CSS viết tắt của Cascading Style Sheets, nó đơn thuần là một dạng tập tin text với phần mở rộng là .css chứa những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của tập tin HTML. Khi chƣa có CSS, việc thiết kế web phải trộn lẫn giữa các thành phần trình bày và nội dung với nhau. Nhƣng với sự xuất hiện của CSS, ngƣời ta có thể tách rời hồn tồn phần trình bày và nội dung. Giúp cho phần mã nguồn của trang web gọn và dễ chỉnh sửa hơn.
IV.1.2 Cấu trúc của CSS
CSS có 2 phần chính là selector và declaration:
Hình 5. Cấu trúc của CSS
Một định nghĩa trong CSS có thể có nhiều selector đi với nhiều declaration.
Mỗi declaration bao gồm property và value, cách nhau bởi dấu : (hai chấm)
Ví dụ: color:blue
Selector cách nhau bởi dấu , (phẩy) và declaration cách nhau bởi dấu ; (chấm phẩy) Ví dụ: h1, h2, h3 {color:blue;text-align:left;}
Selector phân biệt với declation bởi dấu ngoặc nhọn đóng, mở { declaration here } Ví dụ: p { color: blue; }
IV.1.3 Cách áp dụng CSS
Có ba cách để có thể sử dụng để định dạng trang web là: cục bộ, nội tuyến và ngoại tuyến. Trong thực tế thì cách cuối cùng là phổ biến nhất.
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 21
Cách định dạng cục bộ là sử dụng mã nguồn CSS chèn trực tiếp vào thẻ HTML và chỉ có tác động lên thẻ đó.
<p style=”font-size:16pt; font-weight:bold; color:blue;”> </p>
Nội tuyến
Khai báo mã nguồn CSS nằm trong cặp thẻ <style></style> đƣợc đặt ở phần <head></head> của tài liệu. Nó cũng chỉ có tác động cục bộ lên tập tin chèn đoạn mã nguồn CSS này. Phạm vi ảnh hƣởng lớn hơn cách chèn cục bộ, nhƣng nó khơng có ảnh hƣởng đến các tập tin khác trong cùng một trang web.
<head>
<title>Nhúng vào trang</title>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ /> <style type=”text/css”> h1 {font-size: 16px;} p {color:blue;} </style> </head> Ngoại tuyến
Đây là cách thịnh hành bằng việc tách riêng mã nguồn CSS ra một tập tin riêng biệt giúp dễ dàng sửa chữa thay đổi. Để liên kết tập tin CSS đến tất cả các tập tin html cần chèn đoạn mã nguồn sau vào giữa thẻ <head></head> của tài liệu:
<link href="style_sheet.css" rel="stylesheet" type="text/css" />
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 22
IV.2. CSS3
CSS3 là phiên bản mới nhất của CSS. Nó hồn tồn tƣơng thích với các thiết kế trƣớc đó nên khơng phải thay đổi thiết kế hiện tại. CSS3 chia thành các “module”. Một số module quan trọng nhất của CSS3 là:
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
IV.2.1. Một số tính năng mới của CSS3 Border-radius
Khó vận dụng CSS để làm đƣợc bo góc. Đã có nhiều cách nhƣng nó chƣa phải là tốt nhất. Rất dễ khi làm việc này với CSS3. Nó có thể đƣợc áp dụng cho từng góc, và dễ dàng thay đổi thông số về chiều rộng và màu sắc.
Ví dụ CSS: .border_rounded { background-color: #ddccb5; -webkit-border-radius: 5px; border: 2px solid #897048; padding: 10px; width: 310px; } Hình 6. Border-radius
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 23
Gradient
Gradient border có thể tạo ra những hiệu ứng tuyệt vời nếu đƣợc dùng cẩn thận. Đoạn mã dƣới đây giúp bạn chọn màu sắc cho gradient border.
Ví du CSS:
.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px; width: 300px; } Hình 7. Gradient V. JAVASCRIPT V.1. Khái niệm
JavaScript là một ngơn ngữ lập trình dựa trên nguyên mẫu. Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thơng qua DOM. JavaScript đƣợc dùng để thực hiện một số tác vụ không thể thực hiện đƣợc khi chỉ dùng HTML nhƣ kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh,... Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 24
W3C, do đó trong nhiều trƣờng hợp phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt.
V.2. Nhúng JavaScript vào tập tin HTML
Sử dụng cặp thẻ <script></script> <script language=”JavaScript”> // Chèn mã JavaScript tại đây </script>
Sử dụng tập tin nguồn JavaScript
< script src="file_name.js"></script >
V.3. Biến trong JavaScript
Tên biến trong JavaScript phải bắt đầu bằng chữ hay dấu gạch dƣới. Các chữ số không đƣợc sử dụng để mở đầu một biến nhƣng có thể sử dụng sau ký tự đầu tiên.
Phạm vi của biến có thể là một trong hai kiểu sau:
Biến tồn cục: Có thể đƣợc truy cập từ bất kỳ đâu trong ứng dụng.
Biến cục bộ: Chỉ đƣợc truy cập trong phạm vi chƣơng trình mà nó khai báo.
V.4. Đối tƣợng
JavaScript có 2 kiểu: kiểu cơ bản và đối tƣợng. Đối tƣợng trong JavaScript là một thực thể có tên xác định và có thuộc tính trỏ đến giá trị, hàm hoặc là một đối tƣợng khác. JavaScript có một số đối tƣợng định nghĩa sẵn, bao gồm mảng (Array), đối tƣợng đại số Bool (Boolean), đối tƣợng ngày tháng (Date), đối tƣợng hàm (Function), đối tƣợng toán học (Math), đối tƣợng số (Number), đối tƣợng đối tƣợng (Object), đối tƣợng biểu thức tìm kiếm (RegExp) và đối tƣợng chuỗi ký tự (String).
JavaScript là một ngơn ngữ lập trình dựa trên ngun mẫu do đó thừa kế diễn ra giữa các đối tƣợng, khơng phải giữa các lớp (JavaScript khơng hề có lớp). Đối tƣợng thừa kế thuộc tính từ các nguyên mẫu của chúng.
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 25
Ta có thể thêm hoặc xóa thuộc tính hoặc hàm trong đối tƣợng sau khi đối tƣợng đã đƣợc tạo. Để làm việc này cho tất cả các đối tƣợng đƣợc tạo từ cùng một hàm khởi tạo, có thể sử dụng thuộc tính prototype của hàm khởi tạo để truy cập đối tƣợng nguyên mẫu. JavaScript tự động gom rác tất cả những biến khơng cịn đƣợc dùng nữa nên ta không cần phải tự xóa
Ví dụ:
<script language="JavaScript"> function samplePrototype() {
this.attribute1 = "someValue"; // thêm một thuộc //tính cho đối tượng
this.function1 = testFunction; // thêm một hàm //vào đối tượng
}
function testFunction() {
alert(this.attribute2); //hiển thị 234 }
var sampleObject = new samplePrototype; // khởi tạo //một đối tượng
sampleObject.function1(); // gọi hàm function1 của //đối tượng sampleObject
sampleObject.attribute3 = 123; //thêm một thuộc //tính nữa cho đối tượng sampleObject
delete sampleObject.attribute1; //xóa 1 thuộc tính delete sampleObject; // xóa bỏ đối tượng
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 26
V.5. Hàm
Hàm là một khối các câu lệnh với một danh sách một hoặc nhiều đối số (có thể khơng có đối số) và thƣờng có tên hoặc khơng có tên. Hàm có thể trả lại một giá trị. Cú pháp của hàm nhƣ sau:
<script language="JavaScript">
function tên_hàm(đối_số_1, đối_số_2) {
//các câu lệnh cần thực hiện mỗi khi hàm được gọi; return giá_trị_cần_trả_về;
}
tên_hàm(1, 2); </script>
Trong JavaScript, khi gọi hàm không nhất thiết phải gọi hàm với cùng số đối số nhƣ khi định nghĩa hàm, nếu số đối số ít hơn khi định nghĩa hàm, những đối số không đƣợc chuyển cho hàm sẽ mang giá trị undefined. Các kiểu cơ bản sẽ đƣợc chuyển vào hàm theo giá trị, đối tƣợng sẽ đƣợc chuyển vào hàm theo tham chiếu.
Tất cả các hàm là đối tƣợng của nguyên mẫu Function. Hàm có thể đƣợc tạo và dùng trong phép toán gán nhƣ bất kỳ một đối tƣợng nào khác, và cũng có thể đƣợc dùng làm đối số cho các hàm khác. Do đó, JavaScript hỗ trợ hàm ở cấp độ cao.
VI. JQUERY
VI.1. Khái niệm jQuery
jQuery là thƣ viện JavaScript, hay còn gọi là JavaScript Framework, hỗ trợ bạn trong việc xử lý HTML, xử lý các sự kiện trong trangHTML, tạo các hiệu ứng đẹp, xử lý Ajax nhanh và ngắn gọn hơn cho ứng dụng website của ngƣời sử dụng.
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 27
VI.2. Cách áp dụng jQuery vào trang web của mình
● Tự tạo host jQuery
Vào trang chủ của jQuery và download phiên bản mới nhất. Thƣờng thì có 2 phiên bản của jQuery cho bạn download. Phiên bản chƣa nén dành cho những ngƣời phát triển và đang học nhƣ bạn. Còn phiên bản nén kia dành cho phần sử dụng trực tiếp trên trang vì nó có dung lƣợng nhỏ hơn rất nhiều so với phiên bản chƣa nén. Bạn không cần phải cài đặt jQuery, bạn chỉ cần đặt đƣờng link tới thƣ viện đó là đƣợc. Bất cứ khi nào bạn cần sử dụng jQuery, bạn chỉ cần gọi nó trong tài liệu HTML đến nơi lƣu trữ nó trên host của bạn.
● Dùng phiên bản có sẵn trên server của Google
Sử dụng phiên bản có sẵn trên server của Google mà khơng cần phải download về máy. Cú pháp để chèn jQuery sử dụng file có sẵn trên server của Google nhƣ sau:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jqu ery.min.js"
type="text/javascript"> </script>
VII. GOOGLE MAPS API
VII.1. Google Maps API là gì?
Google Maps là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí đƣợc cung cấp bởi Google, hỗ trợ nhiều dịch vụ khác của Google nổi bật là dẫn đƣờng. Nó cho phép thấy bản đồ đƣờng sá, đƣờng đi cho xe đạp, cho ngƣời đi bộ và xe hơi, và những địa điểm kinh doanh trong khu vực cũng nhƣ khắp nơi trên thế giới.
Maps API là gì?
Đó là một phƣơng thức cho phép 1 website B sử dụng dịch vụ bản đồ của site A (gọi là Map API) và nhúng vào website của mình (site B). Site A ở đây là google map, site B là các web site cá nhân hoặc tổ chức muốn sử dụng dịch vụ của google, có thể rê chuột, room, đánh dấu trên bản đồ...
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 28
Các ứng dụng xây dựng trên maps đƣợc nhúng vào trang web cá nhân thông qua các thẻ javascripts do vậy việc sử dụng API google rất dễ dàng.
Google Maps API đã đƣợc nâng cấp lên phiên bản thứ 3. Phiên bản này hỗ trợ không chỉ cho các máy để bàn truyền thống mà cho cả các thiết bị di động. Nhanh hơn và nhiều hơn các ứng dụng.
Điều quan trọng là các dịch vụ hoàn tồn miễn phí với việc xây dựng một ứng dụng nhỏ. Trả phí nếu đó là việc sử dụng cho mục đích kinh doanh, doanh nghiệp.
VII.2. Google Maps API dùng để làm gì?
Đánh dấu các địa điểm trên bản đồ cùng các thông tin cho địa điểm: các khu vui chơi giải trí, nhà hàng khách sạn, các quán ăn ngon, các shop quần áo, nữ trang...
Chỉ dẫn đƣờng đến các địa điểm cần tìm,chỉ dẫn đƣờng giao thơng cơng cộng, có thể là các địa điểm cung cấp nhƣ trên. Ở đây sử dụng các service google cung cấp.
Khoanh vùng khu vực: các trung tâm kinh tế, khu đô thị, khu ô nhiễm... Tình trạng giao thơng các khu vực .Đƣa ra các giải pháp có thể...
Cịn rất nhiều ứng dụng cho phép bạn xây dựng. Quan trọng là đều mang lại lợi ích cho ngƣời cung cấp dịch vụ và ngƣời sử dụng dịch vụ. Có thể đem lại lợi ích kinh tế nếu nhƣ ứng dụng áp dụng tốt trong thực tế!
VIII. NODEJS
VIII.1. NodeJs là gì?
Javascript trƣớc đây chỉ chạy đƣợc trên trình duyệt web. Nhƣng gần đây nó đƣợc dùng ở phía server. Có những mơi trƣờng Javascript ở phía server nhƣ là Jaxer và Narwhal, tuy nhiên Nodejs có một chút khác biệt so với những cái trên. Bởi vì nó dựa trên sự kiện hơn là dựa theo luồng (thread). Các máy chủ Web nhƣ Apache thƣờng sử lý PHP và các script CGI khác dựa theo luồng bởi chúng sinh ra một hệ thống luồng cho mỗi request đến. Trong khi cách đó là ổn cho rất nhiều ứng dụng thì các mơ hình dựa theo 3luồng khơng thể mở rộng một cách có hiệu quả với nhiều kết nối tồn tại lâu. Ví dụ nhƣ bạn muốn dùng các dịch vụ thời gian thực nhƣ Friendfeed hay Google Wave.
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 29
Nodejs, sử dụng một sự kiện lặp thay cho các luồng, và nó có thể mở rộng lên hàng triệu kết nối một lúc. Điều này rất có lợi vì thực tế các máy chủ sử dụng phần lớn thời gian vào việc đợi các xử lý vào ra (ví dụ nhƣ đọc một file từ ổ cứng, truy vấn đến một dịch vụ web bên ngoài hoặc là đợi file đƣợc tải lên hồn tất) bởi vì các xử lý đó chậm hơn rất nhiều so với xử lý bộ nhớ. Với kiến trúc hƣớng sự kiện thì lƣợng bộ nhớ dùng ít hơn, lƣu lƣợng tăng cao và mơ hình lập trình thì đơn giản hơn.
Mỗi một xử lý vào ra trong Nodejs là không đồng bộ, nghĩa là máy chủ có thể tiếp tục sử lý các request đến trong khi các sử lý vào ra đang diễn ra. Javascript mà một ngôn ngữ phù hợp cho việc lập trình hƣớng sự kiện bởi vì nó có các hàm khơng đồng bộ và sự bao đống cái mà tạo ra một hàm callbacks đảm bảo. Và lập trình viên Javascript thì đã biết cách lập trình theo cách này rồi. Mơ hình hƣớng sự kiện khiến cho Nodejs chạy rất nhanh và có thể triển khai và mở rộng cho các ứng dụng thời gian thực một cách dễ dàng. Một lợi ích lớn lao của NodeJS đó là nó sử dụng javascript. Nó cũng hỗ trợ các hệ NoSQL dùng javascript để truy vấn. Từ đây ta chỉ cần học một ngôn ngữ là javascript để thực thi từ phía trình duyệt, phía webserver và cả cho database server.
VIII.2. Mơ hình MVC
Mơ hình Design Pattern MVC (Model – View – Controller) đƣợc sử dụng trong NodeJS với mục đích là rút gọn sự mắc nối giữa các phần trình bày ứng dụng và phần “lõi” của chƣơng trình. Tóm lại là phân bố dữ liệu và phần trình bày đã đƣợc chia làm 3 phần chính
Model: Dùng để quản lý sự tƣơng tác cơ sở dữ liệu View: Phần giao diện tƣơng tác với ngƣời sử dụng
Controller: Dùng để cập nhật thông tin cho Model hay View. Controller không thay nhiệm vụ của Model. Control không can thiệp vào xử lý cơ sở dữ liệu. Nó chỉ có tác dụng xử lý yêu cầu của ngƣời dùng và gửi thông điệp đến Model để truy vấn cơ sở dữ liệu, từ đó hiển thị kết quả cho ngƣời sử dụng thông qua View.
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 30
Trong kiến trúc MVC, một đối tƣợng đồ họa ngƣời dùng (GUI Component) bao gồm 3 thành phần cơ bản: Model, View, và Controller. Model có trách nhiệm đối với tồn bộ dữ liệu cũng nhƣ trạng thái của đối tƣợng đồ họa. View chính là thể hiện trực quan của Model, hay nói cách khác chính là giao diện của đối tƣợng đồ họa. Và Controller điều khiển việc tƣơng tác giữa đối tƣợng đồ họa với ngƣời sử dụng cũng nhƣ những đối tƣợng khác.
Hình 8. Mơ hình MVC
Khi ngƣời sử dụng hoặc những đối tƣợng khác cần thay đổi trạng thái của đối tƣợng đồ họa, nó sẽ tƣơng tác thơng qua Controller của đối tƣợng đồ họa. Controller sẽ thực hiện việc thay đổi trên Model. Khi có bất kỳ sự thay đổi nào ở xảy ra ở Model, nó sẽ phát thông điệp (broadcast message) thông báo cho View và Controller biết. Nhận đƣợc thông điệp từ Model, View sẽ cập nhật lại thể hiện của mình, đảm bảo rằng nó ln là thể hiện trực quan chính xác của Model. Cịn Controller, khi nhận đƣợc thơng điệp từ Model, sẽ có những tƣơng tác cần thiết phản hồi lại ngƣời sử dụng hoặc các đối tƣợng khác.
SVTH: Mai Thị Hồng My – Lớp 09CNTT1 31
Hình 9. Mơ hình tuần tự của MVC
VIII.3. Express Framework
Express là một framework cho NodeJs. Các web app thƣờng dùng chung một số cấu trúc nhất định nên ta có thể lập trình và viết app nhanh hơn khi sử dụng module