Hướng dẫn học qua ví dụ bằng Javascript step by step

I _ _ t- _ • _ JavaScript Hướng dẫn nọc qua ví dụ PHIÊN BẢN LẤN TU SÂÇH ää M icrosoft' JavaScript Hướng dẫn học qua ví dụ JavaScript Step by Step NHÀ XUẤT BẢN KHOA HỌC VÀ KỸ THUẬT 3¡D: Dịch thuật Fpt University TRƯỜNG ĐẠI HỌC FPT Trường Đại Học FPT TRƯỜNG ĐẠI HỌC FPT Tựa: JavaScript - Hướng dân học qua ví dụ, phiên lần Tác giả: Steve Suehring Dịch thuật: Trường Đại học FPT ISBN - 13 (Bản dịch): 978-604-67-0103-3 Phiên gốc lần Bản quyền gốc © 2010 thuộc Steve Suehring Phiên dịch lần Bản quyền dịch tiếng Việt © 2013-2016 thuộc Đại học FPT Toàn quyền liên quan tới xuất phẩm đăng ký bảo hộ Không phần xuất phẩm phép chép hay phát hành hình thức hay phương tiện nào, lưu giữ sở liệu hay hệ thống truy cập, mà khơng có cho phép trước văn Trường Đại học FPT Original Title: JavaScript Step by Step, Second Edition Author: Steve Suehring Publisher: Microsoft Press ISBN - 13 (Original edition): 978-0-7356-4552-3 © 2013 FPT University Authorized Vietnamese translation of the English edition of JavaScript Step by Step, Second Edition ISBN 978-0-7356-4552-3 © 2010 Steve Suehring This Translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same All rights reserved This translation published under license No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher Vietnamese-language edition copyright © 2013-2016 by FPT University All rights reserved ISBN: 978-604-67-0103-3 (Vietnamese-language edition) Liên hệ hợp tác nội dung dịch tiếng Việt phân phối: Phòng Bản quyền Xuất bản, Trường Đại học FPT Tầng 1, Tòa nhà FPT Polytechnic, Đường Hàm Nghi, KĐT Mỹ Đình I, Từ Liêm, Hà Nội Điện thoại: (04) 305 9886 - (04) 308 0898 Email: caodang@fpt.edu.vn Dành tặng Chris -Steve Suehring Mục lục Phần I JavaScript gì, dùng đâu, dùng sử dụng nào? Hiểu JavaScript Lập trình với JavaScript Cú pháp câu lệnh JavaScript Làm việc với biến kiểu liệu Sử dung toán tử biểu thức Phần II Áp dụng JavaScript Điều khiển luồng với câu lệnh điều kiện vòng lặp Làm việc với hàm Các đối tương ỉavaScript Mô hình đối tương trình duyệt Phần III Tích hợp JavaScript vào thiết kế trang 10 Mơ hình đối tương tài liệu 11 Các kiện JavaScript làm việc với trình duyệt 12 Tao sử dung cookie 13 Làm việc với hình ảnh JavaScript 14 Sử dung JavaScript với Web Form 15 JavaScript CSS 16 Xử lý lỗi JavaScript Phần IV AJAX tích hợp phía server 17 JavaScript XML 18 Các ứng dung JavaScript 19 Sơ lược AJAX 20 Tìm hiểu thêm AJAX Phần V jQuery 21 Giới thiệu thư viện Framework cùa JavaScript 22 Giới thiệu jQuery 23 Các hiệu ứng plug-in cho jQuery Phu luc Lời cảm ơn Mỗi viết sách, tơi thường vấp phải khó khăn viết lời cảm ơn dành cho người giúp tơi hồn thành tác phẩm Tơi thường nghĩ nên cảm ơn tất người người thân đáng kính họ phịng trường hợp tơi chẳng viết thêm sách Nhưng đến bây giờ, có tay vài sách, số cịn tái đến lần thứ hai, nhu cầu cảm ơn tất người bớt cấp thiết Lý khơng phải người tơi cần cảm ơn hay tơi tự làm tất - lý thật khác xa Nhưng lần vậy, ln qn gửi lời cảm ơn đó, họ chẳng lấy làm buồn lịng, tơi cảm thấy áy náy Và vậy, ngồi viết dịng cảm ơn này, tơi muốn gửi lời cảm ơn tới số người Như lần, chẳng có thứ bậc cụ thể danh sách khơng đầy đủ Nhưng trước hết, rõ ràng phải gửi lời cảm ơn tới Rebecca Jakob tồn thể gia đình tôi, người giúp đỡ ngày phải vật lộn từ 16 đến 20 tiếng đồng hồ bên trang thảo, cố gắng hoàn thành nhanh Tơi xin cảm ơn Russell Jones, biên tập viên nhà xuất O’Reilly động viên góp ý anh suốt q trình hồn thiện thảo, cảm ơn Neil Salkind Studio B Xin chân thành cảm ơn Chris Tuescher, John Hein, Jeremy Guthrie Jim Leu, Andy BerBerkvam, Dan Noah, Justin Hoerter Mark Little Tất họ nói với tơi tơi gửi lời cảm ơn họ sách mình, họ bị thúc phải mua cho (nếu cũng có ý nghĩ vậy, tơi nghĩ có lẽ nên chạy kiếm danh bạ điện thoại) Mặc dù tơi phải tìm người để nói lời cảm ơn, có người tơi khơng thể khơng nói lời cảm ơn, Jason, Kelly Jeff đội làm web tất đồng nghiệp Tôi xin gửi lời cảm ơn tới anh trai Bob tơi giúp tơi chọn nhạc để viết Tôi xin gửi lời cảm ơn tới Jim Oliva John Eckendorf Tôi không nghe đài viết vào sáng thứ bảy, câu chuyện họ đài thật khiến buổi sáng thứ bảy bù đầu vào thảo đỡ căng thẳng nhiều Xin cảm ơn Tim Rob Partners, Pat Dunn Dave Marie Xin ảm ơn Jeff Currier anh lắp cửa cho phịng làm việc Tôi xin gửi lời cảm ơn tới độc giả gửi phản hồi cho phiên sách Điều giúp tơi nhiều việc định hình điểm cần trọng ấn thứ hai Sau đọc lời cảm ơn viết ra, tơi nhận lẽ nên dùng tên gọi riêng (first name) người để gửi lời tri ân Việc này, cách hợp lý, khiến người nhận khơng nghĩ “Vâng, tơi gửi lời cảm ơn John, có nghĩa tơi định nói đến anh khơng phải anh John khác” Tơi đốn hứa cảm ơn khác nhớ ra, dù vậy, muốn gửi lời cảm ơn tới họ Lời giới thiệu JavaScript - Hướng dẫn học qua ví dụ Kể từ thời điểm tác giả viết phiên gốc tiếng Anh sách (năm 2007) có nhiều thay đổi xảy Những đặc tả cho JavaScript điều chỉnh nhiều; Windows Internet Explorer Microsoft tung ra; framework JavaScript đạt tới độ chín sử dụng rộng khắp, Internet Explorer Firefox, trình duyệt Safari, Chrome trình duyệt khác dành cho thiết bị di động ngày trở nên phổ biến JavaScript - Hướng dẫn học qua ví dụ dịch sách gốc JavaScript Step by Step phiên lần thứ hai, phát triển tảng phiên thứ Kiến trúc tảng ngôn ngữ JavaScript gần không đổi, ứng dụng trở nên rộng khắp đặc biệt phát triển mạnh vòng ba năm trở lại Vì thế, bố cục bìa sách gần giữ nguyên, có hai điểm khác biệt cần ý: phiên trọng nhiều vào việc xử lý kiện JavaScript, có riêng phần nói thư viện JavaScript Cụ thể, sách tập trung vào jQuery, thư viện giúp đơn giản hóa việc lập trình với JavaScript, đặc biệt dự án lớn Xuyên suốt sách, bạn thấy có nhiều phần nội dung bổ sung thêm tính JavaScript Tương tự, ví dụ dùng sách xem xét kỹ lưỡng nhiều trình duyệt khác để phản ánh thực tế bối cảnh chung web Phản hồi độc giả phiên thứ thể qua phần nội dung lý để tác giả bổ sung thêm phần jQuery đồng thời trọng đến phần xử lý kiện Lời giới thiệu cho phiên đầu sách thích đáng áp dụng cho phiên lần hai, bạn thấy sách JavaScript ngôn ngữ lập trình web túy, mục đích bạn bổ sung tính tương tác cho trang web sẵn có hay tạo ứng dụng hồn tồn Các trang web không thiếu JavaScript Giữa thẻ , sau thẻ đóng , thêm vào đoạn mã sau: < s c r ip t ty p e = " te x t/ja v a s c r ip t" > function y etA notherA lert(textT oA lert) { alert(tex tT o A lert); } yetAnotherAlert("Đây l Chương 2"); < /s c r i p t > Chọn Save All từ menu File Đoạn mã hoàn chỉnh trang hiển thị giống sau: Để xem trang web vừa tạo, chọn Start Without Debugging từ menu Debug Thao tác khởi động ASP.NET Development Server - server phát triển ASP.NET (nếu chưa chạy) (nếu chương trình chưa chạy) mở trang web trình duyệt mặc định Trang web mở với hộp thoại thơng báo Hình 2-6 Nhấn OK đóng trình duyệt Đoạn mã thực thi sau Đầu tiên, thẻ script gọi đến khai báo ngôn ngữ sử dụng JavaScript: < s c r ip t ty p e = " te x t/ja v a s c r ip t" > H ìn h - C h y J a v a S c r ip t tr ê n A S P N E T D e v e l o p m e n t S e r v e r / \ Chú ý Bạn khai báo JavaScript cách khác, nhiên cách hỗ trợ rộng rãi Tiếp đó, đoạn mã khai báo hàm y e tA n o th e r A le r t nhận vào đối số te x tT o A le r t sau: function y etA notherA lert(textT oA lert) { Hàm có nhiệm vụ mở hộp thoại thơng báo cửa sổ trình duyệt với đoạn văn cung cấp làm đối số hàm: alert(textT oA lert); Hàm kết thúc dấu ngoặc nhọn (}) Dòng đoạn mã gọi đến hàm vừa khai báo với đối số chuỗi đặt cặp ngoặc kép sau: yetAnotherAlert("Đây l Chương 2"); Với đoạn mã trên, bạn sẵn sàng lập trình với JavaScript Visual Studio 2010 Nhưng trước ăn mừng, bạn cần học cách sử dụng file JavaScript bên - external file (là file nằm file HTML chứa mã JavaScript) Sử dụng file JavaScript ngồi với Visual Studio 2010 Bạn khơng cần phải đặt toàn đoạn mã JavaScript vào file HTML Thay vào đó, bạn tận dụng thuộc tính s r c thẻ < script> Thuộc tính thẻ giúp định nghĩa cung cấp thêm thông tin chi tiết cho phần tử Ví dụ, phần tử chứa thuộc tính định nghĩa kiện xảy form gửi Với thuộc tính s r c thẻ < script> , bạn xác định vị trí file JavaScript ngồi Trình duyệt web sau đọc mã JavaScript chứa file tải trang web Với file JavaScript ngồi, bạn giữ đoạn mã JavaScript dùng chung nơi, thay phải cập nhật trang riêng biệt - điều giúp tiết kiệm nhiều công sức Lúc này, bạn tạo trang web (tạo Visual Studio) thực nhiệm vụ hộp thoại thông báo nhờ mã JavaScript nằm thẻ Trang web có chứa mã JavaScript phần thẻ Trong phần tiếp theo, bạn học cách đặt mã JavaScript vào file tham chiếu đến đoạn mã file HTML Tạo file JavaScript với Visual Studio 2010 Nếu không mở file myfirstpage.htm chọn Open Project từ menu File Visual Studio, chọn dự án mà bạn lưu file myfirstpage.htm mở file Khi Visual Studio hiển thị bước ví dụ trước Tạo file để chứa mã JavaScript cách chọn New File từ menu File Hộp thoại Add New Item xuất Trong danh sách template (file mẫu), chọn Jscript File đổi mục Name thành myscript.js, hình nhấn vào nút Add Lưu ý danh sách template khác tùy thuộc cài Visual Studio sử dụng Bạn tìm thấy file myscript.js thư mục mã nguồn mẫu Chương Một file JavaScript (Jscript) trống mở thêm vào dự án web Bạn thấy tab cho file myscript.js tab cho file myfirstpage.htm hình Nếu file myfirstpage.htm chưa mở, nhấn đúp để mở cửa sổ Solution Explorer / \ Chú ý Phần đuôi mở rộng thông thường file JavaScript JScript js, bạn không bắt buộc phải dùng chúng Sở dĩ chọn kiểu file JScript bước kiểu file tự động cập nhật phần mở rộng Bạn dễ dàng chọn TextDocument từ hộp thoại Add New Item đặt tên cho với phần mở rộng js V ’ _ _ ! _/ Nhấn vào tab myfirstpage.htm, bôi đen đoạn mã JavaScript Tuy nhiên, giữ nguyên đoạn mã bên thẻ (Hiện tại, bạn chưa cần sử dụng thẻ trên, bàn đến chúng phần sau) Bạn tìm thấy file myfirstpage.htm thư mục mã nguồn mẫu Tài nguyên kèm Sao chép đoạn mã bôi đen cách chọn Copy từ menu Edit Nhấn vào tab myscript.js, trỏ chuột đến dòng chọn Paste từ menu Edit Đoạn mã dán vị trí trỏ chuột Thay đổi đoạn văn lời gọi hàm yetAnotherAlert thành “Đây ví dụ thứ hai” đây: function y etA notherA lert(textT oA lert) { alert(tex tT o A lert); } yetAnotherAlert("Đây l v í dụ thứ hai"); Lưu file myscript.js cách chọn Save từ menu File File có dạng giống sau: Với mã JavaScript lưu file myscript.js, bạn xóa đoạn mã JavaScript file myfirstpage.htm, để lại cặp thẻ script có dạng sau: < s c r ip t ty p e = " te x t/ja v a s c r ip t" > < /s c r i p t > Bây giờ, thêm thuộc tính src vào thẻ mở : < s c r ip t ty p e = " te x t/ja v a s c r ip t" data-src="myscript L0 Nếu muốn, bạn chuốt lại đoạn mã cách xóa dấu chuyển dịng đưa thẻ đóng lên dịng với thẻ mở < s c r ip t ty p e = " te x t/ja v a s c r ip t" data-src=" m yscrip t.js" >< /s( Toàn nội dung file myfirstpage.html giống đây: Trang tôi L1 Lưu file myfirstpage.html L2 Để xem trang trình duyệt, chọn Start Without Debugging từ menu Debug Trang web duyệt qua web server mở trình duyệt Kết hộp thoại thơng báo “Đây ví dụ thứ hai” hình sau: L3 Nhấn OK để đóng hộp thoại thơng báo Bây giờ, xem lại đoạn mã để thấy khác biệt Trên trình duyệt web, chọn Source từ menu View Lưu ý lúc thẻ < scrip t> chứa tham chiếu đến file JavaScript Như vậy, bạn biết cách lập trình JavaScript với Visual Studio 2010 Tới đây, bạn bỏ qua số phần để đến phần giới thiệu cách gỡ lỗi đọc tiếp để tìm hiểu cách lập trình JavaScript với cơng cụ khác Lập trình JavaScript Eclipse Một IDE phổ biến khác giới lập trình web Eclipse Lập trình viên cài đặt framework khác để hỗ trợ cho mục đích lập trình khác Ví dụ, họ cài đặt Web Tools Platform hay cơng cụ lập trình PHP (PHP Hypertext Preprocessor) để tạo mơi trường tiện ích tối ưu hóa cho công việc họ Việc thảo luận dự án Eclipse tiềm không thuộc phạm vi sách này, nhiên thảo luận việc lập trình JavaScript Eclipse Để lập trình JavaScript với Eclipse, trước tiên bạn phải tải cài Eclipse tảng chạy ứng dụng Java (JRE) Thông tin chi tiết cách thức tải có trang web Eclipse (http://www.edipse.org) Trong phần này, giả định bạn chưa dùng Eclipse lần bạn làm quen với Eclipse Tuy nhiên, phần không cung cấp hướng dẫn cài đặt Eclipse Bạn nên tìm đọc tài liệu hướng dẫn có sẵn website Eclipse để nắm thông tin cập nhật Viết dự án web chứa mã JavaScript Eclipse Bây đến lúc tạo trang web có chứa mã JavaScript Eclipse Nếu bạn khơng dùng Eclipse, bỏ qua phần Ở phần cuối chương, thảo luận cách lập trình khơng cần đến IDE số lời khuyên nhỏ gỡ lỗi JavaScript c \ Chú ý Phần hướng dẫn sử dụng IDE Eclipse cho lập trình viên JavaScript Giao diện Eclipse bạn khác chút với hình minh họa sách Khi mở Eclipse lần đầu, bạn yêu cầu chọn vùng làm việc (workspace) Hãy chọn vùng làm việc mặc định V ’ ’ - Tạo dự án web với JavaScript Eclipse _ / Tạo dự án cách chọn New > JavaScript từ menu File Hộp thoại JavaScript xuất Nhập Chapter2 vào mục Project name (tên dự án) nhấn Finish Thư mục rỗng Chapter2 mở phần Project Explorer bên dưới: Nhấn chuột phải vào thư mục Chapter2, chọn New > File, hộp thoại New File mở Nhập myfirstpage.htm vào trường File Name chọn Finish Bạn tìm thấy file eclipse_myfirstpage.htm thư mục mã nguồn mẫu Chương Nếu muốn sử dụng file này, đặt lại tên file thành myfirstpage.htm Sau chọn Finish, Eclipse mở trang vừa tạo trình duyệt riêng Tuy vậy, cần sửa chạy trang web Nhấn phải chuột vào file myfirstpage.htm Project Explorer chọn Open Trang mở trực tiếp trình soạn thảo Eclipse sau: Bây lúc viết mã cửa sổ soạn thảo Hãy nhập vào đoạn mã đây: < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML T n sitio n a l/ "h t t p : //www.w3 org/T R /xhtm l1/D T D /xhtm l1-transitional.dtd ": Trang đãu t i ê n t ô i < / t i t l e > < s c r ip t ty p e = " te x t/ja v a s c r ip t" > function y etA notherA lert(textT oA lert) { alert(textT oA lert); } yetAnotherAlert("Đây l Chương 2"); < /s c r i p t > / \ Chú ý Với mục đích ví dụ này, khơng muốn thời gian, bạn bỏ qua phần khai báo DOCTYPE bắt đầu với thẻ Ngược lại, bạn lập trình web thật việc khai báo DOCTYPE cần thiết Xem Chương để tìm hiểu tầm quan trọng khai báo DOCTYPE V _ / Chọn Save từ menu File Đoạn mã trang hồn chỉnh hình sau: Để xem trang vừa tạo, nhấn chuột phải vào phần Project Explorer, chọn Open With chọn Web Browser Trang web hiển thị trình duyệt Eclipse với thơng báo Hình 2-7 Ngồi ra, bạn xem trang vừa tạo trình duyệt khác chẳng hạn trình duyệt mặc định Để mở trình duyệt mặc định, duyệt đến file vừa tạo (ví dụ C:UsersSteveworkspaceChapter2folder) nhấn đúp vào file ( \ Chú ý Nếu sử dụng Windows Internet Explorer, bạn nhận cảnh báo việc truy cập nội dung bị chặn, tuỳ thuộc vào mức độ bảo mật cấu hình Truy cập địa http://windows.microsoft.com/enUS/windows7/Internet-ExplorerInformation-bar-frequently-asked-questions để tìm hiểu thêm tính làm để tắt V / H ìn h - H iể n th ị f i l e tr o n g E c lip s e Trong ví dụ này, bạn tạo trang web có nhúng mã JavaScript Phần JavaScript trang web chứa vài phần tử Đầu tiên, thẻ script gọi đến khai báo ngôn ngữ sử dụng JavaScript đây: < s c r ip t ty p e = " te x t/ja v a s c r ip t" > Chú ý Bạn khai báo JavaScript cách khác, nhiên cách hỗ trợ rộng rãi Tiếp đó, đoạn mã khai báo hàm y e tA n o th e r A le r t có tham số te x tT o A le r t sau: function y etA notherA lert(textT oA lert) { Nội dung hàm có nhiệm vụ hiển thị hộp thoại thơng báo cửa sổ trình duyệt Thơng báo hiển thị đoạn văn truyền vào tham số hàm Tất thực lệnh đây: alert(textT oA lert); ... icrosoft' JavaScript Hướng dẫn học qua ví dụ JavaScript Step by Step NHÀ XUẤT BẢN KHOA HỌC VÀ KỸ THUẬT 3¡D: Dịch thuật Fpt University TRƯỜNG ĐẠI HỌC FPT Trường Đại Học FPT TRƯỜNG ĐẠI HỌC FPT Tựa: JavaScript. .. JavaScript - Hướng dẫn học qua ví dụ dịch sách gốc JavaScript Step by Step phiên lần thứ hai, phát triển tảng phiên thứ Kiến trúc tảng ngôn ngữ JavaScript gần khơng đổi, ứng dụng trở nên rộng khắp... ơn tới họ Lời giới thiệu JavaScript - Hướng dẫn học qua ví dụ Kể từ thời điểm tác giả viết phiên gốc tiếng Anh sách (năm 2007) có nhiều thay đổi xảy Những đặc tả cho JavaScript điều chỉnh nhiều;