Giáo trình mô đun Thiết kế web (Nghề Công nghệ thông tin - Trình độ cao đẳng) – CĐ Kỹ thuật Công nghệ BR–VT

Nội dung giáo trình Thiết kế web được chia thành 8 bài, trong đó: Bài 1: Môi trường tạo trang web tĩnh DreamWeaver, thẻ HTML; Bài 2: Tạo trang web bằng HTML5; Bài 3: Hoàn chỉnh giao diện trang web với CSS; Bài 4: Tùy biến giao diện web với CSS3; Bài 5: Xử lý tương tác với Javascript; Bài 6: Một số kỹ thuật thiết kế nâng cao; Bài 7: Tạo giao diện chuyên nghiệp bằng jQuery; Bài 8: Publish website.

BM/QT10/P.ĐTSV/04/04 Ban hành l n: 3 ầ

BÀ R A – VŨNG TÀU, NĂM 2020Ị

Tài li u đệ ược biên so n thu c lo i giáo trình ph c v  gi ng d y và h cạ ộ ạ ụ ụ ả ạ ọ  

t p, l u hành n i b  trong Nhà trậ ư ộ ộ ường nên các ngu n thông tin có th  đồ ể ượ  cphép dùng nguyên b n ho c trích dùng cho các m c đích v  đào t o và thamả ặ ụ ề ạ  

kh o.ả

M i m c đích khác mang tính l ch l c ho c s  d ng v i m c đích kinhọ ụ ệ ạ ặ ử ụ ớ ụ  doanh thi u lành m nh s  b  nghiêm c m.ế ạ ẽ ị ấ

L I GI I THI UỜ Ớ Ệ

Giáo trình “Thi t k  web” đế ế ược biên so n d a trên khung chạ ự ương trình đào t o Cao đ ng ngh  Công ngh  Thông tin đã đạ ẳ ề ệ ược Trường Cao đ ng Kẳ ỹ thu t Công nghê Bà R a – Vũng Tàu phê duy t.ậ ị ệ

Tác gi  đã nghiên c u m t s  tài li u, công ngh  hi n đ i k t h p v iả ứ ộ ố ệ ệ ệ ạ ế ợ ớ  kinh nghi m làm vi c th c t  đ  vi t nên giáo trình này. N i dung đệ ệ ự ế ể ế ộ ược tác 

gi  trình bày cô đ ng, d  hi u kèm theo các bả ộ ễ ể ước hướng d n th c hành chiẫ ự  

ti t theo nguyên t c quan tâm đ n k t qu  đ u ra, kh  năng t  h c và kế ắ ế ế ả ầ ả ự ọ ỹ năng c n thi t đ  HSSV có th  hoàn thànhầ ế ể ể   thi t k  và l p trình nhúng x  lý ế ế ậ ử  

t ươ ng tác c  b n trên trang web v i s  k t h p c a HTML5 và CSS3, l p trình ơ ả ớ ự ế ợ ủ ậ   nhúng x  lý c  b n trên trang web b ng Javascript, thi t k  đ ử ơ ả ằ ế ế ượ c giao di n trang ệ   web chuyên nghi p v i jQuery ệ ớ , … t o và qu n lý n i dung c a website ạ ả ộ ủ  đáp  ngứ  nhu c u th c t  c a doanh nghi p.ầ ự ế ủ ệ

N i dung giáo trình độ ược chia thành 8 bài, trong đó:

Bài 1: Môi trường t o trang web tĩnh DreamWeaver, th  HTMLạ ẻ

Bài 2: T o trang web b ng HTML5ạ ằ

Bài 3: Hoàn ch nh giao di n trang web v i CSSỉ ệ ớ

Bài 4: Tùy bi n giao di n web v i CSS3ế ệ ớ

Bài 5: X  lý tử ương tác v i Javascriptớ

Bài 6: M t s  k  thu t thi t k  nâng cao ộ ố ỹ ậ ế ế

Bài 7: T o giao di n chuyên nghi p b ng jQueryạ ệ ệ ằ

Bài 8: Publish website

Trong quá trình biên so n, ch c ch n giáo trình còn nhi u thi u sót. Tácạ ắ ắ ề ế  

gi  r t mong nh n đả ấ ậ ược ý ki n đóng góp c a quý th y/cô và các em h c sinh,ế ủ ầ ọ  sinh viên đ  ti p t c hoàn thi n h n.ể ế ụ ệ ơ

Xin chân thành c m  n quý đ ng nghi p, b n bè đã có nh ng ý ki nả ơ ồ ệ ạ ữ ế  đóng góp trong quá trình biên so n giáo trình này.ạ

Bà R a – Vũng Tàu, ngày …… tháng …… năm ………ị

Tham gia biên so nạ

1. Nguy n Ph m Ái Hễ ạ ương – Ch  biênủ

M C L CỤ Ụ

b ng Javascript, thi t k  đ ằ ế ế ượ c giao di n trang web chuyên nghi p v i jQuery ệ ệ ớ , 

… t o và qu n lý n i dung c a website ạ ả ộ ủ  đáp  ng nhu c u th c t  c a doanhứ ầ ự ế ủ  nghi p.ệ

V  năng l c t  ch  và trách nhi m:ề ự ự ủ ệ

Có tinh th n trách nhi m, ý th c t  ch c k  lu t, tác phong công ầ ệ ứ ổ ứ ỷ ậ

nghi p, tinh th n h p tác trong công vi cệ ầ ợ ệ

Có tính ch  đ ng, đ c l p trong công vi c, t  h củ ộ ộ ậ ệ ự ọ  c p nh t ki n th c, ậ ậ ế ứnâng cao trình đ  chuyên môn.ộ

Có kh  năng t  ch c và đi u hành m t nhóm, đánh giá đả ổ ứ ề ộ ược các thành viên trong nhóm

Rèn luy n tính c n th n, kiên trì, sáng t o, đ c l p và ho t đ ng nhóm. ệ ẩ ậ ạ ộ ậ ạ ộ

B o đ m an toàn và v  sinh cho ngả ả ệ ười và thi t b  trong phòng máyế ị

lu n, bài t pậ ậ

Ki mể   tra

1 Bài 1:  Môi trường t o trang web tĩnhạ  

3 Bài 3: Hoàn ch nh giao di n trang webỉ ệ  

5.T o hi u  ng đ i đ nh d ng cho menu ạ ệ ứ ổ ị ạ 4.5 1.5 3 0

6.T o khung vi n bo tròn cho n i dung ạ ề ộ 3 1.0 2 0

6 Bài 6: M t s  k  thu t thi t k  nângộ ố ỹ ậ ế ế  

BÀI 1: MÔI TRƯỜNG T O TRANG WEB TĨNHẠ  

DREAMWEAVER

Mã bài: 18.1

Gi i thi u:ớ ệ

Adobe DreamWeaver là  ng d ng thi t k  web đứ ụ ế ế ượ ử ục s  d ng ph  bi nổ ế  

nh t hi n nay. Adobe DreamWeaver h  tr  các ch c năng m nh m  cho cấ ệ ỗ ợ ứ ạ ẽ ả 

người thi t k  và l p trình web.ế ế ậ

Hình 1.1. Giao di n Adobe DreamWeaver ệ

1.2. Qu n lý các paletteả

Vào menu Window  Ch n/b  ch n đ  hi n/ n palette.ọ ỏ ọ ể ệ ẩ

Hình 1.2. V  trí hi n th  c a các palette ị ể ị ủ

Mu n m  r ng palette nào thì click chu t lên bi u tố ở ộ ộ ể ượng c a palette đóủ

Click chu t lên bi u tộ ể ượng   đ  m  r ng t t c  paletteể ở ộ ấ ả

2 Qu n lý các siteả

Vào menu Site  Manage Sites. Xu t hi n h p tho i qu n lý các site.ấ ệ ộ ạ ả

Hình 1.3. H p tho i Manage Sites ộ ạ

Trong h p tho i Manage Site, ch n site c n xóa trong danh sáchộ ạ ọ ầ

Click chu t lên bi u tộ ể ượng Delete the current selected sites ( )

3 Qu n lý n i dung trong siteả ộ

3.1. C u trúc siteấ

.js: t p tin javascript, ch a các đo n mã th c thi trên trình duy t, thậ ứ ạ ự ệ ườ  ng

đượ ặt đ t trong th  m c scriptsư ụ

Click đôi chu t lên trang web c n thi t kộ ầ ế ế

Click chu t lên bi u tộ ể ượng vùng nhìn c n ch nầ ọ

1 Code: thi t k  trang b ng các th  HTMLế ế ằ ể

2 Design: thi t k  trang b ng cách kéo th  các element vào trang webế ế ằ ả

3 Split: tách c a s  tài li u thành 2 vùng nhìn Code và Designử ổ ệ

5 Th  HTML c  b n ẻ ơ ả

5.1. Tìm hi u c u trúc tài li u HTMLể ấ ệ

H u h t các element b t đ u b ng th  m  và k t thúc b ng th  đóng. Víầ ế ắ ầ ằ ẻ ở ế ằ ẻ  

2 <hr />: t o đạ ường k  n m ngangẻ ằ

3 <img … />: chèn  nh (s  đả ẽ ược tìm hi u chi ti t   ph n sau)ể ế ở ầ

Thu c tính c a element độ ủ ược đ t trong th  m ặ ẻ ở

BR: Ng t xu ng dòng trong đo n văn b nắ ố ạ ả

HR: T o đạ ường k  ngangẻ

UL: T o danh sách không đánh s  th  tạ ố ứ ự

LI: T o m c trong danh sáchạ ụ

Ví d :ụ

5.2.6. FORM, INPUT, SELECT, OPTION

FORM: T o form cho ngạ ười truy c p nh p thông tin vào trang webậ ậ

INPUT: T o các đi u khi n cho phép ngạ ề ể ười dùng nh p/ch n d  li u, đ tậ ọ ữ ệ ặ  trong FORM

SELECT: T o danh sách ch nạ ọ

OPTION: T o m c trong danh sách ch nạ ụ ọ

Ví d :ụ

CÂU H I, BÀI T PỎ Ậ

1.1. Thi t k  m t trang web c  b n theo m u: t o layout cho TrangChu.htmlế ế ộ ơ ả ẫ ạ

2.2. T o form và các đi u khi n trong formạ ề ể

YÊU C U KI M TRA, ĐÁNH GIÁ K T QU  H C T PẦ Ể Ế Ả Ọ Ậ

Đúng c u trúc tài li u HTMLấ ệ

Đúng quy t c: m  trắ ở ước, đóng sau

Giao di n đăng ký ph i đệ ả ược đ t trong formặ

BÀI 2: T O TRANG WEB B NG HTML5Ạ Ằ

Mã bài: 18.2

Gi i thi u:ớ ệ

HTML5 là phiên b n m i nh t c a HTML, h  tr  các element ng  nghĩaả ớ ấ ủ ỗ ợ ữ  

rõ ràng. V i HTML5, các trang web đớ ược thi t k  v i s  lế ế ớ ố ượng element ít 

h n, rõ ràng h n, chèn multimedia đ n gi n h n.ơ ơ ơ ả ơ

M c tiêu:ụ

Bi t công d ng các tag m i trong HTML5ế ụ ớ

B  c c, thi t k  đố ụ ế ế ược trang web b ng HTML5ằ

header: đ nh nghĩa vùng header (banner) c a trang/bài vi tị ủ ế

SVG được s  d ng đ  v  đ  h a 2D và các  ng d ng đ  h a trênử ụ ể ẽ ồ ọ ứ ụ ồ ọ  website, ph n l n h u ích cho các s  đ  ki u vecto nh  các bi u đ  Pie, cácầ ớ ữ ơ ồ ể ư ể ồ  

đ  th  hai chi u trong h  t a đ  X, Yồ ị ề ệ ọ ộSVG là chu n chính th c c a t  ch c web th  gi i W3C.ẩ ứ ủ ổ ứ ế ớ

u đi m

Hình  nh SVG có th  phóng to nh ng không v   nh.ả ể ư ỡ ảHình  nh SVG có th  đả ể ược in v i ch t lớ ấ ượng cao   b t k  đ  phânở ấ ỳ ộ  

gi i nào.ảHình  nh SVG có th  đả ể ượ ạc t o và ch nh s a b ng javascript.ỉ ử ằHình  nh SVG có th  tìm ki m, đánh ch  m c, nén,…ả ể ế ỉ ụ

Hình   nh   SVG   có   th   chuy n   đ ng   s   d ng   các   thành   ph nả ể ể ộ ử ụ ầ  animation đã xây d ng s n.ự ẵ

Hình  nh SVG có th  ch a liên k t đ n b t k  tài li u nào khác.ả ể ứ ế ế ấ ỳ ệ

SVG h u nh  đầ ư ược h  tr  trên t t c  các trình duy t.ỗ ợ ấ ả ệ

Ph n t  <svg> trong HTML là ầ ử m t vùng ch a đ  v  đ  h a.ộ ứ ể ẽ ồ ọ

SVG có m t vài phộ ương th c đ  v  nh : đứ ể ẽ ư ường th ng, hình h p, hìnhẳ ộ  tròn, văn b n và hình  nh đ  h a ả ả ồ ọ

3.2.  V  đẽ ường tròn SVG

Đ  v  để ẽ ường tròn ta dùng thẻ <circle>

Các thu c tính trongộ  <circle> là:

cx: v  trí tâm, tính t  mép trái c a SVG.ị ừ ủ

cy: v  trí tâm, tính t  mép trên.ị ừ

Các tham s  tố ương t  khi v  hình tròn, thêm hai thu c tính:ự ẽ ộ

Th  HTML5 <audio> và <video> làm nó đ n gi n đ  thêm đa phẻ ơ ả ể ươ  ng

ti n t i m t Website. B n c n thi t l p thu c tínhệ ớ ộ ạ ầ ế ậ ộ  src đ  nh n di n ngu nể ậ ệ ồ  

phương ti n và bao g m m t thu c tính control đ  ngệ ồ ộ ộ ể ườ ử ụi s  d ng có thể 

ch i và d ng đa phơ ừ ương ti n.ệ

4.1. Nhúng video

M t ph n t  video cho phép nhi u ph n t  source và trình duy t s  sộ ầ ử ề ầ ử ệ ẽ ử 

d ng đ nh d ng đụ ị ạ ược nh n ra đ u tiên:ậ ầ

 Ví d : play m t video đã choụ ộ

4.2. Nhúng audio

Các đ nh d ng audio đị ạ ượ ử ục s  d ng ph  bi n nh t làổ ế ấ  ogg, mp3 và wav

M t ph n t  audio cho phép nhi u ph n t  source và trình duy t s  sộ ầ ử ề ầ ử ệ ẽ ử 

d ng đ nh d ng mà nó nh n ra đ u tiên:ụ ị ạ ậ ầ

CÂU H I, BÀI T PỎ Ậ

T o trang web theo m u c a bài 1 v i cách s  d ng t i đa th   HTML5ạ ẫ ủ ớ ử ụ ố ẻ

BÀI 3: HOÀN CH NH GIAO DI N TRANG WEB V I CSSỈ Ệ Ớ

Mã bài: 18.3

Gi i thi u:ớ ệ

B t k  trang web nào, ngoài hi n th  n i dung, nó cũng ph i đấ ỳ ể ị ộ ả ược đ nhị  

d ng, trang trí đ  thu hút và ti n l i cho ngạ ể ệ ợ ười xem. Không ngo i tr  có nhi uạ ừ ề  

n i dung độ ược đ nh d ng gi ng nhau. V i CSS, ngị ạ ố ớ ười thi t k  web ch  c nế ế ỉ ầ  

vi t k ch b n đ nh d ng m t l n và s  d ng cho nhi u n i dung.ế ị ả ị ạ ộ ầ ử ụ ề ộ

M c tiêu:ụ

Bi t công d ng c a CSS, các lo i CSSế ụ ủ ạ

Thi t k  đế ế ược trang web v i HTML, HTML5, và CSSớ

2 border[­top/right/bottom/left]: đường vi n xungề

3 padding[­top/right/bottom/left]: kho ng cách gi a đả ữ ường vi n v i n iề ớ ộ  dung bên trong

4 margin[­top/right/bottom/left]: kho ng cách gi a vùng ch a v i đả ữ ứ ớ ườ  ng

vi nề

5 background­color, background­image: màu n n,  nh n nề ả ề

8 T o đ nh d ng chung cho trang webạ ị ạ

9 T o giao di n trang web canh gi a trình duy tạ ệ ữ ệ

H u h t các màn hình LCD ph  bi n trên th  trầ ế ổ ế ị ường ngày nay là màn 

nh r ng. T  l  màn hình r ng này có th  gây  nh h ng t i các nhà

web và cách h  trình bày trang Web.ọ

V i m t đo n mã Cascading Style Sheet (CSS) ng n g n, b n có thớ ộ ạ ắ ọ ạ ể 

đi u ch nhề ỉ  thi t k  trang webế ế  vào v  trí trung tâm trên b t k  màn hình nào choị ấ ỳ  

dù màn hình đó theo t  l  n m ngang hay th ng đ ng.ỷ ệ ằ ẳ ứ

T o file .css nh  sau: ạ ư đ  đi u ch nh sao cho các trình duy t ch y nhể ề ỉ ệ ạ ư nhau và b  đi m t s  hi n th  không c n thi t (b  list­style cho <ol> và <ul>,ỏ ộ ố ể ị ầ ế ỏ  

b  border cho <img />)ỏ

10 T o hi u  ng đ i đ nh d ng cho menuạ ệ ứ ổ ị ạ

Vi tế  CSS cho <div id=“gNav” > 

Thêm hi u  ng cho gNavệ ứ  khi hover (di chuy n chu t đ i hi u  ng)ể ộ ổ ệ ứ

11 T o khung vi n bo tròn cho n i dungạ ề ộ

B n giá tr  – bán kính đố ị ường vi n: 15px 50px 30px 5px;ề  (giá tr  đ u tiênị ầ  

áp d ng cho góc trên cùng bên trái, giá tr  th  hai áp d ng cho góc trên cùngụ ị ứ ụ  

bên ph i, giá tr  th  ba áp d ng cho góc dả ị ứ ụ ưới cùng bên ph i và giá tr  th  t  ápả ị ứ ư  

d ng cho góc dụ ưới cùng bên trái):

Ba giá tr  – bán kính đị ường vi n: 15px 50px 30px;ề  (giá tr  đ u tiên ápị ầ  

d ng cho góc trên cùng bên trái, giá tr  th  hai áp d ng cho các góc trên cùngụ ị ứ ụ  bên ph i và dả ưới cùng bên trái và giá tr  th  ba áp d ng cho góc dị ứ ụ ưới cùng bên 

ph i):ả

Hai giá tr  – bán kính đị ường vi n: 15px 50px;ề  (giá tr  đ u tiên áp d ngị ầ ụ  cho các góc trên cùng bên trái và dưới cùng bên ph i và giá tr  th  hai áp d ngả ị ứ ụ  cho các góc trên cùng bên ph i và dả ưới cùng bên trái):

M t giá tr  – bán kính độ ị ường vi n: 15px;ề  (giá tr  áp d ng cho t t c  b nị ụ ấ ả ố  góc, được làm tròn nh  nhau:ư

CÂU H I, BÀI T PỎ Ậ

Vi t css cho bài t p c a bài h c s  2 c a trang web m u:ế ậ ủ ọ ố ủ ẫ

3.1 Vi tế  css cho ph n headerầ

3.2 Vi t css cho button c a ph n headerế ủ ầ

3.3 Vi t css cho các đế ường th ng đ ng trong danh sách link c a ph n headerẳ ứ ủ ầ

BÀI 4: TÙY BI N GIAO DI N V I CSS3Ế Ệ Ớ

CSS3 là tiêu chu n m i nh t c a CSS, hoàn toàn tẩ ớ ấ ủ ương thích v i cácớ  phiên b n trả ước c a CSS. V i CSS3, chúng ta có th  đ nh d ng trang web đaủ ớ ể ị ạ  màu s c sinh đ ng, t o k ch b n hi u  ng ho t hình cho trang web mà khôngắ ộ ạ ị ả ệ ứ ạ  

c n ph i bi t b t k  ngôn ng  l p trình nào.ầ ả ế ấ ỳ ữ ậ

Hình 4.5. K t qu  c a  nh làm k  khung (border images) ế ả ủ ả ẻ

Ví d  1: Dùng nhi u  nh làm n nụ ề ả ề

Hình 4.6. K t qu  c a ví d  1 ế ả ủ ụ

Ví d  2: Thi t l p kích thụ ế ậ ướ ảc  nh n nề

Hình 4.7. K t qu  c a ví d  2 ế ả ủ ụ

15 Gradients

16 Shadows

Text shadow

N i dung trong  HTMLộ N i dung CSSộ

K t qu  hi n thế ả ể ị

Word Breaking: x  lý giử ữ hay ng t nh ng t  dàiắ ữ ừ

18 Fonts

19 2D Transforms

T nh ti n (translate)ị ế

Xoay (rotate)

Kéo xiên (skew)

Ma tr n bi n đ i (matrix): k t h p Scale, Skew và Translateậ ế ổ ế ợmatrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

20 3D Transforms

Xoay xung quanh tr c X (rotateX)ụ

Xoay xung quanh tr c Z (rotateZ)ụ

21 Transitions

Ví d  1: Khi di chuy n chu t lên hình vuông thì chi u ngang s  thay đ i đ nụ ể ộ ề ẽ ổ ế  300px trong vòng 2 giây

Ví d  2: Chi u ngang thay đ i đ n 300px trong 2 giây, chi u cao thay đ i đ nụ ề ổ ế ề ổ ế  300px trong 4 giây.

Ví d  3: Ch  1 giây, chi u ngang thay đ i đ n 300px trong 3 giây ti p theo.ụ ờ ề ổ ế ế

Ví d  4: Thay đ i chi u ngang, cao trong 2 giây, xoay trong 3 giây.ụ ổ ề

  Thu c tính box­sizing c a CSS3 đ m b o đúng padding, border mà v nộ ủ ả ả ẫ  

đ m b o kích thả ả ước đúng v i giá tr  c a width và height.ớ ị ủ

CÂU H I, BÀI T PỎ Ậ

5.1 Thi t k  trang web có giao di n nh  hình bên dế ế ệ ư ưới

5.2  Thi t k  trang web theo m u sau:ế ế ẫ

BÀI 5: X  LÝ TỬ ƯƠNG TÁC V I JAVASCRIPTỚ

Đo n Javascript có th  đạ ể ược đ t trong <body> … </body> ho c <head> …ặ ặ  

</head> c a tài li u HTML.ủ ệ

Cách 1: Vi t tr c ti p trong tài li u HTMLế ự ế ệ

Cách 2: Vi t các l nh Javascript trong m t t p tin script có ph n m  r ng .jsế ệ ộ ậ ầ ở ộ  sau đó chèn vào tài li u HTML.ệ

Ki u d  li u: javascript không quan tâm đ n ki u d  li u c a bi n khiể ữ ệ ế ể ữ ệ ủ ế  

m i khai báo. Bi n trong Javascript có th  l u tr  giá tr  các ki u dớ ế ể ư ữ ị ể ữ 

li u: s  (number), chu i (string), m ng (array), đ i tệ ố ỗ ả ố ượng (object), …

Javascript linh đ ng trong vi c x  lý ki u d  li u khi th c hi n các phépộ ệ ử ể ữ ệ ự ệ  tính

Ch  s  ph n t  đ u tiên c a m ng là 0ỉ ố ầ ử ầ ủ ả

 cars[0] là “Saab”

Ki u đ i tể ố ượng (object)

Trong ví d  trên, đ i tụ ố ượng person có 4 thu c tính: ộ firstName, lastName, 

age và eyeColor

Toán t  typeOf: cho bi t ki u d  li u c a bi n/bi u th c.ử ế ể ữ ệ ủ ế ể ứ

Trong Javascript, m t bi n ch a  độ ế ư ược gán giá tr  thì s  có giá tr  làị ẽ ị  

undefined và toán t  typeOf cũng s  tr  v  ử ẽ ả ềundefined

Giá tr  r ngị ỗ

Giá tr  ịnull

S  khác nhau gi a ự ữ undefined và null

Các toán t  gánử

Toán t  n i chu iử ố ỗ

N i chu i và số ỗ ố

Toán t  so sánh và lu n lýử ậ

Bi u th c đi u ki nể ứ ề ệ

Ví d :ụ

Toán t  trên ki u d  li uử ể ữ ệ

1 Thu c tính length: cho bi t s  ph n t  trong m ngộ ế ố ầ ử ả

Ví d :ụ

Các hàm ghi trên date

3.4. Xây d ng hàmự

Hàm được đ nh nghĩa b t đ u b ng t  khóa function, theo sau là tên hàm, sauị ắ ầ ằ ừ  

đó là các tham s  đố ược đ t trong c p d u (). Hàm có th  có 1 ho c nhi uặ ặ ấ ể ặ ề  tham s  ho c không có tham s  Các l nh th c thi đố ặ ố ệ ự ược đ t trong c p d u {}.ặ ặ ấ

C u trúc:ấ

Các l nh th c thi s  đệ ự ẽ ược th c hi n khi có l i g i hàm (đúng quy t c).ự ệ ờ ọ ắ

Ví d :ụ

Hàm tr  v  giá trả ề ị

CÂU H I, BÀI T PỎ Ậ

5.1. Thi t k  trang web hi n th  s  tu i sau khi nh p năm sinh.ế ế ể ị ố ổ ậ

5.2. Thi t k  trang web hi n th  chu vi và di n tích hình ch  nh t.ế ế ể ị ệ ữ ậ

5.3. Thi t k  trang web gi i và bi n lu n phế ế ả ệ ậ ương trình ax2 + bx + c = 0

YÊU C U KI M TRA, ĐÁNH GIÁ K T QU  H C T PẦ Ể Ế Ả Ọ Ậ

Xây d ng hàm tính toánự

Hướng   d n:   tham   kh o   hàm  ẫ ả getElementById,   thu c   tính  ộ value, 

innerHTML