국비코딩 Feb09 | EventListener, 익명함수, keycode로 전송하기, location객체, 부모 자식 창 연결하기
‣ 태그를 객체라고 부르는 이유 : 생김새가 비슷함, attr와 value가 둘 다 있음
‣ .(점)찍고 들어가는게 직접 접속
그거 말곤 get이나 set을 활용해서 들어감
‣기본 속성을 볼려면 배열안에 넣어봐
console.log([monkey])이런 식
이렇게 event를 인자값으로 넣어주면, 가지고 있는거 다 내놔 가 되는거임
그래서 모든 속성 볼 수 있음
이렇게!
이벤트객체를 받을 때 event를 넣어주면되고
반대로 이벤트가 발생된 당사자의 정보를 받을 대는 인자값으로 this를 넣어준다
‣ 타이핑한 내용을 console에 찍는 단계
처음에 body에서 tag에 함수걸고 script에 같은 이름의 함수를 선언하고
1. console찍어서 이벤트 발생시 함수 호출 되는지 확인
2. 원하는 태그 getElementById로 가져오고 제대로 가져왔는지 console로확인
3.태그확인하고
4.특정요소 고쳤을때고쳐지는지 확인하고
‣ 이벤트 리스너 걸어주는 단계
1. 이벤트 걸어줄 태그를 가져와서 변수로 선언 (안하고 한번에 해도됨)
var txtinput = document.getElementById('textinput');
var zone = document.getElementById('eventZone');2. 이벤트 리스너 추가해주기
textinput.addEventListener('focusin',fcin);
//OR
textinput.addEventListener('focusout',function(){
});(태그.addEventListener('이벤트명', 실행함수)
OR
(태그.addEventListener('이벤트명', function(){
});
🔼 이렇게 익명함수(이름이 선언되지 않은 함수)를 선언할 수 있는거는
이 함수가 여기서밖에 안쓰일거라고 생각해서임 (ex focusin이나 focusout같은거)
🔼 실행함수에 ()를 붙여주지 않음, 붙이게 되면 함수로 받아서 이벤트가 발생안하더라도 그냥 실행을 해버림
‣ 순서대로 나오려면 배열이 가장 효과적
‣ 자바스크립트는 이벤트 동기 방식
이벤트 동기 방식 : event가 일어나서 실행이 되는 방식
<-> 선행 방식 : 시작! 하면 줄줄 실행되는 방식
‣ keycode를 통해 서버에 전송하기
txtinput.addEventListener('keyup',function(evt){
console.log(evt.keyCode);
//저 객체 속성중 keyCode를 가져옴 그럼 콘솔창에 숫자만 떠
//-> 이걸로 치면 안될 키도 정해줄 수 있어
//-> 또 이걸로 엔터를 누르면 서버에 전송할 수도 있어
if (evt.keyCode ==13) {
console.log('전송');
}
});‣ 객체명, this, evt.target 을 통해 핸들링할 요소를 가져오기 (다 가능!)
zone.addEventListener('click',function(){
zone.style.backgroundColor = 'blue';
})
zone.addEventListener('dblclick',function(){
//이벤트리스너에서는 this 그냥 사용 가능
this.style.backgroundColor = 'orange';
})
zone.addEventListener('mouseenter',function(evt){
console.log(evt);
//evt.target ==this
evt.target.style.backgroundColor = 'beige';
})‣ window 오픈할 때
1. body에 button을 넣고 클릭하면 윈도우를 열고 꺼주는 함수를 넣는다
<body>
<button onclick="myWindow()">open window</button>
<button onclick="closeWin()">close window</button>
</body>2. 변수 win 선언해준뒤 윈도우를 켜는 함수 myWindow()를 선언함
var win;
function myWindow(){
}3. 함수 내용 작성, 변수 win에 window.open('링크','제목(잘 안써)', '옵션(width,top, resizable, scrollba 등)') 넣어줘
function myWindow(){
console.log('window open');
win = window.open('https://www.w3schools.com/', '',
'width=400, height=400, top=500, left=500, resizable =no, scrollbar=no');4. 윈도우를 끄는 함수도 동일하게 만들어주기
function closeWin() {
win.close();
}‣ location 객체
: 창을 이동시키거나 이동 주소에 대한 정보 제공해준다
console.log('href : ', location.href); //현재 페이지가 존재하는 경로
console.log('protocol : ',location.protocol); //http or https인지를 보여주는것
console.log('hostname : ',location.hostname); // 네트워크상에서 도메인
console.log('pathname : ',location.pathname); //도메인을 제외한 나머지 주소
console.log('port : ',location.port); // 도메인 주소🔼 서버환경에서 실행해야한다
‣ 부모 자식 연결
win = window.open('https://www.w3schools.com/', '',
'width=400, height=400, top=500, left=500, resizable =no, scrollbar=no');원하는 결과 : 부모 input type="text" 에 입력하고 input type="button"버튼을 누르면 자식 창에 뜬다
단계 :
1. 버튼에 함수 넣어놓고 <body>에 함수 선언
2. 부모창에 넣을 값을 변수로 선언 (자식 -> 부모 값주기 위해 자식 코드에 부모창 부를때는 opener로 하면됨)
3. 먼저 보낼 값을 var val로 선언하고
4. 자식창(부모창)에서 받을 곳 = val;
해줘
부모창
<body>
<button>open browser</button>
<button>close browser</button>
<br/>
자식창으로 보낼 데이터 : <input type="text" id="toChild"/>
<input type="button" value="보내기" onclick="sendVal()"/>
<br/>
자식창에서 보낸 데이터 : <input type="text" id="fromChild"/>
</body>
<script>
var win;
var btn = document.getElementsByTagName('button');
console.log(btn);
btn[0].addEventListener('click',function(){
win = window.open('./09_child.html', '', 'width=430, height=118');
})
btn[1].addEventListener('click',function(){
win.close();
})
function sendVal(){
// console.log('자식으로 데이터 보내기');
var val = document.getElementById('toChild').value;
win.document.getElementById('fromParent').value = val;
console.log(val);
}
function plus(a,b){
console.log('부모 함수 plus 실행 : ', a+b);
}
</script>자식창
<body>
<h3>자식창</h3>
value from parent browser : <input type="text" id="fromParent"/>
<br/>
value to parent browser : <input type="text" id="toParent"/>
<input type="button" value="send" onclick="sendVal()"/>
</body>
<script>
function sendVal(){
console.log('부모에게 데이터 보내기');
var val = document.getElementById('toParent').value
opener.document.getElementById('fromChild').value='val';
}
</script>