[JavaScript] - JavaScript 기본 문법

JavaScript

• 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원
• 웹 브라우저가 JavaScript를 HTML과 함께 다운로드하여 실행
• 웹 브라우저가 HTML 문서를 읽어 들이는 시점에 JavaScript Engine 실행
• 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어
• HTML문서에서 사용할 때 script 태그를 사용

 

선언

• 내부 선언, 외부 선언

// 내부 선언 (HTML 5부터 type 생략 가능)
<script type="text/javascript">
  function x() {}
</script>

// 외부 선언
<script src="./hello.js" type="text/javascript"></script>

• head, body 모두 script 태그가 선언 가능하지만 body 끝 부분에 사용하는 것을 권장한다. head에 있으면 각종 작업 이전에 초기화 되므로 body에 있어야 HTML 먼저 해석하기 때문에 속도가 빠르다.

 

자료형

console.log("msg : " + 40); // msg : 40

console.log("40" + 5); // 덧셈은 문자열 합침
console.log("40" - 5); // 35 - 덧셈을 제외한 나머지 사칙연산 숫자로 사칙연산

console.log(parseInt("123.45") + 1); // 124 - 123으로 형변환 후  + 1 
console.log(parseFloat("123.45") + 1); // 124.45 

console.log("1.1" + "1.1"); // 1.11.1
console.log((+"1.1") + (+"1.1")); // 2.2

var test;
console.log(typeof test); // undefined
test = null;
console.log(typeof test); // object
test = {};
console.log(typeof test); // object
test = 3;
console.log(typeof test); // number
test = 3.14;
console.log(typeof test); // number
test = 'sasca'
console.log(typeof test); // string
test = true;
console.log(typeof test); // boolean

 

호이스팅 (Hoisting)

// 변수 호이스팅 - var num; 이 존재하는 것처럼 동작
console.log(num); // undefined
var num = 123;
console.log(num) { // 123
  var num = 456;
}
console.log(num); // 456

• var 선언문이나 function 선언문 등 모든 선언문이 해당 scope의 처음으로 옮겨진 것처럼 동작화 . 즉, var num이라는 것이 상단에 변수를 메모리에 할당하며 undefined로 초기화 되어 있고 실제 할당된 값을 만나면 값을 변경한다.

 

//console.log(test); 호이스팅 불가
const test = 10; // 상수 표현  
//test = 11;  상수값 변경 불가

let test2 = 10; // 변수 표현 
test2 = 12; 
console.log(test +" & " + test2) // 10 & 12

• const나 let을 사용하면 재할당할 수 없기 때문에 호이스팅 문제 방지 가능하다.

 

// 함수 호이스팅
var result = plus(5,7);
console.log(result);
// 함수표현식이 아닌 함수 선언문일 경우에만 호이스팅 가능
// var plus = function (num1, num2) {~}; : 함수표현식이라면 변수 호이스팅이 발생하여 undefined 발생
function plus(num1, num2) { 
  return num1 + num 2;
}

 

기본 문법

var num = 10;
var str = "10";
console.log(num == str); // true
console.log(num === str); // false
console.log(num > num ?  "true" : "false"); // 삼항 연산자 

• ==, === 차이는 자료형까지 비교하는지 아닌지의 여부이다.

 

for 문

• for (초기화; 조건식; 증감표현식){}
• for (let 변수 in 배열 or 객체) {}

 

객체 생성

// 객체 리터럴 - {}를 사용하여 객체 생성 (대부분 많이 사용)
var member = {
  id : 'sasca',
  name : '홍길동'
}

// Object 생성자 함수 
var student = new Object();
student.name = '홍길동';
student.classNum = 10;

// 생성자 함수 - 중복 코드 방지 
function Student(name, age, classNum) {
  this.name = name;
  this.area = area;
  this.classNum = classNum;
  this.info = function() {
    console.log(this.name + '은' + this.area + this.classNum + '반')
  };
}

• JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용 가능
• 일급 객체란 함수를 데이터 다루듯이 다룰 수 있다는 의미

 

속성 값 조회

var member = {
    "user-name" : "홍길동",
    "age" : 20, 
    "city" : "서울"
};

console.log(member["user-name"]); // 홍길동
console.log(member.user-name); // Nan

member.tel ='010-2222-3333'; // 속성 값이 없으면 자동 생성 
delete member.tel; // 속성 제거 
console.log(member.tel) // undefined

• 속성명에 연산자가 포함된 경우 [] 표기법만 접근 가능하며 나머지는 .으로 접근 가능
• 속성이 없는 경우 자동 생성 되며 delete 키워드를 통해 속성 제거가 가능하다.

 

함수 (function)

• JavaScript에서 함수는 일급(first-class) 객체이다.
• 함수를 변수, 객체, 배열 등에 저장할 수 있고 다른 함수에 전달하는 인자 (콜백함수) 또는 리턴 값으로 사용 가능

// 함수 선언문 
function x (x,y) {
    // 함수 내용
}

// 함수 표현식 
var tmp = function(x, y) {
    // 함수 내용
}

// Function 생성자 함수 
var tmp2 = new Function(x,y);

// 함수 호출 
tmp(1,2);

 

함수 호이스팅

var result = plus(5,7);
console.log(result); // 12

function plus (num1, num2) {
    return num1 + num2;
}

/*  변수 호이스팅 발생 
    var plus = function(num1, num2) {
        return num1 + num2;
    };
*/

• 함수 선언문의 경우 변수 호이스팅과 같이 코드 내 어느곳에서든지 호출 가능 (단, 많으면 성능 저하 가능성 존재)
• 단, 함수 표현식의 경우 변수 호이스팅이 발생한다.

 

var x = sum(1,2,3);

function sum(x,y) {
    console.log(x+y); //3
}

• 자바스크립트는 매개변수가 일치하지 않아도 호출이 가능하다. 단, 지정한 갯수만큼만 값이 나온다.

 

콜백 함수

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    console.log('안녕');                     
});

setTimeout(function(){
  console.log('3초후 실행');
}, 3000);

• Callback function은 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수
• 일반적으로 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정 시점에 실행됨.
• 주로 비동기식 처리 모델에서 사용 -> 처리가 종료되면 호출될 함수를 미리 매개변수에 전달하고 종료되면 콜백함수를 호출

 

요약

• JavaScript의 변수는 var, let, const를 사용하여 선언하며 타입이 없다.
• 자료형은 Primitive Type과 Object Type으로 분류
• 함수는 일급객체로 변수에 저장하거나 함수의 전달인자 또는 반환 값으로 사용
• 객체는 이름과 값으로 구성된 프로퍼티의 집합이며 프로퍼티를 동적으로 조작 가능

 

Window 객체

• 웹 브라우저에서 동작하는 JavaScript의 최상위 전역 객체
• 브라우저와 관련된 여러 객체와 속성, 함수가 있다.

 

브라우저 창

• alert() : 브라우저의 알림창
• confirm() : 브라우저의 확인 / 취소 선택창
• prompt() : 브라우저의 입력 창

 

navigator

• 브라우저의 정보가 내장된 객체
• appCodeName, appName, appVersion, cookieEnabled, platform, userAgent 등 존재

 

location

• 현재 페이지 URL과 관련된 정보를 알 수 있는 객체
• location.href : 현재 URL 조회 및 값을 할당 시 할당 된 URL 페이지로 이동
• location.reload() : 현재 페이지 새로고침

 

history

• history.back, forwoard() : history 객체를 써서 페이지 뒤로, 앞으로 이동

 

open

• 새 창을 여는 함수 : window.open('페이지 URL', '창이름', '특성', 히스토리 대체여부);
  • 창이름(string) : open할 대상 (_blank, _self 등) 지정 혹은 창의 이름
  • 특성(string) : 새로 열릴 창의 너비, 높이 등의 특성 지정
  • 히스토리 대체여부 (true/false) : 현재 페이지 히스토리에 덮어 쓸지 여부
• 반대로 close() 함수로 닫을 수 있다.

 

opener

// 첫 번째 창
<!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>Document</title>
</head>
<body>
<button onclick="javascript:windowOpen()">
버튼 창열기
</button>
<a href="javascript:windowOpen();">링크 창열기</a>
<div id="view"></div>
<script>
    function windowOpen() {
        window.open('./second.html', 'winname', 'width=300, height=200');
    }

    function setData(data) {
        document.getElementById("view").innerHTML = data;
    }
</script>
</body>
</html>

// 두 번째 창
<!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>Document</title>
<script>
    function setOpenerData(data) {
        window.opener.setData(data);
        window.close();
    }

    function reloadOpener() {
        opener.location.reload();
        self.close();
    }

</script>
</head>
<body>
    <a href="javascript:setOpenerData('value1');">선택1</a>
    <a href="javascript:setOpenerData('value2');">선택2</a>
    <a href="javascript:reloadOpener();">부모 창 새로 고침 후 닫기</a>
</body>
</html>

• opener 속성을 통해 부모 창 (새 창을 연 창)을 컨트롤 가능
  • 부모 창에 값 전달
  • 부모 창을 새로 고침하거나 페이지 이동
• opener 객체는 부모 창의 window 객체

 

DOM

• Document Object Model : HTML과 XML문서의 구조를 정의하는 API를 제공
• 문서 요소 집합을 트리 형태의 계층 구조로 HTML을 표현
• HTML 계층 구조의 제일 위에는 document 노드가 있다. 즉, HTML을 계층구조 형식의 객체로 표현

 

문서 객체 만들기

window.onload = function() {
    var title = document.createElement('h2');
    var msg = document.createTextNode('Hello world');

    title.appendChild(msg);
    document.body.appendChild(title);
};

• msg 위에 title 위에 바디를 두는 방식과 같이 자바스크립트에서도 HTML 문서를 만들 수 있다.

 

window.onload = function() {
  var profile = document.createElement('img');
  // profile.src = 'profile.png'; // 웹 브라우저가 지원하는 태그의 경우
  profile.setAttribute('data-content', 'profile.png'); // 웹 브라우저가 지원하지 않는 태그의 속성도 가능
  profile.setAttribute('width', 150);
  document.body.appendChild(profile);
};

• 기본 방법은 지원하는 태그의 속성만 사용 가능하지만 setAttribute(name, value)로 커스텀화 할 수 있다.

 

window.onload = function() {
  var html = document.getElementById('divHtml');
  var text = document.getElementById('divText');

  html.innerHTML = '<h2>Hello World'</h2>;
  html.innerTEXT = 'Hello World';
}

• innerHTML : 문자열을 HTML 태그로 삽입
• innerTEXT : 문자열을 text node로 삽입

 

객체 가져오기

• getElementById(id) : 태그의 id 속성이 id와 일치하는 element 객체 얻기

<body>
    <h2 class="colors">hello world 1</h2>
    <h2 class="colors">hello world 2</h2>
    <h2 class="colors">hello world 3</h2>
    <script>
        window.onload = function() {
            var color = ['orange', 'cyan', 'purple'];
            var colors = document.getElementsByClassName('colors');

            for (var i=0; i<colors.length; i++) {
                colors[i].style.background = color[i];
            }
        };
    </script>
</body>

• getElementsByClassName(classname) : 태그의 class 속성이 classname과 일치하는 element 배열 얻기

 

<body>
    <h2 class="colors">hello world 1</h2>
    <h2 class="colors">hello world 2</h2>
    <h2 class="colors">hello world 3</h2>
    <script>
        window.onload = function() {
            var color = ['orange', 'cyan', 'purple'];
            var colors = document.getElementsByTagName('h2');

            for (var i=0; i<colors.length; i++) {
                colors[i].style.background = color[i];
            }
        };
    </script>
</body>

• getElementsByTagName(tagname) : 태그이름이 tagname과 일치하는 element 배열 얻기
• getElementsByName(name) : 태그의 name 속성이 name과 일치하는 element 배열 얻기

 

<body>
    <h2 id="header">hello </h2>

    <script>
        window.onload = function() {
            var msg = document.querySelector('#header');
            msg.innerHTML = '안녕</h2>'; // hello 대신 안녕 출력
        };
    </script>
</body>

• querySelector(selector) : selector에 일치하는 첫 번째 element 객체 얻기

 

<body>
    <h2 class="colors">hello world 1</h2>
    <h2 class="colors">hello world 2</h2>
    <h2 class="colors">hello world 3</h2>
    <script>
        window.onload = function() {
            var color = ['orange', 'cyan', 'purple'];
            var colors = document.querySelectorAll('.colors');

            for (var i=0; i<colors.length; i++) {
                colors[i].style.background = color[i];
            }
        };
    </script>
</body>

• querySelectorAll(selector) : selector에 일치하는 모든 element 배열 얻기

 

문서 객체 제거

<h2 class="colors1">hello world 1</h2>
<h2 class="colors2">hello world 2</h2>
<h2 class="colors3">hello world 3</h2>
<script>
  window.onload = function() {
  var del = document.querySelector('#colors3');
  document.body.removeChild(del); // 1,2 만 출력 
};
</script>

• 객체의 자식 노드를 제거

 

이벤트

• 이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생
• 이벤트 핸들러 또는 이벤트 리스너라 하며 이 함수에 발생시 실행해야 하는 코드 작성

 

마우스 이벤트

• onclick : 마우스로 Element를 클릭 했을 때 발생
• ondblclick : 마우스로 Element를 더블 클릭 했을 때 발생
• onmouseup : 마우스로 Element에서 마우스 버튼을 올렸을 때 발생
• onmousedown : 마우스로 Element에서 마우스 버튼을 눌렀을 때 발생
• onmouseover : 마우스를 움직여서 Element 밖에서 안으로 들어올 때 발생
• onmouseout : 마우스를 움직여서 Element 안에서 밖으로 나갈 때 발생
• onmousemove : 마우스를 움직일 때 발생

 

키보드 이벤트

• onkeypree : 키보드가 눌려 졌을 때 발생 (ASCII)
• onkeydown : 키보드를 누르는 순간 발생 (KeyCode)
• onkeyup : 키보드의 누르고 있던 키를 뗄 때 발생

 

프레임(UI) 이벤트

• unload : document, image, frame 등이 모두 로딩 되었을 때 발생
• onabort : 이미지 등의 내용을 로딩하는 도중 취소 등으로 중단 되었을 때 발생
• onerror : 이미지 등의 내용을 로딩 중 오류가 발생 했을 때 발생
• onresize : document, element의 크기가 변경 되었을 경우 발생
• onscroll : document, element가 스크롤 되었을 때 발생
• onselect : 텍스트를 선택했을 때 발생

 

폼(Form) 이벤트

• onsubmit : form이 전송될 때 발생
• onreset : 입력 form이 reset될 때 발생
• oninput : input 또는 textarea의 값이 변경 되었을 때 발생
• on change : select box, checkbox, radio button의 상태가 변경 되었을 때 발생
• onfocus(focusin) : input과 같은 요소에 입력 포커스가 들어 올 때 발생
• onblur(focusout) : input과 같은 요소 등에서 입력 포커스가 다른 곳으로 이동할 때 발생
• onselect : input, textarea에 입력 값 중 일부가 마우스 등으로 선택될 때 발생

 

이벤트 핸들러 등록

 

인라인 이벤트 핸들러

<body>
  <div onclick="javascript:alert('안녕');">클릭</div>
    <div onclick="msg1(); msg2();">클릭2</div> <!-- 여러 함수 호출도 가능 -->
</body>

• 인라인 이벤트 핸들러 방식으로 ''이벤트 핸들러(리스너)를 등록한다''라고 표현한다. 단, 이러한 방식은 HTML 코드를 Javascript가 침범한다는 문제가 있다. 최근의 CBD(Component Based Development) - React, Vue.js 등 과 같은 프레임 워크에서 다시 인라인 방식으로 이벤트를 처리한다. (CBD에서는 html, css, js를 view의 구성 요소로만 보기 때문)

 

이벤트 핸들러 프로퍼티

<body>
  <div id="div1">클릭</div>
    <script>
    document.getElementById("div1").onclick = function() {
    alert('안녕');
    };
  </script>
</body>

• 이벤트 핸들러 프로퍼티 방식으로 HTML 코드와 JavaScript를 분리할 수 있다. div1에 클릭 이벤트가 발생하면 핸들러로 등록된 함수가 실행된다. 단, 하나의 이벤트 핸들러만을 바인딩 할 수 있다는 단점이 있다.

 

<body>
    <button id="btn">클릭</button>

    <script>
        const btn = document.querySelector('#btn');
        btn.addEventListener('click', function() {
            alert('안녕');
        });

        btn.addEventListener('click', function(){
            btn.style.color = 'purple';
            btn.style.fontSize = '30px';
            btn.style.fontWeight = 'bold';
        });
    </script>
</body>

• addEventListener를 사용하면 여러 이벤트를 추가할 수 있다.

 

Web Storage

• 데이터를 사용자 로컬에 보존하는 방식 (저장, 덮어쓰기, 삭제 등 조작 가능)
• 자바스크립트로만 조작, 모바일 사용 가능
• localStorage와 SessionStorage로 구성
  • 키와 값을 하나의 세트로 저장 , 도메인과 브라우저별로 저장, 값은 반드시 문자열로 저장됨
  • setItem(key, value) : key, value를 쌍으로 저장
  • getItem(key) : key에 해당하는 값을 리턴
  • removeItem(key) : key에 해당하는 값 삭제
  • clear() : 모든 값 삭제
  • key(index) : index 해당하는 key
  • length : 저장된 항목의 개수

 

localStorage

<script>
    function init() {
    //localStorage data 추가 방법 3가지
    localStorage.Test = "Sample";
    localStorage["Test"] = "Sample";
    localStorage.setItem("Test", "Sample");
  }

  document.querySelector("#result").innerHTML = val;
  localStorage.removeItem("Test"); // 삭제 
</script>