JavaSctipt-대화상자(alert, confirm, prompt)

오늘부터는 JavaScript에 대해 알아볼게요.

먼저 JavaScript란 무엇일까요?

쉽게 웹페이지는 HTML, CSS, JavaScript로 구분이 되어지는데요

HTML 은  웹페이지의 틀을 짜주는 역할을 하고 (스케치)

CSS 는 웹페이지에 디자인을 담당하고 (색칠)

JavaScript는 웹페이지에 기능을 추가한다고 할 수 있습니다. (Function)

그럼 이제부터 어떤 기능을 추가할 수 있는지, 어떤 기능들이 있는지 알아보도록 하겠습니다.

첫번째로 알아볼것은 alert 입니다.

alert는 한마디로 팝업창(?)이라고 할 수 있어요.

alert() 함수는 경고메세지를 전달하고 싶을 때 사용하구요 경고메세지를 알리는 대화상자에는 확인버튼이 있습니다.

코딩을 통해 알아보도록 할게요~

JavaScript는 <script> </script> 태그 안에 작성하면 되요~!

저렇게 작성을하면 결과화면은 다음과 같이 나오게 됩니다.

alert() 함수 안에 있는 값이 대화상자안에 나오면서 다른것들은 클릭이 안되고 확인을 눌러야만 다른것들이 나오게 되는 기능입니다.

alert()함수는 다른것들을 클릭할 수 없다는 단점이 있습니다.

다음 대화상자를 나타낼 수 있는 함수로는 Confirm()함수가 있습니다.

confirm() 함수는 결과값을 리턴받아서 분기할 때 주로 사용한다고 합니다.

대화상자에 확인버튼과 취소버튼으로 구성되어 있어서 확인은 true값을, 취소는 false값을 반환한다고 합니다.

그럼 코딩을 통해 알아보도록 하겠습니다.

 

confirm() 함수는 다음 그림과 같이 사용하며 if 문에서는 true값을 반환하며, else문에서는 false값을 반환하게 됩니다.

그럼 결과화면 보도록 하겠습니다.

대화상자가 확인과 취소가 있는 버튼으로 구성되어 있으며 

확인을 눌렀을때는 if문에 있던 document.write() 문장을 실행하고

취소를 눌렀을때는 else문에 있던 document.write()문장을 수행하게 됩니다.

다음 대화상자를 나타낼 수 있는 함수는 prompt() 함수 입니다.

prompt() 함수는 원하는 값을 입력받고 싶을 때 사용하는 함수입니다.

대화상자에 텍스트를 입력할 수 있는 입력란이 표시가 되며 입력한값을 리턴값으로 받아올 수 있습니다.

코딩을 통해 알아보도록 하겠습니다.

prompt()함수는 다음과 같이 사용할 수 있으며 

첫번째 인자값인 "아이디를 입력해주세요" 는 입력란에 대한 설명이며,

두번째 인자값인 "아이디" 는 입력박스의 초기값을 의미합니다.

결과화면 보도록 하겠습니다.

결과화면은 보이는 것과 같습니다^^ㅎㅎ

그럼 자바스크립트의 첫번째 포스팅을 마치도록 하겠습니다 :)