[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 2주차 회고록 ch.2 실습 문제 풀이 (4, 5번 문제 정리 해야 함..)

[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 2주차 회고록 ch.2 실습 문제 풀이 (4, 5번 문제 정리 해야 함..)

2023. 5. 14. 20:50ㆍStudy_Develop/포스코 X 코딩온 부트캠프

[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기]

2주차 회고록 2두번째 !

본 글에서는 실습, 퀴즈로 나온 문제를

풀이해보도록 하겠다..

강사님이 알려주신 코드도

일부 참고해서

작성한 풀이 코드들 이다..

그리고 회고에 앞서 유용한 플러그인 소개!!

그동안 Visual Studio Code 를 사용하며

코드 정렬할 때

단축키 ctrl + k + f를 사용했는데

왜인지 모르게 이게 잘 안먹을 때가 있었다.

그러던 도중

좋은 플러그인 발견!

단축키 까먹을까봐

저장해두는 용이긴 하다 ㅋㅎ

Visual Studio Code에서 자동줄맞춤 하는 방법 !

드레그 한 영역을 Ctrl + Shift +B 단축키 사용!!

❓문제1 . 숫자 Up and Down 게임❓

let answer = Math.floor(Math.random() * 10 + 1);
    //or Math.floor(Math.random() * 11)  11미만의 숫자가 나오기때문에 10까지나옵니다.
    console.log(answer);
    //무한 반복을 이용하여 게임을 진행합니다.
    //꼭 무한 반복이 종료될 조건문을 넣어줘야합니다.
    while (1) {
        let guessValue = prompt("UP and DOWN 게임을 시작합니다!");
        if (guessValue == "q" || guessValue == "그만") {
            alert("포기하셨습니다.");
            break;
        } else if (Number(guessValue) === answer) {
            alert(`${answer}!! 정답입니다 >_<`);
            break;
        } else if (Number(guessValue) > answer) {
            alert("Down");
        } else if (Number(guessValue) < answer) {
            alert("Up");
        }
        //if문을 무한반복하면서 Down이 나오거나 Up이 나오게 되면 종료되지 않고 반복문을 계속실행합니다.
        //입력된값이 종료거나 정답을 맞추게 되면 break를 걸어서 무한반복문에서 빠져나오게 하면됩니다.
        //break: 반복문이나 조건문에서 break를 만나게 되면 해당 조건문이나 반복문이 즉시 종료됩니다.
    }

내가 푼 풀이는 아니고,

강사님이 올려주신 풀이 코드이다.

추가적으로 알아두면 좋을 것!

❗ 템플릿 문자열

`${...}`

기호를 사용하여 표현식을 넣으면,

표현식이 문자열 안에서 계산된다.

console.log(`표현식 273+52의 값은 ${273+52}입니다..!`)

결과>

❗ Javascript prompt()

prompt(메시지 문자열, 기본 입력 문자열)

        let guessValue = prompt("UP and DOWN 게임을 시작합니다!", "숫자를 입력하세요");

❓문제2 . HTML 요소 내용 변경하기❓

<body>
        <img src="../image/bigmouse.jpeg" alt="빅마우스" id="img" style="width: 50px;">
        <ul>
            <li>이상한 변호사 우영우</li>
            <li>드라마</li>
            <li>15세 이상</li>
        </ul>
        <button onclick="imgJs()">js바꾸기</button>
        <button onclick="imgJquery()">jquery바꾸기</button>

        <script>
            const img = document.querySelector('#img')

            function imgJs() {
                img.setAttribute('alt', '이상한우영우')

                img.setAttribute('src', '../wooyoungwoo.jpg')
                img.style = 'width:200px'
            }
            function imgJquery() {
                $('#img').attr("src", "../wooyoungwoo.jpg");
                $('#img').css('width', '200px')
            }
        </script>
    </body>

❓문제2 . HTML 요소 생성/추가하기❓

풀이 1. 하드코딩하기>

<article  class="article-box" >
            <img src="../image/icecrea1.png" class="img-box">
            <h3 class="text-center">Top1</h3>
            <div class="text-center">내가 아인슈페너?!</div>
        </article>

        <article  class="article-box">
            <img src="../image/icecream2.png" class="img-box">
            <h3 class="text-center" >Top2</h3>
            <h3 class="text-center">엄마는 외계인</h3>
        </article>

        <article class="article-box">
            <img src="../image/icecream3.png" class="img-box">
            <h3 class="text-center" >Top3</h3>
            <h3 class="text-center">민트 초콜릿 칩</h3>
        </article>

풀이 2. js 이용하기>

 const icecreams = [
                    '내가 아인슈페너?!',
                    '엄마는 외계인',
                    '민트 초콜릿 칩',
                    '뉴욕 치즈케이크',
                    '아이스 초당옥수수',
                    '초콜릿 무스',
                    '체리쥬빌레',
                    '뮤! 넌 내거야',
                    '오레오 쿠키 앤 크림'
                ];
                
for(let i = 0; i < icecreams.length; i++) {
        const article = document.createElement('article')
        article.classList.add('article-box')
        
        const img = document.createElement('img')
        img.setAttribute('src', `../image/icecream${i + 1}.png`)
        img.classList.add('img-box')

        const h3 = document.createElement('h3')
        h3.textContent = `Top${i+1}`
        h3.classList.add('text-center')

        const div = document.createElement('div')
        div.textContent = icecreams[i]
        div.classList.add('text-center')
       
        const box = document.querySelector('.text-center')
        box.append(article)
    
         article.append(img, h3, div)
      }

풀이 3. jQuery 이용>

<h6 class="text-center">이달의 맛 BEST9</h6><br/>
        <section class="text-center"></section>
        <script>
            $(document).ready(function () {
                const section = $('section');
                const icecreams = [
                    '내가 아인슈페너?!',
                    '엄마는 외계인',
                    '민트 초콜릿 칩',
                    '뉴욕 치즈케이크',
                    '아이스 초당옥수수',
                    '초콜릿 무스',
                    '체리쥬빌레',
                    '뮤! 넌 내거야',
                    '오레오 쿠키 앤 크림'
                ];
                for (let i = 1; i < 10; i++) {
                    const article = $('<article></article').addClass('article-box');
                    const img = $('<img></img>')
                        .addClass('img-box')
                        .attr('src', `../image/icecream${i}.png`)
                    const h3 = $('<h3></h3>')
                        .addClass('text-center')
                        .text(`Top${i}`);
                    const div = $('<div></div>')
                        .addClass('text-center')
                        .text(icecreams[i - 1]);
                    article.append(img, h3, div)
                    section.append(article);
                }

            })

추가적으로 알아두면 좋을 것!

❗ append()와 appdendChild()의 차이?

- append 메서드를 활용하면 노드 객체 (Node object)나 DOMString(text)를 사용할 수 있다.

또한 한번에 여러 개의 자식 요소를 설정할 수 있다.

- appendChild 메서드는 append 메서드와는 다르게 오직 Node객체만 받을 수 있습니다.

게다가 append 는 여러개의 노드와 문자를 추가할 수 있는 반면에,

appendChild 메서드는 한번에 오직 하나의 노드만

추가할 수 있습니다.

아래 링크 참조!

https://webruden.tistory.com/634

[Javascript] append vs appendChild 차이점 (초간단)

append와 appendChild 메서드는 모두 부모 노드에 자식 노드를 추가하는 메서드입니다. 하지만 두 메서드에도 몇 가지 차이점이 존재합니다. 이번 포스팅에서는 두 메서드의 차이점에 대해서 쉽고 간

webruden.tistory.com

❓문제3 . 간단 계산기 만들기❓

<body>

    <label for="value1">값1: </label>
    <input type="number" id="value1">
    <label for="value2">값2: </label>
    <input type="number" id="value2">
    <label for="calc">연산자: </label>
    <input type="text" id="calc">

    <button onClick="calc()">계산</button>
    <button onClick="reset()">초기화</button>

    <label for="result">결과: </label>
    <input type="number" id="result" disabled/>

</body>

function calc(){
        //타입이 문자인 숫자일 경우 형변환은 + 로 가능하다.
        //숫자를 문자로 형변환할 때는 숫자 + ''
        const val1=+document.getElementById('value1').value
        const val2=+document.getElementById('value2').value
        const calc=document.getElementById('calc').value
        console.log(val1, val2, calc)

        let result;    
        if (calc === '+') {
            result = val1 + val2;
        } else if (calc === '-') {
            result = val1 - val2;
        } else if (calc === '/') {
            result = val1 / val2;
        } else if (calc === '*') {
            result = val1 * val2;
        }else{
            result='오류발생'
        }
        document.getElementById('result').value=result;

    }
    function reset() {
            document.getElementById('val1').value = ''
            document.getElementById('val2').value = ''
            document.getElementById('calc').value = ''
            document.getElementById('result').value = ''
        }

추가적으로 알아두면 좋을 것!

❗ label ?

- label은 폼의 양식에 이름 붙이는 태그이다.

- 주요 속성은 for 이다. label 의 for의 값과 양식의 id의 값이 같으면 연결된다.

- label을 클릭하면,연결된양식에 입력할 수 있도록 하거나,

체크를 하거나,

체크를 해제한다.

❗ input type?

- input 태그의 typ을 number로 하면 숫자만 입력할 수 있다.

- 소수를 입력받고 싶다면, step속성을 추가한다.

예를 들어, step의 값을 0.01로 하면 소수 둘째자리 까지 입력 가능하다.

https://www.codingfactory.net/13397

HTML / input / number / 숫자 입력하는 양식

input type='number' input 태그의 type을 number로 하면 숫자만 입력할 수 있다. <!doctype html> <html lang='ko'> <head> <meta charset='utf-8'> <title>JavaScript</title> <style> * { font-family: Consolas, monospace; font-size: 24px; } </style>

www.codingfactory.net

❓문제4 . 방명록 만들기❓

❓문제5 . 매개변수로 들어온 값을 3회 출력하기❓

'Study_Develop > 포스코 X 코딩온 부트캠프' 카테고리의 다른 글

[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 4주차 회고록 ch. 1 Node.js, 비동기 처리, 분해 할당, ...연산자, rest (0)	2023.05.21
[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 3주차 회고록 (1)	2023.05.14
[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 2주차 수업내용 회고록 ch.1 -Javascript 자료형, 표준객체, DOM, 이벤트 리스너, jQuery 메소드, jQuery 이벤트리스너(feat. 서울 적응기) (0)	2023.05.03
[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 1주차 회고록(feat.험난한 서울살이) (12)	2023.04.28
[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 0주차 feat. 합격 회고록 (0)	2023.04.21

👩‍💻 코딩하는 지현, 일상기록

👩‍💻 코딩하는 지현, 일상기록

태그

최근글

댓글

공지사항

아카이브

❓문제1 . 숫자 Up and Down 게임❓

추가적으로 알아두면 좋을 것!

❗ 템플릿 문자열

❗ Javascript prompt()

❓문제2 . HTML 요소 내용 변경하기❓

❓문제2 . HTML 요소 생성/추가하기❓

추가적으로 알아두면 좋을 것!

❗ append()와 appdendChild()의 차이?

❓문제3 . 간단 계산기 만들기❓

추가적으로 알아두면 좋을 것!

❗ label ?

❗ input type?

❓문제4 . 방명록 만들기❓

❓문제5 . 매개변수로 들어온 값을 3회 출력하기❓

'Study_Develop > 포스코 X 코딩온 부트캠프' 카테고리의 다른 글

관련글

티스토리툴바