20211021 브라우저 객체

1. 실습. 현재 페이지가 띄워진 다음 10초 카운트를 콘솔창에 출력하고
0초에 창을 닫아라.

 	<script type="text/javascript">
	var cnt=10;
	setInterval(function(){
		console.log(cnt);
		if(cnt == 0){
			close();
		}
		cnt--;
	}, 1000);
		
		</script>

 

2. 실습. 사용자에게 숫자형 데이타인 점수를 5개 받아서 평균값을 구하고 그 결괏값을
경고창으로 띄워 사용자에게 알려주는 코드를 작성하고 실행하여라.

 

1)내가 한 풀이..

 	<script type="text/javascript">
		 var age1 = prompt('숫자입력1');
		 var age2 = prompt('숫자입력2');
		 var age3 = prompt('숫자입력3');
		 var age4 = prompt('숫자입력4');
		 var age5 = prompt('숫자입력5');
		
		var a1 = Number(age1)
		var a2 = Number(age2)
		var a3 = Number(age3)
		var a4 = Number(age4)
		var a5 = Number(age5)
		var avg = (a1+a2+a3+a4+a5)/5;
		console.log(avg);
		alert('평균은'+avg);
	
		
		</script>

2) 선생님 풀이

		<script type="text/javascript">
		var sum = 0;
		var n = 5;
		for(var i=0; i<n; i++){
			sum +=Number(prompt((i+1)+'번째 점수를 임력해주세요'));
		}
		alert('당신의 평균은 '+(sum/n)+'입니다');
		</script>

---

html 요소 이벤트

- 모든 태그는 on 접두사를 가진 속성이 있다. 
- on 접두사 뒤에 오는 단어는 사용자 행위에 관련된 단어이다.
- 해당 속성의 값에는 자바스크립트 코드가 들어 갈 수 있다.
- 해당 속성의 값에서 함수를 실행시킬 수 있다.
- 함수를 실행하면서 행위대상인 태그객체를 this 키워드로 하여 행위 대상 자신을 인수에 삽입 할 수 있다.
- dom 객체에 접근이 되었다면(태그객체) 해당객체(태그) 속성에 접근이 가능하다. 

 

1)on 접두사 뒤의 click 은 사용자 행위에 관련된 단어이다. 버튼을 클릭하면 '안녕하세요' 라는 알림창이 뜬다.

<button type ="button" onclick="alert('안녕하세요');">버튼 클릭</button>

 

2) 함수를 실행 시킬 수 있다. 

<button type ="button" onclick="myFn();">버튼 클릭2</button>
function myFn(){
	 		alert('안녕하세요. 홍길동입니다.');
	 	}

 

3) this 키워드로 하여 행위 대상 자신을 인수에 삽입 할 수 있다.

this는 <buttom ~ /button> 자기자신인 태그이다. 

<button type ="button" onclick="myFn2(this);" value ="홍길동">버튼 클릭3</button>
	function myFn2(btn){ 
	 		// btn은 <button~ /button> 자기 자신이다.
	 		console.log(btn);
	 		console.log(btn.value, '버튼의 value 속성');
	 	}

---

자주 쓰이는 html 요소 이벤트 종류 (on 속성 종류)

click

- 사용자가 클릭하는 행위에 관련된 속성

 

change

- 사용자가 값을 변화 시켰을 경우에 관련된 속성
- select 태그에서 많이 쓰인다.

<select onchange ="myChange(this)">
		<option value =""> :: 선택 ::</option>
		<option value ="전주"> 전주</option>
		<option value ="군산"> 군산</option>
	</select>
	
	<script type="text/javascript">
		function myChange(obj){
			console.log(obj.value, 'change 이벤트 값 변화 확인')
		}
	</script>

 

사용자가 키 입력했을 경우와 관련된 속성

 

- keyup : 키를 눌렀다가 뗐을 경우

<input type="text" onkeyup="myKey(this, 'keyup');" placeholder ="keyup">

	<script type="text/javascript">
		function myKey(obj, type){
			console.log(obj.value, type);
		}
	</script>

 

<- 입력할 때마다 콘솔창에 출력된다.

 

 

 

- keydown : 키를 눌렀을 때

<input type="text" onkeydown="myKey(this, 'keydown');" placeholder ="keydown">

- keypress : 키를 누르고 있을 때

<input type="text" onkeypress="myKey(this, 'keypress');" placeholder ="keypress">

- blur : 커서가 없어 졌을 경우

<input type="text" onblur="myKey(this, 'blur');" placeholder ="blur">

<- 입력하고 커서를 입력창 바깥쪽에 클릭한 경우 콘솔창에 출력.

 

- focus : 커서가 생겼을 경우

<input type="text" onfocus="myKey(this, 'focus');" placeholder ="focus">

<- 해당 입력창을 클릭하여 커서가 생긴경우 콘솔창에 'focus' 출력

 

 

 

---

style 속성에 접근하기

- 모든 태그는  style 속성을 가지고 있다.
- 접근 객체는 style 속성을 조작 할 수 있다.

	<script type="text/javascript">
		function myStyle(obj, type){
			//console.log(obj.style);
			if(type == 'focus'){
				//dom 객체에는 style 속성이 있으므로 접근이 가능하다.
				//style 속성은 css style 종류를 표현하는 객체이다.
				//즉, dom 객체의 style 속성에 접근하여 css style 객체 접근 후 css style 조작이 가능하다.
				obj.style.border = '10px solid #f01';
				obj.value = '포커스 되었습니다';
				
			}else{
				obj.style.border = '';
				obj.value = '';
			}
		}
	</script>

<- 포커스 전

 

 

<- 포커스 후

 

 

 

---

1. 실습. 사용자에게 숫자형 데이타인 점수를 5개 받아서 평균값을 구하고 그 결괏값을
경고창으로 띄워 사용자에게 알려주는 코드를 작성하고 실행하여라.

 

1)내가 한 풀이

 	<script type="text/javascript">
		 var age1 = prompt('숫자입력1');
		 var age2 = prompt('숫자입력2');
		 var age3 = prompt('숫자입력3');
		 var age4 = prompt('숫자입력4');
		 var age5 = prompt('숫자입력5');
		
		var a1 = Number(age1)
		var a2 = Number(age2)
		var a3 = Number(age3)
		var a4 = Number(age4)
		var a5 = Number(age5)
		var avg = (a1+a2+a3+a4+a5)/5;
		console.log(avg);
		alert('평균은'+avg);
	
		
		</script>

2) 선생님 풀이

<script type="text/javascript">
		var sum = 0;
		var n = 5;
		for(var i=0; i<n; i++){
			sum +=Number(prompt((i+1)+'번째 점수를 임력해주세요'));
		}
		alert('당신의 평균은 '+(sum/n)+'입니다');
		</script>

 

2. 실습.

1) db에서 가지고 온 상품 목록을 라디오 박스로 구성하고
해당 라디오 박스를 선택시 상품 코드와 가격이 콘솔에 출력될 수 있도록 코드를 작성하고
실행하도록 하여라.

 

GoodsDto.java

package kr.or.ksmart.dto;

public class GoodsDto {
	
	private String goodsCode;
	private String goodsName;
	private int goodsPrice;
	
	public String getGoodsCode() {
		return goodsCode;
	}
	public void setGoodsCode(String goodsCode) {
		this.goodsCode = goodsCode;
	}
	public int getGoodsPrice() {
		return goodsPrice;
	}
	public void setGoodsPrice(int goodsPrice) {
		this.goodsPrice = goodsPrice;
	}
	public String getGoodsName() {
		return goodsName;
	}
	public void setGoodsName(String goodsName) {
		this.goodsName = goodsName;
	}
	
}

jsex02.jsp

<%
		for(int i= 0; i<goodsList.size(); i++){
		GoodsDto g = goodsList.get(i);
		
		String getGoodsName = g.getGoodsName();
		String getGoodsCode = g.getGoodsCode();
		int getGoodsPrice = g.getGoodsPrice();
		
		%>
		<%= getGoodsName %>
		<input type ="radio" onclick ="myKey(this);" value="<%="코드:"+ goodsList.get(i).getGoodsCode() %>
		<%= "," %><%="가격:"+ goodsList.get(i).getGoodsPrice() %>">
		<% }%>
	
	<script type="text/javascript">
		function myKey(obj){
			console.log(obj.value);
		}
	</script>

 

2) 실습. db에서 가지고 온 상품 목록을 select box로 구성을 하고
사용자가 select 목록에 있는 상품을 선택시 해당 상품의 가격을 콘솔에 출력하여라.

<select onchange ="myChange(this)">
		<option value =""> :: 선택 ::</option>
	
		<%
		
		for(int i= 0; i<goodsList.size(); i++){
		GoodsDto g = goodsList.get(i);
		
		String getGoodsName = g.getGoodsName();
		String getGoodsCode = g.getGoodsCode();
		int getGoodsPrice = g.getGoodsPrice();
		
		%>
	<option value ="<%=goodsList.get(i).getGoodsPrice() %>" ><%=goodsList.get(i).getGoodsName() %> </option>
 	<%} %>
	</select>
		
	<script type="text/javascript">
		function myChange(obj){
			console.log("가격은:", obj.value);
		}
	</script>

 

 

3. 실습. 제휴 업체를 select 박스로 구성하고 해당 사이트를 제휴 업체를선택 했을 경우
새창으로 해당 사이트가 접속될 수 있도록 구성하여라.

 

companyList.java

package kr.or.ksmart.dto;

public class companyList {

	private String companyName;
	private String companyLink;
	public String getCompanyName() {
		return companyName;
	}
	public void setCompanyName(String companyName) {
		this.companyName = companyName;
	}
	public String getCompanyLink() {
		return companyLink;
	}
	public void setCompanyLink(String companyLink) {
		this.companyLink = companyLink;
	}
	
	
}

-> 피드백 : 클래스명은 파스칼 표기법으로.

 

jsex03.jsp

  <%@ page import = "kr.or.ksmart.dto.companyList" %>
 <%@ page import ="java.util.ArrayList" %>
    <%
    /*
    제휴업체목록
    naver, ksmart, daum

    */
 	ArrayList<companyList> List = new ArrayList<companyList>();
 	companyList clist = null;
 	
 	clist = new companyList();
 	clist.setCompanyName("네이버");
 	clist.setCompanyLink("http://www.naver.com");
 	List.add(clist);
 	
 	clist = new companyList();
 	clist.setCompanyName("ksmart");
 	clist.setCompanyLink("http://ksmart.or.kr");
 	List.add(clist);
 	
 	clist = new companyList();
 	clist.setCompanyName("다음");
 	clist.setCompanyLink("http://www.daum.net");
 	List.add(clist);

    %>
    
    
    <select onchange ="myChange(this)">
		<option value =""> :: 선택 ::</option>
		<%
		
		for(int i= 0; i<List.size(); i++){
		companyList cl = List.get(i);
		
		String getGoodsName = cl.getCompanyName();
		String getGoodsCode = cl.getCompanyLink();
		
		%>
	<option value ="<%=List.get(i).getCompanyLink() %>" ><%=List.get(i).getCompanyName() %> </option>
 	<%} %>
 	
	</select>
	<script type="text/javascript">
		function myChange(obj){
			//open(obj.value); //새창
			//location.href = obj.value; // 페이지 이동
		}
	</script>