JavaScript (39) 썸네일형 리스트형 JavaScript- 변수와 스코프 var와 let/const의 차이 1. 변수가 유효한 시점의 차이 console.log(title); // undefined var title = '강아지'; 위 코드 실행시 에러가 발생하지 않는다. (로그는 undefined가 찍힌다. 선언부만 호이스팅되므로) console.log(title); // error let title; 위 코드는 실행시 reference에러가 발생한다. let으로 선언된 변수는 에러를 발생시켜서 문제 해결을 쉽게한다. 2. 중복선언 가능 여부의 차이 var title = '강아지'; var title = '고양이'; 위 코드는 에러가 발생하지 않는다. 중복선언 가능한 것이 왜 문제되냐면, 이 두 줄의 코드 사이에 수많은 코드가 끼어있다는 가정 하에, 두 값 모두 사용되어야하.. JavaScript - 데이터타입, 연산자 자바스크립트의 동작 원리 데이터 타입의 특징과 종류 데이터 타입의 특징 자바스크립트는 다른 프로그래밍 언어에 비해서 데이터 타입이 유연하다. 상황에 따라 데이터 타입이 변할 수 있다는 의미이다. 한 변수에 여러 데이터 타입의 값을 할당할 수 있기는 하지만, 값마다 데이터 타입이 있긴 하다. 데이터 타입의 종류 기본형(Primitive Type) Number String Boolean Null Symbol BigInt 참조형(Reference Type) Object Symbol 정의하기 // Symbol('변수의 설명'); const user = Symbol(); const user = Symbol('this is a user'); Symbol이 된 변수는 그 어떤 값과 비교해도 false가 된다. use.. JavaScript - 모던 자바스크립트 정의 모던 자바스크립트의 정의 ECMAScript 자바스크립트라는 프로그램언어의 표준 명세서. 자바스크립트도 다른 언어들처럼 유용한 기능이 추가되고, 아쉬운 부분이 보완되어가고있다. 이러한 이력을 Ecma international이라는 국제 표준화 기구에서 관리하고 있다. JavaScript를 사용할 때 준수해야하는 규칙, 세부 사항을 Ecma-262라는 문서로 관리하게 되는데, 이 문서가 EcmaScript이다. 1997년 Ecma1, 줄여서 ES1이 생겨났고, 이후 업데이트가 있을 경우 ES2, ES3 처럼 뒤의 숫자를 늘리기 시작했다. 2015년, ES6가 생긴 이후부터는 1년에 한 번씩 업데이트를 하기로 했다. ES6의 공식적인 버전 명칭은 연호를 붙여서 ECMAScript 2015라고 부른다. ES6.. JavaScript - HTTP 메소드 HTTP 메서드란, 클라이언트와 서버 사이에 이루어지는 요청과 응답데이터를 전송하는 방식을 말한다. 서버에 주어진 리소스에 수행하길 원하는 행동, 서버가 수행해야할 동작을 지정하는 요청을 보내는 방법이다. 주요 종류는 총 9가지이다. 주요메서드 5가지 GET 리소스를 조회한다. 오직 데이터를 받기만 한다. 데이터는 쿼리스트링을 통해 전달할 수 있다. 쿼리스트링 외에 메세지 바디를 통해 데이터를 전달할 수도 있지만 권장하지 않는다. post도 데이터 조회시 사용될 수 있지만, get메서드는 캐싱이 가능하기때문에 get을 사용하는 것이 좋다. POST 전달한 데이터를 처리/생성을 요청하는 메서드. 메시지바디를 통해 서버로 요청데이터를 전달하면 서버는 요청 데이터를 처리하여 업데이트한다. 전달된 데이터로 신규.. JavaScript - this 자바스크립트에서의 this는 다른 언어와 조금 다르게 동작한다. strinct mode인지 아닌지에 따라 일부 차이가 있다고 하지만 이 부분은 제외하고 아래의 경우가 존재한다. 1. 전역객체(window)객체를 의미 함수의 외부에서 사용될 때 객체의 값으로 들어있는 함수가 아닌, 일반 함수의 내부에서 사용될 때 function getThis(){ console.log(this); // window객체가 출력된다. } console.log(this); // window객체가 출력된다. 2. 함수를 호출한 객체를 의미 객체의 값으로 들어있는 함수내에서 사용될 때 function getFullName(){ return `${this.first} ${this.last}`; // this는 객체 ann이다. } .. JavaScript - 이벤트 핸들링 이벤트 핸들러 등록 방법 dom요소에 접근 후, onclick 프로퍼티를 준다. html태그에 onclick속성을 준다. addEventListener를 통해 이벤트를 등록한다. 1. dom요소에 접근 후, onclick 프로퍼티를 준다. const btn = document.querySelector('.login-btn'); btn.onclick = function(){ console.log("login"); } 이 경우, 기존 onclick프로퍼티에 있던 값을 덮어쓴다. 기존값을 그대로 두고 추가만 하는 방법은 3번이고, 아래와 같다.(가장 권장되는 방법임!) 3. addEventListener를 통해 이벤트를 등록한다. function login(){ console.log("login"); } bt.. JavaScript - 노드 선택 태그 선택하기 id로 태그 선택하기 document.getElementById('id'); 존재하지 않는 아이디는 undefined가 아니라 null 이다. class로 태그 선택하기 document.getElementsByClassName('className'); className을 가진 요소들이 유사배열(HTML Collection)에 담겨 출력된다. HTML Collection은 대괄호로 접근이 가능하고 for of문, length등 사용 가능하지만 배열의 메서드는 사용할 수 없다. 배열에 담긴 순서는 태그의 깊이와 상관없이 위에서 아래로 출력된다. 요소가 하나인 클래스명에 접근해도 HTML Collection으로 조회된다. 존재하지 않는 클래스명에 접근시 비어있는 배열이 조회된다.( null이 아.. JavaScript - 변수, 자료형 등 기본 문법 자바스크립트는 처음에는 웹개발용으로 사용되는 언어였으나 현재는 VR, AR, 블록체인, 모바일 등의 개발도 가능해졌다. 2015년 발생한 업데이트 이후 사람들이 좋아하게 되었다고 한다. 기본 문법 세미콜론 한 줄에 한 문장씩 입력하는 경우, 자바스크립트는 알아서 맨 뒷줄에 ';' 세미콜론을 찍어준다. 하지만 한 줄에 두 문장이 오게될 경우 세미콜론을 붙여서 문장을 구분해줘야한다. console.log('A') console.log('B') console.log('C')console.log('D') // 에러발생 주석 사용 목적 어떤 의도로 코드가 작성되었는지 설명할 때 구현한 코드가 어떤 동작을 하는지 기록할 때 한 줄 주석 // const a = 'A'; 여러 줄 주석 /* const num = 30;.. 이전 1 2 3 4 5 다음
