By GokiSoft.com| 10:22 22/12/2021|
Học JS

[Video] Tìm hiểu Events + JSON + Mapping Tag trong HTML - Khóa học Javascript


#cal.html


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

	<style type="text/css">
		.container {
			width: 600px;
			margin: 0px auto;
			background-color: #a3f7f5;
			padding: 15px;
		}

		.container label, .container input {
			width: 100%;
			margin-bottom: 15px;
			font-size: 18px;
		}
	</style>
</head>
<body>
<div class="container">
	<form method="post">
		<label>X: </label>
		<input type="text" name="x" id="x_id" placeholder="Enter X">
		<label>Y: </label>
		<input type="number" name="y" id="y_id" placeholder="Enter Y">
		<label>Tong: </label>
		<input type="text" name="tong" id="tong_id" disabled>
		<button type="button" onclick="tinhTong()">Tinh Tong</button>
	</form>
</div>

<script type="text/javascript">
	function tinhTong() {
		console.log('Tinh Tong...')
		var xTag = document.getElementById('x_id')
		var yTag = document.getElementById('y_id')

		var x = xTag.value
		var y = yTag.value
		console.log('x = ' + x)
		console.log('y = ' + y)

		var sum = parseInt(x) + parseInt(y)
		console.log(sum)
		var tongTag = document.getElementById('tong_id')
		tongTag.value = sum
	}
</script>
</body>
</html>


#student.json


// Bieu dieu 1 doi tuong sinh vien
{
	"fullname": "Tran Van A",
	"age": 12,
	"address": "Ha Noi"
}
{"fullname":"Tran Van A","age":12,"address":"Ha Noi"}

// Bieu dien mang sinh vien
[
	{
		"fullname": "Tran Van A",
		"age": 12,
		"address": "Ha Noi"
	}, {
		"fullname": "Tran Van B",
		"age": 22,
		"address": "Ha Noi"
	}, {
		"fullname": "Tran Van C",
		"age": 19,
		"address": "Ha Noi"
	}
]

[{"fullname":"Tran Van A","age":12,"address":"Ha Noi"},{"fullname":"Tran Van B","age":22,"address":"Ha Noi"},{"fullname":"Tran Van C","age":19,"address":"Ha Noi"}]

// Bieu dien 1 mang bat ky
[1, "ABC", true, 5.6, "OKOK"]

//Ko phai la chuoi json
"tran van a"
12
true

//Su dung cong cu -> check error JSON
//https://jsoneditoronline.org/#left=local.vajule&right=local.pizezi


#vidu.html


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

	<style type="text/css">
		.container {
			width: 600px;
			margin: 0px auto;
			background-color: #a3f7f5;
			padding: 15px;
		}

		.container label, .container input {
			width: 100%;
			margin-bottom: 15px;
			font-size: 18px;
		}
	</style>
</head>
<body>
<div class="container">
	<form method="post">
		<label>Full Name: </label>
		<input type="text" name="fullname" id="fullname_id" placeholder="Enter fullname" onchange="changeFullname()" onkeyup="keyupAge()" style="background-color: yellow; color: red; font-size: 18px;">
		<label>Age: </label>
		<input type="number" name="age" id="age_id" placeholder="Enter age" onkeyup="keyupAge()">
		<label>Address: </label>
		<input type="text" name="address" id="address_id" placeholder="Enter address">
		<button type="button" onclick="addUser()">Add User</button>
		<button type="reset">Reset</button>
		<button type="button" onclick="thaydoicss()">Thay Doi CSS FULLNAME</button>
	</form>
</div>
<script type="text/javascript">
	// PHAN 1: TIM HIEU JSON
	/**
	//Bieu dien chuoi JSON trong JS
	var stdJson = '{"fullname":"Tran Van A","age":12,"address":"Ha Noi"}'
	var stdListJson = '[{"fullname":"Tran Van A","age":12,"address":"Ha Noi"},{"fullname":"Tran Van B","age":22,"address":"Ha Noi"},{"fullname":"Tran Van C","age":19,"address":"Ha Noi"}]'

	//Hoc JSON de lam gi
	//Chuyen stdJson -> object trong js
	var std = JSON.parse(stdJson)
	console.log(std)
	console.log(std.fullname)
	console.log(std.age)
	console.log(std.address)

	var stdList = JSON.parse(stdListJson)
	console.log(stdList)
	
	//Chuyen object/array trong js -> json string
	var json = JSON.stringify(stdList)
	console.log(json)
	*/
	// PHAN 2: TIM HIEU EVENT
	function addUser() {
		//Xu ly khoi code nay -> khi nguoi dung click vao button Add User
		console.log('test ...')
		//Mapping tag html <-> object trong js
		//C1. Mapping thong qua id -> cach de nhat -> don gian
		var fullnameTag = document.getElementById('fullname_id')
		console.log(fullnameTag.id)
		console.log(fullnameTag.name)
		console.log(fullnameTag.placeholder)

		fullnameTag.placeholder = 'Nhap Ho & Ten ...'

		//TH dac viet -> the input -> value 
		console.log(fullnameTag.value)
		fullnameTag.value = 'Noi dung go bat ky'

		//Thao tac len css bang javascript

	}

	function thaydoicss() {
		var fullnameTag = document.getElementById('fullname_id')
		//thay doi background-color
		fullnameTag.style.backgroundColor = 'blue'
		fullnameTag.style.fontSize = '30px'
		fullnameTag.style.color = 'white'
	}

	function changeFullname() {
		console.log('change fullname ...')
	}

	function keyupAge() {
		console.log('key up age | fullname ...')
	}
</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 đó