<img style="width: 100%;" src="https://tek4.vn/public_files/6c0e2815-945c-4ea9-885b-4b476559df01" alt="client-script-javascript" />
Ng&agrave;y nay, ch&uacute;ng ta c&oacute; thể dễ d&agrave;ng bắt gặp JavaScript ở khắp mọi nơi. Từ hơn 90% trang web tr&ecirc;n Internet cho đến mảng ph&aacute;t triển ứng dụng tr&ecirc;n thiết bị di động v&agrave; thậm ch&iacute; l&agrave; cả ứng dụng của tr&iacute; tuệ nh&acirc;n tạo cũng đều chạy bằng ng&ocirc;n ngữ JavaScript.
Nick Morgan đ&atilde; phải thốt l&ecirc;n rằng: "JavaScript giống như một con dao sắc b&eacute;n được bọc trong lớp da. Con dao n&agrave;y c&oacute; thể cắt mọi thứ, giống như bạn c&oacute; thể l&agrave;m được mọi thứ. Bạn c&oacute; thể giết một con gấu, bắt một con c&aacute;. Từ miếng gỗ th&ocirc; sơ, bạn c&oacute; thể tạo h&igrave;nh th&agrave;nh một ch&uacute; ngựa con, hay thậm ch&iacute; l&agrave; một c&acirc;y tăm".
Về cơ bản, Javascript được coi l&agrave; xương sống của qu&aacute; tr&igrave;nh ph&aacute;t triển website. Nếu như tr&ecirc;n thế giới xuất hiện hơn 1.8 tỷ website th&igrave; đ&atilde; c&oacute; đến 95% trong số đ&oacute; sử dụng JavaScript. D&ugrave; c&oacute; l&agrave; c&ocirc;ng ty khởi nghiệp nhỏ, hay l&agrave; trang web, ứng dụng của cả một c&ocirc;ng ty c&ocirc;ng nghệ lớn, th&igrave; cũng đều đ&ograve;i hỏi kiến ​​thức vững về ng&ocirc;n ngữ lập tr&igrave;nh n&agrave;y.
Để trở th&agrave;nh một lập tr&igrave;nh vi&ecirc;n JS hoặc website chuy&ecirc;n nghiệp, th&igrave; ngo&agrave;i khả năng viết m&atilde; bằng JavaScript đơn thuần, bạn cần phải c&oacute; một bộ &oacute;c tư duy, c&aacute;c kỹ năng cần thiết , v&agrave; quan trọng hơn cả l&agrave; kiến thức tốt về những kh&aacute;i niệm trong Javascript.
Dưới đ&acirc;y, Tek4vn gợi &yacute; cho bạn một số kh&aacute;i niệm Javascript cần phải biết nếu muốn trở th&agrave;nh một lập tr&igrave;nh vi&ecirc;n website th&agrave;nh c&ocirc;ng:
<h2 style="text-align: justify;">1. Duyệt qua DOM</h2>
JavaScript thực sự l&agrave; một vũ kh&iacute; mạnh để ph&aacute;t triển trang web, nhưng n&oacute; vẫn sẽ trở n&ecirc;n v&ocirc; hiệu nếu như lập tr&igrave;nh vi&ecirc;n kh&ocirc;ng biết c&aacute;ch duyệt qua DOM, đặc biệt đối với một lập tr&igrave;nh vi&ecirc;n website JS th&agrave;nh thạo.
DOM -&nbsp; giao diện lập tr&igrave;nh cho c&aacute;c t&agrave;i liệu HTML v&agrave; XML - l&agrave; một API cho ph&eacute;p lập tr&igrave;nh vi&ecirc;n d&ugrave;ng JS để thay đổi trong HTML. Đ&acirc;y ch&iacute;nh l&agrave; ch&igrave;a kh&oacute;a để tạo trang web động cũng như li&ecirc;n kết HTML v&agrave; JavaScript tại giao diện người d&ugrave;ng.
Về cơ bản, DOM c&oacute; cấu tr&uacute;c dạng c&acirc;y v&agrave; c&aacute;c phần tử trong DOM được xếp theo hệ thống ph&acirc;n cấp nhằm sắp xếp c&aacute;c phần tử HTML, t&igrave;m ra c&aacute;c kiểu quy tắc CSS cũng như quy tắc n&agrave;o &aacute;p dụng cho th&agrave;nh phần n&agrave;o.
Chỉ cần với JavaScript l&agrave; bạn c&oacute; thể n&acirc;ng cấp trải nghiệm bằng c&aacute;ch tự động thay đổi trang theo y&ecirc;u cầu thiết bị người d&ugrave;ng. Nh&igrave;n chung, c&aacute;ch duyệt qua DOM l&agrave; 1 kỹ năng cần thiết trong qu&aacute; tr&igrave;nh ph&aacute;t triển website.
<h2 style="text-align: justify;">2. Scope (Phạm vi truy cập)</h2>
Scope (Phạm vi truy cập) l&agrave; một chức năng trong JavaScript v&agrave; về cơ bản n&oacute; được gọi l&agrave; ngữ cảnh hiện tại của đoạn code c&oacute; thể x&aacute;c định khả năng hiển thị v&agrave; khả năng truy cập của biến.
Phạm vi truy cập l&agrave; một kh&aacute;i niệm quan trọng trong JavaScript v&igrave; n&oacute; x&aacute;c định tuổi thọ, khả năng truy cập v&agrave; khả năng hiển thị của c&aacute;c biến, h&agrave;m v&agrave; đối tượng trong to&agrave;n bộ m&atilde; code. Th&ocirc;ng qua những hạn chế nhất định, n&oacute; l&agrave;m bảo mật c&aacute;c đoạn code.
Trong ng&ocirc;n ngữ JavaScript, c&oacute; 2 loại phạm vi truy cập:
<ul style="text-align: justify;">
<li>Phạm vi to&agrave;n cục: To&agrave;n cục l&agrave; c&aacute;c biến khai b&aacute;o ngo&agrave;i h&agrave;m, truy cập v&agrave; sửa đổi được từ bất kỳ h&agrave;m n&agrave;o.</li>
<li>Phạm vi cục bộ: Cục bộ l&agrave; c&aacute;c biến được khai b&aacute;o v&agrave; chỉ sử dụng được b&ecirc;n trong h&agrave;m.</li>
</ul>
V&iacute; dụ:
<pre class="language-java"><code>// program showing local scope of a variable
let x= "GoodMorning";

function greetings() {
 let y= "People"
 console.log(x + y);
}

greetings();
console.log(x + y); // error</code></pre>
Output:
<pre class="language-java"><code>GoodMorningPeople
Uncaught ReferenceError: y is not defined</code></pre>
Ở v&iacute; dụ tr&ecirc;n, biến x l&agrave; biến to&agrave;n cục v&agrave; biến y l&agrave; biến cục bộ, chỉ truy cập được tại h&agrave;m greetings. Một khi truy cập biến y ở ngo&agrave;i h&agrave;m n&agrave;y, sẽ xảy ra lỗi.
<h2 style="text-align: justify;">3. Closures</h2>
Trong JavaScript, closure l&agrave; một trong những kh&aacute;i niệm quan trọng v&agrave; được thảo luận rộng r&atilde;i.
Closure l&agrave; một h&agrave;m c&oacute; quyền truy cập đến c&aacute;c biến từ phạm vi của h&agrave;m kh&aacute;c bằng c&aacute;ch tạo một h&agrave;m b&ecirc;n trong h&agrave;m đ&oacute;. Như đ&atilde; được định nghĩa tại MDN &ldquo;Closures l&agrave; c&aacute;c h&agrave;m tham chiếu đến c&aacute;c biến tự do đi k&egrave;m với c&aacute;i m&ocirc;i trường m&agrave; n&oacute; tham chiếu đến&rdquo;.
Trong JavaScript, mỗi lần h&agrave;m được tạo ra th&igrave; closures cũng được tạo ra.
Hầu hết c&aacute;c nh&agrave; ph&aacute;t triển JavaScript sử dụng closure một c&aacute;ch cố t&igrave;nh hoặc v&ocirc; t&igrave;nh - nhưng nh&igrave;n chung nếu biết c&aacute;ch sử dụng closure th&igrave; sẽ gi&uacute;p kiểm so&aacute;t m&atilde; code tốt hơn.
V&iacute; dụ:&nbsp;
<pre class="language-java"><code>function Spellname(name) {
var greet = "Hi, " + name + "!";
var sName = function() {
var welc = greet + " Good Morning!";
console.log(greet);
};
return sName;
}
var Myname = SpellName("Nishi");
Myname(); // Hi, Nishi. Good Morning!</code></pre>
Trong v&iacute; dụ tr&ecirc;n, h&agrave;m sName () l&agrave; closure; n&oacute; c&oacute; phạm vi cục bộ ri&ecirc;ng (với biến welc) v&agrave; cũng c&oacute; quyền truy cập v&agrave;o phạm vi của h&agrave;m b&ecirc;n ngo&agrave;i. Sau khi thực thi Spellname (), phạm vi sẽ kh&ocirc;ng bị ph&aacute; hủy v&agrave; h&agrave;m sName () vẫn c&oacute; quyền truy cập v&agrave;o.
<h2>4. Gi&aacute; trị v&agrave; chỉ định biến tham chiếu</h2>
Để viết JavaScript m&agrave; kh&ocirc;ng c&oacute; lỗi, bạn cần phải hiểu Javascript g&aacute;n gi&aacute; trị cho biến như thế n&agrave;o v&igrave; đ&acirc;y vốn l&agrave; nguồn gốc của v&ocirc; số lỗi tr&ecirc;n trang web ng&agrave;y nay. Một c&aacute;i nh&igrave;n đơn giản về bộ nhớ m&aacute;y t&iacute;nh sẽ gi&uacute;p ch&uacute;ng ta hiểu được ch&iacute;nh x&aacute;c điều g&igrave; đang xảy ra.
JavaScript lu&ocirc;n g&aacute;n c&aacute;c biến theo gi&aacute; trị. Gi&aacute; trị thực được g&aacute;n khi gi&aacute; trị chỉ định l&agrave; một trong năm kiểu dữ liệu nguy&ecirc;n thủy của JavaScript, bao gồm: Boolean, null, undefined, String v&agrave; Number.
Tuy nhi&ecirc;n, tham chiếu đến đối tượng trong bộ nhớ được g&aacute;n khi gi&aacute; trị chỉ định l&agrave; một trong ba kiểu dữ liệu được truyền qua tham chiếu, bao gồm Array, Function v&agrave; Object.
<h2>5. Immediately Invoked Function Expression (IIFE)</h2>
IIFE l&agrave; l&agrave; một trong những mẫu thiết kế phổ biến nhất trong JavaScript. N&oacute; khởi tạo một h&agrave;m v&agrave; thực thi h&agrave;m ngay lập tức.
IIFE rất hữu &iacute;ch v&igrave; n&oacute; giống như một c&aacute;i hộp đ&oacute;ng g&oacute;i dữ liệu, thực thi m&atilde; tức thời, b&ecirc;n ngo&agrave;i kh&ocirc;ng thể truy xuất hay thay đổi được biến b&ecirc;n trong. Nhờ đ&oacute;, n&oacute; kh&ocirc;ng g&acirc;y x&aacute;o trộn cho đối tượng to&agrave;n cục.
Nếu ch&uacute;ng ta c&oacute; một số m&atilde; khởi tạo m&agrave; kh&ocirc;ng cần sử dụng lại, th&igrave; ch&uacute;ng ta c&oacute; thể sử dụng mẫu IIFE.
V&iacute; dụ:
<pre class="language-java"><code>(function () {
 // some initiation code
 let num1;
 let num2;
})();

// num1 and num2 will be discarded after the function is executed.</code></pre>
<h2>6. Hoisting</h2>
Hoisting l&agrave; một h&agrave;nh vi trong JavaScript cho ph&eacute;p sử dụng biến hoặc h&agrave;m trước khi khai b&aacute;o.
Về cơ bản, điều n&agrave;y c&oacute; nghĩa l&agrave; bất kể h&agrave;m v&agrave; biến được khai b&aacute;o ở đ&acirc;u, ch&uacute;ng đều được chuyển l&ecirc;n đầu phạm vi của ch&uacute;ng, bất kể l&agrave; to&agrave;n cục hay cục bộ.
V&iacute; dụ 1: Gọi h&agrave;m sau khi khai b&aacute;o
<pre class="language-java"><code>function dog(sound){
 console.log(sound);
}
dog('bark');</code></pre>
V&iacute; dụ 2: Gọi h&agrave;m trước khi khai b&aacute;o (với hoisting)
<pre class="language-java"><code>dog('bark');
function dog(sound){
 console.log(sound);
}</code></pre>
Cả hai v&iacute; dụ tr&ecirc;n đều đưa ra c&ugrave;ng c&ugrave;ng kết quả park tại bảng điều khiển cho d&ugrave; bạn gọi h&agrave;m trước hay sau khai b&aacute;o. Điều n&agrave;y được gọi l&agrave; hoisting trong JavaScript.

Admin

6 khái niệm trong JavaScript mà bất cứ lập trình viên nào cũng cần phải biết

Cùng tác giả

Admin

Có liên quan