자바스크립트 함수 , 이벤트 리스너(콜백함수) 2022-05-17

값은 프로그램의 조작할수 있는 데이터를 의미합니다. 문자, 숫자, 논리형 

- 문자열 hello world 이런거 따옴표 백틱도 가능하다 ₩₩~~``

백틱 `  한글 입력시 option + ₩. 영문 입력시 ₩ 누르면 바로 백틱 입력됨 ` 

 

 

- typeof 문자열 -> string 

- typeof ""; -> string (빈문자) 

- typeof "  "; -> string (공백) 

 

 

undefined 와 null 

 

결과물을 돌려준다 -> undefined => undefined를 돌려준다 

돌려줄게 없으면 undefined 돌려준다. 

 

null -> 빈값을 넣을때 의도적으로 

 

undefined == null 

> true

 

undefined === null

> false

 

 

let , const 

let -> 상수를 바꿀수 있다. / 다시 선언하면 오류발생

const -> 상수를 바꿀수 없다. 

const 는 처음부터 값을 꼭 줘야한다 안주면 에러가 남

const value2; => 에러 발생함 

 

* var 변수 선언할때 사용하지만 옛날에 많이 사용해서 요즘은 잘 안씀 (let 비슷함)

다시 선언을 해도 오류가 안난다 

 

 

객체 

배열 , 함수 , 배열이나 함수가 아닌 객체 

배열에서 마지막꺼 제거 하고싶으면 pop사용하기 

const target = [1,2,3,4,];

target.pop(); 

4 제거됨

/ 마지막에 추가하고싶으면 puse 사용하기 

 

첫번째 요소를 제거하고싶으면 shift 기능 사용하기 

첫번째 요소 추가하고싶으면 unshift 기능 사용하기 

 

중간 요소를 제가하고싶으면 splice 기능을 사용한다.

const target [1,2,3,4,5];

target.splice(1,1); = > (인덱스, 몇개를 지울것인지)

consloe.log(target);

 

결과 = [1,3,4,5] 

 

splice () 안에 숫자 하나만 사용한 경우 

const target [1,2,3,4,5];

target.splice(1); -> 인덱스 번호가 아니라 첫번째 빼고 다 지우기 

console.log(target);

결과 => [1] 

 

 

배열에서 요소 찾기 includes 기능 사용하기 

const target = ["가","나","다","라","마"];

const result1 = target.includes("다");

const result2 = target.includes("카");

console.log(result1);

console.log(result2);

=>

true;

false;

 

 

indexOf / lastIndexOf 사용하면 정확히 몇번째 인덱스에 위치하는지 알 수 있다. 

const target = {'라','나','다','라','다'}; => target.length 는 인덱스 값이 아니라 5이다

const result = target.indexOf('다');  => 2  앞에서 찾는다

const result2 = target.lastIndexOf('라'); = >3  뒤에서 부터 찾는다  

const result3 = target.indexOf('가'); => -1   값이 없는 경우 -1 이 나온다 

 

 

 

HTML 선택자 

document.querySeletor('선택자'); 

 

예시

const $input = document.querySeletor('input');

console.log($input);

 

$ 사용은 변수만 보고도 태그를 선택한거다 라고 표기하는것 

여러개 태그를 선택하면 $$input 이렇게 적어도 된다.

const $$buttons = document.querySeletorAll('button');

all을 사용하면 배열처럼 보인다 

 

(div span)

->div 의 자손_후손 (span)

(div>span)

->div의 바로 자식(span)

 

 

====================================

이벤트 리스너 달기(콜백함수) = 리스너함수 = 익명 함수 

=> 어떤 동작을 연이어 실행되는 함수  

 

함수 선택자 호출해서 이벤트 리스너 함수 사용방법은 여러가지 이다. 바로 function() 사용 가능 / 

변수 선언해서 변수명을 넣어도 된다 onClick 여기에 onClick()이라고 적으면 안됨! 

 

 

화살표함수 / function 함수 유사하지만 다르다...