[Share Code] Tìm hiểu JS - Thao tác thẻ HTML bằng JS - Lập trình javascript
Nội dung:
- Core: Buổi đâu hôm này.
- khai bao biến, toán tử, biểu thức
- mệnh đề điều kiện
- vòng lặp
- function
- Object & Array trong JS => kiến thức này mới so vs C
- Thao tác lên Tags:
- Mapping a tags => bằng JS (JS thao tác lên tag của HTML)
- Xử lý sự kiện trong JS
- Chèn thêm html vào website bằng JS
- Kiến thức mở rộng
- LocalStorage: Khá quan trọng trong lập trình web
=====================================================================
<!DOCTYPE html>
<html>
<head>
<title>Javascript tutorial</title>
<meta charset="utf-8">
</head>
<body>
<h1 style="text-align: center; color: white; background-color: blue" class="class_welcome" id="id_welcome" name="name_welcome" onclick="showAlert()">Welcome to learn Javascript</h1>
<h1 style="text-align: center; color: white; background-color: blue" class="class_welcome" id="id_welcome_2" name="name_welcome">Welcome to learn Javascript</h1>
<input type="text" name="fullname" id="fullname_id" placeholder="Enter name" size="50" value="" onchange="changeData()" onkeyup="updata()">
<br/>
<br/><br/><br/>
<script type="text/javascript">
function showAlert() {
alert('Xin chao!!!')
}
function changeData() {
var fullnameTag = document.getElementById('fullname_id')
console.log(fullnameTag.value)
}
function updata() {
var fullnameTag = document.getElementById('fullname_id')
console.log(fullnameTag.value)
//chen du lieu vao 1 the
var h1Tag = document.getElementById('id_welcome')
// h1Tag.innerHTML = fullnameTag.value
h1Tag.innerHTML += '<br/>' + fullnameTag.value
}
var h1Tag = document.getElementById('id_welcome')
console.log(h1Tag)
console.log(h1Tag.id)
console.log(h1Tag.name)
console.log(h1Tag.style)
h1Tag.style.color = 'red'
h1Tag.style.backgroundColor = "green"
var h1List = document.getElementsByClassName('class_welcome')
console.log(h1List)
for (var i = 0; i < h1List.length; i++) {
h1List[i].style.color = 'pink'
}
var fullnameTag = document.getElementById('fullname_id')
// fullnameTag.value = "TRAN VAN DIEP"
console.log(fullnameTag.value)
//Cach bieu dien object trong JS
var std = {
"name": "TRAN VAN A",
"age": 20,
"email": "tranvana@gmail.com",
"gender": "Nam"
}
//truy xuat du lieu
console.log(std.name)
//Thay doi du lieu
std.age = 65
console.log(std.age)
//Array trong JS
//Phan 1: Khai bao 1 mang rong
var arr1 = []
var arr2 = [1, 6, 3]
//Phan 2: Them 1 phan tu moi vao mang
arr1.push(6)
arr1.push(2)
arr1.push(8)
console.log(arr1)
//Phan 3: Truy cap vao cac phan tu trong mang
//Length: arr1.length
//Index: 0 -> length - 1
console.log("Length: " + arr1.length)
console.log(arr1[1])
//duyet qua cac phan tu
for(i=0; i<arr1.length; i++) {
console.log("value -> " + arr1[i])
}
//Phan 4: Xoa cac phan tu trong mang
arr1.splice(1, 0, 10000, 90000)
console.log(arr1)
//Ung dung mang -> quan ly danh sach sinh vien
var studentList = []
var s1 = {
"name": "TRAN VAN A",
"age": 20,
"email": "tranvana@gmail.com",
"gender": "Nam"
}
studentList.push(s1)
s2 = {
"name": "TRAN VAN B",
"age": 26,
"email": "tranvanb@gmail.com",
"gender": "Nam"
}
studentList.push(s2)
console.log(studentList)
</script>
<table border="1" cellspacing="3" cellpadding="3">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<script type="text/javascript">
for (i=0;i<studentList.length;i++) {
document.write(`<tr>
<td>${i+1}</td>
<td>${studentList[i].name}</td>
<td>${studentList[i].age}</td>
<td>${studentList[i].email}</td>
<td>${studentList[i].gender}</td>
</tr>`)
document.write('<tr>'+
'<td>'+(i+1)+'</td>'+
'<td>'+studentList[i].name+'</td>'+
'<td>'+studentList[i].age+'</td>'+
'<td>'+studentList[i].email+'</td>'+
'<td>'+studentList[i].gender+'</td>'+
'</tr>')
}
</script>
</tbody>
</table>
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
![nguyen hoang viet [community,C2009I]](https://www.gravatar.com/avatar/d2766fccea69cebc93358554d1a18e65.jpg?s=80&d=mm&r=g){kind=avatar}
nguyen hoang viet
2020-12-17 09:03:16
<!DOCTYPE html>
<html>
<head>
<title>Sinh vien</title>
</head>
<body>
<script type="text/javascript">
studentlist = [];
var s1 = {
"name": "TRAN VAN A",
"age": 20,
"email": "tranvana@gmail.com",
"gender": "Nam"
}
var s2 = {
"name": "TRAN VAN B",
"age": 19,
"email": "tranvanb@gmail.com",
"gender": "Nam"
}
var s3 = {
"name": "TRAN VAN C",
"age": 21,
"email": "tranvanc@gmail.com",
"gender": "Nam"
}
var s4 = {
"name": "TRAN VAN D",
"age": 20,
"email": "tranvand@gmail.com",
"gender": "Nam"
}
var s5 = {
"name": "TRAN VAN E",
"age": 22,
"email": "tranvane@gmail.com",
"gender": "Nam"
}
var s6 = {
"name": "TRAN VAN F",
"age": 21,
"email": "tranvanf@gmail.com",
"gender": "Nam"
}
var s7 = {
"name": "TRAN VAN G",
"age": 20,
"email": "tranvang@gmail.com",
"gender": "Nam"
}
var s8 = {
"name": "TRAN VAN H",
"age": 19,
"email": "tranvanh@gmail.com",
"gender": "Nam"
}
var s9 = {
"name": "TRAN VAN I",
"age": 18,
"email": "tranvani@gmail.com",
"gender": "Nam"
}
var s10 = {
"name": "TRAN VAN K",
"age": 23,
"email": "tranvank@gmail.com",
"gender": "Nam"
}
var s11 = {
"name": "TRAN VAN L",
"age": 24,
"email": "tranvanl@gmail.com",
"gender": "Nam"
}
var s12 = {
"name": "TRAN VAN M",
"age": 21,
"email": "tranvanm@gmail.com",
"gender": "Nam"
}
var s13 = {
"name": "TRAN VAN N",
"age": 22,
"email": "tranvann@gmail.com",
"gender": "Nam"
}
var s14 = {
"name": "TRAN VAN O",
"age": 18,
"email": "tranvano@gmail.com",
"gender": "Nam"
}
var s15 = {
"name": "TRAN VAN P",
"age": 19,
"email": "tranvanp@gmail.com",
"gender": "Nam"
}
var s16 = {
"name": "TRAN VAN Q",
"age": 20,
"email": "tranvanq@gmail.com",
"gender": "Nam"
}
var s17 = {
"name": "TRAN VAN R",
"age": 21,
"email": "tranvanr@gmail.com",
"gender": "Nam"
}
var s18 = {
"name": "TRAN VAN S",
"age": 20,
"email": "tranvans@gmail.com",
"gender": "Nam"
}
var s19 = {
"name": "TRAN VAN T",
"age": 23,
"email": "tranvant@gmail.com",
"gender": "Nam"
}
var s20 = {
"name": "TRAN VAN U",
"age": 22,
"email": "tranvanu@gmail.com",
"gender": "Nam"
}
studentlist.push(s1)
studentlist.push(s2)
studentlist.push(s3)
studentlist.push(s4)
studentlist.push(s5)
studentlist.push(s6)
studentlist.push(s7)
studentlist.push(s8)
studentlist.push(s9)
studentlist.push(s10)
studentlist.push(s11)
studentlist.push(s12)
studentlist.push(s13)
studentlist.push(s14)
studentlist.push(s15)
studentlist.push(s16)
studentlist.push(s17)
studentlist.push(s18)
studentlist.push(s19)
studentlist.push(s20)
var i, start, min_index, temp;
for (start = 0; start < 19; start++) {
min_index = start;
for (i = start+1; i < 20; i++){
if (studentlist[i].age < studentlist[min_index].age) {
min_index = i;
}
}
temp = studentlist[start];
studentlist[start] = studentlist[min_index];
studentlist[min_index] = temp;
}
</script>
<table border="1" cellpadding="5" cellspacing="3">
<thead>
<tr>
<th>STT</th>
<th>Ten</th>
<th>Tuoi</th>
<th>Dia Chi</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<script type="text/javascript">
for (i=0;i<studentlist.length;i++) {
document.write(`<tr>
<td>${i+1}</td>
<td>${studentlist[i].name}</td>
<td>${studentlist[i].age}</td>
<td>${studentlist[i].email}</td>
<td>${studentlist[i].gender}</td>
</tr>`)
}
</script>
</tbody>
</table>
</body>
</html>
