JavaScript (자바스크립트)

JavaScript

정식 명칭 ECMA스크립트 (ECMAScript)
ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어
ES6
- default parameter
- class
- arrow function
- const
- let

JavaScript란?

동적인 웹 페이지를 작성하기 위하여 사용되는 언어
웹 표준 프로그래밍 언어
모든 웹 브라우저에서 자바스크립트 지원
웹 브라우저 뿐 아니라 스마트폰용 애플리케이션 개발 등 각종 분야에서 능력과 가치를 인정받고 있음
초기에는 브라우저에 내장되어 제한된 기능만 지원하였으나, 현재 Ajax(Asynchronous JavaScript and XML) 기술과 함께 영향력 증가
전 세계에서 가장 많이 사용되는 언어

기능

HTML이 지원하지 못하는 다양한 기능 지원
- 동적 움직임 / 이벤트 발생 처리 / 경고 메시지 출력 / 데이터 유효성 확인 / 멀티미디어 기능
Ajax를 이용하여 새로운 내용을 동적으로 로딩하거나 서버에 전송하여 동적인 페이지 생성
애니메이션 기능 지원
브라우저 사용자의 특성(웹 페이지 탐색 움직임, 게시물 읽을 때의 습관 등)에 대한 정보를 서버로 전송하여 웹 분석, 사용자 동작 트래킹 분석, 웹서비스 개인화 등에 사용

자바 스크립트 실행

스크립트 언어이기 때문에 컴파일 되지 않고
인터프리터(해석기)를 통해 웹 브라우저에서 한 줄씩 바로 실행

스크립트 언어(인터프리팅 언어)

독자적으로 실행되지 않고 다른 프로그램에 내장되어 사용
소스코드를 컴파일하지 않고 한 줄씩 인터프리터를 통해 바로 실행
대표적인 인터프리팅 언어: C

자바 스크립트의 용도

이벤트에 반응하는 동작 구현
HTML 요소들을 동적으로 변경
사용자가 입력한 값들을 검증
게임이나 애니메이션 / 멀티미디어 기능 구현
Ajax 기술을 사용하여 서버와 데이터를 비동기적으로 교환

비동기식 처리

서버 측에 데이터를 요청한 후 데이터 수신이 완료될 때까지 기다리지 않고 다른 작업 진행이 가능한 기술

자바스크립트에서의 변수

프로그램 실행 중에 값을 저장하기 위한 메모리 내의 임시 기억 장소

자바스크립트에서 식별자(변수명, 함수명 등 명명 규칙)

시작은 반드시 영문자나 _ 사용. 숫자로 시작하지 않음
대소문자 구별
키워드 사용할 수 없음
특수문자, 공백 사용할 수 없음
한글 사용 가능(영문 사용 권장 - 한글 사용 안 함)
의미 있는 단어 사용 (name, address, age)

변수 선언

var
let
const
EX6 이후 보완하기 위해 추가된 변수 선언 방식: let과 const

변수 선언 특징

변수를 필요한 곳에 사용하면 자동으로 생성되기 때문에 반드시 선언하지 않아도 됨
변수의 데이터 타입은 실행 시 결정 (동적 타이핑)
명시적으로 선언하는 경우에는 예약어 var 사용(명시적 선언 권장)
var total; // 명시적 선언
var name, address; // 여러 개 선언 가능
var price = 0; // 변수 초기화(선언과 동시에 값 저장)
var name = "홍길동";
tel = "010-1234-5678";

정적 타이핑 언어 Vs. 동적 타이핑 언어

정적 타이핑 언어

변수의 자료형을 컴파일 시에 결정
C, C++, Java 등
선언한 변수의 자료형에 따라 값 결정
int a; // 변수의 선언. 정수형(4바이트 값을 저장하기 위한 공간 확보)
int a = 10; // 변수의 선언과 동시에 값 저장 -> 변수 초기화
선언 - > 컴파일러에게 알리는 것 -> 실행 시 메모리 할당받기 위해 (운영체제로부터 필요한 만큼 확보하기 위함)

동적 타이핑 언어

변수의 자료형을 실행할 때 결정
자료형 없이 변수에 값 저장
JavaScript, Python 등

variable.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript">
        // 명시적 선언
        var num=10, pi=3.14;
        var ch = 'a';
        var name = "홍길동";

        // 명시적으로 선언하지 않고 값 저장
        address = "서울시 강남구";
        nation = '대한민국'; // 문자열에 작은 따옴표 사용 가능

        document.write(num); // 변수 값 출력
        document.write("<br>");
        document.write(ch);
        document.write("<br>");
        document.write(name);
        document.write("<br>");
        document.write(address);
        document.write("<br>");
        document.write(nation);
    </script>
</head>
<body>
</body>
</html>

변수의 유형

멤버 변수 (전역 변수)
- 전역 범위(<script> 태그 바로 아래)에 명시적으로 선언되거나
- 명시적으로 선언하지 않고 사용하는 모든 변수
  - var의 유무에 관계없이 전역 변수
- 자바스크립트 코드 내 모든 곳에서 사용 가능
지역변수
- 함수 내에서 var을 붙여서 선언된 변수
- 함수 내에서만 사용 가능
- 함수 내에서 var을 붙이지 않고 사용하는 변수는 모두 전역 변수로 간주

variableLocal.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 지역변수</title>
    <script type="text/javascript"> 
        function f1() {
            // 지역변수 : 함수 내에서 var 붙인 변수
            var localVal1 = 100;
            document.write(localVal1 + "<br>");
        }
        f1();
        // 함수 밖에서 불렀기 때문에 출력되지 않음
        //document.write(localVar1 + "<br>");

        function f2() {
            // 함수 내에서 var 안붙이고 선언된 변수 -> 함수 밖에서도 사용 가능
            localVar2 = 200;
        }
        f2();
        document.write(localVar2 + "<br>");

        function f3() {
            // 지역변수 : 함수 내에서 let 붙인 변수
            // 함수 내에서만 사용 가능
            let localVar3 = 300;
        }

        f3();
        document.write(localVar3 + "<br>"); // 오류
    </script>
</head>
<body>
</body>
</html>

variableGlobal.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 전역변수 / 지역변수</title>
    <script type="text/javascript"> 
        // var의 유무 관계없이 전역변수
        // 어디서든 사용 가능
        var x=5, y=10; // var이 있는 명시적 선언. 전역 변수
        total=0; // var 없이 값 저장. 전역 변수

        function f1() { // 모든 전역변수 사용 가능
            x = x + y;
            document.write(x + "<br>");
        }

        function f2() { // 모든 전역변수 사용 가능
            total = x + y;
            document.write(total + "<br>");
        }

        f1();
        f2();
    </script>
</head>
<body>
</body>
</html>

var Vs let

var과 let의 차이점은 scope
- var : function 단위의 scope
- let : { }(block) 단위의 scope
차이점 2
- var은 동일 변수명을 여러 개 선언해서 사용해도 오류 없음
- let은 이미 선언된 변수명은 다시 사용할 수 없음
const : 상수의 개념 (값 변경 불가)

var_let.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript var Vs. let</title>
    <script type="text/javascript">
        // 동일 변수명 중복 선언 가능 (오류 없음)
        var name = "홍길동";
        console.log(name);

        var name = "이몽룡";
        console.log(name);

        // 동일 변수명 중복 선언 불가능
        let person = "홍길동";
        console.log(person);

        let person = "이몽룡";
        console.log(person);
    </script>
</head>
<body>
</body>
</html>

var_let2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript var Vs. let</title>
    <script type="text/javascript">
        /*
        sum = 0;
        for(var i = 0; i<10;i++){
            sum += i;
        }

        console.log(i); // for문 밖에서 i 사용 가능
        */
        sum = 0;
        for(let i = 0; i<10;i++){
            sum += i;
        }

        console.log(i); // for문 밖에서 i 사용 불가 -> block 안에서만 사용 가능
        // let : if문 안에서 선언했으면 if문 안에서만 사용 가능
    </script>
</head>
<body>
</body>
</html>

const.html

const : 상수 개념. 값을 변경할 수 없음
값이 변경되지 않을 경우 변수로 사용 가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript const</title>
    <script type="text/javascript">
        let name = "홍길동";
        console.log(name);

        name = "이몽룡";
        console.log(name);

        const address = "서울";
        console.log(address);

        // const : 상수 개념. 값을 변경할 수 없음
        const address = "캐나다";
        console.log(address);
    </script>
</head>
<body>
</body>
</html>

호이스팅(Hoisting)

선언문 이전에 변수를 사용하는 것
var로 선언된 변수는 사용 가능
let으로 선언된 변수는 사용 불가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 호이스팅</title>
    <script type="text/javascript">
        // 호이스팅 : 선언문 이전에 변수 사용
        // let은 사용 불가
        // var 사용 가능
        console.log(name);
        var name = "홍길동";

    </script>
</head>
<body>
</body>
</html>

연산자

자바와 동일
https://hyeon99-dev.tistory.com/12?category=968763 참고

저작자표시 비영리 동일조건 (새창열림)

'Front > JavaScript' 카테고리의 다른 글

JavaScript - 특수문자 처리 (0)	2021.12.08
JavaScript - 반복문 (0)	2021.12.08
JavaScript - 제어문 (0)	2021.12.08
JavaScript -데이터 타입 (0)	2021.12.07
JavaScript - 사용법, 데이터 입력 방법 (0)	2021.12.07

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

여행하는 개발자

JavaScript - 변수와 연산자

JavaScript (자바스크립트)

JavaScript

JavaScript란?

기능

자바 스크립트 실행

스크립트 언어(인터프리팅 언어)

자바 스크립트의 용도

비동기식 처리

자바스크립트에서의 변수

자바스크립트에서 식별자(변수명, 함수명 등 명명 규칙)

변수 선언

변수 선언 특징

정적 타이핑 언어 Vs. 동적 타이핑 언어

정적 타이핑 언어

동적 타이핑 언어

variable.html

변수의 유형

variableLocal.html

variableGlobal.html

var Vs let

var_let.html

var_let2.html

const.html

호이스팅(Hoisting)

연산자

'Front > JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

JavaScript - 변수와 연산자

JavaScript (자바스크립트)

JavaScript

JavaScript란?

기능

자바 스크립트 실행

스크립트 언어(인터프리팅 언어)

자바 스크립트의 용도

비동기식 처리

자바스크립트에서의 변수

자바스크립트에서 식별자(변수명, 함수명 등 명명 규칙)

변수 선언

변수 선언 특징

정적 타이핑 언어 Vs. 동적 타이핑 언어

정적 타이핑 언어

동적 타이핑 언어

variable.html

변수의 유형

variableLocal.html

variableGlobal.html

var Vs let

var_let.html

var_let2.html

const.html

호이스팅(Hoisting)

연산자

'Front > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역