Bắt đầu với JavaScript PDF
Về cơ bản nó có thể làm bất cứ điều gì. Nó phổ biến đến mức mọi thứ mới xuất hiện sẽ có một số loại tích hợp JavaScript vào một lúc nào đó Show
JavaScript là một ngôn ngữ lập trình được
Trong trường hợp bạn đang thắc mắc, JavaScript không liên quan gì đến Java, đó là một lựa chọn tên tồi nhưng chúng ta phải chung sống với nó Tóm tắt sổ tayCập nhật. Giờ đây, bạn có thể nhận phiên bản PDF và ePub của Sổ tay JavaScript dành cho người mới bắt đầu này Một chút lịch sửĐược tạo ra vào năm 1995, JavaScript đã trải qua một chặng đường rất dài kể từ những khởi đầu khiêm tốn của nó Đó là ngôn ngữ kịch bản đầu tiên được hỗ trợ nguyên bản bởi các trình duyệt web và nhờ đó, nó đã đạt được lợi thế cạnh tranh so với bất kỳ ngôn ngữ nào khác và ngày nay nó vẫn là ngôn ngữ kịch bản duy nhất mà chúng ta có thể sử dụng để xây dựng các Ứng dụng Web Các ngôn ngữ khác tồn tại, nhưng tất cả đều phải biên dịch thành JavaScript - hoặc gần đây là WebAssembly, nhưng đây là một câu chuyện khác Ban đầu, JavaScript không mạnh như ngày nay và nó chủ yếu được sử dụng cho các hình ảnh động lạ mắt và điều kỳ diệu vào thời điểm đó được gọi là Dynamic HTML Với nhu cầu ngày càng tăng mà nền tảng web yêu cầu (và tiếp tục yêu cầu), JavaScript cũng có trách nhiệm phát triển, để đáp ứng nhu cầu của một trong những hệ sinh thái được sử dụng rộng rãi nhất trên thế giới JavaScript hiện cũng được sử dụng rộng rãi bên ngoài trình duyệt. Sự trỗi dậy của Node. js trong vài năm qua đã mở khóa phát triển phụ trợ, từng là miền của Java, Ruby, Python, PHP và các ngôn ngữ phía máy chủ truyền thống hơn JavaScript hiện cũng là ngôn ngữ cung cấp năng lượng cho cơ sở dữ liệu và nhiều ứng dụng khác, thậm chí có thể phát triển các ứng dụng nhúng, ứng dụng dành cho thiết bị di động, ứng dụng TV, v.v. Khởi đầu là một ngôn ngữ nhỏ bên trong trình duyệt hiện là ngôn ngữ phổ biến nhất trên thế giới Chỉ JavaScriptĐôi khi thật khó để tách JavaScript khỏi các tính năng của môi trường mà nó được sử dụng Ví dụ: dòng 55 mà bạn có thể tìm thấy trong nhiều ví dụ về mã không phải là JavaScript. Thay vào đó, nó là một phần của thư viện API rộng lớn được cung cấp cho chúng tôi trong trình duyệtTheo cách tương tự, trên máy chủ, đôi khi khó có thể tách các tính năng của ngôn ngữ JavaScript khỏi các API do Node cung cấp. js Là một tính năng cụ thể được cung cấp bởi React hoặc Vue? Trong cuốn sách này tôi nói về JavaScript, ngôn ngữ Không làm phức tạp quá trình học tập của bạn với những thứ bên ngoài nó và được cung cấp bởi các hệ sinh thái bên ngoài Giới thiệu ngắn gọn về cú pháp của JavaScriptTrong phần giới thiệu nhỏ này, tôi muốn nói với bạn về 5 khái niệm
khoảng trắngJavaScript không coi khoảng trắng là có ý nghĩa. Khoảng cách và ngắt dòng có thể được thêm vào theo bất kỳ cách nào bạn muốn, ít nhất là trên lý thuyết Trên thực tế, rất có thể bạn sẽ giữ một phong cách được xác định rõ ràng và tuân thủ những gì mọi người thường sử dụng, đồng thời thực thi điều này bằng cách sử dụng công cụ tạo kiểu tóc hoặc công cụ tạo kiểu chẳng hạn như Prettier Ví dụ: tôi luôn sử dụng 2 ký tự khoảng trắng cho mỗi lần thụt đầu dòng Trường hợp nhạy cảmJavaScript phân biệt chữ hoa chữ thường. Một biến có tên 56 khác với biến 57Điều tương tự cũng xảy ra với bất kỳ số nhận dạng nào chữChúng tôi xác định nghĩa đen là một giá trị được viết trong mã nguồn, ví dụ: một số, một chuỗi, một boolean hoặc các cấu trúc nâng cao hơn, như Object Literals hoặc Array Literals
định danhMã định danh là một chuỗi các ký tự có thể được sử dụng để xác định một biến, một hàm hoặc một đối tượng. Nó có thể bắt đầu bằng một chữ cái, ký hiệu đô la 58 hoặc dấu gạch dưới 59 và có thể chứa các chữ số. Sử dụng Unicode, một chữ cái có thể là bất kỳ ký tự được phép nào, chẳng hạn như biểu tượng cảm xúc ?
Ký hiệu đô la thường được sử dụng để tham chiếu các phần tử DOM Một số tên được dành riêng cho sử dụng nội bộ JavaScript và chúng tôi không thể sử dụng chúng làm số nhận dạng Bình luậnNhận xét là một trong những phần quan trọng nhất của bất kỳ chương trình nào, trong bất kỳ ngôn ngữ lập trình nào. Chúng quan trọng vì chúng cho phép chúng ta chú thích mã và thêm thông tin quan trọng mà người khác (hoặc chính chúng ta) đọc mã sẽ không có sẵn Trong JavaScript, chúng ta có thể viết bình luận trên một dòng bằng cách sử dụng 60. Mọi thứ sau 60 không được trình thông dịch JavaScript coi là mãNhư thế này
Một loại bình luận khác là bình luận nhiều dòng. Nó bắt đầu bằng ________ 062 và kết thúc bằng ________ 063 Mọi thứ ở giữa không được coi là mã 2dấu chấm phẩyMỗi dòng trong chương trình JavaScript được kết thúc tùy chọn bằng dấu chấm phẩy Tôi nói không bắt buộc, vì trình thông dịch JavaScript đủ thông minh để giới thiệu dấu chấm phẩy cho bạn Trong hầu hết các trường hợp, bạn có thể bỏ hoàn toàn dấu chấm phẩy khỏi chương trình của mình mà không cần suy nghĩ về điều đó Thực tế này là rất gây tranh cãi. Một số nhà phát triển sẽ luôn sử dụng dấu chấm phẩy, một số khác sẽ không bao giờ sử dụng dấu chấm phẩy và bạn sẽ luôn tìm thấy mã sử dụng dấu chấm phẩy và mã không Sở thích cá nhân của tôi là tránh dấu chấm phẩy, vì vậy các ví dụ của tôi trong cuốn sách sẽ không bao gồm chúng giá trịMột chuỗi 64 là một giá trị. Một số như 65 là một giá trị. 64 và 65 là các giá trị. 68 và 69 là các loại giá trị đóLoại là loại giá trị, danh mục của nó. Chúng tôi có nhiều loại khác nhau trong JavaScript và chúng tôi sẽ nói chi tiết về chúng sau. Mỗi loại có đặc điểm riêng Khi cần tham chiếu đến một giá trị, chúng ta gán giá trị đó cho một biến. BiếnBiến là một giá trị được gán cho một định danh, vì vậy bạn có thể tham khảo và sử dụng nó sau này trong chương trình Điều này là do JavaScript được gõ lỏng lẻo, một khái niệm mà bạn thường nghe nói đến Một biến phải được khai báo trước khi bạn có thể sử dụng nó Chúng ta có 2 cách chính để khai báo biến. Đầu tiên là sử dụng 70 0Cách thứ hai là sử dụng 71 2Có gì khác biệt? 70 định nghĩa một hằng số tham chiếu đến một giá trị. Điều này có nghĩa là tham chiếu không thể thay đổi. Bạn không thể gán lại một giá trị mới cho nóSử dụng 71 bạn có thể gán giá trị mới cho nóVí dụ, bạn không thể làm điều này 5Bởi vì bạn sẽ gặp lỗi. 74Mặt khác, bạn có thể làm điều đó bằng cách sử dụng 71 8 70 không có nghĩa là "hằng số" theo cách mà một số ngôn ngữ khác như C có nghĩa là. Cụ thể, điều đó không có nghĩa là giá trị không thể thay đổi - điều đó có nghĩa là nó không thể được chỉ định lại. Nếu biến trỏ đến một đối tượng hoặc một mảng (chúng ta sẽ tìm hiểu thêm về đối tượng và mảng sau) thì nội dung của đối tượng hoặc mảng có thể tự do thay đổiBiến 70 phải được khởi tạo tại thời điểm khai báo 0nhưng các giá trị 71 có thể được khởi tạo sau 3Có thể khai báo nhiều biến cùng lúc trong cùng một câu lệnh 0Nhưng bạn không thể khai báo lại cùng một biến nhiều lần 1hoặc bạn sẽ gặp lỗi "khai báo trùng lặp" Lời khuyên của tôi là luôn sử dụng 70 và chỉ sử dụng 71 khi bạn biết mình sẽ cần gán lại giá trị cho biến đó. Tại sao? . Nếu chúng tôi biết một giá trị không thể được chỉ định lại, thì đó là một nguồn lỗi ít hơnBây giờ chúng ta đã thấy cách làm việc với ________ 070 và _______ 071, tôi muốn đề cập đến ________ 083 Cho đến năm 2015, 83 là cách duy nhất chúng ta có thể khai báo một biến trong JavaScript. Ngày nay, một cơ sở mã hiện đại rất có thể sẽ chỉ sử dụng 70 và 71. Có một số khác biệt cơ bản mà tôi trình bày chi tiết trong bài đăng này nhưng nếu bạn mới bắt đầu, bạn có thể không quan tâm đến chúng. Chỉ cần sử dụng 70 và 71các loạiCác biến trong JavaScript không có bất kỳ loại nào được đính kèm Chúng không được gõ Khi bạn gán một giá trị với một số loại cho một biến, sau đó bạn có thể gán lại biến đó để lưu trữ một giá trị thuộc bất kỳ loại nào khác mà không gặp sự cố nào Trong JavaScript, chúng tôi có 2 loại chính. kiểu nguyên thủy và kiểu đối tượng các loại nguyên thủyCác loại nguyên thủy là
Và hai loại đặc biệt. 89 và 90các loại đối tượngBất kỳ giá trị nào không thuộc kiểu nguyên thủy (chuỗi, số, boolean, null hoặc không xác định) đều là một đối tượng Các loại đối tượng có các thuộc tính và cũng có các phương thức có thể hoạt động trên các thuộc tính đó Chúng ta sẽ nói nhiều hơn về các đối tượng sau Biểu thứcMột biểu thức là một đơn vị mã JavaScript duy nhất mà công cụ JavaScript có thể đánh giá và trả về một giá trị Biểu thức có thể khác nhau về độ phức tạp Chúng tôi bắt đầu từ những cái rất đơn giản, được gọi là biểu thức chính 2Biểu thức số học là biểu thức nhận một biến và một toán tử (sớm nói thêm về toán tử) và cho kết quả là một số 3Biểu thức chuỗi là biểu thức dẫn đến một chuỗi 4Các biểu thức logic sử dụng các toán tử logic và phân giải thành một giá trị boolean 5Các biểu thức nâng cao hơn liên quan đến các đối tượng, hàm và mảng và tôi sẽ giới thiệu chúng sau nhà điều hànhToán tử cho phép bạn lấy hai biểu thức đơn giản và kết hợp chúng để tạo thành một biểu thức phức tạp hơn Chúng ta có thể phân loại toán tử dựa trên toán hạng mà chúng làm việc với. Một số toán tử làm việc với 1 toán hạng. Hầu hết làm việc với 2 toán hạng. Chỉ một toán tử hoạt động với 3 toán hạng Trong phần giới thiệu đầu tiên về toán tử này, chúng tôi sẽ giới thiệu các toán tử mà bạn có thể quen thuộc nhất. toán tử có 2 toán hạng Tôi đã giới thiệu một cái khi nói về các biến. toán tử gán 91. Bạn sử dụng 91 để gán giá trị cho một biến 6Bây giờ chúng ta hãy giới thiệu một tập hợp các toán tử nhị phân khác mà bạn đã quen thuộc với toán học cơ bản Toán tử cộng (+) 7Toán tử 93 cũng thực hiện nối chuỗi nếu bạn sử dụng chuỗi, vì vậy hãy chú ý 8Toán tử trừ (-) 9Toán tử chia (/)Trả về thương của toán tử thứ nhất và toán tử thứ hai 0Nếu bạn chia cho 0, JavaScript sẽ không gây ra bất kỳ lỗi nào nhưng trả về giá trị 94 (hoặc 95 nếu giá trị âm) 1Toán tử còn lại (%)Phần còn lại là một phép tính rất hữu ích trong nhiều trường hợp sử dụng 2Phần còn lại bằng 0 luôn là 96, một giá trị đặc biệt có nghĩa là "Không phải là số" 3Toán tử nhân (*)Nhân hai số 4Toán tử lũy thừa (**)Nâng toán hạng thứ nhất lên lũy thừa của toán hạng thứ hai 5quy tắc ưu tiênMọi câu lệnh phức tạp có nhiều toán tử trên cùng một dòng sẽ đưa ra các vấn đề về quyền ưu tiên Lấy ví dụ này 6Kết quả là 2. 5, nhưng tại sao? Thao tác nào được thực hiện trước và thao tác nào cần đợi? Một số thao tác được ưu tiên hơn các thao tác khác. Các quy tắc ưu tiên được liệt kê trong bảng này Toán tửMô tả 97 98 99 nhân/chia 93 01cộng/trừ 91 phép gánCác hoạt động ở cùng cấp độ (như 93 và 01) được thực hiện theo thứ tự chúng được tìm thấy, từ trái sang phảiTheo các quy tắc này, hoạt động trên có thể được giải quyết theo cách này 7Toán tử so sánhSau toán tử gán và toán học, nhóm toán tử thứ ba tôi muốn giới thiệu là toán tử điều kiện Bạn có thể sử dụng các toán tử sau để so sánh hai số hoặc hai chuỗi Các toán tử so sánh luôn trả về một giá trị boolean, một giá trị là 05 hoặc 06)Đó là những toán tử so sánh bất đẳng thức
Thí dụ 8Ngoài những thứ đó, chúng ta có 4 toán tử đẳng thức. Chúng chấp nhận hai giá trị và trả về một giá trị boolean
Lưu ý rằng chúng tôi cũng có 13 và 14 trong JavaScript, nhưng tôi thực sự khuyên bạn chỉ nên sử dụng 11 và 12 vì chúng có thể ngăn ngừa một số sự cố tinh viđiều kiệnVới các toán tử so sánh tại chỗ, chúng ta có thể nói về điều kiện Một câu lệnh 17 được sử dụng để làm cho chương trình đi theo một lộ trình hoặc một lộ trình khác, tùy thuộc vào kết quả của một đánh giá biểu thứcĐây là ví dụ đơn giản nhất, luôn thực thi 9ngược lại, điều này không bao giờ được thực hiện 20Điều kiện kiểm tra biểu thức bạn truyền cho nó để biết giá trị đúng hay sai. Nếu bạn chuyển một số, số đó luôn có giá trị đúng trừ khi nó bằng 0. Nếu bạn chuyển một chuỗi, nó luôn luôn đánh giá là đúng trừ khi đó là một chuỗi rỗng. Đó là những quy tắc chung của việc truyền các loại thành boolean Bạn có nhận thấy các dấu ngoặc nhọn? Một khối có thể được đặt bất cứ nơi nào bạn có thể có một câu lệnh. Và nếu bạn có một câu lệnh duy nhất để thực hiện sau các điều kiện, bạn có thể bỏ qua khối và chỉ cần viết câu lệnh 21Nhưng tôi luôn thích sử dụng dấu ngoặc nhọn để rõ ràng hơn Bạn có thể cung cấp phần thứ hai cho câu lệnh 17. 19Bạn đính kèm một câu lệnh sẽ được thực hiện nếu điều kiện 17 là sai 22Vì 19 chấp nhận một câu lệnh nên bạn có thể lồng một câu lệnh if/else khác bên trong nó 23MảngMảng là tập hợp các phần tử Mảng trong JavaScript không phải là một kiểu riêng Mảng là đối tượng Chúng ta có thể khởi tạo một mảng trống theo 2 cách khác nhau 24Đầu tiên là sử dụng cú pháp mảng chữ. Cái thứ hai sử dụng hàm tích hợp Array Bạn có thể điền trước mảng bằng cú pháp này 25Một mảng có thể chứa bất kỳ giá trị nào, kể cả các giá trị thuộc các kiểu khác nhau 26Vì ta có thể thêm mảng vào mảng nên ta có thể tạo mảng nhiều chiều, mảng này có những ứng dụng rất hữu ích (e. g. một ma trận) 27Bạn có thể truy cập bất kỳ phần tử nào của mảng bằng cách tham chiếu chỉ mục của nó, bắt đầu từ số không 28Bạn có thể khởi tạo một mảng mới với một tập hợp các giá trị bằng cách sử dụng cú pháp này, cú pháp này trước tiên sẽ khởi tạo một mảng gồm 12 phần tử và điền vào mỗi phần tử một số 22 29Bạn có thể lấy số phần tử trong mảng bằng cách kiểm tra thuộc tính 23 của nó 00Lưu ý rằng bạn có thể đặt độ dài của mảng. Nếu bạn gán một số lớn hơn dung lượng hiện tại của mảng, sẽ không có gì xảy ra. Nếu gán số nhỏ hơn thì mảng bị cắt tại vị trí đó 01Cách thêm một mục vào một mảngChúng ta có thể thêm một phần tử vào cuối mảng bằng phương thức 24 02Chúng ta có thể thêm một phần tử vào đầu mảng bằng phương thức 25 03Cách xóa một mục khỏi mảngChúng ta có thể xóa một phần tử ở cuối mảng bằng phương thức 26 04Chúng ta có thể xóa một mục khỏi đầu mảng bằng phương thức 27 05Cách nối hai hoặc nhiều mảngBạn có thể tham gia nhiều mảng bằng cách sử dụng 28 06Bạn cũng có thể sử dụng toán tử trải rộng ( 29) theo cách này 07Cách tìm một mục cụ thể trong mảngBạn có thể sử dụng phương pháp 30 của một mảng 08Trả về mục đầu tiên trả về true và trả về 90 nếu không tìm thấy phần tửMột cú pháp thường được sử dụng là 09Dòng trên sẽ trả về phần tử đầu tiên trong mảng có 32 33 hoạt động tương tự như 30, nhưng trả về chỉ mục của mục đầu tiên trả về true và nếu không tìm thấy, nó sẽ trả về 90 20Một phương pháp khác là 36 21Trả về true nếu 37 chứa 38 22Trả về true nếu 37 chứa 38 sau vị trí 41DâyXâu là một dãy các ký tự Nó cũng có thể được định nghĩa là một chuỗi ký tự, được đặt trong dấu ngoặc kép hoặc dấu ngoặc kép 23Cá nhân tôi luôn thích sử dụng dấu ngoặc đơn và chỉ sử dụng dấu ngoặc kép trong HTML để xác định thuộc tính Bạn gán một giá trị chuỗi cho một biến như thế này 24Bạn có thể xác định độ dài của một chuỗi bằng cách sử dụng thuộc tính 23 của nó 25Đây là một chuỗi rỗng. 43. Thuộc tính độ dài của nó là 0 26Hai chuỗi có thể được nối bằng toán tử 93 27Bạn có thể sử dụng toán tử 93 để nội suy các biến 28Một cách khác để xác định chuỗi là sử dụng chữ mẫu, được xác định bên trong backticks. Chúng đặc biệt hữu ích để tạo chuỗi nhiều dòng đơn giản hơn nhiều. Với dấu ngoặc đơn hoặc dấu ngoặc kép, bạn không thể dễ dàng xác định chuỗi nhiều dòng - bạn cần sử dụng các ký tự thoát Khi một mẫu chữ được mở bằng backtick, bạn chỉ cần nhấn enter để tạo một dòng mới, không có ký tự đặc biệt và nó được hiển thị nguyên trạng 29Mẫu chữ cũng rất tuyệt vì chúng cung cấp một cách dễ dàng để nội suy các biến và biểu thức thành chuỗi Bạn làm như vậy bằng cách sử dụng cú pháp 46 50bên trong 47, bạn có thể thêm bất cứ thứ gì, kể cả các biểu thức 51vòng lặpVòng lặp là một trong những cấu trúc điều khiển chính của JavaScript Với một vòng lặp, chúng ta có thể tự động hóa và lặp lại một khối mã bất kể chúng ta muốn nó chạy bao nhiêu lần, thậm chí là vô thời hạn JavaScript cung cấp nhiều cách để lặp qua các vòng lặp Tôi muốn tập trung vào 3 cách
// a comment true //another comment 48Vòng lặp while là cấu trúc lặp đơn giản nhất mà JavaScript cung cấp cho chúng ta Chúng tôi thêm một điều kiện sau từ khóa 48 và chúng tôi cung cấp một khối được chạy cho đến khi điều kiện ước tính thành 05Thí dụ 52Bạn có thể ngắt vòng lặp 48 bằng từ khóa 52, như thế này 53và nếu bạn quyết định rằng giữa một vòng lặp, bạn muốn bỏ qua bước lặp hiện tại, bạn có thể chuyển sang bước lặp tiếp theo bằng cách sử dụng 53 54Rất giống với 48, chúng ta có các vòng lặp 55. Về cơ bản, nó giống như 48, ngoại trừ điều kiện được đánh giá sau khi khối mã được thực thiĐiều này có nghĩa là khối luôn được thực thi ít nhất một lần Thí dụ 55// a comment true //another comment 57Cấu trúc vòng lặp rất quan trọng thứ hai trong JavaScript là vòng lặp for Chúng tôi sử dụng từ khóa 57 và chúng tôi chuyển một bộ 3 hướng dẫn. phần khởi tạo, điều kiện và phần gia tăngThí dụ 56Giống như với vòng lặp 48, bạn có thể ngắt vòng lặp 57 bằng cách sử dụng 52 và bạn có thể tua nhanh tới lần lặp tiếp theo của vòng lặp 57 bằng cách sử dụng 53// a comment true //another comment 64Vòng lặp này tương đối gần đây (được giới thiệu vào năm 2015) và là phiên bản đơn giản hóa của vòng lặp 57 57Chức năngTrong bất kỳ chương trình JavaScript phức tạp vừa phải nào, mọi thứ xảy ra bên trong các hàm Các chức năng là một phần cốt lõi, thiết yếu của JavaScript Hàm là gì? Một chức năng là một khối mã, độc lập Đây là một khai báo chức năng 58Một chức năng có thể được chạy bất cứ lúc nào bạn muốn bằng cách gọi nó, như thế này 59Một hàm có thể có một hoặc nhiều đối số 80Khi chúng ta có thể truyền một đối số, chúng ta gọi hàm truyền tham số 81Lưu ý rằng trong lần gọi thứ hai, tôi đã chuyển tham số chuỗi 66 làm đối số 67, nhưng không có 68. Trong trường hợp này, 68 bên trong hàm là 90Chúng ta có thể kiểm tra xem một giá trị có phải là không xác định hay không bằng cách sử dụng điều kiện này 82 71 là toán tử một ngôi cho phép chúng ta kiểm tra kiểu của một biếnBạn cũng có thể kiểm tra theo cách này 83Mặc dù điều kiện cũng sẽ đúng nếu 68 là 89, 22 hoặc một chuỗi rỗngBạn có thể có các giá trị mặc định cho các tham số, trong trường hợp chúng không được thông qua 84Bạn có thể chuyển bất kỳ giá trị nào dưới dạng tham số. số, chuỗi, booleans, mảng, đối tượng và cả hàm Hàm có giá trị trả về. Theo mặc định, hàm trả về 90, trừ khi bạn thêm từ khóa 76 có giá trị 85Chúng ta có thể gán giá trị trả về này cho một biến khi gọi hàm 86 77 hiện giữ một chuỗi có giá trị 78Bạn chỉ có thể trả về một giá trị Để trả về nhiều giá trị, bạn có thể trả về một đối tượng hoặc một mảng như thế này 87Các hàm có thể được định nghĩa bên trong các hàm khác 88Hàm lồng nhau không thể được gọi từ bên ngoài hàm kèm theo Bạn cũng có thể trả về một hàm từ một hàm chức năng mũi tênCác hàm mũi tên là phần giới thiệu gần đây về JavaScript Chúng thường được sử dụng thay cho các hàm "thông thường", những hàm tôi đã mô tả trong chương trước. Bạn sẽ tìm thấy cả hai hình thức được sử dụng ở mọi nơi Về mặt trực quan, chúng cho phép bạn viết các hàm với cú pháp ngắn hơn, từ 89đến 00Nhưng mà. lưu ý rằng chúng tôi không có tên ở đây Các chức năng mũi tên là ẩn danh. Chúng ta phải gán chúng cho một biến Chúng ta có thể gán một hàm thông thường cho một biến, như thế này 01Khi chúng tôi làm như vậy, chúng tôi có thể xóa tên khỏi chức năng 02và gọi hàm bằng tên biến 03Đó là điều tương tự chúng tôi làm với các chức năng mũi tên 04Nếu thân hàm chỉ chứa một câu lệnh, bạn có thể bỏ qua dấu ngoặc đơn và viết mọi thứ trên một dòng 05Các tham số được truyền trong ngoặc đơn 06Nếu bạn có một (và chỉ một) tham số, bạn có thể bỏ hoàn toàn dấu ngoặc đơn 07Các hàm mũi tên cho phép bạn trả về ẩn - các giá trị được trả về mà không cần phải sử dụng từ khóa 76Nó hoạt động khi có câu lệnh một dòng trong thân hàm 08Giống như các hàm thông thường, chúng ta có thể có các giá trị mặc định cho các tham số trong trường hợp chúng không được truyền 09Và giống như các hàm thông thường, chúng ta chỉ có thể trả về một giá trị Hàm mũi tên cũng có thể chứa các hàm mũi tên khác hoặc thậm chí là các hàm thông thường Hai loại chức năng này rất giống nhau, vì vậy bạn có thể hỏi tại sao chức năng mũi tên lại được giới thiệu. Sự khác biệt lớn với các hàm thông thường là khi chúng được sử dụng làm phương thức đối tượng. Đây là điều chúng tôi sẽ sớm xem xét Các đối tượngBất kỳ giá trị nào không thuộc kiểu nguyên thủy (chuỗi, số, boolean, ký hiệu, null hoặc không xác định) đều là đối tượng Đây là cách chúng ta định nghĩa một đối tượng 30Đây là cú pháp theo nghĩa đen của đối tượng, là một trong những điều thú vị nhất trong JavaScript Bạn cũng có thể sử dụng cú pháp 80 31Một cú pháp khác là sử dụng 81 32Bạn cũng có thể khởi tạo một đối tượng bằng cách sử dụng từ khóa 82 trước một hàm có chữ in hoa. Hàm này đóng vai trò là hàm tạo cho đối tượng đó. Trong đó, chúng ta có thể khởi tạo các đối số mà chúng ta nhận được dưới dạng tham số, để thiết lập trạng thái ban đầu của đối tượng 33Chúng tôi khởi tạo một đối tượng mới bằng cách sử dụng 34Các đối tượng luôn được truyền theo tham chiếu Nếu bạn gán một biến có cùng giá trị với biến khác, nếu đó là kiểu nguyên thủy như số hoặc chuỗi, chúng sẽ được truyền theo giá trị Lấy ví dụ này 35 36Ngay cả các mảng hoặc hàm, về bản chất, cũng là các đối tượng, vì vậy điều rất quan trọng là phải hiểu cách chúng hoạt động Thuộc tính đối tượngCác đối tượng có các thuộc tính, được tạo bởi một nhãn được liên kết với một giá trị Giá trị của một thuộc tính có thể thuộc bất kỳ kiểu nào, có nghĩa là nó có thể là một mảng, một hàm và thậm chí nó có thể là một đối tượng, vì các đối tượng có thể lồng các đối tượng khác Đây là cú pháp nghĩa đen của đối tượng mà chúng ta đã thấy trong chương trước 30Chúng ta có thể định nghĩa thuộc tính 67 theo cách này 38Ở đây chúng ta có một đối tượng 84 với thuộc tính có tên là 67, với giá trị 86Nhãn có thể là bất kỳ chuỗi nào, nhưng hãy cẩn thận với các ký tự đặc biệt - nếu tôi muốn bao gồm một ký tự không hợp lệ làm tên biến trong tên thuộc tính, tôi sẽ phải sử dụng dấu ngoặc kép quanh ký tự đó 39Các ký tự tên biến không hợp lệ bao gồm khoảng trắng, dấu gạch nối và các ký tự đặc biệt khác Như bạn có thể thấy, khi chúng tôi có nhiều thuộc tính, chúng tôi sẽ phân tách từng thuộc tính bằng dấu phẩy Chúng ta có thể truy xuất giá trị của một thuộc tính bằng 2 cú pháp khác nhau Đầu tiên là ký hiệu dấu chấm 00Cách thứ hai (là cách duy nhất chúng ta có thể sử dụng cho các thuộc tính có tên không hợp lệ), là sử dụng dấu ngoặc vuông 01Nếu bạn truy cập một thuộc tính không tồn tại, bạn sẽ nhận được giá trị 90 02Như đã đề cập trước đây, các đối tượng có thể có các đối tượng lồng nhau làm thuộc tính 03Trong ví dụ này, bạn có thể truy cập tên thương hiệu bằng cách sử dụng 04hoặc 05Bạn có thể đặt giá trị của một thuộc tính khi bạn xác định đối tượng Nhưng bạn luôn có thể cập nhật nó sau này 06Và bạn cũng có thể thêm các thuộc tính mới vào một đối tượng 07Cho đối tượng 08bạn có thể xóa một thuộc tính khỏi đối tượng này bằng cách sử dụng 09phương pháp đối tượngTôi đã nói về chức năng trong một chương trước Các chức năng có thể được gán cho một thuộc tính chức năng và trong trường hợp này, chúng được gọi là các phương thức Trong ví dụ này, thuộc tính 88 được gán một chức năng và chúng ta có thể gọi nó bằng cách sử dụng cú pháp dấu chấm mà chúng ta đã sử dụng cho các thuộc tính, với dấu ngoặc đơn ở cuối 10Bên trong một phương thức được xác định bằng cú pháp 89, chúng ta có quyền truy cập vào thể hiện đối tượng bằng cách tham chiếu 90Trong ví dụ sau, chúng tôi có quyền truy cập vào các giá trị thuộc tính 91 và 92 bằng cách sử dụng 93 và 94 11Điều quan trọng cần lưu ý là sự khác biệt này giữa hàm thông thường và hàm mũi tên - chúng tôi không có quyền truy cập vào 90 nếu chúng tôi sử dụng hàm mũi tên 12Điều này là do các hàm mũi tên không bị ràng buộc với đối tượng Đây là lý do tại sao các hàm thông thường thường được sử dụng làm phương thức đối tượng Các phương thức có thể chấp nhận các tham số, giống như các hàm thông thường 13Các lớp họcChúng ta đã nói về các đối tượng, đây là một trong những phần thú vị nhất của JavaScript Trong chương này, chúng ta sẽ đi lên một cấp độ bằng cách giới thiệu các lớp các lớp học là gì? Hãy lấy một đối tượng người 14Chúng ta có thể tạo một lớp có tên là ________ 996 (lưu ý chữ hoa ________ 997, một quy ước khi sử dụng các lớp), có thuộc tính 98 15Bây giờ từ lớp này, chúng ta khởi tạo một đối tượng 99 như thế này 16 99 được gọi là một thể hiện của lớp PersonChúng ta có thể đặt giá trị của thuộc tính 98 17và chúng ta có thể truy cập nó bằng cách sử dụng 18giống như chúng tôi làm cho các thuộc tính đối tượng Các lớp có thể chứa các thuộc tính, như 98 và các phương thứcCác phương thức được định nghĩa theo cách này 19và chúng ta có thể gọi các phương thức trên một thể hiện của lớp 20Có một phương thức đặc biệt gọi là 203 mà chúng ta có thể sử dụng để khởi tạo các thuộc tính của lớp khi chúng ta tạo một thể hiện đối tượng mớiNó hoạt động như thế này 21Lưu ý cách chúng tôi sử dụng 90 để truy cập thể hiện đối tượngBây giờ chúng ta có thể khởi tạo một đối tượng mới từ lớp, truyền vào một chuỗi và khi chúng ta gọi 64, chúng ta sẽ nhận được một thông báo được cá nhân hóa 22Khi đối tượng được khởi tạo, phương thức 206 được gọi với bất kỳ tham số nào được truyềnThông thường các phương thức được định nghĩa trên thể hiện của đối tượng, không phải trên lớp Thay vào đó, bạn có thể định nghĩa một phương thức là 207 để cho phép nó được thực thi trên lớp 23Điều này rất hữu ích, đôi khi Di sảnMột lớp có thể mở rộng một lớp khác và các đối tượng được khởi tạo bằng lớp đó kế thừa tất cả các phương thức của cả hai lớp Giả sử chúng ta có một lớp 96 24Chúng ta có thể định nghĩa một lớp mới, 209, mở rộng 96 25Bây giờ nếu chúng ta khởi tạo một đối tượng mới với lớp 209, thì nó có quyền truy cập vào phương thức 212 26Bên trong một lớp con, bạn có thể tham chiếu lớp cha bằng cách gọi 213 27Chương trình trên in Xin chào, tôi là một người. Tôi cũng là một lập trình viên Lập trình và gọi lại không đồng bộHầu hết thời gian, mã JavaScript được chạy đồng bộ Điều này có nghĩa là một dòng mã được thực thi, sau đó dòng mã tiếp theo được thực thi, v.v. Mọi thứ đều như bạn mong đợi và cách nó hoạt động trong hầu hết các ngôn ngữ lập trình Tuy nhiên, có những lúc bạn không thể đợi một dòng mã thực thi Bạn không thể đợi 2 giây để tải một tệp lớn và dừng hoàn toàn chương trình Bạn không thể đợi tài nguyên mạng được tải xuống trước khi làm việc khác JavaScript giải quyết vấn đề này bằng cách sử dụng lệnh gọi lại Một trong những ví dụ đơn giản nhất về cách sử dụng gọi lại là với bộ tính giờ. Bộ hẹn giờ không phải là một phần của JavaScript, nhưng chúng được cung cấp bởi trình duyệt và Node. js. Hãy để tôi nói về một trong những đồng hồ hẹn giờ mà chúng ta có. 214Hàm 214 chấp nhận 2 đối số. một chức năng, và một số. Số là mili giây phải vượt qua trước khi chức năng được chạyThí dụ 28Hàm chứa dòng 216 sẽ được thực hiện sau 2 giâyNếu bạn thêm một 217 trước chức năng và 218 sau nó 29Bạn sẽ thấy điều này xảy ra trong bảng điều khiển của mình 30Hàm gọi lại được thực thi không đồng bộ Đây là một mẫu rất phổ biến khi làm việc với hệ thống tệp, mạng, sự kiện hoặc DOM trong trình duyệt Tất cả những điều tôi đã đề cập không phải là JavaScript "cốt lõi", vì vậy chúng không được giải thích trong sổ tay này, nhưng bạn sẽ tìm thấy rất nhiều ví dụ trong các sổ tay khác của tôi có sẵn tại https. // flaviocopes. com Đây là cách chúng tôi có thể triển khai các cuộc gọi lại trong mã của mình Chúng tôi xác định một chức năng chấp nhận một tham số 219, đó là một chức năngKhi mã đã sẵn sàng để gọi lại cuộc gọi, chúng tôi gọi nó bằng cách chuyển kết quả 31Mã sử dụng chức năng này sẽ sử dụng nó như thế này 32lời hứaLời hứa là một cách khác để xử lý mã không đồng bộ Như chúng ta đã thấy trong chương trước, với các cuộc gọi lại, chúng ta sẽ chuyển một hàm cho một lệnh gọi hàm khác sẽ được gọi khi hàm đó xử lý xong Như thế này 32Khi mã 220 kết thúc, nó gọi hàm nhận được dưới dạng tham số 31Vấn đề chính với cách tiếp cận này là nếu chúng ta cần sử dụng kết quả của hàm này trong phần còn lại của mã, thì tất cả mã của chúng ta phải được lồng vào bên trong hàm gọi lại và nếu chúng ta phải thực hiện 2-3 lệnh gọi lại thì chúng ta sẽ nhập gì? 35Lời hứa là một cách để giải quyết vấn đề này thay vì làm 32Chúng tôi gọi một chức năng dựa trên lời hứa theo cách này 37Đầu tiên chúng ta gọi hàm, sau đó chúng ta có một phương thức 221 được gọi khi hàm kết thúcViệc thụt lề không thành vấn đề, nhưng bạn sẽ thường sử dụng kiểu này cho rõ ràng Việc phát hiện lỗi bằng phương pháp 222 là phổ biến 38Bây giờ, để có thể sử dụng cú pháp này, việc triển khai hàm 220 phải đặc biệt một chút. Nó phải sử dụng Promises APIThay vì khai báo nó như một chức năng bình thường 39Chúng tôi tuyên bố nó như một đối tượng lời hứa 40và chúng tôi chuyển một hàm trong hàm tạo Promise 41Hàm này nhận 2 tham số. Đầu tiên là chức năng chúng ta gọi để giải quyết lời hứa, chức năng thứ hai chúng ta gọi để từ chối lời hứa 42Giải quyết một lời hứa có nghĩa là hoàn thành nó thành công (dẫn đến việc gọi phương thức 221 trong bất kỳ cách nào sử dụng nó)Từ chối một lời hứa có nghĩa là kết thúc nó bằng một lỗi (dẫn đến việc gọi phương thức 222 trong bất kỳ cách nào sử dụng nó)Đây là cách 43Chúng ta có thể truyền tham số cho hàm giải quyết và từ chối, thuộc bất kỳ loại nào chúng ta muốn Không đồng bộ và đang chờCác chức năng không đồng bộ là một mức độ trừu tượng cao hơn của các lời hứa Hàm async trả về một lời hứa, như trong ví dụ này 44Code nào muốn dùng hàm này thì dùng từ khóa 226 ngay trước hàm 45và làm như vậy, bất kỳ dữ liệu nào được trả về bởi lời hứa sẽ được gán cho biến 227Trong trường hợp của chúng tôi, dữ liệu là chuỗi "một số dữ liệu" Với một cảnh báo cụ thể. bất cứ khi nào chúng ta sử dụng từ khóa 226, chúng ta phải làm như vậy bên trong một hàm được định nghĩa là 229Như thế này 46Bộ đôi async/await cho phép chúng ta có mã sạch hơn và mô hình tinh thần đơn giản để hoạt động với mã không đồng bộ Như bạn có thể thấy trong ví dụ trên, mã của chúng tôi trông rất đơn giản. So sánh nó với mã bằng cách sử dụng lời hứa hoặc chức năng gọi lại Và đây là một ví dụ rất đơn giản, những lợi ích chính sẽ phát sinh khi mã phức tạp hơn nhiều Ví dụ: đây là cách bạn lấy tài nguyên JSON bằng cách sử dụng API Tìm nạp và phân tích cú pháp tài nguyên đó bằng cách sử dụng lời hứa 47Và đây là chức năng tương tự được cung cấp bằng cách sử dụng await/async 48Phạm vi biến đổiKhi tôi giới thiệu các biến, tôi đã nói về việc sử dụng 70, 71 và 83Phạm vi là tập hợp các biến hiển thị đối với một phần của chương trình Trong JavaScript, chúng tôi có phạm vi toàn cầu, phạm vi khối và phạm vi chức năng Nếu một biến được định nghĩa bên ngoài một hàm hoặc khối, thì nó được gắn vào đối tượng toàn cục và nó có phạm vi toàn cục, nghĩa là nó có sẵn trong mọi phần của chương trình Có một sự khác biệt rất quan trọng giữa các khai báo 83, 71 và 70Một biến được định nghĩa là 83 bên trong một hàm chỉ hiển thị bên trong hàm đó, tương tự như đối số của hàmMặt khác, một biến được xác định là 70 hoặc 71 chỉ hiển thị bên trong khối nơi nó được xác địnhMột khối là một tập hợp các hướng dẫn được nhóm thành một cặp dấu ngoặc nhọn, giống như các dấu ngoặc nhọn mà chúng ta có thể tìm thấy bên trong câu lệnh 17, vòng lặp 57 hoặc hàmĐiều quan trọng là phải hiểu rằng một khối không xác định phạm vi mới cho 83, nhưng nó xác định phạm vi cho 71 và 70Điều này có ý nghĩa rất thiết thực Giả sử bạn định nghĩa một biến 83 bên trong một điều kiện 17 trong một hàm 49Nếu bạn gọi chức năng này, bạn sẽ nhận được 246 được in ra bàn điều khiểnNếu bạn cố gắng di chuyển bảng điều khiển. nhật ký (dữ liệu) sau 17, nó vẫn hoạt động 50Nhưng nếu bạn chuyển 248 sang 249 51Bạn sẽ nhận được một lỗi. 250Điều này là do 83 có phạm vi chức năng và có một điều đặc biệt xảy ra ở đây được gọi là cẩu. Nói tóm lại, khai báo 83 được JavaScript chuyển lên đầu hàm gần nhất trước khi nó chạy mã. Đây là giao diện của chức năng đối với JS bên trong, ít nhiều 52Đây là lý do tại sao bạn cũng có thể đặt 253 ở đầu hàm, ngay cả trước khi hàm được khai báo và bạn sẽ nhận được giá trị 90 cho biến đó 53nhưng nếu bạn chuyển sang 71, bạn sẽ gặp lỗi 250, vì việc nâng lên không xảy ra đối với khai báo 71 70 tuân theo các quy tắc giống như 71. nó nằm trong phạm vi khốiBan đầu có thể khó khăn, nhưng một khi bạn nhận ra sự khác biệt này, thì bạn sẽ thấy tại sao ngày nay 83 bị coi là một phương pháp tồi so với 71 - chúng có ít bộ phận chuyển động hơn và phạm vi của chúng bị giới hạn trong khối, điều này cũng khiến chúng 54Khi bạn thoát khỏi vòng lặp, 41 sẽ là một biến hợp lệ với giá trị 10Nếu bạn chuyển sang 71, khi bạn cố gắng sang 264 sẽ dẫn đến lỗi 265Sự kết luậnCảm ơn rất nhiều vì đã đọc cuốn sách này Tôi hy vọng nó sẽ truyền cảm hứng cho bạn để tìm hiểu thêm về JavaScript Để biết thêm về JavaScript, hãy xem blog của tôi flaviocopes. com Ghi chú. Bạn có thể nhận phiên bản PDF và ePub của Sổ tay JavaScript dành cho người mới bắt đầu này QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Đọc thêm bài viết Nếu bài viết này hữu ích, hãy tweet nó Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu 2 tháng có đủ để học JavaScript không?Đây là câu trả lời ngắn gọn. hầu hết các lập trình viên đều đồng ý rằng phải mất từ sáu đến chín tháng để phát triển thành thạo JavaScript . Và thậm chí sau đó, bạn sẽ dành nhiều năm để học các kỹ năng mới và phát triển sự hiểu biết của mình về nó.
3 tháng có đủ để học JavaScript không?Tuy nhiên, không giống như CSS và HTML, JavaScript không phải là thứ có thể thành thạo chỉ trong hai tuần. Nhưng, có thể hoàn thành chỉ trong ba tháng . Hầu hết các nhà tuyển dụng sẽ sẵn lòng thuê bạn làm nhà phát triển web của họ nếu bạn nắm vững một số kiến thức cơ bản về JavaScript. Tất nhiên, việc học không bao giờ dừng lại.
Tôi có thể tự học JavaScript không?Bạn có thể học JavaScript mà không cần bằng Khoa học Máy tính. Bạn thậm chí có thể có một sự nghiệp thành công trong lĩnh vực phần mềm mà không cần bằng Khoa học Máy tính. JavaScript chỉ đơn giản là một bước trong toàn bộ quá trình trở thành một nhà phát triển giỏi
Tôi có thể học JavaScript trong 30 ngày không?Bạn sẽ tìm hiểu kiến thức cơ bản về JavaScript như toán tử, vòng lặp, biến và hàm gọi lại. Học Javascript trong một tháng — Được chứng nhận JavaScript chỉ sau 30 ngày với khóa học viết mã JavaScript trực tuyến này . Mỗi tuần, bạn sẽ được giao một giờ nội dung video, với nhiệm vụ thực hiện một dự án trong thế giới thực. |