Es2020 2강 끝말잇기

Ryu·2021년 2월 17일
0

JavaScript

목록 보기
2/5
post-thumbnail

가장 첫번째 : 순서도 그리기

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)

으로 하는 것이 좋다.

profile
쓴다.노트.하는동안.공부

0개의 댓글