(NB) Giáo trình Thiết kế và quản trị web: Phần 2 gồm có những nội dung: JavaScript, các lệnh xuất thông báo cơ bản, chèn chuỗi vào nội dung trang HTML, chức năng chính trong WordPress, quản trị website. Mời các bạn cùng tham khảo để nắm chi tiết nội dung của giáo trình.
CHƯƠNG JAVASCRIPT 5.1 JavaScript Là ngơn ngữ kịch bản, thông dịch hướng đối tượng hỗ trợ hiển thị trang Web sinh động hơn, JavaScript hồn tồn miễn phí Là ngơn ngữ phía client, sử dụng kiểm tra nhập liệu hay yếu tố khác (phiên trình duyệt) 5.2 Chèn mã Javascript Trực tiếp file HTML: document.write("Hello World!"); Chèn từ file js: 126 Vị trí chèn thẻ thường nằm thẻ head Ghi javascript sử dụng // /* */ 5.3 THẺ VÀ Cặp thẻ dùng để định rõ nội dung thông báo cho người sử dụng biết trình duyệt khơng hỗ trợ JavaScript Khi trình duyệt khơng hiểu thẻ bị lờ đi, đoạn mã nằm cặp thẻ Navigator hiển thị Ngược lại, trình duyệt có hỗ trợ JavaScript đoạn mã cặp thẻ bỏ qua Tuy nhiên, điều xảy người sử dụng khơng sử dụng JavaScript trình duyệt cách tắt hộp Preferences/Advanced Trang có sử dụng JavaScript Do bạn cần sử dụng trình duyệt Netscape Navigator từ version 2.0 trở đi! Hãy kích chuột vào để tải phiên Netscape Nếu bạn sử dụng trình duyệt Netscape từ 2.0 trở mà đọc dòng chữ bật Preferences/Advanced/JavaScript lên 5.4 Các lệnh xuất thông báo Thường sử dụng xuất thông báo công cụ để kiểm lỗi(debug) alert(),prompt(),confirm() 127 alert("Hi there"); confirm("I′m gonna something, okay?"); prompt("What should I do?"); 5.5 Chèn chuỗi vào nội dung trang HTML document.write("Hello"); 128 Xin Chào Có thể tạo trang Web từ javascript 5.6 Biến-Kiểu liệu 5.6.1 Khai báo biến var TenBien; Cách đặt tên biến C++, Không cần xác định kiểu liệu cho biến, KDL xác định dựa giá trị gán cho biến 5.6.2 Gán TenBien = [Giá Trị]; 5.6.3 Các liểu liệu 5.6.3.1 Undefined var foo; alert(foo);//chua xac dinh vi chua co gia tri gan cho bien 5.6.3.2 Null var foo = null; alert(foo); 129 5.6.3.3 Numbers var foo = 5; alert(foo); 5.6.3.4 Strings var foo = "five"; alert( foo ); 5.6.3.5 Booleans var foo = true; 5.6.3.6 Arrays Khai báo, tạo mảng, mảng đc đánh số từ var foo = [5, "five", "5"]; alert( foo[0]); // Alerts "5" alert( foo[1]); // Alerts "five" alert( foo[2]); // Also alerts "5" 5.6.4 Các toán tử so sánh toán học Tương tự C++ 5.6.4.1 Toán tử == === alert( "5" == ); // "true", không phân biệt KDL alert( "5" === ); // "false”, phân biệt KDL alert( "5" !== ); // "true", phân biệt KDL 130 5.6.4.2 Chuỗi Khi sử dụng với chuỗi, toán tử + coi kết hợp hai chuỗi, ví dụ: "abc" + "xyz" "abcxyz" 5.6.4.3 Logic JavaScript hỗ trợ toán tử logic sau đây: expr1 && expr2 Là toán tử logic AND, trả lại giá trị expr1 expr2 expr1 || expr2 Là toán tử logic OR, trả lại giá trị hai expr1 expr2 ! expr Là toán tử logic NOT phủ định giá trị expr 5.7 Các Lệnh 5.7.1 Câu Lệnh Điều Kiện Câu lệnh điều kiện cho phép chương trình định thực cơng việc dựa kết định Trong JavaScript, câu lệnh điều kiện if else Câu lệnh cho phép bạn kiểm tra điều kiện thực nhóm lệnh dựa kết điều kiện vừa kiểm tra Nhóm lệnh sau else khơng bắt buộc phải có, cho phép nhóm lệnh phải thực điều kiện sai Cú pháp if ( ) { 131 } else { } //Các câu lệnh với điều kiện //Các câu lệnh với điều kiện sai Ví dụ: if (x==10) { document.write(“x 10, đặt lại x 0.”); x = 0; } else { document.write(“x không 10.”); } 5.7.2 Câu Lệnh Lặp 5.7.2.1 Vòng Lặp for Vòng lặp for thiết lập biểu thức khởi đầu - initExpr, sau lặp đoạn mã biểu thức đánh giá Sau kết thúc vòng lặp, biểu thức incrExpr đánh giá lại 132 Cú pháp: for (initExpr; ; incrExpr){ //Các lệnh thực lặp } 5.7.2.2 While Vòng lặp while lặp khối lệnh chừng đánh giá Cú pháp: while () { //Các câu lệnh thực lặp } 5.7.2.2.1 BREAK Câu lệnh break dùng để kết thúc việc thực vòng lặp for hay while Chương trình tiếp tục thực câu lệnh sau chỗ kết thúc vòng lặp Cú pháp break; Đoạn mã sau lặp x lớn 100 Tuy nhiên giá trị x đưa vào vòng lặp nhỏ 50, vòng lặp kết thúc 5.7.2.2.2 CONTINUE 133 Lệnh continue giống lệnh break khác chỗ việc lặp kết thúc đầu vòng lặp Đối với vòng lặp while, lệnh continue điều khiển quay lại ; với for, lệnh continue điều khiển quay lại incrExpr Cú pháp continue; 5.7.2.3 CÁC CÂU LỆNH THAO TÁC TRÊN ĐỐI TƯỢNG 5.7.2.3.1 FOR IN Câu lệnh sử dụng để lặp tất thuộc tính (properties) đối tượng Tên biến giá trị bất kỳ, cần thiết bạn sử dụng thuộc tính vòng lặp Ví dụ sau minh hoạ điều Cú pháp for ( in ) { //Các câu lệnh } Ví dụ Ví dụ sau lấy tất thuộc tính đối tượng Window in tên thuộc tính Kết minh hoạ hình 5.2 for in example 134 document.write("the properties of the window object are: "); for (var x in window) document.write(" "+ x + ", "); 5.7.2.3.2 NEW Biến new thực để tạo thể đối tượng Cú pháp objectvar = new object_type ( param1 [,param2] [,paramN]) Ví dụ sau tạo đối tượng person có thuộc tính firstname, lastname, age, sex Chú ý từ khoá this sử dụng để đối tượng hàm person Sau ba thể đối tượng person tạo lệnh new new example 135 Đây cấu trúc tuyệt vời không thân thiện với cơng cụ tìm kiếm Tuy nhiên, WordPress cung cấp cho người dùng nhiều lựa chọn có sẵn để thay đổi cấu trúc mặc định như: http://www.yourdomain.com/2015/08/19/sample-post/ Trông tốt nhiều không Tuy nhiên, khuyên bạn nên sử dụng lựa chọn Tên sử dụng tên viết để có đường dẫn ngắn đẹp mắt người dùng: http://www.yourdomain.com/sample-post/ Và đừng quên chọn nút “Lưu thay đổi“ 229 tùy chỉnh permalinks 6.4.3 Thảo luận Bước với trang WordPress cài đặt thảo luận – tính cho phép người dùng bình luận website bạn Đây tính tuyệt vời WordPress cần phải quản lý để tránh spammer 230 Để làm việc này, truy cập vào “Cài đặt” > “Thảo luận” Chúng khuyên bạn nên bỏ chọn “Cho phép liên kết thông báo từ blog khác (pingbacks trackbacks) viết mới” tính gây nhiều phiên phức cho website sau Để hiểu rõ vấn đề này, miêu tả chi tiết viết làm để vơ hiệu hóa self pingbacks Những lựa chọn lại để mặc định bạn khơng biết làm Bạn thay đổi chúng sau website bắt đầu có nhiều bình luận spam Tùy chọn thảo luận Ở phía cuối trang web, có vài lựa chọn cho ảnh đại diện Nơi bạn nhìn thấy hình người nhỏ bên trái tên người Bạn chọn ảnh mặc định người cho thành viên trường hợp họ khơng có ảnh đại diện tắt chức bạn muốn 231 ảnh đại diện bình luận 6.4.4 Hồ sơ bạn Một phần bạn khơng thể bỏ qua trang hồ sơ cá nhân bạn Phần nằm “Thành viên” > “Hồ sơ bạn”, cho phép bạn cài đặt vài tuỳ chọn trình sử dụng website thơng tin cá nhân bạn Phần trang, có lựa chọn cho phép bạn tắt tính “Hiển thị” Chúng tơi khun bạn khơng nên làm gây khó khăn q trình soạn thảo viết Bạn tuỳ chọn màu sắc hiển thị cho khu vực admin thấy màu sắc mặc định nhàm chán Hay ẩn “Thanh công cụ” q trình sử dụng website Thanh cơng cụ hiển thị trang web với vài tính cho phép bạn chỉnh sửa viết, website cách nhanh thuận tiện Cá nhân khuyên bạn giữ ngun tơi thích thuận tiện trình vận hành website 232 hồ sơ cá nhân bạn Ngay bên tuỳ chọn này, bạn nhập tên, thơng tin liên hệ, website cá nhân đoạn miêu tả ngắn bạn 6.5 Các Chức Năng Chính Trong WordPress Vậy bạn quen thuộc với cách cài đặt wordpress, cấu hình chung WordPress Bây thời điểm sử dụng chúng vào mục đích hữu ích xây dưng nội dung cho website bạn Trong phần này, giới thiệu cho bạn cách đăng viết trang với vài tuỳ chọn mà bạn sử dụng sau Vậy viết gì? trang gì? Chúng tơi khác biệt Post Page WordPress kỹ lưỡng viết 6.5.1 Soạn thảo viết Chúng ta đến trang soạn thảo viết, nơi bạn dành gần toàn thời gian để tạo nội dung giá trị công khai chúng trang web Thậm chí, bạn đặt lịch xuất cho chúng vào thời điểm mà bạn muốn Để làm việc đó, truy cập vào “Bài viết” > “Viết mới“ Trang soạn thảo viết có chứa ô trống cho phép bạn nhập tiêu đề viết ô to nằm bên để nhập nội dung viết 233 Ngay phía trên, bạn thấy “trình soạn thảo nâng cao”, nơi cho phép bạn chỉnh sửa định dạng viết bơi đạm, in nghiêng, thêm đường dẫn… Và phía công cụ soản thảo nút “Thêm Media“, nơi bạn dùng để thêm ảnh, video, gif….v cho viết thêm viết Hãy trải nghiệm cách nhập tiêu đề viết vài nội dung tuỳ thích, sau bấm “Lưu nháp” Với chức lưu nháp viết lưu tạm nháp để bạn tiếp tục viết chưa hồn thiện Nếu muốn thêm đường dẫn, chọn đoạn chữ mà bạn muốn gắn link cho chúng chọn biểu tượng đường dẫn, nhập đường dẫn bạn muốn Bạn chọn nút “Xem thử” để xem thành trang web Bạn yên tâm, viết chưa công khai chế độ Mặc định, bạn có nhiều lựa chọn để định dạng viết công cụ soản thảo Khi bấm vào biểu tượng ngồi bên tay phải cơng cụ với tên gọi “Hiện ẩn công cụ”, xuất dòng thứ hai bên với nhiều lựa chọn 234 cho định dạng viết Một điều quan trọng đưa viết đến nhiều người đọc Một viết có hay đến đâu mà khơng đọc thật vơ ích phải khơng Vì phải viết chuẩn SEO Điều giúp viết bạn có thứ hạng cao cơng cụ tìm kiếm, thứ hạng cao đồng nghĩa việc có nhiều traffic nhiều người biết đến 6.5.2 Hướng dẫn tạo trang (Page) Như có giải thích khác biệt Post Page Nói tóm lại Post mang tính cập nhật thay đổi liên tục, Page thay đổi, có tính độc lập thường tạo lần sử dụng mãi trang Liên hệ website Để tạo Trang(Page) bên thang Menu bên trái Page » Add New Giống tạo viết có khung soạn thảo văn cho bạn Nhập nội dung mà bạn muốn khung Ỏ bên tay phải có thêm Page Attributes (thuộc tính trang) 235 Bạn thêm trang mẹ cho trang tạo: giống việc tạo thư mục máy tính Trang có đường dẫn: tenmiencuaban/trangme/trangcon/ Ngồi bạn chọn giao diện riêng cho trang 6.5.3 Quản lý thư viện Media Phần quan trọng blog chuyên nghiệp hình ảnh Đã có nhiều chứng viết có hình ảnh có nhiều lượt view viết khơng có 236 Tất hình ảnh, video âm WordPress quản lý “Thư viện Media” Khi soạn thảo viết, bạn truy cập vào thư viện để tải ảnh sử dụng hình ảnh có sẵn từ trước Trong trang soạn thảo viết, chọn nút “Thêm Media” phía cơng cụ Một popup xuất hiển thị tồn hình ảnh mà bạn sử dụng website tải lên trước thư viện media Để thêm ảnh mới, chọn tab “Tải tập tin lên”, mở chức tải file WordPress Tại đây, bạn cần kéo thả nhiều hình ảnh từ máy tính vào khu vực bấm bút “Chọn tập tin” Một ảnh tải lên thành cơng, bạn nhìn thấy vài tuỳ chọn bên tay phải hình Các tính cho phép bạn đặt tiêu đề hay miêu tả cho ảnh cần thiết, thẻ Alt vài tuỳ chọn hiển thị viết Tham khảo viết để hiểu rõ khác Alt Text Và tiêu đề hình ảnh 237 chèn ảnh vào viết Nhấn “Chèn vào viết” hình ảnh thêm vào viết Nếu cần thay đổi tuỳ chọn gì, việc chọn hình ảnh cơng cụ xuất để bạn thực việc Để học cách quản lý thư viện Media cách chuyên nghiệp đọc viết: Hướng dẫn hoàn thiện cách quản lý hình ảnh WordPress Ngồi bạn tạo chèn Gallery hình ảnh trang WordPress, bạn nhiếp ảnh gia tạo Gallery ảnh giúp website trông chuyên nghiệp đẹp mắt 6.5.4 Đăng viết Vậy bạn hoàn thành việc soạn thảo viết cho website, bao gồm việc thêm đường dẫn hình ảnh đó, nên tơi tin bạn sẵn sàng cơng khai nội dung với tồn giới Nhưng trước đăng viết, vài việc bạn phải hoàn thành trước Bên tay phải hình soạn thảo, có vài lựa chọn mà bạn nên hoàn tất Bỏ qua mục “Đăng viết”, quay lại cuối Hãy lựa chọn chuyên mục cho viết từ danh sách tạo trước Nếu muốn, bạn tạo thêm chuyên mục Điền vài tag bấm “Thêm” sau Và cuối hình ảnh đai diện Tại đây, bạn tải lên hình ảnh liên kết với viết Mỗi giao diện hiển thị hình 238 ảnh cách khác nhau, hiển thị ảnh to phía bên cạnh tiêu đề viết 239 240 Một bạn cảm thấy thoả mãn với lựa chọn mình, quay lại khu vực bên phải, nơi bỏ qua lúc “Đăng viết” Để công khai viết bạn trang web, đơn giản bấm nút “Đăng viết” xong Trươc làm việc đó, bạn muốn trải nghiệm vài thu thuat wordpress hay tính khác WordPress lập lịch đăng, bạn việc chọn “Chỉnh sửa” bên cạnh đoạn “Đăng lập tức”, bạn chọn xác ngày mà viết công khai Nếu làm vậy, nút “Đăng viết” tư động chuyển thành “Lên lịch” viết bạn đăng vào thời điểm mà bạn chọn trước Đây tính tuyệt vời bạn muốn thêm nhiều viết lúc phân chia thời gian đăng khoảng thời gian khác Trước đăng viết nhớ bấm “Xem thử” để xem sai sót trước cơng khai viết hay khơng Giờ bạn biết làm để đăng viết WordPress website Và trang thêm vào cách tương tự Truy cập “Trang” > “Tạo mới” hình soản thảo tương tự ra, nhiên khơng có lựa chọn chun mục tag Trang có tính lên lịch viết 241 Chức Revision Revision ( quảy lý nhật ký soạn thảo) chức cho phép bạn lưu lại bạn chỉnh sửa gần viết lưu nháp Giúp bạn dễ dàng quay lại bạn chỉnh sửa cũ muốn Bạn cần nháp để sử dụng tính Bấm vào Revision(Xem lại) để chọn phiên muốn khôi phục 6.5.5 Cách chèn video vào viết Để chèn video vào viết đoan giản, bạn cần copy đường dẫn video dán vào viết 242 Hoặc bạn có thêm cách vào Thêm Media » Chèn từ URL Nhập đường dẫn video ( tốt từ youtube), chọn chèn vào viết Trong WordPress có tính Embed cho phép tự động nhận diện liên kết từ video chuyển thành dạng nhúng video Vì mà bạn cần copy paste đường dẫn video TÀI LIỆU THAM KHẢO [1] Chu Văn Hoành, Giáo trình thiết kế Web [2] Giáo trình thiết kế web, NXB Giáo dục, 2007 [3] Hoàng Mạnh Hùng, Lập trình Web, Đại học Đà Lạt [4] Lê Minh Hồng, Tự học thiết kế Web tập tập 2, NXB Lao động, 2007 [5] Trung tâm CNTT – Bộ giáo dục đào tạo, Tài liệu giảng dạy: Thiết kế WEB với Front Page, NXB Giáo dục, 2003 243 ... số chương trình xử lý kiện JavaScript: 1 42 onBlur Xảy input focus bị xoá từ thành phần form onClick Xảy người dùng kích vào thành phần hay liên kết form onChange Xảy giá trị thành phần chọn thay... mã sau lặp x lớn 100 Tuy nhiên giá trị x đưa vào vòng lặp nhỏ 50, vòng lặp kết thúc 5.7 .2. 2 .2 CONTINUE 133 Lệnh continue giống lệnh break khác chỗ việc lặp kết thúc đầu vòng lặp Đối với vòng... Là toán tử logic AND, trả lại giá trị expr1 expr2 expr1 || expr2 Là toán tử logic OR, trả lại giá trị hai expr1 expr2 ! expr Là toán tử logic NOT phủ định giá trị expr 5.7 Các Lệnh 5.7.1 Câu Lệnh