오리엔테이션
: 자바스크립트는 브라우어 위에서 돌아가는 웹브라우저를 제어하기 위한 언어이다.
: 그런데 탈 웹브라우저 흐름을 통해 자바스크립트와 브라우저를 분리하여 생각할 수 있게 되었다.
: 자바스크립트는 웹서버에서 돌아갈 수 있게 되었고 이러한 기능을 하는 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()
치환
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 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; b = 2; a? // 1이다. |
: 원시 데이터 타입의 경우 복제가 된다,
참조
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 를 필기한 내용입니다.>