728x90
반응형
SMALL

swich(일치하는것을 찾을때 사용하면 편함)

        - swich(변수){  //변수와 동일한 값을 찾아 실행한다.
            case 값1:
                변수와 값1이 같을경우 실행할 문장;
                ...
                break

            case 값2:
                변수와 값2이 같을경우 실행할 문장;
                ...
                break

            case 값3:
                변수와 값1이 같을경우 실행할 문장;
                ...
                break
            ...
            default:
                변수와 값이 다를경우 실행할 문장;
        }

728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript- for문  (0) 2023.04.05
JavaScript- while, do while문  (0) 2023.04.05
JavaScript- if문  (0) 2023.04.05
JavaScript- 연산자  (0) 2023.04.05
JavaScript- 변수, 자료형(type)  (0) 2023.04.04
728x90
반응형
SMALL

if문(범위가 있을때 사용하면 편함)

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


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


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

728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript- while, do while문  (0) 2023.04.05
JavaScript- switch문  (0) 2023.04.05
JavaScript- 연산자  (0) 2023.04.05
JavaScript- 변수, 자료형(type)  (0) 2023.04.04
JavaScript- 기본편  (0) 2023.04.04
728x90
반응형
SMALL

연산자(Operator)

1. 산술 연산자

 +, -, *, /, %, **


2. 비교 연산자

    >, <, >=, <=, ==, !=
    ===: 두 식의 값이 같고 타입까지 같아야 참
    !==: 두 식의 값이 다르고 타입까지 달라야 참

3. 대입 연산자

    =, +=, -=, *=, /=, %=, **=

4. 증감 연산자

    ++변수, --변수, 변수++, 변수--
    ex)
    num = 10
    ++num  // 11
    --num  // 10
    num++  // 11
    num--  // 10
    파이썬의 예)
        num += 1

    num = 10
    result = ++num // result=11, num=11
    result = num++ // result=11, num=12
    (연산자가 뒤에 있으면 대입 후에 연산처리)


5. 논리 연산자

    &&,  ||,  !
    and, or, not

6. 비트 연산자

    &,   |,   !,    ^,    <<,    >>

7. 삼항 연산자

    변수 = 조건식 ? 반환값1 : 반환값2
    (조건식이 true 일때 반환값1을 변수에 저장, false일때는 반환값2가 저장 됨)

 

728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript- while, do while문  (0) 2023.04.05
JavaScript- switch문  (0) 2023.04.05
JavaScript- if문  (0) 2023.04.05
JavaScript- 변수, 자료형(type)  (0) 2023.04.04
JavaScript- 기본편  (0) 2023.04.04
728x90
반응형
SMALL

변수

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

var 

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

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


let

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

    1. let 변수명 = 값;
    2. let 변수명;
       변수명 = 값;


✔ 트랜스 컴파일러

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

상수(constant)

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

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

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


✔ 자바스크립트에서 상수를 권장하는 이유

    - 해킹을 방지하기 위해
    - 개발자 실수를 방지하기 위해

데이터 타입(data type)

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

    1. 숫자형(number)
        - 정수와 실수를 따로 구분하지 않음
        - 모든 수를 실수 하나로만 표현
    
    2. 문자형(string)
        - '',"" 또는 ``로 둘러쌓인 문자의 집합
        
        num = 10
        "입력한 숫자는" + num + "입니다";
        `입력한 숫자는 ${num} 입니다`;

    3. 논리형(boolean)
        - true or false로 표현되는 값
        - false, 0, '', "", null, undefined는 모두 false로 판정함
        - false가 아닌 모든 값은 참(true)로 판정함
        - JavaScript에서는 소문자로 사용
    
    4. undefined, null
        - 타입이지 에러가 아님
        - undefined: 타입이 정해지지 않은 타입을 의미(변수 선언 후 값이 정해지지 않은경우)
            let num;
            console.log(num);   // undefined
        
        - null: null을 저장한 값. 값이 없는것(주소는 가리키지만 객체가 null인경우)
            let obj= null;
            console.log(obj); // null

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

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


✔ 자바스크립트의 변수는 타입이 고정되어 있지 않으며 같은 변수에 다른 타입의 값을 대입할 수 있음

    let user = {userid:'apple', name: '김사과', age=20};
    user = '김사과'

자동 타입 변환

    - 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용
        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형으로 변환

자바스크립트의 대화상자

Web API: 브라우저에서 제공하는 API(Application Programing Interface) // Node.js에선 작동x
    - 프로그램들과 기능들의 상호 통신 방법을 규정하고 도와주는 매개체

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

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

        prompt(): 사용자에게 메시지를 보여주고 사용자가 입력한 문자열을
728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript- while, do while문  (0) 2023.04.05
JavaScript- switch문  (0) 2023.04.05
JavaScript- if문  (0) 2023.04.05
JavaScript- 연산자  (0) 2023.04.05
JavaScript- 기본편  (0) 2023.04.04
728x90
반응형
SMALL

자바스크립트(JavaScript)

1995년
넷스케이프 커뮤니테이션즈: 네비게이터 브라우저가 90% 이상의 점유율

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

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

1999년
    - jscript를 이용하여 비동기적(Asynchronous) 서버와 브라우저가 데이터를 교환할 수 있는 통신 기능 Ajax(Asynchronous JavaScript and XML)이 탄생

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

2006년
    - JQuery 등장으로 크로스 브라우징 이슈도 해결
    
2009년
    - Node.js의 등장
    - 탈 브라우징(웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에도 사용)

 

SPA(Single Page Application) 개발

    - React, Vue, Angular

TypeScript:
                 Javascript에 type을 추가한 스크립트

자바스크립트의 특징

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

자바스크립트의 출력

    - web API console을 통해 브라우저 Console 창에 출력
    1. <script> ~ </script>
    2. 외부 자바스크립트로 사용 <script src="파일명"><\/script>

자바스크립트의 실행 순서

    - 인터프리터 방식이므로 위에서 아래로 실행

* JavaScript 파일 및 문장을 head태그 사이에 넣었을 경우

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

* JavaScript 파일 및 문장을 Body 끝에 넣을 경우

HTML문서의 시작 -> <body>에 있는 HTML 태그를 실행 -> <script>를 다운로드/실행 -> 끝
    - 완벽하지 않은 HTML이 먼저 보여 잘못된 UI가 노출될수 있음

* <script async>를 사용할 경우

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

* <script defer>를 사용하는 경우 (body의 맨끝에 넣는 경우가 가장 완벽하다)

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

✔ CSS, JavaScript가 반영되지 않을경우(캐시가 남아있을경우)

    - F12키를 누르고 새로고침 버튼을 꾹 누르고 있는상태에서 강력 새로고침 선택
    - Ctrl + shift + R

주석문

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

도움이 되는 익스텐션 (자바스크립트 입력보조)

JavaScript (ES6) code snippets

 

728x90
반응형
LIST

'JavaScript' 카테고리의 다른 글

JavaScript- while, do while문  (0) 2023.04.05
JavaScript- switch문  (0) 2023.04.05
JavaScript- if문  (0) 2023.04.05
JavaScript- 연산자  (0) 2023.04.05
JavaScript- 변수, 자료형(type)  (0) 2023.04.04

+ Recent posts