By GokiSoft.com| 20:00 02/03/2021|
Học JS

[Share Code] Tìm hiểu về onload - jQuery - localStorage - json - Lập trình Javascript 



<!DOCTYPE html>
<html>
<head>
	<title>HTML/CSS/JS - tutorial</title>
	<meta charset="utf-8">
	<link rel="icon" type="image/png" href="https://res.cloudinary.com/gokisoft-com/image/upload/v1553571154/ico_copy_uhtlfa.png" />

	<!-- Thu vien jquery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<!-- Lam sao de code dat o bat ky vi tri nao => khi load trang web deu ko bi loi. -->
	<!-- De giai quyet: code js chi dc phep chay => khi ma website dc duoc load thanh cong: the html da dc hien thi tren browser -->
	<!-- Move code len dau -->
	<script type="text/javascript">
		//code -> de ngay ngoai the script => thuc thi ngay lap tuc khi trang web duoc load len.
		// var nameTag = document.getElementById('fname');
		// nameTag.value = 'Sinh vien Aptech'
		// nameTag.style.color = 'red'

		// function init() {
		// 	var nameTag = document.getElementById('fname');
		// 	nameTag.value = 'Sinh vien Aptech'
		// 	nameTag.style.color = 'red'
		// }

		// $(document).ready(function() {
		// 	//Doi cho website tai noi dung thanh cong -> thuc thi khoi code tai day.
		// 	var nameTag = document.getElementById('fname');
		// 	nameTag.value = 'Sinh vien Aptech'
		// 	nameTag.style.color = 'red'
		// })

		$(function() {
			//Doi cho website tai noi dung thanh cong -> thuc thi khoi code tai day.
			// var nameTag = document.getElementById('fname');
			// nameTag.value = 'Sinh vien Aptech'
			// nameTag.style.color = 'red'
			// var nameTag = document.getElementById('fname');
			// nameTag.value = 'Sinh vien Aptech'

			//Chuyen code tren su dung jquery
			// $('#fname').val('Sinh vien Aptech')
			// $('.abc').val('Sinh vien Aptech') //basic ve jquery -> js => jQuery.
			// $('input').val('Sinh vien Aptech')
			// $('[name=fullname]').val('Sinh vien Aptech')

			//doc noi dung luu trong localStorage bang key: fname
			var fname = localStorage.getItem('fname')
			$('.abc').val(fname)
		})

		function updateData() {
			var nameTag = document.getElementById('fname');
			console.log(nameTag.value)

			// Cach luu tru du lieu len localStorage
			localStorage.setItem('fname', nameTag.value)
		}

		var std = {
			"fullname": "Tran Van A",
			"age": 20,
			"address": "Ha Noi"
		}

		var json = '{"fullname":"Tran Van A","age":20,"address":"Ha Noi"}'
		//Lam sao chuyen object js -> json js
		var json2 = JSON.stringify(std)
		console.log(json2)

		//Chuyen nguoc lai thi lam the nao: json js -> object js
		var std2 = JSON.parse(json2)
		console.log(std2)

		var stdList = [
			{
				"fullname": "Tran Van A",
				"age": 20,
				"address": "Ha Noi"
			},{
				"fullname": "Tran Van B",
				"age": 30,
				"address": "Ha Nam"
			}
		]

		var jsonList = '[{"fullname":"Tran Van A","age":20,"address":"Ha Noi"},{"fullname":"Tran Van B","age":30,"address":"Ha Nam"}]';

		//Lam sao chuyen array js -> json js
		var jsonList2 = JSON.stringify(stdList)
		console.log(jsonList2)

		//Chuyen nguoc lai thi lam the nao: json js -> object js
		var stdList2 = JSON.parse(jsonList2)
		console.log(stdList2)

		localStorage.setItem('studentList', jsonList2)

		var jsonList3 = localStorage.getItem('studentList')
		console.log(jsonList3)

		var stdList3 = JSON.parse(jsonList3)
		console.log(stdList3)
	</script>
</head>
<!-- <body onload="init()"> -->
<body>
	<input type="text" name="fullname" id="fname" size="50" placeholder="Enter full name" class="abc" onchange="updateData()">
	<!-- <img src="anh.gif"> -->
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.7348474193236!2d105.84723921537069!3d21.00326328601218!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ad58455db2ab%3A0x9b3550bc22fd8bb!2zNTQgTMOqIFRoYW5oIE5naOG7iywgQsOhY2ggS2hvYSwgSGFpIELDoCBUcsawbmcsIEjDoCBO4buZaSwgVmlldG5hbQ!5e0!3m2!1sen!2s!4v1614689810972!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
	
	<!-- De code script o day => chung ta khong gap bat ky loi gi -->
	<script type="text/javascript">
		//code -> de ngay ngoai the script => thuc thi ngay lap tuc khi trang web duoc load len.
		// var nameTag = document.getElementById('fname');
		// nameTag.value = 'Sinh vien Aptech'
		// nameTag.style.color = 'red'
	</script>
</body>
</html>



- Javascript là gi?
- Kiến thức của Javascript
	- Kiến thức core:
		- khai báo biến
		- toán tử, biểu thức logic, ...
		- mệnh đề điều kiện (if, else, switch)
		- vòng lặp (for, while, do .. while)
		- object/array (Mới so với C -> có sự tương đồng) -> focus kỹ hơn
		- json (json object - encode/decode)
		- function
	- Kiến thức về xử lý tag bằng javascript
		- Tương tác lên tag bằng js
		- Xử lý event (click vào button, nhập dữ liệu, ...) -> onclick
		- Chèn mã html vào website bằng js
	- jQuery
		- Một số kiên thức căn bản jQuery (BSJ -> học kỹ hơn)
	- Lưu trữ
		- localStorage -> focus vào mục này.
		- cookie/session/index database/...

=============================================================================
Nội dung kiến thức học:
	- jQuery: giới thiệu -> biết khi thi lý thuyết
	- Lưu trữ:
		- localStorage
		- cookie/session/index ...
	- json:
		- Là gì
		- Tạo chuỗi json như nào -> test nó
		- Ứng dụng json trong lập trình frontend -> js
	- overview lại toàn bộ kiến thức: slide học.

Buổi học tiếp theo: luyện bài tập (html/css) -> 70% điểm + 30% điểm (js) -> buổi học sau.





Tags:

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

5

(Dựa trên đánh giá ngày hôm nay)