티스토리

Step by Step

검색하기

블로그 홈

Step by Step

chanjin98.tistory.com/m

짤진이 님의 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

모던자바스크립트 Deep Dive - 6장(데이터 타입) 자바스크립트의 모든 겂은 데이터 타입을 갖는다. 총 7개의 데이터 타입을 제공하는데 이를 원시 타입과 객체 타입으로 분류할 수 있다. 원시 타입 숫자 타입 - 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열 타입 - 문자열 불리언 타입 - 논리적 참과 거짓 undefined 타입 - var 키워드로 의도적으로 명시할 때 사용하는 값 symbol 타입 - es6에서 추가된 7번쨰 타입 객체 타입 객체, 함수, 배열 등 숫자 1과 문자열 1은 완전히 다른 의미를 가지기 때문에 개발자가 의도하여 타입을 구별해야 한다. var integer = 10; var double = 10.12; var negative = -20; var binary = 0b01000001; //65 var octal = .. 공감수 0 댓글수 3 2024. 2. 11.
모던자바스크립트 Deep Dive - 5장(표현식과 문) 값은 식이 평가되어 생성된 결과이다 변수는 하나의 값을 저장하기 위해 확보한 매모리 공간 자체, 그 메모리 공간을 식별하기 위해 붙인 이름 따라서 변수에 할당되는 것은 값이다. 10 + 20; //30 var sum = 10 + 20; sum 변수에 할당되는 것은 30 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. 표현식은 값으로 평가될 수 있는 문이다. 즉 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. var x = 1 + 2; x + 3; 연산자 좌우에는 숫자가 위치해야하지만 숫자 값으로 평가될 수 있는 표현식이라면 사용 가능하다. 문은 프로그램을 구성하는 기본 단위이자 최소 실행단위이다. 문의 집합으로 이루어진 것이 프로그램이며 문을 작성하고 순.. 공감수 0 댓글수 0 2024. 2. 10.
모던자바스크립트 Deep Dive - 4장(변수) var score; console.log(score); //undefined 선언 후 초기화 => 변수를 사용하려면 항상 선언이 필요하다. 선언하지 않은 식별자에 접근하면 ReferenceError(참조에러)가 발생한다. console.log(score); var score; //undefined 변수 선언은 런타임 이전에 먼저 실행한 후 평가과정이 끝난 후 선언문을 제외한 소스코드를 실행한다. 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고 한다. var value = 80; 변수선언을 한 문장으로 단축해도 선언, 할당 등 두가지로 나누어진다. 주의할 점으로 할당과 선언은 실행되는 시점이 다르다. console.log(newScore); var n.. 공감수 0 댓글수 0 2024. 2. 8.
Javascript - Web API .log(), .warn(), error(), dir() - log : 일반 메세지 - warn : 경고 메세지 - error : 에러 메세지 - dir : 속성, 메소드를 볼 수 있는 객체를 출력 console.log(document.body); console.warn(document.body); console.error(document.body); console.dir(document.body); - count() - countReset() console.count('a') // a : 1 console.count('a') // a : 2 console.countReset('a') console.count(‘a’) // a : 1 .time(), .timeEnd() 콘솔에 타이머가 시작해서 종료되기까.. 공감수 0 댓글수 1 2023. 11. 21.
Javascript 이벤트(addEventListener) index.html 제출 초기화 main.js const formEl = document.querySelector("form"); const inputEls = document.querySelectorAll("input"); inputEls.forEach((el) => { el.addEventListener("focus", () => { formEl.classList.add("active"); }); el.addEventListener("blur", () => { formEl.classList.remove("active"); }); el.addEventListener("change", (evnet) => { console.log(event.target.value); }); }); formEl.addEve.. 공감수 0 댓글수 0 2023. 11. 18.
Javascript 이벤트(추가, 삭제, 객체, 옵션, 버블링, 위임) addEventListener() 대상에 지정한 이벤트가 발생했을 때 함수(Handler)가 호출된다 const parentEl = document.querySelector(".parent"); const childEl = document.querySelector(".child"); parentEl.addEventListener("click", () => { console.log("parent!"); }); childEl.addEventListener("click", () => { console.log("child!"); }); removeEventListener() 대상에 지정한 이벤트를 제거한다. removeEventListener를 사용할 때 콜백 함수 부분에 따로 설정한 함수가 들어가지 않으면 그.. 공감수 0 댓글수 2 2023. 9. 9.
DOM(Node, Element, 생성 , 검색, 수정)-(1) DOM(document object model) DOM이란 HTML문서를 객체로 표현한 것으로 JS에서 HTML을 제어할 수 있게한다. 아래 코드는 h1 태그의 텍스트 값을 콘솔창에서 보여주는 코드이다. const element = document.querySelector("h1"); console.log(element.textContent); DOM API Node vs Element Node : HTML요소, 텍스트, 주석 등 모든 것을 의미 Element : HTML 요소를 의미 이제부터 나오는 js 코드들은 아래 index.html을 바탕으로 적용된다. 1 2 console.log(parent.childNodes)는 자식 노드를 확인하므로 5개의 값을 가진다. console.log(parent.c.. 공감수 0 댓글수 0 2023. 9. 6.
비동기(Callback, Promise, Await, Async) Callback 함수는 이해하기가 정말 까다로웠다 함수 안에 함수를 호출하는데 작동 순서, 원리등을 이해하는데 꽤 오랜 시간이 걸렸다. 두번째 예시는 주로 강의에서 설명하던 방식인데 함수안에 저런 형태의 함수는 한번에 이해하기 힘들어서 첫번째 예시로 다시 만들어서 생각해보니 이해하기 훨씬 쉬웠다. const add = (a, b, cb) => { return cb(a + b); }; const say = (val) => { return console.log(val); }; add(3, 4, say); add 함수 안에 a,b,cb 인자를 받아주었는데 cb는 함수 인자이다. 작동 순서는 add(3,4,say)로 예시를 들면 3,4의 합을 say함수 인자로 받는다. 그 후 say 함수에서 console.lo.. 공감수 0 댓글수 2 2023. 9. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.