IMG-LOGO
Trang Chủ Học JS Bài tập - Quản lý đăng ký đăng nhập - LocalStorage - Lập trình Javascript
×

Gợi Ý & Mục Lục

[Document] Tài liệu học lập trình JavaScript [Document] Tài liệu học lập trình JavaScript - Phần 2

Lý Thuyết

Chủ đề 1 : Nhập môn ngôn ngữ lập trình JavaScript Tạo hình tam giác bằng ngôn ngữ lập trình JavaScript Hướng dẫn tạo danh sách sinh viên sử dụng Loop & Object & Array trong Javascript Làm thế nào để lấy giá trị các tham số trong URL (How can I get query string values in JavaScript?) BT01. Tạo dự án JS đầu tiên - Lập Trình JS 01. Khai báo biến - toán tử - Lập Trình JavaScript 02. Các hàm sẵn có trong js - Khoá Học Lập Trình JS 03. Cấu trúc điều kiện if else switch - Lập Trình JS 04. Cấu trúc điều kiện while for - Lập Trình JS 05. Event - Lập Trình JS BT02. Tương tác lên tags trong HTML bằng JS BT03. Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS BT04. Thêm sửa xoá thông tin sinh vien bằng JS - lập trình JS 06. Cookie - khoá học lập trình JavaScript 07. Localstorage - Khoá học lập trình JavaScript BT05. Ứng dụng localStorage - Khoá học lập trình JavaScript 1000 Bài tập JavaScript - Lập Trình JavaScript Tài Liệu - Regular Expression - Lập trình HTML/CSS/JS

Bài Tập

Thiết kế calculator online - html5/css & Javascript Tính giai thừa N! trong Javascript In tam giá * trong Javascript - in tam giác hình * trong Javascript - in tam giác hình sao trong Javascript Giải phương trình bậc nhất bằng Javascript Giải phương trình bậc 2 bằng javascript - giải phương trình bậc hai bằng Javascript Tạo máy tính + - * / trong Javascript - Tạo máy tính căn bản cộng trừ nhân chia bằng Javascript - Sử dụng function trong Javascript Object & Array trong Javascript - Sinh ngẫu nhiên danh sách sinh viên trong javascript Xử lý sự kiện trong javascript - events in javascript - Phương trình bậc nhất trong Javascript - ax+b=0 javascript - a*x+b=0 trong javascript Quản lý thông tin sinh viên bằng Javascript - Lập trình Javascript Bài tập - Giải phương trình bậc nhất ax + b = 0 Bài tập - Giải phương trình bậc 2 ax2+ bx + c = 0 Bài tập - Tìm số lớn nhất - Lập trình Javascript Bài tập ôn luyện Function - Lập trình Javascript Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript Bài tập - Ôn tập event trong javascript - Lập trình Javascript Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript Bài tập - Quản lý đăng ký đăng nhập - LocalStorage - Lập trình Javascript Bài tập - Quản lý sinh viên - LocalStorage - Lập trình Javascript [TEST] Tạo website giời thiệu công ty - Lập trình HTML/CSS/JS Bài tập - Quản lý đăng ký page- đăng nhập page - Hiển thị thông tin người dung - LocalStorage - Lập trình Javascript

Source Code Chia Sẻ

[Share Code] Hướng dẫn tìm hiểu biên & toán tử trong Javascript + Mệnh đề điều kiên Javascript + Vòng lặp trong Javascript [Share Code] Tìm hiểu hàm trong Javascript + Array trong Javascript + Object trong Javascript + Thao tác tag bằng Javascript [Share Code] Phương trình bậc nhất ax+b=0 javascript - giải phương trình bậc nhất ax+b=0 - a*x+b=0 javascript - Prompt trong Javascript [Share Code] Phương trình bậc nhất ax+b=0 javascript - giải phương trình bậc nhất ax+b=0 - a*x+b=0 javascript - document.getElementById + innerHTML [Share Code] Hướng dẫn tìm hiểu lập trình Javascript [Share Code] Tìm hiểu mảng + object trong C - Lập trình C [Share Code] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Share Code] Tìm hiểu event + thao tác lên tag trong HTML - Lập trình HTML/CSS/JS [Share Code] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Share Code] Chia sẻ code - Regular Express và LocalStorage - Lập trình Javascript [Share Code] Chia sẻ code tìm hiểu JS - Biến, toán tử, mệnh đề điều kiên - Lập trình JS [Share Code] Tìm hiểu JS - Thao tác thẻ HTML bằng JS - Lập trình javascript [Share Code] Tìm hiểu jQuery - Lập trình HTML/CSS/JS [Share Code] Tìm hiểu Javascript biến, toán tử, hàm căn bản, function - Lập trình HTML/CSS/JS [Share Code] Tìm hiểu Object & Array trong Javascript [Share Code] Quản lý sinh viên - Lập trình HTML/CSS/JS [Share Code] Tìm hiểu biến, toán tử, mệnh đề điều kiện if, else, switch - Loop - Lập trình Java [Share Code] Tìm hiểu jquery + javascript + onload - Lập trình HTML/CSS/JS [Share Code] Tìm hiểu về biến, toán tử và mệnh đề điều kiện + vòng lặp - Lập trình Javascript [Share Code] Tìm hiểu về Object & Array & Function trong Javascript [Share Code] Tìm hiểu về onload - jQuery - localStorage - json - Lập trình Javascript

Tài Liệu Học

JavaScript Introduction - Giới thiệu về Javascript JavaScript Where To JavaScript Output - Đầu ra của JavaScript JavaScript Statements - Các câu lệnh JavaScript JavaScript Syntax - Cú pháp JavaScript JavaScript Comments - Chú thích trong JavaScript JavaScript Variables - Các biến JavaScript JavaScript Operators - Các toán tử JavaScript JavaScript Arithmetic - Số học trong JavaScript JavaScript Assignment - Gán trong JavaScript JavaScript Data Types - Các kiểu dữ liệu trong JavaScript JavaScript Functions - Các hàm trong JavaScript JavaScript Objects - Các đối tượng trong JavaScript JavaScript Events - Các sự kiện trong JavaScript JavaScript Strings - Các chuỗi trong JavaScript JavaScript String Methods - Các phương thức của chuỗi trong JavaScript JavaScript Numbers - Các chữ số trong JavaScript JavaScript Number Methods - Các phương thức của chữ số trong JavaScript JavaScript Arrays - Mảng trong JavaScript JavaScript Array Methods - Các phương thức của mảng trong JavaScript JavaScript Sorting Arrays - Xắp xếp các mảng trong JavaScript JavaScript Array Iteration Methods - Các phương thức lặp mảng trong JavaScript JavaScript Date Objects - Các đối tượng thời gian JavaScript JavaScript Date Formats - Các định dạng thời gian trong JavaScript JavaScript Get Date Methods - Các phương thức lấy thời gian JavaScript JavaScript Set Date Methods - Các phương thức thiết đặt thời gian trong JavaScript JavaScript Math Object - Đối tượng toán học trong JavaScript JavaScript Math Reference - Tài liệu tham khảo thành phần toán học trong JavaScript JavaScript Random JavaScript Booleans JavaScript Comparison and Logical Operators - So sánh và các toán tử Logic trong JavaScript JavaScript if else và else if (JavaScript Conditions) JavaScript Switch Statement - Câu lệnh switch JavaScript JavaScript For Loop - Vòng lặp For trong JavaScript JavaScript While Loop - Vòng lặp While trong JavaScript JavaScript Break and Continue JavaScript Type Conversion - Chuyển đổi kiểu trong JavaScript JavaScript Bitwise Operations - Các toán tử Bitwise JavaScript Regular Expressions - Biểu thức chính quy JavaScript JavaScript Errors - Throw and Try to Catch JavaScript Scope - Pham vi JavaScript JavaScript Hoisting - Nâng lên trong JavaScript JavaScript Use Strict - Sử dụng chế độ nghiêm ngặt JavaScript The JavaScript this Keyword - Từ khóa this trong JavaScript JavaScript Let JavaScript Const - Hằng số trong JavaScript Arrow Function - Hàm mũi tên JavaScript Classes JavaScript Debugging - Gỡ lỗi trong JavaScript JavaScript Style Guide and Coding Conventions - Hướng dẫn phong cách và quy ước viết code trong JavaScript JavaScript Best Practices - Cách thực hành JavaScript tốt nhất JavaScript Common Mistakes - Những lỗi thường gặp của JavaScript JavaScript Performance - Hiệu năng trong JavaScript JavaScript Reserved Words - Các từ dành riêng trong JavaScript JavaScript Versions - Các phiên bản JavaScript ECMAScript 5 - JavaScript 5

Projects

MD5 Online Base64 UpperCase JavaScript [Ứng Dụng] Remove Vietnamese from String by Javascript




Bài tập - Quản lý đăng ký đăng nhập - LocalStorage - Lập trình Javascript

by TRẦN VĂN ĐIỆP - 19:59 02/03/2021 5,517 Lượt Xem

1. Tạo ra 1 trang web đặt tên là : register.html gồm các input (tên, tuổi, email) và button đăng ký

Khi ngươi dùng click vào button đăng ký thì lưu toàn bộ thông tin vào LocalStorage

2. Tạo ra 1 trang web mới là : show.html -> Lấy thông tin luu trong LocalStorage và hiển thị ra màn hình


Theo dõi cập nhật nội dung học trên Youtube & Facebook


Bình luận



Chia sẻ từ lớp học

TRẦN VĂN ĐIỆP [Teacher]

Ngày viết: 19:13 04/03/2021


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>Register Form - Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="register.js"></script>
</head>
<body>
	<div class="container">
		<form method="post" onsubmit="return registerNewUser();">
			<div class="form-group">
				<label>Full Name: <font color="red">*</font></label>
				<input required="true" type="text" name="fullname" id="fname" class="form-control" placeholder="Enter full name" pattern="[a-zA-Z0-9 ]{6,}">
			</div>
			<div class="form-group">
				<label>Email: <font color="red">*</font></label>
				<input required="true" type="email" name="email" id="email" class="form-control" placeholder="Enter email">
			</div>
			<div class="form-group">
				<label>Password: <font color="red">*</font></label>
				<input required="true" type="password" name="pwd" id="password" class="form-control" placeholder="Enter pwd" minlength="6">
			</div>
			<div class="form-group">
				<label>Confirmation Password: <font color="red">*</font></label>
				<input required="true" type="password" name="pwd-confirm" id="password-confirmation" class="form-control" placeholder="Enter Confirmation Pwd" minlength="6">
			</div>
			<div class="form-group">
				<label>Birthday: </label>
				<input type="date" name="bod" id="birthday" class="form-control">
			</div>
			<div class="form-group">
				<label></label>
				<button type="submit">Register</button>
				<button type="reset" class="btn-reset">Reset</button>
			</div>
		</form>
	</div>
</body>
</html>


#register.js


function registerNewUser() {
	console.log('test....')
	var fname = document.getElementById('fname').value
	var email = document.getElementById('email').value
	var password = document.getElementById('password').value
	var confirmPwd = document.getElementById('password-confirmation').value
	var birthday = document.getElementById('birthday').value

	if(password != confirmPwd) {
		alert('Mat khau nhap khong khop!!! Vui long kiem tra lai!!!')
		return false;
	}

	localStorage.setItem('fullname', fname)
	localStorage.setItem('email', email)
	localStorage.setItem('password', password)
	localStorage.setItem('birthday', birthday)

	return true;
}


#show.html


<!DOCTYPE html>
<html>
<head>
	<title>Register Form - Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="show.js"></script>
</head>
<body onload="init()">
	<div class="container">
		<div class="form-group">
			<span style="font-weight: bold;" id="fullname">Full Name: </span>
			<!-- <label id="fullname"></label> -->
		</div>
		<div class="form-group">
			<span style="font-weight: bold;" id="email">Email: </span>
			<!-- <label id="email"></label> -->
		</div>
		<div class="form-group">
			<span style="font-weight: bold;" id="birthday">Birthday: </span>
			<!-- <label id="birthday"></label> -->
		</div>
	</div>
</body>
</html>


#show.js


function init() {
	var fname = localStorage.getItem('fullname')
	var email = localStorage.getItem('email')
	var birthday = localStorage.getItem('birthday')

	document.getElementById('fullname').innerHTML += fname
	document.getElementById('email').innerHTML += email
	document.getElementById('birthday').innerHTML += birthday
}


#style.css


.container {
	width: 480px;
	background-color: #7dd1e8;
	margin: 0px auto;
	padding: 10px;
}

.form-group {
	display: flex;
	margin-bottom: 5px;
}

.form-group label {
	width: 40%;
	float: left;
	text-align: right;
	padding-right: 15px;
}

.form-group input {
	width: 60%;
	float: left;
}

.form-group button {
	width: 30%;
	margin-left: 0px;
	background-color: orange;
	border: none;
	padding: 8px;
}

.btn-reset {
	background-color: #e34516 !important;
}


Vũ Ngọc Văn [community,C2010L]

Ngày viết: 21:40 02/03/2021

https://vungocvan-aptech.herokuapp.com/0302/register.html

https://github.com/vanvu25894/02-HTML/tree/main/0302


Đào Mạnh Dũng [C2010L]

Ngày viết: 21:33 02/03/2021



<!DOCTYPE html>
<html>
<head>
	<title>login</title>
	<meta charset="utf-8">
	<style type="text/css">
		.block{

			margin-top: 60px;
			margin-left: 30%;
			border: 2px;
			background-color: #EEEEEE;
			width: 30%;

		}
		h3{

				margin-top: 10px;
				margin-left: 10px;
				
		}
		.button {
				margin-top: 10px;
				margin-left: 80px;
				margin-bottom:50px;
		}
	</style>
</head>
<body>

		<div class="block">
			<h3>
				nhập tên : <input type="text" id="name">
			</h3>
			<h3>
				nhập tuổi : <input type="number" id="age">
			</h3>
			<h3>
				nhập nhập email : <input type="email" id="email">
			</h3>
				<div class="button">
					<button onclick="save()">Đăng ký</button>
				</div>

		</div>

<script type="text/javascript">
	

			function save() {
				var name=document.getElementById('name').value
				var age=document.getElementById('age').value
				var email=document.getElementById('email').value
				var data = {
					"ten" : name,
					"tuoi" : age,
					"gmail" : email
				}
				var json1 = JSON.stringify(data)
				console.log(json1)
				localStorage.setItem('datajson',json1)
			}


</script>

</body>
</html>



<!DOCTYPE html>
<html>
<head>
	<title>login</title>
	<meta charset="utf-8">
	<style type="text/css">
		.block{

			margin-top: 60px;
			margin-left: 30%;
			border: 2px;
			background-color: #EEEEEE;
			width: 30%;

		}
		h3{

				margin-top: 10px;
				margin-left: 10px;
				
		}
		 
	</style>
</head>
<body>

		<div class="block">
			<h3 id="name">
				 
			</h3>
			<h3 id="age">
				 
			</h3>
			<h3 id="email">
				 
			</h3>
		</div>

<script type="text/javascript">
	

			var dataj= localStorage.getItem('datajson')
			var stddata=JSON.parse(dataj)
			console.log(stddata)

				document.getElementById('name').innerHTML=stddata.ten
				document.getElementById('age').innerHTML=stddata.tuoi
				document.getElementById('email').innerHTML=stddata.gmail

</script>

</body>
</html>


Nguyễn Trần Tuân [community,C2010L]

Ngày viết: 21:00 02/03/2021


#27.2.2021.html


<!DOCTYPE html>
<html>
<head>
	<title>Quản Lý Form Payment - Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="panel">
		<div class="panel-heading">
			Purchase Order Form
		</div>
		<div class="panel-body">
			<form>
			<div>
				<fieldset>
					<legend>Product Information</legend>
					<div >
						<table border="1" cellpadding="2" style="border-color: blue ">
							<tr>
								<th>Product:</th>
								<td>
									<select required="true" id="product" onchange="addUnitPrice()">
									<option value="">Select</option>
									<option value="650">Comfort Sleeper</option>
									<option value="975">Morgan Kids Bed</option>
									<option value="480">Entertainment Cabinet</option>
									</select>
								</td>
							</tr>
							<tr>
								<th>Unit Price ($):</th>
								<td><input required="true" type="number" id="unit_price" disabled="true" value="0" style="width: 45px" class="focus"></td>
							</tr>
							<tr>
								<th>Quantity:</th>
								<td><input type="number" id="quantity" disabled="true" value="0" onkeyup="updateQuantity()" style="width: 45px" class="focus"></td>
							</tr>
							<tr>
								<th>Total Price ($):</th>
								<td><input type="number" id="total_price" disabled="true" value="0" style="width: 45px" class="focus"></td>
							</tr>
						</table>
					</div>
				</fieldset>
				
				
			</div>
			<div>
				<fieldset>
					<legend>Shipping Information</legend>
					<div>
						<table border="1" cellpadding="2" style="border-color: blue ">
							<tr>
								<th>Full Name:</th>
								<td>
									<input type="text" id="full_name" class="focus">
								</td>
							</tr>
							<tr>
								<th>Shipping Address:</th>
								<td><input type="text" id="shipping_address" class="focus"></td>
							</tr>
							<tr>
								<th>Credit Card:</th>
								<td>
									<select required="true" id="credit_card" onchange="selectCreditCard()">
										<option value="">Select</option>
										<option value="650">VISA</option>
										<option value="975">Master Card</option>
										<option value="480">American Express</option>
									</select>
								</td>
							</tr>
							<tr>
								<th>Credit Card Number:</th>
								<td>
									<input type="number" id="ccn_1" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
									<input type="number" id="ccn_2" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
									<input type="number" id="ccn_3" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
									<input type="number" id="ccn_4" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
								</td>
							</tr>
						</table>
					</div>
				</fieldset>
				<fieldset class="form">
					<button type="Submit">Submit</button>
					<button type="Reset">Reset</button>
				</fieldset>
				
			</div>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="27.2.2021.js"></script>
</body>
</html>


#27.2.2021.js


function addUnitPrice(){
	var productTag = document.getElementById('product')
	var productValue = productTag.value
	var unitPrice = document.getElementById('unit_price')

	if(productValue != ''){
		unitPrice.value = productValue
		document.getElementById('quantity').disabled = false
	}
	else{
		unitPrice.value = '0'
		document.getElementById('quantity').disabled = true
	}
}
function updateQuantity(){
	quantityValue = document.getElementById('quantity').value
	unitPrice = document.getElementById('unit_price').value
	document.getElementById('total_price').value = quantityValue * unitPrice
}
function selectCreditCard(){
	var creditcard = document.getElementById('credit_card').value
	if(creditcard != ''){
		document.getElementById('ccn_1').disabled = false
		document.getElementById('ccn_2').disabled = false
		document.getElementById('ccn_3').disabled = false
		document.getElementById('ccn_4').disabled = false
	}else {
		document.getElementById('ccn_1').disabled = true
		document.getElementById('ccn_2').disabled = true
		document.getElementById('ccn_3').disabled = true
		document.getElementById('ccn_4').disabled = true
	}
}


#style.css


.panel {
	width: 500px;
	border: solid 1px grey;
	padding: 5px;
	background-color: #a8e8f1;
}
.panel-heading {
	border: solid 1px grey;
	width: 300px;
	padding: 5px;
	background-color: #4eaec1;
	font-size: 30px;

}
.focus:focus{
	background-color: yellow;
}
.form button {
	margin: 0 auto;
}
fieldset {
	margin: 8px;
	margin-left: 2px;
	border: solid 1px silver;
	border-radius: 4px;
	padding: 8px; 
}
legend {
	padding: 2px;
}
th {
	background-color: #e4e4ef;
	width: 150px;
	text-align: left;
}
td {
	background-color: #e4e4ef;
	width: 250px;
}


Vũ Trung Kiên [C2009I]

Ngày viết: 21:19 28/12/2020


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>Local Storage</title>
	<meta charset="utf-8">
	<style type="text/css">
		.FlexBlock
		{
			display: flex;
		}
		.TextSection
		{
			line-height: 25px;
			text-align: right;
			margin-left: 10px;
		}
		.InputSection
		{
			line-height: 25px;
			margin-left: 20px;
		}
		input
		{
			outline: none;
		}
		.ShowData
		{
			margin-left: 73px;
			margin-top: 3px;
		}
	</style>
</head>
<body>
	<div class="FlexBlock">
		<div class="TextSection">
			Tên: 
			<br/>
			Tuổi: 
			<br/>
			Email: 
		</div>
		<div class="InputSection">
			<form method="post">
				<input required type="text" name="Name" id="NameId">
				<br/>
				<input required type="number" name="Age" id="AgeId">
				<br/>
				<input required type="email" name="Email" id="EmailId">
				<br/>
				<input type="submit" name="Submit" value="Đăng ký" onclick="Save()">
			</form>
		</div>
	</div>
	<a href="show.html">
		<button class="ShowData">Show Data</button>
	</a>
	<script type="text/javascript">
		function Save()
		{
			name = document.getElementById('NameId').value
			age = document.getElementById('AgeId').value
			email = document.getElementById('EmailId').value
			localStorage.setItem('nameLS', name)
			localStorage.setItem('ageLS', age)
			localStorage.setItem('emailLS', email)
		}
	</script>
</body>
</html>


#show.html


<!DOCTYPE html>
<html>
<head>
	<title>Local Storage</title>
	<meta charset="utf-8">
	<style type="text/css">
		.FlexBlock
		{
			display: flex;
		}
		.TextSection
		{
			line-height: 25px;
			text-align: right;
			margin-left: 10px;
		}
		.InputSection
		{
			line-height: 25px;
			margin-left: 20px;
		}
		input
		{
			outline: none;
		}
		.Back
		{
			margin-left: 73px;
			margin-top: 3px;
		}
	</style>
</head>
<body>
	<div class="FlexBlock">
		<div class="TextSection">
			Tên: 
			<br/>
			Tuổi: 
			<br/>
			Email: 
		</div>
		<div class="InputSection">
			<form method="post">
				<input required type="text" name="Name" id="NameId" disabled>
				<br/>
				<input required type="number" name="Age"id="AgeId"  disabled>
				<br/>
				<input required type="email" name="Email" id="EmailId" disabled>
			</form>
		</div>
	</div>
	<a href="register.html">
		<button class="Back">Back</button>
	</a>
	<script type="text/javascript">
		document.getElementById('NameId').value = localStorage.getItem('nameLS')
		document.getElementById('AgeId').value = localStorage.getItem('ageLS')
		document.getElementById('EmailId').value = localStorage.getItem('emailLS')
	</script>
</body>
</html>


Phân Loại Bài Viết

Danh Sách Bài Học

Đã sao chép!!!