Language20 [JS] Uncaught TypeError: Cannot read property 'addEventListener' of null 내 코드 submit 버튼을 누르면 addEventListner가 작동하여 입력된 값들을 가지고 다음 페이지로 넘겨주어야 하는데 제대로 작동하지 않았다. 오류 내용 Uncaught TypeError: Cannot read property 'addEventListener' of null addEventListner가 null 값을 받아오고 있었다. 문제 해결 js 파일을 살펴보니 문제가 없었고, 문제는 html 파일에 있었다. html 파일과 js 파일을 연결해주는 script 코드를 html 파일의 header 태그 안에 작성하여서 페이지가 렌더링되기도 전에 작동이 되었던 것이다. 그렇기 때문에 addEventListner가 제대로 작동할 수 없었던 것이다. 그래서 script 코드를 body 밖으로 빼.. 2022. 9. 30. 객체 지향 프로그래밍 OOP 유튜브를 보다 보면 많은 채널에서 공통적으로 보이는 키워드가 있다. '객체 지향 프로그래밍 OOP(Object Oriented Programming)' 나중에 봐야지 나중에 봐야지 하다가 오늘에서야 보고 정리해본다. 객체 지향 프로그래밍은 코드를 짜는 일종의 방법론인듯 하다. encapsulation 캡슐화 inheritance 상속 abstraction 추상화 polymorphism 다형성 이렇게 4가지의 이론이 존재한다. encapsulation 데이터와 class 안에 있는 해당 데이터를 이용하는 함수를 잘 정리하는 방법론 데이터와 데이터를 활용하는 함수를 캡슐(class) 혹은 컨테이너 안에 두는 것 캡슐을 이용하여 표시할 클래스의 속성과 숨길 속성을 선택할 수 있음 어떻게 클래스 정보에 접근 혹.. 2022. 8. 4. [JS] 객체 object 프로그래밍 언어에서 객체는 여러 가지 의미로 해석할 수 있다. 자바스크립트는 웹 사이트나 웹 애플리케이션을 프로그래밍하는 언어이기 때문에 웹 브라우저나 웹 문서와 관련된 것들을 객체로 인식한다. 내장 객체 Built-in Object 프로그래밍을 할 때 자주 사용하는 요소가 미리 객체로 정의되어 있다. ex) Number, Boolean, Array, Math 등 문서 객체 모델 DOM 객체를 사용해 웹 문서를 관리하는 방식 웹 문서뿐만 아니라 웹 문서 안에 포함된 이미지·링크·텍스트 필드 등도 모두 각각 별도의 객체로 미리 만들어 놓음 브라우저 객체 모델 BOM 웹 브라우저의 주소 표시줄이나 창 크기 등 웹 브라우저 정보를 객체로 다루는 것 사용자 정의 객체 사용자가 필요할 때마다 자신의 객체를 정의해.. 2022. 8. 4. [JS] event handler 사용법 갑자기 event handler 사용법을 적는 이유는... 내가 맨날 헷갈려서 쓸 때마다 찾아보기 때문... 이벤트(event)란 무엇인가? 웹 브라우저나 사용자가 행하는 어떤 동작이다. 하지만 브라우저 안에서 이루어지는 모든 동작이 모두 이벤트가 되지는 않는다. 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 속성 설명 click 마우스로 눌렀을 때 dblclick 마우스로 두 번 눌렀을 때 mousedown 마우스 버튼을 누르는 동안 mousemove 마우스 포인터를 움직이는 동안 mouseover 마우스를 위로 올릴 때 mouseout 마우스가 바깥으로 나갈 때 mouseup 마우스 버튼에서 손을 뗄 때 속성 설명 keypress 키를 눌렀을 때 keydown 키를 누르는 동안 keyup 키에서 .. 2022. 8. 4. 이전 1 2 3 4 5 다음