티스토리 뷰
숫자와 문자
자바스크립트에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자를 숫자로 인식한다. number라고 한다.
문자는 큰따옴표 혹은 작은따옴표 중의 하나로 감싸야 한다. string이라고 한다.
여러 줄 표시
\n은 줄바꿈을 의미하는 특수한 문자다.
alert("안녕하세요.\n환영합니다.");문자 연산
문자와 문자를 더할 때는 다음과 같다.
alert("coding"+"everybody");
//coding everybody문자의 길이를 구할 때는 문자 뒤에 .length 를 쓴다.
alert("coding everybody".length)
//16
비교 연산자
주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것
비교 연산자의 결과는 ture와 false 둘 중 하나다.
| == | 동등 연산자로 좌항과 우항을 비교해서 서로 "값"이 같다면 true, 다르면 false |
| === | 일치 연산자로 좌항과 우항이 정확하게 같을 때(데이터 형식 + 값) true, 다르면 false |
| != | !는 부정을 의미한다. "같다"의 부정은 "같지 않다"이다. !=는 ==의 정반대 결과가 나온다 |
| !== | !==는 ===와 정반대이다. 정확하게 같지 않다는 의미이다. (데이터형식, 값) |
| > | 좌항이 우항보다 크면 true, 아니면 false ( < 는 정반대 ) |
| >= | 좌항이 우항보다 크거나 같으면 true, 아니면 false ( <=는 정반대 ) |
조건문
1. if
if 뒤의 괄호에 조건이오고, 조건이 될 수 있는 값은 Boolean이다. Boolean의 값이 true면 중괄호 구문이 실행된다.
false가 오면 중괄호 구문이 실행되지 않는다.
if (true) {
alert('result:true');
}
//result:true
if (false) {
alert('result:true');
}2. else
if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 이후의 중괄호 구간이 실행된다.
즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다.
if (true) {
alert(1);
} else {
alert(2);
}3. else if
else if는 더 많은 조건을 검사할 수 있다. if나 else와 다르게 여러개가 올 수 있다.
else if의 모든 조건이 false라면 else가 실행된다. else는 생략할 수 있다.
if (false) {
alert(1);
} else if (true) {
alert(2);
} else if (true) {
alert(3);
} else {
alert(4);
}
논리 연산자
1. &&
좌항과 우항이 모두 참(true)일 때 참이다. (and 연산자)
if(true && true){
alert(1);
}
//1
if(true && false){
alert(2);
}2. ||
좌항과 우항 중에 하나라도 참(true)일 때 참이다. (or 연산자)
if (true || true){
alert(1);
}
//1
if (true || false){
alert(2);
}
//2
if (false || false){
alert(3);
}3. !
!는 부정의 의미로, Boolean의 값을 역전시킨다. (not 연산자)
Boolean 과 유사한 형식
0,1
조건문에서 관습적으로 0은 false, 0이 아닌값은 true로 간주된다.
if (0){
alert(1);
}
if (1){
alert(2);
}
//2false로 간주되는 데이터 형
if문의 조건으로 ! 연산자롤 사용하면 true가 되어 실행된다.
if(!''){
alert('빈 문자열')
}
//빈 문자열
if(!undefined){
alert('undefiend');
}
//undefiend
var a;
if(!a){
alert('값이 할당되지 않은 변수');
}
//값이 할당되지 않은 변수
if(!null){
alert('null');
}
//null
if(!NaN){
alert('NaN');
}
//NaN
반복문
1. while
while (조건){
//반복 실행할 코드
}조건에 true가 들어가면 반복 / false가 들어가면 실행되지 않는다.
반복문에 종료조건을 잘못 지정하면 무한반복되거나 반복문이 실행되지 않는다.
var i = 0;
//종료조건으로 i의 값이 10보다 작으면 true, 같거나 크면 false가 된다.
while(i <10){
//반복이 실행될 때마다 출력된다.
document.write('coding everybody <br/>');
//i 값 1씩 증가
i++
}2. for
for(초기화; 반복조건; 반복될 때 마다 실행되는 코드){
//반복해서 실행할 코드
}for(var i = 0; i < 10; i++){
document.write('coding everybody'+i+'<br/>');
}for문은 제일 먼저 초기화를 한다 (var i = 0)
그 다음 반복조건인 i < 10이 실행된다.
반복조건이 참이면 중괄호 안의 내용이 실행된다.
"반복해서 실행할 코드"가 끝나면 "반복될 때 마다 실행되는 코드"가 실행된다.
i++의 결과로 i가 1 증가한다.
그리고 다시 반복조건이 실행된다.
이렇게 반복되다가 i의 값이 10이 되는 순간 반복조건 i < 10을 충족시키지 못하게 되고 반복문이 종료된다.
반복문의 제어
1. break
반복작업을 중간에 중단시키고 싶을 때 break를 사용한다.
for(var i = 0; i < 10; i++){
if(i === 5){
break;
}
document.write('coding everybody'+i+'<br/>');
}
//coding everybody 0
//coding everybody 1
//coding everybody 2
//coding everybody 3
//coding everybody 4i값이 5일 때 break문이 실행되면서 0,1,2,3,4가 출력 된 후 반복문이 종료된다.
2. continue
실행을 중단하지만 반복은 계속 되게 할 때 사용한다.
for(var i = 0; i < 10 ; i++){
if(i === 5){
continue;
}
document.write('coding everyday'+i+'<br />');
}coding everybody 5 를 제외하고 모두 출력된다.
i가 5가 되었을 때 실행이 중단됬기 때문에 write 구문이 실행되지 않았다.
하지만 반복문 자체는 중단되지 않았기 때문에 나머지 결과는 출력된다.
함수
function 함수명 ( [인자], ..){
//코드
return 반환값
}함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라 온다.
소괄호에 인자가 들어오고 이 값은 함수를 호출할 때 함수의 로직으로 전달되는 변수이다.
인자는 생략가능하다.
함수를 호출했을 때 실행할 부분이 중괄호 안에 온다.
function numbering(){
i = 0;
while(i < 10){
document.write(i);
i += 1;
}
}
numbering();numbering();은 함수를 호출하는 구문이다.
입력과 출력
입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할이다.
return
함수 내에서 사용한 return은 뒤에 따라오는 값을 함수의 결과로 반환한다.
★ 동시에 함수를 종료시킨다.
function get_member1(){
return 'aa';
}
function get_member2(){
return 'bb';
}
alert(get_member1()); //aa
alert(get_member2()); //bbfunction get_member(){
return 'aa';
return 'bb';
return 'cc';
}
alert(get_member()); //aareturn을 실행한 후에 함수가 종료되기 때문에 그 아래의 구문은 실행되지 않는다.
인자(argument)
인자는 함수로 유입되는 입력값이다.
어떤 값을 인자로 전달하냐에 따라 함수의 반환값이나 메소드의 동작을 다르게 할 수 있다.
function get_argument(arg){
return arg;
}
alert(get_argument(1));get_argument(1)는 함수를 실행하는 구문이다. 괄호 안의 1은 get_argument로 1이라는 값을 전달한다는 의미이다.
함수가 정의된 구문(arg)에 의해 변수 arg의 값으로 숫자 1이 함수 안으로 전달된다.
이 변수 arg는 함수 안에서만 유효하다.
복수의 인자
function get_arguments(arg1, arg2){
return arg1 + arg2;
}
alert(get_arguments(10, 20));함수를 호출할 때 전달한 인자 10과 20은 함수의 선언부 arg1, arg2에 차례대로 할당된다.
함수 정의 다른 방법
var numbering = function (){
i = 0;
while(i < 10){
document.write(i);
i += 1;
}
}
numbering();
배열(Array)
배열이란 연관된 데이터를 모아서 관리하기 위해 사용하는 데이터 타입이다.
여러 개의 데이터를 하나의 변수에 저장하기 위한것이다.
배열의 생성
대괄호 [ ]는 배열을 만드는 기호이다.
대괄호 안에 데이터를 콤마 , 로 구분해서 나열하면 배열이 된다.
var member = ['aa', 'bb', 'cc'];
alert(member[0]);
alert(member[1]);
alert(member[2]);배열에 담겨있는 값을 가져올 때는 대괄호 안에 숫자를 넣는다.
이 숫자를 색인(index)라 부르고 인덱스는 0부터 시작한다.
첫 번째 원소를 가져오려면 대괄호 안에 0을 써야 한다.
배열의 사용
배열은 반복문과 결합하여 사용할 때 유용하다.
반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리할 수 있기 때문이다.
function get_members(){
return ['aa', 'bb', 'cc'];
}
members = get_members();
//members.length는 배열에 담긴 값의 개수를 알려준다.
for(i = 0; i < members.length; i++){
//toUpperCase()는 문자를 대문자로 변환해준다.
document.write(members[i].toUpperCase());
}배열의 크기
var arr = [1, 2, 3, 4, 5];
alert(arr.length); //5배열의 조작
1. 추가
- push : 배열의 끝에 원소를 추가한다. push는 인자로 전달된 값을 배열에 추가하는 명령어이다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f');
alert(li); //a, b, c, d, e, f- concat : 복수의 원소를 배열에 추가한다. concat은 인자로 전달된 값을 추가하는 명령어이다.
var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li); // a, b, c, d, e, f, g- unshift : 배열의 시작점에 원소를 추가한다. unshift는 인자로 전달한 값을 배열의 첫 번째 원소로 추가하고 배열의
기존 값들의 인덱스를 1씩 증가시킨다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li); //z, a, b, c, d, e- splice : 첫 번째 인자에 해당하는 원소부터 두 번째 인자에 해당하는 원소의 숫자만큼 배열로부터 제거한 후에 리턴한다.
세 번째 인자부터는 전달된 인자를 첫 번째 인자의 원소 뒤에 추가한다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B');
alert(li); //a, b, c, B2. 제거
- shift : 배열의 첫 번째 원소를 제거한다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
alert(li); //b, c, d, e- pop : 배열의 마지막 원소를 제거한다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();
alert(li); //a, b, c, d3. 정렬
- sort
var li = ['c', 'e', 'a', 'b', 'd'];
li.sort();
alert(li); //a, b, c, d, e- reverse
var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse();
alert(li); //e, d, c, b, a
객체(Object)
객체의 생성
1. aa는 key가 되고, 10은 value가 된다.
var grades = { 'aa': 10, 'bb': 6, 'cc': 80};2.
var grades = {};
grades['aa'] = 10;
grades['bb'] = 6;
grades['cc'] = 80;3.
var grades = new Object();
grades['aa'] = 10;
grades['bb'] = 6;
grades['cc'] = 80;객체 속성 접근 방법
var grades = { 'aa': 10, 'bb': 6, 'cc': 80 };
alert(grades['cc']); //80
alert(grades.cc; //80var grades = { 'aa': 10, 'bb': 6, 'cc': 80 };
for (key in grades){
document.write("key: "+key+" value : "+grades[key]+"<br />");
}
// key : aa value : 10
// key : bb value : 6
// key : cc value : 80객체에는 객체를 담은수도 있고, 함수도 담을 수 있다.
var grades = {
'list': {'aa': 10, 'bb': 6, 'cc': 80},
'show': function() {
for(var name in this.list) {
document.write(name+':'+this.list[name]+'<br />');
}
}
};
grades.show();
모듈(module)
코드를 여러개의 파일로 분리하는 것이다.
- 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때 마다 재활용할 수 있다.
- 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
- 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
- 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
- 한 번 다운로드된 모듈은 웹 브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크
트래픽을 절약할 수 있다.
모듈의 사용
새로운 파일을 만든다. (자바스크립트 파일은 확장자로 .js를 사용한다.)
greeting.js
function welcome(){
return 'hello world';
}main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>script 태그 안에 위치하는 컨텐츠는 브라우저에 의해 javascript로 인식된다.
위의 코드는 컨텐츠 대신 src 속성이 있다. 브라우저는 src 속성에 있는 파일을 다운로드해서 실행시킨다.
greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의되어 있지 않아도 실행할 수 있게된다.
node.js에서 모듈 로드
node.circle.js(로드 될 대상)
var PI = math.PI;
exports.area = function (r) {
return PI * r * r;
};
exports.circumference = function (r) {
return 2 * PI * r;
};node.demo.js(로드의 주체)
var circle = require('./node.circle.js');
console.log(circle.area(4)); //50.2654...라이브러리
라이브러리는 모듈과 비슷한 개념이다. 모듈이 프로그램을 구성하는 작은 부품으로서의 로직이라면
라이브러리는 자주 사용되는 로직을 재사용하기 편하도록 정리한 코드들의 집합이라고 할 수 있다.
jQuery 사용 예제
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input id="execute_btn" type="button" value="execute" />
<script type="text/javascript">
$('#execute_btn').click(function(){
$('#list li').text('coding everybody');
})
</script>
</body>
</html>API(Application Programming Interface)
프로그램이 동작하는 환경을 제어하기 위해 환경에서 제공되는 조작장치이다.
정규표현식(regular expression)
정규표현식은 문자열에서 특정한 문자를 찾아내는 도구이다.
정규표현식은 컴파일과 실행으로 이루어진다.
컴파일
컴파일은 검출하고자 하는 패턴을 만드는 일이다.
정규표현식 객체를 만드는 방법은 두 가지가 있다.
1. 정규표현식 리터럴
var pattern = /a/2. 정규표현식 객체 생성자
var pattern = new RegExp('a');실행
정규표현식을 컴파일해서 객체를 만들었다면 문자열에서 원하는 문자를 찾아내야 한다.
RegExp.exec()
console.log(pattern.exec('abcdef')); // ["a"]
// 실행결과는 문자열 a를 값으로 하는 배열을 리턴한다.
console.log(pattern.exec('bcdefg')); // null
// 인자 'bcdef'에는 a가 없기 때문에 null을 리턴한다.RegExp.test()
console.log(pattern.test('abcdef')); // true
console.log(pattern.test('bcdefg')); // false
// test는 인자 안에 패턴에 해당하는 문자열이 있으면 true, 없으면 false를 리턴한다.문자열 메소드 실행
문자열 객체의 몇몇 메소드는 정규표현식을 사용할 수 있다.
.match()
console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // null.replace()
문자열에서 패턴(/a/)을 검색해서 이를 변경한 후에 변경된 값을 리턴한다.
console.log('abcdef'.replace(pattern, 'A'); // Abcdef
정규표현식 옵션
i
i를 붙이면 대소문자를 구분하지 않는다.
var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"];g
g를 붙이면 검색된 모든 결과를 리턴한다.
var xg = /a/;
console.log("abcdea".match(xg));
var og = /a/g;
console.log("abcdea".match(og));정규표현식 예제
캡처
괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호$를 사용하는데 아래 코드는 coding 과 everybody의
순서를 역전시킨다.
var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);치환
아래 코드는 본문 중의 URL을 링크 html 태그로 교체한다.
var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = 'http://opentutorials.org/courcse/1';
return '<a href="'+url+'">'+'</a>';
});
console.log(result);
참고사이트
'do > javascript' 카테고리의 다른 글
| javascript 3 (0) | 2019.04.29 |
|---|---|
| javascript 2 (0) | 2019.04.26 |