Study/js

Javascript 정리

유경호 2021. 5. 8. 11:54
반응형

vue의 사용법을 익히기 전에 javscript에 대해 세세하게 정리하기 보다는 java와 개념이 상이한 부분들을 간단히 정리합니다.
이번 포스팅은 개인적으로 숙지해야할 필요가 있다고 생각한 내용들을 긁어서 모아놓은 것이라 정리가 잘 되어 있지않습니다. 하여 다른 분들이 참고하기에 적절하게 작성되지 않은점 미리 알려드립니다.

변수 선언

var 변수명; 혹은 var 변수명 = 값;
  • 변수 이름은 영문과 숫자 그리고 일부 특수문자(_,$)만 포함할 수 있다.
    • 첫 글자로는 $, _, 영문자만 올 수 있음.
  • 저장할 수 있는 데이터형으론 문자형(String), 숫자형(Number), 논리형(Boolean), 비워진 데이터(Null & Undefined)가 있다.

문자형 데이터

  • 문자나 숫자를 큰따옴표(" ") 또는 작은따옴표(' ')로 감싼다.
  • 만일 문자형 데이터에 HTML 태그를 포함할 경우 출력문을 적용하면 태그로 인식되어 적용된다.
    • var tag="<h1>String</h1>"; → 변수 tag에 문자 데이터("<h1>String</h1>")를 저장한다.

문자 결합 연산

문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터

 

숫자형 데이터

var 변수명 = 숫자 또는 Number("숫자");
  • e.g. var s = 100, var t = Number("100");

논리형 데이터

var 변수명 = true or false;
var 변수명 = Bollean(데이터);
  • true(참) 또는 false(거짓)의 데이터를 의미
  • Boolean() 내장 메서드에 데이터를 입력하면 true 혹은 false를 반환한다.
    • 메서드에 전달되는 파라미터 중 숫자 0과 null, undefined를 제외한 모든 데이터는 true를 반환
  • 비교 연산자의 결과 값도 Boolean 데이터

null & undefined 데이터

  • undefined는 변수에 아무 값도 등록되어 있지 않은 경우
  • null은 변수에 데이터로 null이 저장되어 있는 경우

typeof 오퍼레이터

지정한 데이터 또는 변수에 저장된 데이터형을 알고 싶을 때 사용한다.

typeof 변수 또는 데이터;

delete 오퍼레이터

 

객체에 존재하는 속성을 삭제할 때 사용

var 참조 변수 = { 속성1: 값1, 속성2: 값2, ..., 속성n:  값n };

delete 객체.속성;

in 오퍼레이터

 

특정 값이 특정 객체에 존재하는지의 논리형 데이터를 반환함.

// Arrays
var cars = ["Saab", "Volvo", "BMW"];
"Saab" in cars          // Returns false (specify the index number instead of value)
0 in cars               // Returns true
1 in cars               // Returns true
4 in cars               // Returns false (does not exist)
"length" in cars        // Returns true  (length is an Array property)

// Objects
var person = {firstName:"John", lastName:"Doe", age:50};
"firstName" in person   // Returns true
"age" in person         // Returns true

// Predefined objects
"PI" in Math            // Returns true
"NaN" in Number         // Returns true
"length" in String      // Returns true

instanceof 오퍼레이터

 

특정 객체가 다른 특정 객체의 인스턴스인 지를 판별하여 논리형 데이터를 반환함.

var cars = ["Saab", "Volvo", "BMW"];

cars instanceof Array;          // Returns true
cars instanceof Object;         // Returns true
cars instanceof String;         // Returns false
cars instanceof Number;         // Returns false

 

 

비교 연산

비교 연산 중 [ >, <, >=, <= ]은 자바와 내용이 동일함. 상이한 것들만 아래에 정리하겠음.

  • A == B 
    • 숫자를 비교할 경우 데이터형(type)은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 일치하면 true를 반환한다.
    • 10 == "10" -> true
      10 == 10 -> true
  • A != B
    • 위와 동일하게 타입에 상관없이 숫자가 일치하지 않으면 false를 반환한다.
    • 10 != "10" -> false
      10 != 10 -> false
  • A === B
    • 숫자를 비교할 경우 반드시 표기된 숫자와 데이터형이 일치해야만 true를 반환한다.
    • 10 === "10" -> false
      10 === 10 -> true
  • A !== B
    • 위와 동일하게 데이터를 비교하여 일치하지 않으면 true를 반환
    • 10 !== "10" -> true
      10 !== 10 -> false

연산자 우선순위

  1. ( )
  2. 단항 연산자( --, ++, ! )
  3. 산술 연산자( *, /, %, +, - )
  4. 비교 연산자( >, >=, <, <=, ==, ===, !==, === )
  5. 논리 연산자( &&, || )
  6. 대입(복합 대입) 연산자( =, +=, -=, *=, /=, %= )

삼항 조건 연산자

조건식 ? 실행문1 : 실행문2;
  • 조건식이 true면 실행문1을 실행, false면 실행문2를 실행

 

제어문

  • 조건문: if, else, else if
  • 선택문: switch
  • 반복문: while, do while, for

조건식에 있는 데이터는 Boolean() 메서드에 입력했을 때와 같은 결과를 가짐

즉, 0, ""(빈 문자), null, undefined의 데이터나 해당 데이터들을 갖고 있는 변수가 조건식 자리에 위치하면 false, 이 경우를 제외한 모든 데이터들은 true

break, continue → 자바와 동일

 

for(var i in d)

→ 자바의 향상된 for문과 동일한 기능을함

 

 

객체

자바스크립트 객체의 메서드와 속성을 사용하는 기본형

객체.메서드();
객체.속성; 또는 객체.속성=값;

객체의 종류

  • 내장 객체
  • → 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해 사용할 수 있음. 문자(String), 날짜(Date), 배열(Array), 수학(Math), 정규 표현 객체(RegExp Object) 등의 객체들이 존재
  • 브라우저 객체 모델(BOM)
  • → 브라우저에 게층적으로 내장되어 있는 객체들로 window, screen, location, history, navigator 객체 등이 있다.
  • 문서 객체 모델(DOM)
  • → HTML 문서 구조. HTML 문서의 기본 구조는 최상위 객체로 <html>, 그 하위로 <head> 와 <body>가 있다.

내장 객체(Built-in Obejct)

내장 객체를 생성하는 기본형

참조 변수(인스턴스 네임) = new 생성 함수()

예제

var tv = new Object();

tv.width = "30cm";
tv.height = "25cm";
tv.weight = "20kg";
tv.color = "white";

tv.off = function() {
	document.write("전원 off", "<br />");
}

Date 객체 참조

https://www.w3schools.com/jsref/jsref_obj_date.asp

Array 객체 참조

https://www.w3schools.com/jsref/jsref_obj_array.asp

 

 

브라우저 객체 모델(BOM)

브라우저에 내장된 객체를 '브라우저 객체'라 한다.

 

브라우저 객체는 아래와 같이 계층적 구조를 이루고 있음.

  • document 아래로는 body, div, img, a, form, input... 등의 하위 객체들이 존재한다.

 

문서 객체 모델(DOM)

HTML 문서의 구조를 가리켜 문서 객체 모델(DOM: Document Object Model)이라 한다.

HTML 태그는 각각의 기능(Method)과 속성(Properties)을 갖고 있는 문서 객체이다. 문서 객체 모델을 배우는 주된 목적은 자바스크립트를 사용하여 문서 객체를 선택하고 속성 또는 스타일(CSS)를 적용하기 위함이다.

 

선택자

  • 직접 선택자: 크게 직접 문서에서 요소를 선택해오는 선택자
    • id, class, 폼 명(FormName), 요소 명(Elemnet Name) 선택자를 포함
  • 인접 관계 선택자: 직접 선택자를 사용해 선택해온 문서객체를 기준으로 가까이에 있는 요소를 선택하는 선택자
    • parentNode, childNodes, firstChild, children, previousSibling, nextSibling 선택자를 포함

Node Relationships

<html>

  <head>
    <title>DOM Tutorial</title>
  </head>

  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>

</html>

From the HTML above you can read:

  • <html> is the root node
  • <html> has no parents
  • <html> is the parent of <head> and <body>
  • <head> is the first child of <html>
  • <body> is the last child of <html>

and:

  • <head> has one child: <title>
  • <title> has one child (a text node): "DOM Tutorial"
  • <body> has two children: <h1> and <p>
  • <h1> has one child: "DOM Lesson one"
  • <p> has one child: "Hello world!"
  • <h1> and <p> are siblings

참조: https://www.w3schools.com/js/js_htmldom_document.asp

 

직접 선택자

document.getElementById("아이디");
document.getElementsByTagName("태그");
document.getElementsByClassName("클래스")
document.formName.inputName // 폼 요소에 name 속성을 이용해 요소를 선택한다

The nodeName Property → 위 예시 코드중 세 번째에 해당하는 선택자

The nodeName property specifies the name of a node.

  • nodeName is read-only
  • nodeName of an element node is the same as the tag name
  • nodeName of an attribute node is the attribute name
  • nodeName of a text node is always #text
  • nodeName of the document node is always #document

간접 선택자

parentNode // 선택한 요소의 부모 요소
childNodes[nodenumber] // 선택한 요소의 모든 자식 요소가 배열 객체로 저장됨
firstChild // 선택한 요소의 첫 번째 자식 요소
lastChild // 선택한 요소의 마지막 자식 요소
nextSibling // 선택한 요소의 이전에 오는 형제 요소
previousSibling // 선택한 요소의 다음에 오는 형제 요소

 

DOM의 Root Node

  • document.body - The body of the document
  • document.documentElement - The full document

선택자 적용 위치

<head> 태그 영역에 자바스크립트를 선언하게 되면 HTML을 읽어오는 것(loading)보다 스크립트의 선택자가 먼저 실행되어 객체를 선택할 수 없게 된다.

HTML 문단 태그보다 먼저 자바스크립트가 문서 상단에 위치해 있어 먼저 실행되면 다음에 오는 문단 태그를 스크립트의 선택자를 사용하여 선택해 올 수 없게 된다.

 

예시 인접 관계 선택자로 문서 객체에 스타일 적용하기

document.직접 선택자(선택 메서드).인접 관계 선택자.style.속성 = 값

노드 타입

  • ELEMENT_NODE
    • type: 1
    • <h1 class="heading">W3Schools</h1>
  • ATTRIBUTE_NODE
    • type: 2
    • class = "heading" (deprecated)
  • TEXT_NODE
    • type: 3
    • W3Schools
  • COMMENT_NODE
    • type: 8
    • <!-- This is a comment -->
  • DOCUMENT_NODE
    • type: 9
    • The HTML document itself (the parent of <html>)
  • DOCUMENT_TYPE_NODE
    • type:10
    • <!Doctype html>

참조: https://www.w3schools.com/js/js_htmldom_nodes.asp

https://www.w3schools.com/js/js_htmldom_nodelist.asp

 

요소의 속성값 변경, 생성 및 불러오는 방법

  • 요소 선택.속성명
  • 요소 선택.속성명 = "새 값"
  • 요소 선택.getAttribute("속성");
  • 요소 선택.setAttribute("속성", "새 값");

 

  • 요소 선택.innerHTML; → 선택한 요소의 모든 하위 요소를 문자 데이터로 반환
  • 요소 선택.innerHTML = 새 요소; → 선택한 요소의 전체 하위 요소를 새 요소로 변경 또는 새롭게 생성

문서 객체 이벤트 핸들러 적용

var theBtn = document.getElementById("btn");
var s = document.getElementById("img_src");

// 마우스가 버튼에 올려졌을 때를 트리거로 하여 호출할 함수 주입
theBtn.onmouseover = function() {
	document.getElementById("title").innerHTML = "마우스 오버";
	
	theBtn.firstChild.src="images/btn_over.gif";
	s.innerHTML = theBtn.firstChild.src;
}

참조:

https://www.w3schools.com/js/js_htmldom_events.asp

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

 

함수

기본 함수 정의문

function 함수명() {
	일련의 실행문;
}

function 함수명(매개 변수1, 매개 변수2, ..., 매개 변수n) {
	일련의 실행문;
}

var value = 0;

function 함수명() {
	value += 1; // 함수 외부의 변수 사용
}

 

익명 함수(함수명이 없는 함수)

참조 변수 = function() {
	일련의 실행문;
}

함수를 호출하는 기본형

함수명(); 또는 참조 변수();

내장 함수

자바스크립트 엔진에 내장된 함수 정의문을 의미함. 함수 정의문의 선언 없이 단지 함수 호출만으로 자바스크립트에 내장된 함수들을 사용할 수 있음.

 

 

대표적인 내장함수들

  • parseInt(): 문자를 정수로 변형
  • pareseFloat(): 문자를 실수로 변형
  • String(): 문자로 변형
  • Number(): 숫자로 변형
  • Boolean(): 논리형 데이터로 변형
  • isNaN(): 데이터에 숫자가 아닌 문자를 포함하면 true를 반환
  • eval(): 문자형 데이터를 큰따움표가 없는 스크립트 코드로 처리
    • e.g. eval("15+5") -> 20

참조: https://www.w3schools.com/jsref/jsref_obj_global.asp

 

재귀함수 호출

function myFnc() {
	실행문;
	myFunc();
}
myFunc();

 

지역 변수, 전역 변수

함수 정의문 내에서 변수를 선언할 때 var를 작성했는지, 생략했는지에 따라 지역 변수와 전역 변수가 결정된다.

var 변수; // 전역 변수

function 함수명() {
	변수=값; // 전역 변수
}

function 함수명() {
	var 변수=값; // 지역 변수
}

Scope

전역 Scope

Variables declared Globally (outside any function) have Global Scope.

var carName = "Volvo";

// code here can use carName

function myFunction() {
  // code here can also use carName
}

 

함수 Scope

Variables declared Locally (inside a function) have Function Scope.

// code here can NOT use carName

function myFunction() {
  var carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

JavaScript Block Scope

Variables declared with the var keyword cannot have Block Scope.

Variables declared inside a block {} can be accessed from outside the block.

{
  var x = 2;
}
// x CAN be used here

Before ES2015 JavaScript did not have Block Scope.

Variables declared with the let keyword can have Block Scope.

Variables declared inside a block {} cannot be accessed from outside the block:

{
  let x = 2;
}
// x can NOT be used here

Redeclaring Variables

Redeclaring a variable using the var keyword can impose problems.

Redeclaring a variable inside a block will also redeclare the variable outside the block:

var x = 10;
// Here x is 10
{
  var x = 2;
  // Here x is 2
}
// Here x is 2

Redeclaring a variable using the let keyword can solve this problem.

Redeclaring a variable inside a block will not redeclare the variable outside the block:

var x = 10;
// Here x is 10
{
  let x = 2;
  // Here x is 2
}
// Here x is 10

Redeclaring a JavaScript variable with var is allowed anywhere in a program:

var x = 2;

// Now x is 2
 
var x = 3;

// Now x is 3

Redeclaring a var variable with let, in the same scope, or in the same block, is not allowed:

var x = 2;       // Allowed
let x = 3;       // Not allowed

{
  var x = 4;   // Allowed
  let x = 5   // Not allowed
}

Loop Scope

Using var in a loop:

var i = 5;
for (var i = 0; i < 10; i++) {
  // some statements
}
// Here i is 10

 

Using let in a loop:

let i = 5;
for (let i = 0; i < 10; i++) {
  // some statements
}
// Here i is 5

In the first example, using var, the variable declared in the loop redeclares the variable outside the loop.

In the second example, using let, the variable declared in the loop does not redeclare the variable outside the loop.

When let is used to declare the i variable in a loop, the i variable will only be visible within the loop.

반응형