javascript_study_d1_정리

자바스크립트로 무엇을 할까 |

• 웹의 요소를 제어합니다.
• 웹 애플리케이션을 만듭니다.
• 다양한 라이브러리를 사용할 수 있습니다.
• 서버 개발을 할 수 있습니다.

웹 문서 안에 <script> 태그로 자바스크립트 작성하기 |

• 웹 문서에서 <script>와 </script> 태그 사이에 실행할 자바스크립트 소스를 작성할 수 있습니다.
• <script> 태그는 웹 문서 안의 어디든 위치할 수 있고 하나의 문서에서 여러 개 사용할 수도 있습니다.
• 되도록이면 </body> 태그 직전에 자바스크립트 소스를 삽입합니다.

외부 스크립트 파일로 연결해서 자바스크립트 작성하기 |

<script src="외부 스크립트 파일 경로"></script>
Copy

• 외부 자바스크립트 파일은 <script> 태그 없이 자바스크립트 소스만 작성하고 확장자는 .js 파일로 저장합니다.
• HTML 문서에서 <script> 태그의 src 속성을 이용해서 자바스크립트 파일을 연결하면 됩니다.

간단한 입출력 방법 - 알림 창 출력하기 |

alert(메시지)
Copy

• alert()를 입력하고 괄호 안에 따옴표("" 또는'')와 함께 메시지를 넣어 주면 됩니다.

간단한 입출력 방법 - 확인 창 출력하기 |

confirm(메시지)
Copy

• 확인 창(confirm)은 사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭할 수 있습니다.

간단한 입출력 방법 - 프롬프트 창에서 입력받기 |

prompt(메시지) 또는 prompt(메시지, 기본값)
Copy

• 프롬프트 창(prompt)은 텍스트 필드가 있는 작은 창입니다.
• 프롬프트 창을 만들 때는 기본값을 지정하거나 지정하지 않을 수 있습니다.

웹 브라우저 화면에 출력을 담당하는 document.write( ) 문 (1) |

• document.write( ) 문은 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문입니다.
• document.write( )의 괄호 안에는 웹 브라우저 화면에 표시할 내용이나 변수를 넣을 수도 있습니다.
• 따옴표 안에는 HTML 태그도 함께 사용할 수 있습니다.

간단한 입출력 방법 - 웹 브라우저 화면에 출력을 담당하는 document.write( ) 문 (2) |

• document.write( ) 문을 사용하여 웹 브라우저 화면에 표시할 내용과 변수를 섞어서 나타낼 수도 있습니다.
• 연결 연산자인 + 연산자를 사용해서 연결해 줍니다.

간단한 입출력 방법 - 콘솔 창에 출력하는 console.log( ) 문 |

콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간입니다.

• console.log( ) 문은 괄호 안의 내용을 콘솔 창에 표시합니다.
• console.log( ) 문의 괄호 안에는 변수가 들어갈 수도 있고 따옴표 사이에 표시할 텍스트를 넣을 수도 있습니다.
• 따옴표 안에 HTML 태그는 사용할 수 없습니다.

자바스크립트 스타일 가이드 |

자바스크립트 소스를 작성할 때 지켜야 할 규칙

1. 코드를 보기 좋게 들여쓰기합니다.
2. 세미콜론으로 문장을 구분합니다.
3. 공백을 넣어 읽기 쉽게 작성합니다.
4. 소스 코드를 잘 설명하는 주석을 작성합니다.
   • 한 줄 주석: 주석 기호로 슬래시 2개(//)를 붙이고 내용을 작성합니다.
   • 여러 줄 주석: 주석 내용이 여러 줄이면 여는 주석 기호(/*)를 맨 앞에, 닫는 주석 기호(*/)를 맨 뒤에 넣고 /*과 */ 사이에 주석 내용을 작성합니다.
5. 식별자는 정해진 규칙을 지켜 작성합니다.
   • 식별자의 첫 글자는 반드시 영문자나 언더스코어(_), 또는 달러 기호()로 시작해야 합니다.
   • 단어 이상이 모여 하나의 식별자를 만들 경우 첫 번째 단어는 소문자로 시작하고 두 번째 단어는 대문자로 시작하는 것이 일반적입니다.
6. 예약어는 식별자로 사용할 수 없습니다.

변수 알아보기 |

변수란

• 변수(variable)란 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터를 가리킵니다.

변수 선언의 규칙

1. 변수 이름은 영어 문자와 언더스코어(_), 숫자를 사용합니다.
2. 자바스크립트는 영어 대소 문자를 구별하며 예약어는 변수 이름으로 쓸 수 없습니다.
3. 여러 단어를 연결한 변수 이름은 중간에 대문자를 섞어 씁니다.
4. 변수 이름은 의미 있게 작성해야 합니다.

변수 선언하기

var 변수명

 

자료형 이해하기 |

숫자형

• 정수
• 실수

문자열

• 문자열은 작은따옴표('')나 큰따옴표("")로 묶은 데이터를 의미합니다.

논리형

• 논리형은 불린(boolean) 유형이라고도 하며, **참(true)**이나 **거짓(false)**의 값을 표현하는 자료형입니다.

undefined 유형과 null 유형

• undefined는 변수를 선언한 상태에서 값이 할당되지 않은 유형을 나타냅니다.
• null은 변수에 할당된 값이 유효하지 않다는 의미를 나타냅니다.

배열

• 배열은 하나의 변수에 값을 여러 개 저장할 수 있습니다.

배열명["값1", "값2", ......]
배열명[ ]

연산자 알아보기 |

산술 연산자

• 수학 계산을 할 때 사용하는 연산자입니다.
• +, -, *, /, %, ++, --

할당 연산자

• 연산자(또는 연산식) 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산자로 대입 연산자라고도 합니다.
• =, +=, -=, *=, /=, %=

연결 연산자

• 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자입니다.
• 사칙연산의 더하기 연산자와 똑같은 + 기호를 사용합니다.

비교 연산자

• 피연산자 2개의 값을 비교해서 참이나 거짓으로 결괏값을 반환합니다.
• ==, ===, !=, !==, <, <=, >, >=

논리 연산자

• 불리언(boolean) 연산자라고도 하며 true, false를 처리하는 연산자입니다.
• ||, &&, !

변수의 적용 범위 스코프 알아보기 (1) |

자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프(scope)라고 합니다.

함수 안에서만 쓸 수 있는 지역 변수

• 한 함수 안에서만 사용할 수 있는 변수를 지역 변수 또는 **로컬 변수(local variable)**라고 합니다.
• 지역 변수는 함수 안에서 선언하고 함수 안에서만 사용합니다.
• 지역 변수를 선언하려면 예약어 var와 함께 변수 이름을 지정해야 합니다.

변수의 적용 범위 스코프 알아보기 (2) |

스크립트 안에서 자유롭게 쓸 수 있는 전역 변수

• 스크립트 소스 전체에서 사용할 수 있는 변수를 전역 변수 또는 **글로벌 변수(global variable)**라고 합니다.
• 전역 변수로 사용하려면 함수 밖에서 선언하거나 함수 안에서는 var 예약어를 빼고 선언해야 합니다.

var와 호이스팅 |

호이스팅이란 ‘끌어올린다’를 뜻합니다.

상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것입니다.

• 자바스크립트 해석기는 함수 소스를 훑어보면서 var를 사용한 변수는 따로 기억해 두기 때문에 마치 선언한 것과 같은 효과가 있습니다. 이것이 바로 호이스팅입니다.

변수의 재선언과 재할당 |

• var를 사용한 변수는 호이스팅 외에도 재선언과 재할당을 할 수 있습니다.

let을 사용한 변수의 특징 - 블록 안에서만 쓸 수 있는 변수 (1) |

var는 함수 영역(레벨)의 스코프를 가지지만 let와 const는 블록 영역의 스코프를 가집니다.

• let 예약어로 선언한 변수는 변수를 선언한 블록({ }로 묶은 부분)에서만 유효하고 블록을 벗어나면 사용할 수 없습니다.

let을 사용한 변수의 특징 - 블록 안에서만 쓸 수 있는 변수 (2) | 

• 전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초깃값만 할당하면 됩니다.

let을 사용한 변수의 특징 - 재할당은 가능하지만 재선언은 할 수 없는 변수 (1) |

• let 예약어를 사용하여 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없습니다.

let을 사용한 변수의 특징 - 재할당은 가능하지만 재선언은 할 수 없는 변수 (2) |

• let 변수를 재선언하면 오류 메시지가 나타납니다.

let을 사용한 변수의 특징 - 호이스팅이 없는 변수 | 

• let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메시지를 나타냅니다.

const를 사용한 변수의 특징 (1) |

• const로 선언한 변수는 상수 변수(constant variable)로 블록 레벨의 스코프를 가집니다.
• 변하지 않는 값을 변수로 선언할 때 예약어 const를 사용합니다.
• const로 할당한 변수는 재선언할 수 없습니다.

 

const를 사용한 변수의 특징 (2) |

• const로 할당한 변수는 재할당할 수 없습니다

자바스크립트 변수 사용 방법 |

• 전역 변수는 최소한으로 사용합니다.
• var 변수는 함수의 시작 부분에서 선언합니다.
• for 문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않습니다.
• ES6를 사용한다면 예약어 var보다 let를 사용하는 것이 좋습니다.

매개변수, 인수, return 알아보기 - 매개변수를 사용한 함수 선언하고 호출하기 |

• 함수를 선언할 때부터 외부에서 값을 받아 줄 변수를 미리 만드는데 이것을 매개변수(parameter)라 하고 함수를 호출할 때 괄호 안에 매개변수의 이름을 넣습니다.
• 매개변수는 선언된 함수 안에서만 사용하며, 매개변수를 여러 개 사용할 때는 매개변수 이름 사이에 쉼표(,)를 찍어 나열합니다.
• 매개변수가 있는 함수를 호출할 때 실제 값 부분을 인수(argument)라고 합니다.
• 함수의 결괏값을 반환할 때는 예약어 return을 사용해서 다음에 넘겨줄 값을 지정해 주면 됩니다.

매개변수, 인수, return 알아보기 - 소스 간단하게 작성하기 |

• 변수에 저장하여 반환하지 않고 바로 return으로 반환하면 소스를 줄여서 작성할 수 있습니다.

매개변수 기본값 지정하기 |

• 매개변수를 선언할 때 기본값을 지정하면 변숫값을 넘겨받지 못했을 때 기본값을 사용합니다.

익명 함수 |

• 익명 함수는 이름이 없는 함수를 말합니다.
• 익명 함수는 함수 자체가 식이므로 함수를 변수에 할당할 수 있으며, 또한 다른 함수의 매개변수로 사용할 수도 있습니다.
• 변수에 저장된 익명 함수는 함수 이름 대신 변수를 이용해 함수를 실행합니다.

즉시 실행 함수 - 즉시 실행 함수 만들기 |

• 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있습니다. 이것을 즉시 실행 함수라고 합니다.
• 즉시 실행 함수는 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석합니다.

즉시 실행 함수 - 매개변수가 있는 즉시 실행 함수 만들기 |

• 매개변수를 사용하는 즉시 실행 함수라면 선언 부분 끝에 함수 실행을 위한 인수를 넣어 줍니다.

화살표 함수 - 매개변수가 없는 화살표 함수 |

(매개변수) => { 함수 내용 }
Copy

• ES6 버전부터는 => 표기법(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있습니다.
• 이러한 함수를 화살표 함수라고 하는데 익명 함수에서만 사용할 수 있습니다.
• 매개변수가 없는 경우 매개변수를 넣는 괄호 안은 비워 둡니다.

화살표 함수 - 매개변수가 1개인 화살표 함수 |

• 매개변수가 하나인 경우 매개변수의 괄호는 생략할 수 있습니다.

const hi = user => { document.write(user + "님, 안녕하세요?"); }

 

화살표 함수 - 매개변수가 2개인 화살표 함수 |

• 매개변수가 둘 이상인 경우 화살표 함수는 (매개변수) => { ... }처럼 사용합니다.

const sum = (a, b) => a + b;

 

이벤트 알아보기 |

이벤트는 웹 문서 영역 안에서 이루어지는 동작만을 말합니다.

마우스 이벤트

종류설명

click	사용자가 HTML 요소를 클릭할 때 이벤트가 발생합니다.
dblclick	사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생합니다.
mousedown	사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생합니다.
mousemove	사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생합니다.
mouseover	마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생합니다.
mouseout	마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다.
mouseup	사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생합니다.

키보드 이벤트

종류설명

keydown	사용자가 키를 누르는 동안 이벤트가 발생합니다.
keypress	사용자가 키를 눌렀을 때 이벤트가 발생합니다.
keyup	사용자가 키에서 손을 뗄 때 이벤트가 발생합니다.

문서 로딩 이벤트

종류설명

abort	문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생합니다.
error	문서 가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
load	문서 로딩이 끝나면 이벤트가 발생합니다.
resize	문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다.
scroll	문서 화면이 스크롤되었을 때 이벤트가 발생합니다.
unload	문서에서 벗어날 때 이벤트가 발생합니다.

폼 이벤트

종류설명

blur	폼 요소에 포커스를 잃었을 때 이벤트가 발생합니다.
change	목록이나 체크 상태 등이 변경되면 이벤트가 발생합니다. <input>, <select>, <textarea> 태그에서 사용합니다.
focus	폼 요소에 포커스가 놓였을 때 이벤트가 발생합니다. <label>, <select>, <textarea>, <button> 태그에서 사용합니다.
reset	폼이 리셋되었을 때 이벤트가 발생합니다.
submit	submit 버튼을 클릭했을 때 이벤트가 발생합니다.

 

이벤트 처리기 알아보기 - 버튼을 클릭하면 알림 창 표시하기 |

<태그 on이벤트명 = "함수명">
Copy

• 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러(event handler)라고 합니다.

이벤트 처리기 알아보기 - 버튼을 클릭하면 배경색 바꾸기 |

• 이벤트가 발생한 후에 여러 가지 명령을 실행해야 한다면, 그 명령을 묶어서 하나의 자바스크립트 함수로 만드는 것이 좋습니다.

DOM을 이용한 이벤트 처리기 (1) |

DOM을 이용하여 이벤트 처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 보기 좋게 사용할 수 있습니다.

• DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결합니다.
• 웹 요소를 클릭했을 때 실행할 함수를 연결하려면 다음과 같은 기본 형식으로 사용합니다.

웹 요소.onclick = 함수;

https://voucher.elice.io/courses/7739/lectures/all

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 | 엘리스