자바스크립트 기초 #6

jjinny_0609·2023년 1월 16일

JavaScript

목록 보기

6/9

함수(function) :

입력을 받아서 특정한 작업을 수행한 후 결과를 반환하는 작업을 한다.
함수 안의 코드는 외부에서 호출했을때만 실행됨.

속성

function 원하는함수명(){
	실행시킬 코드 작성
}

인수와 매개 변수

인수(argument)

함수를 호출할 때 어떤 값을 함수로 전달할수 있는데 이 값들을 인수라고 한다.

속성

호출할 함수명(인수1, 인수2, ...)

매개 변수(parameter)

함수를 선언할때, 인수를 받을 변수를 선언해야 하는데 이것을 매개변수 라고 한다.

속성

function 함수명(매개변수1, 매개변수2, ...){
		함수메인
	}

ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인수와 매개변수</title>
<script type="text/javascript">
	//함수 선언(매개변수)
	function greeting(name, position){
		alert(name + " " + position + "님을 환영합니다.");	
	}
</script>
</head>
<body>
	<!-- 함수 호출(인수) -->
	<button onclick="greeting('홍길동','부장')">눌러보세요!</button>
	<!-- 함수호출로 name = '홍길동', position = '부장'값이 들어감 -->
</body>
</html>

무명 함수(anonymous function)

함수에 이름을 주지 않고 만들어서 사용하는것을 무명함수라고 한다.
속성

var 변수명 = function(){
}

ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인수와 매개변수</title>
<script type="text/javascript">
	//함수 선언(매개변수)
	function greeting(name, position){
		alert(name + " " + position + "님을 환영합니다.");
	}
	//무명함수 선언(매개변수)
	var greeting1 = function (name, position){
		alert(name + " " + position + "님을 환영합니다.");
	}
</script>
</head>
<body>
	<!-- 함수 호출(인수) -->
	<button onclick="greeting('홍길동','부장')">눌러보세요!</button>
	<button onclick="greeting1('홍길동','부장')">눌러보세요!</button>
	<!-- 함수호출로 name = '홍길동', position = '부장'값이 들어감 -->
</body>
</html>

함수의 반환값

return : 호출했던 곳으로 값을 반환해준다.

속성

return 변수명;

ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>return</title>
<script type="text/javascript">
	function sub(){
		var x;
		x = 1;
// 		alert(x);
		return x;
	}
</script>
</head>
<body>
	<button onclick="alert(sub())">x값을 여기서 알림</button>
<!--return값 은 호출했던곳으로 보내기때문에 1값은 sub()로옴 -->
</body>
</html>

자바스크립트의 입출력

alert()함수

사용자에게 정보를 전달하고 확인버튼만 있는 경고 윈도우를 띄움

속성
alert("경고창에 들어갈 텍스트");

ex)
<script>
	alert("이것이 alert() 입니다.");
</script>

confirm()

사용자에게 정보를 전달하고 확인과 취소 버튼이 있는 윈도우를 띄움
확인버튼 클릭시 true를 반환하고, 취소버튼 클릭시 false를 반환함

속성
confirm("경고창에 들어갈 텍스트");

ex)
<script>
	var user=confirm("confirm은 사용자의 답변을 전달합니다.");
	// 만약 확인을 클릭하면 (true라서 user(==true) 생략가능)
	if(user){	
		//게시물 삭제
	}else{//그렇지 않으면
		//게시물 삭제를 취소
	}
</script>

prompt()

사용자에게 정보를 전달하고 답변을 입력할 수 있는 윈도우를 띄움

속성
prompt("전달할 내용","입력할 텍스트에 전달할 내용");

ex)
var age = prompt("나이를 입력하세요.","만나이로 입력하세요.");
	alert("나이는 "+ age +"세 입니다." );

끝

jjinny_0609

뉴비 개발자 입니다. velog 주소 : https://velog.io/@jjinny_0609 Github 주소 :