웹 게임을 만들며 배우는 JS : 틱택토
JS에서 테이블만들기, 자식태그, 2차원배열, 2차원배열클릭이벤트, forEach

웹 게임을 만들며 배우는 JS : 숫자야구

동기와 비동기, split, join, indexOf, i++과 i+=1

1. 동기와 비동기

동기 : 위에서 아래로 순차적으로 코드가 실행 됨.

비동기 : 순차적X, 언제 코드가 실행될 지 모름. ex) .addEventListener

2. split와 join

1
2
3
4

문자.split(구분자) -> 배열
배열.join(구분자) -> 문자

구분자 ex : ' ' 또는 ' : ' 또는 ',' 등등 다양하게 가능.

3. 배열. indexoOf

1
2
3
4

배열.indexOf(값)
값의 위치를 알 수 있다.
배열속의 0번째인지 2번째인지 등등
배열속에 없으면 -1 출력.

활용방안

1
2
3
4
5
6
7
8
9
10
11
12

let 숫자배열 = [1,3,4,5];

숫자배열.indexOf(1) //=> 0
숫자배열.indexOf(4) //=> 2
숫자배열.indexOf(8) //=> -1

어떤 배열에 내가 궁금한 숫자가 있는 지 확인하고 싶을때 
for (let i =0; i<숫자배열.length; i+=1){
  if (숫자배열.indexof(내가궁금한숫자) > -1){
    있다 ++
  }
}

4. i++ 과 i+=1

1
2
3
4
5
6

i = i + 1을 두가지 방식으로 짧게 표현할 수 있다

첫번째 : i+=1
원래 순서대로라면 i=+1이 되어야할텐데 왜 +=순서냐면, 연산자에 순서가 있는데 그중에 = 이 제일마지막에 와야하기 때문! 

두번째 : i++

첫번째가 더욱 직관적이기때문에 첫번째 방식으로 공부하기를 추천함.

비전공자가 IT개발자로, 커리어전환기10

DOM : JS에서 자식태그만들기, .append와 .appendChild의 차이점, innerHTML

우연한 기회에 친한 언니에게 내가 만든 블로그를 소개해주려고 모바일로 접속했다(자랑할라고ㅋㅋㅋ)
이거 봐라~하면서 의기양양하게 클릭했는데
아니?! 코드의 왼쪽 부분이 다 짤려서 보이지 않았다.

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

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

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

2. 객체 벤다이어그램

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

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

3. 객체

= {

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

속성(메서드) : 함수,

}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let 가랑카페 = {

커피 : '아메리카노',

가격 : 1500

}


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

가랑카페.커피


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

가랑카페['커피']

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

1
2
3
4
5
6
7

var 값 : '커피'


가랑카페.값 //=> undefined

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

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

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

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

여기서 잠깐!

‘안녕하세요’는 문자인데 어떻게 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(등록버튼);

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

1
2
3
4
5

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

7. 콜백함수

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

1
2
3
4
5
6
7
8

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

예를 들어 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

폼.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('땡');
//     }
// }

데이터의 관점으로 생각하기 by 이숙번강사

2019년 한국코드페어 - SW 빌더스 챌린지 오프라인 특강
「데이터의 관점으로 생각하기」 강사: 이숙번 blackdew7@gmail.com

비전공자가 IT개발자로, 커리어전환기9

CSS기초: block과 inline, inline-block의 차이, border-box, postion

1. block과 inline, inline-block의 차이

• block은 <div>태그처럼 한 줄을 다 차지하는 요소
• inline과 inline-block은 <span>태그처럼 딱 콘텐츠 공간만을 차지하는 요소
• 그 중 inline은 높이height를 가질 수 없다.
• inline-block은 높이height를 가질 수 있다.

그림이 이해가 쉬우니까 구글링해보았다

비전공자가 IT개발자로, 커리어전환기8

HTML기초: div와 span의 차이, 새탭에서 링크열기

1. 먼저 div VS span 태그의 차이점

1
2
3
4
5

div 태그는 한 줄을 차지한다
<div>division</div>

span태그는 컨텐츠 크기만큼 공간을 차지한다
<span>요~~~만큼span</span>