본문 바로가기

프로그래밍 공부

 (214)
JavaScript - 이벤트 발생 객체와 이벤트 객체 / 이벤트 강제 실행 자바스크립트에서 이벤트의 객체를 사용하면 '누가, 언제, 어디서, 무엇을, 어떻게, 왜'를 정의 할 수 있다. 이벤트 리스너 안에 this 키워드를 사용하면 이벤트가 발생한 객체 즉 '누가'를 찾을 수 있다. this 키워드를 사용하면 특정한 이벤트(click 같은)가 실행되었을 때 style을 바꾸는 것도 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 Document window.onload=function(){ document.getElementById('header1').onclick=function(){ this.style.color='red'; this.s..
JavaScript - 고전 이벤트 모델(기본 이벤트 모델) 고전 이벤트 모델(기본 이벤트 모델)은 문서 객체 이벤트 속성이고 이벤트를 연결하는 방법이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Document window.onload=function(){ let header=document.getElementById('header'); header.onclick=function(){ alert('클릭'); header.onclick=null; } } Click 클릭 documentHeader.onclick=function(){ alert('Click'); documentHeader.onclick=null; } Colored by Color Scripter cs 위의 코..
JavaScript - 이벤트 종류 1-1. 마우스 이벤트 이벤트 이름 설명 mouseenter 포인터가 이벤트 핸들러로 등록된 요소 위로 이동했을 때 mouseover 포인터가 이벤트 핸들러로 등록된 요소나 그 자식 요소 위로 이동했을 때 mousemove 포인터가 요소 위에서 이동했을 때(이동하는 동안 계속 실행) mousedown 포인터를 요소 위에서 버튼을 누를 때 mouseup 포인터를 요소 위에서 버튼을 뗄 때 auxclick 포인터로 왼클릭(주 클릭)이 아닌 버튼으로 요소를 클릭할 때 click 포인터로 왼클릭(주 클릭)으로 요소를 클릭할 때 dbclick 포인터로 요소를 두번 클릭 할 때 contextmenu 포인터로 우클릭(보조 클릭)으로 요소를 클릭할 때(컨텍스트 메뉴 표기 전) wheel 포인터에 휠 버튼을 어떤 방향이..
JavaScript - 이벤트 개요 이벤트는 웹 브라우저가 사용자와 상호작용을 할 수 있도록 해주는 기능이다, 대표적인 이벤트의 종류로는 아래의 7가지가 있다. 1. 마우스 이벤트 2. 키보드 이벤트 3. HTML 프레임 이벤트 4. HTML 입력 양식 이벤트 5. 유저 인터페이스(UI) 이벤트 6. 구조 변화 이벤트 7. 터치 이벤트 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Document window.onload=function(){ let header=document.getElementById('header'); function whenClick(){ alert('CLICKED'); } header.onclick=whenClick; } Click Colored by Color Scripte..
2019년 12월 17일 스터디 기록 1. 문서 객체 선택 : https://miyakita.tistory.com/115 JavaScript - 문서 객체 선택 웹 페이지에 존재하는 HTML 태그를 가져오는 방법은 여러가지가 있는데, HTML 태그에서 개발자가 지정한 id 선택자를 이용해 그 아이디를 선택해 가져오는 방법이 있다. 메서드 이름 설명 getElementById(id) 태.. miyakita.tistory.com 2. 문서 객체 스타일 조작 / 문서 객체 제거 : https://miyakita.tistory.com/116 JavaScript - 문서 객체 스타일 조작 / 문서 객체 제거 문서 객체의 스타일을 조작하려면, 일단 문서 객체를 가져온 다음에 style 속성을 사용해 바꾸면 된다. 입력 방식은 CSS3에 입력하는 방식과..
JavaScript - 문서 객체 스타일 조작 / 문서 객체 제거 문서 객체의 스타일을 조작하려면, 일단 문서 객체를 가져온 다음에 style 속성을 사용해 바꾸면 된다. 입력 방식은 CSS3에 입력하는 방식과 비슷하지만 background-color, background-image 또는 box-sizing 같이 -가 들어가는 경우 backgroundColor, backgroundImage 그리고 boxSizing등으로 -를 제거하고 뒤에있는 단어의 시작을 대문자로 바꿔주어서 나뉘지않고 하나로 쓸수 있게 변경해야 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Document window.onload=function(){ let header1=document.getElementById('header1'); let ..
JavaScript - 문서 객체 선택 웹 페이지에 존재하는 HTML 태그를 가져오는 방법은 여러가지가 있는데, HTML 태그에서 개발자가 지정한 id 선택자를 이용해 그 아이디를 선택해 가져오는 방법이 있다. 메서드 이름 설명 getElementById(id) 태그의 id 속성이 매개변수와 일치하는 객체를 선택 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Document window.onload=function(){ // getElementById() 메서드로 각각 id가 'header-1' // 그리고 'header-2'인 html 태그를 선택한다. let header1=document.getElementById('header-1'); let header1=document..
[프로그래머스] 자바스크립트 LV1 모의고사 모의고사 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution ..

티스토리툴바