CHƯƠNG 3: NGÔN NGỮ VÀ CÔNG CỤ Ngôn ngữ Công cụ 1. PHP và MySQL Web Application Development Framework 1.) CHƯƠNG 3: CÁC NGÔN NGỮ VÀ CÔNG CỤ HTML: khai báo ra các đối tượng trên trang web + một số thuộc tính định dạng cơ bản, tạo ra cấu trúc của trang web CSS: xác định kiểu trình diễn các đối tượng trên trang web với bộ thuộc tính phong phú, được hỗ trợ bởi tất cả các trình duyệt JavaScript: quản lý các đối tượng trên trang web, đặt các phép tính, điều kiện logic, các chức năng lập trình — Ví dụ: thẻ <button> tạo nút bấm và xử lý sự kiện khi nút được bấm PHP: ngôn ngữ lập trình để tạo trang web động, ngôn ngữ phía máy chủ, cho phép tạo các hoạt động bên trong trang web, được thực thi trên máy chủ, trả về đầu ra HTML. Ngôn ngữ HTML 3. Tổng quan về HTML 3.
Các thẻ của HTML 3. Sử dụng Frontpage, Notepad++ để soạn thảo mã HTML 3. Các thẻ HTML Các lớp thẻ — Cấu trúc (structure) — Định dạng (formatting) <html> </html> <head></head> — Ảnh (image) <title></title> <body> </body> — Danh sách (list) <p></p> — Bảng (table) <br/> <center></center> — Form <b></b> <i></i> — Khung hiển thị (frame) 3. Tổng quan về HTML HTML=HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản (ngôn ngữ để viết các trang web) Là ngôn ngữ được dùng để tạo các trang Web chứa dữ liệu (gồm hình ảnh, âm thanh, văn bản, siêu liên kết,…) Sử dụng thẻ (tags) để đánh dấu có loại dữ liệu gì và đánh dấu cách hiển thị dữ liệu đó.
Các phiên bản: 1994 (HTML drapt) ---- 1999 (HTML 4.01) ---- 2016 (HTML 5) Tệp mã nguồn HTML: <tên tệp tin>.html hoặc <tên tệp tin>.htm Tệp mã nguồn HTML và trang Web Tệp mã nguồn HTML — Là tệp văn bản bình thường gồm các kí tự ASCII — Có thể được tạo ra bằng bất cứ bộ soạn thảo thông thường nào (Frontpage, EditPlus, MS Word, Notepage, Wordpage,…) — Có đuôi là .htm Tệp mã nguồn HTML và trang Web Trang Web — Là kết quả hiển thị tệp mã nguồn bằng cách sử dụng trình duyệt (Browsers: Internet Explorer, Google Chrome, Firefox, Mozilar) — Không tồn tại trên ổ đĩa cứng của máy tính — Bấm chuột phải vào bất kỳ vị trí nào trên trang Web, tệp mã nguồn được mở ra. Bài tập số 5 Tạo website cá nhân: — Tiêu đề: chào mừng bạn đến trang cá nhân của tôi — Trang chủ (index.html) • Đề mục: Giới thiệu • Nội dung của đề mục: thông tin cá nhân cơ bản (danh sách) + ảnh chân dung — Trang quá trình đào tạo/sở trường/sở thích — Trang liên kết (contact.html) • Đề mục: các liên kết • Nội dung: • Liên kết tới “Trường tôi”: liên kết đến website của Trường • Liên kết từ trang này đến trang chủ: index.html • Liên kết đến đề mục khác trong cùng trang • Mailto Bài tập 6 Tệp mã html? Bài tập 7 Tệp mã html? Bài tập 8 Tệp html? <fieldset> </fieldset> <legend> </legend> Bài tập về nhà Mỗi bạn tạo 1 website cá nhân (tĩnh) gồm các trang web: — Trang chủ: sử dụng các liên kết trong cùng và khác website — Quá trình học tập và làm việc: sử dụng bảng — Sở thích: chèn hình ảnh, film, audio (bản nhạc) — Trang liên kết (contact.html) • Đề mục: các liên kết • Nội dung: • Liên kết tới “Trường tôi”: liên kết đến website của Trường • Liên kết từ trang này đến trang chủ: index.html • Liên kết đến đề mục khác trong cùng trang • Mailto — Liên lạc: sử dụng các đối tượng của form Tổ chức lưu trữ các tệp html theo các thư mục Trang chủ — Tệp index.html Địa chỉ tương đối liên kết các trang 3. Công cụ thiết kế web Fronpage — Có sẵn trong bộ MS Office — Tách biệt cửa sổ Design View, Code View Notepad++ 3. Công cụ thiết kế web Fronpage Notepad++ — Có sẵn trong bộ cài đặt Window — Tính năng: số dòng, mã màu, gợi ý lệnh, … Tổng kết Các khái niệm webpage, website, … Các lớp thẻ cơ bản: cấu trúc, định dạng, form, chèn ảnh, bảng biểu, khung Các công cụ thiết kế web Bài tập về nhà Mỗi bạn tạo 1 website cá nhân (tĩnh) gồm các trang web: — Trang chủ: sử dụng các liên kết trong cùng và khác website — Quá trình học tập và làm việc: sử dụng bảng — Sở thích: chèn hình ảnh, film, audio (bản nhạc) — Liên lạc: sử dụng các đối tượng của form 3.
Ngôn ngữ CSS (Cascading Style Sheet) 3. Một số thuộc tính định dạng cơ bản 3. Giới thiệu CSS HTML: khai báo ra các đối tượng trên trang web + một số thuộc tính định dạng cơ bản CSS: xác định kiểu trình diễn các đối tượng trên trang web với bộ thuộc tính phong phú, được hỗ trợ bởi tất cả các trình duyệt — Style Sheet: bảng định dạng, cho biết áp dụng kiểu dáng gì trên loại đối tượng nào — Giúp tách biệt nội dung trang web với cách trình diễn nội dung — Giúp đảm bảo sự nhất quán trong trình diễn — Giúp sử dụng lại mã trong trình diễn — Giúp tiết kiệm được thời gian, công sức thiết kế web Cú pháp selector { Property1: Value1; Property2: Value2; } Selector: đối tượng được áp dụng thuộc tính định dạng — Ví dụ: body, h2, p, img Property: thuộc tính quy định cách trình bày — Ví dụ: font-family, color Value: giá trị của thuộc tính tương ứng — Ví dụ: font-family: ”Time New Roman” Nhúng CSS vào trang HTML Cách 1: Nội tuyến (inline style): nhúng vào từng thẻ HTML <tên_thẻ style=“tt1:gt1;tt2:gt2;…”> <html> <head> <title> Ví dụ </title> </head> <body style=“background-color:#FFF;”> <h1> Gioi thieu <p style=“color:green”> Xin chào các bạn </p> </body> </html> Nhúng CSS vào trang HTML Cách 2: sử dụng cú pháp selector (internal style): nhúng vào phần header của trang (đặt giữa cặp <style type=“text/css”> … </style> ) Nhúng CSS vào trang HTML Cách 3: liên kết với một fle CSS bên ngoài (external style) dùng thẻ link styles.css Tổng kết Phân biệt box, element trong tệp mã nguồn để áp dụng mã css Sử dụng thẻ <div> để nhóm gộp các yếu tố Sử dụng thẻ <span> để quy định định dạng cho element trong đoạn văn bản Text Box List, table, form Layout Image Bài tập lớn số 1 Mỗi bạn tạo 1 website cá nhân gồm các phần nội dung sử dụng html và css: — Giới thiệu — Quá trình học tập và làm việc — Sở thích — Liên lạc 3. Chèn mã javaScript vào HTML 3.
Biến, hàm, các cấu trúc lệnh 3. Giới thiệu DOM 3. Quản lý các đối tượng HTML bằng JavaScript 3. Kiểm tra tính hợp lệ của dữ liệu từ form - Form validation 3.
Giới thiệu JavaScript Là ngôn ngữ kịch bản được thực thi bởi trình duyệt Phương pháp lập trình: mệnh lệnh, thủ tục, hướng đối tượng Kiểu dữ liệu ko tường minh (được xác định khi thực thi) Mã nguồn JavaScript đặt trong thẻ <script> Mã nguồn JavaScript gồm nhiều lệnh, mỗi lệnh kết thúc bằng dấu chấm phẩy (; ) Javascript phân biệt chữ hoa chư thường Trong code js, có thể ghi chú thích. Dùng // để chú thích 1 dòng, dùng / * */ để chú thích nhiều dòng 3. Chèn javaScript vào HTML Cách 1: Viết mã javaScript trực tiếp trong tệp mã nguồn HTML trong phần head hoặc phần body: <script language="JavaScript"> <!-- chỗ này viết mã javaScript; //--> </script> Cách 2: Viết mã javaScript ở tệp khác (.js) và tải tệp đó trong tệp mã nguồn HTML trong phần head hoặc phần body <script language="JavaScript" src="filename.js"> </script> 9/5/2022 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 73 3. Biến, hàm, các cấu trúc, … Biến: khai báo bằng từ khóa var hoặc let Kiểu dữ liệu: số, xâu ký tự, logic Các cấu trúc: rẽ nhánh, lặp Mảng: chỉ số mảng bắt đầu từ 0 Hàm Lớp, đối tượng Bài tập 1.
Viết một hàm tìm số lớn hơn trong 2 số nguyên, viết đoạn mã lệnh sử dụng hàm đó function timsolonhon(x,y){ If (x>y) return x Else return y; } Document. Quản lý các đối tượng trong trang web Đối tượng document có các phương thức để quản lý các phần tử HTML o Chỉnh nội dung các tag HTML trong trang o Chỉnh thuộc tính các tag HTML trong trang o Chỉnh định dạng CSS các tag HTML trong trang o Xóa các tag và thuộc tính không mong muốn trong trang o Thêm các tag HTML mới vào trang o Tương tác với các sự kiện của các tag trong trang Có 2 cách để truy xuất các phần tử HTML o Trực tiếp: thông qua id, name, tag name o Gián tiếp: thông qua mối quan hệ giữa các đối tượng trên DOM Tree 3. Kiểm tra tính hợp lệ của dữ liệu từ Form (Form Validation) Giới thiệu về Form Khai báo các phần tử trong Form Thu thập dữ liệu từ Form Kiểm tra tính hợp lệ của dữ liệu Form Xử lý dữ liệu Hiển thị kết quả Bài tập Viết mã HTML để tạo form có 1 ô textbox và 1 nút bấm submit Viết mã JS: — Tìm phần tử textbox trong form bằng nhiều cách khác nhau — Lấy giá trị của phần tử textbox tìm được và in ra màn hình giá trị đó Viết mã HTML để tạo form có 1 ô textbox, 1 phần tử kiểu radio và 1 nút bấm submit Viết mã JS: – Lấy giá trị của các phần tử trong form và in ra màn hình giá trị đó Bài tập số 2 Tạo Form nhập gồm các ô TextBox: Mã điện thoại, Tên điện thoại, Tính năng, Giá. Ô Select Hãng có các giá trị NOK0001, SAM0003, và SNY0006.
Khi người dùng nhập dữ liệu vào các ô điều khiển và click vào nút lệnh ‘Thêm mới’ thì toàn bộ dữ liệu trên form được in ra màn hình. Bài tập Bài 3: Bài 4: Tổng kết JavaScript cho phép quản lý các đối tượng trong trang web — Thay đổi nội dung đối tượng — Thay đổi giá trị thuộc tính của đối tượng — Thay đổi kiểu trình diễn đối tượng (CSS) — Có thể ẩn/hiện đối tượng — Tạo mới, chèn, xóa đối tượng — Bắt sự kiện, kiểm tra tính hợp lệ của dữ liệu Bài tập về nhà 1 Tạo form gồm các thông tin: — Tên truy cập — Mật khẩu — Nhập lại mật khẩu Kiểm tra dữ liệu vào có hợp lệ không? — Hợp lệ: • tên truy cập không rỗng • 2 mật khẩu giống nhau, khác rỗng, >4 ký tự Nếu hợp lệ được submit, ngược lại thông báo lỗi.