Hướng dẫn what is javascript simple explanation? - giải thích đơn giản javascript là gì?

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.

Web sẽ trông như thế nào nếu không có 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.

Cách JavaScript làm cho mọi thứ năng động

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:

• 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

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ư:

1. JavaScript nội tuyến

Ở đâ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:

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"]
	}

2. JavaScript nội bộ, với thẻ

	function[]{
	    alert["I am inside a script tag"]
	}

8

Giống như thẻ

	function[]{
	    alert["I am inside a script tag"]
	}

	function[]{
	    alert["I am inside a script tag"]
	}

	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

	function[]{
	    alert["I am inside a script tag"]
	}

Lưu ý tiện ích mở rộng

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,

  // script.js
  alert["I am inside an external file"];
  

  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
• Chuỗi [như

  // script.js
  alert["I am inside an external file"];
  

  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ư:
  • Nội suy các biến trong chuỗi, như vậy:

    // script.js
    alert["I am inside an external file"];
    

    8.

    // script.js
    alert["I am inside an external file"];
    

    9 Đây là một biến, được tiêm vào chuỗi.
  • 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ư

    let str = `I am a
        multiline string`;
    

    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`;

• Boolean [chỉ có thể là hai giá trị:

  let str = `I am a
      multiline string`;
  

  1 hoặc

  let 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]
• Mảng [ví dụ:

  let str = `I am a
      multiline string`;
  

  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.
• Đối tượng [ví dụ

  let str = `I am a
      multiline string`;
  

  8]: cũng là một nhóm dữ liệu nhưng dưới dạng cặp

  let str = `I am a
      multiline string`;
  

  9.

  let name;
  

  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ặc

  let name;
  

  2 sẽ trả về

  let name;
  

  3
• Không xác định [dữ liệu duy nhất Loại này hỗ trợ là

  let name;
  

  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ị.
• NULL [dữ liệu duy nhất loại này hỗ trợ là

  let name;
  

  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.
• Hàm [ví dụ:

  let name;
  

  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.

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"];

Như bạn mong đợi từ phần Kiểu dữ liệu, JavaScript tự động gán giá trị

let name;

// script.js
alert["I am inside an external file"];

// script.js
alert["I am inside an external file"];

let name;

Đâ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"];

let name;
name = "JavaScript";

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";

• Nhà điều hành

  let name;
  name = "JavaScript";
  

  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:

var name = "JavaScript";
name = "Language";

• Toán tử

  let name;
  name = "JavaScript";
  

  4: Điều này cũng rất giống với

  let 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 khi

  let 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:

function print[] {
	console.log[name];
	console.log[age];
	var name = "JavaScript";
	let age = 5;
}

print[];

Khi gọi hàm

let name = "JavaScript";

let name = "JavaScript";

let name = "JavaScript";

let name;

let name = "JavaScript";

let name = "JavaScript";

Điều này là do tuyên bố của biến

// script.js
alert["I am inside an external file"];

let name = "JavaScript";

Đây là cách biên soạn mã trên:

	function[]{
	    alert["I am inside a script tag"]
	}

Cá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";

let name;
name = "JavaScript";

• Toán tử

  var name = "JavaScript";
  name = "Language";
  

  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.

Ví dụ:

	function[]{
	    alert["I am inside a script tag"]
	}

Cũ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:

  var name = "JavaScript";
  name = "Language";
  

  1
• 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"]
	}

Chứ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"]
	}

Bạn có thể làm được việc này:

	function[]{
	    alert["I am inside a script tag"]
	}

Bằ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"]
	}

Là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"]
	}

Như bạn sẽ nhận thấy trong tuyên bố của ____ 82, chúng tôi có

var name = "JavaScript";
name = "Language";

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";

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.