By GokiSoft.com| 15:29 29/08/2022|
Học HTML5 - CSS3

[Source Code] Overview jQuery & localStorage & Object - Array trong JS - C2109I

#vidu.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery tutorial</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>

<div class="container">
	<form method="post">
		<div class="form-group">
			<label>Full Name: </label>
			<input type="text" name="fullname" class="form-control" placeholder="Enter full name" id="fullname_id">
		</div>
		<div class="form-group">
			<label>Email: </label>
			<input type="email" name="email" class="form-control" placeholder="Enter email">
		</div>
		<div class="form-group">
			<label>Address: </label>
			<input type="text" name="address" class="form-control" placeholder="Enter address">
		</div>
		<div class="form-group">
			<button class="btn btn-success" type="button" id="save_btn">Save</button>
			<button class="btn btn-danger" type="reset">Reset</button>
		</div>
	</form>

	<table class="table table-bordered">
		<thead>
			<tr>
				<th>No</th>
				<th>Full Name</th>
				<th>Email</th>
				<th>Address</th>
				<th style="width: 50px"></th>
			</tr>
		</thead>
		<tbody id="result">
		</tbody>
	</table>
</div>

<script type="text/javascript">
	var index = 0
	var dataList = []

	$(function() {
		// $(selector)
		// Binding tag html -> ID
		$('#fullname_id').val('TRAN VAN A')
		console.log($('#fullname_id').val())

		// Binding tag html -> class name
		$('.form-control').val('Xin chao')
		console.log($('.form-control').val())

		// Binding tag html -> tag name
		$('input').val('ZZZ')

		// Binding tag html -> other param
		$('[name=address]').val('Ha Noi')
		$('[placeholder="Enter full name"]').val('TRAN VAN B')

		// event in js (jQuery)
		$('[name=address]').change(function() {
			console.log('change address ...')
			console.log($('[name=address]').val())
			console.log($(this).val())
		})

		$('#save_btn').click(function() {
			// console.log('click save btn ...')
			fullname = $('[name=fullname]').val()
			email = $('[name=email]').val()
			address = $('[name=address]').val()

			var std = {
				"fullname": fullname,
				"email": email,
				"address": address
			}

			dataList.push(std)

			//Chuyen array -> json string
			json = JSON.stringify(dataList)
			console.log(json)

			localStorage.setItem('studentList', json)

			console.log(dataList)

			// console.log(fullname + ', ' + email + ', ' + address)

			$('#result').append(`<tr>
				<td>${++index}</td>
				<td>${fullname}</td>
				<td>${email}</td>
				<td>${address}</td>
				<td>
					<button class="btn btn-danger" onclick="$(this).parent().parent().remove()">Remove</button>
				</td>
			</tr>`)
		})
	})
</script>
</body>
</html>


#storage.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>LocalStorage in JS</title>
</head>
<body>
<script type="text/javascript">
	//key -> value
	//key: R001 -> value: Xin chao
	// Luu du lieu nhu the nao
	//key: fullname -> value: Tran Van A
	// localStorage.setItem('fullname', 'Tran Van A')

	// Lay du lieu ra nhu the nao
	// fullname = localStorage.getItem('fullname')
	// console.log(fullname)

	// Xoa du lieu di bang cach nao
	// localStorage.removeItem('fullname')
	var json = localStorage.getItem('studentList')
	console.log(json)

	var studentList = JSON.parse(json)
	console.log(studentList)
</script>
</body>
</html>


#array.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Object & Array in JS</title>
</head>
<body>
<script type="text/javascript">
	// Khai bao mang trong JS
	var arr = [] //length: arr.length, index: 0 -> length - 1
	var arr = Array()

	// 1) Them 1 phan tu vao trong mang
	arr.push(12)
	arr.push(50)
	arr.push(112)
	console.log(arr)

	// 2) Lay du lieu trong mang ra -> Theo index
	console.log(arr[0])

	// 3) Duyet qua cac phan tu trong mang
	for (var i = 0; i < arr.length; i++) {
		console.log(i + ' > ' + arr[i])
	}

	for(v of arr) {
		console.log('v > ' + v)
	}

	// 4) Sua noi dung 1 phan tu trong mang
	arr[1] = 500
	console.log(arr)

	// 5) Chen 1 phan tu vao vi tri bat ky cua mang
	arr.splice(2, 0, 111)
	console.log(arr)

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

	// Khai niem ve object js
	// Sinh vien: rollno, fullname, email
	// Bieu dien sinh vien: rollno -> R001, fullname -> Tran Van A, email -> a@gmail.com
	var std = {
		"rollno": "R001",
		"fullname": "Tran Van A",
		"email": "a@gmail.com"
	}

	// Lay du lieu sinh vien theo thuoc tinh
	console.log(std.rollno)
	console.log(std['fullname'])

	std.gender = "Nam"
	console.log(std)

	//Sua noi dung du lieu
	std.fullname = "Tran Van B"
	console.log(std)

	// Bieu dien mang object
	var stdList = []
	stdList.push(std)
	stdList.push({
		"rollno": "R002",
		"fullname": "C",
		"email": "c@gmail.com",
		"gender": "Nam"
	})

	console.log(stdList)
</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)

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

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