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

snippets 등록하기

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

{
    "Console log": {   //이름
    "prefix": "cons",  // 뭐라고 치면 작동할건지
    "body": "console.log('$1');"  // 뭐라고 자동완성 해줄지
    }
}
728x90
반응형
LIST
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
728x90
반응형
SMALL

css animation

    - 요소의 현재 스타일을 다른 스타일로 변환

 

@keyframes

    - 시작: 0%, from
    - 과정: 1%, 3%, 10%, ..
    - 끝: 100%, to
    0%         5%         50%      ...100%
    장면1     장면2    장면3     ...끝장면
animation-name: 애니메이션의 이름을 설정
-------------------------------------------------------------------------------------------------------------

animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정
                 forwards: 애니메이션 키프레임이 완료 되었을 때 마지막 프레임을 유지

-------------------------------------------------------------------------------------------------------------

animation-direction: 애니메이션의 진행방향을 정하는 속성
                  reverse: 반대 순서로
                alternate: 정해진 순서로 진행 했다가 다시 반대순서로 진행
   reverse-alternate: 반대 순서로 진행 했다가 다시 정해진순서로 진행

-------------------------------------------------------------------------------------------------------------

animation-duration: 애니메이션이 일어나는 시간을 설정

-------------------------------------------------------------------------------------------------------------

animation-iteration-count: 애니메이션이 몇번 반복할지 설정
                             infinite: 무한반복
                                숫자: 숫자만큼 반복

 

css 우선순위 계산

    1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
    2. 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선
    3. 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용
    4. 계산식
        - inline: 1000점
        - id 속성: 100점
        - class, 속성 선택자: 10점
        - element(태그): 1점
    5. !important: 무조건 0순위
728x90
반응형
LIST

'CSS' 카테고리의 다른 글

CSS-2D-Transform  (0) 2023.04.03
CSS-레이아웃(Layout)  (2) 2023.03.30
CSS- Background, Display  (0) 2023.03.29
CSS-font  (0) 2023.03.29
CSS- 컬러와 텍스트  (0) 2023.03.28

+ Recent posts