728x90
반응형
첫 단어를 입력한 사람인지 판단하기
첫 번째 사람한테 1. 두 번째 사람한테 2. 세 번째 사람한테 3. 이렇게 순서를 부여했으므로 절차 2는 따로 코딩할 필요가 없다.
첫 번째 참가자 확인하는 순서도
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>끝말잇기</title>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어 :<span id="word"> </span></div>
<input type="text" />
<button class="target">입력</button>
<script>
// prompt : 사용자로부터 값을 전달받음
const number = parseInt(prompt("몇 명이 참가하나요?"), 10);
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
let word; // 제시어
let newWord; // 새로 입력한 단어
//const realNumber = Number(number);
console.log("number", number);
// alert : 사용자에게 경고메시지를 표시
alert(number);
// conform : 사용자의 확인을 요구 (예, 아니오)
const yesOrNo = confirm("맞나요?");
// 자료형 확인
// console.log(typeof number);
// querySeletor
//document.querySeletor("#word");
// querySeletorAll
// document.querySeletorAll(".target");
// 공백 자손 태그
// const $span = document.querySelector("div span");
// console.log($span);
const onClickButton = () => {
if(!word){ //제시어가 비어 있는가?
// 비어있다.
word = newWord; // 입력한 단어가 제시어가 된다.
$word.textContent = word; // 화면 출력
$input.value = ''; // input창 초기화
}else {
// 비어 있지 않다.
}
};
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
</script>
</body>
</html>
728x90
반응형
'☭DEVELOPER > #4 자바스크립트' 카테고리의 다른 글
| 자바스크립트 | 레츠기릿 자바스크립트 16 순서도 | 끝말잇기 (1) | 2024.05.28 |
|---|---|
| 자바스크립트 | 레츠기릿 자바스크립트 15 객체 리터럴 (0) | 2024.04.30 |
| 자바스크립트 | 레츠기릿 자바스크립트 14 함수 (0) | 2024.04.29 |
| 자바스크립트 | 레츠기릿 자바스크립트 13 배열 (0) | 2024.03.18 |
| 자바스크립트 | 레츠기릿 자바스크립트 12 (0) | 2024.02.17 |