목록끄적끄적 개발 지식이야기/javascript (12)
비앤비 성공기
1. DOM이란? DOM(Document Object Model)이라고 불리우며 개요로하자면, Javascript를 이용해서 웹브라우저의 표시되는 문서를 동적, 프로그래밍적으로 제어할 수 있도록 해주는 인터페이스이다. DOM은 여러가지 의미를 가지고 있다. 텍스트 파일로 만들어져 있는 웹문서를 브라우저에 렌더링 하려면 웹문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는것을 DOM이라 한다. 웹페이지를 구성하고 있는 문서, 그 문서에 있는 다양한 구성요소들이 있고(,,등) 이런 요소 하나하나를 일종의 객체로 만들어 javascript가 제어 할 수 있도록 한 것이 DOM이다. 모든 요소와 요소의 속성,텍스트를 각각의 객체로 만들고 이들 객체를 부자관계로 표현할 수 있는 TREE구조로 변경..
javascript에서 Scope(유효범위)라는 개념은 너무 굉장히 중요하다. 그렇다면 왜 중요할까? Scope(유효범위) 란 어떤 변수들에게 접근할 수 있는지를 정의하고 javascript 뿐만 아니라 모든 프로그래밍 언어 코드의 가장 기본적인 개념의 하나이다. javascript의 Scope(유효범위)는 다른 언어의 유효범위와는 다르다. Scope(유효범위) 개념은 쉬운 내용이면서 쉽게 이해하지 못할 함정에 빠지기도 한다. 기본이 탄탄해야 된다는 말이 있듯이 기본이 되야하는 Scope(유효범위)에 대해 알아보도록 하자. Scope(유효범위) Scope를 직역하면 영역,범위라는 뜻이다. 하지만 프로그래밍 언어측면에서 유효범위는 어느 범위까지 참고하는지, 변수와 매개변수(parameter)의 접근성과 생..
정말 어려운 내용이다. 아주 거물급 내용이자 javascript의 객체 지향을 지탱하고 있는 핵심적인 개념이고, javasript를 일반적인 객체 지향 언어와 구분하는 중요한 개념이다. 일단 들어가기 앞서 몇가지 알아보고 들어가겠다. prototype이라는것은 원형이라는 뜻이다. prototype이라는 것을 통해서 javascript는 '상속'이라는 개념을 제공한다. prototype의 로직의 대해서 예제를 보며 확인하도록 하자. function Ultra(){} Ultra.prototype.ultraProp = true; function Super(){} Super.prototype = new Ultra(); function Sub(){} Sub.prototype = new Super(); let o ..
class는 객체를 생성하기 위한 템플릿이다. class는 데이터와 이를 조작하는 코드를 추상화한다. ES6에서 class라는 문법이 추가 되었고, 원래 prototype을 이용하여 만들어졌지만 기존의 기반으로 클래스를 만드는것보다 명료하게 클래스를 만들수 있게 되었다. Class 정의 및 표현 방법 Class는 사실 함수입니다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 선언 class 표현식 두 가지 방법을 제공합니다. 1. Class 선언 class를 정의하는 한 가지 방법은 class 선언을 이용하는 것이다. class를 선언하기 위해서는 클래스의 이름과 함께 class 키워드를 사용해야 합니다. class Person { constructor(name, a..
Object(객체)란 무엇인가? Javascript는 객체기반의 스크립트 언어이고,Jvascript를 이루는 거의 모든것은 '객체'이다. 객체는 여러가지 속성을 하나의 변수로 저장 할수 있도록 하는 데이터 타입이고 key,value 값을 저장 할 수 있다. //구문 let user = new Object(); //Object constructor(생성자) let user = {} //Object literal 구문 이름 : john 나이 : 29 key: '이름', '나이' value: 'john', 29 위와 같은 정보를 Javascript 객체로 표현하면 아래와 같이 된다. let user = {name:"john", age:29}; 객체의 특징 객체는 중괄호 표기를 이용하여 만들수 있다. 객체는 각..
javascript에서 기본적인 string에 대해 알아보자 String이란 무엇인가? string 이란 다른 말로 문자열 이라고 표현되며, 컴퓨터 프로그래밍 형식 언어 이론에서 기호의 순차 수열이라고 불리우며, 그리고 문자열이 소스코드에 보이면 그 문자열을 string literal 이라고 일컫는다. 문자열 선언 방법 javascript에서 문자열을 선언하는 방법이 크게 3가지가 있다. 문자열 리터럴 String 전역객체 템플릿 리터럴 //문자열 리터럴 const str = "문자열"; //문자열 리터럴 생성 const text1 = "text1"; //string 전역객체 const strObj = new String(str); // 문자열 객체 생성 const string = String(123);..
앞에서 이야기 했던 증감 연산자에 대해 알아보았고, 나를 포함한 다른 사람들이 헷갈려 하는 부분이 많아 javascript의 수학적 표현에 대해 알아보려고 한다. let num= 1; num++; console.log(num); // 2 위에 예제에서 보았든 증감 연산자에 의해 +1이 더해져 2가 할당된다. num++; -> num=num+1; 원래 저 연산의 표현은 연산을 할당하고, 값이 1 증가한다 지만, 연산식이 없으니 변수에 바로 1을 더해준다. 더 나은 이해를 돕기위해 다른 예제를 봐보자 let num= 1; let newNum = num++; console.log(num); // 2 console.log(newNum); // 1 위에 값에선 num=2 ,newNum=1 이라는 값이 할당된다. ..
1. 대입 연산자 대입 연산자는 등호(=)를 이용하여, 우변에 있는 피연산자끼리 연산자로 계산한 값을 좌변에 대입하는 연사자를 말한다. 예를 들어, c=a+b라는 수식이 있다면, a와 b를 더한 값을 대입 연산자(=) 를 이용하여 c에 대입하는 것이다. 연산자 표현 설명 += x+=10 x=x+10 -= x-=10 x=x-10 *= x*=10 x=x*10 /= x/=10 x=x/10 %= x%=10 x=x%10 대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합방향은 오른쪽->왼쪽이다. 예를들어 A=B 수식에서 =의 역할은 B값을 A에 대입하라 이뜻이다. A+=B수식은 A+B의 값을 A에 더하라는 뜻이다. 2. 증감 연산자 증감 연산자는 피연산자를 1씩 증가 혹은 감소 시킬..