GIÁO TRÌNH javascript

1 MỤC LỤC LỜI NÓI ĐẦU NỘI DUNG CUỐN SÁCH CUỐN SÁCH NÀY DÀNH CHO AI? Yêu cầu trình độ Cách học cách GIỚI THIỆU 11 Lịch sử Javascript 12 Tại nên học Javascript? 12 TỔNG QUAN JAVASCRIPT 15 Ưu điểm Javascript 16 Giới hạn Javascript 17 Công cụ phát triển 18 Thực thi chương trình Javascript 18 Tạo chương trình Javascript 19 CÚ PHÁP JAVASCRIPT CƠ BẢN 23 Variable - Biến 24 Variable Scope - Phạm vi sử dụng biến 25 Sự khác var let 28 Khái niệm chế Hoisting 29 Kiểu liệu 31 Toán tử - Operators 35 Toán tử số học 35 Toán tử so sánh 36 Toán tử logic 37 Toán tử gán 38 Toán tử điều kiện rút gọn 39 Làm việc với điều kiện cấu trúc có điều kiện 40 if else Statements 40 Switch Statements 41 CÚ PHÁP JAVASCRIPT NÂNG CAO 42 Function 43 Cách định nghĩa function 44 Tham số phạm vi 45 Nested scope 46 Pure function non-pure function 47 Loop - vòng lặp 48 Vịng lặp gì? 49 Tại phải dùng vòng lặp 49 Vòng lặp for (…) 50 Vòng lặp while() {…} 51 Vòng lặp { } while() 52 Câu lệnh break continue vòng lặp 53 DỮ LIỆU CÓ CẤU TRÚC 56 Object 57 Thuộc tính riêng thuộc tính kế thừa 59 Cách tạo Object 60 Truy xuất thông tin Object 64 Truy xuất hàng loạt keys Object 65 Xóa thuộc tính Object 67 Array 67 Cách khai báo Array 67 Truy cập vào phần tử mảng 69 Các thao tác làm việc với mảng 70 HIGHER-ORDER FUNCTION 80 Khái niệm Higher-Order Functions 81 Functional Programming 81 First-Class Functions 82 Higher-Order Functions gì? 82 Ví dụ minh họa Higher-Order function 84 Tìm hiểu kỹ Callback 87 Promise 92 Async/Await 98 LẬP TRÌNH HƯỚNG ĐỐI TƯỢNG VỚI JS 102 Nguyên lý lập trình hướng đối tượng (OOP) 103 Javascript có hướng đối tượng không? 104 Tính kế thừa 106 Tính đóng gói 108 Tính đa hình trừu tượng 110 CÚ PHÁP ES6 113 String 115 Function 118 Class 121 Destructuring 124 Object Destructuring 125 Array Destructuring 126 Spread operator ( ) 126 Modules 129 Export 130 Import 131 JAVASCRIPT FRAMEWORK 133 BÀI TẬP 136 KẾT NỐI VỚI VNTALKING 145 THÔNG TIN TÁC GIẢ 146 CUỐN SÁCH CỦA VNTALKING 147 LỜI NÓI ĐẦU Hầu hết người bắt đầu học lập trình web nhận lời khuyên HTML Tuy nhiên, thân HTML khơng có nhiều tương tác logic để bạn học Có thể bạn khơng biết, phần lớn tương tác trang web với người dùng như: popup, hiệu ứng chuyển động, slideshow ảnh hay gửi liệu lên server… chủ yếu thực Javascript Để phát triển ứng dụng web tương tác với người dùng vậy, bạn cần phải biết Javascript Việc tự học Javascript khơng khó, cần bạn hiểu tư tưởng ban đầu nó, việc học cực dễ dàng Cuốn sách giúp bạn giải đáp câu hỏi, trăn trở tự mày mị tìm hiểu Javascript, trang bị kiến thức từ tảng tới nâng cao javascript, đặc biệt phù hợp với người chưa có kinh nghiệm lập trình thực tế Điểm xuất phát bạn rơi vào trường hợp sau:  Javascript ngơn ngữ lập trình mà bạn tiếp cận Có thể bạn vơ tình nghe tới Javascript bạn bè giới thiệu "Javascript ngôn ngữ lập trình dễ học nhất"  Bạn học làm việc ngơn ngữ lập trình khác Java, C#, Python Do điều kiện ngoại cảnh chuyển dự án, nghe lời quảng cáo thần thánh hóa cao nhân mạng Javascript Hoặc bạn có duyên với Javascript mà u thích ngơn ngữ lập trình này, muốn tìm hiểu kết thân với Dù xuất phát điểm nào, sách giúp bạn hiểu cặn kẽ, sử dụng thành thạo Javascript công cụ để xây dựng ứng dụng web, làm tảng vững để bạn tìm hiểu framework front-end VueJS, ReactJS chuyển sang mảng Back-end với NodeJS "Với Javascript, đường trở thành full stack develope ngắn hết" VNTALKING Sau thời gian dài chuẩn bị, cho đời sách Với mục tiêu: “Mang giới Javascript vào giường bạn, nhầm, vào nghiệp bạn”  Bạn sẵn sàng đắm chìm vào giới “ma thuật” Javascript chưa? Cịn chờ Hãy tiếp tục đọc nghiền ngẫm, bạn cảm thấy u thích sách Mình đảm bảo! NỘI DUNG CUỐN SÁCH Javascript ngôn ngữ lập trình phổ biến Giờ đây, bạn cần biết ngơn ngữ lập trình chinh chiến từ Front-end tới Back-end Trước bạn nghĩ tới điều lớn lao xây dựng ứng dụng web kiểu Tiki, Shopee học framework Front-end ReactJS, VueJS, Angular hay chuyển sang học NodeJS để làm Back-end cho hệ thống, bạn cần phải nắm vững sử dụng thành thạo cơng cụ, ngơn ngữ lập trình Javascript Cuốn sách đời để giúp ai, từ người chưa có kinh nghiệm lập trình tới người có kinh nghiệm mà muốn chuyển sang học Javascript Trong sách này, bạn học thực hành:  Cú pháp Javascript  Biến - variables  Kiểu liệu  Toán tử operators  String  Làm việc với điều kiện cấu trúc có điều kiện  Cú pháp Javascript nâng cao  Dữ liệu có cấu trúc Data structure:  Higer-Order Function  Lập trình hướng đối tượng (Object Oriented Programming)  Làm quen cú pháp tính ES6  Bài tập thực hành kèm đáp án Để đảm bảo bạn tập trung hiểu rõ Javascript, khơng sử dụng thư viện 3rd sách này, không trộn lẫn mã nguồn HTML Javascript CUỐN SÁCH NÀY DÀNH CHO AI? Cuốn sách phù hợp cho u thích lập trình, muốn học kiến thức tảng để tiếp tục phát triển ứng dụng web, mobile hay PC Javascript Nếu bạn có định hướng nghiệp thành full stack developer sách tài liệu mà bạn cần tới Đây sách "No Experience Require", tức khơng u cầu người có kinh nghiệm lập trình, chưa lập trình Tất hướng dẫn học từ số Yêu cầu trình độ Javascript ba kỹ thuật để xây dựng trang web gồm: Javascript, HTML, CSS Do đó, để học Javascript cách trơn tru nhất, bạn nên biết:  Kiến thức HTML  Biết sử dụng công cụ debug trình duyệt Nếu bạn khơng biết hai thứ sao? Cũng khơng sao, đọc xong sách bạn biết chúng Cách học cách Cuốn sách chia nhỏ nội dung thành nhiều phần, phần giới thiệu chủ đề riêng biệt, kèm thực hành Mục đích để bạn chủ động lịch học, không bị dồn nén nhiều, dễ dẫn tới “tẩu hỏa nhập ma”, lúc lại ốn trách  Với phần lý thuyết, có ví dụ minh họa Vì vậy, cách học tốt vừa học, vừa thực hành Bạn nên tự gõ lại dịng code kiểm tra kết trình duyệt Đừng copy đoạn code sách, điều hạn chế khả viết code bạn, khiến bạn nhiều khơng hiểu code bị lỗi "Nhớ nhé, đọc đến đâu, tự viết code đến đó, tự build kiểm tra đoạn code chạy khơng" Ngoài ra, sách này, kiến thức phần sau xây dựng từ phần trước Do vậy, bạn đừng đọc lướt mà bỏ sót đoạn Trong trình bạn đọc sách, code bạn khơng chạy chạy không ý muốn mà vắt tay lên trán hơm chưa giải đáp đừng ngần ngại đặt câu hỏi Group: Hỏi đáp lập trình - VNTALKING Liên hệ tác giả Nếu gặp vấn đề trình đọc sách, code bị lỗi khơng hiểu, bạn liên hệ với theo kênh đây:      Website: https://vntalking.com Fanpage: https://facebook.com/vntalking Group: https://www.facebook.com/groups/hoidaplaptrinh.vntalking Email: support@vntalking.com Github:https://github.com/vntalking/Book-Javascript Nội dung >> Lịch sử hình thành phát triển Javascript >> Lý chọn Javascript để học phát triển nghiệp PHẦN GIỚI THIỆU Javascript (thường hay viết tắt JS) ngơn ngữ lập trình kịch (scripting language) cho client-side, sau cho server-side (Nodejs) Javascript sử dụng chủ yếu để nâng cao tương tác người dùng với trang web Nói cách khác, bạn làm cho trang web trở nên sinh động tăng tính tương tác Trong ứng dụng web, người ta hay dùng JS để làm hiệu ứng đặc biệt sliders, pop-ups, xác thực liệu form (form validations) trước gửi liệu lên server v.v Ngày nay, Javascript không giới hạn khuôn khổ xây dựng ứng dụng web, mà sử dụng rộng rãi phát triển ứng dụng, game điện thoại hay ứng dụng dành cho server       Web app: ReactJS, VueJS, Angular Mobile app: React Native, Ionic Game: Phaser, Kiwi.js Server app: Nodejs Graphic: two.js (2D), three.js (3D) AI: brain.js 10 Nội dung >> Làm việc với function, định nghĩa cách sử dụng >> Tìm hiểu chi tiết loại vịng lặp JS >> Sự khác câu lệnh break continue PHẦN CÚ PHÁP JAVASCRIPT NÂNG CAO Sau hoàn thành xong phần - cú pháp Javascript, bạn hiểu phần ngôn ngữ lập trình đầy mê khơng? Nhưng Javascript khơng dừng lại có thế, cịn nhiều điều hay ho phía trước Đảm bảo bạn cảm thấy thích thú cho mà xem Trong phần cú pháp nâng cao, tập trung tìm hiểu hai khái niệm phổ biến: function vòng lặp (loop) Function Function hay gọi hàm coi chương trình con, thực nhiệm vụ Cũng tương tự chương trình hồn chỉnh, function gồm tập hợp nhiều khối lệnh bên trong, gọi "body" function Ngồi ra, function nhận giá trị truyền vào qua tham số trả kết sau kết thúc Có thể hình dung function máy chế biến, nhận nguyên liệu trả thành phẩm sau chế biến xong 23 Hình 4.1: Minh họa chế hoạt động function Function sinh để giải toán tái sử dụng mã nguồn Người ta gọi function để thực công việc giống nơi, thay phải viết lại tồn code thực nhiệm vụ đó, tránh trùng lặp code Đây demo - phần Đặt sách để đọc đầy đủ Cách định nghĩa function Chúng ta có nhiều cách để định nghĩa function Nhưng nhìn chung phải sử dụng từ khoá function để định nghĩa function Từ phiên ES6, có cách khác để định nghĩa function, Arrow function Phần sách, giới thiệu kỹ cách Cách 1: Định nghĩa kiểu truyền thống function functionName([param1], [param2], ){ // body hàm statement1; statement2; } 24 Cách 2: Định nghĩa function gán cho biến Vì function JS coi first-class Object nên function gán cho biến truyền function vào function khác với vai trò tham số (sau bạn gặp nhiều với tên gọi "thân thương" callback) var functionName = function([param1], [param2], ){ statement1; statement2; }; Dưới số ví dụ: // Định nghĩa hàm function sayHello () { console.log("Xin chào bạn độc giả VNTALKING") } var sayHi = function() { console.log("Xin chào bạn độc giả VNTALKING") } const square = function (number) { return number * number; } // gọi hàm sayHello(); sayHi(); console.log(square(5)); Đây demo - phần Đặt sách để đọc đầy đủ 25 Nội dung >> Khái niệm, thao tác làm việc với Object >> Cách khai báo làm việc với mảng liệu Tìm hiểu hàm built-in hữu ích cho Array PHẦN DỮ LIỆU CĨ CẤU TRÚC Giống với ngơn ngữ lập trình bậc cao khác, Javascript hỗ trợ loại liệu có cấu trúc, liệu kết hợp kiểu liệu khác Trong phần này, tìm hiểu hai loại liệu có cấu trúc phổ biến nhất:  Object  Array Có quan điểm cho rằng: cần bạn hiểu rõ làm việc thành thục với Object bạn làm chủ Javascript Mình hồn tồn đồng ý với quan điểm Bởi vì, bạn làm việc với Javascript, bạn làm việc nhiều với Object Sau này, bạn học xong sách này, làm dự án, thử ngẫm lại cảm nhận xem quan điểm có khơng nhé!? Object Object hay gọi đối tượng, kiểu liệu đặc biệt, nói khơng q kiểu liệu quan trọng nhất, tạo thành tảng Javascript đại 26 Kiểu liệu Object kết hợp nhiều kiểu liệu, nguyên thủy (primitive data-types) như: Number, String, Boolean, null, undefined… Object khác (Object lồng nhau) Thật khó để đưa định nghĩa xác kiểu liệu Object Mình xin định nghĩa cách dễ hiểu sau: Kiểu liệu Object Javascript tập hợp kiểu liệu liên quan không theo thứ tự dạng cặp “key: value” Key biến hàm gọi thuộc tính method, tùy ngữ cảnh Object Một Object định nghĩa dấu ngoặc nhọn {…} chứa bên danh sách thuộc tính Thuộc tính cặp “key:value”, key phải string number (hay gọi tên thuộc tính), cịn value thứ (có thể giá trị, hàm object khác…) Đọc định nghĩa xong lại cảm thấy khó hiểu phải khơng? Haha, trước  Để dễ hiểu định nghĩa này, xem xét ví dụ sau let website = { name : "VNTALKING.COM", location : "Hà Nội - Việt Nam", established : "2018" } Trong ví dụ trên, “name”, “location”, “established” “key” Còn “VNTALKING.COM”, “Hà Nội – Việt Nam”, “2018” value, giá trị tương ứng Tóm lại:  Mỗi cặp “key:value” gọi thuộc tính (properties) Object  Với thuộc tính mà value lại hàm lúc người ta gọi method Object 27 Nếu Object mà có method nào? Cùng xem ví dụ sau đây: let website = { Đây gọi thuộc tính name : "VNTALKING.COM", location : "Hà Nội - Việt Nam", established : "2018", displayInfo : function(){ console.log(`${website.name} was established in ${website.established} at ${website.location}`); } } Đây gọi method website.displayInfo(); Kết chạy đoạn code trên: Chúng ta hiểu nơm na sau: Object để mô tả đặc điểm – hành vi đối tượng, vật Ví dụ: dùng Object để mơ tả đó, thuộc tính đặc điểm chiều cao, cân nặng, màu da… method hành vi người cách người lại, cách ăn uống, cách người thể thân… Đến đây, bạn hiểu rõ định nghĩa Object không!? Đây demo - phần Đặt sách để đọc đầy đủ 28 Nội dung >> Tìm hiểu khái niệm cách hoạt động higher-order function >> Callback ứng dụng >> Sử dụng Promise >> Viết code đẹp với Async/Await PHẦN HIGHER-ORDER FUNCTION Khi bạn đọc đến dịng này, chứng tỏ bạn kiên trì đọc sách ^_^ Với phần đầu sách, bạn bước đầu hiểu làm chủ kỹ thuật ngơn ngữ lập trình Javascript, tảng để tiếp tục nghiên cứu phần nâng cao Javascript, điều mà khiến bạn thêm u mến ngơn ngữ lập trình Phần này, tìm hiểu khái niệm vơ quan trọng ảnh hưởng nhiều tới tư lập trình làm việc với Javascript Đó khái niệm Higher-Order Functions Với việc hỗ trợ Higher-Order Functions khiến cho Javascript phù hợp với triết lý lập trình hướng hàm (Funtional Programming) Tại lại vậy? Mình giải thích Đây demo - phần Đặt sách để đọc đầy đủ Higher-Order Functions gì? Chúng ta hiểu đơn giản sau, Higher-Order Functions hàm:  Chấp nhận truyền hàm qua tham số 29  Hoặc hàm return hàm Ví dụ: Hàm gọi higher-order function // phần định nghĩa hàm higher-order function higherOrder (number, sayLog) { let result = number * 10; sayLog(result) } Hàm gọi callback function function sayLog(x) { console.log(x); } // Cách sử dụng higherOrder(10, sayLog) //==>kết quả: 100 Hoặc truyền thẳng hàm ẩn danh (anonymous function) làm callback Ví dụ đây: // phần định nghĩa hàm higher-order function higherOrder (number, callback) { let result = number * 10; callback(result) } //Cách sử dụng higherOrder(10, function(result) { console.log(result) }); //==>kết quả: 100 Đây demo - phần Đặt sách để đọc đầy đủ 30 Nội dung >> Tìm hiểu ngun lý lập trình OOP >> Tìm câu trả lời cho câu hỏi: JS có phải ngơn ngữ lập trình OOP khơng? >> Tìm hiểu xem JS hỗ trợ nguyên lý OOP nào? PHẦN LẬP TRÌNH HƯỚNG ĐỐI TƯỢNG VỚI JS Từ đầu sách đến giờ, bạn có nhận thứ Javascript đối tượng, từ biến, function, Array (trừ liệu kiểu nguyên thủy) Như đề cập, cần bạn nắm Object bạn học Javascipt nhanh chóng cảm thấy đơn giản hết Trước đây, người nói tới Javascript nghĩ ngơn ngữ lập trình kịch bản, kiểu script, viết chạy theo block riêng lẻ, dùng để xử lý logic, tạo hiệu ứng cho website Nhưng nay, Javascript khác trước nhiều, với hỗ trợ làm việc mạnh mẽ với Object, liệu Javascript có thực phù hợp với triết lý lập trình hướng đối tượng (OOP) hay không? Phần sách, tìm hiểu chủ đề Để hiểu trọn vẹn phần này, khuyên bạn nên đọc lại hiểu thật rõ Object Mời bạn ôn lại kiến thức Object Đây demo - phần Đặt sách để đọc đầy đủ 31 Nội dung >> Giới thiệu thực hành làm quen với cú pháp tính ES6 >> Những điểm ES6 so với ES5: String, Function, Class, Destructuring, Module, Spead operator PHẦN CÚ PHÁP ES6 ES6 chữ viết tắt ECMAScript hay ECMAScript 2015, tập quy tắc lập trình khơng dành riêng cho Javascript mà nhiều ngôn ngữ lập trình khác ActionScript Nhưng có lẽ Javascript ngơn ngữ lập trình phổ biến nên nhiều người mặc định Javascript tiêu chuẩn ECMAScript cặp liền với ES6 phiên ECMAScript, xuất năm 2015, ECMAScript đến phiên ES11, ES6 phiên mà có nhiều cải tiến bật, bổ sung nhiều tính hay ho hẳn so với trước sử dụng nhiều dự án đại, lý đưa vào nội dung sách Hiện tại, ES6 hỗ trợ hầu hết trình duyệt đại Chrome, Firefox, Edge phiên Node.JS Không giống với cú pháp mà học phần trước sách, với ES6 bạn có phần bỡ ngỡ đọc mã nguồn mà nhìn tồn ký tự “suy ra”, “dấu chấm” kiểu sau: var pairs = evens.map(v => ({even: v, odd: v + 1})); // Statement bodies nums.forEach(v => { if (v % === 0) fives.push(v); 32 }); // Hoặc const arr1 = [1,2,3] const arr2 = [4,5,6] const arr3 = [ arr1, arr2] Trong chương sách, khơng thể giới thiệu hết tất cú pháp ES6, giới thiệu cú pháp, tính phổ biến ES6 để bạn sử dụng đọc hiểu mã nguồn Javascript viết theo chuẩn ES6 OK, cịn chờ nữa, bắt đầu thơi nhỉ! Đây demo - phần Đặt sách để đọc đầy đủ 33 Nội dung >> Giới thiệu Front-end framework phổ biến PHẦN JAVASCRIPT FRAMEWORK Như bạn biết, Javascript ngơn ngữ lập trình, việc hiểu vận dụng tốt kiến thức Javascript tảng để bạn bước vào dự án thực tế Thông thường, dự án thực tế xây dựng ứng dụng mà sử dụng Javascript, tốn nhiều cơng sức thời gian Thay đó, họ sử dụng Javascript framework, điều giúp họ tăng tốc độ phát triển dự án, nhanh chóng đưa sản phẩm thị trường Tất nhiên, để bạn học làm chủ Javascript framework bất kỳ, trước hết bạn phải nắm vững kiến thức tảng ngơn ngữ lập trình Javascript, lý phần để cuối sách Đây demo - phần Đặt sách để đọc đầy đủ 34 Nội dung >> Cùng thực hành viết code Javascript với tập Sau viết code xong chạy unit test để kiểm tra kết PHẦN 10 BÀI TẬP Xin chúc mừng (^_^) bạn đến tận Chúc mừng kiên trì nỗ lực bạn Sau xong phần lý thuyết, để nắm nhớ lâu khơng thể thiếu phần thực hành Bạn làm nhiều, va chạm với nhiều loại yêu cầu, giúp bạn nhanh nhạy nhớ lý thuyết lâu hơn, giống chiến binh dạn dày trận mạc trở lên tinh nhuệ Phần này, làm tập để kiểm tra xem bạn nắm kiến thức đến đâu, rèn luyện kỹ viết code Các tập xếp từ dễ đến khó Các bạn cố gắng tự thực sau tham khảo đáp án Nên nhớ, đáp án mang tính chất tham khảo, bạn làm theo cách được, miễn chương trình chạy kết Đây demo - phần Đặt sách để đọc đầy đủ 35 Cám ơn bạn quan tâm tới sách "JAVASCRIPT TỪ CƠ BẢN TỚI NÂNG CAO" VNTALKING Mời bạn truy cập Đặt sách "Javascript từ tới nâng cao" để đặt mua sách đầy đủ Đặc biệt ưu đãi cho bạn học sinh - sinh viên 36 PHỤ LỤC CUỐN SÁCH CỦA VNTALKING Đến thời điểm tại, VNTALKING hồn thành dự án sách học lập trình Sách học Javascript sách thứ mà VNTALKING thực Nếu bạn muốn tìm hiểu nhiều back-end front-end, mời bạn tham khảo sách: Lập trình Node.JS thật đơn giản Đọc sách https://vntalking.com/sach-hoc-lap-trinh-node-js-thatdon-gian-html Lập trình React thật đơn giản Đọc sách https://vntalking.com/tai-lieu-hoc-reactjs-tieng-viet Hi vọng thời gian tới, VNTALKING tiếp tục nhận ủng hộ độc giả Thành công bạn động lực để VNTALKING cho nhiều sách với chất lượng tốt nữa, đáp ứng nhu cầu học lập trình người 37 ... Ưu điểm Javascript 16 Giới hạn Javascript 17 Công cụ phát triển 18 Thực thi chương trình Javascript 18 Tạo chương trình Javascript. .. lĩnh vực mà Javascript làm Các bạn bình tĩnh khám phá Lịch sử Javascript Javascript tạo lập trình viên kỳ cựu Brendan Eich, giới thiệu lần đầu năm 1995, xuất trình duyệt Netscape, trình duyệt... tập quy tắc lập trình khơng dành riêng cho Javascript mà nhiều ngôn ngữ lập trình khác ActionScript Nhưng có lẽ Javascript ngơn ngữ lập trình phổ biến nên nhiều người mặc định Javascript tiêu