power-girl0-0

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 프로퍼티 리스너 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식이지만, 뒤에서 배울 addEventListener 방식을 추천한다. 위 소스코드와 같이, html과 javascript로 분리한 것을 확인할 수 있다. 여기서, t.onclick 변수 안에 들은 함수를 이벤트 핸들러라고 부른다. 이벤트 객체 이벤트가 실행된 맥락의 정보가 필..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) inline ( 인라인 방식 ) 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다. 아래 예제는, 버튼을 클릭했을 때 Hello world를 경고창으로 출력한다. 이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 자기 자신을 참조할 수 있다. 위 코드에서 2줄의 document.getElementByID('target').value는 this.value라고 작성해도 같은 결과값이 출력된다. 왜냐하면, document.getElementByID('t..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 요소의 크기와 위치 아래 예제를 통해서 element의 크기를 알아내는 방법을 살펴보자. (실행 결과) Coding 위 소스코드를 실행한 결과 아래와 같이 출력되며, 크기에 대한 것은 보기 쉽게 직접 그린 것이다. 즉 element의 테두리와 body 태그 사이의 거리가 50px이고, 테두리를 포함한 element의 크기는 300px이다. 해당 값을 알아내고 싶을 때, 사용하는 API가 getBoundingClientRect이다. 이 api를 콘솔에서 실행하면, 아래와 같..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) Text 객체 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 이를 통해서 텍스트 정보를 프로그래밍적으로 제어할 수 있게 해주는 객체이다. 아래는 두 문자열을 출력하는 예제이다. Hello world Hello world target1의 첫번째 자식노드는 무엇일까? Hello world이다. 그렇다면, target2의 첫번째 자식노드는 무엇일까? #text가 나온다. 왜냐하면, DOM에서는 공백이나 줄바꿈도 텍스트 노드이기 때문이다...

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) Document 객체 Document 객체는 DOM의 시작점이고, 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. 실행 결과는 아래와 같이 출력된다. 웹 페이지에서 가장 최상위라고 할 수 있는 것인 과 코드가 있는 것을 확인할 수 있다. 이것을 갖고 있는 객체는 document객체이므로, 문서 전체를 대표하는 객체라고 할 수 있다. 주요 API 노드 생성 API..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 노드 변경 API에서는 여러 메소드를 이용해서 노드를 제어하는 방법에 대해서 알아봤다. 그런데 이 방식은 복잡하고 장황하므로, 좀 더 편리하게 노드를 조작하는 방법을 알아보자. innerHTML innerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공하며, 자식 노드의 값을 읽어올 수도 있다. HTML CSS 실행결과는 아래와 같이 자식노드의 값만 읽어온 것을 확인할 수 있다. outerHTML outerHTML은 선택한 element를 포함해서 처리된다. 즉,..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) jQuery를 이용해서 노드를 제어하는 방법을 알아보자. jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있다. ( http://api.jquery.com/category/manipulation/ ) 추가 추가와 관련된 주요한 메소드는 4가지다. 각각의 관계를 그림으로 나타내면 아래와 같다. 아래 코드는 위의 API를 이용해서 문서의 구조를 변경한 예이다. (실행 결과) content1 content2 실행되면, 위와 같이 소스코드가 변..