# JSON (JavaScript Object Notation) 데이터를 교환하고 저장하기 위해 만들어진 텍스트 기반의 테이터 교환 표준입니다. *현재는 가장 많이 사용된다. ● 특징 1. JSON은 자바스크립트를 확장하여 만들어졌습니다. 2. JSON은 자바스크립트 객체 표기법을 따릅니다. 3. JSON은 프로그래밍 언어와 운영체제에 독립적입니다. # XML (EXtensible Markup Langauage) HTML과 비슷한 문자 기반의 마크업 언어입니다. 데이터를 저장하고 전달할 목적으로 만들어졌습니다. * 안드로이드 프로그래밍 안에서 데이터를 주고 받을 때 많이 사용된다! ● JSON과 XML의 공통점 1. 둘다 데이터를 저장하고 전달하기 위해 만들어졌습니다. 2. 기계뿐 아니라 사람도 읽기 쉽..
# 이벤트(Event) https://developer.mozilla.org/en-US/docs/Web/Events 이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다. 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있습니다. 따라서 자바스크립트를 비동기식 이벤트 중심의 프로그래밍 모델이라고 합니다. ● 이벤트 타입(Event Type) 이벤트 타입은 발생할 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 합니다. 가장 많이 사용하는 키보드, 마우스, HTML DOM, window 객체등 처리하는 이벤트가 폭넓게 제공되고 있습니다. 예시) 이벤트 타입 문자열을 클릭하세요. * 이벤트 타켓(Event Target) 이벤트가 일어날 객체를 의미..
# 폼(Form) 객체 일반적으로 폼에 접근할 때 사용합니다. id 또는 name을 이용하여 접근합니다. 또한 document.forms 컬렉션을 이용하여 접근할 수도 있습니다. 아이디 : 비밀번호 : 1. 폼에 접근 const frm = document.myform; // name으로 접근 const frm = document.getElementById("regform"); // 아이디로 접근 2. 아이디 value에 접근 const id = document.myform.userid.value; const id = frm.userid.value; const id = frm.elements[0].value; const id = frm.elements['userid'].value; const id = do..
# 노드(node) HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장합니다. HTML DOM은 노드들을 정의하고, 그 사이의 관계를 설명해주는 역할을 합니다. HTML 문서의 정보는 노드 트리라고 불리는 계층적 구조에 저장됩니다. 노드 트리는 노드들의 집합이며 노드 간의 관계를 보여줍니다. 노드 트리는 최상위 레벨인 루트 노드로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 내려갑니다. HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있습니다. ● 노드 종류 1. 문서 노드(document node) : 문서 전체를 나타내는 노드 2. 요소 노드(element node) : HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드입니다. 3. 속성 노드(a..
# 문서 객체 모델(Document Object Model) XML이나 HTML문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. HTML 문서 ● document 웹 페이지 그 자체를 의미합니다. 웹페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 document 객체로부터 시작해야 합니다. 메소드 getElementsByTagName() 해당 태그 이름의 요소를 모두 선택합니다. getElementById() 해당 아이디의 요소를 선택합니다. (id는 중복xx) getElementsByClassName( 해당 클래스에 속한 요소를 모두 선택합니다. getElementsByName() 해당 name 속성값을..
# 브라우저 객체 모델(Brower Object Model) 웹 브라우저에 구현된 JavaScript 객체 모델을 의미하며 window 객체의 프로퍼티로 조회할 수 있습니다. ● window 현재 웹브라우저의 창이나 탭을 표현하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현하게 됩니다. setTimeout() 일정 시간이 지난 후 매개변수로 제공된 함수를 실행합니다. (한 번) setInterval() 일정 시간마다 매개변수로 제공된 함수를 실행합니다. clearTimeout() 일정 시간 후 setTimeout()에서 실행된 함수를 중지합니다. clearInterval() 일정 시간마다 setInterval()에서 실행된 함수를 중지합니다. 예시 1) 예시 2) se..
● Math 객체 Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체입니다. min() 인수로 전달 받은 값 중에서 가장 작은 수를 리턴합니다. 인수를 전달되지 않으면 Infinity를 리턴합니다. 또한, 인수 중에서 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴합니다. max() 인수로 전달 받은 값 중에서 가장 큰 수를 리턴합니다. 인수가 전달되지 않으면 -Infinity를 리턴합니다. 또한, 인수 중에서 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴합니다. round() 인수로 전달 받은 값을 소수점 첫번째 자리에서 반올림하여 그 결과를 리턴합니다. floor() 인수로 전달 받은 값과 같거나 작은 수 중에서 가장 큰 정수를 리턴합니다. ..
# 객체(Object) 키(key)와 값(value)으로 구성된 프로퍼티(property)들의 집합입니다. 프로퍼티의 값은 자바스크립트에서 사용할 수 있는 모든 값을 담을 수 있습니다. * 프로퍼티(property) 프로퍼티 키(이름)와 프로퍼티 값으로 구성됩니다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있습니다. 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자이며 프로퍼티 값으로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 symbol 값입니다. ex) const dog = { name: '덜라', family: '사모예드', age: 1, weight: 9.0, play: function(){ console.log('뛰어놉니다.'); } } console.log(dog.name) ..
# 사용자 정의 함수(function) 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다. ● 함수 표현하는 방법 1. 함수 선언식 함수명(); function 함수명(){ 실행문; } 예시 ) 사용자 정의함수 - 1 function func1(){ console.log('func1 함수가 호출되었습니다.'); } 2. 함수 표현식 const 변수명 = function(){ 실행문; }; 변수(); 예시 1) const Hello1 = function(){ console.log('Hello 실행되었습니다.') }; 예시 2) * 함수 표현식과 함수 선언의 차이점 -> 호이스팅(hoisting) 함수 표현식은 ..
# 배열(array) 배열은 이름과 인덱스로 참조되는 정렬된 값의 집합입니다. 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 합니다. ● 자바스크립트 배열의 특징 1. 배열 요소의 타입이 고정되어 있지 않습니다. 따라서 같은 배열에 있는 배열 요소끼리의 타입이 다를 수 있습니다. 2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 특정 배열 요소가 비어 있을 수 있습니다. ex) let arr = new Array(); arr[0] = 10; arr[1] = 30; arr[5] = 70; 3. 자바스크립트의 배열은 Array 객체로 다뤄집니다. ● 배열을 만드는 방법 1. let 배열 이름; // 배열의 선언 배열 이름 = [요소1, 요소2, 요소3, 요소..
