웹 게임을 만들며 배우는 JS : 가위바위보 Image sprite, Dictionary자료구조, setInterval(fuction(){},100), find VS findindex VS indexOf, Object.entries(객체), or연산자를 [].includes()로
var 후보군 = Array(45); //empty가 45개 생기고 empty의 특징은 foreach반복문 적용 불가. var 필 = 후보군.fill(); //필을 해줘야 45개의 emtpy에서 undefined가 된다.empty가 아니기에 forEach반복문 실행가능해짐.
//forEach를 사용해서 억지로 숫자를 넣을 수 있다. 필.forEach(function(요소,인덱스) { 필[인덱스] = 인덱스 + 1; });
//첫번째 방법사용 var 결과창 = document.getElementById('결과창'); var 칸 = document.getElementsByClassName('보너스')[0]; //class의 경우 여러개 사용이 가능해서 꼭 뒤에 [n] 몇번째 클래스인지 적어줘야함
//두번째 방법사용 var 결과창 = document.querySelector('#결과창'); //id일 경우 # var 칸 = document.querySelector('.보너스'); //class일 경우 .
끝! 이렇게 가지고 와서 원하는 방향으로 사용하면 된다!
6. .sort와 .sort(function(p, c){ return p-c;})
1 2 3
.sort() : 숫자 정렬 예를들어 [2,15,4,7,27].sort(); //=> [15,2,27,4,7] .
‘안녕하세요’는 문자인데 어떻게 both 노테이션을 쓸 수 있을까? 브라우저가 자동으로 문자객체로 바꾸기 때문에 가능.
직장생활 꿀팁1. 객체 속성 값을 지우고 싶을 때는 undefined 가 아닌 null로 값을 덮어씌움으로써 내가 직접 지웠는지 아닌지 구분할 수 있다
직장생활 꿀팁2. 객체에서 값을 작성한 후 마지막 속성에도 꼭 반점(,) 을 찍어준다. 그게 실전에서 편함.
4. 배열
= [
‘사과’,
‘오렌지’,
‘포도’,
]
1 2 3 4 5
let 과일 = [ '사과', '복숭아', '배']
console.log(과일[1]) // => 복숭아
여기서 잠깐!
과일은 배열인데 어떻게 브라켓 노테이션을 쓸 수 있을까? 배열은 객체이기때문! 하지만 객체는 배열이 아님!
직장생활 꿀팁3. 그룹화하고싶지만 속성이름을 따로 주고 싶지 않을 때 배열을 사용한다.
직장생활 꿀팁4. 배열에서 값을 작성한 후 마지막 속성에도 꼭 반점(,) 을 찍어준다. 그게 실전에서 편함.
5. 무한 반복문을 끄고 싶으면 shift + esc -> 크롬관리자창에서 현재탭 종료
6. JS에서 HTML 태크 만들기
1 2 3 4 5 6 7 8 9 10 11
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(등록버튼);
폼.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('땡'); // } // }