[JavaScript] 변수 / 호이스팅 / 연산자 / DOM

Gabriela·2023년 8월 28일
JavaScriptjs

WEB Front-end

목록 보기
6/16

JavaScript

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

JavaScript의 주석은 Java와 동일하다.

  • // 한줄 주석
  • /* */ 여러줄 주석

⭐ 변수(Variable)

‣ 기본 자료형

  • number : 정수/실수 구분이 없다.
    NaN(Not a Number), Infinity/-Infinity(+0/-0으로 나눌 때 발생)
  • string : 문자/문자열 구분이 없다.
    작은 따옴표('')와 큰 따옴표("")를 모두 사용할 수 있다.
  • boolean : true/false
  • null : 변수에 null을 저장한 경우
    (없는 값을 저장한 경우, 초기화를 위해 저장한 경우)
  • undefined : 변수에 어떤 값도 저장된 적이 없는 경우

‣ 특징

  • Dynamic type(동적 타입)이다.
  • 변수를 선언할 때 자료형이 결정되지 않는다.
  • 변수에 값을 저장할 때 자료형이 결정된다.
  • 변수에 저장된 값을 바꾸면 자료형도 함께 바뀐다.

‣ 변수 선언 키워드

scope변수 선언초기화재선언용도
1) varfunction level생략 가능생략 가능가능함수, 전역 변수
2) letblock level({})생략 불가능생략 가능불가능지역 변수
3) constblock level({})생략 불가능생략 불가능불가능상수
  • 표준 ES6부터 let const 선언이 추가됨.

예제

  <script>

    // 변수 선언(초기화가 없으면 undifined)
    var a;
    console.log(a, a + 1);  // undefiend, NaN

    // 변수 재선언(값이 저장되면서 타입이 결정됨)
    var a = 10;
    console.log(typeof a, a, a / 0);  // number, 10, Infinity

    // 저장된 값이 바뀌면 타입도 바뀜
    a = 'tom';
    console.log(typeof a, a);

    // 변수 선언 생략
    b = true;  // var 키워드 없이 변수로 인식
    console.log(typeof b, b);

  </script>

‣ JavaScript의 출력 방식

  • 경고창
    alert(출력메시지)

  • 브라우저 화면 출력
    document.write(출력메시지)

  • 콘솔 출력 (F12 - Console 탭)
    console.log(출력메시지)

  • 대화상자
    confirm() 메소드 : true, false로 작동한다.

    • if()와 함께 사용

예제

      alert('Hello World');
      document.write('<h1>Hello World</h1>');
      console.log('Hello World');

‣ 자료형 변환하기

  • number -> string
    • String(number) 함수
    • number + ''
  • string -> number
    • Number(string) 함수
    • parseInt(string) 함수
    • parseFloat(string) 함수

‣ 호이스팅(Hoisting)

  • JavaScript 인터프리터가 함수나 변수의 선언 이전에 미리 메모리 공간을 할당하는 것을 의미한다.
  • var 키워드로 선언한 변수는 호이스팅 시 undefined 값을 가진다.
  • let 키워드로 선언한 변수는 호이스팅 시 초기화되지 않는다.
  • 함수의 정의보다 함수의 호출을 먼저 할 수 있다.
  • 변수의 선언보다 변수의 사용을 먼저 할 수 있다.
  • 변수의 선언과 초기화가 함께 진행되는 경우 선언부와 초기화를 분리하여 처리된다.

var 키워드 호이스팅 예제

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

    // var 키워드 호이스팅 - 2
    console.log(y);  // undefined (var 키워드로 호이스팅 된 변수는 undefined로 초기화된다.)
    var y = 20;      // var y; y = 20; 으로 분리해서 호이스팅된다.
    console.log(y);  // 20

    // var 키워드 호이스팅 - 2(아래 순서로 실행되는 것으로 이해하기)
    // var y;            → var 키워드로 호이스팅 된 변수는 undefined로 초기화된다.
    // console.log(y);   → undefiend
    // y = 20;           → 20을 저장
    // console.log(y);   → 20

let 키워드 호이스팅 예제

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

    // let 키워드 호이스팅(아래 순서로 실행되는 것으로 이해하기)
    // let z;           → let 키워드로 호이스팅 된 변수는 초기화되지 않는다.
    // console.log(z);  → Reference Error 발생
    // z = 30;          → 30을 저장
    // console.log(z);  → 30

⭐ 연산자 (Operator)

‣ 산술연산자

산술 연산자예시
더하기+
빼기-
곱하기*2 * 3 == 6
제곱**2 ** 3 == 8 (2의 3제곱)
나누기/5 / 2 == 2.5
나머지%5 % 2 == 1
몫함수 필요함예 : parseInt(5 / 2)
증감++, --

‣ 대입 / 복합 대입 연산자

대입/복합 대입 연산자
대입=
복합대입+=, -=, *=, **=, /=, %=

‣ 비교 연산자

비교 연산자
크다>
작다<
크거나같다>=
작거나같다<=
같다 (모든 타입에서 사용 가능함)--------------------------------
(1) 값이 같다== (1 == '1' 결과는 true)
(2) 값과 타입이 같다=== (1 === '1' 결과는 false)
같지않다 (모든 타입에서 사용 가능함)--------------------------------
(1) 값이 다르다!=
(2) 값과 타입이 다르다!==

‣ 논리 연산자

  • 논리 AND : &&
  • 논리 OR : ||
  • 논리 NOT : !

‣ 조건 연산자

  • (조건식) ? true일 때 : false일 때

‣ 문자열 연산자

문자열 연산자
+
+ 이외 산술 연산자산술 연산으로 처리

활용 예제

연습문제)
최저 시급 : 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);

⭐ DOM

Document Object Model(문서 객체 모델)

  • HTML 구성 요소(HTMLCollection/HTMLElement, NodeList/Node)를 객체(Object)로 저장하고 처리할 수 있는 방식이다.

  • HTML 구성 요소(HTMLCollection/HTMLElement, NodeList/Node) 알아내기

    • id 속성으로 알아내기
      var 변수 = document.getElementById('아이디')

    • class 속성으로 알아내기
      var 배열 = document.getElementsByClassName('클래스')

    • tag 이름으로 알아내기
      var 배열 = document.getElementsByTagName('태그')

    • 선택자로 알아내기
      var 변수 = document.querySelector('선택자')

    • 선택자로 알아내기
      var 배열 = document.querySelectorAll('선택자')

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

‣ id 속성

  • id : 동일한 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 속성

  • class : 여러개 존재 가능, 배열로 받아낸다.
var primary_box = document.getElementsByClassName('primary_box');
console.log(primary_box);

‣ 태그 이름

  • 태그 이름으로 알아내는 방법 : 배열
var div = document.getElementsByTagName('div');
console.log(div);

‣ 선택자

  • 선택자로 알아내는 방법 : 변수, 배열 (모두 가능)
// 선택자를 이용해 id="box1", id="bpx2', id="box3" 알아내기
var box1 = document.querySelector('.wrap > #box1'); // id는 .wrap 명시하지 않아도 됨. 
console.log(box1);
var box2 = document.querySelector('#box2');
console.log(box2);
var box3 = document.querySelector('#box3');
console.log(box3);

// 선택자를 이용해 class="primary_box" 알아내기
var primary_box = document.querySelectorAll('.wrap > .primary_box');  // .wrap 명시 해주는것을 권장
console.log(primary_box);

‣ 태그 내부 텍스트

  • textContent
  <p id="p1">Hello World</p>
  <script>
    var p1 = document.getElementById('p1');
    console.log(p1.textContent);      // Hello World
    /* 동일한 방법
       console.log(document.getElementById('p1').textContent
    */

  	// 내부 텍스트 바꾸는 법 (원래 있던 텍스트는 덮어쓰기 된다.)
    p1.textContent = '안녕하세요';    // Hello World -> 안녕하세요
    p1.textContent += ' 반갑습니다';  // 안녕하세요 반갑습니다 (누적)
  </script>

‣ 태그 내부 요소

  • innerHTML
  <p id="p2"><strong>Hello World</strong></p>
  <script>
    var p2 = document.getElementById('p2');
    console.log(p2.innerHTML);  // <strong>Hello World</strong>   텍스트만 나오는게 아닌 내부 구성요소까지 모두 출력
    p2.innerHTML = '<em>안녕하세요</em>';
    p2.innerHTML += '<mark>반갑습니다</mark>';
  </script>

‣ 태그 속성

attribute

  • 태그에 명시된 속성을 말한다.

  • 태그 속성 메소드

    • 속성값 알아내기 : getAttribute('속성')
    • 속성값 변경하기 : setAttribute('속성', '변경할값')
    • 속성값 삭제하기 : removeAttribute('속성')

‣ 객체 속성

property

  • JavaScript로 저장한 문서 객체가 가지는 속성이다.
  • 태그에 명시된 attribute와 비슷하지만 다르다.
예시)attributeproperty
id="box"id="box"id: box1) attribute와 property에서 부르는 명칭이 동일한 경우
class="p"class="p"className: p2) 속성 이름이 다른 경우
checked="checked"checked="checked"checked: true3) 속성의 이름은 같지만 저장되는 값이 다른 경우

객체 속성 사용

  • 객체.속성
  • 객체['속성']
    (객체 속성을 조작하는 작업을 수행할 땐 메소드를 호출하지 않는다.)
  • property 확인 : F12 - [Elements] 탭 - [Properties] 탭

‣ CSS 처리하기

  • 문서 객체의 style 속성을 이용한다.

  • style 속성으로 지정한 CSS 속성은 inline 방식으로 적용된다.
    (JavaScript로 지정한 CSS는 항상 적용된다.)

  • style 속성 뒤에 CSS 속성을 작성한다.

    • 하이픈(-)을 제거한 뒤 camel case 방식으로 CSS 속성을 바꾼다.
      예시) 객체.style.fontSize = '32px'
    • CSS 속성을 문자열(string) 형식으로 그대로 사용한다.
      예시) 객체.style['font-size'] = '32px'

👉DOM 활용 예제 깃허브(클릭)

✍️ JavaScript는 특성상 문자열 내부에 큰따옴표("")가 들어가는 경우가 많기 때문에 문자열을 표시할 때 작은따옴표('') 사용을 권장함.

날씨가 너무.. 꾸리꾸리...

profile
Gabriela
개발이 세상에서 제일 재밌어요
이전 포스트

[CSS] Display / Float / Overflow / Layout / Position / Responsive

다음 포스트

[JavaScript] 제어문 / Array

0개의 댓글