JavaScript cho phép bạn tạo các trang web động. Đây là phần cuối cùng của bộ ba phát triển web với HTML và CSS và bạn sử dụng nó để làm cho các trang tĩnh của mình trở nên động.
Bạn có thể sẽ bắt đầu học JavaScript ngay khi bạn nắm được kiến thức cơ bản về HTML và CSS. Sau đó, sau một thời gian, bạn có thể rơi vào một trong các loại sau:
- Bạn đã học tất cả các cú pháp JavaScript ưa thích nhưng bạn không thể hiểu nó.
- Bạn hiểu cú pháp nhưng không thể áp dụng nó vào các dự án cá nhân của mình.
- Bạn muốn nghỉ việc hoặc đang suy nghĩ về việc thay đổi nghề nghiệp.
Chúng ta sẽ áp dụng một cách tiếp cận thực tế để học JavaScript trong bài viết này và những bài tiếp theo. Tôi hứa là tôi sẽ không làm phiền bạn quá nhiều với cú pháp, mà thay vào đó chúng ta sẽ học bằng cách xây dựng các dự án.
Tôi sẽ giả định rằng bạn biết các nguyên tắc cơ bản về HTML và CSS cho bài viết này và bất kỳ điều gì có thể tiếp theo. Nhưng nếu không, bạn có thể tham gia khóa học thân thiện với người mới bắt đầu này để tìm hiểu hoặc trau dồi kiến thức trước khi tiếp tục hướng dẫn này.
JavaScript không yêu cầu thiết lập phức tạp hoặc đắt tiền. Tất cả những gì bạn thực sự cần là một chiếc máy tính có các tính năng sau:
- Trình soạn thảo văn bản (như Visual Studio Code)
- Một trình duyệt web hiện đại (như Chrome, Edge, Firefox, v.v.)
Nếu không có máy tính, bạn vẫn có thể theo dõi bài học bằng cách sử dụng trình chỉnh sửa mã trực tuyến chẳng hạn như codepen.io.
Cách bắt đầu với JavaScript
Như đã lưu ý ở trên, tất cả những gì bạn cần là một trình soạn thảo văn bản và một trình duyệt để bắt đầu. Khởi chạy trình soạn thảo văn bản của bạn—trong trường hợp của tôi là VSCode—trong thư mục mà bạn muốn đặt các tệp mã của mình.
Tạo một tệp mới có tên index.html. Nếu bạn đang sử dụng Mã VS, thiết lập dự án của bạn sẽ giống như thế này:
Cách xem trước mã của bạn trong trình duyệt
Khi bạn đã tạo xong tệp HTML của mình, bạn sẽ muốn xem thành phẩm trong trình duyệt của mình.
Để làm cho quá trình này dễ dàng hơn, chúng ta cần cài đặt tiện ích mở rộng “máy chủ trực tiếp” trên Mã VS. Tiện ích mở rộng này sẽ khiến trang web được làm mới ngay lập tức mỗi khi chúng tôi thực hiện các thay đổi đối với tệp HTML của mình.
Nhấp vào biểu tượng tiện ích mở rộng ở bên phải VSCode.
Tìm kiếm và cài đặt tiện ích mở rộng máy chủ trực tiếp. Quay lại tệp HTML của bạn và chọn “Mở bằng máy chủ trực tiếp” từ trình đơn ngữ cảnh.
Trang web của bạn bây giờ sẽ hiển thị trong trình duyệt của bạn.
Cách nhúng JavaScript vào trang HTML của bạn
Bạn có thể đưa mã JavaScript vào HTML của mình bằng cách đặt trực tiếp mã đó vào thẻ script.
<!DOCTYPE html>
<html lang="en">
<head>
...
<script>
let my_variable = "hello JavaScript";
// any JavaScript can go in here
</script>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Nhưng hãy nhớ rằng phương pháp trên không được khuyến khích. Thay vào đó, bạn nên tạo một tệp JavaScript bên ngoài với .js sự mở rộng.
Tạo một tệp mới có tên script.js trong thư mục dự án của bạn, sau đó liên kết nó với tệp HTML của bạn bằng cách sử dụng URL của mã JavaScript bên ngoài của bạn, như sau:
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="https://www.freecodecamp.org/news/learn-javascript-by-building-a-project/script.js"></script>
<title>Counter</title>
</head>
<body>
...
</body>
</html>
JavaScript sẽ thực thi trước bất kỳ HTML nào. Điều này thường gây ra sự cố vì các thành phần HTML bạn chọn bằng JavaScript sẽ không được xác định vì trình duyệt đọc mã HTML từ trên xuống dưới.
Chúng tôi sẽ sử dụng defer thuộc tính của thành phần tập lệnh để sửa lỗi đó, hướng dẫn trình duyệt tải HTML trước khi chạy mã JavaScript.
<script defer src="https://www.freecodecamp.org/news/learn-javascript-by-building-a-project/script.js"></script>
Bây giờ chúng ta đã sẵn sàng, hãy đi sâu vào một số nguyên tắc cơ bản về JavaScript.
Cách sử dụng biến trong JavaScript
Biến là một trình giữ chỗ cho các giá trị mà bạn có thể cần sử dụng trong tương lai. Với JavaScript, mọi thứ được lưu trữ trong các biến.
Để khai báo một biến, bạn có thể sử dụng let hoặc const từ khóa.
let first_variable
const last_variable`
Bạn sử dụng dấu đẳng thức để gán giá trị cho một biến.
let first_variable = “hello world”Nếu bạn khai báo một biến bằng let, bạn có thể sửa đổi nó. Mặt khác, nếu bạn khai báo các biến với constbạn không thể thay đổi giá trị của chúng – do đó có tên.
Trong JavaScript, bạn có thể lưu trữ nhiều loại dữ liệu trong các biến:
- Chuỗi – Bất kỳ giá trị đơn hoặc kép nào và được đặt trong dấu ngoặc kép đều là một chuỗi.
let my_string = "Hello world" // string
let my_second_string = "24" // string
- Số – Những số này không được đặt trong dấu ngoặc kép.
let my_number = 15 // number
let my_second_number = "15" // string
- Mảng – Mảng là tùy chọn tốt nhất của bạn nếu bạn muốn lưu trữ nhiều giá trị trong một biến duy nhất.
let my_array = [1, "hello", "4", "world"]
- Boolean – Bạn không cần đặt giá trị boolean trong dấu ngoặc kép vì đó là giá trị đúng hoặc sai chứ không phải chuỗi.
let my_boolean = true;
- Đối tượng – Đối tượng cho phép bạn lưu trữ dữ liệu theo cặp khóa-giá trị.
let my_obj = {
name: "John snow",
aim: "Learning JavaScript",
age: 20,
}
Vì JavaScript diễn giải mọi thứ dưới dạng đối tượng, bạn thậm chí có thể lưu các tham chiếu đến các phần tử HTML trong các biến.
let my_button = document.querySelector("#id")
Chúng tôi đang chọn các phần tử trên một trang web dựa trên id của chúng khi chúng tôi sử dụng document.querySelector("#id"). Đừng lo lắng, chúng ta sẽ đi vào chi tiết hơn về điều này sau.
Để sử dụng một biến trong JavaScript, chỉ cần gọi tên biến như sau:
my_button
Để chứng minh cách các biến hoạt động trong JavaScript, hãy xây dựng một ứng dụng bộ đếm cơ bản. Thêm mã sau vào tệp HTML bạn đã tạo trước đó:
...
<body>
<div class="counter_conatiner">
<button id="subtract">-</button><span id="output">0</span
><button id="add">+</button>
</div>
</body>
...
Tạo một style.css tệp và thêm các kiểu sau để mang lại sức sống cho tệp bằng CSS:
*,
*::after,
*::before {
padding: 0px;
margin: 0px;
font-family: inherit;
}
html,
body {
height: 100vh;
}
body {
font-family: sans-serif;
font-size: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aliceblue;
}
.counter_conatiner {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
margin-top: 1rem;
}
span {
font-size: 3rem;
background-color: #00bb00;
padding: 2px 12px;
margin-left: 16px;
margin-right: 16px;
border-radius: 4px;
color: #fff;
}
button {
font-size: 3rem;
cursor: pointer;
background-color: transparent;
border: 0px;
}
Đừng quên liên kết tệp CSS với HTML của bạn như thế này:
<head>
...
<link rel="stylesheet" href="https://www.freecodecamp.org/news/learn-javascript-by-building-a-project/style.css" />
<title>Counter</title>
</head>Và bạn đã có nó – một ứng dụng bộ đếm cơ bản được xây dựng bằng HTML và CSS.
Hãy nhớ rằng các biến có thể chứa các tham chiếu đến các phần tử HTML. Bây giờ hãy lưu các tham chiếu đến các nút của chúng ta trong các biến. Mở tệp script.js mà chúng tôi đã tạo trước đó và thêm đoạn mã sau vào đó:
let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");
console.log(add, subract);
Đợi một chút, các biến rất thú vị, phải không? Mặc dù chúng có thể chứa bất cứ thứ gì, nhưng có một vài hướng dẫn cơ bản mà bạn nên biết trước khi sử dụng các biến:
- Tránh sử dụng dấu gạch dưới ở đầu tên biến, chẳng hạn như
_my_variablevì chúng rất khó hiểu. - JavaScript sẽ không cho phép bạn bắt đầu tên biến bằng số, chẳng hạn như
8_variable. my_variable,MY_VARIABLEvàmy_Variableđều là những thứ hoàn toàn khác nhau trong JavaScript do phân biệt chữ hoa chữ thường.- Và trong mọi trường hợp, bạn không nên sử dụng bất kỳ từ dành riêng nào của JavaScript, bao gồm let, const, true, false, function và bất kỳ từ nào khác.
Này, đừng phá vỡ những nguyên tắc cơ bản này. Vì vậy, hãy chuyển sang một số điều thú vị khác mà chúng ta có thể thực hiện khi sử dụng JavaScript.
Cách sử dụng toán tử trong JavaScript
Không có toán học, thế giới sẽ ra sao? Và JavaScript sẽ ra sao nếu không có phép toán?
Trong JavaScript, chúng tôi có một tập hợp các ký hiệu toán học mà bạn có thể sử dụng để thực hiện các phép toán đơn giản.
Đừng lo lắng, có thể bạn đã quen thuộc với hầu hết chúng:
- Phép cộng – Trong JavaScript, bạn sử dụng dấu cộng (+) để nối (nối) chuỗi hoặc cộng số.
let addition = 1 + 1 // 2
let addition = 1 + "1" // "11"
let addition = "hello" + "world" // "hello world"
- Phép trừ – bạn sử dụng dấu trừ (-) để trừ các số.
let subtraction = 10 - 9 // 1
- Phép nhân – bạn sử dụng dấu hoa thị để nhân trong JavaScript khi nhân các số.
let multiplication = 2 * 2 // 4
- Phép chia – bạn sử dụng dấu phép chia (/) để chia các số.
let division = 4 / 2 // 2
- Bằng nhau – bạn sử dụng dấu bằng kép (==) để kiểm tra xem hai giá trị có bằng nhau trong JavaScript hay không.
let if_true = 2 + 4 == 6 // true
let if_false = 5 + 6 == 10 // false
Có sẵn các toán tử JavaScript khác, nhưng tôi sẽ không đi sâu vào chúng ở đây.
Bây giờ chúng ta đã quen thuộc với các toán tử, hãy quay lại ứng dụng bộ đếm của chúng ta và sửa đổi nó để nó tăng lên bất cứ khi nào chúng ta nhấp vào nút “+” trên trang.
Chúng tôi đã khai báo một số biến và lưu tham chiếu đến các nút HTML dưới dạng giá trị trong phần trước.
let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");
...
Bây giờ, tất cả những gì chúng ta phải làm để sử dụng add biến là để gọi tên của nó.
addNhưng điều này là không đủ. Chúng tôi cần biết liệu nó đã được nhấp hay chưa và JavaScript cung cấp cho chúng tôi những gì chúng tôi gọi là Sự kiện. Chúng tôi sử dụng chúng để lắng nghe các sự kiện xảy ra trên trang web, chẳng hạn như khi người dùng nhấp vào nút hoặc cuộn xuống trang, trong số những thứ khác.
Đây là những gì nó trông giống như:
add.addEventListener("click", function () {
// Every time the add button is pressed, this code will execute.
});Nó không cần thiết cho điều này để có ý nghĩa ngay lập tức. Trong trường hợp này, chúng tôi đã sử dụng addEventListener để thêm một sự kiện bấm vào nút. Chúng tôi sẽ nói riêng về các sự kiện trong phần khác.
Bây giờ, bất kỳ mã nào trong cuộc gọi lại của người nghe đều được gọi khi nhấp vào nút.
Bây giờ chúng ta đã biết điều này, hãy tăng giá trị đầu ra. Để làm điều này, chỉ cần lấy giá trị đầu ra và sau đó tăng giá trị đó lên một bất cứ khi nào nhấn nút. Đây là mã để làm điều đó:
let add = document.querySelector("#add");
add.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = output.innerText + 1;
output.innerText = result;
});Với ngoại lệ của innerTextđược sử dụng trong JavaScript để lấy văn bản từ các phần tử HTML trên trang web và cũng có thể sửa đổi văn bản của phần tử HTML như đã thấy ở trên, phần lớn cú pháp ở trên hiện có thể nhận dạng được.
Trong ví dụ bên dưới, nhấp vào nút thêm (+) để xem số gia của bộ đếm.
Không phải những gì bạn dự đoán, phải không? Vì giá trị của let output = document.querySelector("#output") là một chuỗi và JavaScript không cho phép bạn thêm chuỗi và số, bạn phải chuyển đổi đầu ra thành số trước khi thêm.
let result = Number(output.innerText) + 1;Trong đoạn mã trên, chúng tôi đã thay đổi chuỗi của mình thành một số bằng cách sử dụng Number() phương pháp.
Hãy thử lại ví dụ trước sau khi chúng tôi đã thực hiện các thay đổi.
Nó bây giờ hoạt động đúng như kế hoạch.
Cách sử dụng điều kiện trong JavaScript
Chuyện gì xảy ra nếu…? Điều kiện được sử dụng để giải quyết các câu hỏi như “Điều gì sẽ xảy ra nếu chúng tôi muốn ứng dụng bộ đếm của mình ngừng đếm ở 10?” hoặc “Nếu chúng ta muốn bỏ qua một số thì sao?” Khi bạn phải đối mặt với những câu hỏi điều kiện như thế này, bạn đang cần một câu điều kiện.
Điều kiện duy nhất chúng ta sẽ xem xét hôm nay trong JavaScript là câu lệnh if…else.
if (condition) {
/* code to run if condition is true */
} else {
/* run some other code instead */
}
Điều kiện chỉ cho phép chúng tôi chạy mã khi một điều kiện nhất định được đáp ứng. Ví dụ: nếu bộ đếm của chúng tôi lớn hơn 10, chúng tôi có thể đặt lại về 0 (0).
let add = document.querySelector("#add");
add.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = output.innerText + 1;
if (result > 10) {
result = 0;
}
output.innerText = result;
});
Nếu kết quả lớn hơn 10, câu lệnh if trong mã trước đó sẽ trả về kết quả là 0. Trong ví dụ sau, hãy thử tăng bộ đếm lên một số lớn hơn 10.
Bạn sẽ thấy rằng chúng tôi đã bỏ qua câu lệnh khác. Đó là bởi vì nó là tùy chọn.
Cách sử dụng hàm trong JavaScript
Cuối cùng thì chúng tôi cũng hoàn thành ứng dụng truy cập nhỏ của mình. Hãy cộng khả năng trừ. Tất cả những gì chúng ta phải làm là trừ 1 từ đầu ra.
let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");
add.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = Number(output.innerText) + 1;
if (result > 10) {
result = 0;
}
output.innerText = result;
});
subract.addEventListener("click", function () {
let output = document.querySelector("#output");
let result = Number(output.innerText) - 1;
if (result < 0) {
result = 0;
}
output.innerText = result;
});
Và bạn đã có nó, một ứng dụng truy cập JavaScript cơ bản.
Hãy xem mã hoàn chỉnh từ bút ở trên và mô tả những gì bạn quan sát được.
Chà, tôi nhận thấy rất nhiều mã trùng lặp, điều này không tốt. Bạn nên tránh lặp lại trong mã của mình.
Và vì lý do đó, chúng tôi sử dụng hàm. Chúng ta có thể viết một đoạn mã và sau đó sử dụng nó bao nhiêu lần tùy thích với các hàm.
Bạn có thể sử dụng từ khóa hàm trong JavaScript để tạo một hàm.
function add() {
alert("hello world")
}
Hàm cũng có thể nhận tham số.
function add(number1, number2) {
return number1 + number2
}Các tham số này được sử dụng giống như các biến trong một hàm. Về cơ bản, chúng là các trình giữ chỗ.
Các hàm, giống như các biến, được gọi theo tên của chúng. Sự khác biệt duy nhất là khi gọi một hàm, bạn phải bao gồm dấu ngoặc đơn – ().
add(2,4) // 6Bạn cũng có thể đã thấy các hàm được khai báo theo cách này:
const add = (number1, number2) => number1 + number2;Ở trên là tương đương với chính thức add() chức năng. Chúng được gọi là các hàm mũi tên và đó là cách chúng ta sẽ khai báo các hàm của mình kể từ bây giờ.
Tôi tin rằng đây là đủ thông tin cho phần giới thiệu tại thời điểm này, vì vậy tôi sẽ giao nhiệm vụ này cho bạn.
Thử thách JavaScript hàng tuần
Chúng tôi đã tạo một ứng dụng đếm đơn giản trong bài học này, nhưng nó chứa rất nhiều đoạn mã lặp lại, vì vậy đây là một thử thách dành cho bạn:
- Tạo một chức năng duy nhất gọi là
addAndSubtract()có thể xử lý cả phép cộng và phép trừ mà không phải lặp lại bất kỳ mã nào.
Phần kết luận
Trong bài đăng này, chúng ta đã học cách sử dụng JavaScript, phát triển một ứng dụng bộ đếm nhỏ và tìm hiểu về các biến, điều kiện và hàm.
Vui lòng liên hệ với tôi trên Twitter tại @sprucekhalifa Nếu bạn có câu hỏi nào.
Ngoài ra, mã hóa hạnh phúc!
