Javascript #01 - 자바스크립트 기본

조건문

if (true) {
    alert(1);
} else {
    alert(2);
}

입력받기 - prompt

var id = prompt('아이디를 입력해주세요.')
var pass = prompt('비밀번호는 이것이다.')
if(id=='egoing'){
  alert('아이디가 일치 합니다.')
} else {
  alert('아이디가 일치하지 않습니다.')
}
alert(pass)

참고 - boolean table

문법형과 자료형

javascript는 대소문자를 구별하여 유니코드 문자셋을 받는다.

• var : 변수를 선언. 추가로 동시에 값을 초기화한다
• let : 블록 범위(scope) 지역 변수를 선언. 추가호 동시에 값을 초기화한다.
• const : 블록 범위 읽기 전용 상수를 선언

변수 선언

• var 키워드는 지역 및 전역 변수를 선언하는데 모두 사용될 수 있다.
• let 키워드는 블록 범위 지역 변수를 선언하는데 사용되낟.

간단히 변수에 값을 할당할 수도 있다. x=42와 같은 구문은 선언되지 않는 전역 변수를 만든다. 따라서 선언되지 않는 전역 변수는 사용하면 안된다.

참고 - 문법형과 자료형

loop iterate

while

var i = 0 ;

while(i<10) {
  document.write('coding is funn <br/>');
  i++; // c++처럼 연산이 가능하다.
}

for

for(var i = 0; i < 10; i++){ //c++처럼 사용한다.
  document.write('coding everybody'+i+'<br />');
}

반복문의 제어

break, continue

for(var i = 0; i< 10; i++){
  if(i===5){ // 결과는 0-4까지만 나온다.
    break;
  }
  if(i===5){ // 결과에서 5만 빼고 나온다.
    continue
  }
}

함수

function get_argument(arg1, arg2){
  return arg1 + arg2;
}
alert(get_argument(1,2));

var numbering = function(){
  i = 0;
  while(i<10){
	document.write(i);
    i+=1;
  }
}

익명함수 - 함수 이름 없이 함수 사용하기

정의하자마자 불러온다.

(function(){
  i = 0;
  while(i<10){
    document.write(i);
    i+=1;
  }
})();

배열

var member = ['egoing', 'asdf', 2];
alert(member[1]); //'asdf'

function mem(){
  return ['egoing', 'asdf', 23];
}

var members = mem();
document.write(members[0]); //egoing

반복문을 이용해서 배열의 값을 가져오려면

function get_mem(){
 return [1,2,3,4,5,6];
}

var mems = get_mem();

for(var i = 0 ; i < mems.length; i++){
  document.write(mems[i]+'<br/>');
}

배열의 추가

한 개의 데이터만 추가 -push

var li = ['a','b','c'];
li.push('d');

여러 개의 데이터를 한꺼번에 추가 - concat

var li = ['a','b','c'];
li = li.concat(['d','g']);

그 외

• unshift : 맨 앞에 추가하는 것

var li = ['a','b','c'];
li.unshift(['z']);
alert(li); //['z','a','b','c']

• splice : 배열의 특정 구간을 추출하거나, 특정 구간에 특정 배열을 추가함

var li = ['a','b','c','d','e'];
li.splice(2, 0, 'B');
alert(li); //

1. 첫번째 인덱스 : 어떤 위치에서
2. 두번째 인덱스 : 몇 개를 지울 것이고
3. 세번째 인덱스 : 그 자리에 무엇을 넣을 것인지

var a = ['a','b','c'];
a.splice(1,1,'x','y');

결과는 ['a','x','y','c']

배열의 제거

shift - 배열의 첫번째 원소를 제거

li.shift();

pop - 배열의 맨 마지막 원소를 제거

li.pop();

배열의 정렬 - sort, reverse

li.sort();
li.reverse();

객체

key : value 형태로 들어온다.

var grade = {'a':1, 'b':2, 'c':3};

비어있는 객체를 만들고 후에 선언해도 된다.

var grade = {};
//또는
var grade = new Object();

grade['a'] = 1;
grade['b'] = 2;
grade['c'] = 3;

//접근할 때에는
alert(grade.a);

객체의 반복문

<ul>
  <script type = "text/javascript">
    var grades = {'a':1, 'b':2, 'c':3};
    for (key in grades){
      document.write("<li>key : "+key+" value : "+grades[key]+'</li>')
    }
  </script>
</ul>

객체지향 프로그래밍

객체 안에 리스트도 들어가고 함수도 들어간 것.
객체의 범위가 더 넓어진 것.

자바스크립트에서는 함수도 값이고 변수도 값이므로 다 저장될 수 있다.

var grade = {
	'list' : {'a':1, 'b':2, 'c':3},
    'show' : function(){
        for(var name in this.list){
            document.write(name+' : '+this.list[name]+"<br />");
        }
    }
};

grade.show();
//또는
grade['show']();

모듈 & 라이브러리

모듈 & 라이브러리 - 참고 사이트

정규표현식

문자열에서 특정한 문자를 찾아내는 도구이다.

1. 작업 대상을 찾고
2. 어떤 작업을 할 것인지
3. 작업을 한다.

다음 단계를 따라가보자.

1. 컴파일 단계 : 패턴 찾기

• 정규 표현식 리터럴

var pattern = /a/;	//like var str = "a";

• 정규 표현식(Regular Expression) 객체 생성자

var pattern = new RegExp('a');

정규 표현식 메소드 실행

추출, test, 치환

정규 표현식 - 3/7

2. 실행 단계 : 찾은 대상에 대해 구체적인 작업하기

추출 - RegExp.exec()

console.log(pattern.exec('abcdef'));	//["a"]

실행 결과는 문자열 a를 값으로 하는 배열을 리턴한다.

console.log(pattern.exec('bcdefg'));	//null

인자 bcdefg에는 a가 없기 때문에 null을 리턴한다.

존재 유무 검사 - RegExp.test()

var pattern = /a/;
pattern.test('abcdef');	//true

문자열 메소드 - String.match(), String.replace()

• String.match()

var pattern = /a/;
var str = 'abcdfe';
var str2 = 'bcdefg';

str.match(pattern);		//["a"]
str2.match(pattern);	//nul

• String.replace()

var pattern = /a/;
var str = 'abcdfe';

str.replace(pattern, 'A');

옵션 - i, g

• i : 대소문자를 구분하지 않는다.

var xi = /a/;
"ABCde".match(xi);	//null

var oi = /a/i;
"ABCde".match(oi);	//["A"]

• g : 글로벌의 약자로, 검색된 모든 결과를 리턴한다.

var xg = /a/;
"abcdea".match(xg);	//["a"]

var og = /a/g;
"abcdea".match(oi);	//["a", "a"]

이 둘을 한번에 같이 사용할 수도 있다.

var ig = /a/ig;
"AabcdAAaa".match(ig);

다음과 같은 결과를 얻는다.

캡처

참규 - 정규표현식 시각화 사이트

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

• ()는 정규표현식에서 group을 의미한다.
• \w는 문자를 의미한다. A~Z, a~z, 0~9까지 포함한다.
• + 는 수량자로 앞에 있는 문자가 하나 이상인 경우 사용한다.
• \s는 공백을 의미한다.

var pattern = /(\w+)\s(\w+)/;
var str = "Coding Everybody";

var result = str.replace(pattern, "$2, $1");
console.log(result);

• $ 는 pattern의 몇번째 그룹인지 가리킨다.
  

치환

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});

replace로 받은 url을 변수로 받는 것.