코딩기록 저장소 🐕/프론트(리액트, JS)

JS

kimkongmom 2023. 8. 28. 09:05

 

 

 

 

• JavaScript

    1. ECMAScript(ES)가 원래 명칭이다.
    2. <script> 태그 내부에 작성한다. <script> 태그의 위치는 정해져 있지 않다.(<head>, <body> 모두 가능)
    3. HTML 구성 요소의 생성/삭제/수정 작업을 할 수 있다. 

 

▶  변수(Variable)
    1.  기본 자료형
      1) number    : 정수/실수 구분이 없다. NaN(Not a Number), Infinity/-Infinity(+0/-0으로 나눌 때 발생)
      2) string    : 문자/문자열 구분이 없다. 작은 따옴표('')와 큰 따옴표("")를 모두 사용할 수 있다.
      3) boolean   : true/false
      4) null      : 변수에 null을 저장한 경우(없는 값을 저장한 경우, 초기화를 위해 저장한 경우)
      5) undefined : 변수에 어떤 값도 저장된 적이 없는 경우
    2.  특징
      1) Dynamic type(동적 타입)이다.
      2) 변수를 선언할때 자료형이 결정되지 않는다.
      3) 변수의 값을 저장할때 자료형이 결정된다.
      4) 변수에 져장된 값을 바꾸면 자료형도 함께 바뀐다.

    3. 변수 선언

  scope 변수 선언 초기화 재선언 용도
var function level 생략 가능 생략 가능 가능 함수,        전역 변수
let block level({}) 생략 불가능 생략 가능 불가능 지역 변수
const block level({}) 생략 불가능 생략 불가능 불가능 상수

▶  JavaScript의 출력 방식
    1. 경고창 -> alert(출력메시지)
    2. 브라우저 화면 출력 -> document.write(출력메시지)
    3. 콘솔 출력 -> console.log(출력메시지)

기본예시
alert의 예시

ex)

콘솔(console)

▶  호이스팅(Hoisting)
    1. JavaScript 인터프리터가 함수나 변수의 선언 이전에 미리 메모리 공간을 할당하는 것을 의미한다.
    2. var 키워드로 선언한 변수는 호이스팅 시 undefined 값을 가진다.
    3. let 키워드로 선언한 변수는 호이스팅 시 초기화되지 않는다.
    4. 함수의 정의보다 함수의 호출을 먼저 할 수 있다.
    5. 변수의 선언보다 변수의 사용을 먼저 할 수 있다.

    6. 변수의 선언과 초기화가 함께 진행되는 경우 선언부와 초기화를 분리하여 처리된다.

 
 
<script>
 //var 키워드 호이스팅
 x = 10;
 console.log(x);
 var x;  // 변수 선언은 어디있든 다른 코드보다 항상 먼저 처리된다. 이걸 호이스팅이라고 한다.

 console.log(y);  //undefined (var 키워드로 호이스팅 된 변수는 undefined로 초기화된다.)
 var y = 20;      //var y; y = 20; 으로 분리해서 호이스팅된다.
 console.log(y);  //20
 // let 키워드 호이스팅
 console.log(z);  // Reference Error 발생 (let 키워드로 호이스팅 된 변수는 초기화되지 않기 때문에 접근 시 오류가 발생함)
 let z = 30;      // let z; z = 30; 으로 분리해서 호이스팅된다.
 console.log(z);
</script>
 

 ▶  1. 산술 연산자
        1) 더하기 : +
        2) 빼기   : -
        3) 곱하기 : *  (2 * 3 == 6)
        4) 제곱   : ** (2 ** 3 == 8, 2의 3제곱)
        5) 나누기 : /  (5 / 2 == 2.5)
        6) 나머지 : %  (5 % 2 == 1)
        7) 몫     : 함수 필요함 (예 : parseInt(5 / 2))
        8) 증감   : ++, --
      2. 대입/복합 대입 연산자
        1) 대입      : =
        2) 복합대입  : +=, -=, *=, **=, /=, %=
      3. 비교 연산자 
        1) 크다       : >
        2) 작다       : <
        3) 크거나같다 : >=
        4) 작거나같다 : <=
        5) 같다(모든 타입에서 사용 가능함)
          (1) 값이 같다         : ==   (1 == '1'  결과는 true)
          (2) 값과 타입이 같다  : ===  (1 === '1' 결과는 false)
        6) 같지않다 (모든 타입에서 사용 가능함)
          (1) 값이 다르다         : !=
          (2) 값과 타입이 다르다  : !==
      4. 논리 연산자
        1) 논리 AND : &&
        2) 논리 OR  : ||
        3) 논리 NOT : !
      5. 조건 연산자
        (조건식) ? true일 때 : false일 때
      6. 문자열 연산자
        1) +                  : 문자열 연결
        2) + 이외 살술 연산자 : 산술 연산으로 처리

ex)

 
<script>
    /*
      최저 시급 : 9,620원
      8시간까지는 최저 시급을 받고, 8시간 초과 근무 시 최저 시급의 1.5배를 받는다.
      하루 n시간 일하면 일당 얼마일까요?
    */
    const hourlyWage = 9620;  // 시급(상수)
    let workingHours = 12;     // 근무시간(변수)

    let regularPay;  // 정규 수당
    let extraPay;     // 초과 수당

    regularPay = hourlyWage * workingHours;
    extraPay = (workingHours <= 8 ) ? 0 : (workingHours - 8) * hourlyWage * 0.5;     ★★★

    let message = ' 시급 ' + hourlyWage + ' 근무시간 ' + workingHours + ', 일당 ' + (regularPay + extraPay);
    alert(message);
  </script>
 

 

▶ DOM
    1. Document Object Model(문서 객체 모델)
    2. HTML 구성 요소(HTMLCollection/HTMLElement, NodeList/Node)를 객체(Object)로 저장하고 처리할 수 있는 방식이다.
    3. HTML 구성 요소(HTMLCollection/HTMLElement, NodeList/Node) 알아내기
      1) id 속성으로 알아내기
        var 변수 = document.getElementById('아이디')
      2) class 속성으로 알아내기
        var 배열 = document.getElementsByClassName('클래스')
      3) tag 이름으로 알아내기
        var 배열 = document.getElementsByTagName('태그')
      4) 선택자로 알아내기
        var 변수 = document.querySelector('선택자')
      5) 선택자로 알아내기
        var 배열 = document.querySelectorAll('선택자')

    4. 반드시 HTML 구성 요소(HTMLElement)를 먼저 만들어야 한다. <script> 태그는 나중에 만든다.

 

 
 </script>

  <div class="wrap">
    <div id="box1" class="primary_box">box1</div>
    <div id="box2" class="primary_box">box2</div>
    <div id="box3" class="primary_box">box3</div>
  </div>
  <script>

    ① // id 속성
    var box1 = document.getElementById('box1');
    console.log(box1);
    var box2 = document.getElementById('box2');
    console.log(box2);
    var box3 = document.getElementById('box3');
    console.log(box3);

    ② // class 속성
    var primary_box = document.getElementsByClassName('primary_box');
    console.log(primary_box);

    ③ // tag 이름
    var div = document.getElementsByTagName('div');
    console.log(div);

    ④ // 선택자를 이용한 id="box1" 알아내기
    var box1 = document.querySelector('#box1');
    console.log(box1);
 
    ⑤ // 선택자를 이용한 class="primary_box" 알아내기
    var primary_box = document.querySelectorAll('.primary_box');
    console.log(primary_box);

  </script>
 

console창

 

 
<!-- 태그 내부 텍스트 -->
  <p id="p1">Hello World</p>
  <script>
    var p1 = document.getElementById('p1');
    console.log(p1.textContent);

    p1.textContent = '안녕하세요';
    p1.textContent += '반갑습니다';
  </script>

  <!-- 태그 내부 요소 -->
  <p id="p2"><strong>Hello World</strong></p>
  <script>
    var p2 = document.getElementById('p2');
    console.log(p2.innerHTML);
    p2.innerHTML = '<em>안녕하세요</em>';
    p2.innerHTML = '<mark>반갑습니다.</mark>';

  </script>

  <!-- 태그 속성 -->
  <p id="p3">
    <img src="../../assets/image/animal1.jpg" width="384px">
  </p>
 

 

'코딩기록 저장소 🐕 > 프론트(리액트, JS)' 카테고리의 다른 글

JS branch  (0) 2023.08.29
JS 태그, 객체...  (0) 2023.08.28
CSS position, 반응형 웹  (0) 2023.08.25
CSS display, float...  (0) 2023.08.25
CSS background와 tableCss  (0) 2023.08.24

'코딩기록 저장소 🐕/프론트(리액트, JS)'의 다른글

  • 현재글JS

관련글

티스토리툴바