javascript
- 클래스가 존재하지 않는 프로토타입 기반의 객체지향 언어이다.
- <script src="#" type="text/javascript"></script>
- script 태그는 head, body 어느 곳에서나 선언 가능
- but, body안의 끝 부분에 태그 둘 것을 권장(더 빠르다)
- 변수 선언시 숫자형이든 문자형이든 모두 var로 선언
- console.log()함수를 이용하여 브라우저의 콘솔창에 결과 출력
- 웹 브라우저가 HTML 문서를 순차적으로 해석(parsing)하므로 스크립트 위치에 따라 로드와 실행 지점이 달라진다.
- Data 객체의 toLocalTimeString()함수 호출 시 현재 시간 return
- innerHTML 프로퍼티에 값 할당
- setInterval() 함수 이용하여 1초마다 현재 시간 업데이트
기본 문법
변수
- javascript는 변수를 선언할 때 타입을 명시하지 않고 var keyword를 사용하여 선언
- js는 동적타입 언어. 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정 > 같은 변수에 여러 타입의 값 할당 가능
- 변수 이름은 함수 이름과 혼동되지 않도록 유일한 이름을 사용 (변수- 형용사, 명사 / 함수 - 동사)
- js는 edmascript 표준에 따라 낙타 표기법 사용
- 키워드, 공백 문자 포함, 숫자로 시작 x
- 특수문자는 _와 $ 허용
자료형
- 프로그램은 정적인 데이터 값을 동적으로 변환해 가면서 원하는 정보를 얻는다.
- 원시 타입(primitive)와 객체 타입(object)로 분류
- 원시 타입에는 숫자, 문자열, boolean, null, undefined와 같이 5가지가 있다. 이를 제외한 모든 값은 객체 타입이다.
| 자료형 | typeof 출력 값 | 설명 |
| 숫자형 | number | 정수 또는 실수형 |
| 문자열형 | String | 문자. single or double quotation으로 표기 |
| boolean형 | boolean | 참(true) or 거짓(false) |
| undefined형 | undefined | 변수가 선언 되었지만 초기화가 되지 않았을 경우 |
| null | object | 값이 존재하지 않을 경우 |
숫자
- javascript는 숫자를 정수와 실수로 나누어 구분하지 않는다.
- 모든 숫자를 8byte의 실수 형태로 처리 (정수만을 표현하기 위한 데이터는 없음)
- 편의성을 위해 정수 리터럴과 실수 리터럴을 제공
- 숫자의 연산 처리시 실수 형태로 하기 때문에 특정 소수점을 정확하게 표현하지 못함
- javascrip는 언더플로우, 오버플로우, 0으로 나누는 연산에 대해 예외를 발생 시키지 않는다.
- javascript에는 숫자와 관련된 특별한 상수가 존재한다.
- infinity : 무한대를 나타내는 상수, 어떠한 수를 0으로 나누거나 Infinity를 어떠한 수로 사칙연산한 결과
- NaN(Not a Number) : 계산식의 결과가 숫자가 아님을 나타내는 상수
문자열
- javascript에서 문자열은 16비트의 unicode 문자를 사용
- 문자 하나를 표현하는 char와 같은 문자형은 제공하지 않는다. 'a'와 같은 한글자도 문자열로 표현
- 작은 따옴표(', single quotes) 또는 큰 따옴표(", double quotes) 둘다 사용 가능, 혼용 불가
- 이스케이프 시퀀스(\)도 사용 가능
boolean, null과 undefined
- boolean은 비교 연산의 결과값으로 true 또는 false 중 하나의 값을 갖는다.
- 비어 있는 문자열, null, undefined, 숫자 0은 false로 간주 된다.
- null은 값이 없거나 비어 있음을 뜻하고, undefined는 값이 초기화 되지 않았음(정의되지 않음)을 의미
- null과 undefined는 의미가 비슷하지만 값을 할당하지 않은 변수는 undefined가 할당되고 (시스템 레벨), 코드에서 명시적으로 값이 없음을 나타낼 때(프로그램 레벨)는 null 사용
자동형변환
- javascript는 java나 c++등과 같은 언어와는 달리 자료 형에 대해 매우 느슨한 규칙이 적용
- 어떤 자료 형이든 전달할 수 있고, 그 값을 필요에 따라 변환 가능.
- 서로 다른 자료 형의 연산이 가능
- 모든 자료형을 var로 선언하기 때문에 변수 선언은 쉽지만 이런 느슨한 규칙 때문에 혼란을 야기
변수 호이스팅
- var 키워드를 사용한 변수는 중복해서 선언이 가능
- 호이스팅이란, var 선언문이나 function 선언문 등 모든 선언문이 해당 scope의 처음으로 옮겨진 것 처럼 동작하는 특성, 즉 javascript는 모든 선언문이 선언되기 이전에 참조가 가능
- 변수의 생성
- 선언 단계 : 변수 객체에 변수를 등록
- 초기화 단계 : 변수 객체에 등록된 변수를 메모리에 할당. undefined로 초기화 됨.
- 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당.
상수
- 변수의 값을 변경하면 안되는 상수와 일반 변수를 구분하고자 변수 명명 규칙을 다르게 하여 사용
- 상수의 표기법은 모든 문자를 대문자를 사용하고 단어 사이는 _로 표기
ecmascript6부터는 let과 const 키워드를 추가
| 키워드 | 구분 | 선언위치 | 재선언 |
| var | 변수 | 전역 스코프 | 가능 |
| let | 변수 | 해당스코프 | 불가능 |
| const | 상수 | 해당 스코프 | 불가능 |
연산자
- javascript에서 기본적으로 제공하는 약속된 문자의 표현 식을 연산자라 함
- '+'연산자는 대상의 값이 모두 숫자인 경우 산술 연산을 수행
- '+'연산자는 대상 중에 문자열이 포함된 경우 모든 연산 대상을 문자열로 변환하고 문자열 결합
- === : 값이 일치하는지 확인 (타입 포함)
- !== : 값이 일치하지 않는지 확인(타입 포함)
- == : 동등 관계인지 확인
- = : 변수 또는 프로퍼티에 값을 할당
함수
선언, 호출
- javascript에서 함수는 일급 객체이다.
- 함수를 변수, 객체, 배열 등에 저장할 수 있고 다른 함수에 전달하는 전달 인자(콜백함수)또는 리턴 값으로 사용 가능
- 함수는 프로그램 실행 중에 동적으로 생성 가능
- 함수 정의 방법은 함수 선언문, 함수 표현식, function 생성자(constructor) 함수 세가지 방식 제공
함수 호이스팅
- 함수 선언문의 경우 함수 선언의 위치와 상관없이 코드 내 어느곳에서든지 호출이 가능
- javascript는 모든 선언(var, function)을 호이스팅함
- 함수 선언문으로 정의된 함수는 javascript 엔진이 스크립트가 로딩되는 시점에 이를 변수객체 저장한다. 함수 선언, 초기화, 할당이 한 번에 이루어진다.
매개변수
- 함수의 정의 부분에 외부로부터 전달받을 변수를 매개변수라 함
- 함수를 호출할 때 전달하는 값을 전달인자라고 함
- 함수 정의 시 매개변수에 대한 타입은 명시하지 않는다.
- 함수를 호출할 때 정의된 매개변수와 전달인자의 개수가 일치하지 않더라도 호출 가능
콜백 함수
- 콜백함수는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말함
- 일반적으로 콜백 함수는 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정시점에 실행됨
- 콜백 함수는 주로 비동기식 처리 모델에서 사용됨 > 처리가 종료되면 호출될 함수를 미리 매개변수에 전달하고 처리가 종료되면 콜백함수를 호출
요약
- javascript의 변수는 var를 사용하여 선언하며 타입이 없다. (let, const)
- 자료형은 원시타입과 객체타입으로 분류
- 함수는 일급객체로 변수에 저장하거나 함수의 전달인자 또는 반환 값으로 사용
- 객체는 이름과 값으로 구성된 프로퍼티의 집합이며 프로퍼티를 동적으로 조작 가능
Web Browser와 Window 객체
- window 객체는 웹 브라우저에서 작동하는 javascript의 최상위 전역 객체이다.
- window 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 있다.
- javascript에서 기본으로 제공하는 프로퍼티와 함수도 포함
- BOM(Browser Object Model)으로 불리기도 함
alert, confirm, prompt
- window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 open
- alert() : 브라우저의 알림창
- confirm() : 브라우저의 확인/취소 선택창
- prompt() : 브라우저의 입력 창
navigator
- navigator 객체는 브라우저의 정보가 내장된 객체
- navigator의 정보로 서로 다른 브라우저를 구분할 수 있으며 브라우저 별로 다르게 처리 가능
location, history
- location 객체를 이용하여 현재 페이지 주소(url)와 관련된 정보들을 알 수 있다.
- location.href : 프로퍼티에 값을 할당하지 않으면 현재 url을 조회하고 값을 할당하면 할당된 url로 페이지 이동
- location.reload() : 현재 페이지를 새로고침
- history 객체는 브라우저의 페이지 이력을 담는 객체
- history.back() / history.forward() : 브라우저의 뒤로 가기/ 앞으로 가기 버튼과 같은 동작
새 창 열기
- window객체의 open() 함수를 이용하면 새 창을 열 수 있다.
- window.open('페이지 url', '창이름', '특성', 히스토리 대체여부);
창 열고 닫기
- 이벤트를 이용하여 특정 시점에 창을 열 수 있다.
- window 객체의 close()함수로 현재 창을 닫을 수 있다.
부모 창 컨트롤
- window 객체의 opener 속성을 이용하면 부모 창(새 창을 연 창)을 컨트롤 가능
- opener 객체는 부모 창의 window 객체
window 객체 함수
| alert() | 경고용 대화상자를 보여줌 |
| confirm() | 확인, 취소를 선택할 수 있는 대화상자를 보여줌 |
| prompt() | 입력창이 있는 대화 상자를 보여줌 |
| open() | 새로운 창을 오픈 |
| scroll() | 창을 스크롤 함 |
| find() | 창안에 지정된 문자열이 있는지 확인. 있으면 true, 없으면 false |
| stop() | 불러오기를 중지 |
| print() | 화면에 있는 내용을 프린터로 출력 |
| moveBy() | 창을 상대적 좌표로 이동. 수평방향과 수직방향의 이동량을 픽셀로 지정 |
| moveTo() | 창을 절대적 좌표로 이동. 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정 |
resize 함수로 현재 열려 있는 창의 크기 조절
| resizeBy() | 창의 크기를 상대적인 좌표로 재설정 |
| resizeTo() | 창의 크기를 절대적인 좌표로 재설정. 창 크기를 픽셀로 지정 |
| scrollBy() | 창을 상대적인 좌표로 스크롤. 창의 표시 영역의 수평 방향과 수직 방향에 대해 픽셀로 지정 |
| scrollTo() | 창을 절대적인 좌표로 스트롤 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정 |
| setTimeout() | 지정한 밀리초 시간이 흐른 후에 함수 호출 |
| clearTimeout() | setTimeout 함수를 정지 |
| setInterval() | 지정한 밀리초 주기마다 함수를 반복적으로 호출 |
| clearInterval() | setInterval 함수를 정지 |
| eval() | 문자열을 javascript코드로 변환하여 실행 |
DOM(Document Object Model)
- 돔은 HTML과 XML 문서의 구조를 정의하는 API 를 제공
- DOM은 문서 요소 집합을 트리 형태의 계층 구조로 HTML을 표현
- HTML 계층 구조의 제일 위에는 documetn 노드가 있다.
| createElement(tagName) | element Node를 생성 |
| createTextNode(text) | text node를 생성 |
| appendChile(node) | 객체에 node를 child로 추가 |
| setAttribute(name, value) | 객체의 속성을 지정 |
| getAttribute(name) | 객체의 속성값을 가져옴 |
| innerHTML | 문자열을 HTML태그로 삽입 |
| innerText | 문자열을 text node로 삽입 |
| getElementById(id) | 태그의 id 속성이 id와 일치하는 element 객체 얻기 |
| getElementsByClassName(classname) | 태그의 class 속성이 classname과 일치하는 element 배열 얻기 |
| getElementsByName(name) | 태그의 name 속성이 name과 일치하는 element 배열 얻기 |
| querySelector(selector) | selector에 일치하는 첫 번째 element 객체 얻기 |
| querySelectorAll(selector) | selector에 일치하는 모든 element 배열 얻기 |
| removeChile(chilenode) | 객체의 자식 노드를 제거 |
이벤트
- 웹 페이지에서 여러 종류의 상호작용이 있을때 마다 이벤트가 발생
사용자가 마우스를 클릭 했을 대 키보드를 눌럿을 때 등과 같이 다양한 종류의 이벤트가 존재
- javascript를 사용하여 DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행
- 이벤트는 일반적으로 함수와 연결이 되고 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행
> 이벤트 핸들러 또는 이벤트 리스너라 하며 이 함수에 이벤트 발생시 실행해야 하는 코드 작성
- onclick, onkeypress
frame이벤트
- frame 관련 이벤트는 특정 DOM문서에 관련된 이벤트가 아니라 Frame자체에 대한 이벤트
- Frame 이벤트 중에서는 load이벤트가 가장 많이 사용
- load는 문서 및 자원들이 모두 웹 브라우저에 탑재되면 이벤트를 수행
- unload는 사용자가 브라우저를 떠날 때 이벤트가 발생하지만 사용자가 브라우저를 떠나는 것을 막을 수는 없다.
| onload | document, image, frame 등이 모두 로딩 되었을 때 발생 |
| onabort | 이미지 등의 내용을 로딩하는 도중 취소 등으로 중단 되었을 때 발생 |
| onerror | 이미지 등의 내용을 로딩 중 오류가 발생 했을 때 발생 |
| onresize | document, element 의 크기가 변경 되었을 경우 발생 |
| onscroll | document, element가 스크롤 되었을 때 발생 |
| onselect | 텍스트를 선택 했을 때 발생 |
Web Storage - localStorage
- WebStorage API : LocalStorage
- 데이터를 사용자 로컬에 보존하는 방식
- 데이터를 저장, 덮어쓰기, 삭제 등 조작 가능
- 자바스크립트로 조작
- 모바일에서도 사용 가능
- Cookie와의 차이점
- 유효기간이 없고 영구적으로 이용 가능
- 5MB까지 사용 가능 (cookiesms 4KB까지)
- 필요할 때 언제든 사용 가능(쿠키는 서버 접속시에 자동 송신)
- LocalStorage 기본 구성
- 키와 값을 하나의 세트로 저장
- 도메인과 브라우저별로 저장
- 값은 반드시 문자열로 저장됨
'Vue.js' 카테고리의 다른 글
| Ajax/ Bootstrap (0) | 2021.09.05 |
|---|---|
| jQuery 정리 (0) | 2021.09.05 |
| html&CSS정리 (0) | 2021.09.02 |
| Vue 정리 (0) | 2021.04.02 |
| JavaScript 정리 (0) | 2021.04.02 |
