Trong phần trước mình đã làm và giải thích các thuộc tính từ lab 1, 2, 3, 4, để nối tiếp phần trước thì đây là phần tiếp theo, phần này mình sẽ làm tiếp tục các lab còn lại tử lab 5, 6, 7, 8. Vậy là full lab của lập trình cơ sở với javasrcipt rồi.
Tất cả cách làm của mình để sát với slider mà các bạn học và có lab có lời giải sẵn mình chỉ copy ra và giải thích kỹ lại cho các bạn thôi nhé, còn lab nào không có lời giải trong bài là mình làm.
Lab 5 lập trình cở sở với javascript
Lab5 – bài 1: Yêu cầu bài.
Xây dựng trang web cho phép đặt mua iPhone9 với số lượng nhập từ bàn phím có giao diện như sau.
Trong đó:
label#prochứa tên sản phẩm ở phần nội dung và đơn giá ở thuộc tính data-price.
input#qty chứa số lượng sản phẩm nhập vào từ người dùng
span#name và span#amount được sử dụng để hiển thị tên sản phẩm và thành tiền (đơn giá x số lượng) khi nhấp nút [OK].
Viết mã javascript sao cho khi nhấp nút [OK] thì hiển thị tên hàng hóa vào span#namevà thành tiền vào span#amount.
Thêm: các bạn có thể custom giao diện theo ý muốn từ class đến id nhé.
File html.
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_5 Bài_1 Fpoly WEB1043</title>
</head>
<body>
<div class="group_input">
<label id="pro" data-price="1950" for="iPhone">iPhone 9</label>
<input type="text" id="qty" />
<button>Ok</button>
</div>
<hr />
<h3>Name: <span id="name">?</span></h3>
<h3>Amount: <span id="amount">?</span></h3>
</body>
</html>
copy
File js.
let label = document.getElementById('pro');
let inputAmount = document.getElementById('qty');
let button = document.getElementsByTagName('button');
let name = document.getElementById('name');
let amount = document.getElementById('amount');
function display() {
name.innerHTML = label.innerText;
amount.innerHTML = label.getAttribute('data-price') * inputAmount.value;
}
button[0].onclick = function () {
display();
};
Lý giải: “document.getEtlementById()” bạn có thể hiểu đây là lấy phần tử theo id nhé, ở đây id là “pro”. “document.getEtlementByTagName()” là lấy phần tử theo tên của thẻ. “getAttribute()” lấy giá trị attribute theo tên.
Lab5 – bài 2: Yêu cầu bài.
Xây dựng trang web ban-hang.html được mô tả như hình sau:
Mới chạy lên:
Hiển thị danh mục hàng hóa, giỏ hàng rỗng, tổng số tiền là 0.
Nhấp [Thêm]:
Thêm mặt hàng được chọn vào giỏ hàng, tính tổng tiền.
Nhấp [Xóa]
Xóa mặt hàng khỏi giỏ hàng, tính tổng tiền.
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_5 Bài_2 Fpoly WEB1043</title>
</head>
<body>
<h2>Danh mục hàng hóa</h2>
<table class="product">
<tbody>
<tr>
<td>iphone 9</td>
<td>$2700</td>
<td>
<button>Thêm</button>
</td>
</tr>
<tr>
<td>Sumsung Star</td>
<td>$1500</td>
<td>
<button>Thêm</button>
</td>
</tr>
<tr>
<td>Nokia 2020</td>
<td>$1200</td>
<td>
<button>Thêm</button>
</td>
</tr>
<tr>
<td>sony Xperia</td>
<td>$1700</td>
<td>
<button>Thêm</button>
</td>
</tr>
</tbody>
</table>
<h2>Giỏ hàng của bạn</h2>
<p class="emty">Giỏ Hàng Trống</p>
<table class="cart"></table>
<h2>Tổng số tiền <span class="price">?</span></h2>
</body>
</html>
copy
File css
th,
td {
border: 1px solid #ccc;
padding: 5px 10px;
}
copy
File js
let btn_add = document.querySelectorAll('button');
let table_cart = document.querySelector('.cart');
let emty = document.querySelector('.emty');
let price = document.querySelector('.price');
function addProduct(item) {
emty.style.display = 'none';
let row = item.parentElement.parentElement.cloneNode(true);
let element_btn = row.querySelector('button');
element_btn.innerText = 'Xóa';
element_btn.setAttribute('onclick', 'removeProduct(this)');
table_cart.appendChild(row);
tinhTien();
}
for (const item of btn_add) {
item.onclick = function () {
addProduct(this);
};
}
function removeProduct(item) {
table_cart.removeChild(item.parentElement.parentElement);
tinhTien();
}
function tinhTien() {
let tr = table_cart.getElementsByTagName('tr');
var tong = 0;
for (const item of tr) {
let td = item.getElementsByTagName('td');
let price = td[1].innerText.substr(1);
tong += price * 1;
}
price.innerText = `$${tong}`;
}
Lý giải: “document.queryselector()” lấy phần tử theo id, class, tagname, attribute, các bạn dùng theo kiểu selector trong css nhé và nó trả về 1 phần tử. “document.queryselectorAll()” nó cũng tương tương tự như cái trên chỉ khác nó lấy tất cả phẩn tử có cùng class, id, tagname trả về 1 mảng. “cloneNode()” sẽ copy lại phần tử đang trỏ đến. “setAttribute()” đúng như cái tên nó sẽ set attribute bào phần tử mà bạn đang trỏ đến. “appendChild()” "appendChild" là một phương thức của đối tượng "Node" trong JavaScript, được sử dụng để chèn thêm một Node con vào cuối của Node hiện tại. "removeChild" là một phương thức trong JavaScript để loại bỏ một nút con khỏi một nút cha. Khi được gọi, phương thức này sẽ xóa nút con cần loại bỏ khỏi nút cha mà nó được gọi từ đó.”substr()”phương pháp trích xuất một phần của một chuỗi.
Lab 6 lập trình cở sở với javascript
Lab6 – bài 1: Yêu cầu bài.
Tạo trang web có giao diện và xử lý như sau:
File html.
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_6 Bài_1 Fpoly WEB1043</title>
</head>
<body>
<div class="container">
<div class="title">Title #1</div>
<div class="myText">Just some text #1</div>
<div class="title">Title #2</div>
<div class="myText">Just some text #2</div>
<div class="title">Title #3</div>
<div class="myText">Just some text #3</div>
</div>
</body>
</html>
copy
File css
.active {
display: block !important;
}
.myText {
display: none;
}
.title {
font-size: 1.5em;
background-color: #ddd;
cursor: pointer;
}
copy
File js
const menus = document.querySelectorAll('.title');
const openText = document.querySelectorAll('.myText');
menus.forEach((el) => {
el.addEventListener('click', (e) => {
remover();
el.nextElementSibling.classList.toggle('active');
});
});
function remover() {
openText.forEach((ele) => {
ele.classList.remove('active');
});
}
Lý giải: “addEventListenner()” lắng nghe sự kiện của 1 phần tử. classList là một thuộc tính của đối tượng Element trong JavaScript, nó được sử dụng để truy cập và thao tác các class của một phần tử. Bằng cách sử dụng các phương thức trong classList, chúng ta có thể thêm, xóa, hoặc kiểm tra sự tồn tại của một class trên một phần tử, thêm “add()”, xóa “remove()”, “toggle” là một phương thức trong JavaScript cho phép thêm hoặc xoá một lớp (class) trong một phần tử HTML. Khi được gọi, phương thức này sẽ kiểm tra xem lớp có tồn tại trong phần tử đang xét hay không. Nếu lớp này đã tồn tại, phương thức sẽ xoá lớp đó. Nếu lớp này chưa tồn tại, phương thức sẽ thêm lớp đó vào phần tử đang xét.
Lab6 – bài 2: Yêu cầu bài.
Tạo trang web cho phép 2 người chơi trò tictactoe có giao diện như sau:
Mô tả hoạt động:
Hiển thị 9 nút trống.
Người chơi nhấp vào nút trống .
Lượt lẻ: tạo nhãn X và nền xanh (aqua).
Lượt chẵn: tạo nhãn O nền vàng.
Vô hiệu hóa nút được click để không click được nữa .
Nếu tổng click 8 lần thì báo kết thúc và load lại trang web .
File html.
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_6 Bài_2 Fpoly WEB1043</title>
</head>
<body>
<div class="tictactoe">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</body>
</html>
copy
File css
.tictactoe {
width: 300px;
display: flex;
flex-wrap: wrap;
}
button {
width: calc(100% / 3 - 6px);
height: 96px;
background-color: #ccc;
margin: 2px;
border: none;
cursor: pointer;
color: #fff;
font-size: 30px;
font-weight: 700;
}
copy
File js
let flat = true;
let counter = 0;
let btn = document.querySelectorAll('button');
for (let index = 1; index <= btn.length; index++) {
const element = btn[index - 1];
element.addEventListener('click', () => {
counter++;
if (flat) {
element.style.backgroundColor = 'red';
element.innerText = 'X';
flat = false;
} else {
element.style.backgroundColor = 'blue';
element.innerText = 'O';
flat = true;
}
if (counter == 8) {
confirm('Game Over');
location.reload();
}
element.style.pointerEvents = 'none';
});
}
copy
Lý giải: “confirm” hiển thị một hộp thoại có thông báo, nút OK và nút Hủy, phương thức trả về true nếu người dùng nhấp vào "OK", nếu không thì false. "location.reload" là một phương thức JavaScript được sử dụng để tải lại lại trang web hiện tại đang hiển thị. Khi được sử dụng, trang web sẽ được tải lại và hiển thị lại từ đầu. “style.backgroundColor” thêm phần css bằng js.
Lab6 – bài 3: Yêu cầu bài.
Thực hiện lại bài ví dụ demo image rollover và slideshow hình ảnh trong slide bài giảng:
Đối với slideshow:
Tối thiểu 5 hình ảnh trong slideshow.
Dùng javascript xử lý đầy đủ các control sau: first, last, prev, next.
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_6 Bài_3 Fpoly WEB1043</title>
</head>
<body onload="loadImage()">
<div class="hover_image">
<img src="./image.jpg(ảnh cảu bạn)" />
</div>
<div class="slider">
<div class="wrapper_slider">
<img
src="./image1.jpg(ảnh cảu bạn)"
alt=""
/>
</div>
<div class="wrapper_btn">
<button class="first">first</button>
<button>prev</button>
<button>next</button>
<button>last</button>
</div>
</div>
</body>
</html>
copy
File css
.hover_image {
text-align: center;
}
.hover_image img {
width: 500px;
height: 300px;
border-radius: 10px;
object-fit: cover;
}
.wrapper_slider {
margin-top: 50px;
text-align: center;
}
img {
border-radius: 10px;
width: 500px;
height: 300px;
object-fit: cover;
}
.wrapper_btn {
text-align: center;
margin-top: 10px;
}
.wrapper_btn button {
margin: 0 10px;
padding: 10px 30px;
border-radius: 5px;
border: none;
cursor: pointer;
}
copy
File js
let img_hover = document.querySelector('.hover_image img');
let img_slider = document.querySelector('.wrapper_slider img');
let load_image = new Image();
let link_img =
'image2.jpg(ảnh của bạn)';
let btn_first = document.querySelectorAll('button');
img_hover.addEventListener('mouseenter', () => {
img_hover.setAttribute('src', link_img);
});
img_hover.addEventListener('mouseleave', () => {
img_hover.setAttribute('src', 'image3.jpg(ảnh của bạn)');
});
function loadImage() {
load_image.src = link_img;
arrayImage.forEach((element) => {
let load_image = new Image();
load_image.src = element;
});
}
let arrayImage = [
''image4.jpg(ảnh của bạn)'',
''image5.jpg(ảnh của bạn)'',
''image6.jpg(ảnh của bạn)'',
''image7.jpg(ảnh của bạn)'',
''image8.jpg(ảnh của bạn)'',
];
let currentIndex = -1;
btn_first.forEach((element) => {
element.addEventListener('click', () => {
let text = element.innerText;
switch (text) {
case 'first':
currentIndex = 0;
img_slider.setAttribute('src', arrayImage[currentIndex]);
break;
case 'prev':
if (currentIndex > 0) {
currentIndex--;
img_slider.setAttribute('src', arrayImage[currentIndex]);
}
break;
case 'next':
if (currentIndex < arrayImage.length - 1) {
currentIndex++;
img_slider.setAttribute('src', arrayImage[currentIndex]);
}
break;
case 'last':
currentIndex = arrayImage.length - 1;
console.log(currentIndex);
img_slider.setAttribute('src', arrayImage[currentIndex]);
break;
default:
break;
}
});
});
copy
Lý giải: “new Image()” đây là một đối tưởng tạo hình ảnh trong javascript, để tạo một đối tượng hình ảnh mới. Bạn có thể sử dụng nó để tạo một hình ảnh mới trong trang web của mình, hoặc để thực hiện các thao tác khác với hình ảnh như chỉnh sửa, hiển thị và tải xuống.
Lab6 – bài 4: Yêu cầu bài.
Xây dựng trang web được mô tả như hình sau:
Khi trang web vừa load , nhấp vào ô màu đỏ càng nhanh càng tốt khi nó xuất hiện.
Ô màu đỏ đặt ngẫu nhiên trong div (vùng box đen).
Xử lý sự kiện: theo dõi thời gian bắt đầu và nhấp chuột để tính toán thời lượng (duration) của sự kiện click.
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_6 Bài_4 Fpoly WEB1043</title>
</head>
<body>
<div class="output"></div>
<div class="message"></div>
</body>
</html>
copy
File css
.output {
width: 500px;
height: 500px;
border: 1px solid black;
margin: auto;
text-align: center;
}
.box {
width: 50px;
height: 50px;
position: relative;
top: 50px;
left: 20%;
background-color: red;
}
.message {
text-align: center;
padding: 10px;
font-size: 1.3em;
}
copy
File js
const output = document.querySelector('.output');
const message = document.querySelector('.message');
message.textContent = 'Press to Start';
const box = document.createElement('div');
const game = {
timer: 0,
start: null,
};
box.classList.add('box');
output.append(box);
function ranNum(max) {
return Math.floor(Math.random() * max);
}
function addBox() {
message.textContent = 'Click it...';
game.start = new Date().getTime();
box.style.display = 'block';
box.style.left = ranNum(450) + 'px';
box.style.top = ranNum(450) + 'px';
}
box.addEventListener('click', () => {
box.textContent = '';
box.style.display = 'none';
game.timer = setTimeout(addBox, ranNum(3000));
if (!game.start) {
message.textContent = 'Loading....';
} else {
const cur = new Date().getTime();
const dur = (cur - game.start) / 1000;
message.textContent = `It took ${dur} seconds to click`;
}
});
Lý giải: “document.createElement()” là một phương thức trong JavaScript, được sử dụng để tạo một phần tử mới trong HTML.
Lab 7 lập trình cở sở với javascript
Lab7 – bài 1: Yêu cầu bài.
Thực hiện lại bài ví dụ demo drag & drop element trong slide bài giảng:
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_7 Bài_1 Fpoly WEB1043</title>
</head>
<body>
<div class="box" ondrop="dDrop()" ondragover="nDrop()">
1
<div id="dragme" draggable="true" ondragstart="dStart()" draggable="true">Drag Me Please!</div>
</div>
<div class="box" ondrop="dDrop()" ondragover="nDrop()">2</div>
</body>
</html>
copy
File css
.box {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: white;
}
.red {
background-color: red;
}
copy
File js
let holderItem;
function dStart() {
holderItem = event.target;
}
function nDrop() {
event.preventDefault();
}
function dDrop() {
event.preventDefault();
if (event.target.className == 'box') {
event.target.appendChild(holderItem);
}
}
copy
Lý giải: “setInterva()l” sử dụng để thực hiện một hành động lặp lại theo khoảng thời gian được chỉ định. Nó cho phép bạn chạy một hàm nào đó trong một khoảng thời gian cố định và được sử dụng rộng rãi để thực hiện các tác vụ như tải lại trang tự động, hiện thị thông báo hoặc cập nhật các dữ liệu trong ứng dụng web. “clearInterval()” được sử dụng để xóa hoặc hủy một bộ đếm (counter) được khởi tạo bởi hàm “seInterval()”.
Lab7 – bài 2: Yêu cầu bài.
Thực hiện bài ví dụ như hình minh hoạ và hướng dẫn:
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_7 Bài_2 Fpoly WEB1043</title>
</head>
<body>
<button onclick="toTheRight()">Go right</button>
<div id="block"></div>
</body>
</html>
copy
File css
div {
background-color: purple;
width: 100px;
height: 100px;
position: absolute;
}
File js.
//js
function toTheRight() {
let b = document.getElementById('block');
let x = 0;
setInterval(function () {
if (x === 600) {
clearInterval();
} else {
x++;
b.style.left = x + 'px';
}
}, 2);
}
copy
Lý giải: “setInterva()l” sử dụng để thực hiện một hành động lặp lại theo khoảng thời gian được chỉ định. Nó cho phép bạn chạy một hàm nào đó trong một khoảng thời gian cố định và được sử dụng rộng rãi để thực hiện các tác vụ như tải lại trang tự động, hiện thị thông báo hoặc cập nhật các dữ liệu trong ứng dụng web. “clearInterval()” được sử dụng để xóa hoặc hủy một bộ đếm (counter) được khởi tạo bởi hàm “seInterval()”.
Lab7 – bài 3: Yêu cầu bài.
Thực hiện lại bài ví dụ form submission và thêm nội dung nâng cao như sau:
Code file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_7 Bài_3 Fpoly WEB1043</title>
</head>
<body>
<form action="anotherpage.html" method="get">
<input required type="text" name="firstName" placeholder="First name" />
<input type="text" name="lastName" placeholder="Last name" />
<input type="text" name="age" placeholder="Age" />
<button type="submit">Submit</button>
</form>
</body>
</html>
copy
Code css cho file index.html
form {
width: 200px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
input {
margin: 5px 0;
padding: 3px 5px;
}
copy
Code file anotherpage.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
Nhận dữ liệu từ file index.
</body>
</html>
copy
Code js cho file anotherpage.html
Cách 1:
let q = window.location.search;
let params = new URLSearchParams(q);
for (const item of params) {
console.log(item);
}
copy
Cách 2:
let q = window.location.search;
let params = new URLSearchParams(q);
let firstName = params.get('firstName');
let lastName = params.get('lastName');
let age = params.get('age');
console.log({ firstName, lastName, age });
copy
Lý giải: Trước tiên các bạn cần tạo 2 file html như trên mình đã tạo, khi các bạn tạo form thì hãy action tại file anotherpage.html để bên file html có thể nhận được nhé. window.location được sử dụng trong JavaScript để truy cập URL hiện tại của trang web hoặc để điều hướng đến một URL mới. Nó cung cấp các thuộc tính và phương thức để truy cập thông tin về URL, bao gồm domain, path, hash và query parameters. new URLSearchParams là một constructor của JavaScript dùng để tạo ra một đối tượng URLSearchParams đại diện cho query parameters được truyền qua URL. Với đối tượng này, ta có thể thêm hoặc xóa các query parameter và tạo chuỗi truy vấn mới để gửi HTTP request. Mình có làm 2 cái cho các bạn tham khảo.
Lab7 – bài 4: Yêu cầu bài.
Start rating system.
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_7 Bài_4 Fpoly WEB1043</title>
</head>
<body>
<ul class="stars">
<li class="star">✭</li>
<li class="star">✭</li>
<li class="star">✭</li>
<li class="star">✭</li>
<li class="star">✭</li>
</ul>
<div class="output"></div>
</body>
</html>
copy
File css
.stars ul {
list-style-type: none;
padding: 0;
}
.star {
font-size: 2em;
color: #ddd;
display: inline-block;
cursor: pointer;
}
.orange {
color: orange;
}
.output {
background-color: #ddd;
}
copy
File js
const starsUL = document.querySelector('.stars');
const output = document.querySelector('.output');
const stars = document.querySelectorAll('.star');
stars.forEach((star, index) => {
star.starValue = index + 1;
star.addEventListener('click', starRate);
});
function starRate(e) {
output.innerHTML = `You Rated this ${e.target.starValue} stars`;
stars.forEach((star, index) => {
if (index < e.target.starValue) {
star.classList.add('orange');
} else {
star.classList.remove('orange');
}
});
}
Lý giải: “forEach” là một phương thức có sẵn trong JavaScript cho phép lặp lại các phần tử của một mảng và thực hiện một hàm cho mỗi phần tử đó. Còn lại mấy cái khác mình có giải thích lên bên trên.
Lab7 – bài 5: Yêu cầu bài.
Viết mã kiểm lỗi cho form đặt hàng có giao diện như sau:
Người dùng điền thông tin vào form và nhấp nút [Đặt mua].
Nếu chọn nơi nhận hàng là Ngoại thành thì hiển thị Phí vận chuyển.
Yêu cầu kiểm lỗi khi nhấp nút đặt mua.
Sản phẩm và đơn giá không được để trống.
Đơn giá phải là số dương.
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_7 Bài_5 Fpoly WEB1043</title>
</head>
<body>
<h1>Đặt hàng</h1>
<form onsubmit="kiemTra()">
<div class="group-input">
<label for="">Sản Phẩm: </label>
<input type="text" id="san_pham" />
</div>
<div class="group-input">
<label for="">Loại: </label>
<select name="" id="loai">
<option checked value="" hidden></option>
<option value="1">loại 1</option>
<option value="2">loại 2</option>
<option value="3">loại 3</option>
</select>
</div>
<div class="group-input">
<label for="">Đơn giá: </label>
<input type="number" id="don_gia" />
</div>
<div class="group-input">
<label for="">Nơi nhận hàng: </label>
<input type="radio" name="dia_chi" id="noithanh" data-check="1" />
<label for="noithanh">Nội thành</label>
<input type="radio" name="dia_chi" id="ngoaithanh" data-check="" />
<label for="ngoaithanh">Ngoại thành</label>
</div>
<div style="display: none" class="group-input" id="phi_vc">
<label for="">Phí vận chuyển: </label>
<input type="number" value="100000" disabled />
</div>
<hr />
<button type="submit">Đặt mua</button>
</form>
</body>
</html>
copy
File js
function hienThi(visible) {
let phi_vc = document.getElementById('phi_vc');
phi_vc.style.display = visible ? 'none' : 'block';
}
let vanChuyen = document.querySelectorAll('input[name="dia_chi"]');
vanChuyen.forEach((element) => {
element.addEventListener('click', function () {
let data_check = element.getAttribute('data-check');
hienThi(data_check);
});
});
function kiemTra() {
let sp = document.getElementById('san_pham');
if (sp.value.length == 0) {
alert('Vui lòng nhập tên sản phẩm!');
return;
}
let gia = document.getElementById('don_gia');
if (isNaN(gia.value)) {
alert('Vui lòng nhập số!');
return;
} else if (parseFloat(gia.value) <= 0) {
alert('Vui lòng nhập số dương!');
return;
}
let loai = document.getElementById('loai');
if (loai.value.length == 0) {
alert('Vui lòng chọn loại sản phẩm!');
return;
}
let radios = document.getElementsByName('dia_chi');
if (!radios[0].checked && !radios[1].checked) {
alert('Vui lòng chọn nơi nhận hàng!');
return;
}
alert('Chúc mừng bạn đã nhập đúng');
}
Lý giải: “isNaN()” là một hàm được sử dụng để kiểm tra xem giá trị có
phải là NaN (không phải số) hay không. Hàm này trả về giá trị Boolean,
trả về true nếu giá trị là NaN và false nếu giá trị không phải là NaN.
Phương thức parseFloat() được sử dụng để chuyển đổi một chuỗi thành
số thực (hoặc số thập phân).
Lab8 lập trình cở sở với javascript
Lab8 – bài 1: Yêu cầu bài.
Thực hiện lại bài ví dụ demo upload file trong slide bài giảng:
Upload 1 file.
Upload nhiều file.
Đầu tiên là code cho upload 1 file.
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_8 Bài_1 Fpoly WEB1043</title>
</head>
<body>
<input type="file" onchange="uploadFile(this.files)" />
<div id="message"></div>
</body>
</html>
copy
File js
let message = document.getElementById('message');
function uploadFile(files) {
message.innerText = files[0].name;
}
copy
Code cho upload nhiều file.
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_8 Bài_1 Fpoly WEB1043</title>
</head>
<body>
<input type="file" multiple onchange="uploadFile1(this.files)" />
<div id="message1"></div>
</body>
</html>
copy
File js
let message1 = document.getElementById('message1');
function uploadFile1(files) {
for (let i = 0; i < files.length; i++) {
message1.innerHTML += files[i].name + '<br>';
}
}
copy
Lý giải: "this.files" là một trong những thuộc tính của đối tượng trong
JavaScript, nó chứa danh sách các tệp đang được xử lý bởi trình duyệt
của người dùng. Bạn có thể sử dụng nó để lấy danh sách các tệp mà
người dùng đã chọn để tải lên trong một trang web.
Lab8 – bài 2: Yêu cầu bài.
Thực hiện bài ví dụ demo geolocation trong slide bài giảng:
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_8 Bài_2 Fpoly WEB1043</title>
</head>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
</body>
</html>
copy
File js
let x = document.getElementById('demo');
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = 'Geolocation is not supported by this browser.';
}
}
function showPosition(position) {
x.innerHTML = 'Latitude: ' + position.coords.latitude + '<br>Longitude: ' + position.coords.longitude;
}
Lý giải: navigator.geolocation.getCurrentPosition là một hàm JavaScript trong API Geolocation của trình duyệt, cho phép trang web yêu cầu truy vấn vị trí địa lý của người dùng thông qua trình duyệt. Khi hàm này được gọi, trình duyệt sẽ yêu cầu sự cho phép của người dùng trước khi truy cập thông tin vị trí của họ. Nếu sự cho phép được cấp, trình duyệt sẽ trả về một đối tượng vị trí địa lý bao gồm tọa độ kinh độ và vĩ độ của người dùng.
Lab8 – bài 3: Yêu cầu bài.
Thực hiện lại bài ví dụ demo audio/video DOM như trong slide bài giảng.
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_8 Bài_3 Fpoly WEB1043</title>
</head>
<body>
<div id="container">
<h1>Video 4K</h1>
<div id="player-container">
<video id="myplayer" width="640" src="./video.mp4" height="360">
<source src="./video.mp4" type="video/mp4" />
</video>
<div id="controls">
<button onclick="playPause()">Play/Pause</button>
<button onclick="stopVideo ()">Stop</button>
<button onclick="replayVideo ()">Replay</button>
<button onclick="increaseVolume ()">Volume (+)</button>
<button onclick="decreaseVolume ()">Volume (-)</button>
<button onclick="muteVolume ()">Mute/Unmute</button>
</div>
</div>
</div>
</body>
</html>
copy
File css
#container {
text-align: center;
}
video {
border-radius: 20px;
}
#controls {
margin-top: 20px;
}
copy
File js
const video = document.querySelector('video');
video.currentTime = 5;
function playPause() {
video.paused ? video.play() : video.pause();
}
function stopVideo() {
video.pause();
if (video.currentTime) {
video.currentTime = 0;
}
}
function replayVideo() {
video.currentTime = 0;
video.play();
}
function increaseVolume() {
if (video.volume < 1) {
video.volume = parseFloat(video.volume + 0.1).toFixed(1);
}
}
function decreaseVolume() {
if (video.volume > 0) {
video.volume = parseFloat(video.volume - 0.1).toFixed(1);
}
}
function muteVolume() {
if (video.muted) {
video.muted = false;
} else {
video.muted = true;
}
}
copy
Lý giải: Về html mình sẽ không nói nhiều, video.paused là một thuộc tính trong HTML và JavaScript để kiểm tra trạng thái phát video có đang bị tạm dừng hay không. Khi thuộc tính này được đặt là "true", video đang bị tạm dừng, và khi được đặt là "false", video đang được phát tiếp tục.”play()” là một phương thức JavaScript được sử dụng để chạy video trên trang web của bạn.”play()” video.pause() là một phương thức JavaScript được sử dụng để tạm dừng video. Khi được gọi, phương thức này sẽ dừng phát video hiện tại và giữ lại trạng thái hiện tại của video để có thể tiếp tục phát lại từ vị trí đó sau này. Thuộc tính volume của đối tượng video để điều chỉnh âm lượng.
Lab8 – bài 4: Yêu cầu bài.
Countdown clock.
File html
<!DOCTYPE html>
<html lang="en">
<head>
<title>LAB_8 Bài_4 Fpoly WEB1043</title>
</head>
<body>
<div>
<input type="date" name="endDate" />
<div class="clock">
<span><span class="days">0</span> Days</span> <span> <span class="hours">0</span>Hours</span>
<span> <span class="minutes">0</span> Minutes</span>
<span><span class="seconds">0</span>Seconds</span>
</div>
</div>
</body>
</html>
copy
File css
.clock {
text-align: center;
width: 400px;
font-size: 1em;
color: white;
margin: 0 auto;
}
.clock > span {
padding: 10px;
border-radius: 10px;
background-color: rgb(49, 17, 69);
}
.clock > span > span {
padding: 5px;
border-radius: 10px;
}
input {
padding: 15px;
margin: 20px;
font-size: 1.5em;
border-radius: 20px;
outline: none;
}
div {
text-align: center;
}
copy
File js
const endDate = document.querySelector("input[name='endDate']");
const clock = document.querySelector('.clock');
let timeInterval;
let timeStop = true;
const savedValue = localStorage.getItem('countdown') || false;
if (savedValue) {
startClock(savedValue);
let inputValue = new Date(savedValue);
endDate.valueAsDate = inputValue;
}
endDate.addEventListener('change', function (e) {
e.preventDefault();
clearInterval(timeInterval);
const temp = new Date(endDate.value);
localStorage.setItem('countdown', temp);
startClock(temp);
timeStop = true;
});
function timeLeft(d) {
let currentDate = new Date();
let t = Date.parse(d) - Date.parse(currentDate);
let seconds = Math.floor((t / 1000) % 60);
let minutes = Math.floor((t / 1000 / 60) % 60);
let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
let days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
total: t,
days: days,
hours: hours,
minutes: minutes,
seconds: seconds,
};
}
function startClock(d) {
function updateCounter() {
let tl = timeLeft(d);
if (tl.total <= 0) {
timeStop = false;
}
for (let pro in tl) {
let el = clock.querySelector('.' + pro);
if (el) {
el.innerHTML = tl[pro];
}
}
}
updateCounter();
if (timeStop) {
timeInterval = setInterval(updateCounter, 1000);
} else {
clearInterval(timeInterval);
}
}
copy
Lý giải: localStorage là một đối tượng trong JavaScript được sử dụng để lưu trữ dữ liệu trên trình duyệt web. Nó cho phép lưu trữ các giá trị dưới dạng cặp key-value (khóa-giá trị), và dữ liệu được lưu trữ trên máy tính của người dùng thay vì trên máy chủ. Với localStorage, bạn có thể lưu trữ các thông tin quan trọng như thông tin người dùng, cài đặt và cấu hình ứng dụng, v.v. Phương thức “getItem()” để set key và value cho localStorage.
Phần kết.
Đây là phần cuối của lab cho lập trình cơ sở với javascript WEB1043, nếu bạn chưa xem phần 1 thì bạn có thể truy cập tại đây.
Tất cả phần trên mình chỉ giải thích các hoạt động của phương thức và thuộc tính cong logic bạn hãy xem và tham khảo. Bài assignment sẽ có trong tương lai sắp tới.
Chúc các bạn thành công !
No comments:
Post a Comment