Study/Javascript 13

Javascript_03: DOM(Document Object Model)의 이해

브라우저도 객체 window객체를 활용해 브라우저 열고 닫기, 크기 반환 등을 수행할 수 있다 window 객체를 자바스크립트 내에서 불러올 수 있다. 전역개체(Global Object)이다 window 객체(전역개체) window.innerWidth 브라우저 창의 너비 반환 window.innerHeight 브라우저 창의 높이 반환 window.open() 브라우저 창 열기 window.close() 브라우저 창 닫기 console 또한 window.console이지만 전역개체이므로 생략가능하다 DOM(Document Object Model) 문서 객체 모델이제껏 사용해왔던 document객체가 DOM의 최상단 객체이다 DOM은 웹페이지에 나타난 html 문서 전체를 객체로 표현한다 document 알..

Study/Javascript 2021.09.22

Javascript_02: 이벤트(Event)와 버튼

이벤트 웹페이지에서 일어나는 다양한 일 가장 대표적인 이벤트는 클릭이다 1. 쿼리셀렉터로 버튼을 가져온다 const btn = document.querySelector('#myBtn'); 2. 버튼에 이벤트 속성을 부여한다 btn.onclick = 3. 해당 이벤트 속성에 함수값을 부여한다 btn.onclick = function( ) { console.log('Hello'); } *2~3의 단계를 이벤트 핸들링(Event Handling)이라고 한다(html파일에서 속성으로 사용 가능) 4. 버튼을 누를 때마다 해당 함수가 실행된다 추가지식 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다 alert('massag..

Study/Javascript 2021.09.21

Javascript_01: 태그 연결하기

" " 내에 연결할 자바스크립트 파일명을 입력한다 *index.html과 index.js가 연결되었다 id 태그 선택은 document.getElementById( ); *get Element: 요소를 가져온다 / By Id: 아이디를 통해 document.getElementById(' id 값 ' ); 특정 id를 출력하는 구문을 만들고, html파일을 Server로 열면 '개발자도구-console'란에 출력된다 const myTag = document.getElementById('myNumber'); console.log(myTag); document.getElementById( ); id가 존재O id의 요소를 반환 id가 존재X null class 태그 선택은 document.getElements..

Study/Javascript 2021.09.21