📁JavaScript 란?
객체 기반의 스크립트 프로그래밍 언어
웹사이트상에서 동적 상호작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어
비동기 처리
동기(Synchronous) : 모든 작업이 동시에 일어난다. 요청과 결과가 동시에 일어남
비동기(Asynchronous) : 하나의 작업이 끝날 때까지 다른 작업은 기다린다. 요청과 결과가 동시에 일어나지 않음
사용방법
<script src="js파일위치/js파일명"></script>
📑 변수 선언
1. var
전역 범위 또는 함수 범위로 지정된다. 즉 함수 밖에서 선언되면 전역 변수, 함수 내에서 선언되면 지역변수
변수 선언과 동시에 초기화가 이루어짐
변수의 중복 선언, 재할당이 가능
👉 선언 방법
/* 선언 후 초기화 */
var n;
n = 123
/* 선언과 초기화 같이 */
var n = 123
/* 여러 변수를 한번에 선언 */
var n= 123, m = 456, 7 = 'js]👉 중복선언
var n = 'hello'
var n = 'hi'👉 재할당
var n = 'hello'
n = 'hi'2. let
변수가 선언된 블록 내에서만 사용 가능
재할당만 가능, 중복선언은 X
각각 다른 범위에서 중복선언은 가능
👉 선언 방법
/* 선언 후 초기화 */
let n;
n = 123
/* 선언과 초기화 같이 */
let n = 123
/* 여러 변수를 한번에 선언 및 초기화 */
let n= 123, m = 456, 7 = 'js]👉 재할당, 중복선언
/* 재할당 가능 */
let n ='1234'
n = '567'
/* 중복 선언 불가 */
let n = 'hello'
// let n = 'hi' 불가능
if(true){
let n = 'hi' //다른 범위이므로 선언 가능
}3. const
▪ 상수 ( 변하지 않는 값)
재할당과 중복선언이 불가능하다.
const n = '12345'
// const n = '67890' 중복선언x
// n = '1123123' 재할당 x👉 배열, 객체의 경우 주소값을 할당받기 때문에 요소나 속성의 추가가 가능하다.
변수가 가질 수 있는 자료형 : 문자열, 숫자, Boolean, 배열, 객체
📑 주석
| /* ... */ | 블럭 주석. 여러 줄을 주석 처리함 |
| // | 한 줄 주석 |
// 이 줄만 주석처리
/* 여기부터
~~~
여기까지
주석처리 */📑 연산자
👉 문자열 연산자 +
문자열을 연결한다.
1) 문자열 + 문자열
var n = 'hi';
var m = 'hello';
hihello
2) 문자열 + 숫자
var n = 'hi'+9;
hi9
👉 산술 연산자
+ 더하기
- 빼기
* 곱하기
/ 나누기
% 나머지
** : 거듭제곱
👉 증감연산자
++ : 1증가
-- : 1감소
👉 대입연산자 =
let n = 'hi';
👉 비교 연산자
| 비교 연산자 | |
|---|---|
== 동등 비교 | 피연산자가 서로 같으면 True 반환 |
| != 부등 비교 | 피연산자가 서로 다르면 True 반환 |
| A > B | A가 B보다 클 경우 True 반환 |
| A >= B | A가 B보다 크거나 같을 경우 True 반환 |
| A <= B | B가 A보다 크거나 같을 경우 True 반환 |
| A < B | B가 A보다 클 경우 True 반환 |
=== 일치 | 피연산자의 값과 타입이 같으면 true 반환 |
| !== 불일치 | 피연산자의 값 또는 타입이 다르면 true 반환 |
👉 논리 연산자
| 논리 연산자 | |
|---|---|
| && | 둘다 참일 경우 true, 하나라도 거짓이면 false 반환 |
| || | 둘 중 하나만 참이면 true 반환, 그 외에는 모두 false |
| !(피연산자) | 참이면 false, 거짓이면 true 로 반환 |
👉 삼항 연산자
(조건식)? 참일 경우 반환할 값 : 그 외 반환할 값
ex)
var n = 1;
(n > 2 )? console.log('2보다 크다'):console.log('2보다 작다')
> 2보다 작다📑 제어문
👉조건문
◼ if문
if(조건식){
조건식이 참일 경우 수행할 실행문
}▪ if ~ else문
if(조건식){
조건식이 참일 경우 수행할 코드
}else{
조건식이 거짓일 경우 수행할 코드
}
if(조건식1){
조건식1이 참일 경우 수행할 코드
}else if(조건식2){
조건식1이 거짓이고 조건식2이 참일 경우 수행할 코드
}else{
조건문이 거짓일 경우 수행할 코드
}◼ switch문
switch(변수){
case 1 :
변수의 값이 1일 때 실행되는 코드
break;
case 2 :
변수의 값이 2일 때 실행되는 코드
break;
case 3 :
변수의 값이 3일 때 실행되는 코드
break;
deafult :
해당하는 case가 없을 경우 실행되는 코드
break;👉 반복문
◻ for문
for(초기식; 조건식; 증감식 ){
조건식이 참일 경우 실행되는 코드
}
---
ex) 1부터 10까지 출력하는 for문
for( var i = 1 ; i < 11 ; i++){
console.log(i)
}◻ while문
while(조건식){
조건식이 참일 경우 실행되는 코드
}
---
ex) 1부터 10까지 출력하는 while문
var n = 1;
while(n <11){
console.log(n);
n++;
}◻ do~while문
do{
실행할 코드
}while(조건식)👀 while문과 do~while문의 차이?
while문은 조건식 참이면 실행하지만
do while은 실행문이 조건식보다 앞에 위치하기 때문에
조건식이 거짓이라도 무조건 1번은 실행함
◻ for in문
for(변수 in 객체){
}
◻ for of문
for(변수 of 객체){
}
📑 함수(functions)
👉함수 선언
1️⃣ Function 생성자
function 함수명([매개변수1, 매개변수2, ...매개변수N]){
실행 코드(statements)
}생성된 함수는 함수객체로 일반적인 기능 외에 모든 속성, 메서드, 객체의 행위특성 을 갖는다.
호이스팅 영향 o
매개변수(parameter) : 함수로 전달되는 인수를 함수에서 사용하기 위해 사용하는 변수
인수(argument) : 함수가 호출될 때 전달되는 값
**2️⃣ 함수 표현식(function expression)**
함수 리터럴로 생성한 함수를 변수에 할당한 표현식
let 이름 = function [함수명](매개변수1,매개변수2, ... 매개변수N){
실행 코드(statements)
};3️⃣ 화살표 함수(arrow functions)
(매개변수1, 매개변수2,...매개변수N)) => { 실행 코드 }
(매개변수1, 매개변수2,...매개변수N)) => 표현식
매개변수가 1개이면 괄호가 없어도 됨
매개변수 => { 실행 코드 }
매개변수가 없으면 괄호가 있어야 됨
() => { 실행 코드 }🔷 함수 리터럴(function literal)
이름없이 몸체만 있는 익명 함수, 변수와 동일한 문법과 구조를 사용해 함수를 생성
👀 IIFE(Immediately Invoked Function Expression) : 즉시 실행 함수
▪ 정의와 동시에 실행되는 함수
( function() {
실행 코드
})();
첫 번째 괄호 () : 익명함수(Anonymous Function)
두 번째 괄호 () : 즉시 실행 함수를 생성하는 괄호. 이 괄호를 통해 자바스크립트 엔진(JavaScript engine)은 함수를 즉시 해석해서 실행한다.
익명함수(Anonymous Function) : 리터럴 방식의 함수
📑 이벤트
이벤트소스
이벤트리스너
이벤트객체
이벤트핸들러
이벤트흐름
