제로초 javascript

 <22.3.7>

1-1. 자바스크립트 입문자들께 드리는 말씀

ko.javascript.info, mdn 사이트 추천

1-2. VS Code와 크롬 설치하기

유료는 webstorm

사용자 이름 영어로 바꾸기

자바스크립트를 실행할 때는 브라우저가 필요.(브라우저 없으면 node.js로 실행가능)

1-3. 첫 자바스크립트 코드 실행하기

()소괄호parentheses {}중괄호braces []대괄호brackets

1-4. 프로그래밍 사고력의 중요성

순서도

2-1. 세미콜론, 주석, 들여쓰기

주석: //, /* */

들여쓰기 2칸 스페이스

2-2. 문자열 기본(따옴표, 백틱, typeof, escape)

값(value)의 자료형(data type)

1. 문자열

자바스크립트는 반드시 문자열을 큰따옴표, 작은 따옴표, 백틱(`)도 가능

백틱은 줄바꿈 가능.

따옴표는 줄바꿈을 \n으로 가능

typeof '문자열'     =>string

 

'how\'re you?'

2-3. 문자열 합치기(연산자)

'바나나' + '사과'    =>'바나나사과'

2-4. 숫자 기본(parseInt, NaN)

50000 = 5e4

0.0005 = 5e-4

이진법7 = ob111

8진법73 = 0111 = 0o111

16진법 417 = 0x1a1

 

typeof 0x1a1

NaN = Not a Number

NaN-0 = NaN

 

'124'+5   =  '1245'  (형 변환)

'문자열' - 0 = NaN

'3' - 0 = 3      -,/,*는 숫자로 바뀐다.

 

parseInt('124')

Number('124') + 5   = 129

typeof parseInt('123')

 

parseInt('3.14')   => 3

parseFloat('3.14')  => 3.14

Number('3.14')  => 3.14

 

parseInt('3월') => 3

Number('3월') => NaN

 

typeof parseInt(prompt());   값입력할 수 있는 창 뜸

parseInt(prompt())

prompt()   => "53"    문자열을 입력받음

 

parseInt(111, 2) => 7     (2진법)

 

+-/*%

 

6/4  = 1.5

 

**   제곱

2**4   = 16

2/0   = Infinity 무한이라는 수

typeof -Infinity

Infinity - Infinity = NaN

0/0 = NaN

 

2-5. 연산자 우선순위, 소수 계산 주의점

()소괄호 그룹화가 가장 우선순위가 높다.

 

0.1+0.2  = 0.30000000000000004

소수계산을 잘 못함. 부동소수점 문제. 2진법을 사용하기 때문

 

10을 곱해서 정수로 만든후, 마지막에 다시 10으로 나눠서 실수로 바꾸기

(0.3*10-0.1*10)/10 = 0.2

 

<2-6. 불 값(boolean, 값들의 비교)>

true, false

5 == 5  같다

5 != 5 같지않다

NaN == NaN  => false   !=만 true가 나온다.

true > false => true

 

'b'>'a'    => true  사전순서

'&'.charCodeAt()

 

'3'<5 =>true

 

'abc' < 5  => false

'abc'를 숫자로 바꾸면 NaN

'0' < true;  => true

true는 1

 

== 같다

'1' == 1 =>true 값만 비교

1==true=>true

 

'1' ===1 =>false 값+자료형도 비교

 

1 !== '1' =>true

 

<22.3.8>

<2-7. 논리연산자>

and &&

or ||

!true => false

!false => true

 

Boolean('a');

!!'a'  => true

'', 0, NaN, undefined, null, document.all  =>false 외우기

 

<2-8. undefined와 null>

빈 값. undefined, null,   문자열, 숫자, 불 값 이외의 자료형 object, symbol

 

돌려줄 값이 없으면 undefined를 돌려준다.

console.log('Hello, undefined!');

=> undefined

 

undefined == false;  => false

undefined == 0;  => false

 

undefined == null; =>true

undefined === null;  => false

 

null == false;  => false

null == 0;  => false

null == '';  => false

 

typeof null  => "object"

 

<2-9. 변수 선언하기(let)>

변수를 사용하면 값을 저장할 수 있다.

let numberOne = 135;

let total = 5000+8000+10000+9000; =>32000

변수선언 = 초기화;

let은 두번 선언할 수 없다.

 

<2-10. 변수 이름짓기>

변수선언만 하고 초기화를 안해주면 undefined

 

변수명 &,_가능, 한글,숫자도 가능(숫자는 가장먼저 쓰이면 안된다)

 

<2-11. 변수 수정하기>

변수에 넣은 값을 비울 때

1. chanege = undefined

2. change = null;

null로 바꾸는 것을 추천.

 

변수를 다른 변수에 대입가능

let string2 = string;

 

number = number +3;

ㄴ=  number += 3;     -=, *=, /=, %=, **= 도 가능

 

<2-12. 상수(const)와 var>

변수를 선언하는 예약어로 let, const, var

const는 상수(constant) 변하지 않는 수. vs 변수: 변하는 수

 

const는 초기화를 꼭 같이 해줘야 한다.

 

var는 변수(variable)의 줄임말. 예전에 많이 사용했다. 다시 선언가능.

var는 예약어를 변수명으로 사용가능.

 

<2-13. 조건문(if)>

if (조건식) {

  동작문1;

  동작문2;

}

동작문이 하나 이상이면 동작문들을 중괄호로 감싼다. 

 

콘솔창에서 줄바꿈은 shift+enter

 

<2-14. else, else if, switch>

if (조건식) {

  동작문;

} else if (조건식) {

  동작문;

} else {

  동작문;

}

 

switch (조건식) {

  case 비교조건식;

    동작문;

}

 

switch 옆 소괄호 조건식의 값이 case의 비교 조건식값과 일치(===)하면 해당 동작문이 실행된다.

보통 조건식에 변수를 넣고, 비교 조건식에는 변수와 비교할 값을 넣는다.

 

let value = 'A';

switch (value) {

  case 'A':

    console.log('A');

    console.log('B');

}

 

let value = 'B';

switch (value) {

  case 'A':

    console.log('A');

  case 'B':

    console.log('B');

  case 'C':

    console.log('C');

}

B, C 모두 출력된다.

 

let value = 'B';

switch (value) {

  case 'A':

    console.log('A');

    break;

  case 'B':

    console.log('B');

    break;

  case 'C':

    console.log('C');

    break;

}

 

B만 출력됨.

 

 

let value = 'F';

switch (value) {

  case 'A':

    console.log('A');

    break;

  case 'B':

    console.log('B');

    break;

  case 'C':

    console.log('C');

    break;

  default:

    console.log('아무것도 일치하지 않음');

}

 

'아무것도 일치하지 않음'이 출력됨. default가 else와 비슷한 역할

 

<2-15. 조건부 연산자(삼항 연산자)>

조건식? 참일 때 실행되는 식 : 거짓일 때 실행되는 식

5 > 0 ? '참입니다' : '거짓입니다';

 

let value = 5 < 0 ? '참입니다' : '거짓입니다';    결과값을 변수에 대입할 수 있음

 

조건부 연산자도 중첩가능

let value = condition1 ? (condition2 ? '둘 다 참' : 'condition1만 참') : 'condition1이 거짓';  소괄호 생략가능

 

<2-16. 반복문(while)>

while (조건식) {

  동작문1;

  동작문2;

}

 

let i = 1;

while (i <=100) {

  console.log('Hello, while!');

  i++;

}

 

<22.3.9>

<2-17. 반복문(for)>

for(시작; 조건식; 종료식)

  동작문;

 

for (let i=0; i < 100; i++) {

  console.log('Hello, for!');

}

 

for문의 시작, 조건식, 종료식은 생략가능

for(;;) {

}

ㄴ가능한 코드, 무한 반복

 

<2-18. break와 continue>

let i = 0;

while (true) {

  if (i === 5) break;

  i++;

}

console.log(i);

 

for (let i = 0; ; i++) {

  console.log(i);

}

ㄴ조건식이 생략되어 문한반복

 

let i = 0;

while (true) {

  console.log(i);

  i++;

}

 

let i = 0;

while (i < 10) {

  i++;

  if (i % 2 === 0) {

    continue;

  }

  console.log(i);

}

continue만나면 그 다음줄 실행안하고 그다음 반복문으로 간다.

 

<2-19. 중첩 반복문>

for (let i = 0; i <10; i++) {

  for (let j = 0; j <10; j++) {

    console.log(i, j);

  }

}

 

i,j,k

 

<2-20. 별찍기 숙제>

(1)

*

**

***

****

*****

 

(2)

*****

****

***

**

*

 

(3)

*

***

*****

*******

*********

 

(4)

*********

*******

*****

***

*

 

(5)

*****

 ****

  ***

   **

    *

 

(6)

    *

   **

  ***

 ****

*****

 

(7)

  *

 ***

*****

 ***

  *

 

(8)

    *

   ***

  *****

 *******

*********

 

<2-21. 배열 기본>

객체(object)는 배열(array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있다.

const fruits = ['사과', '오렌지', '배', '딸기'];

대괄호([]) 사용. 값은 쉼표로 구분

사과, 오렌지, 배, 딸기는 배열의 요소(element)

배열안에 배열, 변수도 들어갈 수 있다.

const arrayOfArray = [[1,2,3], [4,5]];

 

배열 요소개수 구하기

console.log(everything.length);

null, '', undefined, NaN 등의 빈값도 유효한 값이므로 요소 개수에 포함.

 

배열에 요소 추가

const target = ['a', 'b', 'c', 'd', 'e'];

target[5] = 'f';

 

배열 제일앞에 요소 추가

unshift

target.unshift('가');

 

배열 제일 뒤에 요소 추가

push

target.push('바');

 

const가 상수더라도 객체의 내부는 변경가능. 새로운 값을 대입(=)은 불가능

target2 = ['f', 'g']; //불가능

target2[0] = 'h'; //가능

 

<2-22. 배열 메서드(수정, 조회)>

배열의 요소 수정

target[3] = '카';

 

배열에서 요소 제거하기

마지막 요소제거 pop

target.pop();

 

첫번째 요소 제거 shift

target.shift();

 

중간 요소 제거 splice

target.splice(지우고 싶은 요소의 인덱스, 그 요소로부터 지울 요소개수);

target.splice(1, 1);

 

splice에 숫자 값 하나만 넣어보면, 해당 인덱스부터 끝까지 모든 요소를 제거.

target.splice(1);

 

splice로 값을 지우기만 하는 것이 아니라 지워진 자리에 다른 값을 넣을 수도 있다.

splice의 세번째 자리부터 바꿀 값들을 넣어주면 된다.

target.spice(1,3,'타','파');

 

배열에서 요소 찾기

배열에 특정요소가 있는지 검색기능. includes

const result = target.includes('다'); true

 

검색하고 싶은 값이 몇 번째 인덱스에 위치하는 지 알아보기 indexOf, lastIndexOf

const result = target.indexOf('다'); 앞에서부터 값 찾아봄

const result2 = target.lastIndexOf('라'); 뒤에서부터 값 찾아봄

없는 값 찾으면 -1반환

 

 

배열 조회

let i = 0;

while (i < target.length) {

  console.log(target[i]);

  i++;

}

 

<2-23. 배열 메서드 응용하기>

다음 배열에서 '라'를 모두 제거하세요. indexOf와 splice를 사용하세요.

const arr = ['가', '라', '다', '라', '마', '라'];

 

 

if (arr.indexOf(1) > -1)

 

<2-24. 함수 기본>

함수 function

함수 만들기

1. function() {}

2. ()=> {}

 

함수에 이름 붙이기

function a() {} 함수 선언문

const b = function() {}; 함수 표현식

const c = () => {};

 

함수 호출하기

function a() {}

a();

 

함수안에서 다시 함수를 호출할 수도 있다.

 

함수의 반환값

function b() {

  return '반환값';  함수의 종료를 의미하기도 한다.

}

 

여러 값 리턴

function a() {

  return [1, 5];

}

 

<2-25. 매개변수와 인수>

parameter(함수선언시), argument(함수호출시)

function a(parameter) {

  console.log(parameter);

}

a('argument');

 

매개변수 여러개도 가능

function a(w, x, y, z) {

  console.log(w, x, y, z);

  console.log(arguments);  // function안에서만 사용가능. => 결과값 Arguments(3) ['Hello', 'Parameter', 'Argument']

}

a('Hello', 'Paremeter', 'Argument');  z는 undefined

 

매개변수 x,y,z을 받아 곱한 값을 반환하는 multiply 함수를 만들어 보세요. 단, 화살표 함수로 만드세요.

 

화살표는 중괄호와 return이 바로 이어지면 중괄호와 return을 생략가능.

const f = (x, y, z) => x * y * z;

 

<2-26. 객체 리터럴 기본>

객체는 여러 개의 변수를 하나의 변수로 묶을 때 사용한다.

 

const zerocho = {

  name: '홍길동',

  year: 1993,

  month: 11,

  date: 19,

  gender: 'M',

};

 

속성이름: 속성 값

 

속성이름에 특수문자나 띄어쓰기가 들어가거나 숫자가 제일 앞에 있다면 따옴표 붙여줘야 한다.

 

console.log(zerocho.name);

console.log(zerocho['name']); 대괄호에 따옴표를 빼먹으면 변수로 인식

 

문자열로 감싸준 특수한 경우는 obj.2bc이런건 안된다.

obj['2bc']이렇게 해야 한다

 

없는 속성을 호출하면 undefined가 나온다.

 

객체 속성 수정하기

zerocho.gender = 'F';

 

객체 속성 제거하기

delete zerocho.gender;

 

 

함수와 배열이 객체인 이유

function hello() {}

hello.a = "really?';

const array = [];

array.b = 'wow';

 

메서드 이해하기

객체의 속성 값으로 함수를 넣었을 떄 이 속성을 메서드(method)라고 한다.

const debug = {

  log: function(value) {

    console.log(value);

  },

};

 

debug.log('Hello, Method');

 

<2-27. 객체의 비교(원시값과의 차이점)>

객체는 모양이 같아도

{} === {} 비교하면 false가 나온다.(배열, 함수도 마찬가지)

 

따라서 같은 객체인지 비교하고 싶다면 기존 객체를 변수에 저장해 두어야 한다.

const a = {name: 'zerocho' };

const array = [1,2,a];

console.log(a === array[2]);

 

참조

const a = { name: 'zerocho' };

const b = a; 참조

 

a.name = 'hero';

console.log(b.name); //hero

객체 간에 참조관계가 있다.

 

객체가 아닌 값=원시값(문자열, 숫자, 불 값, null, undefined)의 경우는 조금 다르다.

let a = 'zerocho';

let b = a;

a = 'hero';

console.log(b); //'zerocho'

이렇게 참조가 생기지 않는 상황을 복사라고 부른다.

 

<22.3.12>

<3-1. 순서도를 그리는 이유>

<3-2. 기본 VS Code 사용법>

doc+tab =>html자동완성

브라우저에서 열기 f5-chrome

 

<3-3. 대화창(prompt, alert, confirm)>

const number = parseInt(prompt('몇 명이 참가하나요?'), 10); 사용자로부터 입력을 받을수 있는 창. 문자열로 인식되기 때문에, 숫자로 변환해줘야 한다.

console.log('number', number); 콘솔로그에는 콤마로 여러값 동시에 출력가능

 

경고창

alert(number);

 

const yesOrNo = confirm('맞나요?'); 사용자로부터 예, 아니오 값을 받음(확인,취소 버튼)

 

<22.315>

<3-4. HTML 태그 선탁하기(querySelector)>

document.querySelector('선택자')

 

제로초만의 규칙. 태그선택자일시, 변수앞에 $를 붙여줌.

const $button = document.querySelector('button');

 

태그가 여러개 있는 경우, 모두 선택하고 싶다면 document.querySelectorAll

 

<22.3.16>

<3-5. 이벤트 리스너 달기(콜백함수)>

document.querySelector('input').addEventListener('input', function() {
 });

document.querySelector('button').addEventListener('click', function() {
      console.log('버튼 클릭');
    });

 

태그.addEventListener('이벤트 이름', 리스너함수); 리스너함수=콜백함수

 

const onClick = function() {
      console.log('버튼 클릭');
    }
    document.querySelector('button').addEventListener('click', onClick);

 

ocument.querySelector('input').addEventListener('input', () => {
      console.log('글자 입력');
    });

 

document.querySelector('input').addEventListener('input', (event) => {
      console.log('글자 입력', event.target.value);
    });

 

<3-6. 첫 번째 사람인지 판단하기>

const onClickButton = ()=> {
      if (!word) { // 제시어가 비어 있는가?
        word = newWord;
        $word.textContent = word;
        $input.value = '';
      } else {

      }
    };
    const onInput = (event) => {
      newWord = event.target.value;
    };

    $input.addEventListener('click', onClickButton);
    $input.addEventListener('input', onInput);

 

<3-7. 올바른 단어인지 판단하기>

if (word[word.length-1] === newWord[0]) {
          word = newWord;
          $word.textContent = word;
          $input.value = '';

 

const order = Number($order.textContent); //현재순서
        if (order + 1 > number) {
          $order.textContent = 1;
        } else {
          $order.textContent = order + 1;
        }

 

<3-8. 틀렸을 때 오류 표시하기>

$input.focus();

 

<3-9. 순서도 최적화하기(and, or)>

 if (!word || word[word.length-1] === newWord[0])

 

<22.3.17>

<3-10. 셀프체크-쿵쿵따 만들기>

prompt에 취소를 누르면 null

parseInt(null)하면 NaN

NaN은 if문에 들어가면 false