자바스크립트 JavaScript

자바스크립트(JavaScript, JS)는 웹 브라우저에서 사용하기 위하여 만들어진 객체 기반의 스크립트 프로그래밍 언어이다.

자바스크립트는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어로 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 자바스크립트는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.

자바스크립트를 사용해서 HTML의 내용, 속성, 스타일을 변경할 수 있다.

 

 

자바스크립트 특징

1. 객체 기반의 스크립트 프로그래밍 언어

2. 컴파일 과정을 거치지 않아 타입을 명시할 필요가 없는 인터프리터 언어 (클라이언트의 웹 브라우저에 의해 해석되고 실행)

3. 웹 문서(HTML)에 삽입해서 사용하는 스크립트 언어로 웹 브라우저에서 웹문서를 실행 할 때 코드가 해석된다.

4. 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능하다.

 

 

 

자바스크립트 출력

HTML 페이지에 출력할 수 있는 방법이 여러가지가 있다.

 

1. document.write()

간단하게 웹 페이지에 출력하는 방식이다.

 

<script>
    document.write("Hello World <br>");
    document.write('Hello World', "<hr>")
    document.write(1+2)
</script>

문자열은 큰따옴표, 작은따옴표 모두 사용 가능하다. 1+2를 출력했을 때는 연산 결과인 3이 출력된다.

위의 코드에서 확인하듯이 자바스크립트는 명령문의 끝에 세미콜론(;)이 빠지더라도 문제가 되지 않는다. (세미콜론이 자동삽입 되지 않는 예외가 있기 때문에 붙이는 것이 좋다.)

<br>과 <hr> 을 추가 한 방식으로 보면, 다른 태그를 연결해서 출력하고 싶을 때는 이어서 작성하거나 쉼표(,)를 이용할 수 있다.

 

 

2. console.log()

웹 브라우저의 콘솔창에 출력할 수 있다.

 

<script>
    console.log("Hello World");
</script>

개발자도구의 console창에서 출력을 확인할 수 있다.

 

 

3. window.alert()

	<button onclick="alertDialogBox()">대화상자</button>
    <script>
		function alertDialogBox() {
			alert("대화상자 입니다.");
		}
	</script>

대화상자에 내용을 출력할 수 있다.

대화상자라고 적힌 버튼을 클릭하면 대화상자 내용이 출력되도록 했다.

 

 

 

4.  innerHTML 

	<p id="text">바뀌기 전 문장...</p>
	
	<script>
		var str = document.getElementById("text");
		str.innerHTML = "Hello World";
	</script>

특정 id를 가진 태그의 내용이나 속성을 변경할 수 있다.

document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택하고 innerHTML 프로퍼티를 이용해서 내용이나 속성을 변경한다.

 

 

 

 

변수 / 상수

변수와 상수는 특정 값을 담을 수 있다. 변수, 상수 선언을 위해 let, var, const를 비교한다.

 

var

 

var n = 1;
document.write(n); //1 출력
var n = 2;
document.write(n); //2 출력
n = 3;
document.write(n); //3 출력

var를 이용해 변수를 선언하였다. 같은 변수이름을 여러번 사용해도 문제가 되지 않는다. 간단한 코드를 짤 때는 편할 수 있지만, 혼돈을 야기할 수 있다는 단점이 있다.

var로 선언한 변수는 중복 선언 가능하고, 변수의 값 변경도 가능하다.

 

 

 

const

const c = 1;
c = 2; //에러

중복 선언도, 값 변경도 안되는 것은 변수가 아닌 상수라고 할 수 있다. 상수는 한번 선언하고 값이 바뀌지 않는다. 

상수는 const로 선언할 수 있고, 값 변경시 오류가 생긴다.

 

 

 

let

let n = 1;
console.log(n);
let n = 2; //Cannot redeclare block-scoped variable 'n'.
console.log(n);

let으로 변수를 선언할 수도 있다.

var이 중복 변수선언이 가능한 것과 다르게, let으로 선언한 변수는 변수이름이 같게 중복선언 될 수 없다. 

 

let n = 1;
console.log(n);
n = 2; 
console.log(n);

중복선언 오류를 해결하기 위해서는 재선언이 아닌 변수의 값을 새로 대입한다.

 

 

        var n = 10;
        if (true) {
            var n = 20; 
        }
        document.write(n); //20

var는 지역변수로 사용해도 전역변수에 반영된다.

 

 

        let m = 10;
        if (true) {
            let m = 20; 
        }
        document.write(m); //10

let을 사용하면 지역변수는 지역변수 범위에서만 사용된다. var과 구분할 수 있다.

 

 

var로 선언된 변수는 선언 이전에 참조할 수 있고 이러한 현상을 호이스팅이라고 한다.

 

호이스팅

변수를 선언 이전에 참조할 수 있는 현상

JavaScript에서 변수들은 실제 실행시에 코드의 최상단으로 끌어 올려지게 되어(hoisted) var로 선언된 변수는 선언시에 undefined로 값이 초기화 되는 과정이 동시에 일어난다.

 

console.log(name) //undefined
var name = '홍길동'

선언하기 전에 name 변수를 사용했지만 undefined가 반환되었다.

 

let, const는 변수를 선언 이전에 참조하게 되면 에러를 발생시킨다.

호이스팅으로 예기치 못한 문제가 발생할 수 있으므로 var보다 let을 사용하도록 선호된다.

이러한 문제 때문에 var는 사용하지 않는 것을 선호한다.

 

 

let / const / var 비교

let const var
재할당 가능 재할당 불가능 재할당 가능
재선언 불가능 재선언 불가능 재선언 가능
블록 스코프 갖는 지역 변수 블록 스코프 함수 스코프
  선언시 반드시 초기값 설정해야 하고, 이후 값 변경이 불가능 하다. 호이스팅 된다. (사용X)
    키워드 선언 없으면 자동으로 var로 선언된다.

기본적으로 const를 사용하고 재할당해야 하는 경우에 let을 사용한다.

 

 

 

연산자

1. 대입 연산자

대입연산자 = 으로 값을 대입해준다.

 

let a = 1;
a = a + 3;

 

 

 

2. 산술 연산자(사칙 연산자)

        var n1 = 10;
        var n2 = 7;
        document.write(n1+n2,"<br>");
        document.write(n1-n2,"<br>");
        document.write(n1*n2,"<br>");
        document.write(n1/n2,"<br>");
        document.write(n1%n2,"<br>");

덧셈 뺄셈 곱셈 나눗셈(몫, 나머지) 모두 가능하다.

 

 

 

console.log('5'-1) //4
console.log('5'+1) //51

문자열은 + 로 이어줄 수있기 때문에 +가 오면 5와 1 을 이어준다.

문자열에서 - 연산은 없기때문에 숫자로 바꾸어 숫자 5에서 1을 뺀 4가 나오게 된다.

 

 

 

3.복합 대입 연산자 (덧셈 뺄셈 나눗셈 곱셈) 

	let n = 20;
        n += 4;
        document.write(n,"<br>");
        n -= 3;
        document.write(n,"<br>");
        n *= 2;
        document.write(n,"<br>");
        n /= 7;
        document.write(n,"<br>");
        n %= 9;
        document.write(n,"<br>");

대입연산자 = 와 산술연산자(+,-,*,/,%)을 합친 것이다. +=, -=, *=, /=, %= 으로 연산과 대입을 동시에 할 수 있다.

 

 

 

4. 증감 연산자

	var n1 = 10;
        var n2 = 10;

        document.write(n1,"<br>"); //10
        document.write(n1++,"<br>"); //10
        document.write(n1,"<br>"); //11

        document.write(n2,"<br>"); //10
        document.write(++n2,"<br>"); //11
        document.write(n2,"<br>"); //11

++, -- 증감연산자도 가능하다. 변수와 증감연산자의 순서에 따라 연산 우선순위가 결정되므로 주의한다.

 

 

 

4. 관계 연산자 (비교 연산자)

	var n1 = 10;
        var n2 = 7;

        document.write(n1 > n2,"<br>");
        document.write(n1 < n2,"<br>");
        document.write(n1 >= n2,"<br>");
        document.write(n1 <= n2,"<br>");
        document.write(n1 == n2,"<br>");
        document.write(n1 != n2,"<br>");

>, <, >=, <=, ==, != 으로 두 값을 비교 할 때 사용 할 수 있다.

추가적으로 ===, !== 도 있다.

 

 

	var n1 = 10;
        var n2 = "10";
        document.write(n1 == n2,"<br>"); //true
        document.write(n1 != n2,"<br>"); //false
        document.write(n1 === n2,"<br>"); //false, 데이터와 데이터 타입까지 확인
        document.write(n1 !== n2,"<br>"); //true

숫자 10과 문자열로 입력한 "10"을 비교했다. ==과 !=로 비교할 때는 타입은 구분하지 않고 숫자값만 비교하기 때문에 둘을 같은 것으로 인식한다. 타입까지 구분해주기 위해서는 ===, !==을 사용한다. 둘의 데이터 타입까지 구분을 하게 된다.

 

 

 

5. 논리 연산자

! : NOT

&& : AND

|| : OR

        var n1 = 10, n2 = 15;
        var result = n1 >= 10 && n2 < 20;
        document.write(result,"<br>");
        result = n1 >= 10 || n2 < 20;
        document.write(result,"<br>");
        document.write(!result,"<br>");

 

 

 

반복문

1. while

        var n1 = 1;
        while(n1 <= 10){
            document.write(n1,"<br>");
            n1++;
        }

while문은 ()의 조건이 참일 동안 {} 명령을 수행하는 반복문이다. 숫자 1에서 10까지 출력하였다.

 

 

    <style>
        .red{
            color:red;
        }
        .blue{
            color:blue;
        }
    </style>
    <script>
        //숫자 1~10까지 출력하는 반복문
        //숫자가 짝수면 글자색을 파랑색, 홀수면 글자색을 빨간색으로 숫자 출력
        var i = 1;
        while(i <= 10){
            var tag = i % 2 == 0 ? "<p class='blue'>" + i + "</p>" : "<p class='red'>" + i + "</p>";
            document.write(tag);
            i++;
        }
        //백틱을 이용한 태그 조립
        i = 1;
        while(i <= 10){
            var tag = i % 2 == 0 ? `<p class="blue">${i}</p>`: `<p class="red">${i}</p>`;
            document.write(tag);
            i++;
        }
    </script>

문자열과 변수를 합칠 때 기존에 ""와 +를 이용했다. 따옴표 대신, 백틱(`)을 사용하고 ${ } 사이에 변수나 연산 등을 삽입하면 편리하게 코드를 만들 수 있다. 위의 while문 2개를 통해 비교할 수 있다.

삼항연산자를 이용해 조건이 참일 때의 결과, 거짓일 때의 결과를 한번에 작성하였다.

 

 

 

2. do-while

	i = 1;
        sum = 0;
        do{
            sum += i;
            i++;
        }while(i<1);
        document.write(sum); // 1 출력

do-while은 while()의 조건이 맞지 않더라도 한번은 실행하게 된다. 이후는 조건이 맞을 동안에만 반복한다.

변수 조건이 처음부터 while조건에 부합하지 않지만, do 를 통해서 한번은 실행하여 값이 sum에 저장되도록 하였다.

 

 

3. for

        var dan = Number(prompt('숫자 입력','0'));
        for(i=1;i<10;i++){
            document.write(`<p>${dan} * ${i} = ${dan*i}</p>`);
        }

prompt를 통해 대화상자로 문자열을 입력받았다. 입력받은 문자열인 숫자를 Number으로 숫자로 바꿔준 뒤에 변수에 대입하였다.

for() 조건이 참일 동안 반복문을 수행한다. 

입력받은 숫자의 구구단을 1부터 9까지 수행했다.

 

 

 

  <style>
        .container{
            display: flex;
            flex-direction: row;
        }
        .dan{
            width: 150px;
            padding:10px;
            text-align: center;
        }
        h2{
            text-align: center;
        }
    </style>
    <script>
        //구구단 2단~9단까지 출력
        var tag = `<div class="container">`;
        for(dan=2;dan<10;dan++){
            tag += `<div class="dan"><h2>${dan}단</h2>`;
            for(i=1;i<10;i++){
                tag += `<p>${dan} * ${i} = ${dan*i}</p>`;
            }
            tag += `</div>`;
        }
        tag += `</div>`;
        document.write(tag);

    </script>

 

반복문을 중첩해서 2단부터 9단까지의 구구단을 출력했다. 태그 선택자를 추가해서 flex 속성을 주었다.

 

 

    <script>
        var n = 1;
        var tag = `<table>`;
        for(i=0;i<5;i++){
            tag += `<tr>`;
                for(j=0;j<5;j++){
                    tag += `<td>${n}</td>`;
                    n++;
                }
            tag += `</tr>`;
        }
        tag += `</table>`;
        document.write(tag);
    </script>

반복문 중첩으로 table 태그도 간단하게 만들 수 있다.