본문 바로가기
JavaScript

BOM & Form

by amoomar 2022. 2. 17.
반응형

 

 

BOM과 from을 통해 전달되는 value를 관리하는 방법에 대해 강의를 듣고, value를 이리 저리 옮기며 활용하는 여러 실습 예제를 통해 이해를 키웠다. 실무에 자주 사용되는 내용에 대해서만 간략하게 정리했기에, 아래 정리된 내용이 해당 단원의 전부가 아님을 알아야 한다.

 

 

 

 

 

1. BOM : 브라우저 객체 모델

 

1) BOM이란?

브라우저를 잘 사용하거나, 브라우저부터 어떠한 정보를 받아오기 위해 사용되는 것들로 객체 모델들이 이루어져 있으며, 브라우저마다 미세하게 다르기에 크롬 기준에 맞추어 작업을 하도록 한다.

브라우저창을  window라고 부르며 window는 계층 구조 중 가장 상위 개념이다.
window의 하위에 document가 속해있다. 즉, 브라우저 객체모델 중 하나가 document이라고 정리할 수 있다.

 

아래에 첨부된 포스팅을 통해 BOM의 계층구조와 기타 간략한 설명을 참고할 수 있다.

 

 

https://gkawjdgml.tistory.com/57

 

[우아한테크] 곤이 : DOM&BOM

https://www.youtube.com/watch?v=q1fQnGG1bgU 해당 영상을 시청하고 내용을 정리해보았다. 1. DOM 1) DOM이란? 웹은 html(뼈대), scc(옷), js(기능)으로 구성되어있다. 이때, Java script는 DOM을 통해 확장자가..

gkawjdgml.tistory.com

 

위 링크에서 말했다싶이 BOM에 해당하는 다양한 객체모델들이 존재하는데, 이번 포스팅에서는 그 중 일부에 대한 내용만 정리하였다.

 

 

2) window

window의 다양한 API중 open(), close()를 활용한 실습이다.

 

① 실습1_list클릭을 통해 a태그와 window.open()의 차이를 알아보자

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>window객체</title>

<style type="text/css">
	#gnb > li{
		margin: 5px;
		cursor: pointer;
		background-color: lightblue;
	}
</style>

</head>
<body>

<ul id="gnb">
	<!-- 새로운 창이 열리는 것이 디폴트 -->
	<li>팝업창 열기1</li>
	<li>팝업창 열기2</li>
	<!-- 내 페이지가 새로운 페이지가 되는 것이 디폴트 -->
	<li ><a href="http://www.naver.com/">a태그와의 차이</a></li>
</ul>

<script type="text/javascript">
	var lists=document.querySelectorAll('#gnb > li');
	
		lists[0].addEventListener('click', f1);
		lists[1].addEventListener('click', f2);
		
		function f1(){
			//URL, 이름이나 창을 오픈하는 방식, 창 크기 등의 설정 (최대인자 3개)
			window.open('https://www.naver.com/','','width=300,height=300');
		}
		function f2(){
			//자기 자신이 새로운 페이지가 되며, 지정한 크기로 열리도록 명령
			window.open('https://www.naver.com/','_self');
		}
</script>

</body>
</html>

 

주석의 내용을 확인해보면 window의 open메서드를 사용하는 것과 a태그를 사용하는 것의 차이를 확인할 수 있다.

 

실습 중 함수의 이름을 open으로 설정했었는데, 작동이 정상적으로 되지 않는 현상을 발견하였다. 기존 메서드명과 동일한 함수명은 프로그램이 작동시 헷갈릴 가능성이 있기에 함수명 정의시 주의해야한다.

 

② 실습 2_각각의 버튼을 누르면 새창을 열고, 열린 창을 닫을 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
	button{
		border: 1px solid black;
		text-align: center;
	}
	button:hover{
		cursor: pointer;
		color: red;
	}
</style>

</head>
<body>

	<button>윈도우 새창열기</button>
	<button>윈도우 새창닫기</button>

<script type="text/javascript">
	var win;//값이 null이 아님, undifined
	var btn=document.querySelectorAll('button');
	btn[0].addEventListener('click', f1);
	btn[1].addEventListener('click', f2);
	
	function f1(){
		//새창을 win에 담기
		win=window.open();
		win.document.write('<h1>새창</h1>');
	}
	function f2(){
		if(win!=undefined){//창 안열렸는데 닫음 누르면 작동 안함
			//scope 유의
			win=window.close();
		}
	}

</script>

</body>
</html>

 

 

3) location

location의 assign메서드를 통해 안에 적힌 url로 이동할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>location실습</title>
</head>
<body>
<select name="site">
	<option value="https://www.naver.com/">네이버</option>
	<option value="https://www.google.co.kr/">구글</option>
	<option value="https://itgn.cafe24.com/">코리아it아카데미</option>
</select>

<script type="text/javascript">
	var sel=document.querySelector('select');
	//select가 변경되었을때, onchange
	sel.onchange=function(){
		location.assign(this.value);//여기로 이동해주세요
	}
</script>

</body>
</html>

 

 

4) history

history.back() / forward()를 활용하여 뒤로가기, 앞으로가기를 구현할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>페이지1</title>
</head>
<body>

<a href="test05.html">앞으로 가기</a>

</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>페이지2</title>
</head>
<body>

<input type="button" value="뒤로 가기">

<script type="text/javascript">
   document.querySelector('input').onclick=function(){
      history.back();
      // history.go(-1);이렇게도 표현할 수 있다.
   }
</script>

</body>
</html>

 

 

 

5) 예제

window.confirm( ), window.prompt( )를 활용하여 사용자에게 받은 입력값을 원하는 곳에 출력하는 예제를 풀어보았다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>

<style type="text/css">
	li{
		list-style: none;
	}
	ul{
		margin: 10px;
		border: 1px solid black;
	}

</style>

</head>
<body>

<ul id="multipleChoice">
	<li><button onclick="f1()">confirm( )</button></li>
	<hr>
	<li><input id="input1" readonly="readonly"></li>
	
</ul>

<ul id="subjective">
	<li><button onclick="f2()">prompt( )</button></li>
	<hr>
	<li><input id="input2" disabled="disabled"></li>
</ul>


<script type="text/javascript">
	function f1(){
		var ask= confirm("돈까스 좋아해?");//true, false로 반환
		var input1=document.querySelector('#input1'); //input

		if(ask){
			input1.value= "의외다;; 너 스윙스 좋아하는구나!";
		}else{
			input1.value= "엥;; 돈까스가 얼마나 맛있는데..";
		}
	}
	function f2(){
		var ask= prompt("이름 입력해보세요");
		var input2=document.querySelector('#input2'); //input
	
		if(ask==null || ask==""){
		     input2.value="이름이 입력되지 않았습니다";
		} else{
		     input2.value=ask+'님 반갑습니다! :D';
		}
	}
</script>

</body>
</html>

 

 

2. Form : 유효성검사

 

1) form이란?

<form> 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(사용자의 입력)을 정의할 때 사용한다.

모든 입력값은 문자열로 들어오게 된다. 이때 사용자의 입력값을 체크해야하는 일이 발생하는데, 이 부분을 유효성 검사라고 한다. 예시는 아래와 같다.


ex) 로그인, 회원가입, 게시글 등록, 댓글 작성,...

<form> 요소는 다음과 같은 요소들을 하나 이상 포함할 수 있습니다. 각 요소들에는 다양한 이벤트 속성이 존재한다.
<button>, <fieldset>, <input>, <label>, <option>, <optgroup>, <select>, <textarea>

 

아래 포스팅에 html수업을 들으며 정리해둔 관련 단원 내용이 있어 첨부하였다.

 

https://gkawjdgml.tistory.com/44?category=1004581 

 

[HTML] table활용_회원가입

html의 텍스트요소(제목, 단락, 서식)와 form요소, input요소를 활용하여 여러 예제풀이를 통해 회원가입틀을 구축하였다. semantic markup : 제목과 글귀를 분리! logical seqence markup : tap키 (입..

gkawjdgml.tistory.com

 

 

2) 실습

 

① 체크박스, 라디오, 셀렉트의 예시와 차이

라디오: 단일 선택 가능

체크박스: 중복 선택 가능

셀렉트: 스크롤로 선택 가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>체크박스의 차이</title>
</head>
<body>

<!-- ==========================실습 1==========================  -->
<!-- name속성으로 같은 분류의 버튼임을 알고, 해당 요소의 체크가 전달되면 value가 전달된다  -->
<fieldset>
	<legend>라디오버튼</legend>
	<label>
		<input name="radio" type="radio" value="1"> 1학년
	</label>
	<label>
		<input name="radio" type="radio" value="1"> 2학년
	</label>
	<label>
		<input name="radio" type="radio" value="1"> 3학년
	</label>
</fieldset>

<!-- ==========================실습 2==========================  -->

<fieldset>
	<legend>체크박스</legend>
	<label>
		<input name="subject" type="checkbox" value="java"> java
	</label>
	<label>
		<input name="subject" type="checkbox" value="c"> c언어
	</label>
	<label>
		<input name="subject" type="checkbox" value="python"> 파이썬
	</label>
</fieldset>

<!-- ==========================실습 3==========================  -->

<fieldset>
	<legend>선택박스</legend>
	<select>
		<option selected value="0">-</option>
		<option value="1">HTML</option>
		<option value="2">CSS</option>
		<option value="3">JavaScript</option>
	</select>
</fieldset>

</body>
</html>

 

 

② 로그인폼 구축_onfocuse

<!DOCTYPE html>
<html lnag="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
	/*라벨의 경우는 디스플레이를 아래와 같이 설정 해야만 넓이 조정이 가능*/
	label{
		display: inline-block;
		width: 100px;
	}
</style>

</head>
<body>

<fieldset>
	<legend>로그인</legend>
	<label>아이디</label>
	<input type="text" placeholder="아이디입력" class="login">
	
	<br>
	
	<label>비밀번호</label>
	<input type="password" placeholder="비밀번호입력" class="login">
</fieldset>

<script type="text/javascript">
	var input=document.querySelectorAll('.login');
	for(var i=0; i<input.length; i++){
		input[i].onfocus=function(){
			this.style.backgroundColor='blue';
		}
		//아웃포커스=onblur->transparent(원상태로)
		input[i].onblur=function(){
			this.style.backgroundColor='transparent';
		}
	}
</script>

</body>
</html>

 

 

③ 전송값 제어_submit

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>submit실습</title>

<!-- =============================================================================== -->
<style type="text/css">
	/*display설정을 해야 width를 줄 수 있다.*/
	.msg{
		display: inline-block;
		width: 100px;
	}
	input:focus{
		background-color: lightblue;
	}
</style>

</head>
<body>

<!-- =========================================================================== -->
<!-- submit은 무언가 전송되는 목적이기에 form작성 -->
<!-- form에는 데이터를 전송할 목적이기에 action이 필수 속성이다 -->
<form name="loginform" action="test02.html">
	<fieldset>
		<legend>로그인 페이지</legend>
		<label class="msg">아이디</label>
		<input name="id" type="text" placeholder="아이디는 5자 이상">
		<br>
		<label class="msg">비밀번호</label>
		<input  name="passwd" type="password" placeholder="비밀번호는10자 이상">
		<hr>
		<input type="submit" value="로그인">
		<br>
	</fieldset>
</form>

<!-- =========================================================================== -->
<script type="text/javascript">
	var form=document.forms['loginform'];
	// var form=document.forms.loginform; 위와 같다
	
	//전송 버튼을 눌렀을때 익명함수 실행
	form.onsubmit=function(){
		//if중 하나라도 만족하지 못하면 false되어 전송되지 않는다.
		if(this.id.value.length < 5){
			alert('아이디는 5자 이상!');
			this.id.focus();
			return false;
		}
		if(this.passwd.value.length < 10){
			alert('아이디는 5자 이상!');
			this.passwd.focus();
			return false;
		}
	}
	
</script>

</body>
</html>

 

 

 

3) 예제

① onsearch를 활용하여 input의 값이 별도의 textBox에 전달되도록 구현

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<style type="text/css">
	input, textarea{
		width: 100%;
	}
</style>

</head>
<body>
	<fieldset>
		<legend>입력창</legend>
		<input type="search" placeholder="텍스트를 입력하세요.">
	</fieldset>
	
	<fieldset>
		<legend>텍스트 업로드</legend>
		<textarea id="content"></textarea>
	</fieldset>
	
	<script type="text/javascript">
		var search = document.querySelector('input');
		var content = document.querySelector('#content');
		search.onsearch = function(){
	    	content.value = this.value;
		}

	</script>
</body>
</html>

 

 

② 예제2

1) radio버튼과 select옵션 선택시 각각의 value가 text박스에 출력되도록 구현

2) radio버튼 클릭시 같은 value의 select옵션이 선택되도록 구현

3)  select옵션 클릭시 같은 value의 radio버튼이 선택되도록 구현

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
textarea {
   width: 100%;
}
</style>
</head>
<body>

<!-- =======================라디오 버튼=========================== -->
<fieldset>
   <legend>라디오버튼</legend>
   <label>
      <input name="grade" type="radio" value="1">1학년
   </label>
   <label>
      <input name="grade" type="radio" value="2">2학년
   </label>
   <label>
      <input name="grade" type="radio" value="3">3학년
   </label>
</fieldset>
<!-- =======================select박스=========================== -->
<fieldset>
   <legend>선택박스</legend>
   <select>
      <option selected value="0">-</option>
      <option value="1">HTML</option>
      <option value="2">CSS</option>
      <option value="3">JavaScript</option>
   </select>
</fieldset>
<!-- =======================text박스=========================== -->
<fieldset>
   <legend>선택한 결과 출력화면</legend>
   <textarea id="content"></textarea>
</fieldset>

<!-- =======================스크립트=========================== -->
<script type="text/javascript">
var radi=document.querySelectorAll('input[name="grade"]');//radio
var sel=document.querySelectorAll('select');//ALL
var sel2=document.querySelector('select');//단일
var content=document.getElementById('content');//결과출력화면

//radio addEventListener
for(var i=0; i<radi.length; i++){
	//값 변경시 content박스에 value 전달하는 함수 사용
	radi[i].addEventListener('change', f1);
	//값 변경시 select박스에 value 전달하는 함수 사용
	radi[i].addEventListener('change', f3);
}

//select addEventListener
for(var i=0; i<sel.length; i++){
	//값 변경시 content박스에 value 전달하는 함수 사용
	sel[i].addEventListener('change', f1);
	//값 변경시 radio박스에 value 전달하는 함수 사용
	sel[i].addEventListener('change', f2);
}

//함수정의
function f1(){//content박스에 값 전달
	content.value=this.value;
}
function f2(){//해당 radi[index].checked
	radi[this.value-1].checked=true;
}
function f3(){//해당 sel[index].selected
	sel2[this.value].selected=true;
}
</script>

</body>
</html>

 

위 코드에서 3)에 해당하는 문제를 푸느라 고전했는데, selectorAll로 선택한 select의 요소가 function f3에서 인덱스 값을 호출할때 option에 해당하는 노드리스트까지 불려오는 것을 간과하여 오류가 발생하였다.

 

이를 해결하기 위해 selector로 select만을 선택하였고,

또 다른 해결 방법은 selectorAll로 option을 선택하거나,

select[0].option[index]로 두번 접근하여 함수를 사용하는 것이다.

 

querySelectorAll사용시 NodeList가 불려오고, querySelector로 호출하면 Node가 불려온다. 따라서 선택할 인자가 1개일때는 selector로 사용하는 것이 좋다.

 

아래에 해당 문제의 콘솔화면을 첨부하였다.

 

 

콘솔로찍어본 화면

 

 

 

 

 

반응형

'JavaScript' 카테고리의 다른 글

URL, API  (0) 2022.02.22
타이밍 이벤트 & 단원 총정리  (0) 2022.02.18
이벤트 & DOM  (0) 2022.02.16
객체(전역,Date,Math,Array)  (0) 2022.02.15
개요부터 기본 작동까지  (0) 2022.02.14

관련글

티스토리툴바