prompt() 함수를 이용해 문자열 입력받기
<script> var input = prompt('입력받기', '메시지를 입력해주세요'); alert(input); </script>prompt()함수를 이용하여 문자열을 입력받고 알림창으로 입력값을 출력하는 코드입니다.
첫번째 매개변수에는 입력값을 받는 인자이고, 두번째 매개변수는 기본적으로 입력되어 있는 문자열입니다.
만약 입력값을 알림창이 아니라 도큐멘트에 출력하고 싶을때는 다음과 같이 코드를 변경하여 출력합니다.
<script> var input = prompt('입력받기', '메시지를 입력해주세요'); document.write(input); </script>confirm() 함수를 이용해 (Yes or No) 입력받기
<script> var input = confirm('확인하시겠습니까?'); alert(input); </script>confirm() 함수는 prompt() 함수와는 달리 하나의 매개변수만을 받을 수 있습니다.
매개변수로 입력한 문자열은 입력창을 설명하는 문자열로 출력됩니다.
코드를 실행후 [확인]을 누르면 true를, [취소]를 누르면 false를 결과값으로 반환합니다.
위와같이 결과값을 true 또는 false가 아니라 원하는 메시지를 출력하고 싶다면
아래와 같이 조건문을 이용하여 상황에 따라 다르게 출력할 수 있습니다.
<script> var input = confirm('확인하시겠습니까?'); if (input === true){ alert('확인해주셔서 감사합니다.') } else { alert('안타깝네요~') } </script>어제 오늘 내일
IT/Javascript
[Javascript] input 입력값 가져와서 출력하기
hi.anna 2020. 8. 10. 01:51
<input> 필드에 입력받은 값을 화면에 출력하는 방법입니다.
사용자가 타이핑 할때마다 input 값 출력하기
See the Pen js by anna (@hianna) on CodePen.
HTML
<input id='name' onkeyup='printName()'/> <div id='result'></div><input id='name' onkeyup='printName()'/>
사용자로부터 값을 입력 받을, id='name'인 <input> element를 생성하였습니다.
onkeyup 이벤트(키보드가 눌려졌을 때 발생하는 이벤트)가 발생하면, printName() 메소드를 호출하도록 하였습니다.
<div id='result'></div>
<input> 폼에 입력받은 값을 출력할 위치입니다.
Javascript
function printName() { const name = document.getElementById('name').value; document.getElementById("result").innerText = name; }const name = document.getElementById('name').value;
document.getElementById는 웹페이지에서 id로 element를 찾습니다.
그리고, 찾아온 element의 value값을 읽어와서 name에 저장하였습니다.
document.getElementById("result").innerText = name;
document.getElementById로 웹페이지에서 'result' id를 가진 element를 찾아오고,
innerText 프로퍼티를 사용하여, element의 text값을 name으로 변경해 주었습니다.
사용자가 입력을 완료하면 input 값 출력하기
See the Pen js by anna (@hianna) on CodePen.
사용자가 입력을 완료하고, 마우스 커서를 input form 밖으로 이동시켰을 때
값을 읽어와서 화면에 출력하는 예제입니다.
'사용자가 타이핑 할때마다 input 값 출력하기' 예제와 동일하고,
발생 시키는 이벤트를 'onchange' 이벤트로 변경하였습니다.
input form에 이벤트가 발생했을 때
Javascript로 웹페이지의 dom에 접근하여,
입력된 값을 가져와서, 웹페이지에 뿌려주는 방법을 알아보았습니다.
[Node.js] 자바스크립트 콘솔에서 입력 받는 방법
🎯 Node.js 콘솔창 입력받기
- 백준에서 알고리즘 문제를 풀 때 자바스크립트 입력받는 방법을 알아보자!
📝 한 줄 값 입력받기
- 자바스크립트에서는 readline 모듈을 이용하면 콘솔을 통해 값을 입력받을 수 있다.
📕 모듈 가져오기
const readline = require("readline");📕 readline 모듈을 이용해 입출력을 위한 인터페이스 객체 생성
const rl = readline.createInterface({ input: process.stdin, output: process.stdout, });📕 rl 변수
rl.on("line", (line) => { // 한 줄씩 입력받은 후 실행할 코드 // 입력된 값은 line에 저장된다. rl.close(); // 필수!! close가 없으면 입력을 무한히 받는다. }); rl.on('close', () => { // 입력이 끝난 후 실행할 코드 process.exit(); })한 줄 입력받기 :: 정리
const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); rl.on("line", (line) => { console.log("input: ", line); rl.close(); }); rl.on('close', () => { process.exit(); })📝 공백을 기준으로 값 입력받기
const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = [] rl.on("line", (line) => { input = line.split(' ').map(el => parseInt(el)); // 1 2 3 4 rl.close(); }); rl.on('close', () => { input.forEach(el => { console.log(el); }) process.exit(); }) // 입력 // 1 2 3 // 출력 // 1 // 2 // 3- 입력되는 것은 모두 문자열이기 때문에 숫자 연산을 할 수 없다. 따라서 숫자 연산을 위해 map() 함수를 사용하고 parseInt()를 이용해 모든 문자를 숫자로 변환해준다.
📝 여러 줄 입력받기
const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = [] rl.on("line", (line) => { input.push(line); }); rl.on('close', () => { console.log(input); process.exit(); }) // 입력 // 1 // 2 // a // b // 출력 // ['1', '2', 'a', 'b']- 입력 종료는 ctrl + c
📝 공백이 포함된 문자 여러 줄 입력받기
const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = [] rl.on("line", (line) => { input.push(line.split(' ').map(el => parseInt(el))); }); rl.on('close', () => { console.log(input); process.exit(); }) // 입력 // 1 2 3 // 4 5 6 // 출력 // [[1, 2, 3], [4, 5, 6]]📌 참고
- NODE.JS 기반으로 알고리즘 풀때 입력받는 방법