BT Javascript

Bài tập
JAVASCRIPT (JS)
ThS. Nguyễn Hữu Trung

0908.6171.08
trungnh@hcmute.edu.vn
Khoa Công Nghệ Thông Tin
Bài tập 01: Cho người dùng nhập vào tên và tuổi. Hãy viết lại tên và tuổi
của người đó ra màn hình bằng hàm document.write, trong đó tên có màu
đậm, tuổi được gạch chân.
<script language="JavaScript">
var Ten, Tuoi; // Khai báo 2 biến để lưu tên và tuổi
Ten = prompt("Bạn hãy nhập vào tên ", "");
Tuoi = prompt("Bạn hãy nhập vào Tuổi : ", 20);
document.write("Chào bạn : <B> " + Ten + "</B>");
document.write("<BR/>"); // Xuống dòng
document.write("Tuổi của bạn là : <U> " + Tuoi + "</U>");
</script>
Bài tập 02: Tạo một nút nhấn (button) có name là welcome,
value là " Welcome ". Một textbox có tên là msg, value =
"Welcome to".
<script>
document.write("Tạo Button va Text bằng Script<BR/>");
document.write("<BR/>");
document.write("<input type=button name=welcome
value=Welcome onclick =Hello() /> ");
document.write("<input type =text name =msg value
='Welcome to' />");
function Hello() {
alert('Welcome to JavaScript');
}
</script>
Bài tập 03: Tạo 2 phần tử như ví dụ 2, khi người dùng nhấn nút thì gọi một hàm có
tên là Hello, hàm Hello có chức năng hiển thị nội dung trong text có tên là msg ở
trên.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<Script Language="JavaScript">
function Hello() // Khai báo một hàm tên là HienThi
{
alert(msg.value); // Lấy nội dung trong text box và hiển thị
alert("Bạn hãy nhập vào ô text và thử lại !");
}
</Script>
</head>
<body>
<input type=button name=welcome value="Welcome" onclick=“Hello()">
<input type=text id=msg value="Welcome to JavaScript" size=30>
</body>
</html>
Bài tập 04: Minh hoạ sử khai báo và dùng đối tượng Date để lấy giờ, phút,
giây của hệ thống.
var D = new Date();
document.title = "Bây giờ là: " + D.getHours() + " giờ " +
D.getMinutes() + " phút.";
alert ( "Bây giờ là: " + D.getHours() + " giờ " +
D.getMinutes() + " phút.");
</script>
Bài tập 05: Cho người dùng nhập vào năm sinh của họ, sau đó hiển thị tuổi tương ứng.
var D = new Date();
var NamSinh, NamHienTai;
NamHienTai = D.getFullYear(); // Lưu năm hiện tại vào biến
NamSinh = prompt("Bạn sinh năm bao nhiêu ? : ", "");
alert("Tuổi của bạn bây giờ là : " + (NamHienTai - NamSinh));
</script>
Bài tập 06:Tương tự như bài 05 nhưng năm sinh nhập vào không được lớn hơn
năm hiện tại. Sử dụng vòng lặp do…while để yêu cầu nhập lại nếu năm sinh > năm
hiện tại.
var D = new Date();
var NamSinh, NamHienTai;
NamHienTai = D.getFullYear(); // Lưu năm hiện tại vào biến
do {
NamSinh = prompt("Bạn sinh năm bao nhiêu : ", "");
} while (parseInt(NamSinh) > NamHienTai); //Nhập lại nếu Năm
sinh>năm hiện tại
alert("Tuổi của bạn bây giờ là : " + (NamHienTai - NamSinh));
</script>
Bài tập 07: Viết đoạn Script cho người dùng nhập vào một số nguyên. Nếu người
dùng nhập số 1 thì mở trang Web https://google.com, nếu nhập số 2 thì mở trang
https://hcmute.edu.vn.vn, nếu nhập số 3 thì mở trang https://online.hcmute.edu.vn,
còn nếu nhập một số khác với 1, 2 hay 3 thì mở trang http://iotstar.vn.
var LuaChon;
LuaChon = prompt("Bạn hãy nhập vào một số nguyên để mở
trang web: ", 1);
switch (LuaChon) {
case "1": window.open("https://google.com"); break;
case "2": window.open("https://hcmute.edu.vn"); break;
case "3": window.open("https://online.hcmute.edu.vn");
break;
default: window.open("http://iotstar.vn");
}
</script>
Bài tập 08: Cho người dùng nhập vào danh sách tên của một
lớp, sau đó sắp xếp theo vần Alphabet rồi hiển thị danh sách
đã sắp xếp đó ra màn hình, mỗi người trên một dòng.
var SoLuong, x;
var DS = new Array(100); //Khai báo mảng DS, có thể lưu tối đa
là 100 phẩn tử
SoLuong = prompt("Bạn cần nhập bao nhiêu người: ", 5);
for (i = 0; i < SoLuong; i++) {
DS[i] = prompt("Nhập vào họ tên: ", "");
}
//Gọi hàm sort của đối tượng mảng DS để sắp xếp
DS.sort();
DS.reverse(); //sắp xếp giảm dần
//Hiển thị kết quả sau khi sắp (sort)
document.write("<h1>Danh sách đã sắp xếp là </h1>");
for (x in DS) /* Nên sử dụng cấu trúc for … in này để duyệt
mảng */ {
document.write(DS[x]);
document.write("<BR>"); // Xuống dòng
}
</script>
Bài tập 09: Tạo một nút có name = ThayMauNen, value = "Thay đổi màu
nền". Khi người dùng click chuột vào nút này thì thay đổi màu nền của
trang Web thành màu "xanh".
<INPUT type="button" name="ThayMauNen" value="Thay đổi màu nền"

onClick="document.bgColor = 'blue'" />
Cách 2
function HienThi() // Khai báo một hàm tên là HienThi
{
document.bgColor = 'blue';
}
</Script>
<INPUT type="button" name="ThayMauNen" value="Thay đổi

màu nền"
onClick="HienThi()">
Bài tập 10: Tạo ra ba hộp text lần lượt tên là SoHang1, SoHang2, KetQua
và một nút có tên là TinhTong, để thực hiện phép tính tổng. Khi người dùng
nhập hai số hạng vào hộp SoHang1 và SoHang2, sau đó click vào nút
TinhTong thì kết quả tổng sẽ được lưu vào trong hộp text KetQua.
<body>
<h2>Hãy nhập hai số và click vào nút Tính tổng</h2>
<INPUT type="text" id="SoHang1"> +
<INPUT type="text" id="SoHang2"> =
<INPUT type="text" id="KetQua">
<INPUT type="button" value="Tính tổng"
onClick="KetQua.value = parseFloat(SoHang1.value) +
parseFloat(SoHang2.value)">
</body>
<body>
function HienThi() // Khai báo một hàm tên là HienThi
{
KetQua.value = parseFloat(SoHang1.value) + parseFloat(SoHang2.value)
}
</Script>
<h2>Hãy nhập hai số và click vào nút Tính tổng</h2>
<INPUT type="text" id="SoHang1"> +
<INPUT type="text" id="SoHang2"> =
<INPUT type="text" id="KetQua">
<INPUT type="button" value="Tính tổng" onClick="HienThi()">
</body>
Bài tập 11: Tạo ra 4 text có tên lần lượt là: MauNen, MauChu, TieuDe, TrangThai và
một nút có tên là ThayDoi, value là "Thay đổi". Khi người dùng click vào nút
ThayDoi thì màu nền, màu chữ, tiêu đề của tài liệu và thanh trạng thái của cửa sổ
trình duyệt sẽ được thay đổi bằng các giá trị trong text tương ứng
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<SCRIPT language="JavaScript">
function CapNhat() {
document.title = TieuDe.value; /* Thay đổi tiêu đề của trang Web */
document.bgColor = MauNen.value; /* Thay đổi màu nền của trang */
document.fgColor = MauChu.value; /* Thay đổi màu chữ của trang */
window.defaultStatus = TrangThai.value; /* Thay đổi dòng trạng thái của cửa sổ*/
}
</SCRIPT>
</head>
<body>
<h2>Nhập vào các giá trị và nhấn nút Thay đổi</h2>
<INPUT type="text" id="TieuDe" value="Tiêu đề mới">
<INPUT type="text" id="MauNen" value="Nhập màu vào đây (ví dụ blue)"> <BR/>
<INPUT type="text" id="MauChu" value="Nhập màu chữ vào đây (ví dụ white)">
<INPUT type="text" id="TrangThai" value="Nhập dòng trạng thái vào đây "> <BR/>
<INPUT type="button" id="ThayDoi" value="Thay đổi" onClick="CapNhat();">
</body>
</html>
Bài tập 12: Khi người dùng click vào nút xanh thì màu
nền của tài liệu là xanh (blue), còn khi người dùng
click vào nút đỏ thì màu nền của tài liệu là: Đỏ (red).
<input type=button value=Xanh onclick="window.document.bgColor = 'blue'; "/>
<input type=button value=Do onclick="window.document.bgColor = 'red'; "/>
<script language=JavaScript>
function DoiMau() {
document.bgColor = Mau.value;
// Hoặc viết: window.document.bgColor = Mau.value;
}
</script>
Bạn hãy chọn màu nền:
<Select id=Mau onchange="DoiMau();">
<option value=red> Màu đỏ </option>
<option value=blue> Màu xanh </option>
<option value=brown> Màu nâu </option>
<option value=lavender> Màu xanh nhạt</option>
</Select>
Bài tập 13: Tạo một textarea có tên là NoiDung, một Textbox có tên là:
SoKyTu. Với yêu cầu như sau: Khi người sử dụng gõ các phím vào trong
textarea thì số lượng ký tự (Độ dài xâu) chứa trong textarea đó sẽ được
hiển thị trong textbox. Nếu số lượng ký tự trong textarea gõ vào vượt quá
200 ký tự thì thông báo: "Bạn đã gõ quá số ký tự cho phép!".
function KiemTra() {
if (NoiDung.value.length > 200) alert("Bạn đã gõ quá
số ký tự cho phép!");
SoKyTu.value = NoiDung.value.length; // Hiển thị số
ký tự trong textbox SoKyTu
}
</script>
Số ký tự đã gõ: <input type="text" id="SoKyTu"> <BR/>
<textarea id="NoiDung" cols=50 rows="10"
onKeyUp="KiemTra();"> </textarea>
Bài tập 14: Tạo 3 textbox, có tên lần lượt là: SoLuong (Số lượng), DonGia
(Đơn giá) và ThanhTien (Thành tiền);
Yêu cầu: Khi người dùng nhập giá trị trong DonGia thì kết quả sẽ được cập
nhật ngay trong ThanhTien.
<html>
<head>
<title>Tính tích</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<Script language=JavaScript>
function TinhToan() {
ThanhTien.value = SoLuong.value * DonGia.value;
// Hoặc bạn viết đầy đủ là:
// window.ThanhTien.value = window.SoLuong.value*window.DonGia.value
}
</script>
</head >
<body style="font-family:arial;background-color:lavender">
<H1>Bạn hãy nhập vào số lượng và giá:</H1>
Số lượng: <input id="SoLuong">
Đơn giá: <input id="DonGia" onKeyUp="TinhToan();"> <HR>
Thành tiền: <input id="ThanhTien"> USD
</body>
</html>
Bài tập 15: Tạo một liên kết đến trang https://iotstar.vn/ bằng
thẻ H2. Có màu nền là xanh, màu chữ là trắng. Khi chuột di
chuyển đến thì đổi màu nền thành màu đỏ. Khi chuột di
chuyển ra ngoài thì đổi màu nền thành màu xanh.
<h2 ID="LienKet" STYLE="background-color:blue; color:white"
onMouseMove="document.all.LienKet.style.backgroundColor =
'red'" onMouseOut="document.all.LienKet.style.backgroundColor =
'blue'" onclick = "window.open('http://iotstar.vn');">
Website công nghệ http://iotstar.vn/
</h2>
var attempt = 3;
function validate() { Bài tập 16: Login script
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "Trungnh" && password == "123") {
alert("Login successfully");
window.location = "success.html"; // Redirecting to other
page.
return false;
}
else {
attempt--;// Decrementing by one.
alert("Lỗi đăng nhập username và password không đúng");
if (attempt == 0) {
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
} <input type="button" value="Login" id="submit" onclick="validate()" />
var slideIndex = 1;
showSlides(slideIndex); Bài tập 17: SlideShow
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
function showTime(){
var date = new Date(); Bài tập 18: Clock Digital
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59 .clock {
var s = date.getSeconds(); // 0 - 59
var session = "AM";
position: absolute;
if(h == 0){ top: 50%;
h = 12; left: 50%;
}
transform: translateX(-50%) translateY(-50%);
if(h > 12){ color: #17D4FE;
h = h - 12; font-size: 60px;
session = "PM"; font-family: Orbitron;
}
letter-spacing: 7px;
h = (h < 10) ? "0" + h : h; }
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClock").innerText = time;
document.getElementById("MyClock").textContent = time;
setTimeout(showTime, 1000);
<div id="MyClock" class="clock"
}
showTime(); onload="showTime()"></div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" Bài 19:Search
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
<input class="form-control" id="myInput" type="text"

placeholder="Search..">
<table class="table table-bordered">
<script>
<thead>
<tr> $(document).ready(function () {
<th>Firstname</th> $("#myInput").on("keyup", function () {
<th>Lastname</th> var value = $
<th>Email</th> (this).val().toLowerCase();
</tr> $("#myTable tr").filter(function () {
</thead>
$(this).toggle($
<tbody id="myTable">
<tr> (this).text().toLowerCase().indexOf(value) >
<td>John</td> -1)
<td>Doe</td> });
<td>john@example.com</td> });
</tr></tbody> });
</table>
</script>
Bài tập 20: Login và validation login
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
<a data-toggle="modal" href="#dang_nhap"> Đăng nhập</a>


<div class="modal fade" id="dang_nhap">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title">Đăng nhập</h4>
</div>
<form method="post" action="/Home/DangNhap" id="frm-login">
<div class="modal-body">
<div id="err_login"></div>
<div id="login_here">
<label>Username : </label>
<input type="text" class="form-control" id="username" />
<label>Password : </label>
<input type="password" class="form-control" id="password" />
<br />
<a href="#" class="text-danger">Quên mật khẩu</a>
</div>
<br />
<div id="waiting" style="display: none;">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="login_btn">Đăng
nhập</button>
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<script> Bài tập 20: Login và validation login
$(document).ready(function () {
$("#frm-login").submit(function (e) {
if ($("#username").val() == '') {
$('#err_login').html('<div class="alert alert-
danger">Username chưa nhập</div>');
$("#username").focus();
return false;
}
else if ($("#password").val() == '') {
danger">Password chưa nhập</div>');
$("#password").focus();
return false;
}
else {
if ($("#username").val() !== 'Trung' || $
("#password").val()!=='123') {
$('#err_login').html('<div class="alert alert-danger">Tên hoặc
mật khẩu không chính xác</div>');
$("#password").val("");
$("#password").focus();
return false;
}
else {
$("#login_here").hide();
$(".modal-footer").hide();
success"><strong>Đăng nhập thành công</strong><span> Hệ thống tự chuyển sau vài
giây ...</span></div>');
setTimeout(
function () {
var msg_login = "http://google.com.vn";
window.location.href = '' + msg_login + '';
}, 2000);
} //Load wating bar
return false; $(document).ajaxStart(function () {
} $("#waiting").show();
}).ajaxStop(function () {
});
$("#waiting").hide();
}) });
</script>
Bài 21: Automatic SlideShow
/* Caption text */
• Định nghĩa CSS .text {
<style> color: #f2f2f2;
* { font-size: 15px;
box-sizing: border-box; padding: 8px 12px;
} position: absolute;
body { bottom: 8px;
font-family: Verdana, sans-serif; width: 100%;
}
text-align: center;
.mySlides {
display: none; }
}
img { /* Number text (1/3 etc) */
vertical-align: middle; .numbertext {
} color: #f2f2f2;
/* Slideshow container */ font-size: 12px;
.slideshow-container { padding: 8px 12px;
max-width: 1000px;
position: absolute;
position: relative;
margin: auto; top: 0;
} }
• Định nghĩa CSS @-webkit-keyframes fade {
from {
/* The dots/bullets/indicators */ opacity: .4
.dot { }
height: 15px; to {
width: 15px; opacity: 1
}
margin: 0 2px;
}
background-color: #bbb; @keyframes fade {
border-radius: 50%; from {
display: inline-block; opacity: .4
transition: background-color 0.6s ease; }
} to {
.active { opacity: 1
}
background-color: #717171;
}
} /* On smaller screens,
/* Fading animation */ decrease text size */
.fade { @media only screen and (max-
-webkit-animation-name: fade; width: 300px) {
-webkit-animation-duration: 1.5s; .text {
animation-name: fade; font-size: 11px
}
animation-duration: 1.5s;
}
} </style>
• Thiết kế khung hình slide show
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 2</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 2</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
</div>
• javScript slide show
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>

BT Javascript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BT Javascript

Uploaded by

Copyright:

Available Formats

Bài tập

ThS. Nguyễn Hữu Trung

<INPUT type="button" name="ThayMauNen" value="Thay đổi màu nền"

<INPUT type="button" name="ThayMauNen" value="Thay đổi

<input class="form-control" id="myInput" type="text"

<a data-toggle="modal" href="#dang_nhap"> Đăng nhập</a>

You might also like