JavaScript là một ngôn ngữ lập trình giúp thêm tính tương tác vào trang web của bạn. Điều này xảy ra trong các trò chơi, trong cách hoạt động của phản hồi khi nhấn nút hoặc nhập dữ liệu trên biểu mẫu; với kiểu dá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à làm sâu thêm hiểu biết về những gì có thể thực hiện.
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 là linh hoạt và dễ sử dụng cho người mới học. Với nhiều kinh nghiệm hơn, bạn sẽ có thể tạo ra các trò chơi, đồ họa 2D và 3D động, ứng dụng cơ sở dữ liệu toàn diện và nhiều hơn nữa!
JavaScript chính nó tương đối nhỏ gọn nhưng rất linh hoạt. Các nhà phát triển đã viết nhiều công cụ trên nền tảng ngôn ngữ JavaScript cốt lõi, mở khóa một lượng chức năng lớn với sự cố gắng tối thiểu. Các công cụ này bao gồm:
- Browser Application Programming Interfaces (APIs) được tích hợp vào trình duyệt web, cung cấp chức năng như tạo động HTML và thiết lập kiểu CSS; thu thập và xử lý luồng video từ webcam của người dùng hoặc tạo đồ họa 3D và mẫu âm thanh.
- Các APIs bên thứ ba cho phép nhà phát triển tích hợp chức năng từ các nhà cung cấp nội dung khác vào trang web, chẳng hạn như Disqus hoặc Facebook.
- Các framework và thư viện bên thứ ba mà bạn có thể áp dụng vào HTML để tăng tốc quá trình xây dựng trang web và ứng dụng.
Việc trình bày chi tiết về sự khác biệt giữa ngôn ngữ JavaScript cốt lõi và các công cụ được liệt kê ở trên không nằm trong phạm vi của bài viết này – đây chỉ là một sự giới thiệu nhẹ nhàng về JavaScript. Bạn có thể tìm hiểu thêm trong khu vực học 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 cơ hội để thử nghiệm một số tính năng API của trình duyệt. Chúc bạn vui vẻ!
Một ví dụ “Hello world!”
JavaScript là một trong những công nghệ web hiện đại phổ biến nhất! Kỹ năng JavaScript của bạn càng phát triển, trang web của bạn sẽ có sức mạnh và sáng tạo hơn.
Tuy nhiên, việc làm quen với JavaScript khó hơn so với HTML và CSS. Bạn có thể bắt đầu từ những thứ nhỏ và tiến dần. Để bắt đầu, hãy xem xét cách thêm JavaScript vào trang của bạn để tạo một ví dụ “Hello world!” (Hello world! 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 phần còn lại của khóa học của chúng tôi, hãy tải mã ví dụ này và sử dụng nó như một điểm khởi đầu.
scripts. Trong thư mục scripts, tạo một tệp văn bản mới có tên main.js và lưu nó lại.index.html của bạn, nhập mã này trên một dòng mới, ngay trước thẻ đóng </body>: <script src="scripts/main.js"></script> <link> cho CSS. Nó áp dụng JavaScript vào trang, vì vậy nó có thể có tác động đến HTML (cùng với CSS và bất kỳ thứ gì khác trên trang).main.js: const myHeading = document.querySelector("h1"); myHeading.textContent = "Hello world!"; index.html trong trình duyệt của bạn. Bạn nên thấy một cái gì đó như sau:
Lưu ý: Lý do các hướng dẫn (ở trên) đặt phần tử <script> gần cuối tệp HTML là vì trình duyệt đọc mã theo thứ tự xuất hiện trong tệp.
Văn bản tiêu đề đã thay đổi thành Hello world! bằng JavaScript. Bạn đã làm điều này bằng cách sử dụng một hàm được gọi là querySelector() để lấy một tham chiếu đến tiêu đề của bạn, sau đó lưu nó trong một biến được gọi là myHeading. Điều này tương tự như những gì chúng ta đã làm với các bộ chọn CSS. Khi bạn muốn thực hiện một hành động đối với một phần tử, bạn cần chọn nó trước.
Sau đó, mã đã đặt giá trị của thuộc tính textContent của biến myHeading (đại diện cho nội dung của tiêu đề) thành Hello world!.
Lưu ý: Cả hai tính năng bạn đã sử dụng trong bài tập này đều là các phần của DOM (Document Object Model) API, có khả năng thao tác với tài liệu.
Để hiểu rõ hơn về cách JavaScript hoạt động, hãy giải thích một số tính năng cốt lõi của ngôn ngữ này. Đáng lưu ý là những tính năng này phổ biến trong tất cả các ngôn ngữ lập trình. Nếu bạn nắm vững những kiến thức cơ bản này, bạn đã có lợi thế khi lập trình bằng 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ì 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.
Biến là các đối tượng chứa giá trị. Bạn bắt đầu bằng cách khai báo một biến với từ khóa let, theo sau là tên bạn đặt cho biến đó:
Dấu chấm phẩy ở cuối một dòng chỉ ra nơi kết thúc một câu lệnh. Nó chỉ cần thiết khi bạn cần phân tách các câu lệnh trên một dòng duy nhất. Tuy nhiên, một số người tin rằng việc có dấu chấm phẩy ở cuối mỗi câu lệnh là một thói quen tốt. Có các quy tắc khác để quyết định khi nào 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 sử dụng dấu chấm phẩy trong JavaScript.
JavaScript phân biệt chữ hoa và chữ thường. Điều này có nghĩa là myVariable không giống với myvariable. Nếu bạn gặp vấn đề trong mã của bạn, hãy kiểm tra chính tả!
Sau khi khai báo một biến, bạn có thể gán giá trị cho nó:
Ngoài ra, bạn cũng có thể thực hiện cả hai hoạt động này trên cùng một dòng:
Bạn có thể 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 biến có thể chứa các giá trị có kiểu dữ liệu khác nhau:
Vì sao chúng ta cần biến? Biến là cần thiết để thực hiện bất kỳ điều gì thú vị trong lập trình. Nếu giá trị không thể thay đổi, bạn sẽ không thể thực hiện bất kỳ điều gì động, chẳng hạn như cá nhân hóa tin nhắn chào mừng hoặc thay đổi hình ảnh hiển thị trong một bộ sưu tập hình ảnh.
Bình luận là đ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 bình luận trong JavaScript giống như viết trong CSS:
Nếu bình luận của bạn không chứa các dòng mới, bạn có thể đặt nó sau hai dấu gạch chéo như sau:
Toán tử là một ký hiệu toán học tạo ra một 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ó nhiều toán tử khác để khám phá, nhưng đây là đủ cho lúc này. Xem Expressions and operators để biết danh sách đầy đủ.
Lưu ý: Kết hợp các kiểu dữ liệu có thể dẫn đến một số kết quả lạ khi thực hiện các phép tính. Hãy cẩn thận khi bạn tham chiếu đến các biến của mình đúng cách và nhận kết quả bạn mong đợi. Ví dụ, nhập ’35’ + ’25’ vào bảng điều khiển của bạn. Tại sao bạn không nhận được kết quả bạn mong đợi? Bởi vì dấu ngoặc kép biến các số thành chuỗi, vì vậy bạn đã nối chuỗi thay vì cộng các số. Nếu bạn nhập 35 + 25, bạn sẽ nhận được tổng của hai số.
Câu điều kiện là cấu trúc mã được sử dụng để kiểm tra xem một biểu thức trả về true hay không. Một dạng rất phổ biến của câu điều kiện là câu lệnh if…else. Ví dụ:
Biểu thức bên trong if () là điều kiện kiểm tra. Điều này sử dụng toán tử bằng nhau chặt (như đã mô tả ở trên) để so sánh biến iceCream với chuỗi chocolate để xem hai giá trị này có bằng nhau hay không. Nếu sự so sánh này trả về true, khối mã đầu tiên sẽ chạy. Nếu so sánh không đúng, khối mã thứ hai – sau lệnh else – sẽ chạy thay vào đó.
Hàm là một cách đóng gói chức năng bạn muốn sử dụng lại. Có thể xác định một đoạ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 cách tốt để không phải viết lại mã giống nhau nhiều lần. Bạn đã thấy một số ví dụ về việc sử dụng hàm. Ví dụ:
Các hàm này, document.querySelector và alert, được tích hợp sẵn trong trình duyệt.
Nếu bạn nhìn thấy một cái gì đó giống như tên biến, nhưng sau đó là dấu ngoặc đơn – () – thì có thể đó là một hàm. Hàm thường nhận các đối số: các mảnh dữ liệu mà chúng cần để thực hiện công việc của mình. Các đối số được đặt trong ngoặc đơn, được phân tách bằng dấu phẩy nếu có nhiều hơn một đối số.
Ví dụ, hàm alert() tạo ra một hộp pop-up xuất hiện trong cửa sổ trình duyệt, nhưng chúng ta cần cung cấp một chuỗi như một đối số để cho hàm biết thông báo hiển thị là gì.
Bạn cũng có thể xác định các hàm của riêng mình. Trong ví dụ tiếp theo, chúng tôi tạo một hàm đơn giản nhận hai số làm đối số và nhân chúng:
Hãy chạy điều này trong bảng điều khiển; sau đó thử nghiệm với một số đối số. Ví dụ:
Tương tác thực tế trên một trang web yêu cầu các trình xử lý sự kiện. Đây là cấu trúc mã lắng nghe hoạt động trong trình duyệt và chạy mã phản hồi. Ví dụ rõ nhất là xử lý sự kiện nhấp chuột, được kích hoạt bởi trình duyệt khi bạn nhấp chuột vào một thứ gì đó bằng chuột. Để minh họa điều này, nhập vào bảng điều khiển của bạn, sau đó nhấp chuột vào trang web hiện tại:
Có nhiều cách để gắn một trình xử lý sự kiện cho một phần tử. Ở đây, chúng tôi chọn phần tử <html>. Sau đó, chúng tôi gọi hàm addEventListener() của nó, truyền vào tên sự kiện để lắng nghe (‘click’) và một hàm để chạy khi sự kiện xảy ra.
Hàm chúng tôi vừa gửi vào addEventListener() ở đây được gọi là một hàm ẩn danh, vì nó không có tên. Có một cách viết khác của hàm ẩn danh, chúng tôi gọi là hàm mũi tên. Một hàm mũi tên sử dụng () => thay vì function ():
Sau khi hoàn thành việc xem xét về cơ bản của JavaScript (ở trên), hãy thêm một số tính năng mới vào trang ví dụ của chúng ta.
Trước khi đi xa hơn, hãy xóa nội dung hiện tại của tệp main.js của bạn – phần bạn đã thêm trước đó trong ví dụ “Hello world!” – và lưu tệp trống. Nếu không, mã hiện có sẽ xung đột với mã mới bạn sắp thêm vào.
Trong phần này, bạn sẽ tìm hiểu cách sử dụng JavaScript và các tính năng API DOM để thay đổi hiển thị của một trong hai hình ảnh. Thay đổi này sẽ xảy ra khi người dùng nhấp chuột vào hình ảnh hiển thị.
images của bạn.main.js của bạn. const myImage = document.querySelector("img"); myImage.onclick = () => { const mySrc = myImage.getAttribute("src"); if (mySrc === "images/firefox-icon.png") { myImage.setAttribute("src", "images/firefox2.png"); } else { myImage.setAttribute("src", "images/firefox-icon.png"); } }; index.html trong trình duyệt. Bây giờ khi bạn nhấp chuột vào hình ảnh, nó sẽ thay đổi thành hình ảnh khác.Đây là những gì đã xảy ra. Bạn đã lưu một tham chiếu đến phần tử <img> trong myImage. Tiếp theo, bạn đã thiết lập thuộc tính trình xử lý sự kiện onclick của nó bằng một hàm không có tên (một hàm “ẩn danh”). Vì vậy, mỗi khi phần tử này được nhấp chuột:
src của hình ảnh.src có bằng đường dẫn của hình ảnh gốc không:
- Nếu có, mã sẽ thay đổi giá trị
srcthành đường dẫn của hình ảnh thứ hai, buộc hình ảnh khác được tải vào trong phần tử<img>.
src sẽ chuyển lại thành đường dẫn hình ảnh ban đầu, trạng thái ban đầu.Tiếp theo, hãy thay đổi tiêu đề trang thành một thông báo chào mừng cá nhân khi người dùng truy cập trang lần đầu. Thông báo chào mừng này sẽ tồn tại. Nếu người dùng rời khỏi trang và trở lại sau đó, chúng ta sẽ lưu thông báo bằng cách sử dụng API Lưu trữ Web. Chúng ta 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.
index.html, thêm dòng sau ngay trước phần tử <script>: <button>Change user</button> main.js, đặt mã sau ở cuối tệp, chính xác như nó được viết. Điều này lấy các tham chiếu đến nút mới và tiêu đề, lưu mỗi cái trong biến: let myButton = document.querySelector("button"); let myHeading = document.querySelector("h1"); function setUserName() { const myName = prompt("Please enter your name."); localStorage.setItem("name", myName); myHeading.textContent = `Mozilla is cool, ${myName}`; } Chức năng setUserName() chứa một hàm prompt(), hiển thị một hộp thoại, tương tự như alert(). Hàm prompt() này làm nhiều hơn alert(), yêu cầu người dùng nhập dữ liệu và lưu nó trong một biến sau khi người dùng nhấp OK. Trong trường hợp này, chúng tôi yêu cầu người dùng nhập tên. Tiếp theo, mã gọi một API là localStorage, cho phép chúng ta lưu trữ dữ liệu trong trình duyệt và lấy nó sau này. Chúng tôi sử dụng hàm setItem() của localStorage để tạo và lưu một mục dữ liệu có tên 'name', đặt giá trị của nó thành biến myName chứa nhập của người dùng cho tên. Cuối cùng, chúng tôi đặt textContent của tiêu đề thành một chuỗi, cộng với tên mới được lưu của người dùng.if (!localStorage.getItem("name")) { setUserName(); } else { const storedName = localStorage.getItem("name"); myHeading.textContent = `Mozilla is cool, ${storedName}`; } Dòng đầu tiên của khối này sử dụng toán tử phủ định (không hợp lý NOT, được biểu thị bằng !) để kiểm tra xem dữ liệu name có tồn tại hay không. Nếu không, chạy chức năng setUserName() để tạo nó. Nếu nó tồn tại (nghĩa là người dùng đặt tên người dùng trong lần truy cập trước), chúng ta lấy tên đã lưu bằng cách sử dụng getItem() và đặt textContent của tiêu đề thành một chuỗi, cộng với tên người dùng, như chúng ta đã làm trong setUserName().onclick (dưới đây) trên nút. Khi nhấp chuột, setUserName() chạy. Điều này cho phép người dùng nhập tên khác bằng cách nhấp nút. myButton.onclick = () => { setUserName(); }; Khi bạn chạy ví dụ và nhận hộp thoại yêu cầu bạn nhập tên người dùng, hãy thử nhấp vào nút Hủy. Bạn sẽ nhận được một tiêu đề đọc là Mozilla is cool, null. Điều này xảy ra vì khi bạn hủy bỏ hộp thoại, giá trị được đặt là null. Null là một giá trị đặc biệt trong JavaScript đề cập đến sự vắng mặt của một giá trị.
Hãy thử nhấp OK mà không nhập tên. Bạn sẽ nhận được một tiêu đề đọc là Mozilla is cool, với 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 đã nhập một tên trống hay chưa. Cập nhật chức năng setUserName() của bạn như sau:
Nói bằng ngôn ngữ con người, điều này có nghĩa: Nếu myName không có giá trị, hãy chạy lại từ đầu chức năng setUserName(). Nếu nó có giá trị (nghĩa là câu lệnh trên không đúng), sau đó lưu giá trị đó trong localStorage và đặt nó làm văn bản của tiêu đề.
Nếu bạn đã tuân thủ tất cả các hướng dẫn trong bài viết này, bạn sẽ có một trang có giao diện tương tự như hình ảnh dưới đây. Bạn cũng có thể xem phiên bản của chúng tôi.
Nếu bạn gặp vấn đề, bạn có thể so sánh công việc của mình với mã ví dụ đã hoàn thành của chúng tôi trên GitHub.
Chúng tôi chỉ mới khám phá 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 JavaScript chi tiết hơn.
Đâ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! Học 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 bài đánh giá tự động. 40 bài học đầu tiên miễn phí. Khóa học đầy đủ có sẵn với một khoản thanh toán nhỏ một lần.
Tìm hiểu thêm về chúng tôi tại: TRANHUNG Digital
Nguồn tham khảo: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
