By GokiSoft.com|
15:35 07/01/2022|
Học JS
[Video] Tìm hiểu về Function & Object & Array trong Javascript + JSON trong Javascript - C2110I
#events.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Events in Javascript</title>
<style type="text/css">
.container {
width: 500px;
background-color: orange;
padding: 15px;
margin: 0px auto;
margin-bottom: 20px;
}
.container input {
width: 100%;
font-size: 16px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<form method="post">
<input required type="text" name="fullname" id="fullname_id" class="form-control" placeholder="Enter full name" onkeyup="onkeyupFullname()">
<input required type="tel" name="phone_number" placeholder="Enter phone number" onchange="onchangePhone()">
<input required type="text" name="zipCode" placeholder="Enter Zip Code">
<input required type="text" name="fax" placeholder="Enter Fax">
<button type="button" onclick="clickSubmit()">Submit</button>
<button type="reset">Reset</button>
</form>
<button type="button" onclick="nhapX()">Nhap X</button>
<button type="button" onclick="nhapY()">Nhap Y</button>
<button type="button" onclick="tinhTong()">Ket Qua</button>
</div>
<script type="text/javascript">
function clickSubmit() {
console.log('Dang click vao button submit')
}
function onkeyupFullname() {
console.log('onkeyupFullname ...')
}
function onchangePhone() {
console.log('onchangePhone ...')
}
var x, y, s
function nhapX() {
x = parseFloat(prompt('Nhap x'))
console.log(x)
}
function nhapY() {
y = parseFloat(prompt('Nhap y'))
console.log(y)
}
function tinhTong() {
s = x + y
alert('s = ' + s)
}
var a = 1
var a = 100
let b = 10
// let b = 20 -> error
b = 200
function testA() {
//a -> global
// a = 10
//var -> trong function -> local -> pham vi su dung chi trong testA
// var a = 10
// let -> trong function -> local -> pham vi su dung chi trong testA
// let a = 10
}
testA()
function showA() {
console.log('a > testA > ' + a)
console.log('b > testA > ' + b)
}
showA()
</script>
</body>
</html>#vidu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Javascript basic for beginer</title>
</head>
<body>
<script type="text/javascript">
//Typing code
//1) Function trong Javascript
function showMenu() {
console.log('1. Chuc nang a')
console.log('2. Chuc nang b')
console.log('3. Chuc nang c')
console.log('4. Chuc nang d')
console.log('5. Chuc nang e')
}
showMenu()
function tinhTong(x, y) {
s = x + y
console.log('Tong: ' + s)
}
tinhTong(5, 6)
function tinhTong2(x, y) {
s = x + y
return s
}
s = tinhTong2(6, 10)
console.log('Tinh tong s = ' + s)
//2) Array trong Javascript
//2.1) Khai bao mang rong
arr = [] //Hay dung -> ngan ngon
arr = new Array() //It khi dung -> dai dong
//Luu y: arr -> mang rong -> khong co bat ky phan tu nao trong mang
//Luu y: arr -> length = arr.length, index: 0 -> length - 1
//Luu y: Mang trong JS -> mang dong -> so phan tu trong mang -> tu dong thay doi
//Luu y: Mang trong JS -> quan ly nhieu kieu du lieu khac nhau: int, char, string, array, object
//Them phan tu vao trong mang thi lam cach nao
arr.push(12) //length: 1, index: 0
arr.push(1) //length: 2, index: 0 -> 1
arr.push(22) //length: 3, index: 0 -> 2
arr.push(102) //length: 4, index: 0 -> 3
arr.push(122) //length: 5, index: 0 -> 4
arr.push('Sinh vien') //length: 6, index: 0 -> 5
console.log(arr)
//Sua noi dung du lieu trong mang: index: 0 -> 4, thay doi du lieu tai cac vi tri 0 -> 4
arr[2] = 220
console.log(arr)
//Lay gia tri cac phan tu trong mang
console.log(arr[3])
for (var i = 0; i < arr.length; i++) {
console.log(`Phan tu thu ${i} = ${arr[i]}`)
}
//Xoa phan tu trong mang -> xoa vi tri index = 2
arr.splice(2, 1) //length: 5, index: 0 -> 4
console.log(arr)
//Xoa nhieu phan tu trong mang -> xoa vi tri index = 1 & xoa di 3 phan tu
arr.splice(1, 3) //length: 2, index: 0 -> 1
console.log(arr)
//Insert 2 phan tu 5, 6 vao mang -> tai vi tri index: 1, 2
arr.splice(1, 0, 5, 6) //length: 4, index: 0 -> 3
console.log(arr)
//Khai bao mang gom cac phan tu san
arr = [3, 6, 2, 10, 11]
arr = new Array(3, 6, 2, 10, 11)
console.log(arr)
//3) Khai bao Object trong JS
//Bieu dien 1 doi tuong -> chi ro 1 doi tuong cu the
//Vi du: sinh vien: gom cac thuoc tinh fullname, age, address, ..v.v
//Bieu dien doi tuong sinh vien: fullname = TRAN VAN A, age = 22, addresss = Ha Noi -> se bieu dien trong code nhu the nao???
//Cach 1: Khai bao tuong minh ngay tu dau
var std = {
"fullname": "TRAN VAN A",
"age": 22,
"address": "Ha Noi"
}
std.email = "tranvana@gmail.com"
console.log(std)
//Lay phan tu trong doi tuong std
console.log(std.fullname)
console.log(std['fullname'])
console.log(std.age)
console.log(std.address)
//Cach 2: Khai bao doc lap
std = {}
std.fullname = "Tran Van A"
std.age = 22
std.address = "Nam Dinh"
console.log(std)
//Sua thong tin sinh vien
std.fullname = "Tran Van B"
console.log(std)
//4) Khai bao mang sinh vien
var studentList = []
std = {
"fullname": "TRAN VAN A",
"age": 22,
"address": "Ha Noi"
}
studentList.push(std)
//them nhanh nhu sau
studentList.push({
"fullname": "TRAN VAN B",
"age": 20,
"address": "Ha Noi"
})
console.log(studentList)
</script>
<!-- Viet chuong trinh sinh nhau nhien N sinh vien -->
<!-- N: nhap thong qua ham prompt -->
<!-- Hien thi thong tin sinh vien ra man hinh -->
<script type="text/javascript">
var N = prompt('Nhap so sinh vien can them', 0)
var studentList = []
for(i=0;i<N;i++) {
std = {
"fullname": "TRAN VAN " + i,
"age": 22 + i,
"address": "Ha Noi > " + i
}
studentList.push(std)
}
console.log(studentList)
for (var i = 0; i < studentList.length; i++) {
document.write(`<p>Ten: ${studentList[i].fullname}, Tuoi: ${studentList[i].age}, Dia Chi: ${studentList[i].address}</p>`)
}
//Khai bao 1 mang object trong JS
studentList = [
{
"fullname": "TRAN VAN B",
"age": 19,
"address": "Ha Noi"
}, {
"fullname": "TRAN VAN C",
"age": 20,
"address": "Ha Noi"
}, {
"fullname": "TRAN VAN A",
"age": 22,
"address": "Ha Noi"
}
]
console.log(studentList)
//B1. Chuyen object | array object -> json string
var json = JSON.stringify(studentList)
console.log(json)
var json = `[{"fullname":"TRAN VAN B","age":19,"address":"Ha Noi"},{"fullname":"TRAN VAN C","age":20,"address":"Ha Noi"},{"fullname":"TRAN VAN A","age":22,"address":"Ha Noi"},{"fullname":"TRAN VAN D","age":26,"address":"Nam Dinh"}]`
//Chuyen json string -> array object trong JS
var stdList = JSON.parse(json)
for (var i = 0; i < stdList.length; i++) {
document.write(`<p>Ten: ${stdList[i].fullname}, Tuoi: ${stdList[i].age}, Dia Chi: ${stdList[i].address}</p>`)
}
</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)
