22-12-27 JS (자바스크립트) 기본

JavaScript

22-12-27 JS (자바스크립트) 기본 - 첫 수업

JadeStone 2022. 12. 27. 18:05

1. 자바스크립트는 프론트 엔드 뿐 아니라 백 엔드에서도 정말 많이 사용하기에 자바처럼 열심히 공부해두기.

2. 리액트를 사용하기위해서 자바스크립트 언어를 기본적으로 알아야함.

3. 외부와 데이터 통신을 하기 위해서도 자바스크립트가 사용됨.

결론.

백엔드 개발자를 목표로 하더라도 자바스크립트를 열심히 공부하자

자바스크립트를 잘 공부해둘수록 취업할 수 있는 폭도 훨씬 더 넓어진다.

-프로토타입에 관해서는 나중에 공부해보면 좋을것.

-객체지향 언어 + 함수형 언어도 포함.

-브라우저에 자바스크립트 언어를 해석하는 엔진이 포함되어 있다.

-변수들의 타입에 있어서 차이를 두지 않음.

-인터프리터언어 :

한줄 치면 바로 반응이 온다.

대표적으로 python도 있음. 자바는 컴파일 언어.

-참고 싸이트 : w3schools.com

-공식문서 : MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide

-★ 자바 스크립트 언어는 버젼별로 문법이 조금씩 다르다. 특히 큰 버젼업 단위로는 문법의 변화가 엄청 큼.

ES 5 -> 2015 -> ES 6

기본 -> new

ES 5 문법을 기본적으로 공부하고나서 ES 6 에서 새로 추가된 문법들을 공부하는게 맞다.

아직까지도 ES 5 문법이 주류를 이룬다.

그래서 우리는 ES 5 를 공부하고 추가로 ES 6를 공부한다.

#개발환경

-이클립스는 자바스크립트 지원을 잘 안 해줌.

-VS code를 그대로 사용해서 자바스크립트를 공부한다.

*링크를 걸 때 head 안에 걸게되면

자바스크립트 언어가 먼저 실행되게 되는것.

*아래쪽에 링크를 걸게되면 html 문서가 완성되고(화면이 그려지고나서) 마지막에 자바스크립트가 적용이 되는 것.

*나중에 가면 이 순서가 정말 중요.

-세미콜론을 넣어주지 않아도 돌아가지만 넣어주는게 좋다.

*var 변수

-배리에이션 변수라고 함.

-동일한 이름의 변수 선언이 가능. -> 마지막에 적은 변수가 최종적으로 반영이 되는 것.

var 라는 변수 타입을 적지 않아도 실행은 되지만

var 라고 변수타입도 같이 적어주는 것이 더 좋다.

*출력

-document.write 는 브라우저에 출력. (많이 쓰이지는 않음)

-alert 경고창 출력

-console.log 가 제일 많이 쓰임.

*확인

-confirm 확인창 출력

document.wirte 빼고 3개만 잘 알아두면 됨.

<body>
    
    <script>
        //동일 변수의 선언이 가능. 주의
        var a = 10;
        var a = 20;
        a = 100; //변수의 변경

        console.log(a);//콘솔출력
        document.write(a); //html화면 출력 (많이 사용x)
        // alert(a); //경고창
        confirm(a); //확인창

    </script>

</body>

-암묵적으로 데이터 타입을 가지고 있음.

*boolean

-잘못된 연산결과들이 나오면 모두 false로 판별함.

- 0 -> false 로 판단 , 나머지

1,2,3,4,5 ... -> true로 판단.

*undefined

-이것도 타입으로 봄.

-변수를 선언했는데 초기화를 하지 않은 경우.

*null

-값은 저장했으나 존재하지 않을 때 나타납니다.

undefined 랑 null 을 잘 구분해두자.

#참조타입

*배열

[] 로 나타냄

*객체

{} 로 생성 -> 아주아주 중요함. ★★★★★

*typeof 연산자를 이용하면 변수의 타입을 알 수 있음.

-사용법 :

console.log( 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>Document</title>
</head>
<body>
    
    <script>
        var num1 = "10"; //문자 ok
        var num2 = '10'; //문자
        var num3 = 10; //숫자

        //변수의 변경 - 타입을 지키지 않아도 됩니다.
        num1 = 3.14;
        num2 = 10;
        num3 = '10';

        //숫자 + 숫자 = 숫자, 숫자 + 문자 = 문자
        var result = num1 + num2+ num3
        console.log(result);
        console.log(10 +3.14); //13.14
        console.log(20 + '20'); //2020
        console.log(10 + undefined); //NaN -> 잘못된 연산

        //데이터타입 number, str, boolean, undefined, null
        var bool = true; //false
        console.log(bool);

        //undefined - 초기값을 지정하지 않으면 나타납니다.
        var un;
        console.log(un)

        //null - 초기값을 지정했는데, 값이 존재하지 않을 때 나타납니다.
        var tag = document.getElementById("a");
        console.log(tag);

        //키워드 - typeof
        //변수의 타입이 뭔지 알 수 있음.
        console.log(typeof num1);
        console.log(typeof num3);
        console.log(typeof bool);
        console.log(typeof un);
        console.log(typeof tag); //object라고 표현되면 객체라는 의미.

    </script>

</body>
</html>

결과