티스토리 뷰

UI_UX/JavaScript & JQuery

[JavaScript] 3. 함수의 사용

쟌쥰 2020. 1. 26. 14:53

alert() confirm() prompt()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	function alertTest() {
		// 경고, 코드디버깅 용도로 많이 사용함!
		alert("단순 대화창");
	}

	function confirmTest() {
		// 확인/취소 버튼 제공, (true/false) 리턴
		if (confirm("배경을 파란색으로 변환할까요?")) {
			document.body.style.backgroundColor = "blue";
		} else {
			document.body.style.backgroundColor = "white";
		}
	}

	function promptTest() {
		// 텍스트박스, 확인/취소 버튼 제공
		// 확인 : 텍스트를 리턴 / 취소 : null 리턴
		var txt = prompt("좋아하는 과목 번호를 선택해 주세요 [1:java / 2:db / 3:ui]");
		
		switch(txt){
		case "1" : 
			alert("역시 자바!");
			break;
		case "2" : 
			alert("디비가 재밌지!");
			break;
		case "3" : 
			alert("화면 표현이 재밌어!");
			break;
		case null:
			alert("취소하지 말아주세요 ㅜ");
			break;
		default:
			alert("셋 중 하나만 선택해 주세요!");
		}
		
	}
</script>

</head>


<body>
	<h1>Window 객체에서 제공하는 대화형 함수</h1>

	<small>종류에는 <strong>alert(), confirm(), prompt()</strong> 가 있다.</small>

	<p>
		alert() :
		<button onclick="alertTest();">클릭</button>
	</p>
	<p>
		confirm() :
		<button onclick="confirmTest();">클릭</button>
	</p>
	<p>
		prompt() :
		<button onclick="promptTest();">클릭</button>
	</p>

</body>
</html>

함수의 종류 및 간단사용법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	function func01() {
		alert("명시적 함수");
	}

	var func02 = function() {
		alert("익명 함수");
	}

	function literalPrn(literal) {
		literal("안녕하세요, 리터럴 함수입니다.")
	}

	function func03() {
		literalPrn(function(msg) {
			alert(msg);
		});
	}

	function valTest() {
		// arguments : 아규먼트의 갯수만큼 배열 형태로 ...
		var val = "";
		for (var i = 0; i < arguments.length; i++) {
			val += arguments[i] + " ";
		}
		alert(val);
	}
	
	function closureTest(val){
		var msg = "!!!!";
		function addVal(){
			alert(val + msg);
		}
		return addVal;
	}
	
	var pmEdu = closureTest("javascript");
	
	function nightEdu(msg){
		closureTest(msg)();
	}
</script>

</head>
<body>
	<h1>함수!!!!!!!!!!!!!!!!!!!!!!!!</h1>

	<h2>함수의 종류</h2>
	<p onclick="func01();">1.명시적 함수</p>
	<p onclick="func02();">2.익명 함수</p>
	<p onclick="func03();">3.리터럴 함수</p>

	<h2 onclick="valTest('kh','정보','교육원');">args(argunemts) 속성</h2>

	<h2>클로저(함수 리턴하기)</h2>
	<label for="pm">오후강의</label>
		<input type="text" id="pm" value="" />
		<input type="button" value="클릭" onclick="pmEdu();" />
	<hr />
	<label for="night">저녁강의</label>
		<input type="text" id="night" value="" />
		<input type="button" value="클릭" onclick="nightEdu(night.value);" />




</body>
</html>

'UI_UX > JavaScript & JQuery' 카테고리의 다른 글

[JavaScript] 6. Number 객체 사용  (0) 2020.01.26
[JavaScript] 5. Object 객체 만들기  (0) 2020.01.26
[JavaScript] 4. DOM 탐색  (0) 2020.01.26
[JavaScript] 2. 변수의 선언  (0) 2020.01.26
[JavaScript] 1. JavaScript 작성방식 3가지!!  (0) 2019.12.21
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함