1. JSON이란? - JavaScript Object Notation - 웹과 컴퓨터 프로그램에서 용량이 적은 데이터를 교환하기 위해 데이터 객체를 {속성 : 값}의 쌍 형태로 표현 - 자바스크립트(JavaScript) 토대로 개발되었다. - 여러 프로그래밍 언어에도 사용할 수 있는 독립형 언어 - 텍스트로 기술하여 사람도 쉽게 읽고 작성할 수 있다. - 웹 브라우저와 웹 서버 간 비동기 통신, 웹 서버 간의 데이터 교환 등에 주로 사용된다. ​ [참고 홈페이지] https://www.w3schools.com/js/js_json_intro.asp JSON Introduction W3Schools offers free online tutorials, references and exercises in al..

0. Ajax란? - Asynchronous Javascript And XML - 자바스크립트와 XML을 이용한 비동기 방식의 연동 방법론 - 용도 클라이언트 화면에서 javascript 또는 jQuery 로 서버에 자료를 요청하면 현재 페이지의 화면 전환 없이 서버에서 XML 또는 JSON 데이터 자료를 전송한다. - Ajax 이전의 동기방식 Ajax를 사용하기 전에는 전통적인 웹 페이지 기술인 동기 방식(syncronous) 이었다. syncronous 란 순서대로 처리를 한다는 뜻이다. 화면A에서 서버B로 데이터 요청 후 다시 화면A로 돌아오는 작업이 '순차적' 으로 이루어진다. 클라이언트가 서버에 자료를 요청할 시에 페이지가 서버 페이지로 갱신되어 화면이 깜박거리고 그동안에 사용자는 어떠한 작업도..

jQuery 1. jQuery - jQuery는 JavaScript Library (API) - 자바스크립트의 단점을 보완하고 간단하게 만든 확장판 - 자바스크립트의 코드를 단순하고 간결한 상태로 개발이 가능하며, 동일한 코드의 반복과 복잡하고 많은 코드로 개발되던 기존의 작업에 비해 여러 가지 효과나 이벤트를 간단한 함수의 호출만으로 쉽고 빠르게 개발이 가능하도록 도와준다. ​ 2. jQuery 특징 1. CSS 셀렉터 html 문서의 구조를 명료 하면서도 알기 쉬운 형태로 표현 및 사용 가능 한다. 2. 플러그인 아키텍처 중복되는 기능과 코드가 엉키는 등의 Feature Creep을 피하고 창의적인 산출물의 공유가 가능하며, 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있다. 3. 메서드 체인..

1. Event (이벤트) - 이벤트는 '사건' - 브라우저에서의 사건(event)이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. ​ ​ 2. Event 종류 1) Mouse Event - click : 마우스 클릭 - dbclick : 마우스 더블클릭 - mousedown : 마우스 버튼을 누르고 있을 때 - mouseup : 누르고 있던 마우스 버튼을 해제할 때 - mousemove : 마우스를 움질일 때 (터치X) - mouseover : 어떤 요소 위에 마우스가 위치할 때 (터치X) - mouseout : 어떤 요소밖으로 마우스가 벗어날 때 (터치X) ​ 2) Keyboard Event - keydown : 키를 누르고 있을 때 - ..

1. Array (배열) - 여러 데이터를 하나의 변수로 사용 - 배열의 길이가 정해져있지 않고, 하나의 배열 안에서 요소들의 데이터 타입이 달라도 됨 - 자바에서의 Array보다 ArrayList와 조금 더 유사하다 - Array 생성 1) 빈 배열 생성 var ar = [] ; 2) 데이터가 있는 배열 생성 var ar2 = [1,2,3] ; ​ 2. Array의 주요 메서드 1) pop() : 배열의 마지막 요소를 삭제한 후 해당 요소를 리턴 2) push(data) : 배열의 마지막에 새로운 요소를 추가한 후 해당 배열의 길이를 리턴 3) shift() : 배열의 첫번째 요소를 삭제한 후 해당 요소를 리턴 4) unshift(data) : 배열의 첫번째에 새로운 요소를 추가한 후 해당 배열의 길이..

1. Document API 1) 하나의 요소(Element) 선택 : id로 접근 - [window.]document.getElementById("Id명"); - 해당되는 id의 요소에 접근한다 ​ 2) 다중 요소 선택 : class, tag로 접근 - document.getElementsByClassName("") - document.getElementsByTagName("") - document.getElementsByName("") - 결과물은 모두 배열 (결과물이 한 개이더라도 배열임) ​ 3) form태그 선택 시 name속성의 값으로 선택 4) CSS Selector 사용 - document.querySelector("css selector") : 선택자에 걸리는 요소 중 첫번째 것만 가져옴..