코딩 공부/JavaScript30 [JS] JSON JSON (JavaScript Object Notation) 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식으로 Javascript에서 객체를 만들 때 사용하는 표현식을 의미합니다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 적어서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다. 특징 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다. 자바스크립트 객체 표기법과 아주 유사하다. 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있는 이점이 있다. JSON 문서 형식.. 2022. 11. 23. [JS] JQuery JQuery 크로스 브라우징(호환성), 애니메이션 효과 등을 쉽게 구현할 수 있는 자바스크립트 라이브러리입니다. css 선택자를 활용하여, 객체 조작 가능하며 라이브러리로 외부파일을 내 프로젝트(작업 페이지)에 삽입해야 합니다. JQuery 연결방법 1) CDN 방식 네트워크 차단된 프로젝트에서는 쓰일 수 없습니다. 2) 다운로드 방식 제이쿼리 사이트에서 js 파일 다운로드 후 프로젝트에 삽입합니다. 1. 선택자 직접선택자 - 제이쿼리는 css 선택자로 객체 검색이 가능 - 제이쿼리 함수 인수에는 css 선택자가 삽입되어 요소 취득 - 제이쿼리는 문서(html) 로드 순서 상관 없이 쓸 수 있도록 제공되는 메소드 존재 (ready()) - 조회된 요소노드는에 메소드(이벤트) 적용 시 조회된 모든 객체에 .. 2022. 11. 14. [Web/JS] Cookie Cookie 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 쿠키 사용 목적 1. 세션 관리(Session management) → 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리 2. 개인화(Personalization) → 사용자 선호, 테마 등의 세팅 3. 트래킹(Tracking) → 사용자 행동을 기록하고 분석하는 용도 예제 1. common.js 파일 /** * Cookie * document.cookie 로 쿠키 생성 * 옵션 * expires=날짜정보(만료일자); .. 2022. 11. 14. [JS] DOM 객체 이벤트 이벤트 - 브라우저는 처리해야 할 특정사건이 발생하면 이를 감지하여 이벤트를 발생 - 클릭, 키보드입력, 마우스 이동 등이 일어나면 특정한 타입의 이벤트 발생 - 이벤트 핸들러: 특정한 이벤트가 발생했을 호출될 함수 - 이벤트 핸들러 등록: 특정이벤트가 발생 시 이벤트 핸들러의 호출을 위임하는 것 자바스크립트의 이벤트 등록 방식 1) html 요소의 속성을 통해 이벤트 등록하는 방식(이벤트핸들러 어트리뷰트 방식) 2) css 선택자로 객체를 선택하여 이벤트를 등록하는 방식(이벤트 핸들러 프로퍼티 방식) 3) css 선택자로 객체를 선택하여 addEventListener 메소드로 이벤트를 등록하는 방식 html 요소 이벤트 (on 접두사) 모든 테그는 on이라는 접두사를 가진 속성을 가지고 있으며 on 접.. 2022. 11. 7. [JS] DOM 조작 DOM 조작 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것 innerHTML setter와 getter 모두 존재하는 접근자 프로퍼티(속성), HTML 마크업 수정 및 반환 가능 $divEle.innerHTML = 'HelloBye'; // 이와 같이 사용하면 해당 태그 내의 text와 태그까지 변경가능 textContent setter와 getter 모두 존재하는 접근자 프로퍼티(속성), 요소노드의 모든 텍스트(자손노드 포함)를 반환합니다. 단, HTML 마크업은 무시합니다. $divEle.textContent nodeValue setter와 getter 모두 존재하는 접근자 프로퍼티(속성), 텍스트노드의 프로퍼티입니다. 즉, 텍스트노드 이외의 노드에서는 null를 반환.. 2022. 11. 2. [JS] DOM 노드탐색 DOM 노드탐색 요소노드를 취득한 다음, 취득한 요소노드를 기점으로 부모, 형제, 자식 노드 탐색 1. 자식노드 탐색 자식노드를 탐색하기위해서 탐색 프로퍼티 사용 1) childNodes: 자식노드를 모두 탐색 후 NodeList에 담아 반환(요소노드뿐만 아니라 텍스트노드포함) 2) children: 자식중 요소노드만 탐색 후 HTMLCollection에 담아 반환 3) firstChild: 첫번째 자식 노드 반환(요소노드, 텍스트노드) 4) lastChild: 마지막 자식 노드 반환(요소노드, 텍스트노드) 5) firstElementChild: 첫번째 자식 요소 노드 반환 6) lastElementChild: 마지막 자식 요소 노드 반환 ※ 자식 노드 존재 여부 확인 hasChildNodes(): tr.. 2022. 11. 2. 이전 1 2 3 4 5 다음
