자바 스크립트(JAVA SCRIPT)의 개념과 기본 문법

※HTML과 CSS로 웹 사이트를 구현하고 디자인했다면 이제는 자바 스크립트(JAVA SCRIPT)를 이용하여 동적인 기능을 추가해 줘야 합니다. 이번 시간은 자바스크립트의 기본적인 개념과 기본 문법 등을 알아보고 간단한 사용방법 등을 알아보도록 하겠습니다.

목차

1. 자바스크립트(JAVA SCRIPT) 란?

2. 자바스크립트(JAVA SCRIPT)의 기본 문법

 

1. 자바스크립트(JAVA SCRIPT) 란?

※자바스크립트(JAVA SCRIPT)란 웹을 위한 인터프리터 언어이자 객체기반의 스크립트 프로그래밍 언어입니다.

HTML의 특정 요소들을 선택하여  어떠한 동작(이벤트)을 발생시키는 언어라고 생각하시면 됩니다. 이벤트에 따라 HTML, CSS를 조작할 수 도 있습니다.

요약한다면 웹 페이지에 기능을 더하여 HTML 페이지를 동적으로 만들어주는 것입니다.

 

자동차를 예로 들면 HTML로 자동차의 구조를 구현하고 CSS를 통하여 디자인, 색상등을 꾸미고, 자바 스크립트를 이용하여 창문을 내리거나 엑셀이나 브레이크를 밟았을 때에 특정한 동작을 하도록 하는 역할이라고 생각하시면 됩니다.

 

 

- 자바스크립트의 특징

1. 자바스크립트는 객체 기반의 스크립트 언어이다.
2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.
3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

- 자바스크립트의 장점

• 컴파일과정이 필요 없어 빠른 시간 안에 스크립트 코드를 작성할 수 있다.
• 다른 언어들에 비해 단순한 구조와 원칙을 갖고 있어 배우기 쉽다.
• 웹에 특화된 기술이기 때문에 운영체제나 플랫폼에 상관없이 잘 작동되고 확장성이 높다.

- 자바스크립트의 단점

• OS에 직접 접근할 수 없다.
• 하드디스크를 읽거나 쓸 수 없다.
• 다른 프로그램을 호출할 수 없다.
• 자바스크립트는 도메인이 동일한 두 탭/윈도를 제외하고 탭/윈도 간에 통신을 수행할 수 없다.
• 자바스크립트는 웹 브라우저에서 실행되기 때문에 일부 보안상의 제약이 있으며, 브라우저에서 웹 페이지를 열 때 안전하고 위험에 처하지 않도록 보장해야 한다.
• 일반적으로 자바스크립트는 자체 도메인에 대해서만 제한 없이 네트워크 요청을 보낼 수 있다.

 

 

2. 자바스크립트(JAVA SCRIPT)의 기본 문법

 

@변수

변수는 값(value)을 저장(할당)하고 그 저장된 값을 참조하기 위해 사용합니다. 

변수는 위치(주소)를 기억하는 저장소입니다. 위치란 메모리 상의 주소(address)를 의미하며, 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)입니다.

@코드로 보기

    <script>

        var x = 1;

        let y = 1;

        x = 100;

        y = 100;

        var x = 100;

        var y = 100; /*let 은 재할당은 가능하나 재선언은 불가능*/

        document.write("x = " + x + "<br>");

        document.write("y = " + y + "<br>");

    </script>

위 코드와 같이 "let  변수이름 =  값", "var 변수이름 = 값"으로 선언합니다. 

var는 재 할당, 재 선언이 둘 다 가능하며 값이 변형될 가능성이 많기에 재 선언이 불가능한 let이 개발되었고 둘 다 사용은 가능하나 안정성을 위해 let을 사용합니다.

 

 

@상수

상수는 선언방식은 변수와 동일하나 변수는 재 선언 또는 재 할당이 가능한 반면 한번 선언하면 재 할당 및 재 선언이 불가능한 변수를 말합니다.

@코드로 보기

    <script>

        const x = 1;

        x = 100; /*재할당 불가능*/

        const x = 1; /*재선언 불가능*/

        document.write("x = " + x + "<br>");

    </script>

    

위 코드와 같이 "const 상수이름 = 값"으로 선언하며 재 선언, 재 할당이 불가능합니다. 

 

 

@연산자

 

-비교 연산자

구문	의미
A == B	A, B의 값이 같은가
A === B	A, B의 값과 데이터 타입이 같은가
A != B	A, B의 값이 다른가
A !== B	A, B의 값과 데이터 타입이 다른가
A < B	A가 B보다 작은가
A <= B	A가 B보다 작거나 같은가
A > B	A가 B보다 큰가
A >= B	A가 B보다 크거나 같은가

 

-대입 연산자

구문	의미
x = y	x = y (대입)
x += y	x = x + y (더하기)
x -= y	x = x - y (뺄셈)
x *= y	x = x * y (곱셈)
x **= y	x = x ** y (제곱)
x /= y	x = x / y (나눗셈)
x %= y	x = x % y (나머지)

 

@조건문

-if, swich문이 있으며 사용방식은 JAVA와 동일하다

 

@반복문

-for, while문이 있으며 사용방식은 JAVA와 동일하다

 

 

@배열

-이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의됩니다.

배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다.

@코드로 보기

    <script>

        /*선언방법 1*/

        var arr = [];

        arr[0] = 1;

        arr[1] = "이"; /*문자열은 ""로 구분*/

        arr[2] = "3"; /*""로 구분되어 있다면 문자열로 구분*/

        /*선언방법 2*/

        var arr = [1,2,"삼"]

 

        /*선언방법 3*/

        var arr = new Array(1,2,"삼");

    </script>

위 코드처럼 선언할 수 있으며 숫자값은 그대로 입력, 문자열을 ""을 구분해 줍니다.