본문 바로가기

FrontEnd/JavaScript9

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 정규표현식 정규표현식 문자열을 검색하고 대체하는데 사용 가능한 일종의 형식 언어다. 간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 빠르게 수행한다. 정규식 패턴이 수행 내용과 매치가 잘 안되어 가독성이 많이 떨어지기 때문에 어렵다. 정규표현식의 역할 문자 검색 문자 대체 문자 추출 정규표현식 문법 // 생성자 new RegExp('표현', '옵션') new RegExp('[a-z], 'gi') // 리터럴 /표현/옵션 /[a-z]/gi 정규표현식 예제 생성자 방식 const str = ` 010-1234-5678 thesecong@gmail.com https://www.omdbapi.com/?apikey=7035c60c&s=frozen The quick brown f.. 2022. 9. 17.
JavaScript Object Notation JSON이란? 자바스크립트 객체 표기법으로 경량 데이터를 송수신하는 용도로 많이 사용한다. 자바스크립트에서 사용하는 JSON형태는 좀 다를 수 있다. key는 따옴표를 쓰지 않고 그대로 쓴다. 특수기호가 있는 경우에만 단일 따옴표를 사용한다. JSON파일 가져다 사용하기 import myData from myData.json 자바스크립트 속성을 JSON타입으로 바꾸기 const json = JSON.stringify(user) JSON타입을 다시 자바스크립트 속성으로 바꾸기 const attr = JSON.parse(json) localStorage와 sessionStorage localStorage는 반영구적인 웹 데이터 저장공간이다. sessionStorage는 세션이 끝날때 사라지지만 localSt.. 2022. 9. 16.
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 함수 함수 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.