IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS [Share Code] Tìm hiểu về Object & Array & Function trong Javascript

[Share Code] Tìm hiểu về Object & Array & Function trong Javascript

by GokiSoft.com - 21:16 25/02/2021 2,156 Lượt Xem

#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: [email protected]
		var std = {
			'name': 'TRAN VAN A',
			'gender': 'NAM',
			'address': 'Nam Dinh',
			'email': '[email protected]'
		}
		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': '[email protected]'
			},{
				'name': 'TRAN VAN B',
				'gender': 'NAM',
				'address': 'Ha Noi',
				'email': '[email protected]'
			}
		]
		//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': '[email protected]'
		}
		stdList.push(std)

		console.log(stdList)

		//Cach viet nhanh
		stdList.push({
			'name': 'TRAN VAN D',
			'gender': 'NAM',
			'address': 'Ha Nam',
			'email': '[email protected]'
		})

		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>


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!