자바스크립트를 이용해 팝업창없이 페이지자체에서 메시지띄우기

 

지금까지 사용자에게 정보를 알려주고 소통하기 위해 팝업창을 이용했습니다. 그러나 이제 페이지 자체 빈문단에서 메시지를 보여 주는 기능을 구현해 보겠습니다.

 

웹페이지에서 모든 코드를 삭제하고 아래의 내용대로 코딩을 작성합니다.

 

'my-paragraph'라는 아이디로 빈문단을 넣고 클릭했을때 'that was easy'라는 내용을 보여주는 팝업창이 뜨도록 버튼을 추가하라 이제 이정도는 쉽게 느껴져야 합니다. 아직도 어려우시다면 앞의 내용들을 반복해서 숙지하시기 바랍니다.

 

 

위 상자안의 내용을 코딩해 보겠습니다. 

 

 

 

'my-paragraph' 만든다는 것은 글자가 들어갈 공간을 미리 정의해 놓은 것(만들어 놓은 것)이고 여기에는 아무것도 아직 입력하지 말고 버튼을 만들어 그 버튼을 클릭했을때 팝업창에 위의 메시지 'that was easy'가 뜨도록 하겠다는 의미입니다. 

 

위의 코드를 실행하여 결과를 보면 아래와 같습니다. 

 

 

 

 

 

 

 

 

 

 

---

 

이제 여기에서 'alert' 부분을 수정하여 페이지의 빈문단 자체에 클릭했을때 메시지가 뜨도록 코드를 수정해 보겠습니다. 

 

 

 

 

 

alert("that was easy") 이 부분이 빠지고 대신 document.getElementById("my-paragraph").innerHTML = "This text appeared  by magic!" 으로 바꼈습니다. 

 

위코드를 실행하면 'submit'버튼이 나타나고 이 버튼을 클릭하여 실행하면 결과는 다음과 같습니다.

 

 

---

 

보시는 것처럼 팝업창이 아닌 홈페이지 자체에 메시지가 나타났습니다