생활코딩 스터디 - javascript_2

생활코딩에서 자바스크립트 언어에 대한 공부를 시작했다. jquery나 쓸줄 알지 javascript는 걸음마 떼는 기분으로 공부하고 있다^-ㅠ 어쨌든 흥미롭고 재미있다.

1. 숫자와 문자

1) 숫자 : 따옴표 없는 형식

    ex) alert (1+1)    -> 결과값 2

● +,-,*,/ 등 사칙연산 뿐만 아니라 복잡한 계산도 가능하다.

     ex) Math.pow(3,2)  -> 3의 2승, 결과값 9

            Math.round() 반올림   /   Math.ceil() 올림  /   Math.floor() 내림  /   Math.random()  0부터 1.0 사이의 랜덤한 숫자 

2) 문자 : 따움표로 감싸야 한다. String 이라고 함.

     ex) alert("Hello World")

● 숫자를 따옴표로 감싸면 문자가 된다

● 문자 안에서 작은따옴표/큰따옴표가 넣고싶은 경우 따옴표 앞에 역슬래시 (\) 를 쓰기. -> 이스케이프 라고 함.

● 여러줄을 표시할때는 줄바꾸는 위치에 \n 을 쓰기.

● 문자와 문자를 더할땐 ("string1"+"string2") 형식.

● 문자의 길이를 구할땐 ("문자".length) 형식

2. 변수  : 값을 담는 박스 개념. 값은 바뀔 수 있음.

● 변수 선언시 var 로 시작. 변수의 이름은 $, _, 혹은 특수문자를 제외한 모든 문자로 시작 가능하다.

3. 비교

1) 비교연산자

● 주어진 값을 비교하는것, 비교 연산자의 결과는 true 혹은 false 중의 하나다.

● ==  : 동등 연산자. = 가 한개인것은 대입 연산자로 == 와는 완전히 다르다.

● ===  : 일치 연산자. 좌항과 우항이 정확하게 같을때 true가 된다. === 는 같은 수를 표현하더라도 데이터형이 같아야 한다. == 보다는      ===를 쓰자.

● != , !==  :  !는 부정을 의미한다. != 는 ==와 정반대이다.

● > , >= , < , <=  크거나 작음을 표시하는 부등호.

4. 조건문 : 주어진 조건의 결과값에 따라 코드가 다르게 실행되는것. 조건의 결과값은 true 혹은 false 만 올 수 있다.

● if (조건) {조건결과가 true인경우 실행되는 코드} else {조건결과가 false인경우 실행되는 코드}

● if (조건) {조건결과가 true인경우 실행되는 코드} else if (또다른 조건){또다른 조건결과가 true인경우 실행되는 코드}

● 조건 부분에는 비교연산자 사용 가능

● 조건문 안에 조건문 중첩해서 사용 가능

● 논리연산자

     - &&  : and 연산자. 좌항과 우항이 모두 true 일때 결과값이 true가 된다.  

     - ||  :  or 연산자. 좌항과 우항중에 하나라도 true 이면 결과값이 true가 된다.

     - !  :  not 연산자. 결과값을 역전시킨다.

● 조건문의 조건에 true 혹은 false (불린) 이 아닌 다른 값을 사용할 경우

     - 관습적으로 0 은 false , 0 이외의 값은 true로 간주.

     - false로 간주되는 데이터형 : !''   ,  !undefind   ,   !null   ,   !Nan 

5. 반복문

● while(조건){반복해서 실행할 코드}  -> (조건)의 값이 true 이면 {} 안의 코드를 반복적으로 실행하고, false면 실행하지 않는다. true와 false는 '종료조건' 이다.

● for (초기화; 반복조건; 반복될 때마다 실행되는 코드){반복해서 실행될 코드}

● 반복문의 제어

     - break : 반복문 안에서 break가 실행되면 반복문을 즉시 종료.

     - continue : 어떠한 조건에서 continue를 실행하면 그 조건일 때에는 반복 실행은 중단되지만 반복문 자체는 중단되지 않는다.

● 반복문 안에서 반복문 사용 가능.    

6. 함수

function 함수명(인자){

코드

return 반환값  

}

함수명 ();

혹은

var 변수이름 = function (인자){

코드

return 반환값 

}

변수이름();

● 인자 란 함수를 사용할때 유입되는 입력 값이고, 이에 따라 반환값이나 동작방법을 다르게 할 수 있다.인자는 생략할 수 있다.

● return은 return 뒤의 값을 함수의 결과값으로 반환하고, 동시에 함수를 종료시킨다.

7. 배열  : 연관된 데이터를 모아서 통으로 관리하는 '폴더' 개념

● var 배열이름 = ['값1','값2','값3']

● 배열의 값 꺼내오기  :  배열이름[값의차례 즉 index번호]  -> 이때 값의 차례는 0 부터 시작한다.

● 배열의 크기 알아내기  :  배열이름.length;

● 배열의 끝에 값 추가하기  :  배열이름.push('추가할값');

● 배열에 복수의 값 추가하기  :  배열이름.concat(['추가값1','추가값2']);

● 배열의 시작점에 값 추가하기 : 배열이름.unshift('추가할값');

● 배열 첫번째 원소 제거  :  배열이름.shift();

● 배열 끝점 원소 제거  :  배열이름.pop();

● 정렬하는 방법  :  배열이름.sort();

● 역순으로 정렬하는 방법 : 배열이름.reverse();

8. 객체  :  배열에서 데이터를 가져오는 식별자를 숫자가 아닌 문자로 사용할 경우.

var 객체이름 = {

'key이름1' : 값1,

'key이름2' : 값2,

'key이름3' : 값3

}

혹은

var 객체이름 = {};

객체이름['key이름1'] = 값1;

객체이름['key이름2'] = 값2;

객체이름['key이름3'] = 값3;

혹은

var 객체이름 = new Object();

객체이름['key이름1'] = 값1;

객체이름['key이름2'] = 값2;

객체이름['key이름3'] = 값3;

이렇게 만들 수 있다.

● 객체의 값은 key이름으로 가져올 수 있다. 객체이름['key이름1']  을 하면 결과값은 값1 이 된다.

● 객체이름.key이름1  을 해도 객체에 접근할 수 있다.

● for (key in 객체이름){}   -> in뒤에 따라오는 배열의 key값을 in 앞의 변수인 key에 담아서 반복문을 실행하는것. 반복문이 실행될 때 key값들을 가져와서 변수 key에 순서대로 넣는다. key의 값이 아니라 key 자체.

9. 정규표현식

1) 컴파일 : 패턴(찾고자하는 정보)을 찾는 것.

● 패턴을 만드는 방법

     정규표현식 리터럴 : var 변수A = /찾으려하는 대상(정규표현식 객체)/

     정규표현식 객체 생성자 : var 변수A = new RegExp('찾으려하는 대상(정규표현식 객체)');

     변수A 라는 변수를 통해 찾으려 하는 대상을  이용할 수 있게 된다.

● /문자./  -> 이때 . 은 하나의 문자 라는 뜻. 어떠한 문자가 오든 상관 없이 1개의 문자가 더 붙는다.

● var 변수A = /찾으려하는 대상(정규표현식 객체)/i;  :  i를 객체 뒤에 붙이면 대소문자를 구분하지 않는다.

● var 변수A = /찾으려하는 대상(정규표현식 객체)/g;  :  g를 객체 뒤에 붙이면 대상에 있는 모든 결과값을 출력값으로 내준다.(a가 정규표현식 객체이고 asad가 대상일 경우 결과값은 a 가 두개 !)

2) 실행 : 찾은 패턴에 어떠한 작업을 구체적으로 하는 것.

* RegExp 라는건 정규표현식 객체를 담고있는 변수.

● 만든 패턴에서 원하는 내용을 찾는방법(추출)  :  RegExp.exec('대상');

● 대상 안에 변수에 담긴 정규표현식 객체가 있다면 정규표현식 객체를 출력값으로 내준다.

● 정보가 있는지 없는지 test : RegExp.test('대상');   ->대상 안에 변수에 담긴 정규표현식 객체가 있을때 return값을 true로 주는 것. 

● 문자열.match(RegExp)  :  RegExp.exec('대상') 와 비슷하다.

● 문자열.replace(RegExp,'바꿀것')  :  문자열에서 RegExp에 해당되는것을  '바꿀것' 으로 바꾼다.

3) 캡처 : 

● 정규표현식 내용에서 ()를  쓰면 그룹을 의미한다. 괄호 안의 패턴은 변수처럼 재사용 가능.

● \w  는 모든 문자를 의미 (A~Z,a~z,0~9)

● (\w+) 에서 +는 수량자. 앞의 문자가 하나 이상인 경우에만 유효해 진다.

● \s  :  공백

● $n  :  정규표현식 객체 내에서 n번째 그룹을 의미.

4) 치환 : 음.... 패스..