끝말잇기: 괄호의종류,객체벤다이어그램,배열기본,콜백함수,이벤트리스너

웹 게임을 만들며 배우는 JS : 끝말잇기

괄호의종류,객체벤다이어그램,배열기본,콜백함수,이벤트리스너

1. 대괄호 [] 중괄호 {} 소괄호 ()

2. 객체 벤다이어그램

함수는 객체지만, 객체는 함수가 아님.

배열은 객체지만, 객체는 배열이 아님.

3. 객체

= {

속성(프로퍼티) : 값(value),

속성(메서드) : 함수,

}

3-1. 객체에서 값을 가져올 때, 2가지 방법

let 가랑카페 = {

커피 : '아메리카노',

가격 : 1500

}


//첫번째 방법 : 닷 노테이션

가랑카페.커피


//두번째 방법 : 브라켓 노테이션

가랑카페['커피']

방법이 두가지인 이유는? 닷노테이션은 변수를 가져오지 못한다

var 값 : '커피'


가랑카페.값 //=> undefined

가랑카페['값'] //=> '아메리카노'

3-2 객체에서만 쓸 수 있는 것

• 닷 노테이션 ex) ‘안녕하세요’.length 또는 ‘*’.repeat(5)

• 브라켓 노테이션 ex) ‘안녕하세요’[1]

여기서 잠깐!

‘안녕하세요’는 문자인데 어떻게 both 노테이션을 쓸 수 있을까? 브라우저가 자동으로 문자객체로 바꾸기 때문에 가능.

직장생활 꿀팁1. 객체 속성 값을 지우고 싶을 때는 undefined 가 아닌 null로 값을 덮어씌움으로써 내가 직접 지웠는지 아닌지 구분할 수 있다

직장생활 꿀팁2. 객체에서 값을 작성한 후 마지막 속성에도 꼭 반점(,) 을 찍어준다. 그게 실전에서 편함.

4. 배열

= [

‘사과’,

‘오렌지’,

‘포도’,

]

let 과일 = [ '사과', '복숭아', '배']


console.log(과일[1]) // => 복숭아

여기서 잠깐!

과일은 배열인데 어떻게 브라켓 노테이션을 쓸 수 있을까? 배열은 객체이기때문! 하지만 객체는 배열이 아님!

직장생활 꿀팁3. 그룹화하고싶지만 속성이름을 따로 주고 싶지 않을 때 배열을 사용한다.

직장생활 꿀팁4. 배열에서 값을 작성한 후 마지막 속성에도 꼭 반점(,) 을 찍어준다. 그게 실전에서 편함.

5. 무한 반복문을 끄고 싶으면 shift + esc -> 크롬관리자창에서 현재탭 종료

6. JS에서 HTML 태크 만들기

var 바디 = document.body;
var 단어 = document.createElement('div');
단어.textContent = '단어';
document.body.append(단어);
var 폼 = document.createElement('form');
document.body.append(폼);
var 입력창 = document.createElement('input');
폼.append(입력창);
var 등록버튼 = document.createElement('button');
등록버튼.textContent = '등록';
폼.append(등록버튼);

위와 JS와 아래의 HTML은 동일하다

<div>단어</div>
<form>
    <input type="text" >
   <button>등록</button>
</form>

7. 콜백함수

매개변수 이름은 마음대로! but 다른 사람이 봐도 알 수 있게 명확히 이름짓는 것이 포인트!

function 콜백함수 (이벤트) {}

예를 들어 

function 더하기 (숫자1, 숫자2) {
  console.log(숫자1 + 숫자2);
}
더하기(3, 5) //=>8

8. 이벤트리스너 = 반복문 역할 (아닐 때도 있음)

폼.addEventListener('submit', function (이벤트) { 
//sunmit은 enter를 치면 기본적으로 새로고침이 되고 기존 기억이 리셋된다.
//그걸 방지하고 계속 진행하기 위해 아래와 같이 preventDefault를 넣어줌 
    이벤트.preventDefault();
    if (단어.textContent[단어.textContent.length -1] === 입력창.value[0]){
        결과창.textContent = '딩동댕';
        단어.textContent = 입력창.value;
        입력창.value = ''; //입력창을 비워주는 것
        입력창.focus(); //커서가 자동으로 입력창에 있음 
    }else{
        결과창.textContent = '땡!';
    }
});

===

반복문
// while(true){
//     var answer = prompt(word);
//     if (word[word.length -1] === answer[0]){
//         alert('딩동댕');
//         word = answer;
//     } else {
//         alert('땡');
//     }
// }