By GokiSoft.com| 09:32 12/01/2022|
Học JS

[Video] Overview kiến thức Javascript - C2108G3


#vidu-js.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Form Vay Tien</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" onsubmit="return saveData();">
		<input required type="text" name="fullname" id="fullname_id" class="form-control" placeholder="Enter full name">
		<input required type="tel" name="phone_number" placeholder="Enter phone number" minlength="10">
		<input required type="text" name="zipCode" placeholder="Enter Zip Code">
		<input required type="text" name="fax" placeholder="Enter Fax">

		<!-- Radio: Group -> chi con dc 1 gia tri -->
		<label>Gioi Tinh:</label>
		<input type="radio" value="Test-Nam" name="radio_gender" style="width: auto !important;"> Nam
		<input type="radio" value="Test-Nu" name="radio_gender" style="width: auto !important;"> Nu

		<br/>
		<label>Ngon Ngu</label>
		<input type="checkbox" name="languages" value="VN" style="width: auto !important;"> Viet Nam
		<input type="checkbox" name="languages" value="EN" style="width: auto !important;"> English
		<input type="checkbox" name="languages" value="FR" style="width: auto !important;"> France

		<br/>
		<label>Gioi Tinh</label>
		<select id="gender">
			<option value="">Chon</option>
			<option value="s-name">Nam</option>
			<option value="s-nu">Nu</option>
		</select>

		<br/>
		<button type="submit">Submit</button>
		<button type="reset">Reset</button>
	</form>
</div>

<script type="text/javascript">
	//Phan 2: Events
	function saveData() {
		//Code logic o day.
		//Xu ly logic doc & thay doi noi dung tag html -> dat id cho tag html do.
		var fullnameTag = document.getElementById('fullname_id') //Mapping tag html <-> object js (bien trong js) -> quen code + kho nho -> giai phap -> co gang ghi nho
		//Do du lieu
		var v = fullnameTag.value
		alert(v)

		//Ghi du lieu
		fullnameTag.value = 'ABC'

		//Lay gia tri gioi tinh da chon cho radio
		// var radioGenderList = document.getElementsByName('radio_gender')
		// var gender = ''
		// for (var i = 0; i < radioGenderList.length; i++) {
		// 	if(radioGenderList[i].checked) {
		// 		gender = radioGenderList[i].value

		// 		break
		// 	}
		// }
		var gender = getValueRadio('radio_gender')
		console.log(gender)

		// var languageList = []
		// var list = document.getElementsByName('languages')
		// for (var i = 0; i < list.length; i++) {
		// 	if(list[i].checked) {
		// 		languageList.push(list[i].value)
		// 	}
		// }
		// console.log(languageList)
		var languageList = getValuesCheckbox('languages')
		console.log(languageList)

		//select
		var genderTag = document.getElementById('gender')
		gender = genderTag.value
		console.log(gender)

		genderTag.value = 's-name'

		return false;
	}

	function getValuesCheckbox(name) {
		var cList = []
		var list = document.getElementsByName(name)
		for (var i = 0; i < list.length; i++) {
			if(list[i].checked) {
				cList.push(list[i].value)
			}
		}
		return cList
	}

	function getValueRadio(name) {
		var radioList = document.getElementsByName(name)
		for (var i = 0; i < radioList.length; i++) {
			if(radioList[i].checked) {
				return radioList[i].value
			}
		}
	}

	// 1. Loop -> index: 0 -> length - 1, length: arr.length
	var arr = [5, 2, 3, 10, 22]

	// for -> index
	for (var i = 0; i < arr.length; i++) {
		console.log('arr -> ' + arr[i])
	}

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

	// for(var v in arr) {
	// 	console.log(v)
	// }

	// 2. Object -> JS
	// Khai bao 1 doi tuong trong js -> bieu dien no nhu nao
	// Vi du: sinh vien -> fullname, age, address, .v.v -> cau truc cua doi tuong sinh vien
	// Bieu dien -> cho 1 doi tuong cu the -> sinh vien -> fullname: A, age: 18, address: Ha Noi -> doi tuong cu the.
	//C1 -> Ghi nho -> cau truc bieu dien -> OK
	var std = {
		"fullname": "A",
		"age": 18,
		"address": "Ha Noi"
	}

	//C2
	var std = {}
	std.fullname = "A"
	std.age = 18
	std.address = "Ha Noi"

	// 3. Array Object -> JS
	var stdList = [] //kien thuc khai bao mang

	std = {
		"fullname": "A",
		"age": 18,
		"address": "Ha Noi"
	}
	stdList.push(std)

	std = {
		"fullname": "B",
		"age": 18,
		"address": "Ha Noi"
	}
	stdList.push(std)

	stdList.push({
		"fullname": "C",
		"age": 18,
		"address": "Nam Dinh"
	})

	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 đó