HTML 삽입 미리보기할 수 없는 소스 카카오맵API로 위도/경도 찾기: 블로그 위도/경도 찾기: 빙 지도

HTML 삽입 미리보기할 수 없는 소스 Style 제어 ..style.선언(속성 = "지정할 스타일 값") 속성은 카멜 케이스로 작성하거나 background-color -> backgroundColor 혹은 대괄호로 표현한다 ["margin-left"] ex) document.getElementById("box").style.backgroundColor = "White" Class 제어 ..className = "클래스명" 지정한 클래스명을 특정 요소에 넣어줄 때 사용한다. 하지만 새로 넣어줄 때 직전에 className으로 넣어준 클래스는 사라지게 된다. 이 경우 직전 클래스도 함께 유지시키기 위해 직전 클래스와 함께 작성해주어야 하므로 거의 사용하지 않는다. ..classList = "클래스명" c..

HTML 삽입 미리보기할 수 없는 소스 - Text Node 값(value)에 접근 documnet.getElementById('blue').firstChild.nodeValue - text node 값(value)수정하기 documnet.getElementById('blue').firstChild.nodeValue = '수정값' nodeValue는 text node가 아니면 null 반환함. - 요소 생성 document.createElement('태그') - element node 텍스트 입력하기 [innerHTML]을 이용 선택자 내부에 마크업 태그를 포함한 텍스트 입력: document.getElementById('아이디').innerHTML = '입력값' 마크업 태그 생성 후 텍스트 입력 후 선..

HTML 삽입 미리보기할 수 없는 소스 - DOM과 Node Documnet Object Model의 약자로, HTML 문서의 각 요소들을 tree 형식으로 표현해준다. JS를 이용해 생성, 수정, 삭제 할 수 있다. 위 이미지에서 하나하나의 객체를 Node라 부르며 위쪽은 부모 노드, 아래쪽은 자식 노드가 된다. chrome에서 개발자도구를 열었을 때 Elements 영역이 DOM이다. - Node 종류 : element(태그/요소)노드 attribute(속성)노드 text노드 주석노드 document노드 - 노드에 접근하기 document.documentElement HTML에 접근할 수 있다. document.태그명(element명) ex) document.body / document.head 각 ..

HTML 삽입 미리보기할 수 없는 소스 JSON(JavaScript Object Notation)은 JS에서 객체를 만들 때 사용하는 표현식과 동일한 문법을 갖는 데이터 포맷이다. 이 표현식은 사람과 기계가 이해하기 쉬우며 데이터의 용량이 적어 XML을 대체해 데이터 전송 등에 많이 사용된다. 변환 시에는 두가지 API가 있다. JSON.stringify : JS object를 json의 문자열 데이터로 변환하는 함수 stringify JSON.parse : json의 문자열 데이터를 JS object 로 변환하는 함수 parse가 있다. 직렬화(serialize)와 역직렬화(deserialize) 웹 어플리케이션에서 서버에 특정 object를 서버에 전송할 때 { key : value }의 string..

HTML 삽입 미리보기할 수 없는 소스 JSON Placeholder API를 사용하여 예제코드 살펴보기 언제 끝날지 모르는 서버와의 통신과 관련된 처리들은 비동기적으로 처리한다. 이때 promise (then, catch) 를 사용하는 이유는 비동기적인 작업을 처리할 때 작업의 성공과 실패 결과를 표준화된 방식으로 처리할 수 있도록 해주기 때문이다. 1. fetch() 함수의 return 값은 "Promise" 데이터 타입이다. 이 Promise 객체가 성공적으로 실행(resolve)이 되면 response object(객체)를 반환한다. fetch 함수는 default로 GET방식으로 동작한다. GET방식은 요청 body를 받지 않기 때문에, 두번째 파라미터(옵션인자) 없이도 API주소만 넘길 수 있..