By GokiSoft.com|
21:16 25/02/2021|
Học JS
[Share Code] Tìm hiểu về Object & Array & Function trong Javascript
#vidu.html
<!DOCTYPE html>
<html>
<head>
<title>Object & Array & Function in Javascript</title>
<meta charset="utf-8">
</head>
<body>
<h1>Welcome to learn Object & Array & Function</h1>
<script type="text/javascript">
//Quan ly thong tin cua sinh vien: name, gender, address, email
//C -> structure
//JS thi quan ly nhu the nao???
//Dinh nghia cu the 1 object ngay
//Vidu:
// name: TRAN VAN A
// gender: Nam
// address: Nam Dinh
// email: tranvana@gmail.com
var std = {
'name': 'TRAN VAN A',
'gender': 'NAM',
'address': 'Nam Dinh',
'email': 'tranvana@gmail.com'
}
console.log(std)
// Truy cap toi tung thuoc tinh cua object => std nhu the nao?
console.log(std.name)
console.log(std.gender)
// Thay doi dc gia tri cua tung thuoc tinh cua doi tuong std
std.address = 'Ha Noi'
console.log(std)
// JS co 1 cach mo rong nhu sau
console.log(std.birthday) // => undefined
std.birthday = '10-02-1999' //prototype
console.log(std)
// Array trong JS
// Phan 1: Khai bao 1 mang rong
var a1 = []
var a2 = Array()
// Phan 2: Khai bao 1 mang da co 1 vai gia tri
var a3 = [1, 5, 3]
var a4 = Array(1, 'Sinh Vien', '5654', 89)
console.log(a4)
// Them 1 phan tu vao trong mang bang cach nao
a1.push(5)
a1.push(15)
a1.push(50)
console.log(a1)
// Xoa 1 phan tu ra khoi mang
// a1 -> gom cac phan tu: 5, 15, 50 (length: 3, index: 0 -> 2)
// Xoa phan tu index = 1 (xoa phan tu 15 di) => Xu ly nhu the nao
a1.splice(1, 2) // 1: vi tri index bat dau xoa, 2 -> so phan tu xoa di.
console.log(a1)
// a3 => gom cac phan tu 1, 5, 3 => Chen them so 50 vao vi tri index = 1 thi lam the nao (1, 50, 5, 3)
a3.splice(1, 0, 50)
console.log(a3)
// a3 -> gom cac phan tu 1, 50, 5, 3 => sua phan tu index = 1 (50) => thanh gia tri 15
a3[1] = 15 // Thay 1 => thanh index can xoa.
console.log(a3)
// Cai nhin tong quan ve mang: khai bao, them, xoa, sua.
// Duyet cac phan tu trong 1 mang
// a3.length -> tra ve so phan tu trong mang a3
for (var i = 0; i < a3.length; i++) {
console.log(a3[i])
}
// Object & Array => Tao 1 array chua danh sach sinh vien thi lam the nao?
var stdList = [] //stdList -> global
//Khai bao mang chua 2 phan tu truoc
var stdList = [
{
'name': 'TRAN VAN A',
'gender': 'NAM',
'address': 'Nam Dinh',
'email': 'tranvana@gmail.com'
},{
'name': 'TRAN VAN B',
'gender': 'NAM',
'address': 'Ha Noi',
'email': 'tranvanb@gmail.com'
}
]
//stdList => gom 2 sinh vien.
//Them 1 sinh vien moi vao mang stdList
var std = {
'name': 'TRAN VAN C',
'gender': 'NAM',
'address': 'Ha Nam',
'email': 'tranvanc@gmail.com'
}
stdList.push(std)
console.log(stdList)
//Cach viet nhanh
stdList.push({
'name': 'TRAN VAN D',
'gender': 'NAM',
'address': 'Ha Nam',
'email': 'tranvand@gmail.com'
})
console.log(stdList)
//In ra man hinh
for (var i = 0; i < stdList.length; i++) {
document.writeln(stdList[i].name + ', ' + stdList[i].gender + ', ' + stdList[i].address + ', ' + stdList[i].email + '<br/>')
}
//Hien thi tren trang web => chi nhan theo tag cua html.
// Function trong JS
tinhtong(5, 10)
function tinhtong(x, y) {
s = x + y
console.log('Tong: ' + s)
}
function tinhtong2(x, y) {
s = x + y
return s;
}
tinhtong(5, 10)
var s1 = tinhtong2(2, 10)
var s2 = tinhtong2(5, 7)
console.log('s1: ' + s1)
console.log('s2: ' + s2)
//Tuy vao tung muc dich va viet function cho phu hop.
function showStudentList() {
//stdList -> global
for (var i = 0; i < stdList.length; i++) {
// document.writeln(stdList[i].name + ', ' + stdList[i].gender + ', ' + stdList[i].address + ', ' + stdList[i].email + '<br/>')
document.writeln(`
<tr>
<td>${i+1}</td>
<td>${stdList[i].name}</td>
<td>${stdList[i].gender}</td>
<td>${stdList[i].address}</td>
<td>${stdList[i].email}</td>
</tr>`)
}
}
</script>
<table border="1">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Gender</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<!-- Hien thi du lieu tung sinh vien tai day -->
<script type="text/javascript">
showStudentList()
</script>
</tbody>
</table>
</body>
</html>#test.html
<!DOCTYPE html>
<html>
<head>
<title>Tag by Javascript</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="title" class="abc" style="color: red; background-color: green" title="Xin chao cac ban!!!">Welcome to learn Javascript</h1>
<input type="text" name="name" value="" id="fullname" size="50">
<button onclick="updateData()">Update Data</button>
<button onclick="test()">Test</button>
<script type="text/javascript">
//Tuong tac tag bang javascript
//Doc noi dung, sua css, them/sua/xoa noi dung html trong tag bat ky nao do
//moi 1 tag trong html => hien thi tren browser => tuong ung voi 1 object trong js
//object: thuoc tinh => gia tri tuong ung
//B1. Mapping 1 tag trong html => bien trong js => chung ta se lam nhu the nao
//class name, tag name, name
var titleTag2 = document.getElementsByClassName('abc') //Tra ve la array
//titleTag2[0], titleTag2[1], titleTag2[2], ...
var titleTag = document.getElementById('title') //Tra ve 1 object
console.log(titleTag)
//B2. Doc thuoc tinh cua object
console.log(titleTag.title)
console.log(titleTag.id)
console.log(titleTag.style.color)
//B3. Thay doi thuoc tinh css bang js
titleTag.style.color = 'blue'
titleTag.style.backgroundColor = 'red'
titleTag.style.fontSize = '30px'
//B4. TH rieng cua tag
titleTag.innerHTML = 'Chao mung ban toi khoa hoc Javascript'
//Mapping input tag toi object trong js
var fullnameTag = document.getElementById('fullname')
fullnameTag.style.color = 'red'
fullnameTag.style.backgroundColor = 'orange'
//Input tag -> TH rieng -> noi dung luu trong the input thao tac nhu nao
fullnameTag.value = 'Sinh vien aptech'
console.log(fullnameTag.value)
//Bai toan: Khi nguoi dung click vao button "Update Data" => Doc noi dung nhap trong the input => Thay the vao the H1
//B1. Bat duoc su kien khi nguoi dung click vao button "Update Data"
function updateData() {
console.log('click ...')
//B2. Doc duoc noi dung nguoi dung go trong the input
var content = fullnameTag.value
console.log(content)
//B3. Thay the noi dung trong the input vao the H1
titleTag.innerHTML = content
// var test2 = content //test2 => local
//Bai toan dat => bien test2 => thanh bien global
//C1: xoa key word => var => truoc ten bien
test2 = content
}
function test() {
// body...
console.log('test ---------------')
console.log(test2)
}
</script>
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
