[JS] 자바스크립트 함수 사용, DOM

자바 스크립트에서 함수 선언 방식

function 함수명 ( 매개변수1, 매개변수2, ..){
    기능 구현을 위한 코드 작성
}

함수명(입력값1, 입력값2, ....); 로 함수를 사용한다.
함수가 결과값을 반환하는 경우 자바처럼 return으로 반환한다.

 

자바스크립트 함수 특징

1.  매개변수와 입력값의 데이터 타입이 동일한지 검사하지 않는다.
   이유: 데이터 타입을 지정하지 않아서
2.  매개변수와 입력값의 개수가 같은지 검사하지 않는다.
   이유: 내부적으로 arguents객체가 호출되어 인자들을 배열형태로 저장한다.
3.  입력값의 개수가 매개변수의 개수보다 적다면 매개변수의 값은 undefined로 설정된다.
   (자바스크립트 자료형 참고)

객체(Object)

• 객체지향 프로그래밍에서 데이터(속성)과 그 데이터에 관련되는 동작(절차, 방법,기능)을 모두 포함한 개념이다.

 

객체 기본 구조, 생성방법

<script>
    let 객체명={
        속성명1 : 값1,
        속성명2 : 값2
        속성명3 : 함수(){
                //기능구현
        }
    };
</script>

<script>
    let 객체명={}

    // 속성추가
        객체명.속성명1 = 값1,
        객체명.속성명2 = 값2
        객체명.속성명3 = 함수(){
                //기능구현
    };
</script>

 

객체는 속성(property)과 기능(method)로 구성

객체 내에는 기본데이터타입, Array, Object등 데이터를 담을 수 있다.

객체 내 데이터를 접근하는 방법은 마침표(.)를 사용한다.

 

아래 예시처럼 접근하면 된다.

    <script>
        // 객체 생성
        let person = {
            name : "이름",
            age : 20,
            skill : function(){
                // skill에 함수를 정의한거라 함수명을 정의하지 않는다.
                // 즉 skill이 함수명이 된다.
                alert("에어컨 틀어주세요!")
            }
        }

        // 객체를 접근할때는 객체이름.키값으로 접근한다.
        document.write(person.name);
        person.skill();
        
        // 객체 키값 추가
        person.gender = "남자";
    </script>

 

DOM

• HTML문서의 요소를 효과적으로 다루기 위하여 모든 요소를 분리하고 상하관계를 설정한 후 배치한 구조

document에 모든 요소가 들어가있다.

따라서 데이터를 요청해서 가져올때 document로 가져온다.

 

HTMLElement 객체

• 모든 종류의 HTML요소를 나타내는 인터페이스
• getElement메소드를 통해서 원하는 객체를 조회한다.
• 조회된 객체들을 대상으로 구체적인 작업을 처리한다.

 

함수	설명	반환
getElementById(id입력)	특정아이디를 가진 요소 조회	HTMLElement반환
getElementsByName(name입력)	Name속성을 가진 요소 조회	HTMLCollection객체 반환
getElementsByTagName(tagname입력)	태그이름을 기준으로 요소 조회	HTMLCollection객체 반환
getElementsByClassName(class입력)	특정 클래스를 가진 요소 조회	HTMLCollection객체 반환

 

메소드	설명
innerText	요소안에 있는 글자를 가지고 올때 사용
HTMLElement.innerHTML	태그 내에 새로운 요소객체나 내용을 저장하거나 가져올때 사용
HTMLInputElement.value	input태그의 value값을 저장하거나 가져올때 사용

요소 = 태그 + 컨텐츠

innerText나 innerHTML같을걸 안쓰면 요소가 보인다.

innerText에서는 태그를 쓰면 글자로 인식한다.

innerHTML : 태그를 지원해서 수정을 하는 경우 사용!

 

 

See the Pen gOmdMrB by 정혜선 (@Diligent-milk) on CodePen.

 

 

See the Pen DOM실습 by 정혜선 (@Diligent-milk) on CodePen.

 

 

이제 input으로 쓴 값을 가져오는것을 할거다.

위의 .innerHTML을 쓰는 거랑 다르게 input값을 가져오려면 .value를 써야한다.

인풋데이터 가져오기! 버튼의 경우 codepen안에서는 잘 실행 됐는데 티스토리로 가져오니 안뜨네요

원래는 버튼을 누르면 입력한값이 담긴 창이 떠야 합니다.

See the Pen .value by 정혜선 (@Diligent-milk) on CodePen.

 

getElementsByTagName(tagname입력)를 사용하여 태그 이름으로 값 가져오기!!

태그이름을 사용하여 ul태그의 첫번째 li태그안의 내용을 가져오겠다.

 

이것도 원래는 알림창이떠야하는데 안뜨네요. codepen을 눌러서 사이트안에서 해보세요

대신에 콘솔창에는 정상으로 뜨니 F12를 눌러서 검사를 진행해 주세요

태그 이름으로 가져올경우 같은 li태그들이 리스트 형식으로 들어가 있어요.

따라서 리스트를 가져오듯이 li[0] li[1]이런식으로 가져오셔야합니다.

See the Pen 태그이름으로 가져오기 by 정혜선 (@Diligent-milk) on CodePen.

 

 

Element 요소변경 메소드

Element 요소변경 메소드	설명
Element.innerHTML = new html content	내부 내용 변경 ex) div.innerHTML = 'hello'
Element.attribute = new value	속성 변경 ex) img.src = 'a.png'
Element.setAttribute(attribute.value)	속성 변경 ex) img.setAttribute('src', 'a.pag')
Element.style.property	스타일 변경 ex) div.style.color = "red"

 

style 실습

style메소드를 사용하여 글자 색, 폰트 크기, 굵기를 바꿔보는 실습

 

See the Pen style by 정혜선 (@Diligent-milk) on CodePen.

 

style 실습2

이번에는 파란색의 정사각형 모형을

원만들기 버튼을 클릭하면 주황색 원이되고

직사각형 만들기 버튼을 클릭하면 노랑색 직사각형이 되는 실습을 해볼거다.

주의할 점은 원만들기 버튼을 클릭후 직사각형 버튼을 클릭하거나 반대로 직사각형->원 이렇게 할경우

이전에 적용된 설정이 남아있게되니 직사각형을 만들때 늘린 너비를 원만들때 원래크기로 돌려주고

원만들때 깍았던 모서리도 직사각형에서 돌려줘야한다.

box.style.borderRadius = "50%" 을 하면 모서리가 원처럼 깍이고

box.style.borderRadius = "0"을 하면 모서리 깍는 속성이 0이되어 모서리가 안깍인다.

(참고 기본 정사각형은 CSS를 보면 너비200px, 높이 200px이다)

See the Pen style실습 by 정혜선 (@Diligent-milk) on CodePen.

 

 

이미지를 변경하는 실습

이미지는 src속성을 변경해야 해서

.src로 바꿔줘야한다.

 

See the Pen 이미지 변경 by 정혜선 (@Diligent-milk) on CodePen.

 

Element 요소 접근 메소드

Element 요소 접근 메소드	설명
querySelector(selector)	css 선택자를 이용하여 하나의 요소를 검색
querySelectorAll(selector)	css 선택자를 이용하여 모든 요소를 검색