01. JavaScript-자바 스크립트

HTML로 웹의 뼈대를 잡고 CSS를 이용하여 꾸미는 방법까지 익혔습니다.

 

이에 더해 javascript 문법을 배워보도록 하겠습니다.

1. 자바스크립트의 특징

  - 객체 기반의 스크립트 언어
  - 대소문자 구별
  - 문장 끝에 ;(세미콜론)을 사용(생략이 가능)

 

2. 자바스크립트의 출력

  - Web API Console을 통해 브라우저 Console 창에 출력

 

3. 자바스크립트의 삽입 방법

  i. <script> ~ <script> 에 작성
  ii. <script src='파일명'></script>

 

    ✔ 자바스크립트의 실행 순서는 인터프리터 해석 방식이므로 위에서 아래로 실행

    ✔ 주석문  // : 한줄 주석,   /* 내용 */ : 여러 줄 주석

 

4. 익스텐션 설치

    JavaScript (ES6) code snippets

 

   JavaScript (ES6) code snippets 까지 설치를 마쳤다면 JavaScript를 다룰 준비가 됐습니다!

 

 

문법

1. 자바스크립트의 변수

    - 데이터를 저장한 레터럴을 가리키는 메모리 공간
    - 값이 변경될 수 있음
    - 자바스크립트의 변수는 타입이 없음
    - let 키워드를 사용하여 변수를 선언

 

변수 선언방식을 파이썬과 비교하여 살펴보겠습니다.

파이썬	자바 스크립트
name = '채주완'	let name = '김사과'

※  추천하지 않는 방식

아주 옛날 옛적 변수 선언
var name = '김사과';
- 유연한 변수 선언 방식
- 지역변수, 전역변수와의 구별이 없음
- 같은 이름의 변수를 선언할 수 있음

 

e.g.)

console.log(num);  // undefined
var num = 10;

{
    console.let(num); // 전역변수 num = 10
    var num = 20;
    console.let(num); // 지역변수 num = 20
}
console.log(num); // 전역변수 num = 20

 

지역변수, 전역변수와의 구별이 없어 애매한 경우들이 빈번함.

 

따라서 추천하는 방식은 let을 이용하는 것입니다.

 

  1-1. let

    - 지역변수, 전역변수의 구별이 확실
    - 같은 이름의 변수를 선언할 수 없음

 

 

 

html, css와 동일하게 Alt + L + O를 차례로 눌러 가상 웹을 실행합니다.

여기서  F12키를 눌러 확인합니다.

 

 

2. 자바스크립트의 상수(Constant)

    - 한번 선언된 상수는 다시 재정의할 수 없음
    - 값을 재할당 할 수 없음
    - 개발자의 실수를 방지하기 위해 권장
    - 해킹을 방지하기 위한 목적
    let name; // 변수의 선언 
    name = '김사과'; // 값 할당

    let name = '김사과' // 변수의 선언 및 할당

    const name;
    name = '김사과' (X)

    const name = '김사과' (O)

 

3. 자바스크립트의 데이터 타입(Data Type)

    - 프로그램에서 다룰 수 있는 값의 종류
    - 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생할 수 있음
    - 자바스크립트의 타입 유연성을 해결하기 위해 MS에 만든 타입스크립트가 존재

 

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

  2-2. 문자형(string)
    '', "", ``로 둘러싸인 문자의 집합

  2-3. 논리형(boolean)
    - 참(true), 거짓(false)으로 표현되는 값
    - false, 0, '', null, undefined는 모두 거짓(false)으로 판정
    - false가 아닌 모든 값은 참(true)로 판정함

  2-4. undefined
    - 타입이 정해지지 않은 타입(변수 선언 후 값이 정해지지 않은 경우)

  2-5. null
    - null을 저장한 값
    - 값이 없는 것(객체)

  2-6. 심볼형(symbol)
    - 유일하고 변경 불가능한 기본 값을 만듦
    - 객체 속성의 key로 사용
    const sym1 = Symbol('apple');
    const sym2 = Symbol('apple');

  2-7. 객체형(object)
    - 어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합
    - key value pair 구조로 저장

 

자바 스크립트의 경우는 파이썬과 달리 문자열내에 숫자가 있다면 숫자로 자동으로 타입을 변환해줍니다. 

4. 자바스크립트의 자동 타입 변환

    - 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용
        const num4 = 10;
        const str3 = '10';
        console.log(num4 + str3);
        console.log(num4 - str3);
        console.log(num4 * str3);
        console.log(num4 / str3);

 

※ NaN(Not a Number)
    - '정의되지 않은 값이나 표현할 수 없는 값'을 의미
    - 숫자로 변환할 수 없는 연산을 시도

 

 

5. 자바스크립트의 타입 변환 함수

    - 강제로 타입을 변환하는 함수

Number()	문자를 숫자로 변환
String()	숫자나 불린 등을 문자형으로 변환
Boolean()	문자나 숫자 등을 불린형으로 변환
Object()	모든 자료형을 객체형으로 변환
ParseInt()	문자를 소수없는 정수형으로 변환
ParseFloat()	문자를 실수형으로 변환

 

 

6. 자바스크립트의 대화 상자

Web API: 브라우저에서 제공하는 API(Application Programming Interface)

 

alert()	사용자에게 메세지를 보여주고 확인을 기다림
confirm()	사용자에게 메세지를 보여주고 확인이나 취소를 누르면 그 결과를 불린값으로 반환
prompt()	사용자에게 메세지를 보여주고 사용자가 입력한 문자열을 반환

 

alert('안녕하세요! 자바스크립트!');로 인해 다음과 같은 대화상자가 나타납니다.

 

consr result = confirm('확인 또는 취소를 눌러주세요!');로 인해 다음과 같이 확인, 취소 두 가지의 선택지가 나타나는 대화상자가 나타납니다.

const name = prompt('당신의 이름을 입력하세요.'); 는 파이썬에서의 input()함수와 유사하게 사용자에게 값을 입력받습니다.

console.log(typeof(name));은 해당 변수의 타입을 알려줍니다.

이번에는 태어난 해로부터 현재까지 몇년이 흘렀는지 알기 위한 코드입니다.

 

const year = prompt('당신의 출생년도를 입력하세요.');

console.log(2024-year);

 

2000을 입력하였더니 2024-2000 = 24로 24가 출력됩니다.

const num1 = prompt('첫번째 숫자를 입력하세요.');

const num2 = prompt('두번째 숫자를 입력하세요.');

console.log(num1 + num2);

console.log(Number(num1) + Number(num2));                <= 파이썬에서 int(input())와 비슷한 과정입니다.

12, 23을 차례로 입력하였습니다. 첫 행은 문자열로 인식하여 문자열을 합친 결과이고 두번째 행은 숫자로 타입을 변경 후 더하기 연산자를 진행한 결과입니다.

 

 

배웠던 내용을 정리할 수 있는 예제를 풀어보도록 하겠습니다.

 

문제. 

prompt로 이름, 국어 점수, 수학 점수, 영어 점수를 입력받아 아래와 같이 총점과 평균을 출력하는 HTML 문서를 작성해보자.
(단, console에 출력)

채주완님의 성적표
국어: xx점
수학: xx점
영어: xx점
총점: xx점
평균: xx점

 

 

7. 자바스크립트의 연산자

파이썬에서와 유사하게 자바 스크립트내에서 연산자가 존재합니다. 이 중 증감 연산자, 삼항 연산자는 파이썬에서 없던 개념이므로 유념해서 보면 좋겠습니다.

 

7-1. 산술 연산자
    +, -, *, /, %, **

7-2. 비교 연산자
    >, <, >=, <=, ==, !=, ===, !==
    ===: 두 식의 값이 같고, 타입이 같아야 함
    예) 
        3 == 3 -> true
        '3' == 3 -> true
        '3' === 3 -> false
    !==: 두 식의 값이 다르고, 타입까지 달라야 함

7- 3. 대입 연산자
    =, +=, -=, *=, /=, %=, **=

7- 4. 증감 연산자
    ++변수, --변수, 변수++, 변수--

    예) 
    let num = 10
    ++num // 11   num = num + 1
    --num // 10   num = num - 1
    num++ // 11   num = num + 1
    num-- // 10   num = num - 1

    let num = 10
    result = ++num; // num = 11, result = 11     <= '+(덧셈)'의 우선순위가 더 높습니다.
    result = num++; // num = 12, result = 11     <= '=(등호)'의 우선순위가 더 높습니다.

7- 5. 논리 연산자
    &&(and), ||(or), !(not)

7- 6. 비트 연산자
    &(and), |(or), !(not), ^(xor), <<(left shift), >>(right shift)

7- 7. 삼항 연산자

    변수 = 조건식 ? 반환값1 : 반환값2

    - 조건식의 결과가 true일 때 반환값1이 변수에 저장
    - 조건식의 결과가 false일 때 반환값2가 변수에 저장

 

 

 

8. 자바스크립트의 if문

파이썬에서 if문을 다뤄본 적이 있기에 쉽게 이해할 수 있습니다.

 

if(조건식){
        조건식의 결과가 true일 때 실행할 문장;
        ...
    }


    if(조건식){
        조건식의 결과가 true일 때 실행할 문장;
        ...
    }else{
        조건식의 결과가 false일 때 실행할 문장;
        ...
    }

    if(조건식1){
        조건식1의 결과가 true일 때 실행할 문장;
        ...
    }else{
        모든 조건식의 결과가 false일 때 실행할 문장;
        ...
    }

 

age: 20인 경우

age: 15인 경우

 

 

age: 8인 경우

9. 자바스크립트의 switch문

파이썬에서 다루어본 적 없던 개념이지만 어렵지 않아 쉽게 이해할 수 있습니다.

 

 

switch(변수 또는 값) {
        case 값1:
            변수와 값1이 같은 경우 실행할 문장;
            ...
            break;
        case 값2:
            변수와 값2가 같은 경우 실행할 문장;
            ...
            break;
        ...
        default:
            변수와 모든 값이 다를 경우 실행할 문장;\
            ...
    }

    num = 5
    switch(num) {
        case 5:
            console.log('num은 5입니다');
            break;
        case 10:
            console.log('num은 10입니다');
            break;
        default:
            console.log('원하는 값이 없습니다');
    }

switch문에 없는 문자를 입력하셨을 때에는 다음과 같이 대화상자가 나타납니다.

 

 

switch문 관련한 예제를 하나 풀고 마무리해보겠습니다.

 

문제.

달(month)을 입력받아 해당 달의 마지막 일이 몇일인지 출력하는 문서를 만들어보자.
(단, 입력은 prompt로 받으며, 2월의 마지막 날짜는 28일로 함)