<자바스크립트 2학기 중간고사 대비 정리본>
| 자바스크립트 선언문 | 선언문은 자바스크립트 코드를 작성할 영역을 선언하는 것. head또는 body태그 영역에 선언한다. Head가 보편적. | <script> 자바스크립트 코드; </script> |
| 주석 처리 | //한 줄 설명글인 경우 /* 설명글이 여러 줄인 경우 이렇게 처리해요 */ |
|
| 내부 스크립트 외부로 분리하기 |
HTML 파일에서 <script> 태그를 사용하여 외부 자바스크립트 파일을 연결할 수 있음. 이때 src 속성에 외부 파일의 경로를 지정해주면 됨. | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>외부 스크립트 예제</title> </head> <body> <h1>자바스크립트 외부 스크립트 예제</h1> <!-- 외부 자바스크립트 파일 연결 --> <script src="script.js"></script> </body> </html> |
| 코드 입력 시 주의사항 |
대소문자 구분함. 코드 한 줄 작성 후 세미콜론(;)작성. 한 줄에 한 문장만 작성하기(가독성) 문자형 데이터를 작성할 때는 큰따옴표와 작은따옴표의 겹침 오류를 주의해야함! 중괄호나 소괄호의 짝이 맞아야 함. |
|
| 변수 | Variables. 변하는 데이터(값)을 저장할 수 있는 메모리 공간. 변수에는 데이터가 오직 한 개만 저장됨. 새 데이터가 들어오면 기존 데이터는 메모리 공간에서 지워짐. 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean), 빈(NULL) 데이터가 있음. |
|
| 변수 선언 | 변수 선언 시 var키워드를 변수명 앞에 붙임. 한글 불가능. 일부 특수문자만 포함가능(_,$). 초기에는 값이 입력되지 않은 상태(undefined)임. |
var 변수명; var 변수명=값; |
| 변수에 저장할 수 있는 자료형 |
문자형(String): 문자나 숫자를 큰따옴표 또는 작은따옴표로 감싸고 있음. 또한 문자형 데이터에 HTML태그를 포함하여 출력하면 태그로 인식. 숫자형(Number): “100”은 문자형 데이터다. 말 그대로 숫자가 숫자형 데이터. 논리형(Boolean): true나 false로 나뉨. 주로 비교의 결과임 Boolean()메서드에 데이터를 입력하면 논리형 데이터인 true혹은 false를 반환. Boolean메서드는 0, null, underfined, 빈 문자(“”)를 제외한 모든 데이터에 대해 true를 반환. Undefined는 변수에 값이 등록되기 전의 기본값. Null은 변수에 저장된 값이 null. Null은 변수에 저장된 데이터를 비우고자 할 때 사용. |
var name = "서윤"; // 문자형 var age = 20; // 숫자형 var isStudent = true; // 논리형 var emptyValue = null; // 빈 데이터 (Null) var notAssigned; // 빈 데이터 (Undefined) |
| typeof | Typeof는 지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용함. Document.write(데이터,”<br>”)는 화면에 데이터를 출력하고 줄바꿈함. |
|
| 변수 선언 시 주의사항 | 변수명 첫 글자로는 $,_,영문자만 올 수 있음. 변수명 첫 글자 다음은 영문자, 숫자, $, _만 포함가능. 예약어(document, location, window등) 사용불가 대소문자 구분 |
|
| 문자 결합 연산자 |
피연산자(연산 대상 데이터)가 문자형 데이터임. 피연산자로 문자형 데이터가 한 개라도 포함되어 있다면 다른 피연산자의 데이터는 자동으로 문자형 데이터로 형변환되고 문자 결합이 이루어져 하나의 문자형 데이터를 반환함. | 문자형 데이터+문자형 데이터 =하나의 문자형 데이터. 문자형 데이터+ 숫자형 데이터 =하나의 문자형 데이터. |
| 대입 연산자 | ||
| 비교 연산자 | ||
| 논리 연산자 |
||: or연산자라고 부르며, 피연산자 중 값이 하나라도 true가 존재하면 true로 결괏값을 반환합니다. &&: and연산자라 부르며, 피연산자 중 값이 하나라도 false가 존재하면 false로 결괏값을 반환합니다. !:not 연산자라 부르며, 단항 연산자임. 피연산자의 값이 true이면 반대로 false로 결괏값을 반환함. |
|
| 연산자 우선순위 |
1. () 2. 단항 연산자(--,++,!) 3. 산술 연산자(*,/,%,+,-) 4. 비교 연산자(>,>=,<,<=,==,===,!==,!=) 5. 논리 연산자(&&,\\) 6. 대입(복합 대입) 연산자(=,+=,-+,*=,/=,%=) |
|
| 삼항 조건 연산자 |
삼항 조건 연산자는 조건식(true또는 false의 결괏값을 반환)의 결과에 따라 실행 결과가 달라지는 삼항 연산자임. 연산을 위해 피연산자가 3개 필요함. 오른쪽의 예시는 a(10)>b(3)은 true이므로 “javascript”가 result에 저장된다. |
<script> var a=10; var b=3; var result=a>b?"javascript":"hello"; document.write(result);//javascript </script> |
| 질의응답 창 | 방문자에게 질문을 던져 응답을 받아올 수 있는 창. Prompt()메서드 사용. 사용자로부터 입력된 값은 문자형 데이터로 반환함. |
prompt("질문", "기본 응답"); |
제어문
| 제어문 | 프로그램의 흐름을 제어할 수 있도록 도와주는 문장. 제어문에는 조건을 만족하는지의 여부에 따라 코드를 제어할 수 있는 조건문과 변수에 일치하는 경우의 값에 따라 코드를 제어할 수 있는 선택문, 그리고 특정 코드를 여러 번 반복해서 실행할 수 있도록 하는 반복문이 있음. |
조건문(if/else/else if문) 선택문(switch문) 반복문(while/for문) |
| 조건문(IF) | 조건식의 값이 true인지 false인지에 따라 자바스크립트 코드를 제어함. If,else, else if문이 예시다. 자바스크립트 코드; } |
|
| 조건식에 논리형 데이터가 아닌 다른 형이 오는 경우 |
논리형 데이터(true, false)가 아닌 다른 형의 데이터가 입력되어도 true또는 false로 인식됨. 0, null, “”, undefinedà이게 입력되면 false를 반환. 그외에는 true이다. |
|
| 조건문(else문) | 조건식을 만족할(true)경우와 만족하지 않을(false)경우에 따라 실행되는 코드가 달라짐. 두 가지 결과가 나올 수 있음. | if(조건식){ 자바스크립트 코드1; }else{ 자바스크립트 코드2; } |
| Confirm()메서드 | 확인 버튼을 눌렀을 때와 취소 버튼을 눌렀을 때 결과 화면이 다르게 나타나도록 하려면 confirm()메서드 이용. | <script> var result=confirm("정말로 회원을 탈퇴하시겠습니까?"); if(result){ document.write("탈퇴 처리됨"); } else{ document.write("탈퇴 취소됨"); } </scirpt> |
| Else if 조건문 | 두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드. 가장 위의 조건식1부터 5까지 차례로 조건 검사를 하면서 만족(true)하는 값이 나오면 그에 해당하는 코드를 실행하고 조건문을 종료함. 조건식 중 만족(true)하는 값이 하나도 없으면 else문의 중괄호{…}에 있는 코드를 실행함. | if(조건식1){ 코드1; }else if(조건식2){ 코드2; }else if(조건식3){ 코드3; }else if(조건식4){ 코드4; }else if(조건식5){ 코드5; }else{ 코드6;} |
| 중첩 if문 | 조건문 안에 조건문이 있으면 중첩 if문임. 바깥쪽 조건문을 만족해야만 안쪽의 조건문인 조건식2를 검사함. 안쪽 if문의 조건식 2를 만족하지 않으면 바깥쪽 조건문인 조건식1의 중괄호 안에 있는 코드만 실행하고 종료됨. | if(조건식1){ if(조건식2){ 자바스크립트 코드; } } |
| 선택문(switch문) | 변수에 저장된 값과 switch문에 있는 경우(case)의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행. if문과 용도는 비슷하나 if문은 만족하는 데이터가 여러 개일 경우 주로 사용하고, switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용. 변수에 저장된 값은 switch문을 만나면 case의 값을 하나씩 검사함. 일치하는 데이터가 있으면 그에 해당하는 코드를 실행하고 break문을 만나 switch문을 종료함. Case값 중에 일치하는 데이터가 없으면 마지막 default에 있는 코드를 실행하고 switch문을 종료함. |
var 변수=초깃값; switch(변수){ case값1:코드1; break; case값2:코드2; break; case값3:코드3; break; case값4:코드4; break; default:코드5;} |
| 반복문(while문) | 반복문을 이용하면 코드를 원하는 횟수만큼 반복하여 실행이 가능. while문은 조건식을 만족할 때까지 코드를 여러 회 반복하여 실행 가능. while문은 조건식을 만족할 때까지 중괄호 안에 있는 코드를 반복하여 실행함. -조건식 검사à만족 시 중괄호 안에 있는 코드와 증감식 실행à다시 조건식 검사 |
var 변수=초깃값; while(조건식){ 자바스크립트 코드; 증감식; } |
| Do while문 | Do while문은 반드시 한 번은 코드를 실행 후 조건식을 검사함. 중괄호에 있는 코드를 실행하고 조건식을 검사함. 오른쪽은 hello먼저 실행하고 조건식 i<3을 검사함. 변수 i에는 10이 저장되어있으므로 false반환해 do while문이 종료. | <script> var i=10; do{ document.write("hello"); } while(i<3) </script> |
| For문 | 조건식을 만족할 때까지 특정 코드를 반복하여 실행함. | for(초깃값; 조건식; 증감식){ 자바스크립트 코드; } |
| Break문 | While문 또는 for문에서 break문을 실행하면 조건식과 관계없이 상관없이 강제로 반복문을 종료함. 즉, break문은 반복문을 강제로 종료할 때 사용함. break문이 코드보다 앞에 있으므로 코드는 실행되지 않고 for문과 while문이 바로 종료됩니다. |
for(초깃값; 조건식; 증감식){ break; //반복문을 강제로 종료합니다. 자바스크립트 코드; } |
| Continue문 | 반복문에서만 사용이 가능. while문에 사용할 경우 continue문 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 함. While문 안에 있는 continue 문은 “다음에 오는 코드는 무시하고 조건식에서 조건 검사를 실행해!”라고 하는거임. for문에서 continue문 실행 시 continue다음에 오는 코드는 무시하고 바로 증감식으로 이동하여 증감연산을 실행. | for(초깃값; 조건식; 증감식){ continue; 자바스크립트 코드; } |
| 중첩for문 | For문 안에 for문을 사용한 것을 중첩 for문이라고 함. | for(초깃값; 조건식; 증감식){ for(초깃값; 조건식; 증감식){ 자바스크립트 코드; } } |
객체
| 객체 | 자바스크립트는 객체(object)기반 언어임. 객체는 기능과 속성을 가지고 있음. 앞에서는 도큐먼트라는 객체를 사용했고 출력 기능도 사용해봄. 이런 기능들은 메서드(method)라고 함. 객체는 속성(property)도 가지고 있음. Ex)객체(TV) à메서드(켜다, 끄다, 볼륨을 높이다) à속성(너비, 높이, 색상, 무게 등) |
|
| 객체, 메서드 속성 사용 기본형 |
객체.메서드(); 객체.속성;(객체의 속성값을 가져옴) 또는 객체.속성=값;(객체의 속성값을 바꿈) |
|
| 객체의 종류 |
내장 객체 | 자바스크립트 엔진에 내장되어 있음. 필요한 경우에 생성해 사용가능. 문자(string), 날짜(date), 배열(array), 수학(math) 객체 등이 있다. |
| 브라우저 객체 모델 | 브라우저 객체모델(BOM)은 브라우저에 계층 구조로 내장되어 있는 객체. Window, screen, location, history, navigator등이 있음. (*참조 주소 속성:href) |
|
| 문서 객체 모델 | 문서 객체 모델(DOM)은 HTML 문서 구조를 말함. HTML문서의 기본 구조는 최상위 객체로 <html>이 있으며, 하위 객체로는 <head>나 <body>가 있음. HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고, 선택한 문서 객체에 원하는 스타일(CSS)을 적용 가능. (하지만 IE 8 이하 버전에서는 자바스크립트 문서객체모델 호환성이 떨어짐. 극복을 위해 제이쿼리를 사용.) |
|
| 내장 객체 | Built-in Object | 참조 변수(인스턴스 이름)=new생성함수() |
<날짜 정보 객체>
- Date Object(날짜 객체). 날짜 관련 작업을 할 때 유용함.
- [현재 날짜 정보 제공 Date객체 기본형]è 참조 변수=new Date();
- [특정 날짜 정보 제공 Date객체 기본형]è 참조 변수=new Date(“연/월/일”);
| 날짜 정보를 가져올 때(GET) | 날짜 정보를 수정할 때(SET) | ||
| getFullYear() | 연도 정보를 가져옴 | setFullYear() | 연도 정보만 수정함 |
| getMonth() | 월 정보를 가져옴(현재 월-1) | setMonth() | 월 정보만 수정함(월 -1) |
| getDate() | 일 정보를 가져옴 | setDate() | 일 정보만 수정함 |
| getDay() | 요일 정보를 가져옴(일:0~토:6) | ‘요일’은 날짜를 바꾸면 자동으로 바뀌므로 setDay()는 없다. | |
| getHours() | 시 정보를 가져옴 | setHours() | 시 정보만 수정함 |
| getMinutes() | 분 정보를 가져옴 | setMinutes() | 분 정보만 수정함 |
| getSeconds() | 초 정보를 가져옴 | setSeconds() | 초 정보만 수정함 |
| getMilliseconds() | 밀리초 정보를 가져옴 | setMilliseconds() | 밀리초 정보만 수정함 |
| getTime() | 1970년 1월 1일부터 경과된 시간을 밀리초로 표기함 |
setTime() | 1970년 1월 1일부터 경과된 시간을 밀리초로 수정함. |
| toGMTString() | GMT 표준 표기 방식으로 문자형 데이터로 반환함. | toLocaleString() | 운영 시스템 표기 방식으로 문자형 데이터로 반환함. |