[Source Code] Tìm hiểu Array & Object trong Javascript - Mapping Tag HTML bằng JS - C2206L

#object.html

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Object in Javascript</title>
</head>
<body>
<script type="text/javascript">
	//Bai toan:
	//Bieu dien 1 sinh vien: fullname -> TRAN VAN A, age -> 22, email -> a@gmail.com, address -> Ha Noi
	var std = {
		'fullname': 'TRAN VAN A',
		'age': 22,
		'email': 'a@gmail.com',
		'address': 'Ha Noi'
	}
	console.log(std)

	//Bieu dien 1 sinh vien: fullname -> TRAN VAN B, age -> 30, email -> b@gmail.com
	var stdb = {
		'fullname': 'TRAN VAN B'
	}
	stdb.email = 'b@gmail.com'
	stdb.age = 30
	console.log(stdb)

	//Lay thong tin sinh vien de hien thi
	console.log(std.fullname)
	console.log(std.age)
	console.log(std['address'])

	std.fullname = 'AAAAAAAA'
	console.log(std.fullname)
</script>
</body>
</html>

#bt1602.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>N! javascript</title>
</head>
<body>
<script type="text/javascript">
	var n = prompt('Nhap N', 0)
	var result = 1

	for (var i = 1; i <= n; i++) {
		result *= i
	}

	// alert(n + '! = ' + result)
	alert(`${n}! = ${result}`)
</script>
</body>
</html>

#binding.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Binding HTML & Javascript</title>

	<style type="text/css">
		.container {
			width: 500px;
			margin: 0px auto;
		}
	</style>
</head>
<body>
<div class="container">
	<label>Full Name:</label>
	<input type="text" name="fullname" id="fullname_id" placeholder="Enter full name">
	<br/><br/><br/>

	<label>Email:</label>
	<input type="email" name="email" id="email_id" placeholder="Enter email">
	<br/><br/><br/>

	<label>Address:</label>
	<input type="text" name="address" id="address_id" placeholder="Enter address" onchange="changeAddress()">
	<br/><br/><br/>

	<button onclick="click1()">Click FullName Tag</button>
	<button onclick="click2()">Click Add Content</button>

	<h1 id="content">Test...</h1>
</div>

<script type="text/javascript">
	function click1() {
		// alert('Xin chao A')
		//Binding theo ID
		var fullnameTag = document.getElementById('fullname_id')
		console.log(fullnameTag)
		console.log(fullnameTag.type)
		console.log(fullnameTag.name)
		console.log(fullnameTag.id)
		console.log(fullnameTag.placeholder)

		fullnameTag.placeholder = 'Enter name'
		//style="color: red; font-size: 30px;"

		fullnameTag.style.color = 'red'
		fullnameTag.style.fontSize = '30px'

		console.log(fullnameTag.value)

		fullnameTag.value = 'Xin Chao'
	}

	function click2() {
		// alert('Xin chao B')
		var addressTag = document.getElementById('address_id')
		var v = addressTag.value

		console.log(v)

		var contentTag = document.getElementById('content')
		contentTag.innerHTML = v
	}

	function changeAddress() {
		console.log('change address ...')
	}
</script>
</body>
</html>

#array.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Array & Object in Javascript</title>
</head>
<body>
<script type="text/javascript">
	//Luu y: length = arr.length, index: 0 -> length - 1
	//B1. Xem cach khai bao mang
	var arr = []
	arr = Array()
	console.log(arr)

	//B2. Them 1 phan tu vao trong mang
	arr.push(12) //length = 1, index = 0 (12)
	arr.push(22) //length = 2, index = 0 -> 1 (12, 22)
	arr.push(100) //length = 3, index = 0 -> 2 (12, 22, 100)
	console.log(arr)

	//B3. Lay du lieu trong mang ra & duyet (for)
	//Vi du: lay gia tri phan tu vi tri index = 1
	console.log(arr[1])

	for (var i = 0; i < arr.length; i++) {
		console.log(`arr[${i}] = ${arr[i]}`)
	}

	//foreach
	for(var item of arr) {
		console.log(`v = ${item}`)
	}

	//B4. Sua noi dung du lieu trong mang
	//Vi du: Sua vi tri index = 1 (22) -> 220
	arr[1] = 220
	console.log(arr)

	//B5. Xoa 1 phan tu trong mang
	arr.splice(1, 1)
	// arr.splice(1, 2)
	// arr.splice(1, 0)
	console.log(arr)

	//B6. Chen 1 phan tu vao vi tri bat ky trong mang
	//Chen vao giua so 12 va 100 -> 33
	//12, 100
	arr.splice(1, 0, 33)
	arr.splice(1, 0, 55)
	console.log(arr)

	//12, 55, 33, 100
	arr.splice(2, 2, 300)
	console.log(arr)

</script>
</body>
</html>

#array_object.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Array & Object in Javascript</title>
</head>
<body>
<script type="text/javascript">
	//B1. Khai bao mang
	var stdList = []

	//B2. Them 1 object sinh vien vao trong mang
	var std = {
		'fullname': 'TRAN VAN A',
		'age': 22,
		'email': 'a@gmail.com',
		'address': 'Ha Noi'
	}
	stdList.push(std)

	stdList.push({
		'fullname': 'TRAN VAN B',
		'age': 20,
		'email': 'b@gmail.com',
		'address': 'Ha Noi'
	})

	console.log(stdList)

	//B3. Lay phan tu trong mang & duyet
	for (var i = 0; i < stdList.length; i++) {
		console.log(`Ten: ${stdList[i].fullname}, Tuoi: ${stdList[i].age}`)
	}
</script>

<table border="1" cellpadding="3">
	<thead>
		<tr>
			<th>STT</th>
			<th>Ho & Ten</th>
			<th>Email</th>
			<th>Tuoi</th>
		</tr>
	</thead>
	<tbody>
<script type="text/javascript">
	for (var i = 0; i < stdList.length; i++) {
		document.writeln(`<tr>
			<td>${i+1}</td>
			<td>${stdList[i].fullname}</td>
			<td>${stdList[i].email}</td>
			<td>${stdList[i].age}</td>
		</tr>`)
	}
</script>
	</tbody>
</table>
</body>
</html>

[Source Code] Tìm hiểu Array & Object trong Javascript - Mapping Tag HTML bằng JS - C2206L

#object.html

#bt1602.html

#binding.html

#array.html

#array_object.html

Tags:

Phản hồi từ học viên

5

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó