생활코딩 11

[JavaScript]객체지향 - 표준 내장 객체의 확장

표준 내장 객체란? 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문이다. 결국 프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다. 자바스크립트는 아래와 같은 내장 객체를 가지고 있다. Object Function Array String Boolean Number Math Date RegExp [Regular Expression(정규표현식)] 따라서 표준 내장 객체와 상응되는 것은 사용자 정의 객체라 볼 수 있다 배열의 확장 첫번째 ..

[JavaScript] 상속(inheritance), 프로토타입

상속이란? 객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해 준다. 쉽게 생각하기 위해 예제를 들어보자 객체는 하나의 컨테이너라 생각해 본다. 그 안에는 변수, 메소드가 포함되어 있다. 이때 객체의 특성을 통해 기존 객체를 물려받은 새로운 객체를 만들 수 있다. 이때 물려 받은 아들 객체(새로운 객체)는 부모 객체(원본 객체)와 동일한 기능을 가지게 된다. 아들 객체(새로운 객체)는 부모 객체(원본 객체)의 특정 기능은 제거, 추가하여 자신의 맥락에 맞게 재활용하게 된다.이러한 과정이 상..

[JavaScript] this(함수,메소드,생성자)

this this는 함수 내에서 함수 호출 맥락(context)[사용하는 상황에 따라 변화하는 가변적인 것을 맥락이라 한다.]를 의미한다. 즉, 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다. 📢함수 안에서 this라는 keyword는 그 함수가 소속되어있는 그 객체를 가르킨다. 즉,this는 메소드가 속해있는 객체를 가르키도록 약속된 특수한 예약어라고 보면된다. 쉽게 코드로 알아보자 var yoon = { name = 'yoon', first = 10, second = 20, sum:function(){ return this.first+this.second; }/..

객체 지향 프로그래밍 (은닉화,캡슐화,인터페이스)

객체지향 프로그램이란? 객체지향 프로그래밍(Object Oriented Programming)은 좀 더 나은 프로그래밍을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것이다. 이 객체들을 마치 레고 블록처럼 조립해서 하나의 프로그램을 만드는 것이 객체지향 프로그래밍이라고 할 수 있다. 구체적으로 알아보자면, 하나의 객체 안에는 그 객체가 가지고있는 취지, 기능 등과 연관되어있는 변수와 메소드를 객체 안에 가둬두고 서로 연관성이 없는 다른 로직과 구분 짓는 것이다. 객체지향 프로그램을 만들 때 중요한 요소들을 알아보자 1. 문법 객체지향을 편하게 사용할 수 있도록 언어가 제공하는 기능을 익히는 것이 중요하다. 문법을 이해하고 숙지해야 객체 생성..

Language 2021.10.31

[JavaScript] arguments

arguments 함수에는 arguments라는 객체가 존재한다. 함수 안에서 여러가지의 인자의 정보를 담고있는 객체이다. 사용법이 매우 배열과 유사하기 때문에 유사배열이라 볼 수 있다. 즉, 함수를 이용하는 사람이 매개변수에 집어 넣는 값을 의미한다. function sum(){ //현재 인자 값이 존재하지 않는다. 그 이유는 인자가 들어오는 수를 예측 할 수 없기 때문이다. //함수 안의 arguments객체 안에 존재하는 값들을 꺼낸 후 sum에 더해 return해주면 결과를 알 수 있다. var _sum = 0; for(var i = 0; i < arguments.length; i++){ document.write(i+' : '+arguments[i]+' '); _sum += arguments[i..

[JavaScript] 값으로서의 함수와 콜백

값으로서의 함수 함수는 객체이다. 일종의 값이라고 볼 수 있다. 거의 모든 언어가 함수를 가지고 있다. But, JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다. ※ function a( ){ }를 다른 방식으로 표현 하면 var a = function() {}(변수 a의 값은 함수이다.)이라고 표현할 수 있다. a = { b:function(){ //여기서 함수는 값이고 객체에 저장될 수 있다. /* key = b ->변수와 같은 역할을 해주고 있다. value = function(){} key값을 속성,property라 부른다. 그리고 value값을 메소드라 부른다. 즉, 객체 안에 정의되어있는 함수를 메소드라 부른다. */ } } 상단의 코드의 key값을..

[WEB]API & UI & Interface

API: Application Programming Interface API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다 사전에서의 API 출처[위키피디아] 즉, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있습니다. 기반이되는 시스템이 우리에게 제공한 interface를 응용해서 소프트웨어를 만드는 것입니다.(code의 형태를 띄고있는 interface.) ex) 응용프로그래밍 개발자가 alert이라는 명령어를 프로그래밍해서 웹브라우저에게 전달하면 우리는 alert..

Front-end 2021.10.23

[JavaScript] 함수[재사용성,입력(input), 출력(output)]

함수: 상자 함(函) 셈 수(數) function: 기능 함수란? 함수는 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다 재사용성이란? 1.내가 작성한 코드를 여러 맥락에서 다시 사용 할 수 있도록 도와준다. 2. 코드 작성 시간을 단축 할 수 있다. 3. 코드 자체의 변화가 생기면, 모든 코드가 동시에 변화가 일어난다. 4. 코드의 가독성 증가 즉, 유지 보수의 용이한 특성을 가졌다. 함수(function)의 기본 문법틀 function 함수명([인자...[,인자]]){ 코드 return 반환값 } function numbering(){ document.write(1); } //함수를 정의(선언)함, (변수를 선언하듯) numbering(); //함수를 실행. 괄호()가 있기..

[JavaScript]반복문(while문 ,for문) 제어와 중첩

반복문 Loop,iterate 대표적인 문법으로 while문과 for문이 있다.(~하는 동안 반복적인 작업을한다.) while문 while의 문법(하단) while(조건){ 반복해서 실행할 코드 } 조건에 boolean값이 들어가야한다. 조건의 값이 true인 동안에 중괄호 사이의 반복하고자하는 코드가 false값이 될 때까지 반복한다. 무한루프(무한반복) 즉, 어떠한 반복이 실행될때, 끊임 없이 반복되어 컴퓨터에게 부담을 주는 상황 이를 해결하기 위해 반복문이 적절한 상황에서 false가되는 것이 중요하다. var i = 0; while(i < 10){ document.write("Codinglog "+ i +" "); i = i + 1; } while의 3가지 조건 1.초기화 var i = 0; 2...

[JavaScript]조건문(if else문,변수와 비교연산자, 논리 연산자)

조건문 조건문과 Boolean은 아주 밀접한 관계를 가지고 있다. 조건문이란 무엇일까? 조건문은 주어진 조건에 따라서 application을 다르게 동작하도록 하는 것. -우리가 만드는 프로그램을 더 좋은 상태로 만들어준다. 1. if문 //if 뒤의 괄호에는 Boolean의값 true,flase만 들어갈 수 있다. if(true){ alert('result: true'); } //if 뒤의 true가 나왔기 때문에 중괄호 안의 값을 출력한다. if(false){ alert('result: true'); } //if뒤에 false가 나왔기때 중괄호 값을 출력하지 않는다. //조건문과 boolean(데이터타입)은 아주 밀접한 관계를 가지고있다. 예제 if(true){ alert(1); alert(2); a..