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
Bài 1
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.
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.
Các bạn có thể custom giao diện theo ý muốn từ class đến id nhé
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.
Bài 2
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.
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}`;}
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
Bài 1
Tạo trang web có giao diện và xử lý như sau:
<!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>
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.
Bài 2
Tạo trang web cho phép 2 người chơi trò tictactoe có giao diện như sau:
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 .
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.
Bài 3
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.
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; } });});
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.
Bài 4
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.
let holderItem;function dStart() { holderItem = event.target;}function nDrop() { event.preventDefault();}function dDrop() { event.preventDefault(); if (event.target.className == 'box') { event.target.appendChild(holderItem); }}
setInterval 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.
Bài 2
Thực hiện bài ví dụ như hình minh hoạ và hướng dẫn:
div { background-color: purple; width: 100px; height: 100px; position: absolute;}
function toTheRight() { let b = document.getElementById('block'); let x = 0; setInterval(function () { if (x === 600) { clearInterval(); } else { x++; b.style.left = x + 'px'; } }, 2);}
Bài 3
Thực hiện lại bài ví dụ form submission và thêm nội dung nâng cao như sau:
<!DOCTYPE html><html lang="en"> <head> <title>Document</title> </head> <body> Nhận dữ liệu từ file index. </body></html>
let q = window.location.search;let params = new URLSearchParams(q);for (const item of params) { console.log(item);}
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.
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.
Bài 5
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.
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');}
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).
Lab 8
Bài 1
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.
Dưới đây là file html, css và js của bài này, trước hết là upload 1 file
let message1 = document.getElementById('message1');function uploadFile1(files) { for (let i = 0; i < files.length; i++) { message1.innerHTML += files[i].name + '<br>'; }}
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.
Bài 2
Thực hiện bài ví dụ demo geolocation trong slide bài giảng:
<!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>
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;}
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.
Bài 3
Thực hiện lại bài ví dụ demo audio/video DOM như trong slide bài giảng.
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. 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.
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); }}
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.