[JavaScript] 자바스크립트(visual Studio Code)

728x90

자바스크립트 확장프로그램 설치

- JavaScript (ES6) code snippets(ECMA 스크립트)

es 검색 ->JavaScript (ES6) snippets 설치

자바스크립트
- 객체 기반의 스크립트 프로그래밍 언어(인터프리터)
- 웹브라우저 내에서 주로 사용, 다른 응용프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있음
- 대소문자 구별
- HTML문서 내에서 사용할 때는 <script> ~ </script> 태그 안에 작성

자바스크립트의 출력
- HTML 문서에 출력
    document.write() 함수를 통해 출력
    document.write('<h2>안녕하세요</h2>');

- console에 출력
    console.log() 함수를 통해 출력
    console.log('안녕하세요');

자바스크립트의 주석
- 한줄 주석 : //
- 여러줄 주석 : /* ... */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트의 출력</title>
</head>
<body>
    <h2>자바스크립트의 출력</h2>
    <script>
        /*
            작성일 : 2022-04-28
            작성자 : 유영은
            비고 : 자바스크립트의 출력
        */
        document.write('<p>안녕하세요. javascript</p>'); // body에 출력
        console.log('안녕하세요. javascript') // console에 출력
    </script>
</body>
</html>

외부 자바스크립트 파일로 적용
<script src="자바스크립트 파일 경로"></script>

외부 자바스크립트 파일

console.log('이번주 금요일은 휴가입니다!! 다음주 월요일에 봐요!');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>외부 자바스크립트</title>
    <script src="./js/script.js"></script>
</head>
<body>
    <h2>외부 자바스크립트</h2>
</body>
</html>

변수
- 데이터를 저장할 수 있는 메모리 공간

    let 변수명; // 변수의 선언
    변수명 = 값; // 변수의 초기화(값에 따라 타입이 결정)

    let 변수명 = 값;

    let num;    // let num = 10;
    num = 10;

😑 var를 사용하지 않는 이유

    var num;
    num = 10;
    ...
    ...
    var num; // 에러 안남.
    num = 5;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>변수</title>
</head>
<body>
    <h2>변수</h2>
    <script>
        'use strict';
        let num;
        num = 10;
        console.log(num);

        // let num; // 에러
        let str;
        console.log(str); // undefined : 타입이 정해지지 않음.
        str = "김사과";
        console.log(str);
        str = "오렌지";
        console.log(str);
    </script>
</body>
</html>

⭐ babel 라이브러리
- IE와 다른 구형 브라우저에 맞게 ES5이하 버전으로 변환해주는 라이브러리

⭐ use strict
- strict mode를 사용한다는 의미
- strict mode : 코드를 엄격하게 사용하도록 함.

상수
- 한번 선언된 상수는 다시 재정의 할 수 없으며, 값도 재할당 할 수 없음

    const 상수명;
    상수명 = 값;    // 에러. 선언과 동시에 값을 할당해야함.

    const 상수명 = 값;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상수</title>
</head>
<body>
    <h2>상수</h2>
    <script>
        'use strict';
        // const num;
        // num = 10; // 에러. 선언과 초기화 동시에 값을 할당해야함.
        
        const str = "일";
        
        const obj = {id:'apple', name:'김사과'};
        // obj = 10; // 에러. 값 재할당 x

        // 변수는 값을 저장하는게 아니라 주소를 저장. 
        obj.id = 'banana';
        obj.name = '반하나'; // 에러 x. 주소를 바꾸는 것이 아닌 힙의 값을 바꾸는 것이기 때문.

        console.log(obj);
    </script>
</body>
</html>

자바스크립트의 데이터타입(형)
타입 : 프로그램에서 다룰 수 있는 값의 종류를 의미

1. 숫자형(number)
- 정수와 실수를 따로 구분하지 않음
- 모든 수를 실수 하나로만 표현

✅ typeof()
자바스크립트의 타입을 반환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>숫자형</title>
</head>
<body>
    <h2>숫자형</h2>
    <script>
        'use strict';
        const num1 = 10;
        const num2 = 11.11;
        const num3 = 10e6; // 10의 6승

        console.log(num1);
        console.log(num2);
        console.log(num3);

        console.log(typeof(num1));
        console.log(typeof(num2));
        console.log(typeof(num3));
    </script>
</body>
</html>

2. 문자열형(string)
- 문자열형은 따옴표로 둘러싸인 문자의 집합

    let str1 = "김사과 : '여러분 안녕하세요?'"; // 김사과 : '여러분 안녕하세요?'
    let str2 = '김사과 : "여러분 안녕하세요?"'; // 김사과 : "여러분 안녕하세요?"
    let str3 = "김사과 : \"여러분 안녕하세요?\""; // 김사과 : "여러분 안녕하세요?"
    let str4 = `여러분 안녕하세요?
    이번주 금요일 휴강인데
    너무 신나요~`; // 줄바꿈, 띄어쓰기 그대로 출력

    let num1 = 5;
    let num2 = 3;
    // 5 + 3 = 8
    console.log(num1 + " + " + num2 + " = " + (num1 + num2));
    console.log(`${num1} + ${num2} = ${num1 + num2}); // ${} 변수 찍는 공간.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문자열형</title>
</head>
<body>
    <h2>문자열형</h2>
    <script>
        'use strict';
        let str1 = "김사과 : '여러분 안녕하세요?'"; // 김사과 : '여러분 안녕하세요?'
        let str2 = '김사과 : "여러분 안녕하세요?"'; // 김사과 : "여러분 안녕하세요?"
        let str3 = "김사과 : \"여러분 안녕하세요?\""; // 김사과 : "여러분 안녕하세요?"
        let str4 = `여러분 안녕하세요?
        이번주 금요일 휴강인데 
        너무 신나요~`; // 줄바꿈, 띄어쓰기 그대로 출력

        console.log(str1);
        console.log(str2);
        console.log(str3);
        console.log(str4);

        let num1 = 10;
        let num2 = 5;
        let str5 = "10";
        console.log(num1 + num2); // 숫자연산 15
        console.log(num1 + str5); // 문자연산 1010
        console.log(num1 * str5); // 숫자연산 100. 자동형변환
        console.log(typeof(num1)); // number
        console.log(typeof(str5)); // string

        console.log(num1 + " + " + num2 + " = " + (num1 + num2));
        console.log(`${num1} + ${num2} = ${num1 + num2}`); // ${} 변수 찍는 공간.
    </script>
</body>
</html>

3. 불리언형(boolean)
- 참(true) 또는 거짓(false)으로 표현되는 값

const b1 = true; // 비교연산에 값이 있는 경우 true
const b2 = false; // 0, null, undefined, "" 이면 false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>불리언형</title>
</head>
<body>
    <h2>불리언형</h2>
    <script>
        'use strict';
        const b1 = true;
        const b2 = false;

        console.log(b1);
        console.log(b2);
        console.log(typeof(b1));
        console.log(typeof(b2));
    </script>
</body>
</html>

4. undefined, null 형
- undefined : 타입이 정해지지 않은 타입

    let num;
    console.log(num); // undefined

- null : 값이 정해지지 않은 것을 의미, null로 변수를 초기화한 경우

    let dog = null;
    console.log(dog); // null
    console.leg(typeof(dog)) // object(객체타입)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>undefined / null</title>
</head>
<body>
    <h2>undefined / null</h2>
    <script>
        'use strict';
        let num;
        console.log(num); // undefined
        console.log(typeof(num)); // undefined

        let obj1 = null;
        console.log(obj1); // null
        console.log(typeof(obj1)); // object

        let obj2 = {};
        console.log(obj2); // 값이 없는 값으로 들어가 있음.
        console.log(typeof(obj2)); // object
    </script>
</body>
</html>

5. 객체형
- 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 타입
- 키와 값의 구조로 저장

    const dog = {'name' : 'Rucy', 'age':11, 'family':'포메'};
                 ------   -----
                  key     value
    객체명.key
    dog.name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>객체형</title>
</head>
<body>
    <h2>객체형</h2>
    <script>
        'use strict';
        const dog = {'name' : 'Rucy', 'age':11, 'family':'포메'};
        console.log(dog);

        // 자바스크립트에서의 변수 : 프로퍼티
        console.log(dog.name);
        console.log(dog.age);
        console.log(dog.family);

        dog.age = 11;// 주소를 바꾸는 것이 아니라 주소의 값을 바꾸는 것이기 때문에 가능.
        console.log(`2022년 루시의 나이는 ${dog.age}살 입니다.`);

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

6. 심볼형
- 유일하고 변경 불가능한 기본값을 만듬
- 객체 속성의 key값으로 사용할 수 있음

    const symbol1 = symboll('apple');
    const symbol2 = symbol1('apple');
    console.log(symbol1 === symbol2); // false. === : 값과 주소가 모두 같아야함.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>심볼형</title>
</head>
<body>
    <h2>심볼형</h2>
    <script>
        'use strict';
        const symbol1 = symboll('apple');
        const symbol2 = symbol1('apple');
        console.log(symbol1 === symbol2); // false

        const symbol3 = symbol('banana');
        const symbol4 = symbol3;
        console.log(symbol3 === symbol4); // true. 같은 값을 가르키기 때문.
    </script>
</body>
</html>

728x90

저작자표시 비영리 동일조건

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

[JavaScript] 자바스크립트 제어문 (0)	2022.04.28
[JavaScript] 자바스크립트 연산자 (0)	2022.04.28
[JavaScript] 자바스크립트 대화 상자 (0)	2022.04.28
[JavaScript] 자바스크립트의 타입 변환 (0)	2022.04.28
[JavaScript] 자바스크립트 역사 (0)	2022.04.28

개발일지

[JavaScript] 자바스크립트(visual Studio Code)

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

티스토리툴바

[JavaScript] 자바스크립트(visual Studio Code)

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

'JS/JavaScript' 관련글

티스토리툴바