4. JavaScript Ex.03 display속성

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

예제풀이

CSS와 JavaScript를 이용하여 메세지를 입력, 전송하여 출력,

출력하는 div초기화, div을 숨기고 다시 보이게하는 예제이다.

먼저 풀이에 앞서 개념을 정리하자면

    [ html 출력(output) ]

1. window.document.write(); :  DOM 

2. window.alert() : window -> 최상위 객체 -> 생략가능

---------------------------------------

※ console.log란? 

해당 메서드를 이용하여 디버깅할 때 용이하게 사용할 수 있다.

console.log(변수명); 선언하고 F12를 눌러 콘솔창을 누르게 되면 해당 값을 확인할 수 있다.

사진1. body부분

사진2 style부분

사진3 Script부분

btnInit_click() : 

먼저 getElementById를 이용하여 ID가 txtMessage인 요소를 가져오는데, 

- document.getElementById("txtMessage").value="";

value=""은 값을 초기화하기에 아주 좋은 방법이다.

또한 id값이 box인 <div>태그를 가져와, innerHTML=""을 통해 출력되고 있는 내용도 초기화시켜준 후에,

다시 <input>태그에 다시 한번 focus속성을 통해 포커스를 준다.

btnExec_click() : 

<div>태그의 id값을 가져와서, innerHTML 을 통하여 값을 추가한다. 

※ 자바스크립트에서는 자바와 동일하게 += *= -= 등의 연산자 사용이 가능하다.

<br>태그를 통하여 개행을 해주고, 입력받은  <input>태그의 id가 txtMessage인 value를 통하여 값을 가져온 후에

+= 연산자를 이용하여 값을 추가한다.

btnHide_click() , btnShow_click() :

style의 display속성을 통하여  숨기기버튼을 클릭할경우 btnHide버튼의 display값을 none을 주어 안보이게하고,

btnShow버튼의 display값을 block을 주고 , <div> 또한 none을 주어 보이지 않게 한다.

 보이기버튼을 클릭할 경우 <div>태그 display속성 block / btnShow  none / btnHide block을 준다.

마치 숨기기버튼을 누르게되면 보이기버튼으로 변경되는것처럼 보이게 한다.

--- 실행 결과 -- 

사진4 초기화면

사진5 메시지 입력 후 실행버튼

사진6 초기화 버튼

사진7 숨기기 버튼

사진8 보이기 버튼