Im Bay

[JavaScript] 정규 표현식

Bay Im — Sat, 22 Mar 2025 16:50:35 +0900

정규 표현식

정규 표현식(regular expression)
- 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴
- 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용
정규 표현식의 생성
- 정규 표현식 리터럴을 이용한 생성
  - /검색패턴/플래그
- RegExp 객체를 이용한 생성
  - new RegExp(”검색패턴”)
- 예시
  - ```
  var regStr = /a+bc/; // 정규 표현식 리터럴을 이용한 생성
  var regObj = new RegExp("a+bc"); // RegExp 객체를 이용한 생성
  
  regStr; // /a+bc/
  regObj; // /a+bc/
```
- 단순한 패턴 검색은 문자열 직접 나열
  - var strReg1 = /abc/;
  - targetStr.search(strReg1); ⇒ 해당 위치의 첫번째 인덱스 반환, 목찾으면 -1 반환
플래그 flags
- 정규 표현식 생성할 때 플래그를 사용하여 기본 검색 설정을 변경할 수 있다
- 설정된 플래그는 나중에 추가되거나 삭제될 수 없다.
- 플래그 종류
  - i
    - 대소문자 구분하지 않도록 설정
  - g
    - 일치하는 모든 부분 선택
  - m
    - 여러 줄의 입력 문자열을 그상태 그대로 여러 줄로 비교하도록 설정
  - y
    - 대상 문자열의 현재 위치부터 비교를 시작하도록 설정
- 예시
  - ```
  var targetStr = "bcabcAB";
  var strReg = /AB/; // 검색 패턴 비교 시 기본 설정으로 대소문자를 구분함.
  var strUsingFlag = /AB/i; // new RegExp("AB", "i")와 동일
  
  targetStr.search(strReg); // 5
  targetStr.search(strUsingFlag); // 2 -> 대소문자를 구분하지 않고 검색
```
특수 문자
- 더 복잡한 조건을 사용할 때 특수문자 사용
- 특수 문자 종류
  - \
    - \ 다음에 일반문자가 나오면 이스케이프 문자로 해석하고, 특수문자가 나오면 일반문자로 해석
  - \d
    - 숫자 검색
    - /[0-9]/ 와 같음
  - \D
    - 숫자가 아닌 문자를 검색
    - /[^0-9]/ 와 같음
  - \w
    - _를 포함한 영문자 및 숫자 검색
  - \W
    - _, 영문자, 숫자가 아닌 문자 검색
  - \s
    - 띄어쓰기, 탭, 줄바꿈 등 공백 문자 검색
  - \S
    - 띄어쓰기, 탭, 줄바꿈 등 공백 문자가 아닌 문자를 검색
  - \b
    - 단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지 검색
  - \xhh
    - 16진수 hh에 해당하는 유니코드 문자 검색
  - \uhhhh
    - 16진수 hhhh에 해당하는 유니코드 문자 검색

양화사(quantifier)

수량을 나타내는 특수문자
양화사 종류
- n*
  - 바로 앞의 문자가 0번 이상 나타나는 경우 검색
  - /{0, }/와 같음.
- n+
  - 바로 앞의 문자가 1번 이상 나타나는 경우 검색
  - /{1, } 와 같음
- n?
  - 바로 앞의 문자가 0번 또는 1번만 나타나는 경우 검색
  - /{0, 1}/과 같음

예시

var targetStr = "Hello World!";
var zeroReg = /lo*/; // 문자 'l' 다음에 문자 'o'가 0번 이상 나타나는 경우를 검색함.
var oneReg = /lo+/; // 문자 'l' 다음에 문자 'o'가 1번 이상 나타나는 경우를 검색함.
var zeroOneReg = /lo?/; // 문자 'l' 다음에 문자 'o'가 0 또는 1번만 나타나는 경우를 검색함.

targetStr.search(zeroReg);    // 2
targetStr.search(oneReg);     // 3
targetStr.search(zeroOneReg); // 2

괄호 종류
- a(b)c
  - 전체 패턴 검색 후 괄호 안 문자열 저장
  - ex) abc 검색 후 b 저장
- [abc]
  - []안에 명시된 문자 검색
- [0-3]
  - []안에 명시된 숫자들 검색
  - ex) 0~3까지 숫자 검색
- [\b]
  - 백스페이스 문자 검색
- {n}
  - 앞의 문자가 정확히 n번 나타나는 경우 검색
  - n은 양의 정수
- {m, n}
  - 앞의 문자가 최소 m번 이상 n번 이하로 나타나는 경우 검색
  - m, n은 양의 정수
위치문자
- 패턴을 검색할 단어의 위치 지정
- 위치문자 종류
  - ^a
    - 단어의 맨 앞에 위치한 해당 패턴만을 검색
    - ex) a로 시작하는 단어의 a만을 검색
  - a$
    - 단어의 맨 뒤에 위치한 해당 패턴만을 검색
    - ex) a로 끝나는 단어의 a만을 검색
- 예시
  - ```
  var firstStr = "Php";
  var secondStr = "phP";
  var strReg = /^p/;  // 'p'로 시작하는 단어의 'p'만을 검색함.
  
  firstStr.match(strReg); // null
  secondStr.match(strReg); // p
```
RegExp 객체
- RegExp 객체
  - 정규 표현식을 구현한 표준 내장 객체
- 문법
  - new RegExp(검색패턴[, 플래그]);
    - 검색패턴은 따옴표나 슬래시로 감싸야 한다.
- 관련 메소드
  - 정규식.exec(문자열);
    - 인수로 전달된 문자열에서 특정 패턴을 검색하여 패턴과 일치하는 문자열 반환, 없으면 null 반환
  - 정규식.test(문자열);
    - 인수로 전달된 문자열에 특정 패턴과 일치하는 문자열이 있는지 검색 (true/false 반환)

[JavaScript] 예외처리

Bay Im — Sat, 22 Mar 2025 16:47:38 +0900

예외처리

예외 exception
- 예외란 프로그램이 실행 중에 발생하는 런타임 오류 의미
예외 발생
- throw 키워드
  - throw 표현식;
  - 표현식에는 예외코드를 나타내는 숫자, 오류 메시지를 담고 있는 문자열, Error 객체 등이 올 수 있다.

예외 처리

try - catch - finally 문

형식

try {
    예외를 처리하길 원하는 실행 코드;
} catch (ex) {
    예외가 발생할 경우에 실행될 코드;
} finally {
    try 블록이 종료되면 무조건 실행될 코드; 
    // 예외가 발생하건 안하건 가장 마지막에 무조건 실행 
}

그 외
- try - catch
- try - finally

Error 객체
- 런타임 오류가 발생할 때마다 Error 객체의 인스턴스가 만들어져 해당 오류의 정보를 저장한다.
- ex.name, ex.message 같이 Error 객체의 정보를 알 수 있다.

Strict 모드

더욱 엄격한 오류 검사 적용
스크립트나 함수의 맨 처음에 “use strict” 지시어를 사용하여 선언

예시

// 스크립트 예시
"use strict"    // 전체 스크립트를 strict 모드로 설정함.

try {
    num = 3.14; // 선언되지 않은 변수를 사용했기 때문에 오류를 발생시킴.
} catch (ex) {
    document.getElementById("text").innerHTML = ex.name + "<br>";
    document.getElementById("text").innerHTML += ex.message;

}

// 함수 예시
function StrictBlock() {
    "use strict"  // 함수 블록만을 strict 모드로 설정함.
    try {
        num = 123 // 선언되지 않은 변수를 사용했기 때문에 오류를 발생시킴.
    } catch (ex) {
        document.getElementById("funcStrict").innerHTML = ex.name + "<br>";
        document.getElementById("funcStrict").innerHTML += ex.message;
    }
}

[JavaScript] 이벤트

Bay Im — Sat, 22 Mar 2025 16:45:54 +0900

이벤트

이벤트(event)
- 웹브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미
이벤트 타입 event type
- 이벤트의 종류를 나타내는 문자열로 event name 이라고도 한다.
- 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트
이벤트 리스너(event listener)
- 이벤트가 발생했을 때 그 처리를 담당하는 함수, event handler 라고도 한다.
- 이벤트가 특정 요소에서 발생시, 그 요소에 등록된 이벤트 리스너 실행
이벤트 리스너 등록
- 객체나 요소에 프로퍼티로 등록하는 방법
  - 자바스크립트 코드에서 프로퍼티로 등록
    - 이벤트 타입별로 하나의 이벤트 리스너만 등록 가능
    - window.onload = function() { … }
  - HTML 태그에 속성으로 등록
    - <p onclick="alert('문자열을 클릭했어요!')">
- 객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법
  - addEventListener() 메소드
    - 대상객체.addEventListener(”이벤트명”, 실행할함수명, 이벤트전파방식)
      - 이벤트 전파 방식은 false면 버블링(bubbling) 방식으로, true면 캡처링(capturing) 방식으로 이벤트를 전파
여러 개의 이벤트 리스터 등록
- addEventListener() 메소드 사용시 하나의 객체에 여러 이벤트 리스너 등록 가능
이벤트 리스너 삭제
- removeEventListener() 메소드
  - 객체명.removeEventLister(”이벤트명”, 함수명);
이벤트 객체 event object
- 모든 이벤트 객체는 이벤트 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가진다.
- event.type, event.target
이벤트 전파 방식
- 이벤트 리스터를 실행시킬 대상 요소를 결정하는 과정
- 전파 방식
  - 버블링(bubbling) 전파 방식
    - 이벤트가 발생한 요소부터 시작해서 DOM 트리를 따라 위쪽으로 올라가며 전파되는 방식
  - 캡쳐링(capturing) 전파 방식
    - DOM 트리의 최상위부터 아래쪽으로 내려가면 전파되는 방식
    - 해당 전파방식을 사용하기 위해서는 addEventListener() 메소드의 세번째 인수에 true 전달
이벤트 기본 동작의 취소
- event.preventDefault();
  - 링크의 기본 동작 취소
이벤트 전파의 취소
- event.stopPropagation()

[JavaScript] 노드, 브라우저 객체 모델(BOM)

Bay Im — Sat, 22 Mar 2025 16:44:53 +0900

노드

node
- HTML DOM은 node라고 불리는 계층적 단위에 정보를 저장하고 있다.
- 노드 트리는 최상위 레벨인 루트 노드부터 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.
노드의 종류
- 문서 노드(document node)
  - HTML 문서 전체를 나타내는 노드
- 요소 노드(element node)
  - 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드
- 속성 노드(attribute node)
  - 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음
  - 해당 요소 노드의 자식 노드에는 포함되지 않음
- 텍스트 노드(text node)
  - HTML 문서의 모든 텍스트는 텍스트 노드
- 주석 노드(comment node)
  - HTML 문서의 모든 주석은 주석 노드
노드 접근 방법
- getElementsByTagName() 메소드 이용
- 노드 간의 관계를 이용하여 접근하는 방법 (프로퍼티 이용)
  - parentNode - 부모노드
  - childNodes - 자식노드 리스트
    - var listItems = document.getElementById("list").childNodes;
    - listItems[1].firstChild.nodeValue = “변경내용”;
  - firstChild - 첫번째 자식노드
  - lastChild - 마지막 자식노드
  - nextSibling - 다음 형제노드
  - previousSibling - 이전 형제노드
노드에 대한 정보 접근
- nodeName
  - 노드 고유의 이름을 저장 (태그 이름 대문자로 저장)
  - 수정할 수 없는 읽기전용 프로퍼티
  - 예시
    - document.getElementById("document").innerHTML = document.childNodes[1].nodeName; // HTML
- nodeValue
  - 노드의 값을 저장
  - 예시
    - var headingText = document.getElementById("heading").firstChild.nodeValue;
- nodeType
  - 노드 고유의 타입 저장
  - 수정할 수 없는 읽기 전용 프로퍼티
  - 예시
    - var headingType = document.getElementById("heading").firstChild.nodeType;
노드의 관리
- 노드의 추가
  - 변수명.appedChild()
    - 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가
  - .insertBefore(새로운자식노드, 기존자식노드)
    - 새로운 노드를 특정 자식노드 앞에 추가
  - insertData(인덱스, “새로운텍스트”)
    - 텍스트 노드의 텍스트 데이터의 새로운 텍스트 추가
- 노드의 생성
  - document.createElement(”요소”)
    - 새로운 요소 노드 생성
  - document.createAttribute(”속성”)
    - 새로운 속성 노드 생성
    - 이미 존재하는 요소 노드에 속성 노드 생성하고 싶다면 setAttribute() 메소드 사용
  - document.createTextNode(”텍스트”)
    - 새로운 텍스트 노드 생성
- 노드의 제거
  - 변수명.removeChild(변수명2)
    - 자식노드 리스트에서 특정 자식노드 제거
  - 변수명.removeAttribute(”속성”)
    - 속성이름을 이용하여 특정 속성 노드 제거
- 노드의 복제
  - 복제할노드.cloneNode(true/false(자식노드 복제여부- true는 자식노드도 같이 복제, false는 속성노드만 복제))
    - 기존 노드 복제
    - ex) parent.appendChild(originItem.cloneNode(true));
노드의 조작
- 노드의 값 변경
  - nodeValue 프로퍼티 사용하여 특정 노드 값 변경
  - setAttribute() 메소드로 속성 노드의 속성값 변경
- 텍스트 노드값 변경
  - nodeValue 프로퍼티 사용
    - ex) para.firstChild.nodeValue = "텍스트 변경";
- 속성노드의 값 변경
  - setAttribute() 메소드 사용
    - document.getElementsByTagName("p")[0].setAttribute("class", "para");
- 요소 노드의 교체
  - replaceChild() 메소드 사용
    - 교체할 노드 = 부모노드.replaceChild(새로운자식노드, 기존자식노드)
- 텍스트 노드의 데이터 교체
  - replaceData() 메소드 사용
    - 텍스트노드.replaceData(인덱스, 교체할문자수, “새로운텍스트”)

브라우저 객체 모델(BOM)

Window 객체
- Window 객체
  - JS의 모든 객체, 전역함수, 전역변수들은 자동으로 window 객체의 프로퍼티가 된다
  - window 객체의 메소드는 전역함수이며, window 객체의 프로퍼티는 전역변수
  - 문서객체모델(DOM)의 요소들도 window 객체의 프로퍼티
- 관련 메소드
  - 브라우저 새창열기
    - window.open(”경로”, “이름”, 옵션들)
  - 브라우저 창닫기
    - 변수명.close();
Location 객체
- Location 객체
  - 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용
- 관련 메소드
  - 현재 문서의 URL
    - location.href
  - 현재 문서의 호스트 이름
    - location.hostname
  - 현재 문서의 파일 경로명
    - location.pathname
  - 현재 창에 문서 불러오기
    - location.assgin(”경로/파일명”)
    - location.replace(”경로/파일명”)
      - replace는 브라우저의 히스토리에서 제거(뒤로가기 못함)
    - location.reload()
      - 현재 문서를 다시 불러오는
History 객체
- History 객체
  - 브라우저의 히스토리 정보를 문서와 문서상태 목록으로 저장하는 객체
- 관련 메소드
  - 히스토리 목록 개수
    - history.length
  - 히스토리 목록 접근
    - 이전 페이지로 가기
      - window.history.back();
    - n 수만큼 히스토리 목록 사이 이동
      - window.history.go(-1);
    - 다음 페이지로 가기
      - window.history.forward();
Screen 객체
- Screen 객체
  - 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체
- 관련 프로퍼티
  - 모니터 크기 반환
    - screen.width, screen.height
  - 브라우저창 크기 반환
    - window.outerWidth, window.outerHeight
  - 실제 사용할 수 있는 화면 크기
    - screen.availWidth, screen.availHeight
Navigator 객체
- Navigator 객체
  - 브라우저 공급자 및 버전정보 등을 포함한 브라우저에 대한 다양한 정보 저장하는 객체
- 관련 프로퍼티
  - 현재 사용하고 있는 브라우저의 이름
    - navigator.appName
    - navigator.appCodeName
  - 현재 브라우저의 버전
    - navigator.appVersion
    - navigator.userAgent
  - 기본 언어 설정
    - navigator.language
대화 상자
- alert() 메소드
  - window.alert(”메시지”)
- confirm() 메소드
  - 메시지 출력 후 사용자가 확인이나 취소 누르면 boolean 값으로 해당 결과 반환
  - window.confirm(”메시지”)
- prompt() 메소드
  - 메시지 출력 후 사용자가 입력한 문자열 반환
  - window.prompt(”메시지”, “입력란의 기본 메시지”)
- showModalDialog()
  - 좀 더 복잡한 대화상자 만들기
타이머
- 관련 메소드
  - window.setTimeout(호출할함수, 밀리초);
    - 해당 밀리초가 지난 뒤에 함수 호출
  - window.setInterval(호출할함수, 밀리초);
    - 지정된 시간마다 함수 반복적으로 호출
  - window.clearTimeout(타임아웃ID);
    - setTimeout() 메소드의 반환값을 전달하면 계획된 함수의 호출 취소
  - window.clearInterval(타임아웃ID);
    - setTimeout() 메소드의 반환값을 전달하면 반복되는 함수의 호출 취소

[JavaScript] 객체

Bay Im — Sat, 22 Mar 2025 16:43:05 +0900

객체

객체
- 객체란 name과 value로 구성된 프로퍼티의 정렬되지 않은 집합
객체 property 참조
- 객체명.프로퍼티명
- 객체명[”프로퍼티명”]

객체 메소드 참조

객체명.메소드명()

예시

var person = {
    name: "홍길동",      // 이름 프로퍼티를 정의함.
    birthday: "030219",  // 생년월일 프로퍼티를 정의함.
    pId: "1234567",      // 개인 id 프로퍼티를 정의함.
    fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.
        return this.birthday + this.pId;
    }
};

person.name;    // 홍길동
person["name"]; // 홍길동

person.fullId(); // 0302191234567
person.fullId;  // function () { return this.birthday + this.pId; }

객체의 생성 방법 3가지

리터럴 표기

var 객체이름 = {
    프로퍼티1이름: 프로퍼티1의값,
    프로퍼티2이름: 프로퍼티2의값,
    ...
};

//예시
var kitty = {
    name: "나비",
    family: "코리안 숏 헤어",
    age: 1,
    weight: 0.1
};

생성자 함수 (new 연산자 사용)
- JS 제공 생성자나 사용자가 작성하여 사용 가능
- 예시
  - var day = new Date();
  - document.write("올해는 " + day.getFullYear() + "년입니다.");

Object.create()

Object.create(프로토타입객체[, 새로운객체의프로퍼티1, 새로운객체의프로퍼티2, ...]);

//예시
var obj = Object.create(null, {             // null 프로토타입을 사용하여 새로운 객체를 만들고
    x: { value: 100, enumerable: true },    // x좌표를 나타내는 열거할 수 있는 프로퍼티와
    y: { value: 200, enumerable: true }     // y좌표를 나타내는 열거할 수 있는 프로퍼티를 추가함.
});

obj.x; // x좌표
obj.y; // y좌표 
Object.getPrototypeOf(obj); // 객체의 프로토타입을 반환해 줌.

this 키워드
객체 프로퍼티 삭제
- delete 객체명.프로퍼티명;
- 프로퍼티 삭제시 값 뿐만 아니라 프로퍼티 그 자체가 삭제
객체 프로퍼티 순회
- for - in 문 사용
  - for (var 변수명 in 객체) { … }
  - Object.keys(객체명) 메소드 사용
    - 열거할 수 있는 프로퍼티 이름 배열에 담아 반환
    - 예시
      - Object.defineProperty(myDog, 'color', {enumerable : false} );
      - document.write(Object.keys(myDog) + "<br>"); // name, age
  - Object.getOwnPropertyNames(객체명) 메소드 사용
    - 모든 프로퍼티 이름 배열에 담아 반환
Math 객체
- Math 메소드 종류
  - Math.min, max()
  - Math.random()
  - Math.round()
  - Math.floor()
    - 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수 반환(소수점→ 정수 변환시 사용, 내림)
  - Math.ceil()
    - 전달받은 값과 같거나 큰 수중에서 가장 작은 정수 반환(소수점→ 정수 변환시 사용, 올림)
  - Math.sin() - 사인 함수값 반환
Date 객체
- Date 객체 초기화
  - new Date()
  - new Date(”날짜 문자열”)
  - new Date(밀리초)
    - ex) new Date(80000000); // 1970년 1월 1일 0시부터 해당 밀리초만큼 지난 날짜
  - new Date(년, 월, 일, 시, 분, 초, 밀리초)
    - 년, 월, 일 만 인자로 전달도 가능
- Date 메소드
  - Date.now()
  - var 변수명 = new Date();
    - 변수명.getFullYear()
    - getDate(), getDay(), getTime()
String 객체
- 문자열 길이
  - 문자열.length;
- String 메소드
  - 위치 찾기
    - indexOf(’찾는문자’)
    - lastIndexOf(’찾는문자’)
  - 지정된 위치의 문자 반환
    - charAt(인덱스)
  - 문자열 추출
    - slice(시작인덱스, 끝인덱스)
    - substring(시작인덱스, 끝인덱스)
    - substr(시작인덱스, 끝인덱스)
  - 문자열 분리, 배열로 반환
    - split(구분자)
    - split(””) - 한문자씩 나눔
  - 문자열 결합
    - concat(문자열1, 문자열2,…)
  - 대소문자 변환
    - toUpperCase()
    - toLowerCase()
  - 공백 제거
    - trim()
Array 객체
- Array 메소드
  - Array.isArray()
  - Array.from(객체들) - 배열처럼 변환
  - Array.of(n) - n개의 배열 요소를 가지는 배열 생성
- 원본 배열 변경 메소드
  - push(값) - 마지막 요소 추가
    - push(인덱스, 값) - 인덱스 위치 요소 추가
  - pop() - 마지막 요소 제거 후 반환
  - shift() - 첫 요소 제거 후 반환
  - unshift(값) - 가장 앞에 요소 추가
  - reverse() - 순서 반대로
  - sort()
  - splice(새로운요소삽입할시작인덱스, 제거할요소의개수, 넣을값들) - 기존 요소 제거 후 새로운 요소 추가
- 참조 메소드 (원본 변경 X)
  - join() - 배열의 모든 요소를 하나의 문자열로 반환
  - slice(시작인덱스, 끝인덱스) - 추출하여 새로운 배열 반환
    - slice(시작인덱스) - 시작부터 끝까지 반환
  - concat(배열) - 배열들 합쳐서 새로운 배열 반환
  - toString() - 배열의 모든 요소 하나의 문자열로 반환
- 원본 배열 반복적 참조 메소드
  - 배열명.forEach(함수명) - 각 배열요소마다 함수 호출
  - .map(함수명) - 각 배열요소마다 반복적으로 명시된 콜백함수 실행 후 새로운 배열에 담아 반환
  - .filter(함수명) - 각 배열요소마다 함수 실행후 결과값이 true인 요소들만 새로운 배열에 담아 반환
  - .every(함수명) - 각 배열요소마다 함수 실행후 모든 결과값이 true일 때 true 반환
  - .some(함수명) - 각 배열요소마다 함수 실행후 결과값 하나라도 true면 true 반환
  - .reduce(함수명) - 두개의 인수를 전달받고 실행 → 반환된 결과값과 세번째 요소를 전달받고 실행 → 반복 …
  - .reduceRight(함수명) - reduce의 반대, 마지막 요소부터
Document 객체
- Document 객체
  - Document 객체는 웹페이지 그 자체를 의미
  - 웹페이지의 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 함
- Document 메소드
  - HTML 요소의 선택
    - document.getElementsByTagName(태그이름)
      - 해당 태그이름의 요소 모두 선택
    - .getElementById(아이디)
      - 해당 아이디의 요소를 선택
    - .getElementsByClassName(클래스이름)
      - 해당 클래스에 속한 요소 모두 선택
    - .getElementsByName(name속성값)
      - 해당 name 속성값을 가지는 요소 모두 선택
    - .querySelectorAll(선택자)
      - 해당 선택자로 선택되는 요소 모두 선택
  - HTML 요소의 생성
    - document.createElement(HTML요소)
      - 해당 HTML 요소 생성
    - .write(텍스트)
      - HTML 출력 스트림을 통해 텍스트 출력
  - HTML 이벤트 핸들러 추가
    - document.getElementById(아이디).onclick = function(){ 실행할코드 }
      - 마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가
  - HTML 객체의 선택
    - document.anchors
      - name 속성을 가지는 <a> 요소 모두 반환
    - .body
      - <body> 요소 반환
    - .cookie
      - HTML 문서의 쿠키 반환
    - .domain
      - HTML 문서가 위치한 서버의 도메인 네임 반환
    - .forms
      - <form> 요소 모두 반환
    - .images
      - <img> 요소 모두 반환
    - .links
      - href 속성을 가지는 <area> 요소와 <a> 요소 모두 반환
    - 등등..
DOM 요소의 선택
- 특정 HTML 요소 선택 방법
  - HTML 태그 이름을 이용한 선택
    - var 변수명 = document.getElementsByTagName(”태그이름”);
    - 해당 태그의 모든 요소 선택됨
    - 변수명.style.color = “red” 같이 변경 가능
  - 아이디를 이용한 선택
    - var 변수명 = document.getElementById(”아이디명”)
    - 해당 아이디명 요소 선택됨
  - 클래스를 이용한 선택
    - var 변수명 = document.getElementsByClassName(”클래스명”)
    - 해당 클래스명인 요소 선택
  - name 속성을 이용한 선택
    - var 변수명 = document.getElementsByName(”name속성값”)
    - 해당 name 속성값인 요소 선택
  - CSS 선택자를 이용한 선택
    - var 변수명 = document.querySelectorAll(”태그명.클래스명”)
    - 해당 클래스명 요소에서 해당 태그 요소만을 선택
  - HTML 객체 집합을 이용한 선택
    - var 변수명 = document.객체명;
    - 예시
      - var title = document.title; //<titile> 요소 선택
      - document.write(title);
- DOM 요소의 내용 변경
  - innerHTML 프로퍼티 이용
    - 예시
      - var str = document.getElementById(”text”);
      - str.innerHTML = “내용변경”;
  - 속성값 변경
    - 예시
      - var link = document.getElementById(”link”)
      - link.href = “/js/intro”;
      - link.innerHTML = “내용변경”;
- DOM 요소의 스타일 변경
  - style 프로퍼티 이용
    - 예시
      - var str = document.getElementById(”text”);
      - function changeRedColor() { str.style.color = “red”;}

[JavaScript] 함수, 변수/함수 범위, 매개변수/인수

Bay Im — Sat, 22 Mar 2025 16:38:11 +0900

함수

함수 정의 - function 키워드
- function 함수명(매개변수1, 매개변수2, …) { 실행문 };
- 함수명(매개변수1, 매개변수2); ⇒ 함수호출
반환문 - return
- function 함수명(매개변수1, 매개변수2, …) { … return ㅁㅁㅁ; };
- var 변수명 = 함수명(매개변수1, 매개변수2); ⇒ return 값 변수에 저장
정의되어 있는 전역 함수 종류
- eval() - 문자열로 표현된 식이나 코드 실행
  - ex) var x = 10, y = 20;
  - var a = eval("x + y"); // 30
- isNaN() - NaN인지 검사하여 결과 반환
  - NaN은 Not A Number이라는 숫자가 아니라는 의미로 정의되지 않은 값이나 표현할 수 없는 값을 가리킨다.
  - 0 / 0도 NaN
  - ex) 문자열, undefined, NaN 값 true
- parseInt(문자열) - 문자열을 정수로 반환

변수/함수 범위

지역 변수 (local variable)
- 함수 내에서 선언된 변수
- 함수 내에서만 유효하며, 함수 종료시 메모리에서 사라짐
- 함수의 매개변수도 지역변수처럼 동작
- var 키워드 사용하여 변수 선언
전역 변수 (global variable)
- 함수 외부에서 선언된 변수 (var 키워드)
- 프로그램 어느 영역에서나 접근 가능
- 웹페이지가 닫혀야만 메모리에서 사라짐
- 함수 내부에서 var 키워드 사용하지 않고 변수 선언시 전역변수로 선언
- 함수 내부에서 전역변수 호출하려면 window.전역변수명 으로 호출 가능
호이스팅(hoisting)
- 변수와 함수의 선언 순서에 상관없이 순서가 끌어올려져서 실행되는 현상
- var 변수 호이스팅
  - 변수 할당전 사용시 undefined 출력
- const, let 호이스팅
  - 참조 오류 발생
- 함수 호이스팅
  - 함수 실행 - 함수 작성 순서로 코드를 작성해도 함수가 실행된다.

매개변수/인수

매개변수 - parameter
- JS는 함수 정의시 매개변수의 타입을 따로 명시하지 않는다.
- 함수 호출시 인수값에 대해 타입 검사도 하지 않는다.
  - 인수 갯수가 맞지 않아도 오류 발생하지 않고, 자동으로 매개변수에 undefined 값을 설정한다. (NaN)
  - if(매개변수 === undefined) 매개변수 = 0; 식으로 하면 NaN 반환 하지 않도록

인수 - arguments

arguments 객체는 함수가 호출될 때 전달된 인수를 배열의 형태로 저장하고 있다.
arguments[인덱스]와 arguements.length 사용 가능

예시

function addNum() {
    var sum = 0;                                // 합을 저장할 변수 sum을 선언함.
    for(var i = 0; i < arguments.length; i++) { // 전달받은 인수의 총 수만큼 반복함.
        sum += arguments[i];                    // 전달받은 각각의 인수를 sum에 더함.
    }
    
    return sum;
}

addNum(1, 2, 3); // 6
addNum(1, 2);    // 3
addNum(1);       // 1
addNum();        // 0
addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

default 매개변수
- function 함수명(매개변수1, 매개변수2 = 값) {…} 같이 매개변수값 기본값 설정 가능

rest (나머지) 매개변수

생략 접두사(…)을 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정 가능

예시

// 첫 번째 인수를 변수 firstNum에 저장하고 나머지 인수들은 배열 restArgs에 저장함.
function sub(firstNum, ...restArgs) {
    for(var i = 0; i < restArgs.length; i++) {
        firstNum -= restArgs[i];
    }

    return firstNum;
}

sub(10, 2, 3);    // 10 - 2 - 3 = 5
sub(10, 1, 5, 8); // 10 - 1 - 5 - 8 = -4

[JavaScript] 배열

Bay Im — Sat, 22 Mar 2025 16:35:21 +0900

배열

JS 배열의 특징
- 배열 요소의 타입이 고정되어 있지 않아서, 같은 배열에 있는 요소끼리 타입이 서로 다를 수 있다.
- 인덱스가 연속적이지 않아도 된다
- 특정 배열 요소가 비어있을 수 있다
- Array 객체

배열 생성 3가지 방법

var arr = [요소1, 요소2, …];
var arr2 = Array(요소1, 요소2, …);
var arr3 = new Array(요소1, 요소2, …);

예시

var arrLit = [1, true, "JavaScript"]; // 배열 리터럴
var arrObj = Array(1, true, "JavaScript"); // Array 객체의 생성자
var arrNewObj = new Array(1, true, "JavaScript"); // new 연산자
 
document.write(arrLit + "<br>");
document.write(arrObj + "<br>");
document.write(arrNewObj);

배열의 참조, 대입
- var 변수명 = 배열이름[인덱스];
배열 요소의 추가 3가지 방법
- 배열.push(추가요소);
- 배열[배열.length] = 추가요소;
- 배열[인덱스] = 추가요소;
배열의 순회(iteration)
- for문 사용
  - for (var 변수명 in 배열) { … }
타입 확인
- ‘typeof 배열[인덱스]’ 와 같이 요소의 타입 확인 가능
- JS에서 배열은 object 타입
  - 배열 여부 확인
    - Array.isArray() 함수
    - instanceof 연산자
    - constructor 프로퍼티
연관 배열
- 인덱스 대신 문자열로 된 키값을 사용하는 배열처럼 사용 (object 타입)
- 예시
  - var 배열 = [];
  - 배열[”첫번째’] = 1;
  - document.write(배열[”첫번째”]); ⇒ 1 출력
문자열을 배열처럼 접근
- JS에서 문자열은 변하지 않는 값으로 읽기 전용 배열로 다룰 수 있음.
- 문자열.charAt(인덱스) 함수나 문자열.배열[인덱스] 형태 사용
- 예시
  - var str = “안녕하세요”;
  - document.write(str.charAt(2)); ⇒ 하 출력
  - document.write(str[2]); ⇒ 하 출력

[JavaScript] 조건문, 반복문, 기타 제어문

Bay Im — Sat, 22 Mar 2025 16:28:25 +0900

조건문

if문
- if (표현식) { 참일때 실행문 }
if - else 문
- if (표현식) { 참일때 실행문 } else { 거짓일때 실행문 }
if - else if - else 문
- if (표현식1) { 표현식1이 참일때 실행문 } else if (표현식2) { 표현식2가 참일때 실행문 } … else { 다 아닐때 실행문 }

switch 문

default 문은 필요할 때만 선언
각 case 절과 default 절은 반드시 break 키워드를 포함하고 있어야 한다.

문법

switch (조건 값) {
    case 값1:
        조건 값이 값1일 때 실행하고자 하는 실행문;
        break;
    case 값2:
        조건 값이 값2일 때 실행하고자 하는 실행문;
        break;
    ...
    default:
        조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;
        break;
}

반복문

while 문
do - while 문
- 루프를 먼저 실행 후 표현식 검사 (표현식의 결과와 상관없이 무조건 한번은 루프 실행)
- 문법
- ```
do {
    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
} while (조건문);
```
for 문
- for (초기식; 표현식; 증감식) { 표현식 결과가 참인 동안 반복적으로 실행하고자 하는 실행문 }

for - in 문

해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties) 순회

문법

for (var 변수명 in 객체) {
    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

//예시 1
var arr = [3, 4, 5];
for (var i in arr) {
    document.write(i + " ");
}

//예시 2
var obj = { name : "이순신", age : 20 };
for (var i in obj) {
    document.write(i + "<br>");
}

for - of 문

반복할 수 있는 객체(iterable objects) 순회 반복문
- Array, Map, Set, arguments 객체 등

문법

for (var 변수명 of 객체) {
    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

//예시
var arr = [3, 4, 5];
for (var value of arr) { 
    document.write(value + " ");
}

기타 제어문

label 문
- 프로그램 내의 특정 영역을 식별할 수 있도록 해주는 식별자
- continue문과 break문 사용하여 특정 영역으로 이동 가능
- 문법
  - ```
  label:
  식별하고자 하는 특정 영역
  
  //예시 - for 문 전체를 가리키는 식별자로 사용
  arrIndex:
  for (var i in arr) {
      document.write(i);
  }
```
continue 문
- 루프 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고, 바로 다음 표현식의 판단으로 넘어가게 한다
- 문법
  - continue;
  - continue 라벨이름;
break 문
- 루프 내에서 사용하여 해당 반복문을 종료하고, 반복문 바로 다음에 위치한 실행문으로 프로그램 흐름 이동
- 문법
  - break;
  - break 라벨이름;

[JavaScript] 변수, 연산자

Bay Im — Sat, 22 Mar 2025 16:20:24 +0900

변수

var
- 변수 선언
  - var 변수명;
- 선언 및 초기화
  - var date = 25;
- 다중 선언, 초기화 가능
- 같은 변수에 다른 타입 다시 대입 가능 (재할당 가능)
let
- 중복 선언 불가
- 재할당 가능
const
- 중복 선언 불가
- 재할당 불가

연산자

산술 연산자
- +, -, *, /, %
대입 연산자
- =, +=, -=, *=, /=, %=
증감 연산자
- ++변수
- 변수++
- --변수
- 변수--
비교 연산자
- ==, !=, >, >=, <, <=
- ===
  - 값과 타입까지 같을 때 참
- !==
  - 값이 같지 않거나 타입이 다르면 참
논리 연산자
- && (AND)
- || (OR)
- ! (NOT)
비트 연산자
- &, |
- ^ (XOR)
- ~ (NOT)
- <<, >>
  - 지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨
기타 연산자
- 문자열 결합 연산자
- 삼항 연산자
  - (표현식) ? 참일시반환값 : 거짓일시반환값
- 쉼표 연산자
  - for 문에서 사용시 여러 변수 동시에 갱신 가능
    - 예시
      - // 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함. for (var i = 0, j = 9; i <= j; i++, j--) { document.write("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>"); }
- delete 연산자
  - 객체, 프로퍼티, 요소(element) 등 삭제
  - 예시
    - var arr = [1, 2, 3];
    - delete arr[2];
- instanceof 연산자
  - 객체가 특정 객체의 인스턴스인지 아닌지 확인
  - 예시
    - var str = new String("이것은 문자열입니다.");
    - str instanceof Object; // true

[JavaScript] 기본 타입, 타입변환 메소드

Bay Im — Sat, 22 Mar 2025 16:19:05 +0900

출력 방법

window.alert() 메소드 - 대화상자
HTML DOM 요소를 이용한 innerHTML 프로퍼티
1. document 객체의 getElementByID() 나 getElementsByTagName() 메소드 등을 사용하여 HTML 요소 선택
2. innerHTML 프로퍼티 이용하여 선택된 내용(content)이나 속성(attribute)값 변경
- 예시
  - ```
  <script>
      var str = document.getElementById("text");
      str.innerHTML = "바뀐 문장";
  </script>
```
document.write() 메소드
- 웹페이지 실행시 가장 먼저 데이터 출력
- 대부분 테스트나 디버깅 위해 사용
console.log() 메소드 등등

기본 타입

원시 타입(primitive type)
- 숫자 Number
- 문자열 String
- Boolean
- Symbol
  - 유일하고 변경할 수 없는 타입
    - ex) var sym = Symbol(”javascript”);
- undefined과 null
  - null은 object 타입이며, 아직 값이 정해지지 않은 것을 의미
    - ex) var str = null;
  - undefined는 타입이 아직 정해지지 않은 것을 의미
    - ex) var num;
  - 예시
    - null == undefined 는 true
    - null === undefined 는 false (타입이 다르므로)
- 객체 object
  - 프로퍼티나 메소드를 묶어놓은 집합체
  - 예시
    - var dog = { name: "해피", age: 3 }; // 객체의 생성
- typeof 연산자
  - 피연산자의 타입 반환

타입변환 메소드

명시적 타입 변환 메소드
- Number()
- String()
  - toString()
- Boolean()
- Object()
날짜 → 문자열, 숫자 변환 메소드
- getDate()
- getDay()
  - 일요일 0 ~ 토요일 6으로 반환
- getFullYear()
  - yyyy 반환
- getMonth()
  - 1월은 0 ~ 12월은 11 로 반환
- getTime()
  - 1970년 1월 1일부터 현재까지의 시간을 밀리초 단위의 숫자로 반환
- getHours()
  - 0~23 시 반환
- getMinutes()
  - 0~59 분 반환
- getSeconds()
  - 0~59 초 반환
- getMilliseconds()
  - 0~999 밀리초 반환
문자열 → 숫자로 변환 메소드
- parseInt()
- parseFloat()