1010 TIL (1)
今日もがんばります!
参考:ゼロ秒ES 2021 JavaScript YouTube
あなたが第一人者であることを確認します
ドラゴンを引き継ぐ
コード全体の実行順序を理解するためにフローチャートを描画します.
順序図を小さく割る方法をもっと練習しなければならない.段階的に考えなければならない.もっと練習して、自分のことをよく考えなさい.順番も恥ずかしがらないでたじろぐな.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>입력</button>
<script>
const number = Number(prompt('몇 명이 참가하나요?'));
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const onClickButton = () => {
};
const onInput = (event) => {
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
</script>
</body>
</html>コードを変えましょう.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>입력</button>
<script>
const number = Number(prompt('몇 명이 참가하나요?'));
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
const $order = document.querySelector('#order');
let word; // 제시어
let newWord; // 새로 입력한 단어
const onClickButton = () => {
if (!word) { // 제시어가 비어 있는가?
// 비어있다.
word = newWord; // 입력한 단어가 제시어가 된다.
$word.textContent = word; // 입력한 단어가 제시어 옆에 표시된다.
$input.value = ''; // 제시어를 입력하자마자 입력창이 빈다.
const order = Number($order.textContent) // 문자열을 숫자열로 돌리기, 현재 순서
if (order + 1 > number) {
$order.textContent = 1; // textContent가 들어가면 자동으로 문자열로 반환함
input.focus();
} else {
$order.textContent = order + 1;
}
} else {
// 비어 있지 않다.
if (word[word.length - 1] === newWord[0]) { // 올바른가 word의 마지막자리와 newWord의 첫번째 자리가 일치하냐
word = newWord; // 현재 단어를 제시어에 저장한다.
$word.textContent = word; //화면에 제시어 표시
$input.value = ''; // 제시어를 입력하자마자 입력창이 빈다.
input.focus();
const order = Number($order.textContent) // 문자열을 숫자열로 돌리기, 현재 순서
if (order + 1 > number) {
$order.textContent = 1; // textContent가 들어가면 자동으로 문자열로 반환함
} else {
$order.textContent = order + 1;
}
} else { // 올바르지 않은가
alert('올바르지 않은 단어입니다!');
$input.value = ''; // 제시어를 입력하자마자 입력창이 빈다.
input.focus();
}
}
};
const onInput = (event) => {
newWord = event.target.value; // 글자를 입력할 때 새로운 단어에, 그 글자가 저장된다.
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
</script>
</body>
</html>頭の中だけで考えてはいけない.大切なのは自分でやることだ.
コードの使い方
입력태그.value // 입력창의 값을 가져옴
입력태그.value = 값 // 입력창에 값을 넣음コードの使い方
입력태그.focus() // 입력창을 하이라이트内部値をインポートするコード
입력태그.value // 입력창의 값을 가져옴
입력태그.value = 값 // 입력창에 값을 넣음태그.textContent // 태그 내부의 문자를 가져옴
태그.textContent = 값 // 태그 내부의 문자를 해당 값으로 설정 最適化順序図
コードには重複する部分がたくさんあります.この部分を整理してみます
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<script>
const number = Number(prompt('몇 명이 참가하나요?'));
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
const $order = document.querySelector('#order');
let word; // 제시어
let newWord; // 새로 입력한 단어
const onClickButton = () => {
if (!word || word[word.length - 1] === newWord[0]) { // 제시어가 비어 있는가? / 비어있다.
word = newWord; // 입력한 단어가 제시어가 된다.
$word.textContent = word;
const order = Number($order.textContent); // 현재 순서
if (order + 1 > number) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
} else { // 올바르지 않은가
alert('올바르지 않은 단어입니다!');
}
$input.value = ''; // 입력창을 빈 칸으로 만들어준다.
$input.focus(); // 빈칸에 포커스 하이라이트를 해주는 메서드
};
const onInput = (event) => {
newWord = event.target.value; // 글자를 입력할 때 새로운 단어에, 그 글자가 저장된다.
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
</script>
</body>newWordはword,$wordになります.textContent = word; $wordです.文字をtextContentにインポートします.だからヒント:横に書いてある字が現れます.const order=Number($order.textContent);$order in 1がインポートされます.order=1ただしif文ではorder+1がnumberより大きい必要があります.numberは、何人が参加するかを示す数字で、設定した数字と同じです.2名でも3名でも4名でもorderは1なので、1+1でも2なのでorder+1より大きなコードは成立しません.したがってfalse elseコードが実行され、2番目、3番目、などが表示されます.orderの数字が増加し、4つの定員がある場合、orderの数字が5の場合、文が成立すると、数字は再び1になります.また、ifの[word.length-1]==newWord[0]が成立しない場合、例えば「javascript」->「navi」ではtrueではなくfalseとなり、どちらもfalseとなるためels文が実行されます.ifドアの外に書かれた$inputもあります.value = ''; 入力ウィンドウを空にし、$input.focus();フォーカスハイライトを取得するには、スペースに方法を書きます.そしてconstonInput=(event)=>{newWord=event.target.value};新しい単語を入力すると、新しい単語に保存されます.$button.addEventListener('click', onClickButton); $input.addEventListener('input', onInput); 最後の2つの文は、イベントを実行する方法です.
**論理演算の区分
AND ( && )はtrueでなければなりません.OR ( || )は両方ともfalseでなければなりません.1つだけtrueもtrueです.Reference
この問題について(1010 TIL (1)), 我々は、より多くの情報をここで見つけました https://velog.io/@kimhr08/1010-TILテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol