Khoá học lập trình Javascript [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript
- 5.0/5.0
- 2k Đăng ký
- Học lập trình
- Tiếng việt
Thông tin khóa học
<!DOCTYPE html>
<html>
<head>
<title>Quản lý sản phẩm bằng javascript </title>
<meta charset="utf-8">
<style type="text/css">
.panel {
width: 60%;
margin: 0 auto;
border: solid #4267b2 1px;
}
.panel-heading {
background-color: #4267b2;
padding: 10px;
color: white;
}
.panel-body {
padding: 10px;
}
.panel-body label {
font-weight: bold;
}
.form-group {
display: block;
margin-bottom: 20px;
}
.form-control {
display: block;
width: 98%;
font-size: 16px;
margin-top: 10px;
}
.table {
width: 100%;
}
.table tr {
border-bottom: solid blue 1px;
}
</style>
</head>
<body>
<div class="panel">
<div class="panel-heading">
Input product detail information
</div>
<div class="panel-body">
<form method="post">
<div class="form-group">
<label>Product Name:</label>
<input type="number" name="index" id="index" value="" hidden="true">
<input class="form-control" type="text" name="product_name" id="product_name" placeholder="Enter product name">
</div>
<div class="form-group">
<label>Manufacturer Name:</label>
<select class="form-control" id="manuafaturer_name" onchange="changeManufaturer()">
<option value="">-- Choose --</option>
</select>
</div>
<div class="form-group">
<label>Category Name:</label>
<select class="form-control" id="category_name">
</select>
</div>
<div class="form-group">
<label>Price:</label>
<input class="form-control" type="number" name="price" id="price" placeholder="Enter price" value="0" onkeyup="updateTotalPrice()">
</div>
<div class="form-group">
<label>Quantity:</label>
<input class="form-control" type="text" name="quantity" id="quantity" placeholder="Enter quantity" value="0" onkeyup="updateTotalPrice()">
</div>
<div class="form-group">
<label>Total Price:</label>
<input class="form-control" type="text" name="total_price" id="total_price" value="0" disabled="true">
</div>
<div class="form-group">
<button class="btn btn-success" type="button" onclick="addProduct()">Add Produce</button>
<button class="btn btn-danger" type="reset">Reset</button>
</div>
</form>
</div>
</div>
<div class="panel" style="margin-top: 20px;">
<div class="panel-heading">
Product List
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Product Name</th>
<th>Manufacture Name</th>
<th>Category Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var manufactureList = {
"Apple": [
"IPhone 5", "IPhone 5s", "IPhone 12"
],
"Sam Sung": [
"Galaxy S5", "Galaxy 10"
],
"LG": [
"1", "2", "3"
]
}
var productList = []
var manuafaturerTag = document.getElementById('manuafaturer_name')
for(var key in manufactureList) {
manuafaturerTag.innerHTML += <option value='${key}'>${key}</option>
}
function changeManufaturer() {
key = manuafaturerTag.value
categoryList = manufactureList[key]
console.log(categoryList)
var categoruTag = document.getElementById('category_name')
categoruTag.innerHTML = ''
if(categoryList != null) {
for (var i = 0; i < categoryList.length; i++) {
categoruTag.innerHTML += <option value='${categoryList[i]}'>${categoryList[i]}</option>
}
}
}
function updateTotalPrice() {
var price = document.getElementById('price').value
var quantity = document.getElementById('quantity').value
totalPrice = price * quantity
document.getElementById('total_price').value = totalPrice
}
var count = 0
function addProduct() {
var index = document.getElementById('index').value
var productName = document.getElementById('product_name').value
var manufactureName = document.getElementById('manuafaturer_name').value
var categoryName = document.getElementById('category_name').value
var price = document.getElementById('price').value
var quantity = document.getElementById('quantity').value
var totalPrice = document.getElementById('total_price').value
var product = {
'productName': productName,
'manufactureName': manufactureName,
'categoryName': categoryName,
'price': price,
'quantity': quantity,
'totalPrice': totalPrice
}
if(index != '') {
productList[index] = product
showProduct()
return;
}
productList.push(product)
document.getElementById('result').innerHTML += <tr>
<td>${++count}</td>
<td>${productName}</td>
<td>${manufactureName}</td>
<td>${categoryName}</td>
<td>${price}</td>
<td>${quantity}</td>
<td>${totalPrice}</td>
<td><button class="btn btn-warning" onclick="editProduct(${count - 1})">Edit</button></td>
<td><button class="btn btn-danger" onclick="deleteProduct(${count - 1})">Delete</button></td>
</tr>
}
function deleteProduct(index) {
console.log(index)
productList.splice(index, 1)
showProduct();
}
function showProduct() {
document.getElementById('result').innerHTML = ''
for (var i = 0; i < productList.length; i++) {
document.getElementById('result').innerHTML += <tr>
<td>${i+1}</td>
<td>${productList[i].productName}</td>
<td>${productList[i].manufactureName}</td>
<td>${productList[i].categoryName}</td>
<td>${productList[i].price}</td>
<td>${productList[i].quantity}</td>
<td>${productList[i].totalPrice}</td>
<td><button class="btn btn-warning" onclick="editProduct(${i})">Edit</button></td>
<td><button class="btn btn-danger" onclick="deleteProduct(${i})">Delete</button></td>
</tr>
}
}
function editProduct(index) {
var product = productList[index]
console.log(product)
document.getElementById('index').value = index
document.getElementById('product_name').value = product.productName
document.getElementById('manuafaturer_name').value = product.manufactureName
changeManufaturer()
document.getElementById('category_name').value = product.categoryName
document.getElementById('price').value = product.price
document.getElementById('quantity').value = product.quantity
document.getElementById('total_price').value = product.totalPrice
}
</script>
</body>
</html>Đăng nhập để làm bài kiểm tra
Chưa có kết quả nào trước đó
Chương trình
Phản hồi từ học viên
5
Đánh giá
Câu hỏi thường gặp
B1. B1. Tạo tài khoản -> Sử dụng để học online
B2. Đăng ký học
B3. Hoàn thành mua khoá học
B4. Thanh toán theo hướng dẫn
B5. Đợi chúng tôi kiểm tra thông tin và thêm bạn vào lớp học
B2. Đăng ký học
B3. Hoàn thành mua khoá học
B4. Thanh toán theo hướng dẫn
B5. Đợi chúng tôi kiểm tra thông tin và thêm bạn vào lớp học
Chào mừng các anh chị và các bạn gia nhập đội ngũ Giảng viên QViet. Anh chị vui lòng đăng ký theo hướng dẫn sau:
Bước 1: Truy cập website https://qviet.vn/teacher/form
Bước 2: Điền thông tin theo yêu cầu. Để bản đăng ký được duyệt nhanh nhất, anh chị hãy điền đủ thông tin nhé.
Bước 3: Click vào "đăng ký ngay" để hoàn thành
Lưu ý:
Link video bài giảng mẫu: Video bài giảng mẫu là căn cứ để Trắc Nghiệm Việt duyệt về hình thức và chất lượng giảng dạy. Vì vậy anh chị hãy điền link này để đăng ký được duyệt nhanh nhất nhé.
Anh chị cũng nên mô tả kỹ về kinh nghiệm giảng dạy để Trắc Nghiệm Việt đánh giá nhé.
Chúc các anh chị và các bạn thành công, sớm gia nhập đội ngũ giảng viên Trắc Nghiệm Việt!
Bước 1: Truy cập website https://qviet.vn/teacher/form
Bước 2: Điền thông tin theo yêu cầu. Để bản đăng ký được duyệt nhanh nhất, anh chị hãy điền đủ thông tin nhé.
Bước 3: Click vào "đăng ký ngay" để hoàn thành
Lưu ý:
Link video bài giảng mẫu: Video bài giảng mẫu là căn cứ để Trắc Nghiệm Việt duyệt về hình thức và chất lượng giảng dạy. Vì vậy anh chị hãy điền link này để đăng ký được duyệt nhanh nhất nhé.
Anh chị cũng nên mô tả kỹ về kinh nghiệm giảng dạy để Trắc Nghiệm Việt đánh giá nhé.
Chúc các anh chị và các bạn thành công, sớm gia nhập đội ngũ giảng viên Trắc Nghiệm Việt!
Hình thức học như thế nào?
Việc tạo thói quen học tập sẽ giúp bạn tăng khả năng đạt được mục tiêu. Dành thời gian để học và nhận lời nhắc bằng cách sử dụng công cụ quản lý học tập của bạn.Bước 1: Truy cập mục tài khoản, đăng nhập và chọn Quản lý học tập và ấn Thêm lịch học
Bước 2: Cài đặt lịch học tập của bạn:
- Đặt tiêu đề và chọn khóa học muốn tạo lịch học sau đó ấn tiếp tục.
- Cài đặt tần suất học, thời gian học, thời gian bắt đầu học, lịch thông báo nhắc nhở trước lúc bắt đầu học, ngày kết thúc sau đó bạn ấn tiếp tục.
- Bạn kiểm tra lại lịch học tập lần nữa, nếu đúng bạn ấn Hoàn thành.
- Nếu muốn chỉnh sửa, bạn ấn mục Quay lại và chỉnh lại.
- Khi tạo xong bạn có thể ấn thanh ngang bên phải để xóa, sửa lịch học.
Việc lên lịch học sẽ giúp em bạn dễ dàng đạt được các mục tiêu mong muốn, tăng hiệu quả học tập. Đặc biệt, khi bạn học được 90% nội dung khóa học, bạn sẽ nhận chứng nhận hoàn thành khóa học.
Hình thức học tại Trắc Nghiệm Việt
1. Học như thế nào?- Khóa học tại Trắc Nghiệm Việt được học **online** trên điện thoại hoặc máy tính có kết nối Internet.
- Các video bài giảng đã được biên tập sẵn, học viên có thể học bất cứ lúc nào, không giới hạn thời gian và số lần học.
- Chỉ cần đăng ký và thanh toán một lần.
2. Có thể học trên nhiều thiết bị không?
- Học viên có thể đăng nhập và học trên nhiều thiết bị khác nhau (điện thoại, máy tính, máy tính bảng). Tuy nhiên, tại cùng một thời điểm chỉ **một thiết bị** được phép xem video.
- Truy cập website: https://qviet.vn để đăng nhập và học.
- Với điện thoại hoặc máy tính bảng, học viên có thể tải ứng dụng Trắc Nghiệm Việt tại: https://qviet.vn
3. Có thể học trên Smart TV không?
- Trắc Nghiệm Việt đang phát triển để hỗ trợ học trực tiếp trên Smart TV. Hiện tại, tùy theo từng dòng TV mà có thể mở website và học được hoặc không.
- Bạn có thể thử bằng cách mở trình duyệt trên TV và truy cập: https://qviet.vn
- Trải nghiệm học tập tốt nhất hiện nay là trên **điện thoại** và **máy tính**.
4. Thời hạn sử dụng khóa học?
- Sau khi đăng ký, học viên sẽ sở hữu khóa học **vĩnh viễn**, có thể học đi học lại không giới hạn.
5. Có được tải khóa học về thiết bị không?
- Video bài giảng thuộc bản quyền của Trắc Nghiệm Việt và giảng viên. Học viên **không được tải xuống** dưới bất kỳ hình thức nào để tránh việc phát tán trái phép.
- Khóa học là tài sản trí tuệ và công sức của giảng viên, mong học viên hiểu và tôn trọng quyền sở hữu này.
Học viên có thể trao đổi với giảng viên qua đâu?
- Bên dưới mỗi video có mục **Thảo luận**, bạn tích chọn và đặt câu hỏi tại đây. Thông thường trong vòng 24h giảng viên sẽ phản hồi lại bạn.
- Để xem câu trả lời của giảng viên, bạn vào mục **Thảo luận** của bài học đã đặt câu hỏi và tích vào mục trả lời để xem.
Học viên có thể liên hệ trực tiếp với giảng viên qua điện thoại, email, Facebook không?
- Khóa học online, giảng viên có hàng nghìn học viên trên cả nước nên việc liên hệ trực tiếp với giảng viên qua điện thoại là không tiện và Trắc Nghiệm Việt cam kết bảo mật thông tin cá nhân của giảng viên.
- Đa phần các khóa học, giảng viên hỗ trợ học viên qua **mục Thảo luận**. Một số khóa học giảng viên có thể hỗ trợ thêm qua email, Facebook, Zalo hoặc nhóm hỗ trợ trên Facebook. Trong những trường hợp này, giảng viên và Trắc Nghiệm Việt sẽ cung cấp thông tin liên hệ phù hợp.
- Bên dưới mỗi video có mục **Thảo luận**, bạn tích chọn và đặt câu hỏi tại đây. Thông thường trong vòng 24h giảng viên sẽ phản hồi lại bạn.
- Để xem câu trả lời của giảng viên, bạn vào mục **Thảo luận** của bài học đã đặt câu hỏi và tích vào mục trả lời để xem.
Học viên có thể liên hệ trực tiếp với giảng viên qua điện thoại, email, Facebook không?
- Khóa học online, giảng viên có hàng nghìn học viên trên cả nước nên việc liên hệ trực tiếp với giảng viên qua điện thoại là không tiện và Trắc Nghiệm Việt cam kết bảo mật thông tin cá nhân của giảng viên.
- Đa phần các khóa học, giảng viên hỗ trợ học viên qua **mục Thảo luận**. Một số khóa học giảng viên có thể hỗ trợ thêm qua email, Facebook, Zalo hoặc nhóm hỗ trợ trên Facebook. Trong những trường hợp này, giảng viên và Trắc Nghiệm Việt sẽ cung cấp thông tin liên hệ phù hợp.
Bình luận
Tổng quan khóa học
- Bài học 40
- Thời gian Linh hoạt
- Mức độ Mới bắt đầu
- Ngôn ngữ Tiếng việt
- Thời lượng Trọn đời
- Chứng chỉ Không
Trần Văn Điệp
Founder tại QViet.vn
- 5.0/5.0
Mình là Điệp, mình là lập trình viên Full Stack. Hiện mình là Senior Developer, mình là người yêu thích lập trình và viết các mã lệnh và yêu thích khi tạo ra những sản phẩm cho mình. Mình luôn thích thú mỗi khi tối ưu lại chức năng của từng chức năng, làm sao để nó trở lên tối ưu và smooth. Làm tăng trải nghiệm người dùng. Mình cũng rất thích tìm hiểu các công nghệ mới, tìm hiểu các tính năng mới trong các bản nâng cấp mới. Mảng mình làm việc lâu nhất là Mobile (Android & iOS). Mình là người thích chia sẻ kiến thức, những gì mình biết đều muốn chia sẻ ra. Blog này cũng là nơi mình chia sẻ các kiến thức và công nghệ mình đã làm trong các dự án. Blog mình hướng tới là chia sẻ kiến thức kết hợp với trải nghiệm thực tế khi làm ở doanh nghiệp.
