Hướng dẫn lab lập trình cơ sở javascript phần 2

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

Xây dựng trang web cho phé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é

<!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>

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();
};

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

Xây dựng trang web ban-hang.html được mô tả như hì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.

<!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>

th,
td {
    border: 1px solid #ccc;
    padding: 5px 10px;
}

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>

.active {
    display: block !important;
}
.myText {
    display: none;
}
.title {
    font-size: 1.5em;
    background-color: #ddd;
    cursor: pointer;
}

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');
    });
}

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 thị 9 nút trống.

Người chơi nhấp vào nút trống .

Lượt lẻ: tạo nhãn X và nền xanh (aqua).

Lượt chẵn: tạo nhãn O nền vàng.

Vô hiệu hóa nút được click để khô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 .

Dưới đây là html, css và js cho bài trên như sau:

<!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>

.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;
}

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';
    });
}

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.

<!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>

.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;
}

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 ô màu đỏ càng nhanh càng tốt khi nó xuất hiện.

Ô màu đỏ đặt ngẫu nhiê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.

<!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>

.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;
}

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`;
    }
});

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

Bài 1

Thực hiện lại bài ví dụ demo drag & drop element trong slide bài giảng:

<!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>

.box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: white;
}
.red {
    background-color: red;
}

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:

<!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>

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>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>

form {
    width: 200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
input {
    margin: 5px 0;
    padding: 3px 5px;
}

Trang nhận dữ liệu

<!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.

Bài 4

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>LAB_7 Bài_4 Fpoly WEB1043</title>
    </head>
    <body>
        <ul class="stars">
            <li class="star">&#10029;</li>
            <li class="star">&#10029;</li>
            <li class="star">&#10029;</li>
            <li class="star">&#10029;</li>
            <li class="star">&#10029;</li>
        </ul>
        <div class="output"></div>
    </body>
</html>

.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;
}

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');
        }
    });
}

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.

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.

<!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>

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

<!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>

let message = document.getElementById('message');
function uploadFile(files) {
    message.innerText = files[0].name;
}

Code cho upload nhiều file.

<!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>

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.

<!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>

#container {
    text-align: center;
}
video {
    border-radius: 20px;
}
#controls {
    margin-top: 20px;
}

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;
    }
}

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.

Bài 4

Countdown clock.

<!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>

.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;
}

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.

Chúc các bạn thành công !