1. Event Lister
- 이벤트를 등록하는 방식은 속성추가 방식과 이벤트리스너 방식이 있다.
<body>
<h4 id="msg">FOCUS NULL</h4>
<input id="txtinput" type="text"/>
</body>
<script>
var input = document.getElementById("txtinput");
input.addEventListener('focusin',fcsin);//함수 괄호는 쓰면안된다
input.addEventListener('focusout',fcsout);
function fcsin(evt){
console.log('focusin',evt);
document.getElementById('msg').innerHTML = "FOCUS IN";
input.style.backgroundColor ='pink'
}
function fcsout(evt){
console.log('focusout',evt);
document.getElementById('msg').innerHTML = "FOCUS OUT"
input.style.backgroundColor ='skyblue'
}
//하나의 이벤트에서만 함수를 사용할 경우 익명함수를 사용
input.addEventListener('keyup',function(evt){
console.log(evt);//키업이벤트에 대한 모든것
//역슬래쉬를 누르면 '사용할수 없는 키입니다.'라는 경고 나타나게
if(evt.keyCode==191){
alert('사용할 수 없는 키 입니다.');
}
document.getElementById('msg').innerHTML = evt.key;
});
</script>- focusin : 어떤 부분을 선택했을 때 일어남
- focusout : focusin인 부분 외에 다른 곳을 선택했을 때 일어남
- keyup : 키를 눌렀다 뗐을 때 일어남
- 15 : focusin일 때 fcsin함수 동작 -> 이벤트리스너에서는 함수괄호 안씀
- 16 : focusout 일 때 fcsout 함수 동작
- 28 : 콘솔에 인자값을 넣어주면 이벤트에 대한 모든것을 볼수 있다.
- 30 : keyCode가 191(역슬래쉬, 이벤트콘솔에서 확인가능)일 때 실행문 띄우기
- 33 : keyCode가 191인 key msg에 입력받기
- click : 클릭
- dbclick : 더블클릭
- mousedown : 마우스 버튼을 눌렀을 때
- mouseup : 마우스 버튼을 눌렀다 뗐을 때
- mouseover : 마우스를 올렸을 때
- mousemove : 마우스가 움직일 경우
- mouseenter : 마우스가 특정 영역 진입시
- mouseout : 마우스가 특정 영역 이탈시 document.addEventListener('mousemove', currpos);
//문서 아무것이나 클릭 시 클린한 위치의 좌표를 보여주도록..
function currpos(e){
/*console.log('move', e);*/
var pos = document.getElementById('pos');
pos.innerHTML = 'x : ' + e.screenX + ' / y :' + e.screenY;
}- 마우스의 위치는 x,y좌표로 출력 <body>
<h2 id="txt">글자 색상이 변경됩니다.</h2>
<button id="btn">색상 변경</button>
</body>
<script>
var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
var color = ['red' ,'orange','yellow','green','blue','navy','pupple'];
var i = 0;
btn.addEventListener('click', click );
function click(){
txt.style.color= color[i];
i++;
if(i == color.length){
i = 0;
}
}
</script>- 버튼 클릭시 마다 텍스트 색상이 변경하는 코드이다.2. BOM(Browser Object Model)
- html과 자바스크립트는 브라우저 안에서만 실행이 된다.
- BOM은 DOM보다 한 단계 더 큰 개념1. window & opener
<body>
<p id="info"></p>
<button>창열기</button>
<button>창닫기</button>
</body>
<script>
var height = window.innerHeight;
var width = window.innerWidth;
document.getElementById('info').innerHTML = width + " / " + height;
var mywin;
var btn = document.getElementsByTagName('button');
btn[0].addEventListener('click', function(){
//'url','name','option'
var url="http://www.naver.com";
//option : resizable=[yes|no](default=yes),height,width,top,left
mywin = window.open(url,'','width=' +width/0.5 +',heigth='+height/0.5+'top=20,left=20');
});
btn[1].addEventListener('click', function(){
mywin.close();
});
</script>- window는 브라우저의 창을 의미한다.
- window.open(); : 팝업차단에 대해 막혀있어서 잘 안쓴다.
- 세개의 인자값을 갖는다.
- url : open할 페이지의 주소
- name : 이름
- option : resizable =[yes or no] ( default = yes ) , height, width, top, left
- mywin.close() : window.close() 하면 자신의 창을 닫을 수도 있기 때문에 새창에 변수를 지정하여 닫아준다.
- window.innerHeigth : 창 높이
- window.innerWidth : 창 너비2. 부모창과 자식창
- 새 창은 열면 새 창은 자식, 기존창은 부모가 된다.
- 자식입장에 부모창은 opener라고 한다.
- 부모와 자식 사이에서 데이터를 전달 할 수 있다.
- parent
<body>
<p id="info"></p>
<button>창열기</button>
<button>창닫기</button>
<br/>
자식 창으로 보낼 값 : <input type="text" id="tochild" value=""/>
<button onclick="sendval()">보내기</button><br/>
자식 창에서 보낸 값 : <input type="text" id="fromchild" value=""/>
</body>
<script>
var mywin;
var btn = document.getElementsByTagName('button');
btn[0].addEventListener('click',function(){
mywin = window.open('12_child.html','','height=100, width=420');
});
btn[1].addEventListener('click',function(){
mywin.close();
});
function sendval(){
var val = document.getElementById('tochild').value;
//아래 내용은 서버가 없는 현재 사용이 안된다.
//서버없이 js끼리의 통신은 보안에 문제가 많기 때문에 막고있다.
//mywin.document.getElementById('fromparent').value = val;
//그래서 js끼리 통신할때는 아래 내용을 사용한다.(html5전용이라 IE11이하에서 x)
mywin.postMessage(val,'*');//* : 문자열로 모든 윈도우로 전달
}
window.addEventListener('message',function(e){
console.log(e);
document.getElementById('fromchild').value = e.data;
});
</script>- child
<body>
부모 창에서 받은 값 : <input type="text" id="fromparent" value=""/>
<br/>
부모 창으로 보낼 값 : <input type="text" id="toparent" value=""/>
<button onclick="sendval()">보내기</button>
</body>
<script>
//메세지가 왔을 경우만 동작하는 이벤트(postMassage전용)
window.addEventListener('message',function(e){
console.log(e);
document.getElementById('fromparent').value = e.data;
});
function sendval(){
var val = document.getElementById('toparent').value;
//아래 내용은 서버가 없는 현재 사용이 안된다.
//서버없이 js끼리의 통신은 보안에 문제가 많기 때문에 막고있다.
//opener.document.getElementById('fromchild').value = val;
//그래서 js끼리 통신할때는 아래 내용을 사용한다.(html5전용이라 IE11이하에서 x)
opener.postMessage(val,'*');
}
</script>- 서버가 있으면 보낼 값을 변수에 넣고 그 변수를 상대방 창의 문서의 id를 받아와 값을 넣어 데이터를 보낼 수 있다.
- 서버없이 자바스크립트끼리의 통신은 보안에 문제가 많기 때문에 막고있다.
- 그래서 자바스크립트끼리 통신 할 때는 postMessage()를 사용한다.
- postMessage() : 보낼 값을 넣어주면 상대방에 있는 message이벤트를 통해 상대방이 보낸 값을 받을 수 있다.
- message 이벤트를 사용해서 서로 보낸 값을 받아올 수 있다.
- data에 보내는 값이 담기기 때문에 e.data로 받아올 수 있다.3. alert
- 브라우저에서는 새창 이외에도 경고창을 제공한다.<script>
function popup(){
console.log('1');
alert('경고창');//경고의 역할
console.log('2');//break 역할 수행, 경고창을 닫지 않으면 2 수행 못함
}
function conf(){
var result = confirm('정말 삭제하시겠습니까?');
console.log(result);
if(result){
alert('삭제되었습니다.')
}
}
function pormp(){
var name = prompt('당신의 이름은 무엇입니까?');
//아무것도 입력하지 않았을 때
if(name == null|| name=="" ||name==" "){
alert('이름을 입력해 주세요');
}else{
alert(name + '님 반갑습니다.');
}
}
</script>- alert : 경고의 역할을 한다. break의 역할도 수행해서 창을 닫지 않으면 뒷 내용을 실행 못한다.
- confirm : 확인을 받는 창이다. 확인과 취소 버튼이 있어 확인 시 어떠한 실행을 해줄 수도 있다.
- prompt : 무언가를 입력 받는 창이다. 요즘엔 많이 쓰지 않는다.
개발이좋아요