공부 기록일지📚

JSON이란? JavaScript Object Notation의 약자로 JS에서 객체를 만들 때 사용하는 표현식을 의미 JSON is a text format for storing and transporting data(ref: W3C) 다른 언어에서도 배열은 배열로, 객체는 객체로 전송할 수 있으며 일종의 데이터 표준 인간과 기계 둘 다 이해하기 쉽고 데이터의 용량이 작다. -> XML의 대체제로 JSON을 사용, 설정의 저장이나 데이터 전송 등에 많이 사용됨 JSON은 JS의 모든 데이터 타입을 제공하는 것은 아니다. JS의 부분적인 데이터 타입만을 지원하기 때문에 공식문서에 나온 내용을 참고하자. http://www.json.org/json-ko.html JSON API *ECMAScript5에는 ..

자바스크립트를 이용해서 웹브라우저의 통신 기능을 사용하는 방법을 알아본다. Ajax(Asynchronous JavaScript and XML) *Asynchronous adj.비동기의 : 서버와 클라이언트 간의 데이터를 주고 받는 형식으로서 JSON과 페이지 리로드 없이 웹페이지의 내용을 변경할 수 있다. 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 한다. JS를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 말한다. 이때 사용하는 API가 XMLHttpRequest 객체이다. ->꼭 XML을 사용해서 통신해야 하는 것은 아니며 XML보단 JSON을 더 많이 사용한다. XMLHttpRequest XMLHttpRequest (XHR) objects are used to inter..

이벤트 타입이란 이벤트의 종류라고 할 수 있다. 웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 주요 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는 지 알아보자. 폼(form)에 관련된 이벤트 타입 ▶submit 이벤트 : 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다. name ▶change 이벤트 input(text,radio,checkbox),textarea,select 태그에 적용된다. //입력창에 텍스트를 입력했다가 다시 지워서 원상복귀하면 change이벤트가 작동하지 않는다. ▶blur, focus 이벤트 focus는 엘리먼트에 포커스가 생겼을 때, blur는 포커스가 사라졌을 때 발생하는 이벤트이다. -> 다음 태그를 제외한 모든 태그에서 발생한다..

웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다. inline 방식의 경우 이벤트의 리턴값이 false이면 기본 동작이 취소된다. prevent event on opentutorials 위의 코드는 체크박스의 체크 여부에 따라서 a태그와 form태그의 기본동작을 막는 기능을 한다. 참고로 onclick 내부의 JS코드 중 ~.checked 부분은 체크박스의 상태가 true인 것과 같은 뜻이다...

HTML 태그는 중첩되어 있다. 따라서 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 이런 경우 중첩된 태그들에 이벤트가 등록되어 있다면 어떻게 처리될까? 캡쳐링(capturing) - 이벤트가 부모에서부터 발생해서 자식으로 전파 밖에서부터 안쪽으로 이벤트가 전파됨 IE 낮은 버전에서는 작동하지 않기 때문에 많이 사용 X 코드에서 차이점은 document.querySelector('html').addEventListener('click', handler, true); 이벤트리스너의 3번째 인자(use capturing) 기본값은 false ->3번째 인자를 주지 않는다면 자동으로 버블링 처리 값이 true이면 캡쳐링, false이면 버블링 버블링(bubbling) - 이벤트..

이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미 이벤트 관련 용어 ▶event target target은 이벤트가 일어날 객체를 의미한다. ▶event type 이벤트의 종류를 의미한다. 아래 예시 코드의 경우 click 이벤트 타입이다. 어떤 "때"에 해당하는 것 태그마다 사용할 수 있는 타입이 다르다 ▶event handler 이벤트가 발생했을 때 동작하는(실행될) 코드를 의미 아래 예시 코드에서는 alert(window.location) 이 이벤트 핸들러에 해당한다. //event target: button 태그에 대한 객체 //event type: click 이벤트 타..

😏이번 시간에는 요소들의 위치와 크기를 알아내는 방법을 배운다.😏 *기하학: 도형 및 공간의 성질에 대하여 연구하는 학문 요소의 크기와 위치 우선 엘리먼트의 크기를 알아내는 방법을 살펴보자. Element.getBoundingClientRect // 엘리먼트의 크기(보더 + 패딩 + 콘텐트 NOT margin)와 위치를 알고 싶을 때 사용하는 메소드 영어작명 그대로 클라이언트 직사각형 바운딩을 가져온다 라는 의미 EI 에서는 width 와 height의 값을 지원하지 않는다. 근데 EI는 죽어벌임 위치를 알아낼 때 기준점이 되는 부모는 body 태그(문맥상 문서) 입니다.(엘리먼트의 위치를 의미하는 top, right의 값을 통해서) 엘리먼트가 중첩되어 있을 경우? 엘리먼트가 중첩되어 있더라도 기준점이 ..

Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. -> html 문서에서 최상위 요소는 Doctype(문서의 형식을 지정하는 요소)과 html 태그 라는 것을 알 수 있다. *window 객체는 전역객체이므로 생략이 가능하다. 주요 API에 대해서 알아보자. 노드 생성 API document 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. document.createElement() document.createTextNode() 문서 정보 API title URL referrer // 링크를 통해 현재 페이지로 이동 시킨, 전 페이지의 URI 정보를 반환. 페이지로 바..