By GokiSoft.com|
20:33 10/06/2020|
Học JS
[Share Code] Tìm hiểu hàm trong Javascript + Array trong Javascript + Object trong Javascript + Thao tác tag bằng Javascript
#function_in_javascript.html
<!DOCTYPE html>
<html>
<head>
<title>Functions & Array - Object in Javascript</title>
</head>
<body>
<h1>Welcome to learn Functions & Array - Object in Javascript</h1>
<script type="text/javascript">
//viet code o day (JS)
//Phan 1: Function
//tinh tong cac so nguyen chay tu 0 -> 10
var sum = 0;//luu ket qua tinh tong tu 0 -> 10
for (var i = 0; i <= 10; i++) {
sum += i;//sum = 0, sum = 0 + 1, sum = 0 + 1 + 2, ..., sum = 0 + 1 + 2 + ... + 10
}
document.writeln('<br/>Tong(0->10): ' + sum);
//tinh tong cac so nguyen chay tu 0 -> 100
sum = 0;//luu ket qua tinh tong tu 0 -> 100
for (var i = 0; i <= 100; i++) {
sum += i;//sum = 0, sum = 0 + 1, sum = 0 + 1 + 2, ..., sum = 0 + 1 + 2 + ... + 100
}
document.writeln('<br/>Tong (0->100): ' + sum);
//tinh tong cac so nguyen chay tu 0 -> 999
sum = 0;//luu ket qua tinh tong tu 0 -> 999
for (var i = 0; i <= 999; i++) {
sum += i;//sum = 0, sum = 0 + 1, sum = 0 + 1 + 2, ..., sum = 0 + 1 + 2 + ... + 999
}
document.writeln('<br/>Tong (0->999): ' + sum);
//Phan tich
//Code tren lap lai => khac nhau duy nhat o so 10, 100, 999
//Cau hoi: Lieu co cach nao => tai su dung lai code tren.
//Function => giup chung ta tai su dung code giong nhau
/**
* Cong thuc tong quan lien quan toi function
function function_name(param1, param2, param3, ...) {
// body...
//khong co gia tri tra ve
//co gia tri tra ve
}*/
function tinhtong(N) {
var sum = 0;//luu ket qua tinh tong tu 0 -> N
for (var i = 0; i <= N; i++) {
sum += i;//sum = 0, sum = 0 + 1, sum = 0 + 1 + 2, ..., sum = 0 + 1 + 2 + ... + N
}
document.writeln('<br/>Tong (0->'+N+'): ' + sum);
}
function tinhtong2(N) {
var sum = 0;//luu ket qua tinh tong tu 0 -> N
for (var i = 0; i <= N; i++) {
sum += i;//sum = 0, sum = 0 + 1, sum = 0 + 1 + 2, ..., sum = 0 + 1 + 2 + ... + N
}
return sum;
}
tinhtong(10)
tinhtong(100)
tinhtong(999)
var sum10 = tinhtong2(10)
document.writeln('<br/>sum10 = ' + sum10)
var sum100 = tinhtong2(100)
document.writeln('<br/>sum100 = ' + sum100)
//So sanh ket qua tinh tong cac so T100 = 0->100, T10 = 0->10
//In dong chu : T100 > T10
//Nguoc lai : T100 < T10
tinhtong(10)
tinhtong(100)
//voi cach nay => chung ta ko the so sanh dc T100 vs T10
var T100 = tinhtong2(100)
var T10 = tinhtong2(10)
if(T100 > T10) {
document.writeln("<br/>T100 > T10")
} else {
document.writeln("<br/>T100 <= T10")
}
</script>
</body>
</html>#object_array_in_javascript.html
<!DOCTYPE html>
<html>
<head>
<title>Array & Object in JS</title>
</head>
<body>
<h1>Array & Object in JS</h1>
<script type="text/javascript">
var t0, t1, t2, t3, t4, t5;
//xay dung chuong trinh quan ly 10, 100, 1000, 1000000 phan tu : int, string, float, ...
//Co giai phap => giup tao so phan tu 10, 100, 1000, ... => don gian hon
//Array => Giup giai quyet dc van de nay
//Phan 1: Tìm hiểu về Array
//Cach 1: Khai bao mang rong
var arr = []
//Cach 2: Khai bao mang rong
arr = new Array()
//Cach 3: Khai bao mang chua phan tu san
arr = [35, 33, 42, 10, 14, 19, 27, 44, 26, 31]
arr = new Array(35, 33, 42, 10, 14, 19, 27, 44, 26, 31)
console.log(arr)
//Phan 2: Them 1 phan tu moi vao mang
arr.push(100000)
console.log(arr)
//Phan 3: Thêm 1 phân tử mới vào 1 vị trí bất kỳ
//Vi dụ : chèn giá trị -200 vào vị trí có index = 2
arr.splice(2, 0, -200)
console.log(arr)
//Phần 4: Xóa 1 phần tử bất kỳ trong mảng
//Ví du: Xóa vị trí index = 2 khỏi mảng
arr.splice(2, 1)
console.log(arr)
//Xóa 3 phần tử bắt đầu từ vị trí index = 2
arr.splice(2, 3)
console.log(arr)
//Chú ý: JS => mảng của nó có thể quản lý nhiều kiểu dữ liệu khác nhau
//Mảng vừa quản lý số nguye, chuỗi, object => Tùy nghiệp vụ dự án
//Phần 2: Tìm hiểu về Object
//Tạo 1 object quấn sách => tên sách, giá sách, tác giả.
//Tên sách : Lập trình c, giá : 100000, Tác giả: Trần Văn Điệp
var book = {
'bookName': 'Lap trinh C',
'price': 100000,
'authorName': 'Tran Van Diep'
}
//phân tích: bookName, price, authorName => Gọi trường, field, key, thuoc tinh, properties
//Lap trình C, 100000, Tran Van Diep => Goi gia tri
//field => chuan coding convention => giong vs ten bien
console.log(book)
//Chúng tac có thể thao tác vs các field => để lấy dữ liệu tương ứng
console.log('Ten Sach: ' + book.bookName)
book.bookName = 'TEST Lap Trinh C'
console.log('Ten Sach: ' + book.bookName)
//Khai bao 1 mang object
var bookList = [
{
'bookName': 'Lap trinh C',
'price': 100000,'Tran Van Diep'
'authorName':
},{
'bookName': 'Lap trinh HTML/CSS',
'price': 300000,
'authorName': 'Tran Van A'
}
]
</script>
</body>
</html>#style.css
body {
background-color: rgb(255,255,240);
}
textarea {
scrollbar-3dlight-color: #C0C0C0;
scrollbar-shadow-color: silver;
scrollbar-arrow-color: black;
scrollbar-face-color: gray;
width: 80%;
float: left;
}
.img-help {
cursor: help;
}
.email-editor {
background-color: #FFFFDD;
}
#main {
width: 400px;
background-color: #DDFFEE;
padding-right: 10px;
padding-left: 10px;
margin: auto;
}
#help {
width: 550px;
height: 420px;
top: 10px;
background-color: #cfc;
padding-right: 10px;
padding-left: 10px;
display: none;
border: solid 2px #E4E7E7;
color: #303030;
margin: auto;
}
.close {
text-align: right;
color: blue;
cursor: pointer;
float: right;
}
ul {
/*https://res.cloudinary.com/ziczacgroup/image/upload/v1591359637/mtflqtbxgkt25cpy8k7i.jpg*/
list-style: square inside url('https://res.cloudinary.com/ziczacgroup/image/upload/v1591359637/mtflqtbxgkt25cpy8k7i.jpg');
}
span {
width: 20%;
float: left;
text-align: right;
padding-right: 10px;
}
input {
width: 80%;
float: left;
}
.item {
width: 100%;
display: flex;
margin-bottom: 15px;
padding-bottom: 15px;
}
button {
float: left;
margin: 0px;
margin-right: 10px;
}
.button-help {
float: right;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
font-size: 22px;
cursor: pointer;
}
.title {
float: left;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
font-size: 22px;
}#tags_javascript.html
<!DOCTYPE html>
<html>
<head>
<title>Tags HTML - Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Tao 1 form nhap thong tin sach => button add => luu du lieu vao 1 mang object -->
<div id="main">
<label class="title">Nhập Thông Tin Sách</label>
<form method="get">
<div class="item">
<span>Tên Sách: </span>
<input required="true" type="text" name="bookName" pattern="[a-z]{3}[A-Z]{6}" id="bookName_ID" class="email-editor">
</div>
<div class="item">
<span>Giá Bán: </span>
<input type="text" name="price" class="email-editor" id="price_ID">
</div>
<div class="item">
<span>Tác Giả: </span>
<input type="text" name="authorName" class="email-editor" id="authorName_ID">
</div>
<div class="item">
<span></span>
<button type="submit">Test Pattern</button>
<button type="button" onclick="addNewBook()">Lưu</button>
<button type="reset">Xóa</button>
</div>
</form>
</div>
<script type="text/javascript">
//Mang rong
var bookList = []
function addNewBook() {
console.log("add book")
// the lien quan ten sach
var bookNameTag = document.getElementById('bookName_ID')
// The lien quan toi gia sach
var priceTag = document.getElementById('price_ID')
// The lien quan toi ten tac gia
var authorNameTag = document.getElementById('authorName_ID')
// Thao tac len tag
console.log(bookNameTag.name)
//lay gia tri nhap
var bookName = bookNameTag.value
var price = priceTag.value
var authorName = authorNameTag.value
var book = {
'name': bookName,
'price': price,
'authorName': authorName
}
// console.log(book)
bookList.push(book)
console.log(bookList)
}
</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)