[DAY 18] HTML, CSS, Javascript

[천재교육] 프로젝트 기반 빅데이터 서비스 개발자 양성 과정 9기
학습일 : 2024.08.05

📕 학습 목록

HTML
CSS
Javascript

📗 기억할 내용

1) Javascript

① 변수/상수 선언

var / let / const

	키워드	스코프	값 변경 (재할당)	중복 선언
변수 선언	var	함수 스코프	O	O
변수 선언	let	블록 스코프	O	X
상수 선언	const	블록 스코프	X	X

② 제어문

프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 제어 • 반복시키는 문장

분류	제어문
조건문	if, switch
반복문	while, do while, for
중지, 건너뛰기	break, continue

조건문

// if ~ else if ~ else 문
if (a === 100) {
	console.log('학점 : A입니다');
} else if (a === 90) {
	console.log('학점 : B입니다');
} else if (a === 70) {
	console.log('학점 : C입니다');
} else {
	console.log('불합격 입니다');
}

// switch ~ case 문
switch (a) {
	case 100:
    	console.log('학점 : A입니다');
        break;
    case 90:
    	console.log('학점 : B입니다');
    	break;
    case 70:
    	console.log('학점 : C입니다');
        break;
    default:
    	console.log('불합격 입니다');
        break;
}

③ 함수

화살표 함수(Arrow function)

[화살표 함수 형식]
var 변수명 = (매개변수1, 매개변수2) => 실행문1;
실행문;

- '=>'을 이용하여 함수를 간결하게 표현
- 익명 함수 형식
- 단일 실행문일 경우, 함수의 중괄호{}와 return을 생략할 수 있음

// 일반 함수
var doMultiplication = function(s1, s2) {
	return s1 * s2;
}
console.log(doMultiplication(2, 5));  //10

// 화살표 함수
var doMultiplication = (s1, s2) => s1 * s2;
console.log(doMultiplication(2, 5));  //10

2) DOM(Document Object Model)

웹 페이지 구조를 트리형태로 표현한 것
이를 통해 Javascript를 사용하여 HTML 문서를 동적으로 조작할 수 있도록 함

[DOM 트리 예시]
- html
  - head
    - title
  - body
    - h1
    - p

📘 트러블 슈팅

[문제]

문제 내용

출력 과정에서 오류 발생

 <script>
    // 변수 선언
    let randomNumber = Math.floor(Math.random() * 100) + 1;

    const guesses = document.querySelector(".guesses");
    const lastResult = document.querySelector(".lastResult");
    const lowOrHi = document.querySelector(".lowOrHi");

    const guessSubmit = document.querySelector(".guessSubmit");
    const guessField = document.querySelector(".guessField");

    let guessCount = 1;
    let resetButton;

    // 함수 선언
    function checkGuess() {
        alert("I am a placeholder");
    }

    checkGuess();

    // 복합 할당 연산자
    let number1 = 1;
    number1 += 2;

    let number2 = 1;
    number2 = number2 + 2;

    // 텍스트 문자열
    function checkGuess() {
        alert("I am a placeholder");
    }
    const name = "Mahalia";
    const greeting = Hello ${name};

    // 조건
    function checkGuess() {
        const userGuess = Number(guessField.value);
        if (guessCount === 1) {
            guesses.textContent = "Previous guesses: ";
        }
        guesses.textContent += userGuess + " ";

        if (userGuess === randomNumber) {
            lastResult.textContent = "Congratulations! You got it right!";
            lastResult.style.backgroundColor = "green";
            lowOrHi.textContent = "";
            setGameOver();
        } else if (guessCount === 10) {
            lastResult.textContent = "!!!GAME OVER!!!";
            lowOrHi.textContent = "";
            setGameOver();
        } else {
            lastResult.textContent = "Wrong!";
            lastResult.style.backgroundColor = "red";
            if (userGuess < randomNumber) {
                lowOrHi.textContent = "Last guess was too low!";
            } else if (userGuess > randomNumber) {
                lowOrHi.textContent = "Last guess was too high!";
            }
        }

        guessCount++;
        guessField.value = "";
        guessField.focus();
    }

    guessCount === 1;

    // 이벤트
    guessSubmit.addEventListener("click", checkGuess);

    // 게임 기능 마무리
    function setGameOver() {
        guessField.disabled = true;
        guessSubmit.disabled = true;
        resetButton = document.createElement("button");
        resetButton.textContent = "Start new game";
        document.body.append(resetButton);
        resetButton.addEventListener("click", resetGame);
    }

    // resetGame() 정의
    function resetGame() {
        guessCount = 1;

        const resetParas = document.querySelectorAll(".resultParas p");
        for (const resetPara of resetParas) {
            resetPara.textContent = "";
        }

        resetButton.parentNode.removeChild(resetButton);

        guessField.disabled = false;
        guessSubmit.disabled = false;
        guessField.value = "";
        guessField.focus();

        lastResult.style.backgroundColor = "white";

        randomNumber = Math.floor(Math.random() * 100) + 1;
    }

    // 반복
    const fruits = ["apples", "bananas", "cherries"];
    for (const fruit of fruits) {
        console.log(fruit);
    }

    const resetParas = document.querySelectorAll(".resultParas p");
    for (const resetPara of resetParas) {
        resetPara.textContent = "";
    }

    // 논의
    guessField.focus();
    const guessField = document.querySelector(".guessField");
    guessField.focus();
</script>

문제 원인

- 중복된 함수 선언: checkGuess 함수를 여러번 선언
- 변수 중복 선언: guessField 변수를 두 번 선언
- 잘못된 요소 참조: resetParas를 반복문에서 이미 정의한 후, 다시 정의하고 사용함

[해결]

해결 방법

- checkGuess 함수를 한 번만 선언
- guessField 변수를 한 번만 선언
- 중복된 resetParas 정의를 제거

해결 결과

<script>
    // 변수 선언
    let randomNumber = Math.floor(Math.random() * 100) + 1;

    const guesses = document.querySelector(".guesses");
    const lastResult = document.querySelector(".lastResult");
    const lowOrHi = document.querySelector(".lowOrHi");

    const guessSubmit = document.querySelector(".guessSubmit");
    const guessField = document.querySelector(".guessField");

    let guessCount = 1;
    let resetButton;

    // 함수 선언
    function checkGuess() {
        const userGuess = Number(guessField.value);
        if (guessCount === 1) {
            guesses.textContent = "Previous guesses: ";
        }
        guesses.textContent += userGuess + " ";

        if (userGuess === randomNumber) {
            lastResult.textContent = "Congratulations! You got it right!";
            lastResult.style.backgroundColor = "green";
            lowOrHi.textContent = "";
            setGameOver();
        } else if (guessCount === 10) {
            lastResult.textContent = "!!!GAME OVER!!!";
            lowOrHi.textContent = "";
            setGameOver();
        } else {
            lastResult.textContent = "Wrong!";
            lastResult.style.backgroundColor = "red";
            if (userGuess < randomNumber) {
                lowOrHi.textContent = "Last guess was too low!";
            } else if (userGuess > randomNumber) {
                lowOrHi.textContent = "Last guess was too high!";
            }
        }

        guessCount++;
        guessField.value = "";
        guessField.focus();
    }

    // 이벤트 리스너
    guessSubmit.addEventListener("click", checkGuess);

    // 게임 기능 마무리
    function setGameOver() {
        guessField.disabled = true;
        guessSubmit.disabled = true;
        resetButton = document.createElement("button");
        resetButton.textContent = "Start new game";
        document.body.append(resetButton);
        resetButton.addEventListener("click", resetGame);
    }

    // resetGame() 정의
    function resetGame() {
        guessCount = 1;

        const resetParas = document.querySelectorAll(".resultParas p");
        for (const resetPara of resetParas) {
            resetPara.textContent = "";
        }

        resetButton.parentNode.removeChild(resetButton);

        guessField.disabled = false;
        guessSubmit.disabled = false;
        guessField.value = "";
        guessField.focus();

        lastResult.style.backgroundColor = "white";

        randomNumber = Math.floor(Math.random() * 100) + 1;
    }

    // 반복문 예시
    const fruits = ["apples", "bananas", "cherries"];
    for (const fruit of fruits) {
        console.log(fruit);
    }

    // 초기 포커스 설정
    guessField.focus();
</script>

📙 내일 일정

Javascript 심화, SQL 학습

'TIL _Today I Learned > 2024.08' 카테고리의 다른 글

[DAY 21] Flask (0)	2024.08.08
[DAY 20] SQL (0)	2024.08.07
[DAY 19] API, DB, SQL (0)	2024.08.06
[DAY 17] Git & Web (0)	2024.08.02
[DAY 16] Python 실습 (0)	2024.08.01