Hướng dẫn how do i start javascript? - làm cách nào để bắt đầu javascript?
JavaScript là ngôn ngữ lập trình thêm tính tương tác với trang web của bạn. Điều này xảy ra trong các trò chơi, trong hành vi của các câu trả lời khi nhấn các nút hoặc với mục nhập dữ liệu trên các biểu mẫu; với kiểu dáng năng động; Với hoạt hình, v.v ... Bài viết này giúp bạn bắt đầu với JavaScript và hiểu biết về những gì có thể. JavaScript là gì?JavaScript là một ngôn ngữ lập trình mạnh mẽ có thể thêm tính tương tác vào một trang web. Nó được phát minh bởi Brendan Eich. JavaScript linh hoạt và thân thiện với người mới bắt đầu. Với nhiều kinh nghiệm hơn, bạn sẽ có thể tạo các trò chơi, đồ họa 2D và 3D hoạt hình, các ứng dụng dựa trên cơ sở dữ liệu toàn diện và nhiều hơn nữa! Bản thân JavaScript tương đối nhỏ gọn, nhưng rất linh hoạt. Các nhà phát triển đã viết một loạt các công cụ trên đầu ngôn ngữ JavaScript cốt lõi, mở khóa một lượng lớn chức năng với nỗ lực tối thiểu. Bao gồm các:
Nó nằm ngoài phạm vi của bài viết này như một phần giới thiệu nhẹ về JavaScript, để trình bày các chi tiết về cách ngôn ngữ JavaScript cốt lõi khác với các công cụ được liệt kê ở trên. Bạn có thể tìm hiểu thêm trong khu vực học tập JavaScript của MDN, cũng như ở các phần khác của MDN. Phần dưới đây giới thiệu một số khía cạnh của ngôn ngữ cốt lõi và cung cấp một cơ hội để chơi với một vài tính năng API của trình duyệt. Chúc vui vẻ! Một "thế giới xin chào!" thí dụJavaScript là một trong những công nghệ web hiện đại phổ biến nhất! Khi các kỹ năng JavaScript của bạn phát triển, các trang web của bạn sẽ bước vào một khía cạnh mới của sức mạnh và sự sáng tạo. Tuy nhiên, việc thoải mái với JavaScript khó khăn hơn là thoải mái với HTML và CSS. Bạn có thể phải bắt đầu nhỏ, và tiến bộ dần dần. Để bắt đầu, hãy kiểm tra cách thêm JavaScript vào trang của bạn để tạo một thế giới xin chào! thí dụ. (Xin chào Thế giới! Là tiêu chuẩn cho các ví dụ lập trình giới thiệu.) Cảnh báo: Nếu bạn chưa theo dõi cùng với phần còn lại của khóa học của chúng tôi, hãy tải xuống mã ví dụ này và sử dụng nó làm điểm bắt đầu. If you haven't been following along with the rest of our course, download this example code and use it as a starting point.
Lưu ý: Lý do các hướng dẫn (ở trên) đặt phần tử 4 element near the bottom of the HTML file is that the browser reads code in the order it appears in the file.Nếu JavaScript tải trước và nó được cho là ảnh hưởng đến HTML chưa được tải, có thể có vấn đề. Đặt JavaScript gần cuối trang HTML là một cách để phù hợp với sự phụ thuộc này. Để tìm hiểu thêm về các phương pháp thay thế, hãy xem các chiến lược tải tập lệnh. Chuyện gì đã xảy ra thế?Văn bản tiêu đề đã thay đổi thành Hello World! Sử dụng JavaScript. Bạn đã làm điều này bằng cách sử dụng một hàm gọi là 5 để lấy tham chiếu đến tiêu đề của bạn, sau đó lưu trữ nó trong một biến có tên là 6. Điều này tương tự như những gì chúng tôi đã sử dụng bộ chọn CSS. Khi bạn muốn làm điều gì đó với một yếu tố, bạn cần chọn nó trước.Theo đó, mã đặt giá trị của thuộc tính 8 của biến 6 (đại diện cho nội dung của tiêu đề) cho Hello World !.Lưu ý: Cả hai tính năng bạn đã sử dụng trong bài tập này là các phần của API mô hình đối tượng tài liệu (DOM), có khả năng thao tác các tài liệu. Both of the features you used in this exercise are parts of the Document Object Model (DOM) API, which has the capability to manipulate documents. Khái niệm cơ bản về ngôn ngữĐể cung cấp cho bạn sự hiểu biết tốt hơn về cách thức hoạt động của JavaScript, hãy giải thích một số tính năng cốt lõi của ngôn ngữ. Điều đáng chú ý là các tính năng này là phổ biến cho tất cả các ngôn ngữ lập trình. Nếu bạn làm chủ các nguyên tắc cơ bản này, bạn cũng có một khởi đầu về mã hóa bằng các ngôn ngữ khác! Cảnh báo: Trong bài viết này, hãy thử nhập các dòng mã ví dụ vào bảng điều khiển JavaScript của bạn để xem điều gì sẽ xảy ra. Để biết thêm chi tiết về bảng điều khiển JavaScript, hãy xem Khám phá các công cụ phát triển trình duyệt. In this article, try entering the example code lines into your JavaScript console to see what happens. For more details on JavaScript consoles, see Discover browser developer tools. BiếnBiến là các thùng chứa lưu trữ giá trị. Bạn bắt đầu bằng cách khai báo một biến với từ khóa 9, theo sau là tên bạn đặt cho biến:Một dấu chấm phẩy ở cuối một dòng cho biết nơi một câu lệnh kết thúc. Nó chỉ được yêu cầu khi bạn cần tách các câu lệnh trên một dòng. Tuy nhiên, một số người tin rằng đó là một thực tiễn tốt để có các dấu chấm phẩy vào cuối mỗi tuyên bố. Có những quy tắc khác khi bạn nên và không nên sử dụng dấu chấm phẩy. Để biết thêm chi tiết, hãy xem hướng dẫn của bạn về dấu chấm phẩy trong JavaScript. Bạn có thể đặt tên cho một biến gần như bất cứ điều gì, nhưng có một số hạn chế. (Xem phần này về các quy tắc đặt tên.) Nếu bạn không chắc chắn, bạn có thể kiểm tra tên biến của mình để xem nó có hợp lệ không. JavaScript là trường hợp nhạy cảm. Điều này có nghĩa là 0 không giống như 1. Nếu bạn có vấn đề trong mã của mình, hãy kiểm tra trường hợp!Sau khi khai báo một biến, bạn có thể cho nó một giá trị: Ngoài ra, bạn có thể thực hiện cả hai hoạt động này trên cùng một dòng: Bạn lấy giá trị bằng cách gọi tên biến: Sau khi gán giá trị cho một biến, bạn có thể thay đổi nó sau trong mã:
Lưu ý rằng các biến có thể giữ các giá trị có các loại dữ liệu khác nhau: Vậy tại sao chúng ta cần các biến? Các biến là cần thiết để làm bất cứ điều gì thú vị trong lập trình. Nếu các giá trị không thể thay đổi, thì bạn không thể làm bất cứ điều gì năng động, như cá nhân hóa thông điệp chào hỏi hoặc thay đổi hình ảnh được hiển thị trong thư viện hình ảnh. Nhận xét là những đoạn văn bản có thể được thêm vào cùng với mã. Trình duyệt bỏ qua văn bản được đánh dấu là bình luận. Bạn có thể viết nhận xét trong JavaScript giống như bạn có thể trong CSS:
Nếu bình luận của bạn không có sự phá vỡ dòng, đó là một tùy chọn để đặt nó đằng sau hai dấu gạch chéo như sau: Người vận hành 2 là một biểu tượng toán học tạo ra kết quả dựa trên hai giá trị (hoặc biến). Trong bảng sau, bạn có thể thấy một số toán tử đơn giản nhất, cùng với một số ví dụ để thử trong bảng điều khiển JavaScript.Có rất nhiều nhà khai thác để khám phá, nhưng điều này là đủ cho bây giờ. Xem biểu thức và toán tử để biết danh sách đầy đủ. Lưu ý: Trộn các loại dữ liệu có thể dẫn đến một số kết quả kỳ lạ khi thực hiện tính toán. Hãy cẩn thận rằng bạn đang đề cập đến các biến của bạn một cách chính xác và nhận được kết quả bạn mong đợi. Ví dụ: nhập 3 into your console. Why don't you get the result you expected? Because the quote marks turn the numbers into
strings, so you've ended up concatenating strings rather than adding numbers. If you enter 4 you'll get the total of the two numbers.Điều kiệnCác điều kiện là các cấu trúc mã được sử dụng để kiểm tra xem một biểu thức có trả về đúng hay không. Một hình thức rất phổ biến của các điều kiện là tuyên bố 5. Ví dụ:
Biểu thức bên trong 6 là thử nghiệm. Điều này sử dụng toán tử bình đẳng nghiêm ngặt (như được mô tả ở trên) để so sánh biến 7 với chuỗi 8 để xem liệu hai có bằng không. Nếu so sánh này trả về 9, khối mã đầu tiên chạy. Nếu so sánh là không đúng, khối thứ hai của mã sau khi câu lệnh 0 thay thế.Chức năngCác chức năng là một cách của chức năng đóng gói mà bạn muốn sử dụng lại. Có thể định nghĩa một thân mã là một hàm thực thi khi bạn gọi tên hàm trong mã của bạn. Đây là một sự thay thế tốt để liên tục viết cùng một mã. Bạn đã thấy một số cách sử dụng các chức năng. Ví dụ:
Các chức năng này, 1 và 2, được tích hợp vào trình duyệt.Nếu bạn thấy một cái gì đó trông giống như một tên biến, nhưng nó được theo sau bởi dấu ngoặc đơn, ____ ____43 có thể là một chức năng. Các chức năng thường có đối số: Các bit dữ liệu họ cần để thực hiện công việc của mình. Các đối số đi vào bên trong dấu ngoặc đơn, cách nhau bởi dấu phẩy nếu có nhiều hơn một đối số. Ví dụ: chức năng 4 làm cho một hộp bật lên xuất hiện bên trong cửa sổ trình duyệt, nhưng chúng ta cần cung cấp cho nó một chuỗi như một đối số để cho chức năng biết thông báo nào sẽ hiển thị.Bạn cũng có thể xác định các chức năng của riêng bạn. Trong ví dụ tiếp theo, chúng tôi tạo một hàm đơn giản lấy hai số làm đối số và nhân chúng:
Hãy thử chạy điều này trong bảng điều khiển; Sau đó kiểm tra với một số đối số. Ví dụ:
Lưu ý: Câu lệnh 5 statement tells the browser to return the 6 variable out of the function so it is available to use. This is necessary because variables defined inside functions are only available inside those functions. This is called variable
scoping. (Read more about variable scoping.)Sự kiện
Tương tác thực sự trên một trang web yêu cầu người xử lý sự kiện. Đây là các cấu trúc mã lắng nghe hoạt động trong trình duyệt và chạy mã để đáp ứng. Ví dụ rõ ràng nhất là xử lý sự kiện nhấp chuột, được trình duyệt bắn khi bạn nhấp vào thứ gì đó với chuột. Để chứng minh điều này, hãy nhập phần sau vào bảng điều khiển của bạn, sau đó nhấp vào trang web hiện tại:
Có một số cách để gắn một trình xử lý sự kiện vào một yếu tố. Ở đây chúng tôi chọn phần tử 7. Sau đó, chúng tôi gọi hàm 8 của nó, chuyển tên của sự kiện để nghe ( 9) và một hàm để chạy khi sự kiện xảy ra.Hàm chúng tôi vừa chuyển đến 8 ở đây được gọi là hàm ẩn danh, bởi vì nó không có tên. Có một cách khác để viết các chức năng ẩn danh, mà chúng ta gọi là hàm mũi tên. Hàm mũi tên sử dụng 1 thay vì 2:
Supercharging trang web ví dụ của chúng tôiVới đánh giá về cơ bản của JavaScript đã hoàn thành (ở trên), hãy thêm một số tính năng mới vào trang web ví dụ của chúng tôi. Trước khi đi xa hơn, hãy xóa nội dung hiện tại của tệp 8 của bạn - bit bạn đã thêm trước đó trong "Hello World!" Ví dụ - và lưu tệp trống. Nếu bạn không, mã hiện tại sẽ đụng độ với mã mới mà bạn sắp thêm.Thêm bộ thay đổi hình ảnhTrong phần này, bạn sẽ tìm hiểu cách sử dụng các tính năng của JavaScript và DOM API để thay thế hiển thị một trong hai hình ảnh. Thay đổi này sẽ xảy ra khi người dùng nhấp vào hình ảnh được hiển thị.
Đây là những gì đã xảy ra. Bạn đã lưu trữ một tham chiếu đến phần tử 7 của bạn trong biến 8. Tiếp theo, bạn đã tạo thuộc tính Trình xử lý sự kiện 9 của biến này bằng với một hàm không có tên (hàm "ẩn danh"). Vì vậy, mỗi lần nhấp vào phần tử này:
Thêm một thông điệp chào mừng được cá nhân hóaTiếp theo, hãy thay đổi tiêu đề trang thành tin nhắn chào mừng được cá nhân hóa khi người dùng truy cập trang web lần đầu tiên. Thông điệp chào mừng này sẽ tồn tại. Nếu người dùng rời khỏi trang web và quay lại sau, chúng tôi sẽ lưu thông báo bằng API lưu trữ web. Chúng tôi cũng sẽ bao gồm một tùy chọn để thay đổi người dùng và do đó, thông báo chào mừng.
Tên người dùng của NULL?Khi bạn chạy ví dụ và lấy hộp thoại nhắc bạn nhập tên người dùng, hãy thử nhấn nút Hủy. Bạn nên kết thúc với một tiêu đề đọc Mozilla là tuyệt vời, null. Điều này xảy ra bởi vì khi bạn hủy lời nhắc, giá trị được đặt là 6. Null là một giá trị đặc biệt trong JavaScript đề cập đến việc không có giá trị.Ngoài ra, hãy thử nhấp OK mà không cần nhập tên. Bạn nên kết thúc với một tiêu đề đọc Mozilla là tuyệt vời, vì những lý do khá rõ ràng. Để tránh những vấn đề này, bạn có thể kiểm tra xem người dùng chưa nhập tên trống. Cập nhật chức năng 8 của bạn lên điều này: 6Trong ngôn ngữ của con người, điều này có nghĩa là: Nếu 6 không có giá trị, hãy chạy lại 8 ngay từ đầu. Nếu nó có một giá trị (nếu câu lệnh trên không đúng), thì hãy lưu trữ giá trị trong 3 và đặt nó làm văn bản của tiêu đề.Sự kết luậnNếu bạn đã làm theo tất cả các hướng dẫn trong bài viết này, bạn sẽ kết thúc với một trang trông giống như hình ảnh bên dưới. Bạn cũng có thể xem phiên bản của chúng tôi.
Nếu bạn bị mắc kẹt, bạn có thể so sánh công việc của bạn với mã ví dụ đã hoàn thành của chúng tôi trên GitHub. Chúng tôi vừa mới trầy xước bề mặt của JavaScript. Nếu bạn thích chơi, và muốn đi xa hơn, hãy tận dụng các tài nguyên được liệt kê dưới đây. Xem thêmKịch bản phía máy khách động với JavaScript Đi sâu vào JavaScript chi tiết hơn nhiều. Tìm hiểu JavaScriptĐây là một nguồn tài nguyên tuyệt vời cho các nhà phát triển web đầy tham vọng! Tìm hiểu JavaScript trong một môi trường tương tác, với các bài học ngắn và các bài kiểm tra tương tác, được hướng dẫn bởi một đánh giá tự động. 40 bài học đầu tiên là miễn phí. Khóa học hoàn chỉnh có sẵn cho một khoản thanh toán một lần nhỏ.
Trong mô -đun nàyLàm cách nào để bắt đầu JavaScript trong trình duyệt của mình?Kích hoạt JavaScript trong Google Chrome.. Mở Chrome trên máy tính của bạn .. Nhấp chuột. Cài đặt .. Nhấp vào Bảo mật và Quyền riêng tư .. Nhấp vào Cài đặt trang .. Nhấp vào JavaScript .. Chọn Trang web có thể sử dụng JavaScript .. Làm cách nào để bắt đầu một tập lệnh JavaScript trong HTML?Thêm JavaScript vào tài liệu HTML, bạn có thể thêm mã JavaScript vào tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng bao quanh mã JavaScript.Thẻ có thể được đặt trong phần HTML của bạn hoặc trong phần, tùy thuộc vào thời điểm bạn muốn JavaScript tải.employing the dedicated HTML tag
Bài Viết Liên QuanQuảng CáoCó thể bạn quan tâmToplist được quan tâm#1
Top 4 uống nước chanh sả mật ong có tác dụng gì 20237 tháng trước#2
Top 10 bài tập làm văn số 5 lớp 7 de 4 20237 tháng trước#3
Top 3 vừa chơi đã có tài khoản vương giả chap 1 20237 tháng trước#4
Top 6 anh sẽ on thôi cover phạm nguyên ngọc lyrics 20237 tháng trước#6
Top 7 hãy ra khỏi người đó đi hợp âm 20237 tháng trước#7
Top 6 giáo án thơ về thăm nhà bác 20237 tháng trước#8
Top 8 giáo án ngữ văn 6 cánh diều 20237 tháng trước#9
Top 9 tinh bột tham gia phản ứng nào 20237 tháng trướcQuảng cáoXem NhiềuQuảng cáoChúng tôiTrợ giúpBản quyền © 2021 Hàng Hiệu Inc.
|