2. JavaScript Ex.01 함수선언

본 글은 HTML5, CSS 학습한 상태에서 작성한 글입니다.

예제풀이

먼저 body내에 button을 선언을 하였다. 각각의 버튼에는 onclick 이벤트 처리를 통하여

마우스 클릭이 발생하는 경우 함수 호출을 하도록 하였다.

※ innerHTML이란? 

- 특정 HTML 태그 안에 들어갈 HTML의 값을 나타낸다.

onclick에 선언하였던 함수들을 script태그 안에 선언을 해주었다. 

실행화면 1

※ document.getElementById란?

- 제어 대상 찾기로라고 할 수 있다. 이것을 사용하여 ""안에 ID값을 기재 할 경우

기재한 id를 가진 태그를 선택하는것이 된다. 

p_content_change() : 

-  버튼을 누르게 될 경우기존에 출력되어야할 p타입의 

 [Lorem ipsum dolor sit amet.] 을 "Hello World~" 라는 값으로 출력하도록 한다.

p_style_change() :

- 동일하게 p타입의 id가 "demo"인 것을 불러와 style을 재정의 해주었다.

border, font-size, width을 재설정해주었다. 

주의하여야 할 점은 '-'로 이어진 font-size, background-color..등  같은 경우는 '-'를 사용하지 않고

'-' 다음 문자를 대문자로 적어주어야 한다.

ex) font-size -> fontSize

p

클릭1 버튼 클릭 결과

버튼 속성에서 onclick을 통하여 기존에 출력되던 문자열에서

  Hello World~로 변경되어 출력되는 것을 확인할 수 있다.

클릭2 버튼 클릭 결과

p_content_change()함수가 호출되었고, 첫번째 버튼과 동일하게

p타입의 id가 "demo"인 것을 불러와 HTML의 값을 변경해준 것을 확인할 수 있다.

클릭3 버튼 클릭 결과

p_style_change()함수가 호출되었고, 각각의 스타일이 적용된 모습을 확인할 수 있다.