본문 바로가기

JavaScript8

JavaScript DOM API DOM ( Document Object Model ) HTML에 있는 속성과 태그들을 객체화시켜 사용 할 수 있게 하는 것 document.querySelector(클래스 이름) HTML 요소 1개 검색/찾기 let boxEl = document.querySelector('.box'); document.querySelectorAll(클래스 이름) HTML요소 전부 찾기 const boxEls = document.querySelectorAll('.box'); document.addEventListener(이벤트, 함수) 이벤트 추가하기 boxEl.addEventListener('click', function () { console.log('Click!!!'); boxEl.classList.add('acti.. 2022. 9. 18.
JavaScript 모듈 모듈을 사용하는 방법 import 키워드에 가지고 올 객체나 이름을 지정하고 from 뒤에는 모듈의 경로을 적는다. import getType from ./getType Defalut export : function이름을 지정하지 않아도 되며 import 다음 적는 키워드로 사용하지 않아도 된다. js당 한개만 지정이 가능하다. Named export : function에 이름을 지정해야 하며 여러개를 지정해서 사용 할 수 있다. Defalut export function만드는 방법 export default function (data) { return Object.prototype.toString.call(data).slice(8, -1) } Named export function만드는 방법 expor.. 2022. 9. 16.
JavaScript 데이터 자바스크립트 데이터 명세 https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org 기호표시 객체 데이터 객체 데이터를 정의하면 안에 값을 같지만 서로 다른 메모리를 가지기 때문에 다른 객체가 된다. const var1 = {k : 123} const var2 = {k : 123} Object.assign(target, source) source의 내용은 target에다가 덮여씌우고 .. 2022. 9. 15.
JavaScript 클래스 클래스란? prototype을 사용해서 만든 데이터를 클래스라고 한다. 클래스 내부에 있는 변수를 속성 함수를 메소드라고 칭하고 둘다 클래스의 멤버라고 한다. prototype이란? prototype을 통해 메소드를 정의하게 되면 클래스 내부에 단 한개만 인스턴스되고 객체들이 메소드를 콜할때 불러서 사용하게 된다. this this는 자기 자신을 의미한다. 일반 함수는 호출위치에 따라 this 정의 화살표 함수는 자신이 선언된 함수 범위에 따라 this를 정의 normal함수의 호출위치는 heropy이기 때문에 name정의가 되어 있어 함수를 콜하면 Heropy가 잘 출력된다. 하지만, arrow같은 경우에는 선언된 함수 범위이기 때문에 arrow가 된다. arrow는 따로 name을 정의하지 않았기 때.. 2022. 9. 14.
JavaScript 함수 함수 function sum(x, y) { return x + y } arguments 모든 인수를 가지고 있는 객체 데이터 function sum(x, y) { return arguments[0] + arguments[1] } 함수표현 (익명함수) let sum = function (x,y) { return x + y } 화살표함수 익명함수를 화살표함수로 축약해서 사용 할 수 있다. const doubleArrow = (x) => { return x * 2 } 축약형 단순 인수와 리턴만 있는 경우 축약해서 사용 할 수 있다. 아래와 같이 축약해서 쓸 수 있다. 인수가 한개 이면 (x)의 소괄호를 제외해도 된다. const doubleArrow = (x) => x * 2 객체 데이터 반환하는 방법 con.. 2022. 9. 13.
JavaScript 변수 변수 JavaScript는 var, let, const 3가지 변수가 있다. 변 수 변경 가능 레 벨 var 가능 블록 let 가능 블록 const 불가 함수 오른쪽 그림에서 변수가 var라면 var는 함수 레벨에서 정의되기 때문에 console에 undefined가 나온다. 하지만, const, let의 경우는 에러가 나온다. 형 변환 형 변환에 앞서 참과 같은 값과 거짓과 같은 값을 알아볼 필요가 있다. 참과 같은 값은 변수에 정당한 값이 존재하거나 true(boolean타입)을 가지게 된다. 거짓과 같은 값은 변수에 알수 없는 값이 가지거나 false(boolean타입)을 가지게 된다. 참과 같은 값 true, {}, [], 1, 2, 'false', -12, '3.14', ... 거짓과 같은 값 .. 2022. 9. 12.
JavaScript 조건문과 반복 조건문 if 문 조건문 처음은 if로 시작한다. 추가 조건을 넣고 싶으면 else if로 정의한다. 그 외 나머지 모두를 하고 싶다면 else로 정의한다. if (a == 0) { console.log('a is 0') } else if (a == 2) { console.log('a is 2') } else if (a == 4) { console.log('a is 4') } else { console.log('rest...') } switch문 switch(변수)를 넣는다. case로 조건과 로직을 넣는다. break를 붙여줘야 한다. 붙이지 않으면 아래 조건들도 검사하게 된다. defalut는 if의 else와 같은 의미이다. switch(a) { case a === 0 : console.log('a .. 2022. 9. 12.
JavaScript 연산자 JavaScript 타입 확인하기 typeof키워드를 사용해서 데이터 타입을 확인 할 수 있지만 정확하지 않다. console.log(typeof 'hello world') // string console.log(typeof 123) // number console.log(typeof false) // boolean console.log(typeof null) // object console.log(typeof {}) // object console.log(typeof []) // object getType함수를 만들어 확인하여 더 정확하게 타입을 확인 할 수 있다. function getType(data) { return Object.prototype.toString.call(data).slice(8,.. 2022. 9. 12.