자바스크립트 가보자고 ~!

임홍렬·2022년 10월 17일

자바스크립트 공부

목록 보기

10/12

나는 자바스크립트를 정복할 것이다.

이번엔 제로초님의 'ES2021'강의로 복습겸 기초를 다시 다져볼 생각이다. 6일정도로 한바퀴 돌리고, 심화강의로 넘어가자.
팀프로젝트했던 것은 spa(?), npm를 사용해 바닐라Js로 다시 만들어야겠다.
그리고 나서 리액트 뿌순다 !!!
차근차근 열심히 달려나가자

JavaScript 언어

OOO('Hello world');

뒤에 ;(세미콜론)을 붙이는 것은 자바스크립트 엔진이 자동으로 붙여주지만 혹시모를 에러가 발생할 수 있으므로 에러를 방지하기위해 붙여주는 습관을 가지자 !!

에러

뭔가 넣어야하는데 넣지 않았을때 출력된다
- ;을 붙이지 않거나...등등

환경

alert : 웹브라우저
write : Node.js
msgBox : SpreadSheet

for문

 for (let i = 0; i < 5; i++) {
 	if (i % 2 === 0) continue;
    for (let j = 0; j < 5; j++) {
    	if (j % 2 === 0) continue;
        for (let k = 0; k < 5; k++) {
        	if (k % 2 ===0) continue;
            console.log(i, j, k);
        }
    }
 }
 
 continue : 건너띄기

배열

const arr = [1, 2, 3, 4, 5]

if (arr.indexOf(1)) {
	console.log('1 찾았다');
} else {
	console.log('1 못찾았다');
}

// 1 못찾았다 <- 이유는 arr.indexOf(1)이 0으로나와 0은 false이기 때문이다.

if (arr.indexOf(1) > -1) {
	console.log('1 찾았다');
} else {
	console.log('1 못찾았다');
}

// 1 찾았다 <- if문에 0이 들어가면 false가 되기때문에 `-1`을 넣어줘서 indexOf가 존재하냐 안하냐를 밝혀준다.

매개변수(파라미터)와 인수(아규먼트)

아직 너무너무 자주 헷갈린다 ㅠㅠ

(선언)
function a(parameter) {
	console.log(parameter);
}
(호출)
a('argument')

객체리터럴

const zzokko = (객체리터럴){
	
    (속성)name: (속성 값)'임홍렬',
    (속성)year: (속성 값)1995,
    (속성)month: (속성 값)04,
    (속성)date: (속성 값)02,
    (속성)gender: (속성 값)'M',

};

// {중괄호}괄호로 묶어준 것이 객체 리터럴이라고 한다.
// 배열로 써도 되지만, 여러개를 묶을때 이름이 필요할 경우에 객체리터럴로 묶는다 !
// 배열은 마구잡이로 묶는다 !

순서도

순서도를 잘 그리는 것이 사고력을 기르는 것이고 순서도를 효율적으로 그려야 코딩테스트를 합격할 수 있다.

순서도 그리기

순서도 그리기 연습은 프로그래밍 사고력을 기르기 위해서 매우 중요하다 ! 코드를 에디터에 입력하기전에 내가 만들 프로그램이 어떤 절차로 돌아갈지 미리 생각해야한다.

<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어 : <span id="word"></span></div>
<input type="text">
<button>입력</button>
<script>
    const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
    alert(number)
    const yesOrNo = confirm('맞나요?');


    document.querySelector('#order'); // id값을 찾을때는 #000
	document.querySelector('button.btn'); // class값을 찾을때는 .000
</script>
</body>

and(&&)는 둘 다 true여야 true
or(||)는 둘 다 false여야 false

쿵쿵따 순서도 그리기

쿵쿵따리 쿵쿵따 ~ 쿵쿵따리 쿵쿵 따 쿵쿵쿵
몇 명이 참가할지 정한다.
참가자 순서를 정한다.
제시어를 저장할 변수를 정한다.
입력한 단어를 저장할 변수를 만든다.

맨 뒷 말을 이어와 첫번째로 놔야하고
n명만큼 돌린다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>끝말잇기</title>
</head>
<body>
    <div><span id="order">1</span>번째 참가자</div>
    <div>제시어 : <span id="word"></span></div>
    <input type="text">
    <button>입력</button>
    <script>
        const number = Number(prompt('몇 명이 참가하나요?'));

        if (number) {
            const $button = document.querySelector('button');
            const $input = document.querySelector('input');
            const $word = document.querySelector('#word');
            const $order = document.querySelector('#order');
            let word; // 제시어
            let newWord; // 새로 입력한 단어

            const onClickButton = () => {
                if (newWord.length === 3 && (!word || word[word.length - 1] === newWord[0])) {
                    word = newWord;
                    $word.textContent = word;
                    const order = Number($order.textContent); // 현재순서
                    if (order + 1 > number) {
                        $order.textContent = 1;
                    } else {
                        $order.textContent = order + 1;
                    }
                } else {
                    alert('올바르지 않은 단어입니다!');
                }
                $input.value = '';
                $input.focus();
            };
            const onInput = (event) => {
                newWord = event.target.value;
            };

            $button.addEventListener('click', onClickButton);
            $input.addEventListener('input', onInput);
        }
    </script>
</body>
</html>