Ngôn ngữ lập trình giao diện website: HTML, CSS, JS, jQuery, Bootstrap và tối ưu SEO

Tài liệu Ngôn ngữ lập trình giao diện website: HTML, CSS, JS, jQuery, Bootstrap và tối ưu SEO giới thiệu đến các bạn những công việc thiết kế và triển khai giao diện Website, nội dung siêu dữ liệu, phần tử tiêu đề, trình bày văn bản,... Với các bạn chuyên ngành Công nghệ thông tin thì đây là tài liệu tham khảo hữu ích.

Trang 1

Giữa năm 1993,

Tim Berners-Lee

- ngôn ngữ HTML

24/11/1995 HTML 2.0 IETF

14/01/1997 HTML 3.2 W3C

18/12/1997 HTML 4.0 W3C

28/10/2014 HTML 5.0 W3C

26/01/2000 XHTML 1.0 W3C

17/12/1996 Hakon Wium Lie

- ngôn ngữ CSS

12/05/1998 CSS 2 W3C

06/1999 CSS 3 W3C

09/1995 Brendan Eich

- ngôn ngữ LiveScript, sau chuyển thành Javascript Netscape

08/1996 Jscript Microsoft

17/06/2015 ECMAScript 6.0 ECMA

11/1996 ECMAScript ECMA

20/10/2010 AngulaJS Google

27/05/2009 NodeJS Ryan Dahl

05/2005 Prototype

19/08/2011

Bootstrap Mark Otto & Jacob Thornton

26/08/2006 jQuery John Resig

Internet Explorer

Thomas Reardon

16/08/1995 Microsoft C++

Opera Opera Inc

04/1995 Opera C++

Internet Explorer Mozilla 23/09/2002 Mozilla C++, Js, CSS, Rust, XUL, XBL

Safari Apple Inc

07/01/2003 Apple C++, Objective C

UC Browser

UC Inside, World in Hand 08/2004 UCWeb

(Mobile)

Google Chrome Google Inc

02/09/2008 Google C++

Cốc cốc Cốc cốc 14/05/2013 Cốc cốc C++, Hợp ngữ, Python, JS

Máy chủ (Server)

Nhận yêu cầu từ máy khách Xử lý kịch bản phía máy chủ, xuất tài liệu HTML, CSS, JS… trả về phía máy khách

Máy khách (Client)

Màn hình (Desktop)

Hiển thị giao diện tương tác người dùng

Trình duyệt (Browser)

Gửi yêu cầu và nhận phản hổi Biên dịch

và thực thi các tài liệu HTML, CSS, JS để tạo giao diện tương tác người dùng

Người xem (Person)

Truy cập

Yêu cầu (Request)

Phản hồi (Response)

SƠ LƯỢC LỊCH SỬ HÌNH THÀNH VÀ PHÁT TRIỂN CỦA CÁC NGÔN NGỮ LẬP TRÌNH GIAO DIỆN WEBSITE VÀ SỰ RA ĐỜI CỦA CÁC TRÌNH DUYỆT WEB

KIẾN THỨC CƠ BẢN

VỀ NHỮNG NGÔN NGỮ GIAO DIỆN

PHÍA MÁY KHÁCH

“Lập trình không khó, quan trọng là có ý tưởng,

ý tưởng bất thành nếu thiếu kiến thức và kỹ năng.”

Mai0214cs –

Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định

( nadipage.com - webnadi.com - vneverestweb.com )

Trang 2

Nội dung siêu dữ liệu:

nội dung thiết lập những đặc điểm

và hành động về những nội dung còn lại của tài liệu, hoặc nó mô tả mối quan hệ tài liệu với những tài liệu khác khác, hoặc những truyền tải ngoài dải thông tin

Nội dung phân đoạn: nội dung của tài liệu,

nằm trong một đoạn của tài liệu

Nội dung nhúng:

nội dung nhập từ một nguồn khác vào tài liệu hoặc nội dung

từ một ngôn ngữ khác được chèn vào tài liệu

Nội dung tương tác: nội dung nhập từ một nguồn khác vào tài liệu hoặc nội dung từ một ngôn ngữ khác được chèn vào tài liệu

Nội dung tiêu đề:

nội dung định nghĩa phần tiêu đề của một mục

Nội dung mục:

nội dung dùng tập hợp một nhóm phần tử khác lại nội dung dùng để định nghĩa thường được đặt ở đầu hoặc cuối

object

a

button keygent label

select textarea

script noscript

style

blockquote

ĐẠI CƯƠNG VỀ HTML

HTML (HyperText Markup Language):

là ngôn ngữ đánh dấu siêu văn bản, nó dùng

các thẻ hoặc các đoạn mã lệnh để chỉ cho trình

duyệt biết cách thức hiển thị các thành phần của

trang web lên trên trình duyệt

Cấu trúc căn bản của một trang HTML

Trang 3

NỘI DUNG SIÊU DỮ LIỆU Những thẻ nội dung siêu dữ liệu là những thẻ được sử dụng chủ yếu trong phần tử head của tài liệu HTML Những nội dung này không được hiển thị trực tiếp trên giao diện đồ họa người dùng, mà nó được sử dụng để

thiết lập những mô tả hay hành động về những nội dung còn lại của tài liệu HTML, hoặc là mô tả quan hệ giữa tài liệu với các tài liệu khác, hoặc những truyền tải ngoài dải thông tin

- Phần tử link dùng để liên kết một tài nguyên khác vào trong trang, thông thường là các trang bộ định

kiểu CSS hay được sử dụng để đưa vào trong trang

Các thuộc tính: href, crossorigin, rel, media, hreflang, type, size, title

- Phần tử base dùng để chỉ đường dẫn cơ bản của tài liệu Khi sử dụng phần tử này bắt buộc sử

dụng thuộc tính href hoặc target để chỉ ra đường dẫn cơ bản của website

Các thuộc tính: href, target

- Phần tử title dùng để đặt tiêu đề hoặc tên của tài liệu Thông thường đoạn text mô tả tiêu đề của

trang được hiển thị trên thanh trạng thái của trình duyệt Web

<title>Thiết kế Website</title>

- Phần tử meta được sử dụng thông thường cùng với các cặp kiểu, giá trị để mô tả thông tin trang

hay cài đặt cấu hình hiển thị trang

- Phần tử script thường được sử dụng để viết những kịch bản động, hay những khối dữ liệu vào trong tài liệu HTML, mà thông dụng nhất là để gọi các tập tin hay viết các đoạn mã javascript

<! [if lt IE 9]>

<![endif] >

Các thuộc tính: src, type, charset, async, defer, crossorigin Trong đó thông thường thuộc tính

- Phần tử noscript được sử dụng và chỉ hoạt động khi trình duyệt của bạn không cho phép thực hiện các đoạn mã được đưa ra trong phần tử script

- Phần tử template thường được sử dụng để khai báo việc lồng ghép HTML có thể được nhân bản

bằng cách chèn dữ liệu từ kịch bản script

var data = [ { hovaten: 'Mai Đức Thạch', gioitinh: 'Nam', tuoi: 28 }, { hovaten: 'Trần Kim Duyên', gioitinh: 'Nữ', tuoi: 28 }, ];

</script>

var template = document.querySelector('#row');

for (var i = 0; i < data.length; i += 1) { var cat = data[i];

var clone = template.content.cloneNode(true);

var cells = clone.querySelectorAll('span');

Là phần định nghĩa tiêu đề của một mục,

thông thường mỗi một tài liệu HTML chỉ được

Trang 4

XÂY DỰNG BỐ CỤC TRANG

PHẦN TỪ NAV (trình bày danh sách trình đơn)

Phần tử nav dùng để xây dựng các danh sách trong HTML thường được sử dụng trong việc xây dựng

các trình đơn lựa chọn hay việc xây dựng các trình diễn ảnh Khi sử dụng phần tử này, ta thường sử

dụng kết hợp với các phần tử danh sách Các phần tử danh sách này có thể kết hợp lồng nhau hay kết

hợp các loại danh sách với nhau

Danh sách không thứ tự Danh sách có thứ tự Danh sách định nghĩa

- Là danh sách liệt kê các mục

tự số thay đổi qua các mục

- Phần tử <ol> đánh dấu việc bắt đầu và kết thúc danh sách

- Phần tử <li> có tác dụng thể

hiện việc bắt đầu và kết thúc mỗi mục bằng số thứ tự Thay ký tự thứ tự bằng ký hiệu khác bằng

<li><a href =“/”> Trang chủ </a></li>

<li><a href =“/”> Giới thiệu </a></li>

</ul>

</nav>

<ol>

<li><a href =“/”> Trang chủ </a></li>

<li><a href =“/”> Thời trang </a></li>

<li> Xu hướng hiện đại </li>

</ol>

</nav>

<dl>

<dt><a href =“/”> Thời trang </a></dt>

<dd> Phong cách hiện đại </dd>

tiện ích tương tác hoặc một mục bất kỳ độc lập với nội dung Phần tử này được xác định là thành phần

một số phần tử đánh dấu trang

Ví dụ sau đây trình bày cách trình bày trang bài viết cùng với các bình luận về bài viết đó:

<h1 itemprop=" headline " > Xu hướng thiết kế web hiện nay </h1>

<p><time itemprop=" datePublished " datetime=" 2016-04-04 " > 3 ngày trước </time></p>

</header>

<p> … Tại đây viết nội dung chính của bài viết … </p>

<span itemprop=" name " > Phạm Thanh Hoa </span>

PHẦN TỬ SECTION (trình bày danh sách thuộc mục)

Phần tử section được sử dụng để trình bày các mục được nhóm chung trong một tài liệu hay ứng

dụng Trên thực tế, ta thường sử dụng chúng để trình bày tin tức liên quan hay sản phẩm liên quan Khi trình bày phần này, ta thấy chủ đề của từng mục được xác định, nên ta có thể sử dụng các thẻ h1-h6 để đánh dấu tiêu đề từng mục trong phần tử section này

Ví dụ sau đây trình bày cách trình bày bài viết liên quan:

<h3> Thời trang giới trẻ </h3>

<p> Giới trẻ thời nay theo đuổi những phong cách thời trang trẻ trung, sôi động </p>

</section>

<h3> Thời trang mùa hè </h3>

<p> Mùa hè là mùa nóng bức nhất trong năm, quần áo sáng màu được lựa chọn </p>

</section>

</article>

PHẦN TỬ ASIDE (trình bày nội dung sidebar của trang) Phần tử aside được sử dụng để trình bày một phần của trang mà nội dung của nó có ít liên quan đến nội dung của

trang (hay nói cách khác là nó nằm tách biệt với nội dung của trang) Trong nhiều trang web, nó trình bày phần

sidebar của trang bao gồm như trình đơn, quảng cáo, tin tức hay sản phẩm liên quan

Ví dụ sau đây trình bày cách trình bày sidebar gồm modul danh mục sản phẩm và tin tức mới:

<aside>

<nav>

<ol>

<li><a href=" /thoi-trang " > Thời trang </a>

</ol>

</nav>

</aside>

<aside>

<h1> Xu hướng thời trang 2016 </h1>

<blockquote cite=" http://thoitrang.com/thoi-trang-2016 " > Cập nhật Xu hướng thời trang năm 2016 </blockquote>

</aside>

<h1> Thời trang mùa xuân </h1>

<p> Xu hướng thời trang mùa xuân 2016 </p>

</article>

<h1> Thời trang mùa xuân </h1>

<p> Xu hướng thời trang mùa xuân 2016 </p>

</article>

Trang 5

PHẦN TỬ TABLE (trình bày bảng)

Phần tử table được sử dụng để trình bày bảng dữ liệu trong một tài liệu hay ứng dụng Trên thực tế,

bảng được sử dụng nhiều trong việc trình bày nội dung dữ liệu trong các trang danh sách quản trị và

phần nội dung các trang chi tiết sản phẩm hay chi tiết tin tức

Ví dụ sau đây trình bày cách trình bày một bảng dữ liệu:

- Phần tử table dùng để tạo một bảng Thuộc tính border để xác định đường viền, thuộc tính

ô

- Phần tử caption để tạo tiêu đề của bảng

- Phần tử tr dùng để tạo ra một dòng Thuộc tính colspan để gộp các ô cạnh nhau của một dòng, thuộc

tính rowspan để gộp các ô cạnh nhau của một cột

- Phần tử thead để bao quanh các dòng tiêu đề của bảng, phần tử tfoot để bao quanh các dòng tổng

kết của bảng Phần tử tbody để bao quanh các dòng thân nội dung của bảng

- Phần tử th để tạo ra một ô tiêu đề cột, phần tử td để tạo ra một ô nội dung trong dòng

PHẦN TỬ FORM (trình bày biểu mấu nhập liệu)

Phần tử form được sử dụng để trình bày biểu mẫu trong một tài liệu hay ứng dụng Trên thực tế, biểu

được sử dụng nhiều trong việc trình bày nội dung dữ liệu trong các trang quản trị và phần nội dung các trang liên hệ

- Phần tử form dùng để định nghĩa được biểu mẫu Nó bao gồm các thuộc tính:

Ngoài ra còn một số thuộc tính khác như: target, enctype, accept, accept-charset

- Phần tử input dùng để cho phép người dùng nhập dữ liệu vào Nó thường nằm trong phần tử form Nó bao gồm một số thuộc tính thường dùng như:

- Hộp kiểm lựa chọn từ danh sách:

checkbox radio

Một số thuộc tính khác của phần tử input: maxlength, minlength, size, readonly, required, multiple,

pattern, min, max, step, list, placeholder

- Phần tử select, datalist cho phép tạo một hộp chọn sổ xuống Nó có các thuộc tính:

Trong phần tử này có các phần tử con là:

+ Phần tử optgroup cho phép nhóm các lựa chọn vào cùng kiểu

+ Phần tử option dùng để định nghĩa một tùy chọn

- Ngoài ra, để tạo biểu mẫu, ta có thể sử dụng một số phần tử khác như:

<textarea> định nghĩa một biểu mẫu cho phép nhập nhiều dòng Nó có các thuộc tinhs:

<label> tạo một nhãn cho phần tử <input>

<fieldset> tạo một khung bao quanh biểu mẫu

<legend> Tạo một tiêu đề cho phần tử <fieldset>

<button> tạo một nút button

Lưu ý: trong trang Web, không nên sử dụng bảng để tạo khung bố cục trang web, để tạo bố cục trang

Web người ta thường dùng phần tử div, phần tử này không có chức năng hiển thị, mà được sử dụng

gắn kèm các class, id để tạo CSS xây dựng bố cục khung hiển thị trang web

Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

Trang 6

SỬ DỤNG LIÊN KẾT VÀ HÌNH ẢNH TRONG HTML

Phần tử Siêu liên kết a là những phần tử bên trong tài liệu được liên kết đến một vị trí xác định trong

cùng tài liệu hoặc liên kết đến một trang hoàn toàn khác Khi ta click chuột vào siêu liên kết, nó sẽ nhảy

đến vị trí mà nó liên kết đến Siêu liên kết có 2 loại:

- Liên kết trong: là liên kết đến phần trong cùng tài liệu hoặc cùng website

- Liên kết ngoài: là liên kết đến các trang trên các site khác nhau

Để tạo siêu liên kết, cần xác định hai thành phần:

- Địa chỉ đầy đủ hoặc URL của file được kết nối

- Điểm nóng cung cấp cho liên kết

Sử dụng siêu liên kết: Phần tử a được sử dụng để xác định văn bản hay hình ảnh sẽ dùng làm siêu liên

kết trong tài liệu HTML Thuộc tính href (tham chiếu siêu văn bản) được dùng để chỉ ra địa chỉ, URL của

tài liệu hay file được liên kết

<a href=protocol://host.domain: port/path/filename>Hypertext</a>

Trong đó:

- Protocol: giao thức sử dụng Ta có một số loại giao thức như http (truyền siêu văn bản);

telnet (mở một phiên telnet); gopher (tìm kiếm file); ftp (giao thức truyền file); mailto (gửi thư

điện tử)

- Port: Cổng phục vụ của máy chủ đích

- Hypertext: Văn bản hay hình ảnh mà người dùng cần click vào để kích hoạt liên kết

Ngoài ra phần tử a còn một số thuộc tính khác như:

rel xác định mối quan hệ giữa tài liệu hiện hành và tài liệu liên kết

rev xác định mối quan hệ giữa các tài liệu liên kết và tài liệu hiện tại

chữ nhật), circle (hình tròn), poly (hình đa giác)

_blank _parent _self _top framename

Để hiển thị hình ảnh trên trang, ta dùng phần tử img, kèm theo các thuộc tính src để chỉ ra đường dẫn

hình ảnh và alt để mô tả hình ảnh

<img src=URL alt=description />

1 Liên kết văn bản

Liên kết đến một tài liệu khác

- Giả sử ta có hai tài liệu trên đĩa cứng cục bộ

doc1.html và doc2.html Ta tạo liên kết từ doc1 sang doc2 như sau:

- Khi tới tài liệu khác ta nên cung cấp một đường dẫn để quay lại

- Lưu ý: khi các file ở cùng thư mục ta dùng đường dẫn tương đối, khi ở khác thư mục, ta dùng đường dẫn tuyệt đối

Sử dụng email và điện thoại

- Liên kết đến ứng dụng gửi email:

<a href=“mailto://mai0214cs@gmail.com”> mai0214cs@gmail.com

</a>

- Liên kết đến ứng dụng gọi điện như skype:

0987.288.940

</a>

Liên kết đến một điễm xác định trong cùng tài liệu

- Khi click vào một đề tài nào đó (Topic name) thì

các chi tiết (marker) ở môt phần khác của tài liệu

được hiển thị

Cú pháp:

Tại điểm cần liên kết đến ta đặt:

Liên kết đến một điểm xác định

ở tài liệu khác

- Khi click vào một đề tài nào đó (Topic name) thì các chi tiết (marker) ở môt phần khác của tài liệu khác được hiển thị

Cú pháp:

<a href=”doc2.html#marker”>Chủ đề </a> Tại điểm cần liên kết đến ta đặt ở trang doc2:

2 Bản đồ hình ảnh: là hình ảnh trong đó các vùng khác nhau hoạt động như các liên kết HTML cung cấp 3 phần tử để tạo một bản đồ hình ảnh

- Phần tử <map> xác định bản đồ hình ảnh Nó cung cấp thuộc tính name để chỉ rõ tên của bản đồ hình ảnh

- Phần tử <area> chỉ rõ tọa độ ở khu vực bên trong hình ảnh sẽ hoạt động như một siêu liên kết và hình dạng của bản đồ hình ảnh Nó có các thuộc tính:

alt chỉ rõ văn bản được thay thế nếu bản đồ hình ảnh không xuất hiện

hình ảnh

center_x, center_y, radius Hình tròn

left_x, top_y, right_x, bottom_y

Hình chữ nhật

- Phần tử <img>: chọn ảnh làm bản đồ ảnh Nó gồm các thuộc tính:

src chỉ ra đường dẫn đến hình ảnh

alt văn bản thay thế hình ảnh khi không xuất hiện

ismap

ỨNG DỤNG CACHE

Ứng dụng Cache lưu trữ web phía máy khách, điều đó có nghĩa là ứng dụng web được tự động lưu trữ

và truy cập mà không cần kết nối với internet Điều này rất tiện lợi khi người dùng muốn truy cập lại web

khi họ offline, nguồn tài liệu lưu trữ này sẽ tải nhanh hơn so với khi lấy từ máy chủ về, và nó góp phần

giảm tải xử lý cho máy chủ

<!DOCTYPE HTML>

Mỗi khi bạn cập nhật tập tin trên máy chủ, bạn cần sửa đổi tên tập tin appcache để máy khách cập nhật

lại phiên bản mới nhất của trang của bạn

Lưu ý: kích thước lưu trữ dữ liệu cache của mỗi trình duyệt là khác nhau (thông thường giới hạn khoảng

5MB mỗi trang)

Trang 7

NỘI DUNG NHÚNG CHÈN VIDEO VÀO TÀI LIỆU HTML

Để chèn video vào tài liệu HTML, ta sử dụng phần tử video

<button onclick=" makeNormal() " > Bình thường </button>

</script>

CHÈN ÂM THANH VÀO TÀI LIỆU HTML

Để chèn video vào tài liệu HTML, ta sử dụng phần tử audio

Thuộc tính: autoplay, autobuffer, controls, loop,

Thuộc tính: autoload, autobuffer, controls,

height, width, loop, preload, poster, src

CHÈN ĐỐI TƯỢNG HTML, FLASH… VÀO TÀI LIỆU HTML

Để chèn video vào tài liệu HTML, ta sử dụng phần tử object hoặc embed, iframe

Cả 2 phần tử audio và video có thể kích hoạt các sự

kiện sau: about,canplay, ended, error, loadeddata,

loadstart, pause, play, progress, retachange, seeking, seepend, volumechange, waiting

CHÈN ĐỒ HỌA AVG VÀO TÀI LIỆU HTML

Phần tử svg dùng để chèn một hình ảnh đồ họa vào trong tài liệu HTML Để tạo ra một hình vẽ bằng phần tử svg, ta chỉ sử dụng thuộc tính và định dạng

CSS của chúng mà không cần sử dụng javascript

circle cx= "50" cy= "50" r= "40" stroke= "black"

stroke-width= "3" fill= "red" >

< /svg >

Đa giác

< path stroke= "red" d= "M5 20 l215 0" >

< path stroke= "black" d= "M5 40 l215 0" >

< path stroke= "blue" d= "M5 60 l215 0" >

Trang 8

THUỘC TÍNH CỦA PHẦN TỬ

CÁC THUỘC TÍNH CƠ BẢN CỦA HTML

Các thuộc tính cơ bản của HTML được áp dụng cho hầu hết tất cả

các phần tử HTML:

- Thuộc tính cốt lõi: Áp dụng cho hầu hết các phần tử

nó được sử dụng nhiều trong CSS hay jQuery

id Chỉ định một id duy nhất cho phần tử

- Thuộc tính ngôn ngữ: Áp dụng cho hầu hết các phần tử:

dir Chỉ định hướng hiển thị văn bản cho phần tử Có

các giá trị: ltr: phải qua trái; rtl: trái qua phải

với tài liệu XHTML)

Khi một người dùng truy cập vào trang web của bạn, họ có thể

làm một số việc như nhấp chuột vào văn bản, hình ảnh, liên kết hay

di chuyển qua đối tượng Đây là những ví dụ mà JavaScript gọi là

sự kiện

Chúng ta có thể viết trình sử lý sự kiện bằng ngôn ngữ JavaScript

và chúng ta chỉ định xử lý sự kiện này như những thuộc tính

Sự kiện Window: sự kiện kích hoạt cho đối tượng window (áp dụng

cho thẻ body)

onafterprint Kịch bản được chạy sau khi tài liệu được in

onbeforeprint Kịch bản được chạy trước khi tài liệu được in

onbeforeonload Kịch bản được chạy trước khi tải tài liệu

onblur Kịch bản được chạy khi cửa sổ mất tiêu điểm

onerror Kịch bản được chạy khi có lỗi xảy ra

onfocus Kịch bản được chạy khi cửa sổ nhận

tiêu điểm

onhaschange Kịch bản được chạy khi thay đổi tài liệu

onload Kịch bản được chạy khi tài liệu được tải

onmessage Kịch bản được kích hoạt khi tin nhắn được kích hoạt

onoffline Kịch bản được chạy khi tài liệu offline

ononline Kịch bản được chạy khi tài liệu trở thành online

onpagehide Kịch bản được chạy khi cửa sổ ẩn

onpageshow Kịch bản được chạy khi cửa sổ được viếng thăm

onredo Kịch bản được chạy khi quay lại một tài liệu

onresize Kịch bản được chạy khi thay đổi kích cỡ cửa sổ

onstorage Kịch bản được chạy khi khu lưu trữ web được cập

nhật

onundo Kịch bản được chạy khi quay lại một tài liệu

onunload Kịch bản được chạy khi người dùng rời khỏi

tài liệu

Sự kiện form: Sự kiện được kích hoạt khi ta tác động vào một form

HTML onblur Kịch bản được chạy khi phần tử mất tiêu điểm

onchange Kịch bản được chạy khi thay đổi phần tử

oncontextmenu Kịch bản được chạy khi kích hoạt một trình đơn

onfocus Kịch bản được thực hiện khi phần tử nhận được tiêu điểm onformchange Kịch bản được thực hiện khi thay đổi trong form onforminput Kịch bản được thực hiện khi truyền dữ liệu vào form

oninput Kịch bản được chạy khi truyền dữ liệu vào phần tử

oninvalid Kịch bản được chạy khi một phần từ không hợp lệ

onselect Kịch bản được chạy khi một phần tử được chọn

onsubmit Kịch bản được chạy khi biểu mẫu được gửi

Sự kiện bàn phím: là sực kiện được kích hoạt khi ta sử dụng

bàn phím

onkeydown Kịch bản được chạy khi một phím được nhấn xuống

onkeypress Kịch bản được thực hiện khi một phím được nhấn

xuống và thả ra

onkeyup Kịch bản được thực hiện khi một phím được thả ra

Sự kiện chuột: là sự kiện được thực hiện được gây ra bởi chuột

onclick Kịch bản được chạy khi click chuột

ondblclick Kịch bản được chạy khi click đúp chuột

ondrag Kịch bản được chạy khi một phần tử được kéo

ondragend Kịch bản được chạy ở cuối hành động kéo

ondragenter Kịch bản được chạy khi một phần tử đã được kéo

ondragstart Kịch bản được chạy khi bắt đầu kéo

ondrop Kịch bản được chạy khi một phần tử được thôi kéo

onmousedown Kịch bản được chạy khi một nút chuột được nhấn

onmousemove Kịch bản được chạy khi con trỏ chuột di chuyển

onmouseout Kịch bản được chạy khi con trỏ chuột di chuyển ra khỏi

một phần tử

onmouseup Kich bản được thực hiện khi ta nhả chuột onmousewheel Kịch bản được chayj khi chuột đang di chuyển onscroll Kịch bản được chạy khi thao tác với thanh cuộn

Sự kiện media: được xảy ra khi ta kích hoạt các loại đa phương tiện

như video, hình ảnh, âm thanh, đối tượng

onabort Kịch bản được chạy khi hủy bỏ

oncanplay Kịch bản được chạy khi một tập tin đã sẵn sàng

để bắt đầu chơi

oncanplaythrough Kịch bản được chạy khi một tập tin cáo thể chơi

hết đến cuối dừng mà không cần bấm dừng ondurationchange Kịch bản được chạy khi thay đổi chiều dài của media onemptied Kịch bản được chạy khi có một trường hợp xấu xảy ra và

tập tin bất ngờ biến mất (như mmất kết nối)

onended Kịch bản được chạy khi media chạy đến chỗ kết thúc

(như xuất mẩu tin thông báo cảm ơn vì đã lắng nghe.) onerror Kịch bản được chạy khi có một lỗi xảy ra khi tập tin được tải onloadeddata Kịch bản xảy ra khi media đã được tải

onloadedmetadata Kịch bản được chạy khi dữ liệu meta (như kích

thước, thời gian) được tải

onloadstart Kịch bản được chạy như là tập tin bắt đầu load

trước khi hoàn thành

onpause Kịch bản được chạy khi media tạm dừng do người

sử dụng hay do lập trình

onplay Kịch bản được chạy khi media đã sẵn sàng để bắt đầu chơi onplaying Kịch bannr được chạy khi media đã thực sự bắt đầu chơi onprogress Kịch bản được chạy khi trình duyệt nhận dữ liệu media onratechange Kịch bản được chạy mỗi lần thay đổi tỷ lệ phát

(chạy nhanh hay chậm hơn)

onreadystatechange Kịch bản được chạy mỗi lần thay đổi trạng thái sẵn sàng onseeked Kịch bản được chạy khi các thuộc tính tìm kiếm được

thiết lập là sai để chỉ ra rằng tìm kiếm đã kết thúc onseeking Kịch bản chạy khi thuộc tính tìm kiếm là hoạt động

là truevà khi việc tìm kiếm hoạt động

onstalled Kịch bản được chạy khi trình duyệt không thể

nhận dữ liệu từ media vì một lý do nào đó onsuspend Kịch bản được chạy khi lấy dữ liệu mediađược

dừng lại trước khi nó được nạp hoàn toàn vì lý do nào đó

ontimeupdate Kịch bản được chạy khi vị trí chơi thay đổi (khi

người dùng muốn chơi ở đoạn sau hay chạy lại đoạn trước)

onvolumechange Kịch bản được chạy khi âm thanh thay đổi (bao

gồm cả việc tắt tiếng)

onwaiting Kịch bản được chạy khi media tạm dừng nhưng sẽ tiếp

tục săp tới (như tạm dừng để tải thêm dữ liệu)

Trang 9

CSS (Cascading Style Sheets): là ngôn ngữ định kiểu xếp tầng, qui định qui tắc định

dạng, hiển thị nội dung của các phần tử trong tài liệu HTML

Nội dung tập tin index.html

áp dụng cho nhiều phần

tử khác cùng loại, và đảm bảo nội dung HTML gọn nhẹ hơn

định kiểu thì giữa chúng phân

cách nhau bởi dấu phẩy (,)

Bộ định kiểu: là danh sách cách thuộc tính, định kiểu hiển thị

cho danh sách bộ chọn

Nội dung tập tin style.css

p { display: block;

-webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; }

Bộ định kiểu bên ngoài: CSS

được viết tách ra thành tập tin riêng (đuôi css) và được gọi vào trong tập tin HTML

Bộ định kiểu nội tuyền: CSS được

viết trong thuộc tính style của phần tử HTML, nhằm chỉ áp dụng bộ định kiểu cho phần tử này

3

4

Quy tắc @media được sử dụng để xác định cách thức hiển thị khác nhau trên các kiểu phương tiện hoặc thiết bị khác nhau

@media not|only <mediatype> and (<mediafeature>) { Nội dung CSS }

Danh sách mediatype

(kiểu phương tiện)

- all : tất cả thiết bị

- print : hiển thị trên máy in

- screen: hiển thị trên máy

tính, máy tính bảng hay điện

thoại thông minh

- speech: hiển thị trên các màn

hình đọc

Danh sách mediafeature (tính năng phương tiện)

- Tỷ lệ giữa chiều rộng và chiều cao của chế độ xem

- Tỷ lệ giữa chiều rộng và chiều cao của thiết bị

device-aspect-ratio max-device-aspect-ratio min-device-aspect-ratio

- Số bit cho mỗi thành phần màu ở hiển thị thiết bị đầu ra

- Lượng màu mà thiết bị có thể hiển thị

- Chiều rộng hoặc chiều cao của thiết bị

device-height max-device-height min-device-height

- Chiều rộng hoặc chiều cao của chế độ xem

<h1>Nội dung văn bản</h1>

Ví dụ 2: thẻ h1 dưới đây hiển thị màu đỏ nếu chiều rộng khung nhìn lớn hơn hoặc bằng 1200px

@media (min-width:1200px){

h1{color:red;}

}

<h1>Nội dung văn bản</h1>

Lưu ý quan trọng: việc chia khung

bố cục giao diện trong thư viện css

của boostrap để xây dựng giao diện

responsive được xây dựng dựa

trên cơ chế này

Hiện tại, trong phiên bản CSS3, một số thuộc tính của CSS được áp dụng

kèm theo tiền tố phân biệt trình duyệt:

-ms- : trình duyệt IE

-moz- : trình duyệt Firefox

-webkit-: hiển trình duyệt Chrome, Opera, Safari

Lưu ý: nếu bạn đặt !important sau mỗi định kiểu, trình duyệt sẽ ưu tiên hiển thị theo định kiểu này trước tiên chứ không theo trình tự như trên

Trang 10

Giả lớp và giả phần tử được sử dụng để xác định cách thức hiển thị khác nhau cho một phần tử hoặc một phần của phần tử HTML

<bộ chọn> : <tên giả lớp> { Bộ định kiểu CSS }

Bộ chọn kết hợp Giả phần tử

- after : chèn thêm nội dung vào cuối phần tử được chọn

- before : chèn thêm nội dung vào cuối phần tử được chọn

Hai giả lớp trên thường được sử dụng với thuộc tính content của CSS Ứng dụng này thường được sử dụng để thêm các icon vào đầu nội dung phần tử như sử dụng biểu tượng Glyphicons hay font-awesome trong thư viện boostrap

- first-letter : chọn ký tự đầu tiên của một chữ trong

- Thường gặp với thẻ <a>

a:active : chọn một liên kết hoạt động

a:hover : chọn phần tử khi di chuột qua

a:link : chọn tất cả liên kết khi chưa hoạt động

a:visited : chọn tất cả các liên kết đã viếng thăm

a:target : chọn phần tử đang hoạt động

- Thường gặp với thẻ <input>

input:checked input:forcus input:disabled input:enabled input:in-range input:out-of-range input:invalid input:valid input:optional input:required input:read-only input:read-write

- Theo vị trí phần tử trong phần tử cha mẹ của chúng

- div áp dụng cho các thẻ div

- div p áp dụng cho các phần tử p ở trong

phần tử div

- div>p áp dụng cho các phần tử p là phần tử

con trực tiếp của phần tử div

- div+p áp dụng cho các phần tử p ở ngay sau

Ví dụ minh họa bộ chọn class

(thuộc tính class của một phần tử HTML dùng để phân loại một nhóm phần tử

<style>

div p{

font-size: 14px; font-weight:bold; font-family: Arial;

Giá trị của các thuộc tính CSS

Đơn vị đo chiều dài

- Đơn vị đo chiều dài tuyệt đối:

cm – 1 cm trong đơn vị đo thước kẻ

1mm = 1/1000 cm 1in = 2,54 cm

1px = 1/96 in 1pt = 1/72 in 1pc = 12 pt

- Đơn vị đo chiều dài tương đối:

em (rem) so với font của phần tử (phần tử gốc)

vw (vh) tương ứng 1% chiều rộng (chiều cao) khung nhìn

ex so với chiều cao font hiện tại

ch so với 0

vmin (vmax) tương ứng 1% nhỏ hơn (lớn hơn) màn hình

% so với kích thước phần tử cha của chúng

Màu sắc

- Giá trị màu theo tên tiếng Anh (ví dụ: blue)

- Giá trị thập lục phân (dạng #RRGGBB), với mỗi giá trị trong khoảng 00 đền FF hệ thập lục phân

- Giá trị RGB (dạng rgb(đỏ, lục, lam)), với mỗi giá trị trong khoảng 0 đến 255 hệ thập phân Giá trị RGBA

(dạng rgba(đỏ, lục, lam, độ mờ)), với các giá trị màu

trong khoảng 0 đến 255 hệ thập phân, độ mờ nhận giá trị từ 0 đến 1

Công thức hàm

- Hàm attr(“tên thuộc tính”): trả về giá trị của

thuộc tính với tên thuộc tính được chỉ định

- Hàm calc(biểu thức): hàm này sử dụng các công thức +, -, *, / để trả về giá trị thường để tính chiều rộng, chiều cao phần tử, từ giá trị tương đối với giá trị tuyệt đối

- Các hàm tính toán dải màu trong CSS:

linear-gradient() repeating-linear-gradient() radial-gradient() repeating-radial-gradient()

Trang 11

Khu vực viết nội dung

margin: khoảng cách từ viền phần

tử này đến các phần tử bên cạnh

outline: đường bao quanh phía

ngoài đường viền Như vậy đường

outline ở vị trí chồng lấn lên vùng

margin Đường outline sẽ hiển thị

đè lên phía trên các phần tử khác

nếu chúng chồng lấn lên nhau

border: đường viền

bao quanh phần tử

padding: khoảng cách từ đường

viền đến vùng nội dung bên trong phần tử

Thanh cuộn: trong trường hợp

sử dụng thuộc tính overflow:

scroll; thì vị trí thanh cuộn nằm sát vị trí đường viền phía dưới, và bên phải chồng lấn lên vùng padding Vùng nội dung bên trong phần tử nhỏ đi một chút

margin-top (không áp dụng cho phần tử nội tuyến)

margin-bottom (không áp dụng cho phần tử nội tuyến)

padding-top

padding-bottom

margin-left

margin -right

padding -left

padding -right

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

width: chiều rộng phần tử Đối với phần tử nội tuyến, chiều rộng luôn là auto

Mặc định thuộc tính box-sizing nhận giá trị content-box, chiều rộng phần tử bằng chiều rộng khu vực viết nội dung; khi giá trị thuộc tính box-sizing nhận giá trị border-box thì chiều rộng phần tử bao gồm thêm cả phần border, padding

min-width: chiều rộng tối thiểu

max-width: chiều rộng tối đa

height: chiều cao phần tử Đối với phần tử nội tuyến,

chiều cao luôn là auto

Mặc định thuộc tính box-sizing nhận giá trị box, chiều cao phần tử bằng chiều cao khu vực viết nội dung; khi giá trị thuộc tính box-sizing nhận giá trị border-box thì chiều cao phần tử bao gồm thêm cả phần border, padding

content-min-height: chiều cao tối thiểu

max-height: chiều cao tối đa

position: xác định vị trí Với các giá trị:

- relative: vị trí tương đối so với góc trên,

bên trái của phần tử cụ thể

- absolute: vị trí tuyệt đối so với 4 góc của

phần tử cha ở vị trí tương đối

- fixed: vị trí cố định so với 4 góc của

trình duyệt

Tùy vào giá trị của các cặp thuộc tính

left, right, top, bottom để xác định góc

vị trí phần tử cha Riêng đối với vị trí tương

đối thì tham chiếu đến góc trên, bên trái

Đối với phần tử áp dụng tuyệt đối,

cố định; phần tử luôn được chuyển sang

phần tử khối

Trong trường hợp nhiều phần tử được

đặt chồng lên nhau, thuộc tính z-index

được sử dụng để sắp xếp thứ tự hiển thị

border-top

border-bottom

border -left

border -right

Đối với thuộc tính margin, padding ta có thể đặt kích thước độ dày theo 4 cách:

margin: {top-right-bottom-left};

hoặc margin: {top-bottom} {left-right};

hoặc margin: {top} {right} {bottom} {left};

hoặc tách riêng thành 4 thuộc tính

Đối với các thuộc tính border, outline bắt buộc phải khai báo width, style, color theo cú pháp:

border: {width} {style} {color};

outline: {width} {style} {color};

hoặc tách riêng ra thành 3 thuộc tính riêng Giá trị của style có thể là:

none : bình thường

hidden : ẩn đường viền

dotter : đường viền chấm

dashed : viền nét đứt

solid : viền nét liền

double : viền nét đôi

ĐỊNH DẠNG

KHỐI PHẦN TỬ

float: left|right|none; cho phép phần tử khác tiếp nối bên trái hay bên phải nó

clear: left|right|both; không cho phép

phần tử khác tiếp nối bên trái, bên phải, hay

cả 2 bên nó

display đặt chế độ hiển thị của phần tử

thuộc dạng khối, bảng, dòng hay không

Trang 12

line-height: chiều cao

đầu tiên của khối

văn bản với lề trái

font-size: chiều cao

của ký tự trong văn bản

Đặt thêm font vào cho trang web

vertical-align: canh vị trí ký tự theo chiều dọc

baseline

bottom

top sub

super

middle

text-top text-bottom

font-style: định dạng kiểu hiển thị văn bản

text-decoration: đường ngang qua văn bản

text-transform: chuyển đổi chữ hoa và chữ thường

lowercase uppercase lowercase

Trang 13

ĐỊNH DẠNG DANH SÁCH – BẢNG – CHIA CỘT BÁO Định dạng mục

trong danh sách:

list-style: {type} {position} {image};

Trong đó có thể tách riêng thành từng thuộc tính:

- list-style-type: xác định kiểu ký tự đánh dấu ở đầu mỗi mục

danh sách

- list-style-position: xác định vị trí của ký tự đánh dấu trong

mỗi mục với các giá trị:

+ inside: nằm trong dòng tiêu đề mục

+ outside: ngoài dòng tiêu đề mục

- list-style-image: lấy một hình ảnh thay cho ký tự đánh dấu ở

border-Xác định đường biên của bảng là viền đơn hay viền tách biệt như lúc mặc định ban đầu

• collapse : viền đơn

• separate : viền tách biệt

Chia cột báo

column-width

Độ rộng cột nội dung

column-gap

Khoảng cách giữa các cột nội dung

column-rule:

{width} {style} {color};

Đường phân cách giữa các cột nội dung

Đặt chế độ có hay không việc lặp lại ảnh nền

• no-repeat : không cho phép lặp lại ảnh nền

• repeat : lặp lại ảnh nền theo chiều dọc và

chiều ngang

• repeat-x : lặp ảnh nền theo chiều ngang

• repeat-y : lặp ảnh nền theo chiều dọc

• border-box : nền được gài vào hộp biên

• padding-box : nền được gài vào hộp đệm

• content-box : nền được gài vào nội dung

background-origin

Xác định nguồn gốc nền khi vị trí tương đối

Nó có thể nhận giá trị:

• border-box : nền được gài vào hộp biên

• padding-box : nền được gài vào hộp đệm

• content-box : nền được vào hộp nội dung

trình duyệt Ta có các tùy chọn hỗ trợ trong từng trình duyệt:

- Tộc độ hiệu ứng: gồm các thuộc tính Cú pháp: tùy chọn trình duyệt và thuộc tính tốc độ hiệu ứng không có dấu cách

• animation-name: tên hiệu ứng Nếu không đặt sẽ không xảy ra

hiệu ứng

• animation-duration: thời gian xảy ra hiệu ứng tính theo miligiây

hoặc giây Mặc định là 0

• animation-timing-duration: tốc độ diễn ra hiệu ứng Gồm một

số giá trị: linear (chạy từ từ), ease (khởi đầu chậm rồi nhanh dần

và kết thúc từ từ Đây là giá trị mặc định), ease-in (khởi đầu chậm), ease-out (kết thúc chậm), ease-in-out (khở đầu và kết thúc chậm), cubic-bezier (xác định hiệu ứng trong khoảng từ 0 đến 1)

• animation-delay: thời điểm hình ảnh bắt đầu một hiệu ứng mới

tính theo đơn vị giây và mili giây.(mặc định là 0)

• animation-interation-count: số lần xảy ra hiệu ứng nhận giá trị

là số lần hoặc infinite (vô hạn), giá trị mặc định là 1 lần

• animation-direction: có đảo chiều chuyển động không, mặc

định là 0, đặt giá trị bằng alternate để quay ngược lại

• animation: là một tập hợp các hiệu ứng trên

• animation-play-state: để chọn paused (dừng hiệu ứng), running

(chạy hiệu ứng)

- Cách thức thay đổi hiệu ứng có cú pháp:

@ tùy_chọn_trình_duyệt keyframes tên_hiệu_ứng { tỉ_lệ_%_của_hiệu_ứng {kiểu_mã_css_cần_thay_đổi;}

tùy_chọn_trình_duyệt tên_thuộc_tính: giá trị;

Lưu ý: không có dấu cách giữa tùy chọn trình duyệt và tên thuộc tính ta còn có một số thuộc tính nhỏ khác như:

• transition-property: tên thuộc tính cần thay đổi giá trị

Nó có thể nhận các giá trị như: none (không có thay đổi), all (tất cả các thuộc tính Mặc định), hoặc danh sách các phần tử (từ hai trở nên được cách nhau bởi dấu phẩy)

• transition-duration: xác định số mili giây để hoàn

thành việc thay đổi thuộc tính

• transition-timing-function: tốc độ thay đổi của hiệu

ứng

• transition-delay: khoảng cách giữa hai lần thay đổi

thuộc tính

• transition: tập hợp của 4 thuộc tính trên

transform Dùng để thay đổi hiệu ứng 2D/3D

Trang 14

ĐẠI CƯƠNG VỀ JAVASCRIPT

Javascript là một ngôn ngữ kịch bản phía máy khách, nhằm tăng cường tính tương tác cho trang web;

thường được sử dụng để thay đổi nội dung từng phần trên trang, hay bắt các sự kiện như trong quá

trình tải trang, kích hoạt các nút, hay kiểm tra biểu mẫu trước khi nó được gửi về phía máy chủ

Nội dung tập tin index.html

Ví trí đặt đoạn mã Javascript vào tài liệu HTML

Đoạn mã Js có thể được đặt trong nội dung phần tử script của tài liệu HTML, hoặc có thể được đặt trong tập tin js rồi được gọi vào trong tài liệu HTML thông qua thuộc tính src của phần tử script

 Bạn nên viết nội dung js ra tập tin js bên ngoài, và được gọi vào tập tin HTML bằng thẻ script được tải không đồng bộ cùng tài liệu HTML (nếu có thể) bằng cách sử dụng thuộc tính async để đảm bảo trang HTML được tải nhanh hơn

 Phần tử script nên đặt ở trước thẻ body đóng của tài liệu HTML (nếu có thể)

Câu lệnh

Dấu chấm phẩy (;) được sử dụng sau mỗi câu lệnh,

trong trường hợp các câu lệnh được viết trên nhiều

dòng thì không nhất thiết ta phải dùng dấu châm phẩy

sau mỗi câu lệnh

 Bạn nên đặt tất cả các câu lệnh js trên một dòng để

tiết kiệm dung lượng khi tải trang web

Khối mã lệnh

Trong một số trường hợp, một số câu lệnh được tách

ra thành từng khối (điều kiện, vòng lặp, hàm…) thì

chúng được đặt trong cặp dấu đóng mở ngoặc xoắn ({

và }), nếu trong khối lệnh chỉ có một câu lệnh thì

không nhất thiết phải sử dụng cặp dấu này bao

quanh

Định danh

Tên biến, hàm, phương thức, thuộc tính, đối tượng

trong Javascript được bắt đầu bằng một chữ cái hoặc

dâu gạch dưới (_); có phân biệt chữ hoa, chữ thường

và không được trùng với từ khóa

Danh sách các từ khóa trong Javascript: abstract,

boolean, break, byte, case, catch, char, class,

const, continue, debugger, default, delete, do,

double, else, enum, export, extends, false, final,

finally, float, for, function, goto, if, implements,

import, in, instanceof, int, interface, long, native,

new, null, package, private, protected, public,

return, short, static, super, switch, synchronized,

this, throw, throws, transient, true, try, typeof, var,

void, volatile, while, with

Chú thích

- Chú thích ở cuối một dòng hay cả dòng, ta dùng dấu

// phía trước nội dung chú thích

- Chú thích trên nhiều dòng liên tiếp, hay chỉ một đoạn

ở giữa dòng, ta dùng cặt dấu /* và */ trước và sau nội

dung chú thích tương ứng

Hiển thị các ký tự đặc biệt

\’ dấu nháy đơn \” dấu nháy kép

\\ dấu gạch chéo ngược \n xuống dòng mới

\r dấu trở lại \t dấu tab

\b dấu cách \f dấu feed

Nội dung tập tin scripts.js

Kiểu dữ liệu của biến: tất cả các biến trong Javascript đều là những đối tượng Do đó, mỗi khi ta tạo

ra một biến, mặc định, ta đã tạo ra một đối tượng

var string = “Mai Đức Thạch”; var age = 28; var male = true;

var work = {name: “Lập trình”, year: 2}; var lang = [ “PHP”, “.Net”, “Java”];

Biến cục bộ

- Biến cục bộ là biến được khai báo trong phạm vi của một hàm và chỉ hoạt động trong phạm vi hàm đó

- Bạn có thể dùng các biến cục bộ cùng tên trong các hàm khác nhau bởi vì các biến cục

bộ chỉ có tác dụng trong phạm vi của hàm đó

và nó sẽ không tồn tại khi ra khỏi hàm

- Biến trong javascript được khai báo bắt đầu bằng từ khóa var:

var string = “Webnadi Việt Nam”;

var role;

Biến toàn cục

- Biến toàn cục là biến được khai báo bên ngoài một hàm, và tất cả các kịch bản và hàm trên trang web đều có thể truy cập nó

- Biến toàn cục được mất đi sau khi ta đóng trang

- Tất cả các biến trong Javascript, không được khai báo bằng từ khóa var, mà được gán giá trị đều là những biến toàn cục

TOÁN TỬ TRONG JAVASCRIPT Toán tử số học: thao tác với hai số hay biểu

thức số, trả về giá trị kiểu số

Cộng (+), trừ (-), nhân (*), chia (/), lấy số dư (%), thêm 1 giá trị (++), bớt một giá trị ( ) Đối với chuỗi, toán tử (+) dùng để ghép 2 chuỗi vào cạnh nhau

Toán tử so sánh: so sánh giá trị của 2 số hay biểu thức số, trả về giá trị kiểu logic

Bằng (=), khác (!=), lớn hơn (>), nhỏ hơn (<), lớn hơn hoắc bằng (>=), nhỏ hơn hoặc bằng (<=)

Toán tử logic: thao tác với hai toán hạng

logic, hoặc biểu thức logic, trả về giá trị logic

cùng đúng (&&), một hoặc cả hai cùng đúng (||), phủ định toán hạng (! true)

Toán tử nhị phân: thao tác với hai toán hạng

nhị phân, hoặc biểu thức nhị phân, trả về giá trị nhị phân

và (&), hoặc (|), hoặc loại trừ (^) đảo bit (~), dịch bit (<< hoặc >>)

Toán tử gán: lấy toán hạng bên trái thao tác

với toán hạng bên phải rồi gán lại giá trị cho toán hạng bên trái

+=, -=, *=, /=, %=

Toán tử so sánh:

var a = true ? “Giá trị true” : “Giá trị false”;

kết quả a nhận giá trị là “Giá trị true”

Toán tử typeof: trả về kiểu của toán hạng

typeof string; // trả về “string”

typeof age; // trả về “number”

typeof male; // trả về “boolean”

Trang 15

ĐIỀU KIỆN RẼ NHÁNH

1 Khối lệnh if(điều kiện){true}else{false}

cho phép kiểm tra điều kiện để thực thi các

khối lệnh tương ứng với nó

Ví dụ: đoạn mã kiểm tra số chẵn hay số lẻ

2 Khối lệnh switch(biểu thức){…} cho phép

so sánh giá trị biểu thức với từng trường

Các từ khóa điều khiển vòng lặp:

- Từ khóa break; cho phép dừng việc thực hiện vòng lặp để tiếp tục xuống thực hiện tiếp các câu lệnh phía sau của vòng lặp

- Từ khóa continue; cho phép dừng thực hiện vòng lặp hiện tại để quay lại kiểm tra điều kiện chuyển sang thực hiện vòng lặp kế tiếp

Vòng lặp while(điều kiện){…} cho phép

thực hiện lặp đi lặp lại một khối mã lệnh đến khi điều nhận giá trị false

var a = 1, b = 0;

white(a<=10){

b += a; a++;

} alert(“Kết quả: ”+b);

Vòng lặp do{…}while(điều kiện); cho

phép thực hiện trước lặp đi lặp lại một khối mã lệnh đến khi điều nhận giá trị false thì dừng

var a = 1, b = 0;

do{

b += a; a++;

} white(a<=10);

alert(“Kết quả: ”+b);

Vòng lặp for(;;){} cho phép thiết lập giá trị qua mỗi lần thực hiện lặp đi lặp lại một khối mã lệnh, và nó chỉ dừng lại khi điều kiện nhận giá trị false

var b = 0;

for(var a=1; a<=10; a++){

b += a;

Vòng lặp for…in… cho phép duyệt từng phần tử trong một đối tượng hay mảng

var a = [1,2,3,4,5,6,7,8,9,10], i, b; for(i in a){

b += i;

HÀM

Ví dụ sau đây tính tổng một số từ 0 đến num, minh họa cho việc tạo ra một hàm đơn giản và sử dụng chúng

Hàm cấu trúc:

Ví dụ sau đây tính tích của hai số, minh họa cho việc

sử dụng hàm cấu trúc

var func = new Function("x", "y", "return x*y;");

function secondFunction(x, y){

return func(x,y);

} alert(secondFunction(10, 20));

Hàm nặc danh:

Ví dụ sau đây tính tích của hai số, minh họa cho việc

sử dụng hàm nặc danh

var func = function(x, y)(return x*y;);

function secondFunction(x, y){

return func(x,y);

} alert(secondFunction(10, 20));

ĐỐI TƯỢNG

Một đối tượng trong JavaScript là một tập các thuộc tính và phương thức

+ Các thuộc tính là các đặc tính của một đối tượng

+ Phương thức là các hành động mà đối tượng có thể thực hiện

JavaScript, ngoài cung cấp những đối tượng dựng sẵn còn cho phép bạn tạo ra các đối tượng

(user-defined object) Các đối tượng dựng sẵn là các đối tượng đã được nghĩa từ trước, do vậy bạn chỉ cần sử

dụng các thuộc tính và phương thức của chúng để hoàn thành bài toán Một số đối tượng dựng sẵn trong

JavaScript: Array, Date, Math, String

Đối tượng người dùng định nghĩa là do nhà phát triển (developer) sử dụng script để tạo và định nghĩa ra

các phương thức, thuộc tính cho chúng Có hai phương pháp sau để tạo đối tượng người dùng:

+ Sử dụng đối tượng Object (đối tượng có sẵn) để tạo đối tượng người dùng

+ Định nghĩa nghĩa một template và cài đặt nó bằng từ khóa new

Thuộc tính property của đối tượng:

+ Cho phép bạn có thể thêm các thuộc tính mới, phương thức mới cho các đối tượng đã được tạo

+ Có thể dùng thuộc tính prototype để thêm thuộc tính và phương thức cho đối tượng dựng sẵn

Đối tượng người dùng dựng sẵn Đối tượng người dùng tự tạo

// Tạo đối tượng:

var student =new Object();

return “Lập trình Web”;

} sv1=new student(“Thạch”, 28);

// Goi thuộc tính và phương thức:

Trang 16

ĐỐI TƯỢNG String

Mặc định, khi ta khai báo hay khởi tạo một biến chuỗi, ta đã

tạo ra một đối tượng String Trong Javascript, cung cấp một số

thuộc tính và phương thức thao tác với chuỗi

length

ĐỐI TƯỢNG Number

Mặc định, khi ta khai báo hay khởi tạo một biến số, ta đã tạo

ra một đối tượng Number Trong Javascript, cung cấp một số

thuộc tính và phương thức thao tác với đối tượng Number

toString()

ĐỐI TƯỢNG Math

Đối tượng Math là một đối tượng mặc định trong Javascript, cho phép thực hiện những thao tác tính toán

Cú pháp để gọi phương thức và thuộc tính của đối tượng Math

Math.<attribute | method>;

Bạn không thể khởi tạo một đối tượng Math bằng từ khóa new

thao tác với đối tượng Math

toSource()

ĐỐI TƯỢNG Boolean

Mặc định, khi ta khai báo hay khởi tạo một biến logic, ta đã

tạo ra một đối tượng Boolean Trong Javascript, cung cấp một

số phương thức thao tác với đối tượng Boolean

ĐỐI TƯỢNG Array

Mặc định, khi ta khai báo hay khởi tạo một biến mảng, ta đã

tạo ra một đối tượng Array Trong Javascript, cung cấp một số

thuộc tính và phương thức thao tác với đối tượng Array

ĐỐI TƯỢNG Date

Thông qua việc khởi tạo một đối tượng Date, bạn có thể tiến hành thao tác với các phương thức của nó

BIỂU THỨC QUY TẮC

Tạo một đối tượng biểu thức qui tắc:

Trong đó:

- Bổ từ:

i Thực hiện tìm kiếm không phân biệt chữ hoa chữ thường

g Thực hiện tìm kiếm toàn bộ (tìm kiếm toàn bộ chứ không dừng

lại ở lần đầu tiên)

m Thực hiện kết hợp trên nhiều dòng

[A-z] Tìm một ký tự chữ hoa hoặc chữ thường

[abc] Tìm chuỗi có chứa các ký tự abc

[^abc] Tìm chuỗi không chứa các ký tự abc

[a|b|c] Tìm có lựa chọn a hoặc b hoăc c

+ Tìm ký tự theo định dạng đặc biệt Tìm một ký tự đơn, ngoại trừ ký tự bắt đầu một dòng mới

\xdd Tìm một ký tự theo định

nghĩa thập lục phân + Lượng hóa phạm vi ký tự cần tìm:

n+ Đánh giá bất kỳ chuỗi nào chứa ít nhất một ký tự n

n{X} Đánh giá bất kỳ chuỗi nào

mà ký tự n xuất hiện X lần n* Đánh giá bất kỳ chuỗi nào

không có hoặc có nhiều hơn sự xuất hiện của n

n{X,Y} Đánh giá bất kỳ chuỗi nào

mà ký tự n xuất hiện từ X đến Y lần

n? Đánh giá bất kỳ chuỗi nào không chứa hoặc một lần xuất hiện n

n{Y,} Đánh giá bất kỳ chuỗi nào

?=n Đánh giá bất kỳ chuỗi nào

được theo sau bởi chuỗi n

^n Đánh giá bất kỳ chuỗi nào với n là ký tự bắt đầu của

nó

?!n Đánh giá bất kỳ chuỗi nào

được theo sau không phải chuỗi n

Danh sách thuộc tính và phương thức:

Một số thuộc tính, phương thức

tổng quát

unescape()

ĐỐI TƯỢNG JAVASCRIPT

Trang 17

ĐỐI TƯỢNG window

Đối tượng window được sử dụng khi bạn muốn lấy thông tin cửa

sổ màn hình trình duyệt, hay kích hoạt mở một số popup hay cửa sổ

màn hình khác

Những thuộc tính và phương thức của đối tượng này, bạn có thể

gọi thẳng luôn mà không cần nhất thiết phải gọi:

window.<attribute | method>

innerHeight innerWidth outerHeight

screenLeft screenTop

scrollTo()

ĐỐI TƯỢNG navigator

Đối tượng navigator được sử dụng giúp bạn lấy thông tin trình

duyệt của khách viếng thăm web của bạn

userAgent

ĐỐI TƯỢNG screen

Đối tượng screen được sử dụng giúp bạn lấy thông tin màn hình

thiết bị khách viếng thăm web của bạn

availHeight availWidth colorDepth

ĐỐI TƯỢNG history

Đối tượng history được sử dụng giúp bạn lấy thông tin URL mà

người dùng đã truy cập vào trang của bạn

ĐỐI TƯỢNG location

Đối tượng location chứa các thông tin về URL hiện tại

protocol search

ĐỐI TƯỢNG document

Mỗi một đối tượng document được nạp vào một cửa sổ trình duyệt trở thành một đối tượng document

doctype documentElement documentURI domConfig implementation inputEncoding strictErrorChecking xmlEncoding xmlStandalone xmlVersion

createCDATASection() createElement() createElementNS()

BẮT LỖI TRY … CATCH

Trong Javascript, đôi khi trong quá trình code phát sinh ra một số lỗi

Để bắt được những lỗi này, Javascript, sử dụng khối lệnh try … catch

THAO TÁC VỚI COOKIE

Ví dụ dưới đây là một ví dụ đơn giản khi thao tác với cookie

function setCookie(cname,cvalue,exdays) { var d = new Date();

d.setTime(d.getTime() + (exdays*24*60*60*1000));

var expires = "expires=" + d.toGMTString();

document.cookie = cname+"="+cvalue+"; "+expires;

} function getCookie(cname) { var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1);

if (c.indexOf(name) == 0) { return c.substring(name.length, c.length);

} } return "";

} function checkCookie() { var user=getCookie("username");

if (user != "") { alert("Welcome again " + user); } else {

user = prompt("Please enter your name:","");

if (user != "" && user != null) { setCookie("username", user, 30); } }

} checkCookie();

LƯU TRỮ CỤC BỘ

Với lưu trữ cục bộ, ứng dụng web có thể lưu dữ liệu cục bộ trên trình duyệt của người dùng So với sử dụng cookie, lưu trữ cục bộ là bảo mật hươn và lượng lưu trữ lớn hơn Lưu trữ cục bộ cung cấp 2 đối tượng để lưu trữ dữ liệu trên máy khách

- Đối tượng localStorage lưu trữ dữ liệu lâu dài trên máy khách, và không bị mất từ ngày này quan ngày khác

function CountSession () { if(typeof(Storage) !== "undefined") {

if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; } else { localStorage.clickcount = 1; }

document.getElementById("result").innerHTML = "Bạn đã truy cập vào trang này: " + localStorage.clickcount + " lần.";

} else { document.getElementById("result").innerHTML = "Trình duyệt của bạn không hỗ trợ lưu trữ cục bộ.";

} } CountSession ();

</script>

- Đối tượng sessionStorage lưu trữ dữ liệu như một phiên làm việc

Dữ liệu sẽ mất khi người dùng đóng tab trình duyệt chỉ định

function CountOneSession() { if(typeof(Storage) !== "undefined") {

if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 1; }

document.getElementById("result").innerHTML = "Số lần truy cập gần đây:

" + sessionStorage.clickcount + " lần.";

} else { document.getElementById("result").innerHTML = "Trình duyệt của bạn không hỗ trợ lưu trữ cục bộ.";

} } CountOneSession();

</script>

Trang 18

ĐỊNH VỊ GEOLOCATION

HTML5 Geolocation API cho phép bạn chia sẻ vị trí của mình với các

trang web bạn yêu thích Javascript sẽ trả về vĩ độ và kinh độ của bạn

a Tạo một đối tượng định vị:

var geolocation = navigator.geolocation;

getCurrentPosition() Lấy vị trí hiện tại của người sử dụng Cú pháp:

var retval = geolocation.getCurrentPosition (successCallback, errorCallback, options);

watchPosition() Lấy thông tin cập nhật định kỳ về vị trí địa lý

hiện tại của thiết bị

var watchId = geolocation.watchPosition(successCallback, errorCallback, options);

clearWatch() Hủy bỏ việc thực hiện phương thức

watchPosition đã gọi

Ví dụ:

function LayVitri() {

var geolocation = navigator.geolocation;

geolocation.getCurrentPosition(HienthiVitri, LoiXuly, {maximumAge:75000});

}

c Các tham số của các phương thức getCurrentPosition() và

watchPosition():

- successCallback: hàm xử lý khi gọi vị trí địa lý thành công Hàm này

nhận vào một tham số vị trí position Trong hàm này ta sử dụng một đối

tượng vị trí (position) để hiển thị đầy đủ thông tin vị trí địa lý Nó bao

gồm các thuộc tính:

coords Lấy vị trí địa lý của thiết bị Vị trí

được thể hiện như một tập hợp tọa

độ địa lý cùng với tên và tốc độ

latitude Lấy vĩ độ thập phân Nó nhận giá trị

heading Chỉ định hướng di chuyển của thiết bị

so với cực Bắc theo chiều kim đồng

function HienthiVitri (position) {

var vido = position.coords.latitude;

var kinhdo = position.coords.longitude;

UNKNOWN_ERROR - Không lấy được vị trí của thiết bị do

một lỗi không rõ (tương ứng code=0)

PERMISSION_DENIED - Không lấy được vị trí của thiết bị do

ứng dụng không được phép sử dụng (tương ứng code=1)

POSITION_UNAVAILABLE - Vị trí của thiết bị không được xác định

(tương ứng code=2)

TIMEOUT - Không được lấy vị trí của thiết bị trong

một khoảng thời gian tối đa quy định (tương ứng code=3)

message Trả về nguyên nhân không lấy được

vị trí

Ví dụ:

function LoiXuly (error) { switch(error.code) { case error.PERMISSION_DENIED:

x.innerHTML="Thiết bị do ứng dụng không được phép sử dụng.";

- options: sử dụng một đối tượng có sử dụng mã JSON để xác định một hoặc nhiều thuộc tính để trả về giá trị mong muốn Nó có thể nhận thuộc tính và giá trị như sau:

enableHighAccuracy Xác định nhận giá trị vị trí chính xác nhất có

thể Nó có thể nhận giá trị true hoặc false

timeout Xác định số mili giây để chờ trả về thông tin

vị trí

maximumAge Xác định số mili giây tối đa để trả về thông tin

Ví dụ:

function LayVitri(){

var dinhvi = navigator.geolocation;

dinhvi.getCurrentPositio(HienthiVitri, LoiXuly, {maximumAge:75000});

<p id="demo">Click nút để lấy vị trí của bạn:</p>

var x = document.getElementById("demo");

function LayVitri() {

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(HienthiVitri, HienthiLoi);

}else { x.innerHTML = "Trình duyệt này không hỗ trợ định vị."; } }

function HienthiVitri(position) { lat = position.coords.latitude;

lon = position.coords.longitude;

latlon = new google.maps.LatLng(lat, lon) mapholder = document.getElementById('mapholder') mapholder.style.height = '250px';

mapholder.style.width = '500px';

var myOptions = { center: latlon, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false,

navigationControlOptions: { style:

google.maps.NavigationControlStyle.SMALL } };

var map = new google.maps.Map(document.getElementById("mapholder"), myOptions); var marker = new google.maps.Marker({ position: latlon, map: map, title:

"Bạn đang ở đây!" });

} function HienthiLoi(error) { switch (error.code) { case error.PERMISSION_DENIED:

x.innerHTML = "Người dùng cấm sử dụng định vị."; break; case error.POSITION_UNAVAILABLE:

x.innerHTML = "Thông tin vị trí không được xác định."; break;

</body>

</html>

Định dạng
Số trang	36
Dung lượng	2,17 MB