[JS]3. 함수&객체

 

1. 함수

1)함수 선언식: 함수명으로 호출

• 함수 선언

function 함수명(매개변수1, 매개변수 2…) {

실행문;

return;

}

 

• 함수  호출: 함수명(인수1, 인수2…);

-return값이 있는 경우 함수 호출하여 console.log로 출력

-return값이 없는 경우 함수만 호출

 

2)함수 표현식: 함수명이 없는 익명함수, 변수를 통해 함수 호출

• 함수 선언

변수키워드 변수명=function(매개변수1, 매개변수2…){

실행문

return;

}

 

• 함수 호출: 변수명(인수1, 인수2…) 

 

[실습]

 

 

2. 백틱(``): 문자열과 변수명을 함께 출력하기 위한 도구

• 변수 출력

-` `안에 문자열과 변수 작성

-템플릿 문자열: ${변수명}

 

 

• 멀티라인(개행): 문자열 입력 시 Enter로 개행하면 반영됨

 

3. 함수 호이스팅: 함수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 것

• 소스코드가 처리되는 과정: 평가 →실행

-소스코드 평가: 모든 선언문(변수, 함수 등) 등록

-소스코드 실행: 런타임

• 함수 선언문(선언)

-평가과정에서 이미 함수가 등록되어 함수 선언 전에 함수 호출 가능

-일반적인 코드 실행순서(위 →아래)를 따르지 않으므로 권장되지 않음

• 함수 표현식(변수 참조)

-평가과정에서 변수 선언은 되었으나 변수가 초기화되지 않아 함수 선언 전에 함수를 호출하면 오류 발생

-일반적인 코드 실행순서를 따르므로 권장되는 방식

 

 

4. 화살표 함수:  function 키워드 생략하고 =>(화살표) 사용하여 함수 선언

• 화살표 함수는 변수에 참조하기 때문에 항상 익명 함수
• 사용방법: 변수=(매개변수)=>{실행문}
• return값이 1개인 경우 return 키워드와 { } 생략 가능
• 매개변수가 1개인 경우 ( ) 생략가능(단, 매개변수가 없으면 ( ) 필수)

 

[실습2]

 

 

[객체]

1. 객체(object): 여러 속성을 하나의 변수에 저장할 수 있는 데이터 타입
2. 객체의 기본 구조: property(속성)과 method(기능)으로 구성

 

3. 객체 생성 방법: 변수에 참조하여 생성,  { } 사용

• 객체 생성하면서 값  추가: 변수명={ 속성1: 값1, 속성2:속성2, 속성3:속성3… }
• 객체 생성 후 값을 나중에 추가

변수명={ }

변수명.속성='값'

 

4. 속성 타입에 따른 값 추가 방법

• String→ 속성명: '문자열'
• Number→속성명: 숫자
• boolean→속성명: T/F
• 배열→속성명:[값1, 값2, 값3]
• 객체 →속성명: {속성: 값}
• 함수 →속성명: (매개변수)=>{실행문장}

 

5. 내장객체: JavaScript가 제공하는 객체 예)Array, Math, Date…

• Date 객체 사용하기: let today=new Date();

 

[실습]한글로 변환하기

• 올해 연도: .getFullYear()
• 현재 월: getMonth()

-숫자 0~11로 반환→1을 더해 1월~12월로 변경

• 현재 일: getDate()
• 현재 요일: getDay()

-숫자 0~6으로 반환→switch문으로 문자열로 변경하기

(실행결과)

 

[BOM]

1. BOM(Browser Object Model): 브라우저에서 제공하는 객체

 

 

1)window 객체: 브라우저의 최상위 객체

• 브라우저의 모든 기능 제어, 메소드들(alert(), prompt())을 포괄하는 객체
• 팝업창 열기: open(‘이동할 주소’, ‘창의 이름’, ‘속성’)

 

2)location 객체: 브라우저의 주소와 관련된 정보를 제공하는 객체

• 페이지 이동: location.href='이동할 주소'
• 페이지 새로고침: location.reload()

 

3)screen 객체: 화면 해상도와 관련된 정보를 제공하는 객체 예)height, width 등

 

4)navigator 객체: 방문자가 사용하는 브라우저와 운영체제의 정보를 제공하는 객체

예)사용언어, 사용엔진, 운영체제, 브라우저 버전정보 등

 

5)history 객체: 방문자와 브라우저 방문기록과 관련된 정보를 제공하는 객체

예)메소드 형태 back, forward, length 등

 

 

[DOM]

1. DOM(Document Object Model): HTML 문서의 요소를 효과적으로 관리하기 위해 모든 요소를 분리하고 상하관계를 설정한 후 계층적으로 배치한 구조

• DOM의 구조 : 문서노드-요소노드-속성노드-텍스트 노드

 

• 렌더링: 웹사이트 코드를 사용자가 웹사이트를 방문할 때 보게 되는 페이지로 바꾸는 웹개발에 사용되는 절차→렌더링 과정에서 웹문서가 DOM구조로 변환

 

2. DOM 요소 조회하기: getElement()

-HTMLElement 객체: 모든 종류의 HTML 요소를 나타내는 인터페이스

-HTMLCollection 객체

3. DOM 요소 변경하기: 요소 조회하기-조회한 값.변경메소드

 

1)내부내용 변경하기

• innerHTML: 변경한 값에 태그를 작성할 때 태그가 적용된 값이 출력

-사용방법: Element.innerHTML=＂변경할 값＂

 

-console창 출력: 태그 내에 새로운 태그가 추가됨

 

-웹페이지 출력: 태그가 적용되어 출력됨

 

• textContent(text형태): 변경한 값에 태그를 작성해도 문자열로 인식

-사용방법: Element.textContent=＂변경할 값＂

-console창: content에 태그와 문자열이 추가됨

 

-웹페이지 출력값: 태그가 적용되지 않고 문자열로 출력됨

 

2)속성 변경하기: Element.setAttribute(‘속성명’, ‘값’)

 

3)스타일 변경하기: Element.style.속성=’값’

 

4. DOM 이벤트: 브라우저에서 사용자의 동작에 따라 발생하는 상황 제어하기

1)요소에 접근하기: document.getElement 객체

2)이벤트 실행하기: 요소.addEventListener(이벤트종류, 이벤트 핸들러)

 

[실습1]사용자의 입력값을 알림창과 console창에 출력하기

 

[실습2]버튼 클릭 시 태그 생성하기

 

[실습3]버튼 클릭 시 숫자 증감

• 함수 분리하기: 함수를 따로 정의하면 재사용이 가능하다.
• 이벤트 핸들러

-plusNumber(): 함수 작성 시 바로 실행되어 한 번 증감되고 이후 증감 안 됨

-plusNumber: 변수명 작성 시 대입만 되고 계속 증감됨

 

[실습4]버튼 클릭 시 스타일 변경

 

[실습 5]버튼 클릭 시 사용자 입력값을 p태그에 넣고 div 영역에 추가

 

[실습 6]버튼 클릭 시 입력값에 따라 관련이미지 출력하기