오리엔테이션

: 자바스크립트는 브라우어 위에서 돌아가는 웹브라우저를 제어하기 위한 언어이다.

: 그런데 탈 웹브라우저 흐름을 통해 자바스크립트와 브라우저를 분리하여 생각할 수 있게 되었다.

: 자바스크립트는 웹서버에서 돌아갈 수 있게 되었고 이러한 기능을 하는 node js 가 있다.

: 원래 웹서버는 PHP, JAVA, PYTHON...을 보통 사용했었다.

: Node js를 통해 자바스크립트가 서버에서 사용됩에 따라 탈웹이 가능하게 되었다,

: Google Apps Script가 그 예이다.

: 언어란 무엇인가?

: 의사소통을 위한 약속

: 사용자 - 컴퓨터 간의 문법

: 환경이란?

: 언어를 사용하는 대상이 환경이다.

: 환경(웹부라우저, Node.js, SpreadSheet...)에 따라 명령어가 달라진다.

: 환경에 따라 할수있는 일이 다르고 명령어가 달라진다.


실행과 실습

: 환경으로는 크롬 웹브라우저를 사용할 것이다.

1. html 파일을 실행시켜 실행시키는 방법

: 브라우저에서는 html위에서 자바스크립트가 돌아간다.

2. 크롬에서 F12 개발자 도구로 들어간다.  이 Console 창에서 간단한게 한줄로 실행시키는 것들을 실행해볼 수 있다.

: 도구(tool)의 선택

: Sublime Text를 사용할 것이다.

: IDE는 통합개발도구이다. Sublime Text는 텍스트 에디터이다.

: 좋은 도구를 선택하는 것은 중요하다.

: 공사를 할 때 포크레인을 쓸것인지, 삽을 쓸것인지를 생각해야 한다.

: 신경쓰지않으면 모른다.

: 상황에 따라 다른 도구를 사용해야 한다.


숫자와 문자

: 따음표 안에 있지 않는 숫자는 숫자로 생각한다.

: 문자를 표현할 떄 작은 따음표 사이 혹은 큰 따음표 사이에 표현해야 한다.

: \' 혹은 \" 은 '와 "를 나타내는 문자이다.

: \ 뒤에 나오는 문자하나는 특수기호가 아니라 그냥 정보로 취급된다. (escape)


typeof 변수  : 타입을 출력하는 함수

문자열.indexOf(문자) : 해당 문자가 문자열에서 몇번째 인덱스인지 출력한다


변수

<var 변수명> 을 통해 선언한다.

주석

: 두가지 표시 방법이 있다.

// 내용

/* 내용 */

줄바꿈과 여백

 ;(세미콜론) 은 명령어의 끝을 나타낸다.

비교

== 동등연산자이다.

: 1=="1" true

: 버그가 발생될 여지가 많다.

: 1을 true로 본다.

=== 엄격한 동등 연산자이다.

: 1==="1" false

: 이것을 사용하자!

: 1을 true로 보지 않는다.

: 무조건 같은것만 같다

* undefined : 값이 없다

: 프로그래머가 의도하지않은 상황

: false 이다

* null : 값이 없다

: 프로그래머가 의도적으로 설정한 상황

: false 이다


조건문

if(조건){
    내용
} else if(조건){
} else{
}


반복문

while(조건){
    내용
}

for( var i =0 ; i< 10; i++){
    내용
    break; 혹은 continue가 사용됨
}


함수

1. 함수정의

function 함수명 ( [인자...[,인자]] ){
    코드
    return 반환값
}

함수명()

2. 함수변수정의

변수명 = function 함수명 ( [인자...[,인자]] ){
    코드
    return 반환값
}

변수명()

3. 익명함수

(function 함수명 ( [인자...[,인자]] ){
    코드
    return 반환값
})()


배열

정의

var 변수명 = [맴버,맴버...];

맴버 호출

변수명[0] 변수명[1] ...

추가

하나 넣기

 변수명.push(맴버)

 배열 넣기

 변수명.concat([맴버,맴버...])

 첫번째 원소로 넣기

 변수명.unshift(맴버)

 제거 후 넣기

 변수명.splice(Index, Index부터 삭제할 수, 맴버,맴버...)

제거

변수명.pop()

정렬

변수명.sort()
변수명.reverse()


객체

: 데이터를 담아내는 컨테이너로써의 객체를 설명함

선언

var 변수명 = [key:value, key:value...]

호출

1. 변수[key]

2. 변수.key

반복문

: 배열과 달리 순서가 없다고 생각해야함.

for(key in 변수명){

내용 ex) 변수명[key]
}

객체

: 다양한 것들을 넣을 수도 있음

var 변수명 = {

변수1 : {key:value,key:value...},

변수2 : function(){

this.변수1 // 변수1을 가리키게됨.

}

}


모듈

: 프로그램을 구성하는 로직을 재사용 할 수 있는 단위로 재구성해서 띄어내는 것

: 부품화 하는 것을 모듈화라고 함.

: 방법중 하나가 별도의 파일로 만드는 것이다.

: 순수한 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지 않는다.

: 환경마다 모듈화 하는 방법이 다르게 제공되고 있다.

웹환경 ex)

<head>

<script src="greeting.js"></script>

</head>

Node.js

var circle = require(URL);

라이브러리

: 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드 집합

: 좋은 라이브러리를 사용하는 것은 중요하다


정규표현식 in js

: 크게 두가지의 사용 단계로 이루어진다

1. 컴파일 : 패턴을 찾는 것

2. 실행 : 구체적인 작업을 하는 것

컴파일

1. 정규표현식 리터럴 (아래 두가지 모두 같은 방법이다.)

var pattern = /a/;

=> /문자/ 가 내가 원하는 문자라는 것을 알려줌

var pattern = /a./;

=> a+문자 하나를 찾는 것임.

2. 정규표현식 객체 생성자

var pattern = new RegExp('a');

=> a 가 내가 원하는 문자라는 것을 알려줌

실행

: 추출할 때 사용한다 (추출)

: 존재하는지 확인할 때 사용한다 (test)

: 치환할 떄 사욯안다. (치환)

추출 : RegExp.exec()  

pattern.exec(문자열) : pattern에 설정된 문자를 찾아줌

Test : RegExp.test()

pattern.test문자열) : pattern에 설정된 문자가 있으면 true, 없으면 false

치환

String.match(패턴) : 패턴에 해당하는 것이 있으면 문자열 반환, 없으면 null

String.replace(패턴,문자열) : 패턴에 해당하는 문자열만 설정한 문자열로 치환

정규표현식 옵션

: 중복가능하다 ex) /a/ig

i : 대소문자를 구분하지 않음

Ex) var pattern = /a/i

g : 패턴에 해당되는 중복된 모든 문자열 반환

Ex) var pattern = /a/g


ex)

 var pattern = /(\w+)\s(\w+)/g

    \w는 a-z,A-Z,0-9 를 나타내고 +는 한글자 이상, \s는 스페이스

str.replace(pattern, "$2, $1")

2번째 괄호와 첫번쨰 괄호를 바꾼뒤 치환한다라는 뜻


함수

유효범위

function(){
}

: 위의 중괄호안에서만 지역변수이고

if(){} 나 for(){}

: 의 중괄호는 변수의 유효범위를 가르지 못한다.

유효범위 시점

: 해당 함수가 정의될 때의 변수 기준으로 변수를 책정한다


값으로서 함수와 콜백

: js에서는 함수도 객체이다. 즉 일종의 값이다. 

: 변수, 매개변수, 리턴값 으로 사용되어질 수 있다.

: 객체의 속성값으로 담겨진 함수를 메소드(method)라고 부른다

a={

b : function (){}    // Method

}

: 함수를 다른 함수의 인자로 전달할 수 도있다.

: 함수는 함수의 리턴 값으로도 사용될 수 있다.

함수의 인자,리턴

function cal(mode){

var func = {

'plus' : function(){},

'minus' : function(){}

}

return func[mode]

}

cal('plus')()

함수의 배열

var proccess={

function(input){},

function(input){},

function(input){}

}

for(var i =0; i< process.length ; i++){ proccess[i](input) }

콜백

: 함수를 값으로 전달할 수 있기 때문에 sort(콜백함수)를 실행시킴으로써 함수의 기능을 바꿈

ajax 

: 비동기방식으로 동작한다

: 웹과 서버가 통신하는 방식

: 콜백함수를 통해 결과값을 바꿀수 있다.


클로저

: 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리킨다.

: 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다.

ex)

function outter(){

var title = 'coding everybody';

return funcction(){alert(title)};

}

inner = outter();

inner();

: inner가 호출되었을 때 outter함수의 title을 출력하게 된다.

: 이것이 클로저의 독특함이다.

: 외부함수가 종료된 이후에도 외부함수 내부의 변수를 호출할 수 있다.

ex)

function factory_movie(title){

return {

get_title : function(){ return title; },

set_title : function(_title){ title=_title; }

}

}

ghost = factory_movie();

matrix = factory_movie();

: 위의 두 객체는 다른 내부 변수를 가진다

: 이때 내부 변수는 외부에서 바꿀 수 없으며, 오직 set_title, 즉 함수를 통해서만 변화시킬수있다.

: private한 변수이다.

: 안전한 변수이다.


Arguments

: 함수에는 arguments라는 변수에 담긴 숨겨진 유사배열이 있다.

: 이 배열에는 함수를 호출할 때 입력한 인자가 담겨있다.

: 함수가 받는 매개변수가 없더라도, 인자를 많이 넣어도 에러가 나지 않는다.

: arguments를 통해 인자에 접근할 수 있다.

Argument 활용

function sum(){

var _sum=0;

for(var i =0 ; i<arguments.length ; i++){

_sum += arguments[i] ; 

}

return _sum;

}

document.write(sum(1,2,3,4));

함수와 객체의 Arguments

function one(arg){

one.length // 1을 반환

arguments.length // 2를 반환

}

one(arg1,arg2);


함수의 호출

: 함수의 호출하는 방법을 알아볼 것이다

: 자바스크립트에서는 함수가 일종의 객체이다

: 객체는 속성을 가지고 있다.

: 객체 안의 함수는 Method라고 한다.

기본

function func(){

}

func()

apply

o1={var1:1, var2:2, var3:3}

function sum(){

var _sum = 0;

for( name in this){

_sum += this[name];

}

return _sum;

}

sum.apply(o1);

: 함수의 this 값을 apply안에 있는 객체로 한다.


객체지향 프로그래밍

: OOP (Object Oriented Programming) 객체 지향 프로그래밍

: 로직을 상태와 행위로 이루어진 객체로 만드는 것이다.

:  객체지향 프로그래밍 교육은 크게 두가지로 구분된다.

1. 문법

: 언어가 제공하는 기능을 익히는 것이다.

2. 설계

: 좋은 객체를 만드는 것이다, 현실을 잘 반영하는 것이다.

: 추상화 하는 과정이다.

: 객체지향은 부품화의 정점이라고 볼 수 있다.

: 상황에 따라 적합하게 사용해야 한다.

: 은닉화, 캡슐화

: 인터페이스


생성자와 new

: 자바스크립트는 Prototype-based programming에 속한다

객체

: 객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다.

: 객체내의 변수를 Property, 함수를 Method라고 부른다.

객체 생성

var person = {

'name' : 'hello',

'func' : function(){return this.name;}

}

생성자

: 생성자는 객체를 만드는 역할을 하는 함수이다.

: 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할수있다.

객체의 생성자

: 자바스크립트에서는 Class가 존재하지 않는다.

function Person(){};

var p = new Person()

: new라는 생성자는 객체의 초기화 역할을 한다. 


전역객체

: 제일 밖에 선언한 함수는 전역 객체 의 property 이다.

: window.함수명() 에서 window가 전역객체이다.

: 전역객체의 유용한 API가 존재한다.


this

: this는 함수 내에서의 함수 호출 맥락을 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미이다.

: 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다.

: 함수와 객체의 관계가 느슨한 JS에서 this는 이 둘을 연결시켜주는 연결점의 역할을 한다.

window의 this

function func() {

if(windows===this) return true;

}

func() // true가 리턴된다.

: func()는 윈도우의 Method로써 호출되기 떄문에 true이다

method의 this

var o = {

func : function(){

if(o === this){ return true; }  

}

}

o.func()  // true

: o의 Method로써 호출되기 때문에 true이다.

생성자와 this

function Func(){}

var o1 = Func(); // 여기서 Func의 this는 window이다

var o2 = new Func() // 여기서 Func의 this는 o2이다.

apply와 this

func.apply(o)  // func의 this는 o 이다.


상속

: 상속받은 개체가 부모의 로직을 재활용하면서 수정이 가능하다.

생성자를 통한 객체 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name){
 
this.name = name;
 
this.introduce = function(){
 
return 'My name is ' + this.name;
 
}
 
}
 
var p1 = new Person('hello');
cs

상속

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person(name){
 
this.name = name;
 
}
// Person라는 객체에 prototype이라는 특수한 property에 name이라는 property를 준것임.
Person.prototype.name=null
// 같은 방법으로 method도 설정할 수 있음
Person.prototype.introduce=function(){
 
return 'My name is ' + this.name;
 
}
 
var p1 = new Person('hello');
    cs

상속의 사용방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Person(name){
    this.name = name;
}
// Person라는 객체에 prototype이라는 특수한 property에 name이라는 property를 준것임.
Person.prototype.name=null
// 같은 방법으로 method도 설정할 수 있음
Person.prototype.introduce=function(){
    return 'My name is ' + this.name;
}
 
function Programmer(name){
    this.name = name;
}
// Person 객체를 상속받는다.
Programmer.prototype = new Person();
var p1 = new Programmer('hello');
// 상속받았기 때문에 introduce를 사용할 수 있다.
p1.introduce();
cs


: 이러한 이유때문에 Prototype based Language라고 불린다.


prototype

: 객체의 원형이라고 할 수 있다.

: 객체는 prototype이라는 프로퍼티를 가지는데 특수한 용도로 사용되도록 약속된 프로퍼티이다.

: 여기에 저장된 속성들은 (new)생성자를 통해서 객체가 만들어질때 그 객체에 연결된다.

: sub.prototype = new Super() 와 같이 꼭 생성자를 통해 객체를 넣어주어야 한다.


표준 내장 객체의 확장

: 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다.

: 내장 객체가 중용한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문이다.

Object
Function
Array
String
Boolean
Number
Math
Date
RegExp

: 가 있다.

내장 객체 확장

: 배열 확장

Array.prototype.random = function(){};

arr.random()


데이터 타입

: 데이터 타입은 크게 두가지로 구분된다.

1. 원시 데이터 타입 (기본 데이터 타입)

: 숫자, 문자열, 불리언, null, undefined

: 객체가 아닌것들

: 문자열과 관련된 일을 할때에는 임시로 문자열 객체를 만들고 사용이 끝나면 제거한다.

: ex) 'coding'.length

: 따라서 원시 데이터 타입에 무언가를 저장하고 부르면 undefined가 된다.

2. 객체 데이터 타입 (참조 데이터 타입)


참조

복제  

1
2
3
4
5
6
7
var a =1;
 
var b = a;
 
= 2
 
a? // 1이다.

cs

: 원시 데이터 타입의 경우 복제가 된다,

참조

1
2
3
4
5
6
7
var a = {'id':1};
 
var b = a;
 
b.id = 2;
 
a.id?  // 2
cs

: 객체의 경우에는 주소값이 복사가 된다.

함수와 참조

원시데이터의 경우 인자값으로 들어온 변수의 값을 함수내부에서 바꿀 수 없다.

객체의 경우 인자값으로 들어온 변수의 값을 함수내부에서 변화시킨다.


기타

document.write() : html문서에 글쓰기

: 자바스크립트의 자료형이 제한되어있음에 따라 나타나는 문제점은 무엇일까?

<생활코딩 JavaScript 를 필기한 내용입니다.>

+ Recent posts