[JavaScript] 자바스크립트 prompt, querySelector, parseInt

Julie Mingu·2023년 5월 17일
0
post-thumbnail

✅ 자바스크립트 문자열 출력하는 방법

큰 따옴표, 작은 따옴표 모두 OK
백틱도 가능하다. (줄 띄움 하는경우 그대로 반영한다.)

   // 1. 출력하기 : 크롬 개발자도구 console
    console.log("이것은 자바스크립트입니다1");
    // 작은따옴표도 가능하다.
    console.log('이것은 자바스크립트입니다2');
    // 백틱도 가능하다.
    console.log(`줄띄움할 수 있는
    백틱입니다3 by backtick`);

✅ parseInt : 문자열을 숫자(정수)로 바꿔주는 함수

parse 란, 자른다 라는 의미를 가지고 있다.

    console.log('pasrseInt의 결과1: '+ (parseInt('123')+5)) // 문자+숫자
    console.log('pasrseInt의 결과2: '+ parseInt('123')+5) // 문자+문자

✅ 사용자로부터 프로픔터를 띄워 입력을 받는 방법

프롬프터를 띄워 유저 메시지로 입력받아야 한다. => prompt()
해당 메시지를 디버깅 용도로 console 에도 띄우고,
HTML 화면에도 띄우게끔 해본다.

  // 사용자로부터 입력받는 창을 만드는법
    const userMsg = prompt(); // 프롬프터로 받은 것을 유저 메세지로 저장
    console.log('사용자가 입력한 메시지는: ' + userMsg); // 디버깅용도
    // document.querySelector('h1#h12').textContent = userMsg;
    const allh1 = document.querySelectorAll('h1');
    allh1.forEach((elem, index) => { elem.textContent = userMsg })

    // allh1 은 h1을 가진 3가지 전부다 부른다. (h11,h12,h13)
    // forEach 각각의
    // elem : element
    // ex. 첫번째 온 애: element, index0
    // ex. 두번째 온 애: element, index1 ...
    // {  } : 갖고온 애들을 가지고 무엇을 할지 적는곳

    /* ★querySelector 변화시킬 곳을 정하는 역할★
    다 바꾸고 싶다면, querySelectorAll */

querySelector 로 특정한 body의 id 또는 내용을 선택 지정해준다음,

그 지정한 내용에 프롬프터로 입력받은 것을 넣어준다. textContent 로 넣어주면 된다.

✅ 사용자가 입력한 숫자가 홀수인지 짝수인지 판별해서 페이지에서 보여주게 하는 방법

사용자가 숫자만을 입력한다고 가정했을 때,
어떠한 입력값을 parseInt를 통해 정수로 변환하고
홀/짝을 계산한 후 if 로 두가지 경우를 표현한다.

    const userMsg = prompt(); // 인풋창을 띄운다.
    const userNumber = parseInt(userMsg); //사용자가 입력한 문자열을 정수로 변환
    const result = userNumber % 2;

    let msg = "";
    if (result == 1) {
        msg = userMsg + "는 홀수입니다."
    } else {
        msg = userMsg + "는 짝수입니다."
    }
    document.querySelector('h1#h11').textContent = msg;


    console.log('사용자가 입력한 메시지는: ' + userMsg); // 디버깅용도

let msg = " " ; 를 통해서 문자로 표현됨을 정의해주고 있다.

profile
(੭˙ ˘ ˙)੭🌱 자란다, 잘한다!

0개의 댓글