리액트를 하면서 js 기본을 좀 더 갈고닦아야할 필요성을 느껴서 다시 javascript es2021 기본 강좌를 들어보고 있다.
즉, 이 포스팅은 조현영님의 es2021 강좌의 내용을 듣고 기록하고 복습하는 용도로 작성한 것이다.
모든 강의를 포스팅하진 않을 것 같고, 기록해둘만한 내용이나, 시간이 좀 괜찮을 때 포스팅할 듯하다.
우리가 흔히 인터넷을 하다 보면 이 창을 한번쯤은 봤을 것이다.
우린 이제 javascript로 이 창을 띄우는 방법을 이번 포스팅을 통해서 배울 것이다.
참고로 이 창을 띄우는 방법은 한가지가 아니다.
총 3가지가 존재하는데, 용도에 따라 다 다른 함수를 가진다.
Prompt
사용자에게 값을 전달받기 위한 함수이다.
아까 위에서 본 이미지가 바로 prompt 창으로 띄워준 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// js 코드를 작성하는 곳
const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
console.log('number', number);
</script>
</body>
</html>VSCode에 doc를 누르고 tab을 누르면 기본 html 코드가 생성된다.
<! 까지 입력하면 <!DOCTYPE html> 또한 생성된다.
참고로 script 태그를 생성할 때, 꺽쇠부터 입력하지 말고 script를 치고 tab을 누르면 자동으로 <script></script>가 완성된다. 요건 몰랐네...
이제 body의 script 부분에 위와 같이 코드를 작성해주자.
prompt('message')를 통해 창을 입력받는데, 여기서 사용자가 입력받은 형태가 문자열로 들어오므로, 숫자로 인식하게 하기 위해선 parseInt나 Number를 이용해준다. parseInt 뒤의 10은 10진법으로 입력받는다는 소리인데, parseInt는 default로 10진수 숫자로 변환해주므로 10은 생략해주어도 괜찮다.
Alert
사용자에게 메시지를 보내기 위한 함수이다.
이제부터 html 코드는 생략하고 js 코드만 입력하겠다.
<script>
const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
console.log('number', number);
alert(number);
</script>아까 prompt로 값을 입력받은 다음, 사용자에게 number의 값을 알려주기 위해 alert를 사용해주었다.
prompt 와 다르게, alert는 입력받는 창이 없고 사용자에게 메시지를 전달해주는 경고창 역할을 해준다.
Confirm
사용자에게 확인을 요구하는 함수이다.
즉, Yes, No를 선택받는 함수라 생각하면 된다.
true, false를 반환해주는 함수이다.
<script>
const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
console.log('number', number);
alert(number);
const yesOrNo = confirm('맞나요?');
console.log(yesOrNo);
</script>
alert와 비슷한 듯 보이지만, 아래에 '확인', '취소' 버튼이 있다.
확인을 누를 경우 true, 취소를 누를 경우 false를 반환해준다.
사실 실무에선 잘 쓰지 않는다고 한다.
그동안 alert만 자주 애용해왔는데,
용도에 따라 prompt, confirm도 사용할 수 있음을 알게 된 좋은 시간이었다.
간단하지만 얻어갈 게 있었던 시간이었다.
'JS > VanillaJS' 카테고리의 다른 글
| [VanillaJS] 바닐라js로 틱택토를 만들어보자 (0) | 2021.10.18 |
|---|---|
| [VanillaJS] 비동기 setTimeOut 함수와 연속클릭 (0) | 2021.10.14 |
| [VanillaJS] 바닐라JS의 setTimeOut을 이용한 간단한 로또추첨기 만들기 (0) | 2021.10.11 |
| [VanillaJS] addEventListener, 콜백 함수 알아보기 (0) | 2021.10.09 |
| [VanillaJS] html 태그를 선택하는 querySelector에 대해 알아보자 (2) | 2021.10.09 |