[KH 정보교육원 당산] 47일차(자바스크립트 - 주문폼, onchange 속성 , 체크 박스 계산, 시계,숫자맞히기 게임)

체크 박스를 클릭하게 되면 "주문 정보"에 입력한 데이터가 아래 "배송 정보" 칸에 자동으로 채워지게 할 것이다.

 

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

 

첫번째

변수를 생성하여 각각의 태그들을 담아 왔다.

아래 정보에 값을 넣어 주게 되면 값이 그대로 넘어간다.

 

이 코드를 줄여보자

 

두번째

변수를 생성하지 않고 가져온 값을 바로 정보 태그에 넣어준다.

 

여기서 더 줄여보자

 

변수를 생성하지 않고 주문정보 태그의 값을 가져와 배송정보 값에 넣어준다.

 

이 코드의 문제점이있다.

체크 박스를 풀어도 값이 계속 남아있는것

 

조건문을 통하여 체크를 풀었을때 값이 지워지도록 한다.

 

최종 자바스크립트

var check = document.querySelector("#shippingInfo");
check.addEventListener("click",checkFunction);

function checkFunction() {

     if(check.checked == true)  {
        document.querySelector("#shippingName").value = document.querySelector("#billingName").value;
        document.querySelector("#shippingTel").value = document.querySelector("#billingTel").value;
        document.querySelector("#shippingAddress").value = document.querySelector("#billingAddress").value;
     } else {
document.querySelector("#shippingName").value = "";
document.querySelector("#shippingTel").value = "";
document.querySelector("#shippingAddress").value = ""; 
     }

}

 

체크를 풀면 배송정보 입력값이 사라진다.

 

---

onchange

select 박스를 선택할때 선택한 값으로 경고창을 뜨게 하는데

onchange 속성을 이용하여 자바스크립트 함수를 호출해 경고창을 출력

 

사용된 CSS

#container {
width:500px;
margin:10px auto;
}
form fieldset{
margin-bottom:25px; 
 }
 form legend{
font-size:15px;
font-weight:600; 
 }

label.reg {
font-size:14px;
width:110px;
color:#390;
font-weight:bold;
float:left;
text-align:right;
margin-right:10px;
 }  
 form ul li{
list-style:none; 
margin: 15px 0;
font-size:14px;
 }
 #selectAll {
 cursor:pointer;
 }

 

 

 

select 박스에 onchange="displaySelect()" 함수를 호출하는데 select박스가 실행 될 때, 즉 선택 될때마다 함수를 호출한다.

 

자바스크립트

select박스는 보이지는 않지만 각 문항마다 인덱스번호가 부여된다. 

 

select[optinons]

options[target.selectedIndex].text  : 셀렉트 박스 옵션 사이에 있는 텍스트 값을 가져온다
options[target.selectedIndex].value : 셀렉트 박스 value 의 값을 가져온다.

 

경고창 확인을 하면 선택박스의 글씨도 바뀌는 것을 볼 수 있다.

 

---

회원가입폼 다른 유형

 

 

사용된 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;
}

비밀번호를 입력할때 8자를 채우지 않고 다른 칸을 선택 했을경우 경고창을 뜨게 한다.

 

 

 

자바 스크립트

 

경고창이 뜨게 된다.

 

---

체크 박스 계산

 

 

사용된 CSS

#container {
  width:400px;
  margin:0 auto;
}
fieldset {
  margin-bottom:20px;
  border:1px solid #eee;
}
#total {
  border:none;
  font-size:16px;
  font-weight:bold;
}

 

체크 할때마다 기본 값에서 +

 

---

시계

 

 

매초마다 업데이트 되는 자바스크립트

 

date 객체 생성

 

date가 가지고 있는 메소드 사용(toLocaleTimeString());

 

// 다른 파일에서 스크립트를 연결해서 팝업창 띄우기
                     //open("대상" ,   "새창이름",    "가로, 세로");
window.onload = window.open("current.html", "","width=300, height=100");
// 가로 세로는 하나의 문자열이기 때문에 하나의 큰 따옴표로 묶어준다.

 

방금 사용했던 current.html을 다른 html파일(browserCheck.html)에서 스크립트를 이용하여 팝업창을 띄웠다.

---

숫자 맞히기 게임

 

빈칸에 1~10까지의 숫자를 입력하여 컴퓨터가 랜덤으로 정한 숫자 맞추기

 

범위를 벗어나는 숫자를 입력하면 경고창을 통하여 다시 입력하라고 나타나고

 

랜덤 숫자보다 낮은 값을 입력하면 up 높은 숫자를 입력하면 down 출력

 

정답입력시 정답 출력

 

HTML

 

사용된 CSS

#wrapper {
position: relative;
width: 300px;
height: 400px;
margin: 0 auto;
text-align: center;
border: 10px solid #777;
border-radius: 5px;
outline: 2px dotted #fff;
outline-offset: -6px;
}

h1 {
margin-top: 0;
padding: 10px;
background-color: #222;
color: white;
}

form {
margin-top: 40px;
}

input[type="text"] {
width: 120px;
height: 40px;
padding: 0;
border: #ccc 1px solid;
}

.btn {
width: 50px;
height: 40px;
/* border-radius:50%; */
padding: 10px 3px;
border: #ccc 1px solid;
}

.btn-1 {
background-color: azure;
}

.btn-2 {
background-color: #eee;
}

#display {
font-size: 30px;
margin-top: 70px;
}

.output {
font-size: 20px;
font-weight: bold;
}

#counter {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
}

.footer {
background-color: #222;
color: white;
line-height: 30px;
}

.quest {
font-family: arial;
font-size: 30px;
color: darkorange;
text-shadow: 1px 1px 3px #222;
padding: 2px 1px;
}

Math 클래스가 가지고 있는 메소드 사용(random,floor)

키를 눌렀을때 이벤트 실행 => onkeydown

반대로 키가 눌렸다가 다시 올라왔을때 => onkeyup

 

document.querySelector("#try").onkeydown = function(e){

       

if~~~~~~~~{

     retrun false; => 추가 false값을 리턴 시키므로써 사용자가 엔터를 쳤을때도 리로딩(새로고침)이 되지 않는다.

      }

}

 

---