2025/09/15 JavaScript-2

DOM 메소드 및 속성

DOM : 웹 페이지에 렌더링 되어있는 다양한 요소들을 우리가 프로그래밍적으로 다룰 수 있게 해주는 프로그래밍 인터페이스

class는 중복 가능하지만 id값은 고유한 값이다.

비교연산

자바스크립트는 주어진 두 항을 비교할 수 있는 '비교연산자'를 제공한다

• 크냐 작냐 (대소 비교) or 같냐 다르냐(등가 비교) 두가지
  • 바교 연산식은 언제나 boolean 데이터를 반환 = True or False

• '==' : 추상적 같음 : 자료형이 서로 다르더라도 같다고 판단가능
• '===' : 엄격한 같음 : 자료형과 데이터가 모두 일치해야만 같다고 판단가능

조건문

주어진 조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문

• else if 구문을 조건문 사이에 삽입하면 조건을 여러 가지 제시할 수 있다.
  • else if 구문은 개수 제한이 없다.

---

반복문

반복문은 비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문이다.대표적으로 for , while

for

• for문은 구문 작성시 반복을 위해 필요한 3가지 요소를 한 곳에 모아 작성함으로써 직관적으로 반복횟수를 표현할 수 있는 구문이다.
  • 초기식에서 선언한 변수는 for문 밖에서 사용 불가

while

• while문은 '주어진 조건이 참일 동안에 구문을 반복하는' 반복문

---

.createElement

• createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환한다.
  • 요소가 만들어지고 반환 되었다고 해서, 해당 요소가 곧장 웹 브라우저 화면에 추가 X
    • 만들어져 있는 요소를 화면에 표시하는 작업이 필요
      

.append()/appendChild()

• appendChild 메소드는 DOM 내 개별 요소('노드')에 자식 요소를 추가할 때 사용하는 메소드
  • append를 이용하면 요소에 노드 객체 또는 문자열을 자식 요소로 추가 가능
  • appendChild는 노드 객체만을 추가할 수 있다.
    • appendChild의 경우 추가할 자식 노드를 반환하지만, append는 반환 데이터가 없다.

함수 정의하고 호출

• 불러서 쓸 수 있는 코드 조각
  • 함수를 선언하고 기능을 정의하면 함수의 이름을 코드 조각 대신 사용할 수 있다.
    • 코드 조각 : 예제 코드, 부분 코드, 샘플 코드 등 짧게 잘라낸 코드의 일부

---

인수 & 반환

• 함수의 호출문은 '함수명+소괄호'
  • 소괄호의 역할은 함수가 실행될 때 사용할 재료를 전달받는 것
    • 재료란 데이터를 뜻하며 이때 전달되는 데이터를 '인수' 라고 한다.
• 인수를 전달받아 기능을 수행하는 함수를 만들 때는, 함수 정의 시 '매개변수'를 추가해야 한다
  • function number(num1,num2) : num1,num2 가 매개변수 (매개변수 여러개 추가 가능)

• 함수가 데이터를 반환하기 위해서는 'return' 필요
  • return의 기능 : 데이터의 반환 , 함수 강제 종료

이벤트 & 이벤트 핸들링

• 이벤트 : DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스

  • 클릭 이벤트 : 웹페이지 사용자가 버튼을 클릭했다
  • 키다운 이벤트 : 웹페이지 사용자가 키보드를 눌렀다
  • 제출 이벤트 : 웹페이지 사용자가 입력 폼의 내용을 제출했다

• handler : 이벤트가 발생되면 실행될 코드 블록을 뜻

  • 주로 함수가 담당하고 이벤트 핸들로 역할을 수행할 함수를 정의하는 것을 '이벤트 헨들러 등록'

addEventListener(이벤트명,이벤트 핸들러)

• onclick,onkeydown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 편하고 유용한 이벤트 처리방법
  • 장점 : 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드 존재
  • 같은 리스터(타겟)에 대해 다수의 핸들러를 등록가능

이벤트 객체

• 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터
  • 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시 마다 전달받을 수 있도록 해야 활용 가능

---

Value

• <input>,<select> 에서 입력을 받은 값을 읽어들일때의 요소 Value 속성
  • 요소에 쓰여져 있는 텍스트에 접근 : textContent
  • 사용자가 직접 요소에 입력한 값에 접근 : value
    

form

• 여러 입력 요소를 포함해서 한번에 그 입력값들을 제출할 수 있는 요소
  • name 속성값을 토대로 입력가능
    • 제출이 발생하면 서버는 필연적으로 새로고침 됨
      • reventDefault 새로고침 안함