카테고리 없음

JavaScript_1일차

teminam 2023. 4. 4. 15:16

자바스크립트(JavaScript)
1995년
- 넷스케이프 커뮤니케이션즈: 네비게이터 브라우저가 90% 이상의 점유율

1996년
- 브랜던 아이크 동적인 프로그램을 개발하기 위해 언어(모카, 10일만에) 개발
네비게이터2에 탑재
- 네이게이터2에 탑재( 모카 -> 라이브스크립트->자바스크립트)
- MS의 익스플로러의 Jsscript 호환성 문제로 크로스 브라우징 이슈가 발생

1997년
- 자바스크립트는 ECMAScript(비영리 표준화 기구 ECMA 인터내셔널)로 명명됨

1999년
- 비동기적(Asynchronous0) 서버와 브라우저가 데이터를 교환할 수 있는 통신
기능 Agax(Asnychonous-JaCript and MRL) 이 탄생

2005년
- 구글이 발표한 구글앱에 Ajax기출을 사용
- 크롬 발표(V8 자바스크립트 엔진)

2006년
- JQuery 등장으로 크로스 브라우징 이슈도 있음

2009년
- Node.js의 등장
- 달 브라우징(웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에도 사용)

SPA(Single Page Application) 개발
- React, Vue, Avgular

Typescript: Jacvascript에 type을 추가한 스크립트  

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

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

1. <script> ~ </script>
2. 외부 자바스크립트로 사용 <script src="파일명"></script>

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

* JavaScript 파일 및 문장을 <head> ~ </head> 사이에 넣었을 경우
html문서의 시작 -> <head>에 있는 <script>를 다운로드/실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
    - 외부 script 파일을 사용할 경우, scipt 파일 다운로드가 늦을 때 HTML이 실행되지 않은 상태에서 빈 화면이 보일 수 있음

* Javascript 파일 및 문장을 <body> 끝에 넣을 경우 
html 문서의 시작 -> <body>에 있는 HTML 태그를 실행 -> <script>를 다운로드/실행 -> 끝 
    - 완벽하지 않은 HTML이 먼저 보여 잘못된 UI가 보일 수 있음

* <script async>를 사용할 경우
html문서의 시작 -> script 파일을 동시에 다운로드/실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
    - script 파일이 여러개 있을 경우 먼저 다운로드된 script 파일을 먼저 실행하게 됨
    - script 파일이 서로 연관성이 있는 경우 하나의 스크립트만 실행 후 문제가 발생할 수 있음

* <script defer>를 사용하는 경우
html문서의 시작 -> script 파일을 다운로드/실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
    - HTML 시작되고 script 파일을 동시에 다운로드/실행을 진행함
    - script 실행은 페이지 구성이 모두 끝날 때까지 지연
    - script 순서에 따라 실행

✔ CSS, Javascript가 반영되지 않을 경우(캐쉬가 남을 경우)
- f12키를 누르고 새로고침 버튼을 누른 상태에서, 강력새로고침을 선택
- Ctrl + Shift + R (단축키)

주석문
// : 한줄 주석
/* ... */ : 여러줄 주석

익스텐션 설치
JavaScript (ES6) code snippets 검색

snippets 등록하기
F1 -> snippets 사용자 코드 조각 구성
-> 새 전역 코드 조각 파일-> 파일이름 저장 ->

{
"Console log": {
"prefix": "cl",
"body": "console.log('$1')"
}
}

 

 

<!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>Javascript 출력하기</title>
    <script>
        console.log('안녕하세요. Javascript 1');
    </script>
</head>
<body>
    <h2>Javascript 출력하기</h2>
    <script defer src="./1_외부자바스크립트.js"></script>
</body>
</html>


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

var
- 유연한 변수 선언방식
- 지역변수, 전역변수와의 구별이 없음
- 같은 이름의 변수를 선언할 수 있음

    console.log(num);
    var num = 10;
    {
        console.log(num);   //전역변수 num = 10
        var num = 20;       //지역변수 num = 20
    }
    console.log(num)        //전역변수 num = 20(버그가 생김)

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

    let 변수명 = 값;
    또는
    let 변수명;
    변수명 = 값;

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

<!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>
        var num;
        num = 10;
        console.log(num);
        str = '안녕';
        console.log(str)
        var str = '반가워'
        console.log(str)
        {
            console.log(num)
            var num = 30;
            console.log(num)
        }
        console.log(num);
        console.log('--------');
        val = 10;
        console.log(val);
        // let val = 20;
        {
            console.log(val);
            // let val = 30;
        }
        console.log(val);
    </script>
</body>
</html>



상수(constant)
- 한번 선언된 상수는 다시 재정의 할 수 없음
- 값을 재할당 할 수 없음

    const 상수명 = 값;
    예) const num = 10;

    const 상수명;
    상수명 = 값;    (X)

✔ 자바스크립트에서 상수를 권장하는 이유
- 해킹을 방지하기 위해
- 개발자 실수를 방지하기 위해

 

<!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>
        // const str;
        // str= '김사과';

        const str='김사과';
        console.log(str);

        const obj = {id: 'apple', name: '김사과', gender: '여자'};
        console.log(obj.id);
        console.log(obj.name);
        console.log(obj.gender);
       
        // obj = '오렌지'
        // console.log(obj)
       
        obj.id = 'banana'
        obj.name = '반하나'
        console.log(obj.id);
        console.log(obj.name);
       

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


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

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

2. 문자형(String)
- '', "" 또는 ``(백킷)로 둘러싸인 문자의 집합
    num = 10
    "입력한 숫자는" + num + "입니다.";
    `입력한 숫자는 ${num} 입니다.`;

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

4. undefined, null
- undefined: 타입이 정해지지 않은 타입을 의미(변수 선언 후 값이 정해지지 않은 경우)
    let num;
    console.log(num);    //undefined

- null: null을 저장한 값. 값이 없는 것
    let obj = null;
    console.log(obj);   // null

5. 심볼형(symbol)
- 유일하고 변경 불가능한 기본값을 만듬
- 객체 속성의 key로 사용
    const sym1 = Symbol('Apple');
    const sym2 = Symbol('Apple');
    consol.log(sym1 == sym2);   // 값이 같은지 비교
    consol.log(sym1 == sym2);   // 데이터 타입과 값이 같은지 비교

6. 객체형(object)
- 어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합
- key value pair 구조로 저장
    const user = {userid:'Apple', name:'김사과', 'age':20}
                  -----   -----
                  key     value

✔ 자바스크립트의 변수는 타입이 고정되어 있지 않으며 같은 변수에 다른 타입의 값을 대입할 수 있음
    let user = {userid:'Apple', name:'김사과', 'age':20}
    user = '김사과';

 

<!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>
        // 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(`자바스크립트에서는 문자열을
        쌍따옴표 또는 따옴표로 둘러싸인
        문자의 집합을 의미합니다.`);
        console.log(`str1: ${str1}, str2:${str2}`);


        console.log(num4 + str3);   //1010
        console.log(num4 - str3);   // 0 -> 자동 형변환
        console.log(num4 * str3);   //100 -> 자동 형변환
        console.log(num4 / str3);   //1 -> 자동 형변환
        console.log('----------')

        // 논리형
        const b1 = true;
        const b2 = false;
        const b3 = (10>5);
        const b4 = (10<3);
        console.log(b1)
        console.log(b2)
        console.log(b3)
        console.log(b4)
        console.log(typeof(b1))
        console.log('----------')
       
        // undefined, null
        let num
        console.log(num)
        console.log(typeof(num))
        let obj1 = {}
        console.log(obj1)
        console.log(typeof(obj1))
        let obj2 = null
        console.log(obj2)
        console.log(typeof(obj2))
        console.log('----------')
       
        // 심볼형
        const sym1 = Symbol('apple')
        const sym2 = Symbol('apple')
        console.log(sym1)
        console.log(sym2)
        console.log(sym1 == sym2)   // 값만 같으면 true
        console.log(sym1 === sym2)  // 타입과 값이 모두 같으면 true
       
        const sym3 = sym1
        console.log(sym3 == sym1)   // 값과 타입이 같으므로 true
        console.log('----------')

        // 객체형
        const user = {'userid':'apple', 'name':'김사과', 'age':20}
        console.log(user)
        console.log(user.userid)
        console.log(user.name)
        console.log(user.age)
        console.log(`유저의 아이디는 ${user.userid}, 이름은 ${user.name}, 나이는 ${user.age} 입니다.`)
    </script>
</body>
</html>


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

        const num4 = 10
        const str3 = "10"
        console.log(num4 + str3);   //1010
        console.log(num4 - str3);   // 0 -> 자동 형변환
        console.log(num4 * str3);   //100 -> 자동 형변환
        console.log(num4 / str3);   //1 -> 자동 형변환

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

    const char = '삼십'
    result = char - 10  // result의 값은 NaN

타입 변환함수
- 강제로 타입을 변환할 수 있음
    Number(): 문자를 숫자로 변환
    String(): 숫자나 불린등을 문자형으로 변환
    Boolean(): 문자나 숫자등을 불린형으로 변환
    Object(): 모든 자료형을 객체형으로 변환
    ParseInt(): 문자를 int 형으로 변환
    ParseFloat(): 문자를 float형으로 변환

<!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>
        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))}, ${Number(num1)}`);
        console.log(`String(num1): ${typeof(String(num1))}, ${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)}`)
        console.log(`num1 + num2 = ${parseFloat(num1) + parseFloat(num2)}`)

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

 

자바스크립트의 대화상자
Web API: 브라우저에서 제공하는 API(Application Programming Interface)
- 프로그램들과 기능들의 상호 통신 방법을 규정하고 도와주는 매개체

    alert(): 사용자에게 메세지를 보여주고 확인을 기다림

    confirm(): 사용자에게 메시지를 보여주고 확인이나 취소를 누르면 그 결과를 불린값으로 변환

    prompt(): 사용자에게 메세지를 보여주고 사용자가 입력한 문자열을 반환

 

<!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>
    <script>
        // alert('안녕하세요 자바스크립트!')

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

        // const result = prompt('당신의 이름을 입력하세요')
        // console.log(result)

        // const year = prompt('당신의 출생년도를 입력하세요')
        // console.log('2023'-year+1)   // 2023아 숫자이므로 year가 자동 (숫자)형변환

        const num1 = prompt('첫번째 숫자를 입력하세요')
        const num2 = prompt('두번째 숫자를 입력하세요')
        console.log(Number(num1) + Number(num2))

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