Mở đầu Māc tiêu: Học xong ch°¡ng này, ng°ời học có khÁ năng: - Trình bày đ°ợc các khái niám về javascript - Khai báo và sử dụng biến đúng cú pháp - Sử dụng đ°ợc các toán tử trong javascript Nái dung: 1.1 Javascript là gì? Javascript là một ngôn ngữ lÁp trình kịch bÁn dựa vào đái t°ợng phát triển có sẵn hoặc tự định nghĩa. Javascript đ°ợc sử dụng rộng rãi trong các ứng dụng Website. Javascript đ°ợc hỗ trợ h¿u nh° trên tất cÁ các trình duyát nh° Firefox, Chrome,. trên máy tính l¿n đián tho¿i.
Nhiám vụ của Javascript là xử lý những đái t°ợng HTML trên trình duyát. Nó có thể can thiáp với các hành động nh° thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dß dàng. Hay nói cách khác, Javascript là một ngôn ngữ lÁp trình trên trình duyát ở phía client. Tuy nhiên, hián nay với sự xuất hián của NodeJS đã giúp cho Javascript có thể làm viác ở backend 1.2 Javascript Framework là gì? Javascript Framework là một bộ th° vián đ°ợc xây dựng dựa vào ngôn ngữ lÁp trình Javascript.
Mỗi framework th°ờng đ°ợc t¿o ra để phục vụ cho một lĩnh vực nào đó. Ví dụ với Angular và React thì chuyên xử lý frontend, NodeJS thì chuyên xử lý backend, jQuery là một th° vián rất m¿nh khi xử lý DOM HTML và CSS. Sức m¿nh của Javascript là không thể chái cãi, bằng chứng là hián nay có rất nhiều libraries và framework đ°ợc viết bằng Javascript ra đời nh°: - Angular: Một th° vián dùng để xây dựng ứng dụng Single Page. - NodeJS: Một th° vián đ°ợc phát triển phía Server dùng để xây dựng ứng dụng realtime.
- Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile. - ExtJS: Một Framework dùng xây dựng ứng dụng quÁn lý (Web Applications). 8 Tr°ång Cao đÁng Bách khoa Nam Sài Gòn Giáo trình Javascript - jQuery: Một th° vián rất m¿nh về hiểu ứng. - ReactJS: Một th° vián viết ứng dụng mobie.
- Và còn nhiều th° vián khác. ¯u điểm và nh°ÿc điểm cÿa Javascript ¯u điểm: - Javascript giúp thao tác với ng°ời dùng ở phía client và tách biát giữa các client. Ví dụ 2 ng°ời đang truy cÁp vào 2 trình duyát khác nhau thì cÁ hai đều có những phiên xử lý Javascript khác nhau, không Ánh h°ởng l¿n nhau. - Javascript có thể ho¿t động trên nhiều nền tÁng khác nhau, từ Windows, macOS cho đến các há điều hành trên mobile.
- Javascript là một ngôn ngữ dß tiếp cÁn, b¿n sẽ dß dàng học nó mà không c¿n phÁi cài đặt quá nhiều ph¿n mềm. Nh°ợc điểm: Vì là một ngôn ngữ rất dß dàng bị soi code nên dß bị khai thác. Hacker có thể nhÁp một đo¿n code bất kì vào khung console của trình duyát, lúc này trình duyát sẽ hiểu rằng đo¿n code đó là chính tháng, nên hacker có thể gửi nhửng request lên server một cách dß dàng 1. Cách vi¿t ch°¡ng trình javascript đầu tiên Tất cÁ những đo¿n mã Javascript đều phÁi đặt trong cặp thẻ mở <script> và thẻ đóng </script> <script language="javascript"> alert("Hello World!"); </script> Có ba cách đặt th°ờng đ°ợc sử dụng sau đây: Cách 1: Internal - viết trong file html hián t¿i: Thông th°ờng chúng ta sẽ viết những đo¿n mã javascript trên ph¿n head, tuy nhiên đó không phÁi là điều kián bắt buộc, nghĩa là b¿n có thể đặt ở đâu tùy thích mißn là những đo¿n mã đó phÁi đ°ợc bao l¿i bằng thẻ script.
<html> <head> <title></title> <script language="javascript"> alert("Hello World!"); </script> </head> <body> </body> </html> 9 Tr°ång Cao đÁng Bách khoa Nam Sài Gòn Giáo trình Javascript Cách 2: External - viết ra một file js khác rãi import vào: Có thể viết những đo¿n mã javascript ở một file có ph¿n mở rộng là .js, sau đó dùng thẻ script để import vào (giáng CSS) <script language="javascript" src="demo.js"></script> Cách 3: Inline - viết trực tiếp trong thẻ HTML: Inline nghĩa là b¿n sẽ viết những đo¿n mã Javascript trực tiếp trong thẻ HTML luôn. Nh° ví dụ d°ới đây là mình đang viết d¿ng inline vì đo¿n mã alert(1) đ°ợc đặt trong sự kián onclick của thẻ button. <input type="button" onclick="alert(1)" value="Click Me"/> Viết ch°¡ng trình Hello World! B°ớc 1: t¿o file index.html <html> <head> <title></title> </head> <body> <input type="button" value="Click Me"/> </body> </html> B°ớc 2: Viết mã Javascript khi click vào button có id="clickme" thì thông báo lên màn hình <html> <head> <title></title> </head> <body> <input type="button" id="clickme" value="Click Me"/> <script language="javascript"> // Lấy element có id=clickme lưu vào biến button var button = document.getElementById('clickme'); // Khi click vào element chứa trong button thì thực hiện một function, // bên trong function thông báo lên Hello World! button.addEventListener('click', function(){ alert('Hello World!'); }); </script> </body> </html> 1. Alert - confirm và prompt trong JS Hàm alert() trong javascript 10 Tr°ång Cao đÁng Bách khoa Nam Sài Gòn Giáo trình Javascript Hàm alert() có nhiám vụ in một thông báo popup, nó có một tham sá truyền vào và tham sá này chính là nội dung ta muán thông báo với ng°ời dùng.
<html> <head> </head> <body> <input type="button" onclick="alert('Xin chào các bạn')" value="Click Me"/> </body> </html> Hàm confirm() trong javascript: Hàm confirm() cũng sẽ xuất hián một thông báo popup nh°ng nó có thêm hai sự lựa chọn là Yes và No, nếu ng°ời dùng chọn Yes thì nó trÁ về TRUE và ng°ợc l¿i nếu chọn NO thì nó sẽ trÁ về FALSE. Nó cũng có một tham sá truyền vào và tham sá này chính là nội dung thông báo. <html> <body> <h1>The Window Object</h1> <h2>The confirm() Method</h2> <p>Click the button to display a confirm box.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { confirm("Press a button!"); } </script> </body> 11 Tr°ång Cao đÁng Bách khoa Nam Sài Gòn Giáo trình Javascript Hàm prompt() trong javascript: Hàm prompt() dùng để lấy thông tin từ ng°ời dùng, gãm có hai tham sá truyền vào là nội dung thông báo và giá trị ban đ¿u. Nếu ng°ời dùng không nhÁp vào thì giá trị nó sẽ trÁ về là NULL <html> <head> <title></title> <script language="javascript"> var t = prompt("Nhập tên của bạn", ''); alert(t); </script> </head> <body> </body> </html> 1.
Cách dùng Inspect Element Inspect Element là một công cụ rất hữu ích đ°ợc tích hợp trong h¿u hết mọi trình duyát web. Công cụ này cho phép xem xét mọi trang web và truy cÁp mã nguãn của trang web đó. Muán xem cấu trúc trang web: - Click chuột phÁi - Chọn Inspect Các b°ớc sao chép văn bÁn từ một trang web: B°ớc 1: Nhấp chuột phÁi vào bất kỳ đâu trên trang web để mở danh sách thÁ xuáng và chọn tùy chọn cuái cùng, <Kiểm tra=. B°ớc 2: Một thanh bên sẽ bÁt lên ở bên phÁi màn hình của b¿n hoặc trong một sá tr°ờng hợp là ở d°ới cùng.
Sử dụng công cụ chọn ph¿n tử ở góc trên bên trái của trang web. B°ớc 3: Bấm vào văn bÁn b¿n muán sao chép trên trang web. B°ớc 4: Nhấp vào văn bÁn b¿n muán sao chép sẽ h°ớng b¿n tới dòng mã trong cửa sổ kiểm tra ph¿n tử n¡i b¿n có thể dß dàng sao chép nội dung của trang web qua cửa sổ Inspect Element.log trong Javascript 12 Tr°ång Cao đÁng Bách khoa Nam Sài Gòn Giáo trình Javascript Console.log là một hàm của Javascript, đ°ợc sử dụng để debug / kiểm tra / xem giá trị của một biến trong Javascript. Công dụng của console.log là show ra giá trị của một biến, dù biến đó thuộc kiểu dữ lliáu gì đi nữa thì v¿n đ°ợc hiển thị ở ô console trong hộp tho¿i Inspect Element.log() trong javascript: Lánh console.log() có cú pháp là console.log(value), trong đó value là một biến hoặc một giá trị muán in ra.log() một biến bình thường var website = 'Javascript'; console.log(website); Ví dụ 2: console.log(websites); Ví dụ 3: console.log() một giá trị console.log("Xin chào!"); Ví dụ 4: console.log() một object var info = { website : "nsg.net", email : "nsg@gmail.com", address : "HCM city" }; console.
setTimeout và setInterval trong JS Hàm setTimeout() trong Javascript: Hàm setTimeout() dùng để thiết lÁp một khoÁng thời gian nào đó sẽ thực hián một nhiám vụ nào đó và nó chỉ thực hián đúng một l¿n. Cú pháp: setTimeout(function, time) Trong đó: - function: là nội dung c¿n thực hián, đây là một hàm - time: là khoÁng thời gian bao nhiêu (tính bằng mili giây) thì function đó sẽ thực hián Ví dụ: Sau 3 giây thì xuất hián câu chào lên màn hình setTimeout(function(){ alert("Chào mừng bạn đến với freetuts.net"); }, 3000); Hàm clearTimeout() trong Javascript: GiÁ sử b¿n xây dựng chức năng sau 3 giây thì sẽ xuất hián thông báo, tuy nhiên sau 2 giây ch°¡ng trình muán hủy bß thì phÁi làm thế nào? Lúc này b¿n phÁi sử dụng hàm clearTimeout(). 13 Tr°ång Cao đÁng Bách khoa Nam Sài Gòn Giáo trình Javascript Tham sá truyền vào hàm clearTimeout() là đái t°ợng setTimeout() nên lúc này ban phÁi đặt hàm setTimeout() vào một biến cụ thể. // hành động var action = setTimeout(function(){ // something }, 3000); // hủy hành động clearTimeout(action); <script language="javascript"> var do_alert = setTimeout(function(){ alert("Chào mừng bạn đến với freetuts.net"); }, 3000); function clearAlert() { clearTimeout(do_alert); } </script> <input type="button" onclick="clearAlert()" value="Clear" /> Hàm setInterval() trong Javascript: Hàm setInterval() có cú pháp và chức năng giáng nh° hàm setTimeout(), tuy nhiên với hàm setInterval() thì sá l¿n thực hián lã mãi mãi.
Ví dụ: Cứ sau 3 giây thì xuất hián câu chào một l¿n setInterval(function(){ alert("Chào mừng bạn đến với freetuts.net"); }, 3000); Trong ví dụ này cứ sau ba giây thì sẽ xuất hián câu chào và sá l¿n thực hián sẽ là vĩnh vißn, không tin b¿n cứ ch¿y trang web lên và để vÁy. Hàm clearInterval() trong Javascript: T°¡ng tự nh° hàm clearTimeout(), hàm clearInterval() sẽ xóa đi nhiám vụ mà ta đã thiết lÁp trong hàm setInterval(), và ta cũng phÁi đặt setInterval() trong một biến thì mới clear đ°ợc. Ví dụ: Sử dụng hàm setInterval() để xuất câu chào lên màn hình và sá l¿n xuất hián chỉ 1 l¿n duy nhất var interval_obj = setInterval(function(){ alert("Chào mừng bạn đến với freetuts.net"); clearInterval(interval_obj); }, 3000); Trong ví dụ này nội dung thực hián là xuất hián câu chào và ngay lÁp tức xóa nhiám vụ của interval luôn nên nó chỉ thực hián 1 l¿n. Khai báo bi¿n 14 Tr°ång Cao đÁng Bách khoa Nam Sài Gòn Giáo trình Javascript 1.
Các cách khai báo bi¿n trong javascript Cách 1: Khai báo biến trong JS bằng từ khóa var Để khai báo một biến ta sử dụng từ khóa var tenbien. var username; Cách 2: Khai báo biến trong JS bằng từ khóa let Sử dụng từ khóa let tenbien. let username; Biến khai báo bằng từ khoá let chỉ có ph¿m vi trong khái khai báo mà thôi. Vì vÁy nó sẽ tái °u trong tr°ờng hợp b¿n c¿n khai báo một biến chỉ sử dụng t¿m thời trong một ph¿m vi nhất định.
Ví dụ này thì biến domain chỉ có ph¿m vi trong lánh if mà thôi if (true){ let domain = "freetuts.net"; } // Lỗi vì biến domain không tồn tại console.log(domain); Cách 3: Khai báo biến trong JS bằng từ khóa const Sử dụng từ khóa const tenbien.