2024.04.15 -- 자바스크립트 1일차

카테고리 없음

2024.04.15 -- 자바스크립트 1일차

동동순이 2024. 4. 15. 15:51

자바스크립트(JavaScript)

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

자바스크립트의 출력
Web API Console을 통해 브라우저 Console 창에 출력

<!DOCTYPE html>

<head>

<title>자바스크립트의 출력</title>

console.log('안녕하세요 자바스크립트');

</script>

</head>

<body>

<h2>자바스크립트의 출력</h2>

console.log('자바스크립트의 출력');

</script>

</body>

</html>

f12키를 눌러 확인해보면 console 쪽에 우리가 넣은 데이터가 있다

자바스크립트 삽입 방법
1. <script> ~ </script>에 작성
2. <script src='파일명'></script>

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

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

익스텐션 설치
javascript (es6) code snippets

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

파이썬
name= '김사과'

자바스크립트
let name = '김사과';

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

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

<!DOCTYPE html>

<head>

</head>

<body>

var num;

console.log(num);

console.log(name);

str = '안녕하세요';

console.log(str);

var str = '반갑습니다';

console.log(str);

{

console.log(num);

var num = 30;

console.log(num);

}

console.log(num);

/* var은 쓰지 말자 */

console.log('----------------')

let val = 10;

console.log(val);

{

let val = 20 ;

console.log(val);

}

console.log(val);

</script>

</body>

</html>

트랜스 컴파일러
- 과거 브라우저 및 특정 브라우저 버전 등을 모두 사용할 수 있도록 해석해주는 라이브러리
- babel 등

상수(constant)
- 한번 선언된 상수는 다시 재정의 할 수 없음
- 값을 재할당 할 수 없음
- 개발자의 실수를 방지하기 위해 권장
- 해킹을 방지하기 위한 목적

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

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

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

    const name = '김사과'  (o)

<!DOCTYPE html>

<head>

</head>

<body>

let str1; // 변수 선언

console.log(str1) ; // undefined

str1 = '김사과';

console.log(str1) ;

// const str2;

// console.log(str2) ;

const str2 = '김사과';

console.log(str2) ;

// str2 = '반하나';

const obj = {id:'apple', name:'김사과', gender:'여자'};

console.log(obj.id) ;

console.log(obj.name) ;

console.log(obj.gender) ;

obj.id= 'banana';

obj.name= '반하나';

obj.gender = '여자';

console.log(obj.id) ;

console.log(obj.name) ;

console.log(obj.gender) ;

</script>

</body>

</html>

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

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

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

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

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

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

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

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

<!DOCTYPE html>

<head>

</head>

<body>

// number 형

const num1 = 10;

const num2 = 11.11;

const num3 = 10e6;

console.log(num1);

console.log(num2);

console.log(num3);

console.log(typeof(num1));

console.log(typeof(num2));

console.log(typeof(num3));

console.log('-------------')

// string 형

const num4 = 10;

const num5 = 5;

const str1 = 'hello javascript';

const str2 = 'hello world';

const str3 = '10';

console.log(num4+num5);

console.log(num4+str1);

console.log(str1+str2);

console.log(str1+''+str2);

console.log(`${str1} ${str2}`);

console.log('자바스크립트에서는 문자열은 큰 따옴표 또는 작은 따옴표로 둘러싸인 문자의 집합을 의미')

console.log(num4+str3);

console.log(num4-str3);

console.log(num4*str3);

console.log(num4/str3);

console.log('-------------');

// 논리형

const b1 = true;

const b2 = false;

console.log(typeof(b1));

console.log(typeof(b2));

console.log(10>5);

console.log(10<5);

console.log('--------------------');

// undefined

let num;

console.log(num);

console.log(typeof(num));

// null

let obj1 = {};

console.log(obj1);

console.log(typeof(obj1));

let obj2 = null;

console.log(obj2);

console.log(typeof(obj2));

</script>

</body>

</html>

typeof 를 써서 변수의 데이터타입을 알아볼수 있다

자동 타입 변환
- 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용

        const num4 = 10;
        const str3 = '10';
        console.log(num4+str3);
        console.log(num4-str3);
        console.log(num4*str3);
        console.log(num4/str3);

        const ch = '삼십';
        console.log(ch-num4); // nan

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

타입변환 함수
- 강제로 타입을 변환하는 함수
     number() : 문자를 숫자로 변환
     string() : 숫자나 불린 등을 문자형으로 변환
     boolean() : 문자나 숫자 등을 불린형으로 변환
     object() : 모든 자료형을 객체형으로 변환
     parseint() : 문자를 소수없는 정수형으로 변환
     parsefloat() : 문자를 실수형으로 변환

<!DOCTYPE html>

<head>

</head>

<body>

console.log(10+'문자열');

console.log('3'*'5');

console.log(1-'문자열');

const num1 = '10';

const num2 = '5';

console.log(`현재 num1의 타입: ${typeof(num1)}`)

console.log(`현재 num2의 타입: ${typeof(num2)}`)

console.log(`Number(num1)의 타입: ${typeof(Number(num1))}`)

console.log(`Number(num2)의 타입: ${typeof(Number(num2))}`)

console.log(`String(num1)의 타입: ${typeof(String(num1))}`)

console.log(`Boolean(num1)의 타입: ${typeof(Boolean(num1))}, ${Boolean(num1)}`)

console.log(`Object(num1)의 타입: ${typeof(Object(num1))}, ${Object(num1)}`)

console.log(`parseInt(num1)의 타입: ${typeof(parseInt(num1))}, ${parseInt(num1)}`)

console.log(`parseFloat(num1)의 타입: ${typeof(parseFloat(num1))}, ${parseFloat(num1)}`)

console.log('------------------')

console.log(`num1+num2 = ${num1+num2}`);

console.log(`num1+num2 = ${Number(num1)+Number(num2)}`);

console.log(`num1+num2 = ${parseInt(num1)+parseInt(num2)}`);

</script>

</body>

</html>

자바스크립트의 대화상자
Web API : 브라우저에서 제공하는 API(Application Programming Interface)

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

<!DOCTYPE html>

<head>

</head>

<body>

//alert('안녕하세요 자바스크립트');

// const result = confirm('확인 또는 취소를 눌러주세요');

// console.log(result);

// const name = prompt('당신의 이름을 입력하세요')

// console.log(typeof(name));

// console.log(name);

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

// console.log(2024-year);

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

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

console.log(num1+num2);

console.log(Number(num1)+Number(num2));

</script>

</body>

</html>

prompt를 쓰면 다음과 같이 웹페이지를 열때 문자창이 뜬다

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

김사과님의 성적표
국어 : xx점
수학 : xx점
영어 : xx점
총점 : xx점
평균 : xx점

<!DOCTYPE html>

<head>

</head>

<body>

const name=prompt('이름을 입력하세요');

const kor = Number(prompt('국어점수를 입력하세요'));

const eng = Number(prompt('영어점수를 입력하세요'));

const math = Number(prompt('수학점수를 입력하세요'));

const tot = kor + math + eng ;

const avg = tot / 3 ;

console.log(`${name}님의 성적표`)

console.log(`국어 : ${kor}점`)

console.log(`영어 : ${eng}점`)

console.log(`수학 : ${math}점`)

console.log(`총점 : ${tot}점`)

console.log(`평균 : ${avg}점`)

</script>

</body>

</html>

연산자 (Operator)

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

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

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

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

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

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

7. 삼항 연산자

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

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

제어문

조건문

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

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

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

<!DOCTYPE html>

<head>

</head>

<body>

const age = Number(prompt('나이를 입력하세요'));

if(age > 19){

console.log('성인입니다');

}else if(age > 14){

console.log('청소년입니다');

}else if(age > 5){

console.log('어린이입니다');

}else{

console.log('유아입니다');

}

</script>

</body>

</html>

5살을 입력하니 유아입니다 라는 지정해놓은 문자가 뜬다

2. switch 문

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

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

<!DOCTYPE html>

<head>

<title>switch문</title>

</head>

<body>

<h2>switch문</h2>

let input = prompt('아동, 청소년, 성인 중 하나를 고르세요')

switch(input){

case '아동':

input+=': 입장료 무료'; //아동:입장료 무료

break;

case '청소년':

input +=': 입장료 5.000원';

break;

case '성인':

input +=': 입장료 10.000원';

break;

default:

alert('입력값을 확인하세요');

input = '입력값 확인';

}

console.log(input);

</script>

</body>

</html>

prompt창에서 청소년을 쓰면 지정해놓은 입장료 가격이 나온다

문제.

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

<!DOCTYPE html>

<head>

</head>

<body>

const month = Number(prompt('달을 입력하세요'));

switch(month){

case 1:

case 3:

case 5:

case 7:

case 8:

case 10:

case 12:

console.log(`${month}월의 마지막일자는 31일 입니다`);

break;

case 2:

console.log(`${month}월의 마지막일자는 28일 입니다`);

break;

case 4:

case 6:

case 9:

case 11:

console.log(`${month}월의 마지막일자는 30일 입니다`);

break;

}

</script>

</body>

</html>

내가 알고 싶은 달을 넣으면 그 달의 마지막 일수를 알려준다