Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 BOM (1) 유저 커뮤니케이션 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 BOM (1) 유저 커뮤니케이션

Romantic_Developer 2018. 7. 27. 17:00

안녕하세요, 영감을 주는 개발자 방민방민입니다.


오늘은 웹 자바스크립트에서 BOM 객체의 첫번째 공부입니다.

BOM 객체에 속한 다양한 객체, 메소드를 이용하여, 유저와 커뮤니케이션을 하는 내용을 구현해 보고자 합니다.


그럼 바로 시작하겠습니다.


1.alert


경고창이라고도 하는 alert 는 사용자에게 정보를 제공하는데 많이 사용됩니다. 아래의 코드를 보겠습니다.

<!DOCTYPE html>
<html>
	<body>
		<input type="button" value="alert" onclick= "alert('hello world');"/>
	 
	</body>
</html>


input 이라는 버튼을 보여주고, 이를 클릭함에 따라 onclick 에 있는 hello world 창이 출력됩니다.



2. Confirm


확인창은 true , false 값을 사용자로부터 받아 올 수 있습니다! 아래의 코드를 보시겠습니다.

<!DOCTYPE html>
<<html>
	<body>
		<input type="button" value="confirm" onclick="func_confirm()"/>
		<script>
			function func_confirm(){
				if(confirm('ok?')){
					alert("ok!");

				}
				else{
					alert('cancle');
				}
			}
		</script>
	</body>
</html>

그리고 아래와 같은 결과를 출력합니다.


즉 컨펌창으로 출력되는 확인과 취소값에 따라, 사용자의 true , 혹은 false 값을 리턴하게 되고, 그에 따른 분기문 설정이 가능하다는 것입니다.

만약 위의 실행결과에서 제가 취소를 눌렀다면 두번째 alert 창은 cancel 을 출력했을 것입니다.



3. Prompt


prompt 는 사용자로부터 직접 값을 입력받는 창을 출력합니다. 아래 코드를 확인해보겠습니다.

<!DOCTYPE html>
<html>
	<body>
		<input type="button" value="confirm" onclick="func_prompt()"/>
		<script>
			function func_prompt(){
				if(prompt("id")==="bangmin"){
					alert("welcome!");
				}
				else{
					alert('fail');
				}
			}
		</script>
	</body>
</html>

이는 사용자로부터 입력을 받아 그 값이 bangmin 이면 welcome 을 출력하고, 그렇지 않은 경우에는 fail 을 출력하는 코드입니다.



오늘은 이렇게 사용자와의 커뮤니케이션을 하는 DOM 내부의 메소드 프로퍼티에 대하여 알아보았습니다.


지금까지 영감을 주는 개발자 방민방민이었습니다.


저작자표시

'Romantic Developer > Web JavaScript' 카테고리의 다른 글

(Web JavaScript) 웹 자바스크립트 BOM (3) Navigator 객체  (0) 2018.07.28
(Web JavaScript) 웹 자바스크립트 BOM (2) Location 객체  (0) 2018.07.28
(Web JavaScript) 웹 자바스크립트 (2) 오브젝트 모델  (0) 2018.07.26
(Web JavaScript) 웹 자바스크립트 (1) 웹에서의 자바스크립트  (0) 2018.07.25
(Web JavaScript) 웹 자바스크립트 시작  (0) 2018.07.24
'Romantic Developer/Web JavaScript' Related Articles more