JavaScript là 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à nhiều hơn nữa. 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 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 những việc năng động trên web. Bất cứ khi nào bạn thấy menu thả xuống nhấp chuột, thêm nội dung được thêm vào một trang và thay đổi động màu phần tử trên một trang, để đặt tên cho một vài tính năng, bạn đang thấy các hiệu ứng của JavaScript. Nếu không có JavaScript, tất cả những gì bạn sẽ 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ẽ là tĩnh và bạn chỉ có những thay đổi động như hình ảnh động mà CSS cung cấp. HTML xác định cấu trúc của tài liệu web của bạn và nội dung trong đó. CSS tuyên bố các kiểu khác nhau cho các 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 chứ không phải là ngôn ngữ lập trình, bởi vì chúng, cốt lõi của chúng, cung cấp các đánh dấu cho các tài liệu có rất ít sự năng động. JavaScript, mặt khác, là một ngôn ngữ lập trình động hỗ trợ các 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 ra các khai báo kiểu động, lấy nội dung từ một trang web khác và nhiều hơn nữa. Trước khi chúng ta đi vào cách JavaScript thực hiện tất cả những điều này, chúng ta hãy xem xét một ví dụ nhanh chóng. Kiểm tra Codepen này: //codepen.io/dillion/full/xwjvdmg Trong CodePen, bạn sẽ thấy rằng khi bạn nhập trường đầu vào, văn bản hiển thị trên màn hình. Điều đó được thực hiện bởi JavaScript. Bạn không thể có được điều này với HTML, CSS, cũng như cả hai cùng nhau. JavaScript có thể làm nhiều hơn những gì tôi có thể đề cập trong bài viết này. Nhưng để giúp bạn bắt đầu với JS, chúng tôi sẽ xem xét: Giống như với CSS, JavaScript có thể được sử dụng trong HTML theo nhiều cách khác nhau, chẳng hạn như: Ở đây, bạn có mã JavaScript trong các thẻ HTML trong 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:Web sẽ trông như thế nào nếu không có JavaScript?
Cách JavaScript làm cho mọi thứ năng động
Cách sử dụng JavaScript trong HTML
1. JavaScript nội tuyến
Click me!
Đây là một ví dụ về JavaScript nội tuyến. Giá trị của
function[]{
alert["I am inside a script tag"]
}
7 có thể là một số tính toán khớp, một bổ sung động cho DOM-bất kỳ mã JavaScript nào.2. JavaScript nội bộ, với thẻ
function[]{
alert["I am inside a script tag"]
}
8
function[]{
alert["I am inside a script tag"]
}
Giống như thẻ
function[]{
alert["I am inside a script tag"]
}
9 cho các khai báo kiểu trong trang HTML, thẻ
function[]{
alert["I am inside a script tag"]
}
8 tồn tại cho JavaScript. Đây là cách nó được sử dụng:
function[]{
alert["I am inside a script tag"]
}
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 các trường hợp sử dụng như vậy, đây là cách thực hiện:
// script.js
alert["I am inside an external file"];
Thuộc tính
1 của thẻ
function[]{
alert["I am inside a script tag"]
}
8 cho phép bạn áp dụng nguồn cho mã JavaScript. Tài liệu tham khảo đó rất quan trọng vì nó thông báo cho trình duyệt cũng tìm nạp nội dung của
3.
3 có thể nằm trong cùng một thư mục với
5 hoặc nó có thể được nhận từ một trang web khác. Đối với cái sau, bạn sẽ cần vượt qua URL đầy đủ [
6].Lưu ý tiện ích mở rộng
7? Đó là phần mở rộng cho các tệp JavaScript, giống như HTML có
8.Bây giờ chúng tôi đã xem xét các cách để áp dụng JavaScript vào HTML của chúng tôi, hãy xem xét một số tính năng của JavaScript.
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 loại dữ liệu cơ bản mà JavaScript hỗ trợ:
- Số [ví dụ:
9,
0,// script.js alert["I am inside an external file"];
1]: trên đó bạn có thể áp dụng các hoạt động số học [như bổ sung] và nhiều hơn nữa// script.js alert["I am inside an external file"];
- Chuỗi [như
2,// script.js alert["I am inside an external file"];
3,// script.js alert["I am inside an external file"];
4]: Bất cứ điều gì được tìm thấy giữa các trích dẫn đơn [// script.js alert["I am inside an external file"];
5], trích dẫn kép [// script.js alert["I am inside an external file"];
6] và backticks [// script.js alert["I am inside an external file"];
7]. Không có sự khác biệt giữa trích dẫn đơn và đôi, nhưng Backticks có nhiều tính năng hơn, chẳng hạn như:// script.js alert["I am inside an external file"];
- Nội suy các biến trong chuỗi, như vậy:
8.// script.js alert["I am inside an external file"];
9 Đây là một biến, được tiêm vào chuỗi.// script.js alert["I am inside an external file"];
- chuỗi đa dòng. Với các trích dẫn thông thường, bạn cần thêm các ký tự thoát như
0 cho 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:let str = `I am a multiline string`;
- Nội suy các biến trong chuỗi, như vậy:
let str = `I am a
multiline string`;
- Boolean [chỉ có thể là hai giá trị:
1 hoặclet str = `I am a multiline string`;
2]: giống như có [let str = `I am a multiline string`;
1] hoặc không [let str = `I am a multiline string`;
2]let str = `I am a multiline string`;
- Mảng [ví dụ:
5]: Một nhóm dữ liệu [có thể thuộc bất kỳ loại nào, bao gồm cả mảng] được phân tách bằng dấu phẩy. Việc 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ư vậy:let str = `I am a multiline string`;
6, trong ví dụ này sẽ trả vềlet str = `I am a multiline string`;
7, vì đây là mục đầu tiên.let str = `I am a multiline string`;
- Đối tượng [ví dụ
8]: cũng là một nhóm dữ liệu nhưng dưới dạng cặplet str = `I am a multiline string`;
9.let str = `I am a multiline string`;
0 phải là một chuỗi và giá trị có thể là bất kỳ loại nào bao gồm cả đối tượng khác. Truy cập nội dung của nhóm được thực hiện với khóa, ví dụlet name;
1 hoặclet name;
2 sẽ trả vềlet name;
3let name;
- Không xác định [dữ liệu duy nhất Loại này hỗ trợ là
4]: 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 [bởi JavaScript] nếu một biến đã được khai báo nhưng không được gán giá trị. Sau đó trong bài viết này, chúng tôi sẽ xem xét khai báo biến và gán giá trị.let name;
- NULL [dữ liệu duy nhất loại này hỗ trợ là
5]: 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 - thay vào đó, null.let name;
- Hàm [ví dụ:
6]: Hàm là loại dữ liệu gọi một khối mã khi được gọi. Thêm về các chức năng sau này trong bài viết này.let name;
Các loại dữ liệu JavaScript có thể hơi phức tạp để hiểu. Bạn có thể đã nghe nói rằng các mảng và chức năng cũng là đối tượng, và đó là sự thật.
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. Nhưng, ở cấp độ cơ bản, đây là những loại dữ liệu bạn cần biết trước trong JavaScript.
Các biến trong JavaScript
Các biến là các thùng chứa cho các giá trị của bất kỳ loại dữ liệu. Chúng giữ các giá trị sao cho khi các biến được sử dụng, JavaScript sử dụng giá trị mà chúng thể hiệ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,
// script.js
alert["I am inside an external file"];
9 đã đượ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 tự động gán giá trị
let name;
4 cho // script.js
alert["I am inside an external file"];
9. Vì vậy, nếu bạn cố gắng sử dụng // script.js
alert["I am inside an external file"];
9 ở bất cứ đâu, let name;
4 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
// script.js
alert["I am inside an external file"];
9, nó sẽ đại diện cho let name;
name = "JavaScript";
3.Khai báo và bài tập có thể được thực hiện trên một dòng như vậy:
let name = "JavaScript";
Tại sao
let name;
name = "JavaScript";
4? Bạn có thể đã tự hỏi mình, và đây là lý do tại sao: JavaScript hỗ trợ ba phương thức khai báo biến, đó là:- Nhà điều hành
5: Đ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 các giá trị cho chúng có thể được thay đổi sau trong mã. Đây là những gì tôi muốn nói:let name; name = "JavaScript";
var name = "JavaScript";
name = "Language";
- Toán tử
4: Điều này cũng rất giống vớilet name; name = "JavaScript";
5 - nó tuyên bố và gán các giá trị cho các biến có thể được thay đổi sau trong mã. Sự khác biệt chính giữa các toán tử này làlet name; name = "JavaScript";
5 Tow các biến như vậy, trong khilet name; name = "JavaScript";
4 không nâng. Khái niệm nâng cao có thể được giải thích ngắn gọn với mã sau:let name; name = "JavaScript";
function print[] {
console.log[name];
console.log[age];
var name = "JavaScript";
let age = 5;
}
print[];
Khi gọi hàm
let name = "JavaScript";
0 [let name = "JavaScript";
1], let name = "JavaScript";
2 đầu tiên in let name;
4 trong khi let name = "JavaScript";
2 thứ hai đưa ra lỗi mà nó "không thể truy cập let name = "JavaScript";
5 trước khi khởi tạo".Điều này là do tuyên bố của biến
// script.js
alert["I am inside an external file"];
9 được nâng [nâng] lên đầu hàm và gán cho biến ở cùng một dòng trong khi tuyên bố và gán let name = "JavaScript";
5 ở cùng một dòng.Đây là cách biên soạn mã trên:
function[]{
alert["I am inside a script tag"]
}
0Các vấn đề về vận tốc có thể xảy ra bất ngờ, và đó là lý do tại sao bạn nên sử dụng
let name;
name = "JavaScript";
4 thay vì let name;
name = "JavaScript";
5.- Toán tử
0: Điều này cũng không nâng các biến, nhưng nó làm thêm nữa: nó đảm bảo rằng một biến không thể được gán một giá trị khác ngoài những gì nó được chỉ định trong quá trình khởi tạo.var name = "JavaScript"; name = "Language";
Ví dụ:
function[]{
alert["I am inside a script tag"]
}
1Cũng giống như HTML, đôi khi chúng tôi có thể muốn đặt một ghi chú bên cạnh mã của chúng tôi không cần phải được 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:
1var name = "JavaScript"; name = "Language";
- hoặc với các nhận xét đa dòng, như thế này:
function[]{
alert["I am inside a script tag"]
}
2Chức năng 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 bạn. Giả sử bạn muốn in "JavaScript" và "ngôn ngữ" ở những nơi khác nhau trong mã của bạn. Thay vì làm điều này:
function[]{
alert["I am inside a script tag"]
}
3Bạn có thể làm được việc này:
function[]{
alert["I am inside a script tag"]
}
4Bằng cách này, chúng tôi đã lưu trữ khối mã lặp lại trong một hàm có thể được sử dụng bất cứ nơi nào chúng tôi muốn. Nhưng đó không phải là tất cả. Giả sử chúng tôi muốn tìm trung bình của ba số. Mã cho việc này sẽ là:
function[]{
alert["I am inside a script tag"]
}
5Làm điều này bên ngoài một chức năng có thể không bị tổn thương, 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[]{
alert["I am inside a script tag"]
}
6Như bạn sẽ nhận thấy trong tuyên bố của ____ 82, chúng tôi có
var name = "JavaScript";
name = "Language";
3 trong ngoặc đơn. Đây là các tham số, đóng vai trò là người giữ chỗ cho các giá trị sẽ được cung cấp khi hàm được gọi.placeholders for values that would be provided when the function is to be called.Khối mã sử dụng những người giữ chỗ đó để tìm mức trung bình và từ khóa
var name = "JavaScript";
name = "Language";
4 trả về trung bình từ hàm.Nuôi dưỡng làm cho các chức năng của bạn có thể tái sử dụng sao cho các giá trị khác nhau vào các thời điểm khác nhau có thể được chuyển đến các chức năng để sử dụng cùng một logic.
Sự kết luận
JavaScript có nhiều tính năng khác mà chúng tôi có thể thảo luận, nhưng tôi hy vọng bài viết này đã cho bạn một điểm khởi đầu rõ ràng để đi xa hơn. Bây giờ bạn nên biết ngôn ngữ là gì và làm thế nào bạn có thể sử dụng nó trên web.
Trong bài viết này, chúng tôi đã xem xét cách thêm mã JavaScript vào các tệp HTML của chúng tôi, các loại dữ liệu khác nhau mà JavaScript hỗ trợ, các biến đóng vai trò là container cho các giá trị, cách viết nhận xét trong JavaScript và một chút về cách Tuyên bố và sử dụng các chức năng.
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ề DOM và cách JavaScript tương tác với nó tiếp theo.
Học mã miễn phí. Chương trình giảng dạy 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