본문 바로가기
연습/JS

JS - 기초 랠리

by hyeon1016 2024. 8. 29.

학원에서 진행한 랠리다.

해당 문제를 1번 부터 풀고, 틀리면 모두 지우고 공부한 후에 1번부터 다시 푸는 형식이다.

틀리면 지우고 다시 푸는 것을 반복하니, 제대로 알지 못했던 개념이나 코드를 확실하게 익힐 수 있어서 좋았다. 

 

1 변수를 개념과 선언(정의)하는 방법을 설명할 수 있다. 변수란데이터를 저장하는 메모리공간이다.
변수의 선언 및 초기화
let a = 0;
변수 선언 후 초기화
let a;
a = 0;
2 변수의 이름을 정하는 규칙에 대해서 설명할 수 있다. 변수의 이름은 숫자로 시작할 수 없고, '_, $'를 제외한 특수문자는 사용할 수 없다.
3 기본 데이터 타입을 설명할 수 있다. 문자형 : 하나 이상의 문자로 이루어진 변수다. 따옴표 안에 값을 작성한다.
숫자형 : 정수, 실수가 포함된 변수다. 따옴표를 사용하지 않는다.
부울형 : true/ false의 결과 값을 가진다. 따옴표를 사용하지 않으며, 0은 거짓 1은 참이다.
4 복합 데이터 타입을 설명할 수 있다. 심볼형 : 유일하고 변하지 않는 기본값을 취급한다.
배열형 : 값의 집합체를 취급한다.
객체형 : 객체를 취급한다.
함수형 : 실행 가능한 코드의 집합체
5 특수 데이터 타입을 설명할 수 있다. undefined : 값이 할당 되지 않은 상태다
null : 값이 없음을 명시적으로 표시한다.
6 데이터 타입 형변환에 대해서 설명할 수 있다. 문자형 > 숫자형
let a = "0";
let b = Number(a);

숫자형 > 문자형
let a = 10;
let b = String(a);

숫자형 > 부울형
let a = 100;
let b = Boolean(a);
7 상수에 대해서 설명할 수 있다. 변하지 않는 수
변수 앞에 const를 붙여 정의한다.
배열의 요소를 추가/제거 하거나, 객체의 속성 값을 수정하는 것은 가능하다
8 산술연산자에 대해서 설명할 수 있다. "+, -, *, /, %" 다섯 가지의 연산자가 존재한다.
+ : 더하기
- : 뺴기
* : 곱하기
/ : 나눈 몫을 값으로 반환함
% : 나누고 남은 나머지를 값으로 반환함
9 단항연산자에 대해서 설명할 수 있다. "++" : 값을 1 증가시킨다.
"--" : 값을 1 뺀다.
! : 부울형의 결과값을 부정한다. !! 이런식으로 두 번 쓰면 이중부정이다.
10 비교연산자에 대해서 설명할 수 있다. "<,>,==,===,!=,<=,>=" 등이 있다.
== : 값이 같으면 참
=== : 모든 것이 완벽히 일치해야 참
!= : 같지 않다.
11 논리 연산자에 대해서 설명할 수 있다. && : 두 조건식이 참이면 참
|| : 어느 한쪽의 조건식이 참이면 참
12 대입 연산자에 대해서 설명할 수 있다. "+=" : 기존 값에 더한다.
-= : 기존 값에 뺀다.
*= : 기존 값에 곱한다
/= : 기존 값을 나눈 몫을 반환
%/ : 기존 값을 나누고 남은 나머지를 반환
13 if구문의 기본적인 구조에 대해서 설명할 수 있다. 조건식의 결과가 true일 때 {}안의 코드를 실행한다.

if(a==1) {}
14 if구문의 3종류에 대해서 각각의 차이점을 설명할 수 있다. if문 : 조건식의 결과가 true일 때 {}안의 코드를 실행한다.

if(a==1) {
내용
}

if else : if문을 사용했을 때 조건식이 else의 코드를 실행한다.

if(a==1) {
내용
}
else {
내용
}

if else if : if문이 거짓일 때 한번 더 if문을 사용해 해당 요소를 여러번 검사한다.
우선도가 높은 것을 먼저 배치하고 뒤로 갈 수록 우선도가 낮다.

if(a==1) {
내용
}
else if(a==2) {
내용
else {
내용
}
15 스위치문에 대해서 설명할 수 있다. 조건식의 결과 값에 따라 실행여부를 판단하지 않고, 변수가 일치한다면 해당 변수의 값에 따라 결과 값이 달라진다.
case로 값이 일치하는지 확인하고, default로 일치하지 않는 값의 결과를 표시한다.

let a = Math.floor(Math.random() * 2 +1);

switch(a) {
case 1 : console.log("1");
break;
case 2 : console.log("2");
break;
}
16 for에 대해서 설명할 수 있다. 반복문
초기값, 조건식, 증감식이 필요하며
선언된 변수가 조건식이 false가 될 때 까지 반복한다. 1회 반복할 때마다 증감식에 의해 값이 1증가하거나
감소한다.
for(let i = 0; i < 10; i++){
console.log(i);
}
17 foreach에 대해서 설명할 수 있다. 데이터 배열에 많이 사용된다.
for문과 다르게 forEach문은 초기값, 조건식, 증감식이 필요없다.
변수 뒤에 .forEach를 작성해주면 자동으로 변수의 배열만큼 반복한다.

let a = [1,2,55,6];

a.forEach(funtion(b){
console.log(b);
})
18 while문에 대해서 설명할 수 있다. while문은 조건식이 true일 때 {}안의 코드를 반복한다.

let a = 0;

while(a<4) {
console.log(a);
a++
}

무한 반복 시키고 싶다면 조건식에 true를 입력해주면 된다.
19 do while문에 대해서 설명할 수 있다. 조건식이 일치해야 반복했던 while문과 달리
do while문은 일단 한번 실행하고 while로 반복 여부를 판단한다.

let a = 0;

do {
console.log(a);
a++;
} while(a<10);
20 break 와 continue에 대해서 설명할 수 있다. break : 실행중인 반복문을 중단시키고 빠져나간다.
continue : 해당 반복을 중단하고, 다음 반복으로 넘어간다.
21 배열을 선언하는 2가지 방법에 대해서 설명할 수 있다. 리터럴 선언
let a = [1,2,5];

new와 생성자로 객체 생성
let a = new Array(1,5,7);
22 일반변수와 배열변수의 차이점에 대해서 설명할 수 있다. 일반변수 :
하나의 값만 저장 가능
변수명으로 직접 접근해야함

배열변수
여러개의 값 저장 가능
배열의 index값으로 요소에 접근 가능
23 배열을 초기화 하는 방법에 대해서 설명할 수 있다. let a = [12,4,6];


let b = new Array(6);
for(let i = 0; i < b.length; i++) {
b[i] = i+1;
}
24 객체의 개념을 설명하고 정의할 수 있다. 객체란 세상의 모든 사물의 행동이나 기능을 속성과 메서드로 정의하고 구현하는 것이다.
let a = new Object();

funtion object(a,b) {
속성,메서드
}

let b = {
속성, 메서드
}
25 객체멤버에 접근하는 방법을 설명할 수 있따. 객체명.속성
객체명.함수()
26 메서드에 대해서 설명할 수 있다. 객체의 동작, 기능을 수행하는 것을 메서드라 한다.
객체 내부에 함수를 생성하여 객체의 속성을 수정하거나 한다.
27 메서드의 작성방법에 대해서 설명할 수 있다. let a = {
b :10,
c : function(){
console.log(this.b + 1);
}
}
28 전역변수와 지역변수의 차이점에 대해서 설명할 수 있다. 전역 변수
문서 전체에서 접근 가능하다.

지역 변수
특정 함수 또는 블록(let, const) 내에서만 접근 가능한 변수다.
29 매개변수에 대해서 설명할 수 있다. 매개변수는 함수나 변수가 정의되는 부분에 선언되는 변수다.
함수, 변수의 입력값을 매개변수에 저장해 함수 내부에 사용한다.

입력 값 전달 : 함수나 메서드에 필요한 값을 매개변수를 통해 전달한다.

funtion a(b,c) {
return b*c;
}

let d = a(10, 5);
console.log(d);
30 this를 설명할 수 있다. 객체
객체에서 this를 사용하면 현재 객체를 참조한다.

생성자 함수
생성자 함수에서 this를 사용하면 생성된 객체를 참조한다.

function a(b) {
this.name = b;
}

let d = new a(c);

console.log(d.name); //c



이벤트
이벤트로 생성된 함수에서 this를 사용하면 이벤트가 실행된 요소를 참조한다..

'연습 > JS' 카테고리의 다른 글

JS - 기능 구현 연습  (0) 2024.09.03
JS - drag and drop 연습  (0) 2024.09.03
JS - 탭  (0) 2024.08.27
JS - 슬라이드  (0) 2024.08.26
JS - 배경 색상 변경  (0) 2024.08.23