IT/Javascript 썸네일형 리스트형 [JavaScript] Ajax Ajax(Asynchronous JavaScript and XML)비동기적인 웹 애플리케이션 개발을 위한 기술 AjaxXMLHttpRequest 기술을 사용해 복잡하고 동적인 웹 페이지를 구성하는 프로그래밍 방식브라우저와 서버 간의 데이터를 비동기적으로 교환하는 기술Ajax를 사용하면 페이지 전체를 새로고침하지 않고도 동적으로 데이터를 불러와 화면을 갱신할 수 있다.(구글맵 ...)Ajax의 'x'는 XML이라는 데이터 타입을 의미하지만 요즘은 더 가벼운 용량과 JavaScript의 일부라는 장점으로 JSON을 더 많이 사용한다.Ajax 목적 비동기 통신 웹 페이지 전체를 새로고침하지 않고 서버와 데이터를 주고받을 수 있다. 부분 업데이트 전체 페이지가 다시 로드되지 않고 HTML 페이지 일부 DOM만 .. 더보기 [JavaScript] Asynchronous JavaScript Synchronous (동기)프로그램의 실행 흐름이 순차적으로 진행하는 것 즉 하나의 작업이 완료된 후에 다음 작업이 실행되는 방식이다 Asynchronous(비동기)특정 작업의 실행이 완료될 때까지 기다리지 않고 다음 작업을 즉시 실행하는 방식(작업 완료 여부를 신경쓰지 않고 동시에 다른 작업들을 수행할 수 있다) 특징병렬적 수행당장 처리를 완료할 수 없고 시간이 필요한 작업들은 백그라운드에서 실행되며 빨리 완료되는 작업부터 처리Single Thread 언어..! Single Thread 언어Thread란, 작업을 처리할 때 실제로 작업을 수행하는 주체로, multi-thread 라면 업무를 수행할 수 있는 주체가 여러개라는 뜻이다.즉, JavaScript는 한번에 하나의 일만 수행할 수 있는 Sing.. 더보기 [JavaScript] Event EventWeb에서의 이벤트화면 스크롤 하는 것버튼 클릭 시 팝업 창 출력마우스 커서 위치에 따른 드래그, 드롭사용자의 키보드 입력값에 따라 새로운 요소 생성event무언가 일어났다는 신호, 사건(모든 DOM 요소는 이러한 event를 만들어 낸다) event objectDOM에서 이벤트가 발생했을 때 생성되는 객체 event 종류mouse, input, keyboard, touch ...https://developer.mozilla.org/en-US/docs/Web/API/Event Event - Web APIs | MDNThe Event interface represents an event which takes place on an EventTarget.developer.mozilla.org DOM .. 더보기 [JavaScript] 배열(Array helper method) Array지금까지 키로 구분된 데이터 집합을 저장하는 자료형인 object를 알아보았다.이제는 순서가 있는 collection인 Array를 알아보자. 배열 구조대괄호 ('[]')를 이용해 작성요소의 자료형은 제약이 없다length 속성을 사용해 배열에 담긴 요소의 개수를 확인할 수 있다. 배열 메서드주요메서드메서드역할push/pop배열 끝 요소를 추가/제거unshift/shift배열 앞 요소를 추가/제거 1. push()배열 끝에 요소를 추가 2. pop()배열 끝 요소를 제거하고 제거한 요소를 반환 3. unshift배열 앞에 요소를 추가 4. shift배열 앞 요소를 제거하고, 제거한 요소를 반환Array Helper Methods배열 조작을 보다 쉽게 수행할 수 있는 특별한 메서드 모음ES6에.. 더보기 [JavaScript] Object- 객체 문법 객체 문법1. 단축 속성키 이름과 값으로 쓰이는 변수의 이름이 같은 경우 단축 구문을 사용할 수 있다. 두 코드를 실행해보면 같은 결과가 나온다( 2. 단축 메서드메서드 선언 시 function 키워드 생략 가능하다. 3. 계산된 속성(computed property name)키(key)가 대괄호로 둘러싸여 있는 속성고정된 값이 아닌 변수 값을 사용할 수 있다. 4. 구조 분해 할당(destructing assignment)배열 또는 객체를 분해하여 객체 속성을 변수에 쉽게 할당할 수 있는 문법 함수의 매개변수로 객체 구조 분해 할당 활용 가능 5. Object with '전개 구문' '객체 복사' 객체 내부에서 객체 전개객체 안의 객체 형태가 아니라 풀어져서(?) 들어감얕은 복사에 활용 가능! 6. .. 더보기 [JavaScript] Object 객체(참조 자료형) Object 키로 구분된 데이터 집합(data collection)을 저장하는 자료형※ 파이썬 dict와 혼동할 수 있지만 dict가 아님에 유의하자.(오히려 class에 가깝다고 할 수 있다) 구조 및 속성객체 구조 중괄호('{}')를 이용해 작성한다. 중괄호 안에는 key: value 쌍으로 구성된 property를 여러개 작성할 수 있다. key는 문자형만 허용key에 공백이 없으면 따옴표를 생략해서 key를 지정할 수 있다(method도 마찬가지)그래서 아래 key with space 같은 경우는 따옴표가 필요하다value는 모든 자료형 허용 속성 참조점('.', chaining operator) 또는 대괄호('[]')로 객체 요소 접근key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가.. 더보기 [JavaScript] 함수(참조 자료형) Function함수는 참조 자료형에 속하며, 모든 함수는 Function object이다.(참조 자료형: 객체의 주소가 저장되는 자료형) 함수 구조 function name ([param[. param,[..., param]]]) { statements return value}함수는 function 키워드, 함수 이름, 매개변수, statements로 구성되어 있다.(return 값이 없으면 undefined를 반환한다) 함수 정의 방법1. 선언식(function declaration)function funcName() { statements} 예시fucntion add (num1, num2) { return num1 + num2 }add(1,2) //3 특징호이스팅(hoisting) 된다. (권.. 더보기 [JavaScript] Basic Syntax Data Type원시 자료형(Primitive type)Number, String, Boolean, null, undefined변수에 값이 직접 저장되는 자료형(불변, 값이 복사) 참조 자료형(Reference type)objects(Object, Array, Function)객체의 주소가 저장되는 자료형 원시 자료형Number정수 또는 실수형 숫자를 표현하는 자료형const a = 13const b = -5const c = 3.14const d = 2.998e9 // 2.998 * 10^8const e = Infinity // python에서 INFconst f = -Infinityconst g = NaN // (Not a Number) String텍스트 데이터를 표현하는 자료형'+' 연산자 이용해.. 더보기 이전 1 2 다음
