모든 것이 되고싶은 밍구
[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 = " " ; 를 통해서 문자로 표현됨을 정의해주고 있다.