728x90 💻 Programming/Javascript3 인터랙티브 자바스크립트 : 이벤트 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ...이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다. 이벤트가 발생했을 때 어떤 특별한 동작을 하도록 이벤트를 다루는 것을 이벤트 핸들링이라고 부른다구체적인 동작들을 코드로 표현한 함수 부분을 이벤트 핸들러라고 부른다 * 이벤트 핸들링은 js 코드 뿐만아니라 html 코드에도 작성할 수 있긴 하지만 코드의 유지보수를 위해서 js에 작성하는 편 이벤트 핸들러 등록하기 onclick 프로퍼티를 사용하.. 2024. 6. 8. 인터랙티브 자바스크립트 : 브라우저와 자바스크립트 자바스크립트는 원래 브라우저를 다루기 위해 등장한 언어 윈도우 객체는 브라우저의 창을 대변한다//window 객체 출력 console.log(window);console.log(window.innerWidth); // 탭 내부의 너비 console.log(window.innerHeigth);// 탭 내부의 높이 window.open() → 새로운 창이 열림window.close() → 새로운 창을 닫음 윈도우 객체는 자바스크립트의 다른 모든 객체를 포함하고 있다→ 따라서 윈도우 객체를 전역 개체라고도 부른다 DOM 문서 객체 모델 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록.. 2024. 6. 8. 인터랙티브 자바스크립트 : 태그 선택하기 웹 서비스와 JavaScript JavaScript웹 페이지를 다양하게 동작하도록 만들어준다 id로 태그 선택하기 document 객체의 getElementById 라는 메소드를 사용해서 id로 태그를 선택한다 // id 태그 선택하기const myTag= document.getElementById('myNumber');//접근하고자하는 id 값을 문자열로 전달한다console.log(myTag); → id 속성을 택해서 어떤 요소를 가져오겠다는 의미 ☑️실행결과myNumber를 id로 가진 태그가 출력된다 💡존재하지 않은 id를 파라미터에 넣으면 undefined가 아니리 null 값이 리턴된다 class로 태그 선택하기 document 객체의 getElementsByC.. 2024. 6. 8. 이전 1 다음 728x90
