JavaScript là một ngôn ngữ kịch bản mạng web, đã được sử dụng rộng rãi trong phát triển ứng dụng web, thường được dùng để thêm nhiều tính năng động cho trang web, mang lại trải nghiệm duyệt mượt mà và hấp dẫn hơn cho người dùng. Thông thường, các kịch bản JavaScript được thực thi bằng cách nhúng vào HTML.
1. Cách tồn tại của JavaScript
<!--Cách nhập kịch bản JavaScript bên ngoài-->
<script type="text/javascript" src="script.js"></script><br></br>
<!--Viết trực tiếp JavaScript bên trong HTML-->
<script type="text/javascript">
function hamXinChao() {
alert("Xin chào các bạn")
}<br></br>
2. Vị trí đặt mã JavaScript
Đặt mã JavaScript ở cuối thẻ <body>. Tại sao không đặt ở trên? Tại sao CSS lại có thể đặt ở trên?
Lưu ý: HTML được giải thích từ trên xuống dưới. Nếu CSS được đặt ở dưới, các phần tử HTML ở trên sẽ không áp dụng được kiểu CSS nếu mã CSS chưa được tải.
Các trình duyệt khác nhau xử lý yêu cầu khác nhau: Khi có yêu cầu, trình duyệt sẽ gửi cả JS và CSS. Một cách đơn giản, nếu tệp JS hoặc quá trình xử lý JS mất nhiều thời gian, các mã HTML dưới đó sẽ không thể thực thi được.
3. Khai báo biến và hàm
Biến:
function hamXuLy() {
alert("Xin chào");
var tenBien = 'Bien'; //var tên_biến, biến khai báo với var là biến cục bộ
soTuoi = '25';
//Lưu ý: Không nên sử dụng biến toàn cầu trong hàm, dễ gây xung đột khi làm việc với dự án lớn
}
hamXuLy();
Hàm
// Hàm thông thường
function hamChao() {
alert("Xin chào thế giới")
}
// Hàm có tham số
function hamThamSo(thamSo) {
alert(thamSo)
}
hamThamSo('JavaScript')
// Hàm tự thực thi, tự động chạy khi được định nghĩa
(function hamTuThucThi(thamSo) {alert(thamSo)})("JavaScript tuyệt vời");
// Hàm ẩn danh, ít dùng
var hamAnDan = function() {
alert('Xin chào');
};
hamAnDan();
Cách hiển thị JavaScript:
Hiển thị trên trang web
<script type="text/javascript">
function hienThi() {
alert("Xin chào")
}
hienThi()
</script>
Hiển thị trên console
<script type="text/javascript">
function hienThiConsole() {
console.log("Xin chào thế giới")
}
hienThiConsole()
</script>
Hiển thị kết quả:
Mở Google Chrome, nhấn F12, chọn "Console", làm mới trang!
4. Phương thức và thuộc tính thường dùng của chuỗi
Có thể kiểm tra trên Google Chrome, nhấn F12 và chọn "Console"
obj.trim() Loại bỏ khoảng trắng
var chuoi = " ChuoiKyTu "
undefined
chuoi.trimLeft() #Loại bỏ khoảng trắng bên trái
"ChuoiKyTu "
chuoi.trimRight() #Loại bỏ khoảng trắng bên phải
" ChuoiKyTu"
chuoi.trim() //Loại bỏ khoảng trắng hai bên
"ChuoiKyTu"
chuoi
" ChuoiKyTu " #Sau khi thực hiện các hàm trên, giá trị gốc không thay đổi
chuoiMoi = chuoi.trim()
"ChuoiKyTu" #Có thể gán lại để thay đổi
chuoiMoi
"ChuoiKyTu"
obj.charAt(index) Lấy ký tự theo chỉ mục
chuoiMoi
"ChuoiKyTu"
chuoiMoi.charAt(0)
"C"
chuoiMoi.charAt(1)
"h"
chuoiMoi.charAt(2)
"u"
obj.substring(start,end) Lấy chuỗi con, tương tự như slice
chuoiMoi
"ChuoiKyTu"
chuoiMoi.substring(0,3)
"Chu"
obj.indexOf(char) Tìm chỉ mục của ký tự
chuoiMoi
"ChuoiKyTu"
chuoiMoi.indexOf("i")
3
obj.length Lấy độ dài chuỗi
chuoiMoi
"ChuoiKyTu"
chuoiMoi.length
9
5. Mảng
Khai báo mảng tương tự như danh sách trong Python
mang = [1,2,3,4] #Khai báo mảng
[1, 2, 3, 4]
Chèn
mang = [1,2,3,4] #Khai báo mảng
[1, 2, 3, 4]
mang.push(5) #Thêm phần tử vào cuối
5 #Độ dài mảng
mang
[1, 2, 3, 4, 5]
mang.unshift(0) #Thêm phần tử vào đầu
6 #Độ dài
mang
[0, 1, 2, 3, 4, 5]
mang.splice(3,0,'chen') #Chèn vào vị trí chỉ định (3 là vị trí, 0 là giá trị cố định, nội dung chèn)
[]
mang
[0, 1, 2, "chen", 3, 4, 5]
mang.unshift(100)
8
Xóa
mang
[100, 0, 1, 2, "chen", 3, 4, 5]
mang.pop() #Lấy từ cuối
5
mang.shift() #Lấy từ đầu
100
mang
[0, 1, 2, "chen", 3, 4]
mang.splice(3,1) #Lấy từ vị trí chỉ định (vị trí, số lượng phần tử lấy)
["chen"]
mang
[0, 1, 2, 3, 4]
Cắt
mang
[0, 1, 2, 3, 4]
mang.slice(1,3)
[1, 2]
mang
[0, 1, 2, 3, 4]
Nối
mang1 = [1,2]
[1, 2]
mang2 = [4,5]
[4, 5]
mang1.concat(mang2)
[1, 2, 4, 5]
mang1
[1, 2]
mang2.concat(mang1)
[4, 5, 1, 2]
Đảo ngược
mang1
[1, 2]
mang1.reverse()
[2, 1]
mang1
[2, 1]
Chuỗi hóa
mang1
[2, 1]
mang1.join('_')
"2_1"
mang1
[2, 1]
Độ dài mảng
mang1
[2, 1]
mang1.length
2
6. Đối tượng
Đối tượng là một dạng đặc biệt của mảng
doiTuong = {'k1':123,'k2':234} #Khai báo đối tượng
Object {k1: 123, k2: 234}
doiTuong['k1']
123
7. Vòng lặp
JavaScript có hai loại vòng lặp
#Loại 1
for (var i=0;i<10;i++) {console.log(i)}
#Kết quả xem hình dưới
#Loại 2
for (var item in mang) {console.log(mang[item])}
#Kết quả, xem hình dưới
Hình 2:
8. Xử lý ngoại lệ
Tương tự như Python, mã như sau:
<script type="text/javascript">
try{
bien = khongTonTai
}catch(e) {
console.log(e)
}finally{
console.log("Xử lý hoàn tất;")
}
</script>
Kết quả hiển thị:
Lập trình DOM
Mô hình đối tượng tài liệu (Document Object Model, DOM) là giao diện lập trình tiêu chuẩn được W3C đề xuất để xử lý XML.
Lập trình DOM: Có thể thao tác với tất cả các thẻ HTML, tìm kiếm và sửa đổi. Nó cũng là một phần của JavaScript.
1. Bộ chọn:
document.getElementById('id') Tìm kiếm thẻ có ID chỉ định
<body>
<div id="div_id_1">
Nội dung
</div>
<script type="text/javascript">
var phanTu = document.getElementById('div_id_1'); //Tìm thẻ có ID
phanTu.innerText = 'Nội dung mới'; //Sửa đổi nội dung
</script>
</body>
Kết quả: Khi mở trang, "Nội dung" sẽ được sửa thành "Nội dung mới"
Các phương thức tương tự:
document.getElementsByName('name')
<body>
<div name="ten_thuoc_tinh">
Nội dung
</div>
<script type="text/javascript">
var phanTu = document.getElementsByName('ten_thuoc_tinh'); //Tìm kiếm theo name
for (var item in phanTu) {
phanTu[item].innerText = 'Nội dung mới';
};
</script>
</body>
document.getElementsByTagName('tên_thẻ')
<body>
<div>
Nội dung 1
</div>
<div>
Nội dung 2
</div>
<script type="text/javascript">
var phanTu = document.getElementsByTagName('div'); //Tìm theo loại thẻ
for (var item in phanTu) {
phanTu[item].innerText = 'Nội dung mới';
};
</script>
</body>
Mã trên với jQuery sẽ rất tiện lợi, không cần viết lại
2. Đăng ký sự kiện
Hiểu các khái niệm sau:
Sự kiện: Ví dụ có một "nút", khi nhấp vào sẽ xảy ra điều gì, nhấp đúp sẽ xảy ra điều gì, điều này gọi là sự kiện!
Đăng ký: Nút này, khi nhấp vào sẽ thực hiện hành động, sự kiện trên cần được gắn với một hàm và đăng ký vào thẻ tương ứng.
Sự kiện thường dùng:
- onclick
- onblur
- onfocus
- ..................
Ví dụ:
Viết thẻ input, gắn sự kiện với hàm, khi nhấp nút sẽ tự động thực hiện hàm đã gắn:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ JavaScript</title>
<style>
.do {
background-color: red;
}
</style>
</head>
<body>
<div id="div_id_1">
Nội dung
</div>
<!--Sự kiện onclick gắn với hàm edit, đăng ký vào thẻ input-->
<input type="button" onclick="sua();" value="Sửa" />
<script type="text/javascript">
function sua() {
var i = document.getElementById('div_id_1');
i.className = 'do';
}
</script>
</body>
</html>
Nút khôi phục? Chỉ cần thêm một nút nữa
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ JavaScript</title>
<style>
.do {
background-color: red;
}
</style>
</head>
<body>
<div id="div_id_1">
Nội dung
</div>
<!--Sự kiện onclick gắn với hàm edit, đăng ký vào thẻ input-->
<input type="button" onclick="sua();" value="Sửa" />
<input type="button" onclick="khôiPhuc();" value="Khôi phục"/>
<script type="text/javascript">
function sua() {
var i = document.getElementById('div_id_1');
i.className = 'do';
}
function khôiPhuc() {
var i = document.getElementById('div_id_1');
i.className = ''; //Để trống để loại bỏ lớp
}
</script>
</body>
</html>
Bảng sự kiện:
Bảng sự kiện
Thuộc tính |
Sự kiện xảy ra khi nào |
|---|---|
| onabort | Hình ảnh bị ngừng tải |
| onblur | Phần tử mất focus |
| onchange | Nội dung của phần tử thay đổi |
| onclick | Người dùng nhấp vào đối tượng |
| ondblclick | Người dùng nhấp đúp vào đối tượng |
| onerror | Lỗi khi tải tài liệu hoặc hình ảnh |
| onfocus | Phần tử nhận focus |
| onkeydown | Một phím được nhấn xuống |
| onkeypress | Một phím được nhấn xuống và thả ra |
| onkeyup | Một phím được thả ra |
| onload | Trang hoặc hình ảnh tải xong |
| onmousedown | Chuột được nhấn |
| onmousemove | Chuột di chuyển vào |
| onmouseout | Chuột rời khỏi phần tử |
| onmouseover | Chuột di chuyển vào phần tử |
| onmouseup | Chuột được thả ra |
| onreset | Nút reset được nhấn |
| onresize | Cửa sổ hoặc khung bị thay đổi kích thước |
| onselect | Văn bản được chọn |
| onsubmit | Nút gửi được nhấn |
| onunload | Người dùng rời khỏi trang |
Lưu ý: Một thẻ có thể gắn nhiều sự kiện!!
<input type="button" onmouseover="sua()" onmouseout="khôiPhuc()" value="Sửa & Khôi phục" />
Lưu ý: onload khác các sự kiện khác, nó được viết trong JavaScript
<script type="text/javascript">
// Sự kiện onload thực thi khi toàn bộ trang tải xong, bao gồm tất cả các phần tử
window.onload = function () {
alert("Trang đã tải xong")
};
function sua() {
var i = document.getElementById('div_id_1');
i.className = 'do';
}
function khôiPhuc() {
var i = document.getElementById('div_id_1');
i.className = ''; //Để trống để loại bỏ lớp
}
</script>
3. Hàm thường dùng
Lấy hoặc sửa đổi kiểu, ví dụ đã ở trên
Xem ví dụ dưới đây, khi đã đăng ký vào thẻ, trong hàm i.className = 'do'; là đặt giá trị, nếu không đặt giá trị thì sao?:
function sua() {
var i = document.getElementById('div_id_1');
i.className = 'do';
}
Không đặt giá trị:
function sua() {
var i = document.getElementById('div_id_1');
console.log(i.className);
}
Không đặt giá trị:
function khôiPhuc() {
var i = document.getElementById('div_id_1');
console.log(i.className)
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ JavaScript</title>
<style>
.do {
background-color: red;
}
</style>
</head>
<body>
<div id="div_id_1">
Nội dung
</div>
<!--Sự kiện onclick gắn với hàm edit, đăng ký vào thẻ input-->
<input type="button" onmousemove="sua()" value="Sửa "/>
<input type="button" onclick="khôiPhuc()" value="Khôi phục "/>
<script type="text/javascript">
function sua() {
var i = document.getElementById('div_id_1');
i.className = "do";
}
function khôiPhuc() {
var i = document.getElementById('div_id_1');
console.log(i.className)
}
</script>
</body>
</html>
Mã đầy đủKết quả:
Lấy hoặc đặt thuộc tính
Lấy thuộc tính
<body>
<div name="thuoc_tinh" id="div_id_1">
Nội dung
</div>
<input type="button" value="Thử" onclick="layThuocTinh()" />
<script type="text/javascript">
function layThuocTinh() {
var i = document.getElementById('div_id_1'); //Tìm thẻ có ID
var ketQua = i.getAttribute('name'); //Lấy thuộc tính name
console.log(ketQua); //Hiển thị trên console
}
</script>
</body>
Đặt thuộc tính:
<body>
<div name="thuoc_tinh" id="div_id_1">
Nội dung
</div>
<input type="button" value="Thử" onclick="suaThuocTinh()" />
<script type="text/javascript">
function suaThuocTinh() {
var i = document.getElementById('div_id_1'); //Tìm thẻ có ID
i.setAttribute('name','MoiThuocTinh'); //Sửa thuộc tính
var ketQua = i.getAttribute('name'); //Lấy thuộc tính name
console.log(ketQua); //Hiển thị trên console
}
</script>
</body>
Lấy hoặc sửa đổi thuộc tính kiểu
Sửa đổi thuộc tính kiểu
<body>
<div name="thuoc_tinh" id="div_id_1" style="font-size:8px;background-color:green">
Nội dung
</div>
<input type="button" onclick="suaKieu()" value="Thử" />
<script type="text/javascript">
function suaKieu() {
var i = document.getElementById('div_id_1'); //Tìm thẻ có ID
i.style.backgroundColor = "red"; //Sửa thuộc tính kiểu
}
</script>
</body>
Lấy tương tự, rất đơn giản!
Gửi biểu mẫu, không phải gửi biểu mẫu thông thường!
Xem ví dụ:
<body>
<form id="form_id" action="https://www.google.com/">
<div>
<input type="text" name="tu_khoa"/>
</div>
<!--Nút submit có thể gửi biểu mẫu-->
<input type="submit" value="Gửi">
<!--Nút button có thể gửi không?-->
<input type="button" value="Nút" onclick="guiForm()"/>
</form>
</body>
Câu trả lời là không, vậy làm sao để gửi? Trong JavaScript có thể sửa thuộc tính để hỗ trợ gửi:
document.getElementById('form_id').submit();
<body>
<form id="form_id" action="https://www.google.com/">
<div>
<input type="text" name="tu_khoa"/>
</div>
<!--Nút submit có thể gửi biểu mẫu-->
<input type="submit" value="Gửi">
<!--Nút button có thể gửi không?-->
<input type="button" value="Nút" onclick="guiForm()"/>
</form>
<script type="text/javascript">
function guiForm() {
document.getElementById('form_id').submit();
}
</script>
</body>
Hàm chuyển trang
<body>
<div>
Chuyển trang
</div>
<div>
<!--Mở cùng tab-->
<input type="button" onclick="chuyenDenGoogle()" value="Đến Google" />
<!--Mở tab mới-->
<input type="button" onclick="moTabMoi()" value="Đến Google" />
</div>
<script type="text/javascript">
function chuyenDenGoogle() {
window.location.href = 'https://www.google.com'
}
function moTabMoi() {
window.open('https://www.google.com')
}
</script>
</body>
confirm() , hiển thị hộp thoại xác nhận với "Có" hoặc "Không", trả về true hoặc false
<script type="text/javascript">
var ketQua = confirm('Tiếp tục?');
console.log(ketQua);
</script>
setInterval("alert()",2000); clearInterval(obj) có thể hiểu là bộ đếm thời gian
Mã:
setInterval("alert()",2000); Thiết lập bộ đếm
<body>
<script type="text/javascript">
function hamIn() {
console.log("Thông điệp")
}
setInterval('hamIn()',1000); //Có thể là chuỗi hoặc hàm, tham số sau là mili giây
//Thực thi mỗi 1 giây
</script>
</body>
clearInterval(obj); Tắt bộ đếm
<body>
<script type="text/javascript">
function hamIn() {
console.log("Thông điệp");
clearInterval(obj); //Tắt bộ đếm, cần handle
}
obj = setInterval('hamIn()',1000); //Thực thi mỗi 1 giây
</script>
</body>
setTimeout(); clearTimeout(obj) cũng là bộ đếm, khác với interval là chỉ thực hiện một lần
<body>
<script type="text/javascript">
function hamIn() {
console.log("Thông điệp");
}
obj = setTimeout('hamIn()',1000); //Thực thi sau 1 giây, chỉ một lần
</script>
</body>
Ví dụ JavaScript:
Hiệu ứng chạy chữ
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chạy chữ </title>
<!--Ví dụ chạy chữ-->
<script type="text/javascript">
function chayChu() { //Định nghĩa hàm
var tieuDe = document.title; //Lấy tiêu đề
var kyTuDau = tieuDe.charAt(0); //Lấy ký tự đầu
var chuCon = tieuDe.substring(1,tieuDe.length); //Lấy chuỗi còn lại
document.title = chuCon + kyTuDau; //Nối chuỗi mới
}
setInterval('chayChu()',1000); //Thực hiện mỗi giây
</script>
</head>
<body>
</body>
</html>
Ví dụ ô tìm kiếm, rất hữu ích và được sử dụng rộng rãi!!!
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style>
.xam{
color:gray;
}
.den{
color:black;
}
</style>
</head>
<body>
<!--Thẻ input có hai sự kiện (onfocus/onblur) và đã gắn hàm-->
<input type='text' class='xam' id='timKiem' value='Nhập từ khóa' onfocus='nhapVao();' onblur='raKhoi();'/>
<script type="text/javascript">
function nhapVao(){ //Khi nhận focus, đặt giá trị rỗng và màu đen
var oInput= document.getElementById("timKiem"); //Tìm thẻ và gán
oInput.className = 'den'; //Đổi class
if(oInput.value=='Nhập từ khóa'||oInput.value.trim()==''){
oInput.value = ''
} //Kiểm tra giá trị
}
function raKhoi(){ //Khi mất focus, đặt lại giá trị và màu xám
var oInput= document.getElementById("timKiem"); //Tìm thẻ
var giaTri = oInput.value; //Lấy giá trị
if(giaTri.length==0||oInput.value.trim()==''){
oInput.value = 'Nhập từ khóa';
oInput.className = 'xam';
}else{
oInput.className = 'den';
} //Kiểm tra nếu rỗng thì đặt lại giá trị, đổi màu đen nếu có nội dung
}
</script>
</body>
</html>
Ví dụ ô tìm kiếm, thường dùng!Kết quả:
Khi chưa click (chưa nhận focus)
Khi đã click (nhận focus)
jQuery
jQuery là một thư viện JavaScript tương thích với nhiều trình duyệt, với triết lý "viết ít hơn, làm nhiều hơn" (write less, do more), đóng gói JavaScript để phát triển dễ dàng hơn và có khả năng tương thích tuyệt vời.
Để sử dụng jQuery, cần nhập thư viện:
DOM rất hữu ích để hiểu jQuery
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ jQuery</title>
<style>
.do {
background-color:red; /* Đặt màu đỏ*/
}
</style>
</head>
<body>
<div id="div_id">
Nội dung
</div>
<div class="class_1">1</div>
<div class="class_1">2</div>
<div class="class_1">3</div>
<!--Nhập thư viện jQuery-->
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script>
$(function () {alert('Xin chào jQuery');}); //Tải sau khi trang xong
//Đây là gì? Có thể hiểu là đối tượng tạo bởi jQuery, tương tự đối tượng từ lớp trong Python
$('#div_id').text('Nội dung mới');
//Giải thích: $('#div_id') tìm thẻ có id, đổi nội dung
//Mặc dù không dùng DOM trực tiếp, hiểu DOM rất quan trọng khi học jQuery
$('.class_1').addClass('do');
//Giải thích: $('.class_1') tìm tất cả thẻ có class
</script>
</body>
</html>
Có thể hiểu:$('bộ_chọn').hàm(function () {} )
Xem thêm: https://api.jquery.com/ Có nhiều ví dụ và tài liệu hữu ích!
Xem thêm: https://jquery.com/