π μ΄λ²€νΈ 리μ€λ λ¬κΈ° ( μ½λ°±ν¨μ )
μ¬μ©μλ€μ μΉ κ²μμ νλ μ΄νλ©΄μ νλ©΄κ³Ό λ€μν μνΈ μμ©μ νλ€.
μ΄λ HTML νκ·Έμ μνΈ μμ©μ νλ κ²μ΄λ€.
λλ§μκΈ° κ²μλ μ¬μ©μλ input νκ·Έμ κΈμλ₯Ό μ λ ₯νκ³ button νκ·Έλ₯Ό λλ₯΄λ κ²μ΄λ€.
μ¬μ©μκ° νκ·Έμ μνΈ μμ©μ ν λ μ΄λ²€νΈ λΌλ κ²μ΄ λ°μνλ€.
μ ) input νκ·Έμ κΈμλ₯Ό μ λ ₯νλ©΄ input μ΄λΌλ μ΄λ²€νΈκ° λ°μ / λ²νΌμ ν΄λ¦νλ©΄ click μ΄λ²€νΈκ° λ°μ.
νμ§λ§ μλ°μ€ν¬λ¦½νΈλ μ΄λ²€νΈλ₯Ό μλ κ°μ§ν μ μλ€.
κ·Έλμ!
μ΄λ²€νΈ 리μ€λλ₯Ό μ§μ μΆκ°ν΄ μλ°μ€ν¬λ¦½νΈκ° HTMLμμ λ°μνλ μ΄λ²€νΈλ₯Ό κ°μ§ν μ μκ² νλ κ²μ΄λ€.
μμμ λ°°μ λ νκ·Έ μ ν ν¨μ ( document.querySelector )λ₯Ό μ¬μ©ν΄ HTML νκ·Έλ€μ μ΄λ²€νΈ 리μ€λλ₯Ό λ¬μ보μ.
μ΄λ²€νΈκ° λ°μν λ μ€νν ν¨μλ₯Ό λ§λ€κ³ νκ·Έμ μ°κ²°νκΈ°
<body>
<div><span id="order">1</span>λ²μ§Έ μ°Έκ°μ</div>
<div>μ μμ΄: <span id="word"></span></div>
<input type="text">
<button>μ
λ ₯</button>
<script>
//μμνλ μΈμ μ 묻λ λνμ°½
const number = Number(prompt('λͺ λͺ
μ΄ μ°Έκ°νλμ?'));
alert(number+'λͺ
μ
λλ€.');
console.log(number+typeof number);
const $input = document.querySelector('input');
console.log($input);
//λ²νΌ ν΄λ¦ μ΄λ²€νΈ
const onClickButton = () => { //2.ν¨μ μ€ν
console.log('λ²νΌ ν΄λ¦');
}
const $button = document.querySelector('button');
$button.addEventListener('click',onClickButton); //1.μ΄λ²€νΈ μ°κ²°
//μ¬κΈ°μ onClickButton()μ λ£μΌλ©΄ ν΄λ¦κ³Ό μκ΄μμ΄ ν¨μ μ€νλ¨, ν¨μ μ체λ₯Ό λ£μ΄μΌν¨
//μ΄λ onClickButton ν¨μλ₯Ό μ½λ°± ν¨μλΌκ³ νλ€.
</script>
</body>
μ΄λ addEventListner ν¨μλ₯Ό μ¬μ©νλ€.
β addEventListner κΈ°λ³Έ νμ
νκ·Έ.addEventListener('μ΄λ²€νΈ μ΄λ¦', 리μ€λν¨μ);μ¬κΈ°μ 리μ€λν¨μλ₯Ό μ½λ°± ν¨μ ( callback function ) λΌκ³ νλ€.
π€ μ½λ°± ν¨μ
νΉμ μμ μ΄ μ€νλκ³ λ λ€μ μΆκ°λ‘ μ€νλλ ν¨μλ₯Ό λ§νλ€.
λ²νΌμ ν΄λ¦ν νμ onClickButtonμ΄ μΆκ°μ μΌλ‘ μ€νλλ―λ‘ μ½λ°± ν¨μλΌκ³ 보λ κ²μ΄λ€.
λ³μλ₯Ό μ¬μ©νλ λμ λ€μκ³Ό κ°μ΄ ν λ²μ μ½λ©ν μλ μλ€.
λ€λ§ μ½κΈ°κ° λ μ½κ³ λμ€μ μ¬μ¬μ©νκΈ° μν΄ λ³μ μ¬μ©μ μΆμ²νλ€.
<script>
document.querySelector('button').addEventListener('click', () => {
console.log('λ²νΌ ν΄λ¦');
});
</script>
//μ½λ μΆμ² (λμ)Let's Get IT μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ°input νκ·Έμ κΈμλ₯Ό μ λ ₯νλ©΄ input μ΄λ²€νΈκ° λ°μνλ€.
<script>
//μμνλ μΈμ μ 묻λ λνμ°½
const number = Number(prompt('λͺ λͺ
μ΄ μ°Έκ°νλμ?'));
alert(number+'λͺ
μ
λλ€.');
console.log(number+typeof number);
//λ²νΌ ν΄λ¦ μ΄λ²€νΈ
const onClickButton = () => {
console.log('λ²νΌ ν΄λ¦');
}
const $button = document.querySelector('button');
$button.addEventListener('click',onClickButton);
const onInput = (event) => {
console.log('κΈμ μ
λ ₯',event.target.value);
};
const $input = document.querySelector('input');
$input.addEventListener('input',onInput);
</script>
Note!
onInput ν¨μμ μλ λ νΉν μ
ν¨μμ 맀κ°λ³μλ‘ event κ° μ‘΄μ¬νλ€.
μ΄λ²€νΈ 리μ€ν°μ λ£λ ν¨μμλ 맀κ°λ³μλ‘ μ΄λ²€νΈμ κ΄ν μ λ³΄κ° μ 곡λλ€.
https://developer.mozilla.org/ko/docs/Web/API/Event
event.target.value λ‘ input νκ·Έμ μ λ ₯ν κ°μ μμλΌ μ μλ€.
μ°Έκ³ )
event λ 맀κ°λ³μμ΄λ―λ‘ λ€λ₯Έ μ΄λ¦μΌλ‘ μ§μ΄λ λλ€.
const onInput = (e) => { console.log('κΈμ μ λ ₯', e.target.value); }; const onInput = (hello) => { console.log('κΈμ μ λ ₯', hello.target.value); }; //μ½λ μΆμ² (λμ)Let's Get IT μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ°
π 첫 λ²μ§Έ μ¬λμΈμ§ νλ¨νκΈ°
μ΄μ μ μ°¨ 3μ νλ‘κ·Έλλ°νμ.
λ¨Όμ μ½λλ₯Ό μ 리νλ€.
<script>
//μμνλ μΈμ μ 묻λ λνμ°½
const number = Number(prompt('λͺ λͺ
μ΄ μ°Έκ°νλμ?'));
//λ²νΌ ν΄λ¦ μ΄λ²€νΈ
const $button = document.querySelector('button');
const $input = document.querySelector('input');
alert(number+'λͺ
μ
λλ€.');
const onClickButton = () => {
}
const onInput = (event) => {
console.log('κΈμ μ
λ ₯',event.target.value);
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>β μμλ μμ
λ¨μ΄λ₯Ό μ λ ₯ν μ¬λμ΄ μ²« λ¨μ΄λ₯Ό μ λ ₯ν μ¬λμΈμ§ νλ¨νκΈ° μν΄ μμλλ₯Ό μμ νλ€.
μ°Έκ°μκ° λ¨μ΄λ₯Ό μ λ ₯νλ λ° κ±Έλ¦¬λ μκ°μ΄ μλ€. μ°Έκ°μκ° λ¨μ΄λ₯Ό μ λ ₯νμ§ μμΌλ©΄ μ μ°¨ 3μ μ€νλμ§ μλλ€.
κ·Έλ κΈ°μ μμλλ₯Ό λμλ€.
μ¬μ©μκ° λ¨μ΄λ₯Ό μ λ ₯νκ³ μ λ ₯ λ²νΌμ ν΄λ¦νλ©΄ μ€λ₯Έμͺ½ λΆλΆμ΄ μ€νλλ€.
μ¬κΈ°μ 첫 λ¨μ΄λ₯Ό μ λ ₯ν μ¬λμΈμ§ νλ¨ν΄μΌ νλ€.
κ·Έλ κΈ°μ μμλλ₯Ό μμ ν΄μΌ νλ€.
첫 λ¨μ΄λ₯Ό λ§ν μ°Έκ°μμΈμ§ μλμ§λ₯Ό μλ €λ©΄ 첫 λ¨μ΄κ° 무μμΈμ§ κΈ°μ΅νκ³ μμ΄μΌ νλ€.
무μΈκ°λ₯Ό κΈ°μ΅νλ €λ©΄ λ³μκ° νμνλ€.
λ°λΌμ μ²μ μμν λ λ³μλ₯Ό λ§λ€κ³ μ΄ λ³μλ₯Ό λΉ κ°μΌλ‘ λλλ€.
μ μμ΄κ° λΉμ΄ μλ€λ©΄ μμ§ μ무λ λ¨μ΄λ₯Ό μ λ ₯νμ§ μμλ€λ κ²μ΄κ³ , μ΄λ κ°μ μ λ ₯νλ μ¬λμ΄ μ²« λ²μ§Έ μ°Έκ°λΌμλ μλ―Έμ΄κΈ° λλ¬Έμ΄λ€.
<script>
//μμνλ μΈμ μ 묻λ λνμ°½
const number = Number(prompt('λͺ λͺ
μ΄ μ°Έκ°νλμ?'));
//λ²νΌ ν΄λ¦ μ΄λ²€νΈ
const $button = document.querySelector('button');
const $input = document.querySelector('input');
//μ μμ΄
let word;
alert(number+'λͺ
μ
λλ€.');
const onClickButton = () => {
if (!word) { //μ μμ΄κ° λΉμ΄ μλκ°?
//λΉμ΄μλ€.
} else {
//λΉμ΄ μμ§ μλ€.
}
};
const onInput = (event) => {
console.log('κΈμ μ
λ ₯',event.target.value);
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>μ μμ΄λ₯Ό μ μ₯ν word λ³μλ₯Ό μ€μ νλ€. word λ μ¬λλ€μ΄ λ¨μ΄λ₯Ό μ λ ₯ν λλ§λ€ λ°λλ―λ‘ const λμ letμ μ¬μ©νλ€.
Note!
let = λ³μ μ¬μ μΈ λΆκ°λ₯. μ¬ν λΉ κ°λ₯
const = λ³μ μ¬μ μΈ λΆκ°λ₯, μ¬ν λΉ λΆκ°λ₯
var = λ³μ μ¬μ μΈ κ°λ₯
μ μΈν λ μλ¬΄λ° κ°μ λ£μ§ μμμΌλ wordλ undefined κ° λλ€.
undefinedλ if λ¬Έ μμ λ€μ΄κ°λ©΄ falseλ‘ μ·¨κΈλκ³ , !wordλ trueλ‘ μ·¨κΈλλ€.
μ΄μ μ λ ₯ν λ¨μ΄λ₯Ό μ μ₯ν λ³μλ₯Ό λ§λ€μ΄μΌ νλ€.
μ΄ λ³μλ newWordλ‘ μ μΈνλ€. μ λ ₯ν λ¨μ΄λ₯Ό input μ΄λ²€νΈ μμμ newWord λ³μμ μ μ₯νλ κ²μ΄λ€.
<script>
//μμνλ μΈμ μ 묻λ λνμ°½
const number = Number(prompt('λͺ λͺ
μ΄ μ°Έκ°νλμ?'));
//λ²νΌ ν΄λ¦ μ΄λ²€νΈ
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
//μ μμ΄
let word;
//νμ¬ λ¨μ΄
let newWord;
alert(number+'λͺ
μ
λλ€.');
const onClickButton = () => {
if (!word) { //μ μμ΄κ° λΉμ΄ μλκ°?
//λΉμ΄μλ€.
word = newWord; //μ
λ ₯ν λ¨μ΄ = μ μμ΄
$word.textContent = word; //νλ©΄μ μ μμ΄ νμ
} else {
//λΉμ΄ μμ§ μλ€.
}
};
//μ
λ ₯ν λ¨μ΄λ₯Ό input μ΄λ²€νΈ μμμ newWord λ³μμ μ μ₯
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>#word νκ·Έλ₯Ό μ νν΄μ $word λ³μμ λμ νκ³ , νμ¬ λ¨μ΄λ₯Ό μ μ₯ν newWord λ³μλ₯Ό μ μΈνλ€.
Note!
$word.textContent κ° λκ°μ?
μ΄κ²μ νκ·Έ λ΄λΆμ κ°μ μ»κ±°λ μμ ν λ μ¬μ©νλ€.
μ²μμ #word λ λΉ κ°μ΄λ―λ‘ $word.textContent λ₯Ό νλ©΄ ' ' μ μ»λλ€.
testContent λ 무쑰건 λ¬Έμμ΄λ‘ λμ€λ―λ‘ λΉ κ°μΈ null μ΄λ undefined κ° μλλΌ ' ' μ΄ λμ¨λ€.
λ§μ½ $word.textContent μ λ€λ₯Έ κ°μ λ£μΌλ©΄ κ·Έ κ°μ΄ νλ©΄μ μ€μ λλ€.
ex ) $word.textContent = 'μ¬κ³Ό' λ₯Ό νλ©΄ #word λ΄λΆμ κ°μ΄ 'μ¬κ³Ό'λ‘ μ€μ λλ€.
νκ·Έ.textContent // νκ·Έ λ΄λΆμ λ¬Έμμ΄μ κ°μ Έμ΄ νκ·Έ.textContent = >κ° // νκ·Έ λ΄λΆμ λ¬Έμμ΄μ ν΄λΉ κ°μΌλ‘ μ€μ ν¨ //μ½λ μΆμ² (λμ)Let's Get IT μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ°
π μ¬λ°λ₯Έ λ¨μ΄μΈμ§ νλ¨νκΈ°
λ¬Έμλ μ΄λ»κ² λΉκ΅ν κΉ?
λ¬Έμμ΄μ λ¬Έμλ€μ μ΄μ΄ λμ κ²μ΄λ―λ‘ κ°κ°μ λ¬Έμλ₯Ό λΆλ¦¬ν μλ μλ€.
λ¬Έμμ΄[μλ¦Ώμ]
//μ½λ μΆμ² (λμ)Let's Get IT μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ°μλ¦Ώμλ 0λΆν° μμνλ―λ‘ μ²« λ²μ§Έ μλ¦¬κ° 0μ΄κ³ λ λ²μ§Έ μλ¦¬κ° 1μ΄λ€.
λ§μ§λ§ λ¬Έμλ μ΄λ»κ² κ°μ Έμ¬κΉ?
λ¬Έμμ΄λ€μ κΈΈμ΄κ° λ€λ₯΄λ―λ‘ λ§μ§λ§ λ¬Έμμ μλ¦Ώμλ₯Ό μμΈ‘ν μ μλ€.
helloλ κΈμ μκ° 5μ΄λ©΄μ λ§μ§λ§ μλ¦Ώμλ 4μ΄λ€.
μ¦, κΈμ μμμ 1μ λΉΌλ©΄ λ§μ§λ§ μλ¦Ώμκ° λμ¨λ€.
//κΈΈμ΄ κ΅¬νκΈ°
λ¬Έμμ΄.length
//λ§μ§λ§ μλ¦Ώμ ꡬνκΈ°
λ¬Έμμ΄.length - 1
//μ½λ μΆμ² (λμ)Let's Get IT μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ°hello.lengthλ₯Ό νλ©΄ 5κ° λμ¨λ€. μ¬κΈ°μ1μ λΉΌλ©΄ λ§μ§λ§ μλ¦Ώμκ° λμ€κ² λλ€.
μ μμ΄μΈ wordμ λ§μ§λ§ λ¬Έμλ₯Ό ꡬνλ©΄ νμ¬ λ¨μ΄ newWordμ 첫 λ²μ¬ λ¬Έμμ λΉκ΅νλ©΄ λλ€.
word[ word.length -1 ] == newWord[0] μΌλ‘ λ§μ΄λ€.
<script>
//μμνλ μΈμ μ 묻λ λνμ°½
const number = Number(prompt('λͺ λͺ
μ΄ μ°Έκ°νλμ?'));
//λ²νΌ ν΄λ¦ μ΄λ²€νΈ
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
//μ μμ΄
let word;
//νμ¬ λ¨μ΄
let newWord;
alert(number+'λͺ
μ
λλ€.');
const onClickButton = () => {
if (!word) { //μ μμ΄κ° λΉμ΄ μλκ°?
//λΉμ΄μλ€.
word = newWord; //μ
λ ₯ν λ¨μ΄ = μ μμ΄
$word.textContent = word; //νλ©΄μ μ μμ΄ νμ
} else {
//λΉμ΄ μμ§ μλ€.
if (word[word.length - 1] == newWord[0]) { //μ
λ ₯ν λ¨μ΄κ° μ¬λ°λ₯Έκ°?
//μ¬λ°λ₯΄λ€.
word = newWord; //νμ¬ λ¨μ΄λ₯Ό μ μμ΄μ μ μ₯.
$word.textContent = word; //νλ©΄μ μ μμ΄ νμ
} else {
//μ¬λ°λ₯΄μ§ μλ€.
}
}
};
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>π€ λ€μ μ¬λμκ² μμ λκΈ°κΈ°
λ¨Όμ μ΄ κ³Όμ μ λν μμλλ₯Ό μμ±νμ.
μ) 3λͺ μ μ°Έκ°μκ° μμΌλ©΄ numberμ 3μ΄ λλ€. νμ¬ μμκ° 1μ΄λΌλ©΄ ( #order λ΄λΆμ κ° 1 ) μ¬κΈ°μ 1μ λν κ°μ 2λ‘ numberλ³΄λ€ μλ€. μ΄λ νμ¬ μμμ 1μ λν κ° 2λ₯Ό λ€μ μμλ‘ μ€μ νλ€.
νμ¬ μμκ° 3μ΄λΌλ©΄ ( #order λ΄λΆμ κ° 3 ) μ¬κΈ°μ 1μ λν κ°μ 4λ‘ number λ³΄λ€ ν¬λ€. μ΄λλ λ€μ μμκ° 1λ‘ λμκ°λ€.
<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;
alert(number+'λͺ
μ
λλ€.');
const onClickButton = () => {
if (!word) { //μ μμ΄κ° λΉμ΄ μλκ°?
//λΉμ΄μλ€.
word = newWord; //μ
λ ₯ν λ¨μ΄ = μ μμ΄
$word.textContent = word; //νλ©΄μ μ μμ΄ νμ
const order = Number($order.textContent);
if(order + 1 > number){
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
} else {
//λΉμ΄ μμ§ μλ€.
if (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 {
//μ¬λ°λ₯΄μ§ μλ€.
}
}
};
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>#order νκ·Έλ₯Ό μ νν΄ $order λ³μμ μ μ₯νλ€. κ·Έλ¦¬κ³ #order νκ·Έ λ΄λΆμ κ°μ κΊΌλ΄ μ«μλ‘ λ³ννκ³ μ΄λ₯Ό order λ³μμ μ μ₯νλ€.
κ·Έ κ°μ 1μ λν κ°μ΄ number λ³΄λ€ ν¬λ©΄ νλ©΄μ μμλ₯Ό 1λ‘ νμνκ³ , μμΌλ©΄ νλ©΄μ order + 1 μ νμνλ€.
π νλ Έμ λ μ€λ₯ νμνκΈ°
μ¬λ°λ₯΄μ§ μμ λ¨μ΄λ₯Ό μ λ ₯ν κ²½μ°λ₯Ό μ²λ¦¬ν΄μΌ νλ€.
alert ν¨μλ₯Ό μ¬μ©ν΄ νλ Έλ€λ κ²μ μλ €μ£Όμ.
<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;
alert(number+'λͺ
μ
λλ€.');
const onClickButton = () => {
if (!word) { //μ μμ΄κ° λΉμ΄ μλκ°?
//λΉμ΄μλ€.
word = newWord; //μ
λ ₯ν λ¨μ΄ = μ μμ΄
$word.textContent = word; //νλ©΄μ μ μμ΄ νμ
const order = Number($order.textContent);
if(order + 1 > number){
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
} else {
//λΉμ΄ μμ§ μλ€.
if (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 μ΄λ²€νΈ μμμ newWord λ³μμ μ μ₯
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>
β μ΄μ μ¬λμ΄ input νκ·Έμ μ λ ₯ν λ¨μ΄κ° κ·Έλλ‘ λ¨μ μμ΄μ μ§μ°κ³ λ€μ μ λ ₯ν΄μΌνλ€.
μ½λλ₯Ό μμ νκ² λ€.
<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;
alert(number+'λͺ
μ
λλ€.');
const onClickButton = () => {
if (!word) { //μ μμ΄κ° λΉμ΄ μλκ°?
//λΉμ΄μλ€.
word = newWord; //μ
λ ₯ν λ¨μ΄ = μ μμ΄
$word.textContent = word; //νλ©΄μ μ μμ΄ νμ
const order = Number($order.textContent);
if(order + 1 > number){
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
$input.value = '';
$input.focus();
} else {
//λΉμ΄ μμ§ μλ€.
if (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;
}
$input.value = '';
$input.focus();
} else {
//μ¬λ°λ₯΄μ§ μλ€.
alert('μ¬λ°λ₯΄μ§ μμ λ¨μ΄λ€!');
$input.value = '';
$input.focus();
}
}
};
//μ
λ ₯ν λ¨μ΄λ₯Ό input μ΄λ²€νΈ μμμ newWord λ³μμ μ μ₯
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>$input μ input νκ·Έλ₯Ό μ ννλ λ³μμ΄λ€.
input νκ·Έ λ΄λΆμ λ΄μ©μ μμ νλ €λ©΄ $input.value = κ°μ νλ©΄ λλ€.
Note!
textContent λ₯Ό μ¬μ©νλ©΄ μλλ?
κΈ°λ³Έμ μΌλ‘ νκ·Έ λ΄λΆμ κ°μ μ νν λλ textContentλ₯Ό μ¬μ©νλ κ² λ§μ§λ§, μ λ ₯ νκ·Έλ§ valueλ₯Ό μ¬μ©νλ€.
inputμ λνμ μΈ μ λ ₯ νκ·Έμ΄λ€.
λ€λ₯Έ μ λ ₯ νκ·Έλ‘λ select / textarea κ° μλ€.
μ
λ ₯νκ·Έ.value // μ
λ ₯μ°½μ κ°μ κ°μ Έμ΄
μ
λ ₯νκ·Έ.value = κ° // μ
λ ₯μ°½μ κ°μ λ£μ
//μ½λ μΆμ² (λμ)Let's Get IT μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ°μ λ ₯ νκ·Έλ₯Ό μ ννκ² νλ €λ©΄ focus λΌλ λ©μλλ₯Ό μ¬μ©νλ€.
| focus | μ λ ₯ νκ·Έ λ΄λΆμ 컀μλ₯Ό μμΉνκ² ν΄μ λ€μ μ¬μ©μκ° μ λ ₯νκΈ° νΈνκ² λμμ€λ€. |
μ
λ ₯νκ·Έ.focus() // μ
λ ₯μ°½μ νμ΄λΌμ΄νΈ
//μ½λ μΆμ² (λμ)Let's Get IT μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ°π μμλ μ΅μ ννκΈ° ( and, or )
β μ€λ³΅λλ λΆλΆμ μ°Ύμ μ΅μ ννκΈ°
μμλλ₯Ό 보면 'μ λ ₯μ°½μ λΉμ°κ³ 컀μλ₯Ό λλ€' μ μ°¨κ° μ€λ³΅λλ€.
μ½λμμλ μ΄ λΆλΆμ΄λ€.
$input.value = '';
$input.focus();λ μ½λμμλ§ μ€λ³΅λλ λΆλΆλ μλ€.
'μ λ ₯ν λ¨μ΄κ° μ μμ΄κ° λλ€'μ 'λ€μ μ¬λμκ² μμλ₯Ό λκΈ΄λ€' μ μ°¨μ ν΄λΉνλ μ½λμ΄λ€.
word = newWord; //νμ¬ λ¨μ΄λ₯Ό μ μμ΄μ μ μ₯.
$word.textContent = word; //νλ©΄μ μ μμ΄ νμ
const order = Number($order.textContent);
if (order + 1 > number){
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
λν 'μ μμ΄κ° λΉμ΄ μλκ°?' μ 'μ λ ₯λ λ¨μ΄κ° μ¬λ°λ₯Έκ°?' λΌλ μ μ°¨λ₯Ό 'μ μμ΄κ° λΉμ΄μκ±°λ λ¨μ΄κ° μ¬λ°λ₯Έκ°?' λΌλ μ μ°¨λ‘ μ€μΌ μ μλ€.
μ΄μ²λΌ νλ¨νλ μ μ°¨κ° μ°μ΄μ΄ λμ€κ³ yes or no κ° κ³΅ν΅λ μ μ°¨λ‘ μ΄μ΄μ§ λμλ μ μ°¨λ₯Ό νλλ‘ λ§λ€ μ μλ€.
ν©μΉ μ μλμ§ μλμ§λ νλ₯Ό μ΄μ©ν΄ λΆμνλ©΄ λμλλ€.
β ν©μΉ μ μλ μ μ°¨μΈμ§ νλ¨νκΈ°
| νλ¨1 | νλ¨2 | νλ¨3 |
| μ μμ΄κ° λΉμ΄ μλ€. | λ¨μ΄κ° μ¬λ°λ₯΄λ€. | μ λ ₯ν λ¨μ΄κ° μ μμ΄κ° λλ€. |
| μ μμ΄κ° λΉμ΄ μλ€. | λ¨μ΄κ° μ¬λ°λ₯΄μ§ μλ€. | μ λ ₯ν λ¨μ΄κ° μ μμ΄κ° λλ€. |
| μ μμ΄κ° λΉμ΄ μμ§ μλ€. | λ¨μ΄κ° μ¬λ°λ₯΄λ€. | μ λ ₯ν λ¨μ΄κ° μ μμ΄κ° λλ€. |
| μ μμ΄κ° λΉμ΄ μμ§ μλ€. | λ¨μ΄κ° μ¬λ°λ₯΄μ§ μλ€. | νλ Έλ€κ³ νμνλ€. |
μ νμμ OR κ΄κ³ (μλ°μ€ν¬λ¦½νΈμμλ || ) μ AND κ΄κ³ ( μλ°μ€ν¬λ¦½νΈμμλ && ) λ₯Ό ꡬλ³ν΄λ³΄μ.
β ORμ κ΄κ³
| 첫 λ²μ§Έ 쑰건 | λ λ²μ§Έ 쑰건 | μ΅μ’ κ²°κ³Ό |
| true | true | true |
| true | false | true |
| false | true | true |
| false | false | false |
β ANDμ κ΄κ³
| 첫 λ²μ§Έ 쑰건 | λ λ²μ§Έ 쑰건 | μ΅μ’ κ²°κ³Ό |
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |
<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;
alert(number+'λͺ
μ
λλ€.');
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();
};
//μ
λ ₯ν λ¨μ΄λ₯Ό input μ΄λ²€νΈ μμμ newWord λ³μμ μ μ₯
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>μ½λλ₯Ό μ§§κ² μ€μλ€.
ORμ κ΄κ³κ° μλ νλ¨ μ μ°¨ 2κ°λ₯Ό 1κ°λ‘ μ€μλ€. ( !word || word[word.length -1] == newWord[0] )
μ΄λ μ μ°¨ 1μ΄μλ 'μ μμ΄κ° λΉμ΄ μλκ°?' λ μ μ°¨ 2μΈ 'λ¨μ΄κ° μ¬λ°λ₯Έκ°?' λ³΄λ€ μ°μ μμκ° λμΌλ―λ‘ ( μ μ°¨ 1μ μ μ°¨2λ³΄λ€ λ¨Όμ νλ¨νλ€. )
μ μ°¨ 1μ΄ || μμ λμμΌ νλ€.
π§Έ μ 체 μ½λ
<!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 νκ·Έλ λ€λ₯Έ νκ·Έλ€λ³΄λ€ μλμ μμ΄μΌ νλ€.
HTMLμ μμμλΆν° μλλ‘ μ€νλλ―λ‘ νλ©΄μ 그리λ νκ·Έλ€μ΄ λ¨Όμ μ€νλΌμ νλ©΄μ΄ κ·Έλ €μ ΈμΌ script νκ·Έμμ
μλ°μ€ν¬λ¦½νΈλ‘ νλ©΄μ μ‘°μν μ μλ€. -->
<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;
alert(number+'λͺ
μ
λλ€.');
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();
};
//μ
λ ₯ν λ¨μ΄λ₯Ό input μ΄λ²€νΈ μμμ newWord λ³μμ μ μ₯
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click',onClickButton);
$input.addEventListener('input',onInput);
</script>
</body>
</html>-(λμ) Let's Get IT μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ°
Let's Get IT μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ°
λλΆ(TheBook): (μ£Ό)λμμΆν κΈΈλ²μμ μ 곡νλ IT λμ μ΄λ μλΉμ€μ λλ€.
thebook.io
-(κ°μ’) λ μΈ κΈ°λ¦Ώ μλ°μ€ν¬λ¦½νΈ
[무λ£] [리λ΄μΌ] λ μΈ κΈ°λ¦Ώ μλ°μ€ν¬λ¦½νΈ - μΈνλ° | κ°μ
λ³Έ κ°μμμλ μλ°μ€ν¬λ¦½νΈλ₯Ό νμ©ν΄ νλ‘κ·Έλλ° μ¬κ³ λ ₯μ κΈ°λ₯΄λ μ°μ΅μ ν©λλ€. μΉ κ²μμΈ κ΅¬κ΅¬λ¨μ μμμΌλ‘ λλ§μκΈ°, μ«μ μΌκ΅¬, λ°μ μλ ν μ€νΈ, ν±νν , λ‘λ μΆμ²¨κΈ°, κ°μλ°μ보, μΉ΄
www.inflearn.com
