자바스크립트 기초 정리 문제 및 풀이

[01]자바스크립트의 특징으로 아닌 것은
1 웹의 동작(동적) 구현하기 위한 언어
2 웹 브라우저에서 동작(단, node.js는 서버에서 동작)
3 html문서 내에서 <script> ~ <script> 태그 안에 작성
4 대소문자를 구별한다
5 객체 기반의 스크립트 언어
6 웹 브라우저 자바스크립트 엔진이 내장되어 있기 때문에 사용이 불가능
정답:- 대소문자를 구별 
       - 웹 브라우저 자바스크립트 엔진이 내장되어 있기 때문에 사용이 가능


[02]변수(Variable)의 간단히 설명하기
정답: 변수란 데이터를 저장할 수 있는 메모리 공간을 의미합니다. 

[03]상수(constant)의 간단히 설명하기
정답: 한번 선언된 상수는 다시 재정의 할 수 없으며, 값도 재할당 할 수 없습니다.

[04]자바스크립트의 데이터 타입이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다 
종류는 기본 3가지 작성하시요
1. 숫자형(number)
자바스크립트는 다른 언어와 달리 정수와 실수를 따로 구분하지 않습니다. 모든 수를 실수 하나로만 표현합니다.

2. 문자열형(string)
자바스크립트는 문자열을 쌍따옴표, 따옴표로 둘러싸인 문자의 집합을 의미합니다

3. 불리언형(boolean)
참(true) 또는 거짓(false)으로 표현되는 값입니다.


[05] 각 단어의 의미를 간단히 설명하기
undefined : 타입이 정해지지 않은 것을 의미합니다. -> 변수 선언 후 값이 정해지지 않은 경우

null : 값이 정해지지 않은 것을 의미합니다. ->  null로 변수를 초기화 한 경우 -> object 타입

NaN(Not a Number): 정의되지 않은 값이나 표현할 수 없는 값을 뜻합니다.


[06] 해당 객체의 각각의 키값과 속성값을 추출하기
객체형(object)
여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입입니다. 

let student = {"name":"김사과", "age":20};
console.log(student.name)l // 김사과
console.log(dog["name"]); // 김사과

 for (let i in dog) {
        console.log(i); //  name, age, color, weight
        console.log(dog[i]); // '루시', 10, 'white', 3.5
 }

let 변수명

[07] 아래 괄호안에 알맞은 단어를 대입 하시요
 A:명시적 타입 변환, B:암시적 타입 변환
(  암시적 타입 변환  ) : 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용합니다.
(  명시적 타입 변환  ) :자바스크립트는 자동으로 타입 변환을 사용하지만 종종 명시적으로 타입을 변환할 필요가 있습니다. 



[08]명시적 타입 변환 함수
A: Number(), B: String() C: Boolean(), D: Object(), E: parseInt(), F: parseFloat()     

(     A     ) : 문자를 숫자로 변환
(     B    ) : 숫자나 불린등을 문자형으로 변환
(          ) : 문자나 숫자등을 불린형으로 변환
(          ) : 모든 자료형을 객체형으로 변환
(          ) : 문자형을 int형으로 변환
(          ) : 문자형을 float형으로 변환

Number() : 문자를 숫자로 변환
String() : 숫자나 불린등을 문자형으로 변환
Boolean() : 문자나 숫자등을 불린형으로 변환
Object() : 모든 자료형을 객체형으로 변환
parseInt() : 문자형을 int형으로 변환
parseFloat() : 문자형을 float형으로 변환


[09]비교 연산자
== : 같다 ("10" == 10 는 true -> 타입이 달라도 값이 같으면 참)
=== : 같다 ("10" === 10 는 false -> 타입과 값이 같아야 참)
!= : 다르다 (값만 같으면 false, 값이 같으면 true)
!== : 다르다 (값, 타입 둘 중 하나만 다르면 true)

==, != 와  ===, !==의 차이점 
 비교하는데 있었어 후자 데이터와 데이터 타입 구분

[10]증감 연산자
전위연산자와 후위연산자의 차이점
++변수, 변수++

++변수 : 변수의 값을 1증가시킨 후, 다음 연산을 진행
변수++ : 먼저 연산을 수행한 후, 변수의 값을 1증가 시킴
--변수 : 변수의 값을 1감소시킨 후, 다음 연산을 진행
변수-- : 먼저 연산을 수행한 후, 변수의 값을 1갑소 시킴


[11]삼항 연산자
조건식에 따른 참, 거짓에 따라 반환값이 달라지는 연산자
간단하게 삼항연산자 형식을 선언하시요

변수(상수) = 조건식 ? 참일때 결과1 : 거짓일때 결과2


[12] 조건문 2가지와 반복문 2가지 작성하시요 
1. 조건문
프로그램 내에서 주어진 조건문의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다.
(       if        ,          switch          )

2. 반복문
프로그램 내에서 같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문입니다.
(       while         ,         for          )



[14] 기본 형식을 작성하시요
if 문 형식
1. if 문

if(조건식) {
    조건식의 결과가 참(true)일 때 실행할 문장;
    ....
}


2. if ~ else 문
if(조건식) {
    조건식의 결과가 참(true)일 때 실행할 문장;
    ....
}else{
    조건식의 결과가 거짓(false)일 때 실행할 문장;
    ....
}


3. if ~ else if문
if(조건식1) {
    조건식1의 결과가 참(true)일 때 실행할 문장;
    ....
}else if(조건식2){
    조건식2의 결과가 참(true)일 때 실행할 문장;
    ....
}else if(조건식3){
    조건식3의 결과가 참(true)일 때 실행할 문장;
    ....
}




[15] 기본 형식을 작성하시요
switch문은 if ~ else if문과 마찬가지로 주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문

switch(변수 또는 상수){
   case 값1:
        변수 또는 상수의 값이 값1과 일치할 경우 실행할 문장;
        break;
    case 값2:
        변수 또는 상수의 값이 값2과 일치할 경우 실행할 문장;
        break;
    ...
    default:
        비교값이 모두 일치하지 않을 경우 실행할 문장;
}

[16]do while 문
while문은 실행문을 실행하기 전에 먼저 조건식부터 검사를 합니다. do while문은 먼저 실행문을 실행한 후 조건식을 검사합니다.
  각각 A,B에 입력되어야 하는 것은  
   A: 초기값  변수명 = 0;
   B: 조건식  a< 10 

let (   A    )
do {
    조건식의 결과가 참인 동안 반복될 실행문;
    ...
    (조건식을 거짓으로 변경할 실행문)
}while(    B    );


[17] 괄호안에 들어갈 내용 A,B,C를 알맞은 순으로 나열하시요(            )
for 문
for문은 while문과 달리 자체적으로 초기값, 조건식, 증감식을 모두 포함하고 있는 반복문입니다. while문 보다는 간결하게 반복을 표현할 수 있습니다.
A:초기값, B:조건식, C:증감식

for((  초기값     ); (   조건식   ); (  증감식     )){
    조건식의 결과가 참인 동안 반복할 실행문;
    ...
}



[18]알맞은 단어를 넣어주세요
배열(Array)
이름과 인덱스로 참조되는 정렬된 값의 집합입니다. 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 합니다.

"push(), pop(), shift(), concat(), join(), reverse(), sort()"

Array 객체의 메소드
(        ) : 배열의 요소를 추가
(        ) : 배열의 마지막 주소에 있는 값을 제거
(        ): 배열의 첫번째 주소에 있는 값을 제거
(        ) : 두 개의 배열을 합침
(        ) 배열 요소 사이에 원하는 문자를 삽입
(        ): 배열을 역순으로 재배치
(        ): 배열을 오름차순으로 정렬

push() : 배열의 요소를 추가
pop() : 배열의 마지막 주소에 있는 값을 제거
shift() : 배열의 첫번째 주소에 있는 값을 제거
concat() : 두 개의 배열을 합침
join() : 배열 요소 사이에 원하는 문자를 삽입
reverse() : 배열을 역순으로 재배치
sort() : 배열을 오름차순으로 정렬

[19]함수를 선언하시요 (문법 형식)
사용자 정의 함수(function)
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행하기 때문에 코드를 재활용할 수 있습니다.

- 함수 선언식
function 함수명(){  
    함수가 호출되었을 때 실행할 문장;
    ...
}
함수명();


- 함수 표현식
const 함수명 = function(){
    함수가 호출되었을 때 실행할 문장;
    ...
}
함수명();



[20]함수를 선언하시요 (문법 형식)
화살표 함수
function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현합니다. 화살표 함수는 항상 익명입니다.

const 함수명 = (매개변수1, 매개변수2 ..) => 실행문 ..



[21]알맞은 단어를 넣어주세요
변수의 범위
자바스크립트에서는 객체, 함수 모두 변수(상수)입니다. 변수의 범위란 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미합니다.
A: 전역변수 , B: 지역변수


1.( 지역변수 ) -> 스코프 -> 범위
함수 내에서 선언된 변수를 가리킵니다. 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라집니다.

2.(전역 변수)
함수의 외부에서 선언된 변수를 가리킵니다. 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라집니다.

배열과 차이점 
1.인덱스가 있다
2.원래는 타입은 공통되었야 한다
3.크기가 정해져 있다 갯수를 말함


[22]알맞은 단어를 넣어주세요
Math 객체
Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 내장 객체입니다.
" min(), max(), round(), floor(), ceil(),  random()

(      ) : 최소값을 리턴, 매개변수가 전달되지 않으면 Infinity를 리턴, 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴
(      ) : 최대값을 리턴, 매개변수가 전달되지 않으면 -Infinity를 리턴, 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴
(      ) : 소수점 첫번째 자리에서 반올림하여 리턴
(      ) : 소수점 첫번째 자리에서 내림
(      ) : 소수점 첫번째 자리에서 올림
(      ): 0보다 크거나 같고 1보다 작은 무작위 소수를 리턴

min() : 최소값을 리턴, 매개변수가 전달되지 않으면 Infinity를 리턴, 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴
max() : 최대값을 리턴, 매개변수가 전달되지 않으면 -Infinity를 리턴, 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴
round() : 소수점 첫번째 자리에서 반올림하여 리턴
floor() : 소수점 첫번째 자리에서 내림
ceil() : 소수점 첫번째 자리에서 올림
random() : 0보다 크거나 같고 1보다 작은 무작위 소수를 리턴


[23]알맞은 단어를 넣어주세요
String 객체
String 객체는 문자열을 손쉽게 만들고 다룰 수 있도록 합니다.
"indexOf(), charAt(), includes(), substring(), substr(), split(), replace() ,trim(), toUpperCase(), toLowerCase()"

(       ) : 매개변수로 전달된 문자열이 처음 등장하는 위치를 리턴
(       ) : 매개변수로 전달된 인덱스에 위치한 문자를 리턴
(       )  : 매개변수로 전달된 문자열이 포함되어 있는지 여부를 리턴
(       )  : 매개변수로 전달된 시작 인덱스부터 종료 인덱스 바로 앞까지 문자열을 추출하여 리턴
(       )  : 매개변수로 전달된 시작 인덱스부터 매개변수로 전달된 개수만큼 문자열을 추출하여 리턴
(       ) : 매개변수로 전달된 구분자를 기준으로 문자열을 나눈 후 하나의 배열에 저장
(       )  : 원본 문자열을 매개변수로 전달된 문자열로 치환
(       ) : 문자열의 앞뒤 공백을 제거
(       )  : 문자열의 영문자 중 소문자를 모두 대문자로 변환
(       )  : 문자열의 영문자 중 대문자를 모두 소문자로 변환
indexOf() : 매개변수로 전달된 문자열이 처음 등장하는 위치를 리턴
charAt() : 매개변수로 전달된 인덱스에 위치한 문자를 리턴
includes() : 매개변수로 전달된 문자열이 포함되어 있는지 여부를 리턴
substring() : 매개변수로 전달된 시작 인덱스부터 종료 인덱스 바로 앞까지 문자열을 추출하여 리턴
substr() : 매개변수로 전달된 시작 인덱스부터 매개변수로 전달된 개수만큼 문자열을 추출하여 리턴
split() : 매개변수로 전달된 구분자를 기준으로 문자열을 나눈 후 하나의 배열에 저장
replace() : 원본 문자열을 매개변수로 전달된 문자열로 치환
trim() : 문자열의 앞뒤 공백을 제거
toUpperCase() : 문자열의 영문자 중 소문자를 모두 대문자로 변환
toLowerCase() : 문자열의 영문자 중 대문자를 모두 소문자로 변환

[24]자바스크립트에서 객체를 선언하는 방법 5가지 작성하시요
document 객체
document 객체는 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 사용하는 객체입니다.

getElementsByTagName() : 해당 태그 이름의 요소를 모두 선택
getElementById() : 해당 아이디의 요소를 선택
getElementsByClassName() : 해당 클래스에 속한 요소를 모두 선택
getElementsByName() : 해당 name 속성값을 가지는 요소를 모두 선택

querySelector() : 해당 선택자로 선택되는 요소를 선택
querySelectorAll() : 해당 선택자로 선택되는 요소를 모두 선택


노드(node)
HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장합니다. HTML DOM은 노드들을 정의하고 그 사이의 관계를 설명해주는 역할을 합니다. HTML 문서의 정보는 노드트리라고 불리는 계층적 구조에 저장됩니다. 노드트리는 최상위 레벨인 루트 노드로부터 시작하고, 가장 낮은 레벨인 텍스트 노드까지 내려갑니다. HTML DOM을 이용하여 노트 트리에 포함된 모든 노드에 접근할 수 있습니다.


[25]알맞은 단어를 넣어주세요
노드의 종류
"문서 노드(document node) ,요소 노드(element node), 속성 노드(attribute node), 텍스트 노드(text node),주석 노드(comment node) "
(      ) : 문서 전체를 나타내는 노드
(      ) : HTML 요소(태그)의 노드, 속성 노드를 포함하는 유일한 노드
(      ) : HTML 요소의 속성, 요소 노드에 관한 정보를 가지고 있음 
(      ) : HTML 모든 텍스트
(      ) : HTML 모든 주석
문서 노드(document node) : 문서 전체를 나타내는 노드
요소 노드(element node) : HTML 요소(태그)의 노드, 속성 노드를 포함하는 유일한 노드
속성 노드(attribute node) : HTML 요소의 속성, 요소 노드에 관한 정보를 가지고 있음 
텍스트 노드(text node) : HTML 모든 텍스트
주석 노드(comment node) : HTML 모든 주석


[26]알맞은 단어를 넣어주세요
"parentNode , childNodes, firstChild, lastChild, nextSibling,previousSibling   "

노드간의 관계
(      ) : 부모 노드
(      ) : 자식 노드 리스트
(      ) : 첫번째 자식 노드
(      ) : 마지막 자식 노드
(      ) : 다음 형제 노드
(      ) : 이전 형제 노드
parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드


[27]알맞은 단어를 넣어주세요
" appendChild(), insertBefore(), insertData() "

노드 추가
(      ) : 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
(      ) : 새로운 노드를 특정 자식 노드 바로 앞에 추가
(      ) : 새로운 노드를 텍스트 데이터에 새로운 텍스트로 추가


[28]알맞은 단어를 넣어주세요
"createElement(),  createAttribute(),  createTextNode()"
노드 생성
(      ) : 새로운 요소 노드를 만듬
(      ) : 새로운 속성 노드를 만듬
(      ) : 새로운 텍스트 노드를 만듬
createElement() : 새로운 요소 노드를 만듬
createAttribute() : 새로운 속성 노드를 만듬
createTextNode() : 새로운 텍스트 노드를 만듬



[29]알맞은 단어를 넣어주세요
"removeChild(),  removeAttribute(), cloneNode()"
노드 제거
(      ) : 자식 노드 리스트에서 특정 자식 노드를 제거. 성공적으로 노드가 제거되면 노드를 리턴. 노드가 제거될 때 제거되는 노드의 모든 자식들도 다같이 제거
(      ) : 속성의 이름을 이용하여 특정 속성 노드를 제거

노드 복제
(       ) : 기존의 존재하는 노드와 동일한 새로운 노드를 생성

removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제거. 성공적으로 노드가 제거되면 노드를 리턴. 노드가 제거될 때 제거되는 노드의 모든 자식들도 다같이 제거
removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거
cloneNode() : 기존의 존재하는 노드와 동일한 새로운 노드를 생성


[복제할 노드].cloneNode(자식노드 복제여부);
자식노드 복제여부 : 전달될 값이 true면 복제되는 노드의 모든 속성과 자식 노드도 함께 복제되고, false면 속성 노드만 복제하고 자식 노드는 복제하지 않음

[30]알맞은 단어를 넣어주세요
"replaceData(),   replaceChild(), 
노드 교체
(              ) : 기존의 요소 노드를 새로운 요소 노드로 교체할 수 있음
(              ): 텍스트 노드의 텍스트 데이터를 교체할 수 있음
replaceChild() : 기존의 요소 노드를 새로운 요소 노드로 교체할 수 있음
replaceData() : 텍스트 노드의 텍스트 데이터를 교체할 수 있음