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)
