본문 바로가기

웹개발/javascript

 (24)
클래스와 상속 그리고 인스턴스오브 (Class & Inheritance &instanceof) 클래스 Class 클래스는 조금 더 연관 있는 데이터를 한 곳에 묶어놓는 컨테이너 같은 역할을 한다. 클래스에는 이름과 나이 같은 속성(fields)과 행동(메서드)이 들어있다. 이렇게 필드와 메서드가 종합적으로 묶여있는 것을 클래스라고 하는 것이다.간혹 메서드는 들어있지 않는 경우도 있는데 그런 클래스를 데이터 클래스라고 한다. 이렇게 관련 있는 변수나 함수들을 묶어놓은 것을 클래스라고 하고 클래스 안에서 내부적으로만 보이는 변수와 밖에서 보일 수 있는 변수들을 나누어서 외부적으로 보이지 않게 하는 것을 캡슐화(encapsulation)라고도 한다. 클래스를 이용해서 상속과 다양성이 일어날 수 있는데 이런 모든 것들이 가능한 것이 객체지향 언어라고 하고 자바스크립트는 객체지향 언어이다. 클래스는 틀, ..
Hoisting(호이스팅), Scope(스코프) Hoisting 어디에 선언을 했는지와는 상관없이 항상 제일 위로 끌어올려주는 것. scope 어떤 변수에 접근할 수 있는지를 정의하는 것. 전역 스코프와 지역스코프로 나뉘며 지역 스코프는 또 함수 스코프, 블록 스코프로 구분한다. const apple = 'red'; function print() { const lemon = 'yellow' console.log(apple); // 'red' } print(); console.log(lemon); //Uncaught ReferenceError: lemon is not defined 전역 스코프 변수 변수가 모든 함수에 속하지 않고 {}괄호안에도 들어있지 않다면 전역 변수라고 한다. 전역 변수를 선언하면 자바스크립트 코드 어디서든 불러서 쓸 수 있다. 전..
html에서 자바스크립트 불러오기 - script async 와 defer의 차이점 HTML에서 자바스크립트를 포함할 때 어떻게 포함하는 것이 좋은지 async와 defer의 차이점을 알아두면 효율적으로 사용할 수 있다. head 안에 포함되어 있을때 html 읽기(title까지) - script 다운로드 - script 실행 - 나머지 html 읽기 먼저 사용자가 html 파일을 다운로드하였을 때 브라우저는 그것을 한줄한줄 분석한다. 그러다가 스크립트를 만나면 그 스크립트를 다운로드하여야 된다고 읽기 때문에 html을 파싱 하는 것을 잠시 멈추고 필요한 자바스크립트를 서버에서 다운로드하여서 이것을 실행한 다음 html을 다시 파싱 한다. 이 과정에서 만약 자바스크립트 파일이 크기가 큰 파일이라면 다운로드하는 시간이 길어지고 그동안 html이 파싱 되지 못하고 브라우저에 보이지 않는 불..
[반응형 웹의 기초] 이벤트 추가하기 addEventListener, 스크롤바 만들기 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. addEventListener( ) 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 일반적으로 Element, Documnet, Window 지만 이벤트를 지원하는 모든 객체를 대상으로 할 수 있다. target.addEventListener(type, listener); type: 반응할 이벤트 유형을 나타낸다. (대소문자 구분) listener: 여기에는 함수가 들어간다 안에 함수를 바로 작성해주어도 되고 함수 이름을 넣어주고 함수는 따로 작성해주어도 된다 window.addEventListener('click', function () { new Character(); }); . function clic..
자바스크립트 Date 오브젝트 자바스크립트의 ES5기반으로 한 기본 개념들입니다. 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. Date 오브젝트 시간 값이라고도 불리는 Date오브젝트는 연월일, 시분초, 밀리초를 제공한다. 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리 초로 나타내고있다. new Date( ) var obj = new Date(2020,1,1,1,1,1,1); console.log(obj.toLocaleString()); //2020. 2. 1. 오전 1:01:01 Date 인스턴스를 생성한다. 파라미터의 값을 인스턴스의 프리미티브 값으로 설정한다. 파라미터를 작성하지 않으면 현재시간이 설정된다. var obj = new Date(2020, 06);..
자바스크립트 Global 오브젝트 자바스크립트의 ES5기반으로 한 기본 개념들입니다. 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. Global 오브젝트 Global 오브젝트 프로퍼티 console.log(NaN); //NaN console.log(Infinity); //Infinity console.log(undefined); //undefined NaN, Infinity, undefined 상수개념으로 사용된다. parseInt( ) console.log(parseInt(123.23)); //123 console.log(parseInt("-123px")); //-123 console.log(parseInt("123px777")); //123 console.log(parseInt(" 123.5 ")..
자바스크립트 Math 오브젝트 자바스크립트의 ES5기반으로 한 기본 개념들입니다. 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. Math 오브젝트 수학적인 상수와 함수를 위한 속성과 메서드를 가진 오브젝트이다. Number 자료형만 지원한다. 다른 오브젝트들과 다르게 생성자가 아니라서 모든 속성과 메서드는 정적이다. abs( ) console.log(Math.abs(-123)); //123 console.log(Math.abs(-Infinity)); //Infinity 주어진 숫자의 절댓값을 반환한다. abs()는 Math의 정적 메서드로 사용자가 생성한 Math 오브젝트에 메서드로 호출할 수 없고 항상 Math.abs()를 사용해야 한다. (Math는 생성자가 아니다) floor( ) conso..
자바스크립트 Boolean 오브젝트 자바스크립트의 ES5기반으로 한 기본 개념들입니다. 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. Boolean 오브젝트 불리언 값을 감싸고 있는 객체이다. 값이 없거나 0, -0, null, false, NaN, undefined, 빈 문자열("")은 false로 인식되고 문자열 "false"를 포함한 그 외의 모든 다른 값들은 true로 인식된다. new Boolean( ) var list = [undefined, null, 0, "", false] for(var i = 0; i

티스토리툴바