JavaScript là một ngôn ngữ lập trình động được sử dụng để phát triển web, trong các ứng dụng web, để phát triển trò chơi, v.v. Nó cho phép bạn triển khai các tính năng động trên các trang web không thể thực hiện được chỉ với HTML và CSS.
Nhiều trình duyệt sử dụng JavaScript làm ngôn ngữ kịch bản để thực hiện các thao tác động trên web. Bất cứ khi nào bạn nhìn thấy menu thả xuống nhấp để hiển thị, nội dung bổ sung được thêm vào trang và màu sắc của các phần tử thay đổi linh hoạt trên trang, để đặt tên cho một vài tính năng, bạn sẽ thấy tác dụng của JavaScript.
Web Sẽ Như Thế Nào Nếu Không Có JavaScript?
Nếu không có JavaScript, tất cả những gì bạn có trên web sẽ là HTML và CSS. Những điều này một mình giới hạn bạn trong một vài triển khai trang web. 90% (nếu không nhiều hơn) các trang web của bạn sẽ ở dạng tĩnh và bạn chỉ có các thay đổi động như hoạt ảnh mà CSS cung cấp.
Cách JavaScript làm cho mọi thứ trở nên năng động
HTML xác định cấu trúc tài liệu web của bạn và nội dung trong đó. CSS khai báo các kiểu khác nhau cho nội dung được cung cấp trên tài liệu web.
HTML và CSS thường được gọi là ngôn ngữ đánh dấu hơn là ngôn ngữ lập trình, bởi vì về cốt lõi, chúng cung cấp các đánh dấu cho các tài liệu với rất ít tính năng động.
Mặt khác, JavaScript là ngôn ngữ lập trình động hỗ trợ tính toán Toán học, cho phép bạn tự động thêm nội dung HTML vào DOM, tạo khai báo kiểu động, tìm nạp nội dung từ một trang web khác, v.v.
Trước khi tìm hiểu cách JavaScript thực hiện tất cả những điều này, hãy xem một ví dụ nhanh.
Kiểm tra codepen này: https://codepen.io/Dillion/full/XWjvdMG
Trong codepen, bạn sẽ thấy rằng khi bạn nhập vào trường nhập liệu, văn bản sẽ hiển thị trên màn hình. Điều đó có thể thực hiện được nhờ JavaScript. Bạn không thể có được điều này với HTML, CSS hoặc cả hai cùng nhau.
JavaScript có thể làm được nhiều hơn những gì tôi có thể trình bày trong bài viết này. Nhưng để giúp bạn bắt đầu với JS, chúng ta sẽ xem xét:
- cách sử dụng JavaScript trong HTML
- Loại dữ liệu
- biến
- bình luận
- chức năng
Cách sử dụng JavaScript trong HTML
Cũng giống như CSS, JavaScript có thể được sử dụng trong HTML theo nhiều cách khác nhau, chẳng hạn như:
1. JavaScript nội tuyến
Tại đây, bạn có mã JavaScript trong thẻ HTML ở một số thuộc tính dựa trên JS đặc biệt.
Ví dụ: các thẻ HTML có các thuộc tính sự kiện cho phép bạn thực thi một số mã nội tuyến khi một sự kiện được kích hoạt. Đây là những gì tôi muốn nói:
<button onclick="alert('You just clicked a button')">Click me!</button>
Đây là một ví dụ về JavaScript nội tuyến. Giá trị của onclick có thể là một phép tính Match nào đó, một bổ sung động cho DOM – bất kỳ mã JavaScript hợp lệ cú pháp nào.
2. JavaScript nội bộ, với script nhãn
giống như style thẻ để khai báo kiểu trong một trang HTML, script thẻ tồn tại cho JavaScript. Đây là cách nó được sử dụng:
<script>
function(){
alert("I am inside a script tag")
}
</script>
3. JavaScript bên ngoài
Bạn có thể muốn có mã JavaScript của mình trong một tệp khác. JavaScript bên ngoài cho phép điều này. Đối với những trường hợp sử dụng như vậy, đây là cách nó được thực hiện:
<!-- index.html -->
<script src="https://www.freecodecamp.org/news/what-is-javascript-definition-of-js/./script.js"></script>
// script.js
alert("I am inside an external file");
Các src thuộc tính của script thẻ cho phép bạn áp dụng nguồn cho mã JavaScript. Tham chiếu đó rất quan trọng vì nó thông báo cho trình duyệt tìm nạp nội dung của script.js.
script.js có thể nằm trong cùng thư mục với index.html, hoặc nó có thể được lấy từ một trang web khác. Đối với trường hợp thứ hai, bạn sẽ cần chuyển toàn bộ URL (https://.../script.js).
chú ý .js sự mở rộng? Đó là phần mở rộng cho các tệp JavaScript, giống như HTML có .html.
Bây giờ chúng ta đã xem xét các cách áp dụng JavaScript vào HTML của mình, hãy xem xét một số tính năng của JavaScript.
Các kiểu dữ liệu trong JavaScript
Trong JavaScript, dữ liệu phải thuộc loại này hay loại khác. JavaScript cần biết điều này để nó biết cách sử dụng nó với dữ liệu khác hoặc cách vận hành trên dữ liệu đó.
Dưới đây là các kiểu dữ liệu cơ bản mà JavaScript hỗ trợ:
- Số (ví dụ:
6,7,8.9): trên đó bạn có thể áp dụng các phép toán số học (như phép cộng) và nhiều phép toán khác - Chuỗi (như
"javascript",'a long sentence',a short paragraph): bất kỳ thứ gì được tìm thấy giữa các dấu nháy đơn ('...'), dấu ngoặc kép ("...") và dấu ngược (...). Không có sự khác biệt giữa dấu ngoặc đơn và dấu ngoặc kép, nhưng backticks có nhiều tính năng hơn, chẳng hạn như:- nội suy các biến trong chuỗi, như vậy:
My name is ${name}.nameđây là một biến, được chèn vào chuỗi. - chuỗi nhiều dòng. Với dấu ngoặc kép thông thường, bạn cần thêm các ký tự thoát như
\nđối với một dòng mới, nhưng backticks cho phép bạn tiếp tục chuỗi của mình trên một dòng khác, như vậy:
- nội suy các biến trong chuỗi, như vậy:
let str = `I am a
multiline string`;
- Boolean (chỉ có thể có hai giá trị:
truehoặcfalse): giống như có hơn (true) hay không (false) - Mảng (ví dụ,
[1, 2, "hello", false]): một nhóm dữ liệu (có thể thuộc bất kỳ loại nào, kể cả mảng) được phân tách bằng dấu phẩy. Lập chỉ mục bắt đầu từ 0. Truy cập nội dung của một nhóm như vậy có thể như sau:array[0]ví dụ này sẽ trả về1vì nó là mục đầu tiên. - Đối tượng (ví dụ
{name: 'javascript', age: 5}): cũng là một nhóm dữ liệu nhưng ở dạng mộtkey:valueđôi. Cáckeyphải là một chuỗi và giá trị có thể là bất kỳ loại nào kể cả đối tượng khác. Truy cập nội dung của nhóm được thực hiện bằng khóa, ví dụobj.agehoặcobj["age"]sẽ trở lại5. - Không xác định (dữ liệu duy nhất mà loại này hỗ trợ là
undefined): Dữ liệu này có thể được gán cho một biến một cách rõ ràng hoặc ngầm định (bằng JavaScript) nếu một biến đã được khai báo nhưng chưa được gán giá trị. Ở phần sau của bài viết này, chúng ta sẽ xem xét khai báo biến và gán giá trị. - Null (dữ liệu duy nhất mà loại này hỗ trợ là
null): Null có nghĩa là không có giá trị. Nó giữ một giá trị, nhưng không phải là một giá trị thực – đúng hơn là null. - chức năng (ví dụ,
function(){ console.log("function") }): Hàm là một kiểu dữ liệu gọi một khối mã khi được gọi. Thông tin thêm về các chức năng sau trong bài viết này.
Các kiểu dữ liệu JavaScript có thể hơi phức tạp để hiểu. Bạn có thể đã nghe nói rằng mảng và hàm cũng là đối tượng, và điều đó đúng.
Hiểu điều này liên quan đến việc hiểu bản chất của các nguyên mẫu JavaScript. Tuy nhiên, ở cấp độ cơ bản, đây là những kiểu dữ liệu bạn cần biết đầu tiên trong JavaScript.
Các biến trong JavaScript
Biến là nơi chứa các giá trị của bất kỳ kiểu dữ liệu nào. Chúng giữ các giá trị sao cho khi các biến được sử dụng, JavaScript sẽ sử dụng giá trị mà chúng đại diện cho thao tác đó.
Các biến có thể được khai báo và có thể được gán một giá trị. Khi bạn khai báo một biến, bạn đang làm điều này:
let name;
Đối với những điều trên, name đã được khai báo, nhưng nó chưa có giá trị.
Như bạn mong đợi từ phần kiểu dữ liệu, JavaScript sẽ tự động gán giá trị là undefined đến name. Vì vậy, nếu bạn cố gắng sử dụng name bất cứ nơi nào, undefined sẽ được sử dụng cho hoạt động đó.
Đây là ý nghĩa của việc gán một giá trị cho một biến:
let name;
name = "JavaScript";
Bây giờ nếu bạn sử dụng namenó sẽ đại diện JavaScript.
Khai báo và gán có thể được thực hiện trên một dòng như sau:
let name = "JavaScript";
Tại sao let? bạn có thể đã tự hỏi mình và đây là lý do tại sao: JavaScript hỗ trợ ba phương pháp khai báo biến, đó là:
- các
varnhà điều hành: điều này đã có với JavaScript kể từ khi thành lập. Bạn có thể khai báo các biến và gán giá trị cho chúng, những giá trị này có thể được thay đổi sau này trong mã. Đây là những gì tôi muốn nói:
var name = "JavaScript";
name = "Language";
- các
lettoán tử: điều này cũng rất giống vớivar– nó khai báo và gán giá trị cho các biến có thể thay đổi sau này trong mã. Sự khác biệt chính giữa các toán tử này làvarnâng các biến như vậy, trong khiletkhông cẩu. Khái niệm cẩu có thể được giải thích ngắn gọn bằng đoạn mã sau:
function print() {
console.log(name);
console.log(age);
var name = "JavaScript";
let age = 5;
}
print();
Khi gọi print chức năng (print()), cái đầu tiên console.log bản in undefined trong khi thứ hai console.log đưa ra một lỗi rằng nó “Không thể truy cập age trước khi khởi tạo”.
Điều này là do name khai báo của biến được nâng (nâng) lên đầu hàm và phép gán cho biến vẫn ở cùng một dòng trong khi age khai báo và gán ở cùng một dòng.
Đây là cách đoạn mã trên được biên dịch:
function print() {
var name;
console.log(name);
console.log(age);
name = "JavaScript";
let age = 5;
}
print();
Sự cố Palăng có thể xảy ra bất ngờ và đó là lý do tại sao bạn nên sử dụng let thay vì var.
- các
consttoán tử: điều này cũng không kéo các biến, nhưng nó thực hiện một điều nữa: nó đảm bảo rằng một biến không thể được gán một giá trị khác với giá trị mà nó đã được gán trong quá trình khởi tạo.
Ví dụ:
let name = "JavaScript"
name = "Language" // no errors
const age = 5
age = 6 // error, cannot reassign variable
Cũng giống như HTML, đôi khi chúng ta có thể muốn ghi chú bên cạnh mã của mình mà không cần phải thực thi.
Chúng ta có thể làm điều này trong JavaScript theo hai cách:
- với các bình luận một dòng, như thế này:
// a single line comment - hoặc với các bình luận nhiều dòng, như thế này:
/*
a multi
line comment
*/
Hàm trong JavaScript
Với các chức năng, bạn có thể lưu trữ một khối mã có thể được sử dụng ở những nơi khác trong mã của mình. Giả sử bạn muốn in “JavaScript” và “Ngôn ngữ” ở các vị trí khác nhau trong mã của mình. Thay vì làm điều này:
console.log("JavaScript")
console.log("Language")
// some things here
console.log("JavaScript")
console.log("Language")
// more things here
console.log("JavaScript")
console.log("Language")
Bạn có thể làm được việc này:
function print() {
console.log("JavaScript")
console.log("Language")
}
print()
// some things here
print()
// more things here
print()
Bằng cách này, chúng tôi đã lưu trữ khối mã lặp lại trong một chức năng có thể được sử dụng ở bất cứ đâu chúng tôi muốn. Nhưng đó không phải là tất cả. Giả sử chúng ta muốn tìm trung bình cộng của ba số. Mã cho điều này sẽ là:
let num1 = 5
let num2 = 6
let num3 = 8
let average = (num1 + num2 + num3) / 3
Làm điều này bên ngoài chức năng có thể không hại gì, nhưng nếu chúng ta phải làm điều đó ở nhiều nơi? Sau đó, chúng tôi sẽ có một chức năng như vậy:
function findAverage(n1, n2, n3) {
let aver = (n1 + n2 + n3) / 3
return aver
}
let num1 = 5
let num2 = 6
let num3 = 8
let average = findAverage(num1, num2, num3)
// later on, somewhere else
let average2 = findAverage(...)
// later on, somewhere else
let average3 = findAverage(...)
Như bạn sẽ nhận thấy trong findAveragetuyên bố của chúng tôi, chúng tôi có n1, n2, n3 trong ngoặc đơn. Đây là các thông số, đóng vai trò như giữ chỗ cho các giá trị sẽ được cung cấp khi hàm được gọi.
Khối mã sử dụng các trình giữ chỗ đó để tìm mức trung bình và return từ khóa trả về giá trị trung bình từ hàm.
Trình giữ chỗ giúp các hàm của bạn có thể tái sử dụng sao cho các giá trị khác nhau tại các thời điểm khác nhau có thể được chuyển đến các hàm để sử dụng cùng một logic.
Phần kết luận
JavaScript còn nhiều tính năng khác mà chúng ta có thể thảo luận, nhưng tôi hy vọng bài viết này đã cung cấp cho bạn một điểm khởi đầu rõ ràng để tiến xa hơn. Bây giờ bạn nên biết ngôn ngữ đó là gì và bạn có thể sử dụng ngôn ngữ đó như thế nào trên web.
Trong bài viết này, chúng ta đã xem xét cách thêm mã JavaScript vào tệp HTML của mình, các loại dữ liệu khác nhau mà JavaScript hỗ trợ, các biến đóng vai trò là bộ chứa giá trị, cách viết nhận xét trong JavaScript và một chút về cách khai báo và sử dụng hàm.
Có rất nhiều nơi để đi từ đây, nhưng tôi khuyên bạn nên tìm hiểu về The DOM và cách JavaScript tương tác với nó ở phần tiếp theo.
