document.queryselector('#button')
=> html 테그를 가져오는 행위(id가 button인 테그를 가져온다.)
const btn = document.querySelector('#button')
btn으로 정의하는 이유 => 타자수를 줄이기위해
document.querySelector('#word').textContent
=> word의 테그를 선택하여 그것의 textContent를 가져옴
document.querySelector('#input').value
=> input의 테그를 선택하고 그것의 값을 가져옴
. => ~의 의미하는 것
// => 주석
string(문자열)
=> '', "", `` 로 감싸져있는것
ex)'제'로초' => 제와 로초 사이에 '를 문자열로 표시하고싶다면 "제'로초"
cuz. javascript는 왼쪽에서 오른쪽으로, 위에서 아래로 읽기때문에.
number(숫자)
boolean(T/F)
object(객체)
null
undefinded
symbol
'abcedfg'[0]
// 'a'
'가나다라마바사'[3]
// '라'
'문자열'.length
// 3
const word = document.querySelector('#word').textContent
id가 word인 값을 태그하여 가져오는 것이기때문에
document.querySelector('#word').textcontent 를 word로 줄여서 사용할 수 없다.
=> 줄여서 사용하고싶다면 다시 변수를 wordTag로 지정해주어야 한다.
const word = document.querySelector('#word').textContent
const input = document.querySelector('#input').value
const lastIndex = word.length - 1
const w = word[lastIndex]
const i = input[0]
if (w===i) {
document.querySelector('#word').textContent = input
document.querySelector('#error').textContent = ''
document.querySelector('#input').value = ''
document.querySelector('#input').focus()
} else {
document.querySelector('#error').textContent = '땡'
document.querySelector('#input').value = ''
document.querySelector('#input').focus()
}
})
코드를 줄이고 싶다면
let wordTag = document.querySelector('#word')
let word = wordTag.textContent
let inputTag = document.querySelector('#input')
let errorTag = document.querySelector('#error')
let input = inputTag.value
const lastIndex = word.length - 1
const w = word[lastIndex]
const i = input[0]
if (w === i) {
wordTag.textContent = input
errorTag.textContent = ''
inputTag.value = ''
inputTag.value.focus()
} else {
errorTag.textContent = '땡'
inputTag.value.value = ''
inputTag.value.focus()
}
})
로 변수값을 수정하여야 한다.
변수의 생명은 {로 시작하여 }에서 죽는다.
중복된 단어를 사용하지 못하게 하려면 단어장을 하나 만든뒤에 순서도에 따라 만든다.
if (dictuionary.includes(input)) {
errorTag.textContent = '중복입니다' }
복잡한 알고리즘의 프로그램을 만들때는 항상 코딩 전에 순서도의 일부를 그린 뒤에 코딩하고 다시 나머지 일부를 그린 뒤에 코딩하고를 반복한다. => 한번에 모든걸 그리는 것은 불가능하기 때문.
변수는 사용하는 그룹 가장 가까이에 두는 것이 좋다. => 코딩이 1000줄 10000줄이 넘어가면 변수를 어떻게 지정했는지 찾기 어렵기 때문에.
변수 단어를 줄여서 하는것보단 풀 단어를 작성하는 것이 좋다
ex)
const btn = document.querySelector('#button)
보다는
const button= document.querySelector('#button)
으로 하는 것이 좋다.