자바스크립트(Javascript) 기본 문법 정리

자바스크립트(Javascript) 기본 문법 정리

Author : Jino Bae / Send Mail

이전에 노트에 기록했던 내용을 블로그로 옮겨놓으려고 한다. 매우 기본적인 문법만 들어있다.



1. 변수

자바스크립트에는 변수형(int, double, string)이 존재하지 않는다. var 이라는 가변형 변수만 존재하여 초기화 할때 형태에 따라서 알아서 할당된다.

var i;
var x = 123;
var y = "123";
var z = false;
var w = null;



2. 연산자

+, -, *, /, % 등의 기본 연산은 물론 ++, --와 같은 증감 연산자도 사용할 수 있다.

a = a + 1 (x)
a += 1 (o)

이유는 모르겠지만 자바스크립트에서 위와같은 표현은 쓰지 말라고 돼있다. 무조건 할당 연산자를 사용하라고 한다.


자바와 마찬가지로 스트링 컨케트 네이션이 되어 문자열을 덧셈기호로 간단히 붙힐 수 있다.

var s = "String1" + "String2";
document.write(s);

 String1String2



3. 조건문

a==b
a!=b
a==b && a==c
a==b || a==c
a > b

...

if(a>b) {
    document.write("a is more than b.")
} else if(a==b) {
    document.write("a is the same as b.")
} else {
    document.write("a is less than b.")
}



4. 함수

선언과 호출은 아래와 같이 작성한다.

function send() {
    alert('send');
}

send();

값을 반환하는 함수는 아래와 같이 작성

var a=10;
var b=20;
var sum = add(a, b);

function add(value1, value2) {
    return value1+value2;
}

document.write(sum);

 30



5. 배열(Array)

변수의 값이 여러개 나열된 형식


배열의 선언
var arr = new Array;
var arr = [];


배열에 값 삽입
var job = [];
job[0] = "Warrior";
job[1] = "Archer";
job[2] = "Wizard";

var job = ["Warrior", "Archer", "Wizard"];


배열과 관련된 메소드
var job = ["Warrior", "Archer", "Wizard"];
document.write("Total Jobs : " + job.length);

 Total Jobs : 3


var job = ["Warrior", "Archer", "Wizard"];
document.write("Total Jobs : " + job.join(","));

 Total Jobs Name : Warrior,Archer,Wizard


var job = ["Warrior", "Archer", "Wizard"];
document.write("Total Jobs Reverse : " + job.reverse());

 Total Jobs Name : Wizard,Archer,Warrior



var job = ["Warrior", "Archer", "Wizard"];
document.write("Total Jobs Sort : " + job.sort());

 Total Jobs Sort : Archer,Warrior,Wizard


var job = ["Warrior", "Archer", "Wizard"];
var DLC_job = ["Assassin", "Samurai"]
document.write("Total Jobs : " + job.concat(DLC_job));

 Total Jobs : Warrior,Archer,Wizard,Assassin,Samurai


var job = ["Warrior", "Archer", "Wizard"];
document.write("<p>" + "Total Jobs : " + job.push("Devil", "Outlaw" + "</p>"));
document.write("<p>" + "Total Jobs : " + job.pop( + "</p>"));

 Total Jobs : 5
 Total Jobs : Outlaw

push와 pop은 자료구조 stack에서 다뤄지며 javascript에도 동일한 기능을 수행한다. push는 맨 뒤에 요소를 삽입 pop은 맨 뒤 요소를 꺼내는 것이다.


var job = ["Warrior", "Archer", "Wizard"];
job.shift();
job.unshift("Knight")
document.write("Total Jobs : " + job);

 Total Jobs : Knight,Archer,Wizard

shift, unshift는 맨 앞에 요소를 빼거나 삽입하는 기능을 한다.



6. 오브젝트(Object)

구조체(struct) 처럼 내부에 여러 변수를 가질 수 있고 클래스(class)처럼 내부에 메소드를 포함하고 있는 형식


오브젝트의 선언
var obj = new Object;
var obj = {};


변수를 가진 오브젝트

hp와 mp를 가진 player를 생성해보자.

var player = {};
player.hp = 100;
player.mp = 300;

var player = {
    hp : 100,
    mp : 300
};


메소드를 가진 오브젝트

플레이어가 후려맞은(?) 기능을 넣어보자.

var player = {
    hp : 100,
    mp : 300,
    hit : function() {
        this.hp -= 10;
        document.write("HIT!!");
    }
};
player.hit();
document.write(player.hp);

 HIT!!90



7. 반복문

for(var i=0; i<5; i++) {
    document.write(i);
}

 01234


var i = 0;
while(i<5) {
    document.write(i);
    i++;
}

결과는 위와 동일


for (변수 in 객체 또는 배열)

배열이나 객체(Object)의 갯수만큼 반복된다.

var player = {};
player.hp = 100;
player.mp = 300;

for(var property in player) {
    document.write("<p>" + property + " : " + player[property] + "</p>");
}

hp : 100
mp : 300

오브젝트는 ‘.’ 뿐만 아니라 []를 이용하여 값을 추출할 수 있다. 위와같은 경우 property 변수가 player 오브젝트 멤버 변수 이름으로 나오기 때문에 []를 이용해야 한다.



8. 문자열

문자열은 가장 기본적인 구조인데 이렇게 뒤에 있는 이유는 알아둬야 할 기능이 생각보다 많아서다. 그 중에도 간단하고 중요한 것만 기록할 예정이다.

var Welcome = "ONDE Planet is the most peaceful space in the universe";

먼저 위와같은 문자열을 생성했다고 가정하자.


document.write(Welcome.charAt(0));
document.write(Welcome.charCodeAt(0));
document.write(Welcome.indexOf("x"));
document.write(Welcome.replace("peaceful", "nasty"));
document.write(Welcome.search("universe"));
document.write(Welcome.slice(0,4));
document.write(Welcome.split(" "));
document.write(Welcome.trim());
document.write(Welcome.length);

3행 : charAt(n) : n번째 문자를 출력한다. 결과는 O

4행 : charCodeAt(n) : n번째 문자의 유니코드를 출력한다. 결과는 79

5행 : indexOf("?") : ?라는 글자가 있다면 true(0), 없다면 false(-1)을 출력한다. 결과는 -1

6행 : replace("a", "b") : a를 b로 교체한다. 결과는 ONDE Planet is the most nasty space in the universe.

7행 : search("?") : ?라는 글자를 검색하여 첫 문자의 시작 지점을 알려준다. 결과는 46

8행 : slice(n, n') : n~n'+1 까지의 문자를 가져온다. 결과는 ONDE

9행 : split("?") : ?라는 문자를 기준으로 문자열을 분리한다. 결과는 ONDE,Planet,is,the,most,peaceful...

10행 : trim() : 앞, 뒤의 공백을 제거하는 역할을 한다. 이 값에서는 앞뒤에 공백이 없으므로 결과가 없다.

11행 : length : 문자열의 길이를 반환한다. 결과는 55



9. 수학연산

Math.abs(-3);
Math.ceil(3.1);
Math.floor(3.9);
Math.round(3.5);
var a = Math.random();
var b = Math.random()*10+10;

Math라는 기능을 이용하여 사용할 수 있는 연산들이다.

Math.abs(n) : n을 절댓값으로 바꾼다.

Math.ceil(n) : n값을 올림한다.

Math.floor(n) : n값을 내림한다.

Math.round(n) : n값을 반올림한다.

Math.random() : 난수를 생성한다.

Math.random()*x+y : y~x+y 범위에서 난수가 생성된다.


10. 형변환

// Num -> String
num = 2018;
var str = string(num);
var str = num.toString();

// String -> Num
var str = "2018.08";
var mInt = Number(str); // 2018
var mInt = parseInt(str); // 2018
var mFloat = parseFloat(str); // 2018.08



Jino Bae
WRITTEN BY

Jino Bae

Digital is a purely man-made playground. That's why I like.
im@baejino.com


comments powered by Disqus