히바리 쿄야 와 함께 하는 Developer Cafe
[4일차] DO IT 자바스크립트/P291~ 345/ Form ~ BOM 본문
order.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>결제하기</title>
<link rel="stylesheet" href="css/order.css">
</head>
<body>
<div id="container">
<form name="order">
<fieldset>
<legend> 주문 정보 </legend>
<ul>
<li>
<label class="field" for="billingName">이름 : </label>
<input type="text" class="input-box" id="billingName" name="billingName">
</li>
<li>
<label class="field" for="billingTel">연락처 : </label>
<input type="text" class="input-box" id="billingTel" name="billingTel">
</li>
<li>
<label class="field" for="billingAddr">주소 : </label>
<input type="text" class="input-box" id="billingAddr" name="billingAddr">
</li>
</ul>
</fieldset>
</form>
<form name="ship">
<fieldset>
<legend> 배송 정보 </legend>
<ul>
<li>
<input type="checkbox" id="shippingInfo" name="shippingInfo">
<label for="bill_info" class="check">주문 정보와 배송 정보가 같습니다</label>
</li>
<li>
<label class="field" for="shippingName">이름 : </label>
<input type="text" class="input-box" id="shippingName" name="shippingName">
</li>
<li>
<label class="field" for="shippingTel">연락처 : </label>
<input type="text" class="input-box" id="shippingTel" name="shippingTel">
</li>
<li>
<label class="field" for="shippingAddr">주소 : </label>
<input type="text" class="input-box" id="shippingAddr" name="shippingAddr">
</li>
</ul>
</fieldset>
<button type="submit" class="order">결제하기</button>
</form>
</div>
<script src="js/order.js"></script>
</body>
</html>
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
legend {
font-size: 1.2em;
font-weight: bold;
margin-left: 20px;
}
form {
width: 520px;
height: auto;
padding-left: 10px;
margin: 50px auto;
}
fieldset {
border: 1px solid #c0c0c0;
padding: 30px 20px 30px 30px;
margin-bottom: 35px;
}
.field {
float: left;
width: 60px;
font-weight: bold;
font-size: 0.9em;
line-height: 55px;
text-align: right;
margin-right: 15px;
}
.input-box {
width: 350px;
height: 35px;
border: 1px solid #aaa;
border-radius: 5px;
padding: 5px;
margin: 10px 0;
float: left;
}
.order {
width: 100%;
padding: 20px;
border: 1px solid #aaa;
background: #e9e9e9;
font-size: 1em;
font-weight: bold;
}
js
var check = document.querySelector("#shippingInfo");
check.addEventListener("click", function(){ // 클릭 했을 시에 클릭 이벤트가 발생하였을때
if(check.checked == true){ //체크 하면
document.querySelector("#shippingName").value = document.querySelector("#billingName").value; //주문정보를 배송정보에 복사
document.querySelector("#shippingTel").value = document.querySelector("#billingTel").value; //주문 전화번호 배송 전화번호에 복사
document.querySelector("#shippingAddr").value = document.querySelector("#billingAddr").value; //주문자 주소를 배송 주소로 복사
}
else{ //체크가 해제 되면 배송 정보 필드 를 지운다
document.querySelector("#shippingName").value = "";
document.querySelector("#shippingTel").value = "";
document.querySelector("#shippingAddr").value = "";
}
});
document.forms[0].elements[0].value -> 배열의 인덱스와 같다고 보면 된다
현재 문서 첫번째form 첫번째 요소 값
register html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/register.css">
<title>회원 가입</title>
</head>
<body>
<div id="container">
<h1>회원 가입</h1>
<form action="#" id="register">
<ul id="user-info">
<li>
<label for="user-id" class="field">아이디</label>
<input type="text" id="user-id" placeholder="4~15자리의 영문과 숫자로 입력" required>
</li>
<li>
<label for="email" class="field">이메일</label>
<input type="email" id="email" required>
</li>
<li>
<label for="user-pw1" class="field">비밀번호</label>
<input type="password" id="user-pw1" placeholder="8자리 이상" required>
</li>
<li>
<label for="user-pw2" class="field">비밀번호 확인</label>
<input type="password" id="user-pw2" required>
</li>
<li>
<label class="field">메일링 수신</label>
<label class="r"><input type="radio" value="yes" name="mailing">예</label>
<label class="r"><input type="radio" value="no" name="mailing">아니오</label>
</li>
</ul>
<ul id="buttons">
<li>
<button type="submit" class="btn btnBlack">가입하기</button>
</li>
<li>
<button type="reseet" class="btn btnGray">취소</button>
</li>
</ul>
</form>
</div>
<script src="js/register.js"></script>
</body>
</html>
css
#container{
width:600px;
margin:0 auto;
}
ul {
list-style:none;
}
ul li {
clear:both;
}
.field {
float:left;
width:100px;
font-weight:bold;
font-size:0.9em;
line-height: 55px;
text-align:right;
margin-right:15px;
}
input[type="text"], input[type="password"], input[type="email"] {
float:left;
width:350px;
height:35px;
border:1px solid #aaa;
border-radius:5px;
padding:5px;
margin:10px 0;
float:left;
}
.r {
line-height:55px;
}
#buttons > li {
display:inline-block;
}
button {
width:250px;
height:50px;
margin-right:10px;
border:1px solid #ccc;
background:#eee;
font-size:0.9em;
}
js
var userId = document.querySelector("#user-id"); // 아이디 필드값을 가져와서 변수에 저장
var pw1 = document.querySelector("#user-pw1"); // 비번 필드값을 가져와서 변수에 저장
var pw2 = document.querySelector("#user-pw2"); // 비번 확인 필드값을 가져와서 변수에 저장
userId.onchange = checkId; //아이디 메소드 실행
pw1.onchange = checkPw; //비밀번호 메소드를 실행
pw2.onchange = comparePw; //비밀번호 확인을 위한 메소드 실행
function checkId(){
if(userId.value.length < 4 || userId.value.length > 15){ //userId 길이가 4이하 이거나 15이상일 경우
alert("4~15 자리의 영문과 숫자를 입력하세요.");
userId.select();
}
}
function checkPw(){
if(pw1.value.length < 8){
alert("비밀번호는 8자리 이상이어야 합니다."); // 오류 메세지 표시
pw1.value = ""; //비밀번호 필드 지움
pw1.focus(); // 다시 입력할 수 있게 해줌
}
}
function comparePw(){
if(pw1.value != pw2.value){
alert("비번이 다릅니다. 다시 입력하세요.");
pw2.value = ""; //비밀번호 확인 필드 지운다
pw2.focus(); //비밀번호 다시 입력할 수 있게 해줌
}
}
input 태그의 속성
autofocus -> 해당 필드에 마우스 커서를 자동으로 표시
autocomplete -> 자동 완성 기능을 켜고 끄는 속성
placeholder -> 필드 안에 힌트가 표시되어 사용자에게 어떤 내용을 입력해야 하는지 알려줌
required -> 필수 입력 항목으로 지정 . 필드가 작성하지 않으면 오류메세지를 표시하며 다음단계로 넘어갈 수 있다.
BOM(Brouser Object Model 의 약자)
- 브라우저에 대한 모든 내용을 담고있는 객체. 브라우저에 관련 된 내용 모두
- 뒤로가기, 북마크, 즐겨찾기, 히스토리, URL정보 등..
- 브라우저가 가지고 있는 정보를 따로 객체화 시켜서 관리함
자주 사용하는 브라우저 내장 객체
Window - 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 . 브라우저 창 안에 존재하는 모든 요소의
최상위 객체
Document - 웹 문서에서 <body> 태그를 만나면 만들어지는 객체. HTML 문서 정보를 가지고 있다.
History - 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
Location - 현재 페이지에 대한 URL 정보를 가지고 있는 객체
Navigator - 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
Screen - 현재 사용 중인 화면 정보를 다루는 객체
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>브라우저 체크</title>
</head>
<body>
<h1>브라우저 체크</h1>
<script>
var agent = navigator.userAgent.toLowerCase(); // userAgent 문자열을 소문자로 변환
var name = navigator.appName;
if(name == "Internet Explorer" || agent.indexOf("triden") > -1 || agent.indexOf("edge/") > -1) { // ie 이거나 엣지
if(name == "Internet Explorer") document.write("IE 10 이하 버전입니다.");
else {
if (agent.indexOf("trident") > -1) document.write("IE 11 브라우저입니다.");
else if (agent.indexOf("edge/") > -1) document.write("MS Edge 브라우저입니다.");
}
}
else if (agent.indexOf("safari") > -1) { // 크롬이거나 사파리
if(agent.indexOf("chrome") > -1) document.write("Chrome 브라우저입니다.");
else if(agent.indexOf("safari") > -1) document.write("Safari 브라우저입니다.");
}
else if (angent.indexOf("firefox") > -1) document.write("Firefox 브라우저입니다.");
else if (agent.indexOf("opera") > -1) document.write("Opera 브라우저입니다.");
</script>
</body>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>현재 시각은?</title>
<style>
#current {
margin-top:20px;
}
.display {
font-size:26px;
font-weight:bold;
color:blue;
text-align:center;
}
</style>
</head>
<body>
<div id="current" class="display"></div>
<script>
setInterval(displayNow, 1000);
function displayNow() {
var now = new Date();
document.querySelector("#current").innerHTML = now.toLocaleTimeString();
}
</script>
</body>
</html>
'JAVASCRIPT' 카테고리의 다른 글
| [6일차] HTML/CSS/JAVASCRIPT 웹 표준의 정석/p554 ~ p643/ 자바스크립트 객체,DOM (0) | 2021.03.08 |
|---|---|
| [5일차] DO IT HTML/CSS/JAVASCRIPT 웹표준의 정석/p441~p552/자바스크립트기초,자바스크립트문법,함수와이벤트 (0) | 2021.03.05 |
| [3일차] DO IT 자바스크립트 / p195~ 289 / Array ~ DOM (0) | 2020.12.30 |
| [2일차] DO IT 자바스크립트/ P142~193/ 이벤트 (0) | 2020.12.29 |
| [1일차] DO IT 자바스크립트 /P14 ~ 124/ 04. 제어문 (0) | 2020.12.28 |
