ỦY BAN NHÂN DÂN TỈNH AN GIANG TRƯỜNG CAO ĐẲNG NGHỀ AN GIANG GIÁO TRÌNH Mơ đun: THIẾT KẾ WEBSITE NGHỀ: THIẾT KẾ ĐỒ HỌA Trình độ : Trung cấp (Ban hành theo Quyết định số: /QĐ-CĐN ngày tháng năm 20 Hiệu trưởng trường Cao đẳng nghề An Giang) An Giang, Năm ban hành : 2021 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Ngày nay, phát triển Internet ảnh hưởng lớn tới ngành CNTT Internet mở nhiều hội tốt cho nhà lập trình phát triển ứng dụng Web nhà thiết kế Web Song song với phát triển đó, thiết kế web có phát triển việc cải tiến kỹ thuật thiết kế Với hỗ trợ máy tính cơng nghệ phần mềm giúp thực việc thiết kế trang web nhanh chóng, hiệu chuyên nghiệp Tài liệu thiết kế theo mô đun/ môn học thuộc hệ thống mơ đun/mơn học chương trình để đào tạo hồn chỉnh nghề Lập trình máy tính dùng làm giáo trình cho học viên khóa đào tạo, sử dụng cho đào tạo ngắn hạn cho công nhân kỹ thuật Trong trình biên soạn, cố gắng tham khảo nhiều tài liệu giáo trình khác tác giả không khỏi tránh thiếu sót hạn chế Tác giả chân thành mong đợi nhận xét, đánh giá góp ý để giáo trình ngày hồn thiện Nội dung mô đun: Bài 1: Tổng quan thiết kế website Ngôn ngữ HTML Bài 2: Macromedia Dreamweaver Bài 3: CSS Bài 4: Java Script An Giang, ngày tháng năm 2021 Tham gia biên soạn Vương Thị Minh Nguyệt MỤC LỤC ĐỀ MỤC TRANG LỜI GIỚI THIỆU MỤC LỤC CHƯƠNG TRÌNH MƠ ĐUN BÀI 1: TỔNG QUAN THIẾT KẾ WEBSITE VÀ NGÔN NGỮ HTML I Tổng quan thiết kế website II Ngôn ngữ HTML Bài tập 15 BÀI 2: MACROMEDIA DREAMWEAVER 16 I Giới thiệu phần mềm Dreamweaver 16 II Quản lý thao tác website 18 III Định dạng văn 19 IV Bảng biệu 22 V Tạo liên kết 26 VI Form thành phần form 29 VII Frame 39 Bài tập 42 BÀI 3: CSS 43 I Giới thiệu CSS 43 II Các thuộc tính CSS 46 Bài tập 49 BÀI 4: JAVASCRIPT 50 I Tổng quan JavaScript 50 II Cú pháp Javascript 51 III Hàm Javascript 56 Bài tập 66 TÀI LIỆU THAM KHẢO 67 CHƯƠNG TRÌNH MƠ ĐUN Tên mơ đun: THIẾT KẾ WEBSITE Mã mô đun: MĐ 19 Thời gian thực mô đun: 120 (Lý thuyết: 40 giờ, thực hành 77 giờ, kiểm tra: giờ) I VỊ TRÍ, TÍNH CHẤT CỦA MƠ ĐUN Vị trí: - Thuộc nhóm mơn: Chun ngành - Được bố trí sau mơn: Tin học văn phịng, Xử lý ảnh với Photoshop Tính chất: Mơ đun làm sở cho sinh viên – học sinh có kỹ thiết kế trang web hoàn chỉnh Ý nghĩa, vai trị mơn học: mơn học giúp cho người học xây dựng tất thành phần mà trang web cần phải có như: giao diện, bố cục, màu sắc, sau xếp thành giao diện website hồn chỉnh có tính thẩm mỹ, đẹp mắt, dễ sử dụng II MỤC TIÊU CỦA MÔ ĐUN Về kiến thức: - Định hướng cách thiết kế Website - Nêu ứng dụng thẻ HTML - Tổ chức thông tin trang chủ web - Định hướng cách liên kết đến trang web - Đưa ý tưởng giao diện - Có khả sử dụng dụng thẻ HTML - Trình bày cơng dụng dịch vụ IIS Về kỹ năng: - Sử dụng thẻ HTML để thiết kế trang web - Thiết kế giao diện trang website - Sử dụng thành thạo công cụ thiết kế Web - Cài đặt, cấu hình dịch vụ IIS - Lập trình trang web Về lực tự chủ trách nhiệm: - Làm việc nhóm, tăng tính chia sẻ làm việc cộng đồng III NỘI DUNG MÔ ĐUN Nội dung tổng quát phân bố thời gian: Thời gian (giờ) Thực Tên hành, thí TT Tổng Lý Kiểm mơ đun nghiệm, số thuyết tra thảo luận, tập Bài 1: Tổng quan thiết kế website 20 12 Ngôn ngữ HTML I Tổng quan thiết kế website II Ngôn ngữ HTML Bài 2: Macromedia Dreamweaver 36 12 23 I Giới thiệu phần mềm Dreamweaver II Quản lý thao tác website III Định dạng văn IV Bảng biểu V Tạo liên kết VI Form thành phần form VII Frame Kiểm tra Bài 3: CSS 36 12 23 I Giới thiệu CSS II Các thuộc tính CSS Kiểm tra Bài 4: JavaScript 24 15 I Tổng quan JavaScript II Cú pháp JavaScript III Hàm JavaScript Kiểm tra Ôn tập 4 120 40 77 Cộng Nội dung chi tiết: Bài 1: Tổng quan thiết kế website Ngôn ngữ HTML Thời gian: 20 A Mục tiêu bài: - Trình bày kiến thức Internet Website - Giới thiệu công cụ hỗ trợ thiết kế Webste - Sử dụng ngôn ngữ HTML để thiết kế Website B Nội dung bài: I Tổng quan thiết kế website II Ngôn ngữ HTML Bài 2: Macromedia Dreamweaver Thời gian: 36 A Mục tiêu bài: - Thực số thao tác phần mềm Internet Information Services để kết nối chạy trang web localhost - Sử dụng thành thạo chức năng, công cụ phần mềm tạo web Macromedia DreamWeaver để tạo trang web tĩnh gồm đầy đủ thành phần văn bản, hình ảnh, âm thanh…và số tích hợp hiệu ứng khác B Nội dung bài: I Giới thiệu phần mềm Dreamweaver II Quản lý thao tác website III Định dạng văn IV Bảng biểu V Tạo liên kết VI Form thành phần form VII Frame Kiểm tra Bài 3: CSS Thời gian: 36 A Mục tiêu - Giới thiệu ngơn ngữ hỗ trợ cách thức trình bày Website CSS - Sử dụng ngôn ngữ CSS/CSS3 kết hợp với HTML để thiết kế Website web hoàn chỉnh B Nội dung I Giới thiệu CSS II Các thuộc tính CSS Kiểm tra Bài 4: JavaScript Thời gian: 24 A Mục tiêu - Sử dụng ngôn ngữ Javascript kết hợp với HTML, CSS để thiết kế Website - Hiểu nắm nguyên tắc hoạt động trang Asp - Biết cách khai báo biến, biết sử dụng cấu trúc điều khiển, hàm sử dụng đối tượng xây dựng sẵn Asp để lập trình trang web nhằm tính tốn, phục vụ mục tiêu cụ thể ngôn ngữ JavaScript B Nội dung I Tổng quan JavaScript II Cú pháp JavaScript III Hàm JavaScript Kiểm tra Ôn tập Thời gian: BÀI TỔNG QUAN VỀ THIẾT KẾ WEBSITE – NGÔN NGỮ HTML Giới thiệu HTML Tim Berner Lee phát minh W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994 Mục tiêu Học xong học viên có khả năng: - Trình bày kiến thức Internet Website - Giới thiệu công cụ hỗ trợ thiết kế Webste - Sử dụng ngôn ngữ HTML để thiết kế Website Nội dung I TỔNG QUAN VỀ THIẾT KẾ WEBSITE CÁC KHÁI NIỆM CƠ BẢN: - Internet mạng máy tính tồn cầu máy truyền thông với theo ngôn ngữ chung TCP/IP - Intranet mạng cục khơng nối vào Internet cách truyền thông chúng theo ngơn ngữ chung TCP/IP - Mơ hình Client-Server: mơ hình khách-chủ Server chứa tài ngun dùng chung cho nhiều máy khách(Client) tập tin, tài liệu, máy in… Ưu điểm mơ hình tiết kiệm thời gian, tài chính, dễ quản trị hệ thống…Cách hoạt động mơ hình máy Server trang thái hoạt động(24/24) chờ yêu cầu từ phía Client Khi Client u cầu máy Server đáp ứng yêu cầu - Internet Server Server cung cấp dịch vụ Internet(Web Server, Mail Server, FTP Server…) - Internet Service Provider(ISP): Là nơi cung cấp dịch vụ Internet cho khách hàng Mỗi ISP có nhiều khách hàng có nhiều loại dịch vụ Internet khác - Internet Protocol : Các máy sử dụng mạng Internet liên lạc với theo tiêu chuẩn truyền thông gọi Internet Protocol (IP) IP Address-địa IP: để việc trao đổi thông tin mạng Internet thực máy mạng cần phải định danh để phân biệt với máy khác Mỗi máy tính mạng định danh nhóm số gọi địa IP Địa IP gồm số thập phân có giá từ đến 255 phân cách dấu chấm Ví dụ 192.168.0.1 Địa IP có giá trị toàn mạng Internet Uỷ ban phân phối địa IP giới phân chia nhóm địa IP cho quốc gia khác Thông thường địa IP quốc gia quan bưu điện quản lý phân phối lại cho ISP Một máy tính thâm nhập vào mạng Internet cần có địa IP Địa IP cấp tạp thời cấp vĩnh viễn Thông thường máy Client kết nối vào mạng Internet thông qua ISP đường điện thoại Khi kết nối, ISP cấp tạm thời IP cho máy Client - Phương thức truyền thông tin Internet: Khi máy tính có địa IP x(máy X) gửi tin đến máy tính có địa IP y (máy Y) phương thức truyền tin diễn sau: Nếu máy X máy Y nằm mạng thơng tin gửi trực tiếp Còn máy X Y khơng nằm mạng thơng tin chuyển tới máy trung gian có đường thông với mạng khác chuyển tới máy Y Máy trung gian gọi Gateway - World Wide Web(WWW): dịch vụ phổ biến Internet Dịch vụ đưa cách truy xuất tài liệu máy phục vụ dễ dàng thông qua giao tiếp đồ họa Để sử dụng dịch vụ máy Client cần có chương trình gọi Web Browser - Web Browser (trình duyệt): trình duyệt Web Dùng để truy xuất tài liệu Web Server Các trình duyệt Internet Explorer, Nestcape - Home page: trang web web site - Hosting provider: công ty tổ chức đưa trang lên web - Hyperlink : tên khác hypertextlink - Publish: làm cho trang web chạy mạng - URL (Unioform resource locator): địa chỉ đến file cụ thể nguồn tài nguyên mạng Mỗi nguồn web có địa khó nhớ Vì vậy, người ta sử dụng URL chuỗi cung cấp địa Internet web site nguồn World Wide Web Định dạng đặc trưng là: www.nameofsite.typeofsite.countrycode Ví dụ: 207.46.130.149 biểu diễn URL www.microsoft.com URL nhận biết giao thức site nguồn truy cập Giao thức thông thường “http”, vài dạng URL khác “gopher”, cung cấp địa Internet thư mục Gopher, “ftp”, cung cấp vị trí mạng nguồn FTP Có hai dạng URL: URL tuyệt đối – địa Internet đầy đủ trang file, bao gồm giao thức, vị trí mạng, đường dẫn tuỳ chọn tên file Ví dụ, http:// www.microsoft.com/ms.htm URL tương đối - mô tả ngắn gọn địa tập tin kết nối có đường dẫn với tập tin hành, URL tương đối đơn giản bao gồm tên phần mở rộng tập tin Ví dụ: index.html - Web server chương trình đáp ứng lại yêu cầu truy xuất tài nguyên từ trình duyệt GIỚI THIỆU KHÁI QUÁT VỀ WEB - Web ứng dụng chạy mạng(Client-Server), chia sẻ khắp toàn cầu - Trang web file văn chứa tag HTML đọan mã đặc biệt mà trình duyệt web (Web browser) hiểu thông dịch được, file lưu với phần mở rộng html htm - HTML (HyperText Markup Language), gồm đoạn mã chuẩn quy ước để thiết kế Web hiển thị trình duyệt Web (Web Browser) Hypertext (Hypertext link), từ hay cụm từ đặc biệt dùng để tạo liên kết trang web Markup: cách định dạng văn để trình duyệt hiểu thông dịch Language: không ngôn ngữ lập trình, mà tập nhỏ quy luật để định dạng văn trang web - Trình soạn thảo trang web :Có thể soạn thảo web trình soạn thảo văn Các trình soạn thảo phổ biến là: Notepad, FrontPage Dreamweaver II NGÔN NGỮ HTML Tag HTML câu lệnh nằm cặp tag “”, dùng để định dạng văn trang web Dạng chung tag HTML là: Object Trong đó: – TagName : tên tag HTML, viết liền với dấu “< “, khơng có khoảng trắng – Object : đối tượng cần định dạng trang Web – ListPropeties danh sách thuộc tính Tag, đặc điểm bổ sung vào cho tag, thứ tự thuộc tính tag tuỳ ý Nếu có từ thuộc tính trở lên thuộc tính cách khoảng trắng Object – Giá trị thuộc tính đặt nháy đơn ‘ nháy đơi “.(có thể bỏ qua) – : gọi tag mở – : gọi tag đóng Thơng thường tag có tag đóng Tuy nhiên có số tag khơng có tag đóng Ví dụ : nội dung TagName(mở Properties TagName(đ ón – Có thể có nhiều tag lồng vào nhau, theo nguyên tắc tag mở trước tag đóng sau Ví dụ: Object Object1Object2 – Trong trang HTML, tag bị sai nội dung bên Tag khơng hiển thị trình duyệt CẤU TRÚC CƠ BẢN CỦA TRANG WEB: a Cấu trúc trang web – Phần đầu(): phần chứa thông tin trang Web – Phần thân (): phần chứa nội dung trang Web – Phần đầu phần thân đặt cặp tag Nội dung thông tin trang web Nội dung hiển thị trình duyệt b Hiển thị trang web: – Khởi động trình duyệt Internet Explorer – Chọn menu file,open, dùng browse tìm tập tin html tạo – Hoặc double click vào tên tập tin htm c Các tag HTML : Hiển thị nội dung tiêu đề trang web tiêu đề trình duyệt – Cặp tag đặt phần trang HTML – Cú pháp: Nội dung tiêu đề : Tạo header, gồm cấp header, đặt phần BODY – Cú pháp: Nội dung Header Trong đó: – Direction: gồm giá trị left, right, center, dùng để canh lề cho header, mặc định canh trái – Ví dụ: Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 – Dùng để ngắt đoạn bắt đầu đoạn – Cú pháp:
Nội dung đoạn
– Tag không bắt buộc – Tag tự động bắt đầu đoạn – Ngắt dịng vị trí của tag Ví dụ:
Mary had a little lamb It’s fleece was white as snow Xuất liệu trang Web - JavaScript hỗ trợ phương thức hiển thị liệu trang Web là: + document.write(“Text”) + document.writeln(“Text”) - Text chuổi liệu muốn hiển thị trang Web, phải đặt cặp nháy kép - Nếu xuất giá trị biến thị không cần đặt nháy Có thể dùng dấu + để nối chuổi biến doument.write(“String ” + variable ); - Nếu xuất tag HTML cặp tag phải đặt cặp dấu nháy kép - document.writeln: đặt cặp tag lệnh document.writeln xuất liệu xuống dịng Nếu khơng có cặp tag cách khoảng trắng Ví dụ 1: document.write ("Hello"); document.write ("World"); Ví dụ 2: document.writeln("Hello"); document.writeln("Wordl"); Biến liệu Javascipt a Biến Khái niệm: Biến tên phần tử chương trình, sử dụng để lưu trữ thơng tin người dùng nhập vào kết trung gian q trình tính tốn, Khi khai báo biến Javascript không cần xác định kiểu liệu cho biến biến khai báo xong chứa kiểu liệu Cách khai báo biến: Trong JavaScript, để khai báo biến dùng từ khố var, bỏ qua từ khóa var var NameVariable ; - Một biến khai báo khởi tạo không khởi tạo giá trị ban đầu - Múôn khai báo nhiều biến lúc liệt kê tên biến cách dấu (,) Ví dụ: Var x = ; var y,z = "19" ; 53 - Trong JavaScript, 1biến chứa kiểu liệu Ví dụ: var a=”Hello World”; a=1999 ; Cách xuất giá trị biến: document.write(NameVariable ) Quy tắc đặt tên biến: Tên biến gồm chữ số, không dùng ký tự đặc biệt như: ( , [ , { , # , & … theo nguyên tắc sau: - Tên biến phải bắt đầu ký tự ký tự gạch dưới( _ ) - Không bắt đầu ký tự số - Không chứa khoảng trắng, tên biến phải gợi nhớ - Khơng trùng với từ khố JavaScript - Các từ khoá JavaScript b Dữ liệu: Có loại liệu - Kiểu số: biến kiểu số chứa giá trị số nào: số thập phân, số nguyên, số dạng chấm phẩy động - Kiểu chuổi: biến kiểu chuổi chứa nhóm ký tự (Chữ cái, ký tự số, khoảng trắng, ký tự đặc biệt, …) Giá trị chuổi phải đặt cặp dấu nháy đôi (“ “) đơn (‘ ‘) Ví dụ: var s1, s2, s3 ; s1=”Hello World” ; s2=’Hello World ‘ ; - Kiểu Boolean: Là liệu có giá trị False True thường dùng trường hợp biến hàm nhận trạng thái sai Ví dụ: var bl; bl=true ; - Kiểu Null: biến khơng gán cho giá trị c Tóan tử: Tóan tử số học Tóan Tử Chức Năng + cộng - Trừ * Nhân / Chia % Lấy phần dư Ví dụ x=2 x+2 x=2 5-x x=4 x*5 15/5 5/2 5%2 10%8 Kết 20 2.5 54 ++ Tăng giá trị lên Giảm giá trị xuống 10%2 x=5 x++ x=5 x x=6 x=4 Tốn Tử Gán Tóan Tử = += -= *= /= %= Tóan Tử so sánh Tóan Tử == != > < >= 8 returns false 5=8 returns false 5 1) returns true x = ; y =3 (x==5 || y==5) returns false x=6; y =3; !(x==y) returns true Toán tử chuỗi Ký hiệu: + : Là phép tốn nối hai chuỗi với Ví dụ: txt1=”What a very”; txt2="nice day!"; document.write(''+txt1+txt2+''); 55 &), \”(“) Một số ký tự đặc biệt: \n ( new line), \t (tab), \b (BackSpace), \& (dấu Ví dụ: document.write ("You \& i sing \"Happy Birthday\".") Tóan tử Điều kiện: Cú pháp: (Điều kiện) ? value1: value2 Nếu biểu thức điều kiện trả giá trị value Nếu biểu thức điều kiện sai trả giá trị value Ví dụ: a=5; b=6; document.write((a>b)? 'a lon hon b':'b lon hon a'); III HÀM TRONG JAVASCRIPT Định nghĩa: Hàm đọan chương trình sử dụng nhiều lần chương trình để thực tác vụ Xây dựng hàm: Trong JavaScript, dùng từ khoá function để định nghĩa hàm function NameFunction( List_Parameter ) { Khai báo biến sử dụng hàm ; Các câu lệnh JavaScript thực tác vụ; [return [giá trị /biểu thức] ]; } - NameFunction: tên hàm người lập trình tự đặt - Qui tắc đặt tên hàm giống tên biến Sau NameFunction cặp dấu ngoặc ( ) chứa danh sách tham số hình thức Nếu hàm khơng có tham số cặp dấu ngoặc ( ) phải viết sau NameFunction - List_Parameter: danh sách tham số hình thức, có nhiều tham số có tham số phài cách dấu phẩy, tham số không kiểu liệu cụ thể khơng cần từ khố var Ví dụ: function Display(user , pwd) 56 { document.write(“UserName cua ban la:” + user) ; document.write(“Password cua ban la:” + pwd) ; return ; } - Câu lệnh return: câu lệnh kết thúc hàm Câu lệnh tuỳ chọn Có thể bỏ qua, hàm có giá trị trả cần có câu lệnh Return để trả giá trị Sau Return chứa khơng chứa giá trị cụ thể biểu thức tính tốn Ví dụ: Function total(a,b) { C=a+b; Return c; } Cách gọi hàm - Hàm không thực gọi - Đối với hàm có đối số ta gọi tên hàm danh sách giá trị truyền cho đối số FunctionName(argument1,argument2,etc) - Đối với hàm khơng có đối số ta cần gọi tên hàm FunctionName() - Đối với hàm khơng có giá trị trả : NameFunction(parameter) - Đối với hàm có giá trị trả : variable= NameFunction(parameter) Ví dụ: Function function Area(Width, Length) { size=Width*Length; return size; } x=eval(prompt("Nhap x: ")) ; y= eval(prompt("Nhap y: ")); document.write(Area(x,y)) Các hàm thông dụng Javascript Hàm alert(): dùng hiển thị hộp thơng báo có nút OK Cú pháp: alert(“nội dung thơng báo”) 57 ví dụ: Function alert("Hello World") Hàm prompt():tạo hộp thoại chứa nút OK Cancel, textbox để người sd nhập nội dung, giá trị trả hàm prompt nội dung nhập textbox Cú pháp: variable= prompt(“nội dung đối thoại”,giá trị khởi tạo); ví dụ: Function a=prompt("Your Lastname:"); b=prompt("Your FirstName"); document.write("Your FullName is :"+ a + ' ' + b) Hàm confirm():Hiển thị hộp thơng báo có nút OK Cancel Hàm trả giá trị true người sd click OK ngược lại trả giá trị false Cúp pháp: variable=confirm(“Chuoi thong bao”); Ví dụ: Function 58 a=prompt("nhap so a :"); b=prompt("nhap so b"); c=confirm( a +' lon hon '+ b+'?') if(c= =true) document.write( a +" > "+b ) else document.write( a +" < "+b ) Hàm eval(): Trả giá trị số chuổi số Cú pháp: eval(chuổi số) Ví dụ: var str1=”123”, str2=”456”; str= str1+str2; document.write(str); kết :123456 var str1=”123”, str2=”456”; str=eval(str1)+eval(str2) ; document.write(str)kết quả: 579 Hàm ParseInt(strNum): Trả số nguyên từ chuổi strNum Nếu strNum theo sau ký tự chữ ký tự bị bỏ qua Nếu strNum khơng bắt đầu số hàm trả giá trị NaN (Not a Number) Ví dụ : var strNum=”123.8” , kq; kq=parseInt(strNum) =>kq=123 strNum=”a123” kq=parseInt(strNum) =>kq=NaN strNum=”123.8abc” kq=parseInt(strNum)=>kq=123 Hàm parseFloat(strNum): Hàm trả số thực từ chuổi strNum Nếu chuổi strNum bắt đầu số theo sau ký tự chữ ký tự bị bỏ qua Nếu chuổi strNum ký tự chữ hàm trả giá trị NaN Ví dụ: var strNum=”123.8” , kq; kq=parseFloat(strNum) =>kq=123.8 strNum=”a123.8” kq=parseFloat(strNum) =>kq=NaN strNum=”123.8abc” kq=parseFloat(strNum)=>kq=123.8 59 Hàm isNaN(str): Hàm trả giá trị True str chuổi, ngược lại False str chuổi số Ví dụ : Var str=”123abc”, kq; kq=isNaN(str) =>kq=true; str=”123.8” kq=isNaN(str) =>kq=false ; Các cấu trúc điều khiển Câu lệnh if: - Mẫu 1: Áp dụng cho trường hợp có điều kiện công việc xử lý Cú pháp: if () Khối lệnh 1; Khối lệnh 2; Nguyên tắc hoạt động: Nếu biểu thức điều kiện thực khối lệnh 1, sau thực khối lệnh 2, ngược lại biểu thức điều kiện sai bỏ qua khối lệnh thực khối lệnh - Mẫu 2: Áp dụng cho trường hợp có điều kiện lựa chọn cơng việc xử lý Cú pháp: if() Khối lệnh1; else Khối lệnh ; Khối lệnh 3; Nguyên tắc hoạt động: Nếu biểu thức điều kiện thực khối lệnh 1, sau thực khối lệnh 3, ngược lại thực khối lệnh 2, sau thực khối lệnh - Mẫu (if …else lồng nhau): Áp dụng cho trường hợp có nhiều chọn lựa khác Cú pháp: if() Khối lệnh 1; else if () Khối lệnh ; else … khối lệnh Để áp dụng mẫu 3, cần phải xác định biểu thức điều kiện toán xếp thứ tự lồng cho hợp lý Ví dụ: Viết chương trình nhập cạnh tam giác sau xuất hình tam giác gì? a=eval(prompt(“Nhap canh a”)); 60 b=eval(prompt(“Nhap canh b”)); c=eval(prompt(“Nhap canh c”)); if(a= =b && b= = c && c= = a) Tam giac ; else if(a= =b || b= = c || c= = a) Tam giac cân Else Tam giác thuong Cấu trúc chọn lựa switch case: Áp dụng trường hợp muốn chọn giá trị biểu thức để thực lệnh Giá trị biểu thức chuỗi số - Mẫu 1: switch(Biểu thức) { case value1: Khối lệnh 1; break; case value2: Khối lệnh ; break; ……… case valuek: Khối lệnh k ; break; } - Mẫu 2: switch(biểu thức) { case value1: khối lệnh ; break; case value2: khối lệnh ; break; ……… case valuek: khối lệnh k ; break; default : khối lệnh k+1 ;} Ngun tắc hoạt động: - Trình thơng dịch tính giá trị biểu thức so sách với value, giá trị thực khối lệnh 61 - Sự khác mẫu là: mẫu so sánh giá trị biểu thức với value, không khớp thực lệnh default - Trong trường hợp có nhiều value khác mà thực khối lệnh liệt kê value liên tiếp cách dấu phẩy case valuej1 ,valuej2 ,…,valuejk : khối lệnh; break; Ví dụ: t=prompt("nhap thang: "); switch(eval(t)) { case 1: case 3: case 5: case 7: case : case 10: case 12: alert("Thang "+ t+ " co 31 ngay"); break; case 2: alert("Thang "+t + " co 28 ngay"); break; case 4: case 6: case 9: case 11: alert("Thang "+t +" co 30 ngay"); break; default: alert("Khong co thang nay"); } Cấu trúc lặp: Được áp dụng công việc muốn thực lặp lặp lại nhiều lần với điều kiện Có lọai cấu trúc lặp : lặp với số lần lặp biết trước lặp với số lần lặp trước Vòng lặp For: Thường áp dụng cho số lần lặp biết trứơc Cú pháp: for(biểu thức 1; biểu thức 2; biểu thức 3) { Khối lệnh 1; } khối lệnh 2; Trong : biểu thức 1:chứa giá trị khởi tạo biến điều khiển biểu thức :chứa biểu thức điều kiện lặp biểu thức 3: chứa biểu thức tăng giảm biến điều khiển Nguyên tắc hoạt động:: - Trình thơng dịch gán giá trị khởi tạo cho biến điều khiển, Kểm tra biểu thức 2, thực khối lệnh 1, chuyển lên thực biểu thức 3, tiếp tục kiểm tra biểu thức 2, tiếp tục … - Nếu biểu thức có giá trị sai chương trình khỏi vịng lặp thực khối lệnh 62 - Nếu khối lệnh có chứa câu lệnh Break chương trình khỏi vịng lặp for thực khối lệnh Ví dụ: Viết chương trình tạo table m dòng n cột var n, m, i, j; m=prompt("Nhap so dong"); n=prompt("Nhap so cot"); document.write(""); for(i=1;i
