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

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

• 큰 따옴표, 작은 따옴표 모두 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 = " " ; 를 통해서 문자로 표현됨을 정의해주고 있다.