달리는 자동차

JavaScript 정리4 본문

JavaScript,JQUERY/JavaScript

JavaScript 정리4

@또또 2020. 8. 24. 16:42
함수선언 : function 함수명( ){실행코드} 
<!-- f(x) : 함수 
어떤 특정한 행동을 하게끔 하기 위해 함수를 선언하고 
그 함수 안에 특정한 행동을 입력한다. 
-->
<!-- 함수선언 -->
function 함수명(){
}

<!-- 함수호출 -->
함수명();

<!--hello world를 출력하는 함수생성-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자바스크립트 함수</title>
<script>
function hello(){
	document.write("Hello world");
}
hello();<!--선언한 함수 호출-->
</script>
</head>
</body>
</body>
</html>
글로벌 변수와 로컬 변수
보통 글로벌변수를 전역변수, 로컬변수는 지역변수라고 한다.		 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자바스크립트</title>
<style type="text/css">
</style>
<script type="text/javascript">

glo_var=10;
function hello(){
local_var =20;
}
//document.write(glo_var); ->주석풀고 실행시 10 나온다.
//document.write(local_var); ->주석풀고 실행시 아무것도 안나온다. 그 이유는 로컬변수를 함수 밖에서 실행했기 때문이다.
</script>
</head>
<body>
</body>
</html>
변수 선언 : var 명수명 = 값;
var을 붙이지 않아도 사용가능하다. 그러나 차이는 있다.
함수 밖에서 var을 붙이건 안붙이건 글로벌 변수 이지만,
함수안에서는 다르다. 로컬 변수 앞에 var가 있다면 그 로컬변수는 함수 안에서 작동하지만,
로컬 변수 앞에 var가 없다면 해당 함수가 한번 호출 된 이후에는 글로벌 변수가 된다.

 

<!--지역변수 안에서 var유무의 차이 알아보기-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자바스크립트</title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">

glo_var =10;
function hello(){
var local_var=20;
local_var2=30;
}
hello();
document.write(local_var2);
<!--결과는 30이 출력된다. 
document.write()안에 local_var을 넣고 출력해봤지만 아무것도 나오지 않는다.
-->
</head>
<body>
</body>
</html>
confirm("표시할 문구");
->confirm()함수는 Boolean타입의 값을 반환 한다. ( true 또는 false를 반환한다.)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자바스크립트</title>
<script>
confirm("안녕하세요.");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자바스크립트</title>
</head>
<script>
var con_test = confirm("어떤 값이 나올까요. 확인을 눌러보세요.");
document.write(con_test);
</script>
</head>
<body>
</body>
</html>
<!-- 확인을 누르면 true값이 나오고 취소를 누르면 false값이 나온다.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자바스크립트</title>
<script>
var con_test=confirm("어떤 값이 나올까요 확인을 눌러보세요.");
if(con_test==true){
	document.write("확인을 누르셨군요.");
}
else if(con_test==false){
	document.write("취소를 누르셨군요.");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자바스크립트</title>
<script>
	function add(){
	add=24+10;
    document.write(add);
}
add();
</script>
</head>
<body>
</body>
</html>
<!--더 할때마다 함수를 계속 만들수 없다.
위와 같은 더하기 기능은 함수에 지정 해두고 
함수를 호출할 때 값도 같이 보내서 호출하는 방법이 있다.-->
add(24,10);   <-- 호출 
위의 함수를 호출할 때 값을 같이 넘기는데 이 값은 아규먼트(argument)라고 부른다.
위와 같이 함수를 호출하면 24와 10이 add함수에 넘어 가게 되며 24와 10은 계산식에 의해 합이 
계산되고 출력문에 의해 계산된 값이 출력된다.-->

위와같이 함수를 호출 할 때 값을 보내준다면 함수를 만들때는 어떻게 해야할까?
function add(a,b){
}
보내주는 수 만큼 함수의 괄호 안에 변수를 넣어주면 된다. 즉 24는 a라는 변수에 넣고 10은 b라는 변수에 넣게 되며 
위에 있는 a, b는 파라미터(매개변수)라고 부른다. 그러면 24는 a의 값이 10은 b의 값이 된다.		 
<!--숫자-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>호출과 생성</title>
<script>
function add(a,b){
	add=a+b;
    document.write(add);
}
 add(24,10);
</script>
</head>
<body>
</body>
</html>


<!--문자열-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>호출과 함수생성</title>
<script>
function string_output(str){
	document.write(str);
}
string_output("함수에 들어가서 저는 출력될게요.")
</script>
</head>
<body>
</body>
</html>
파라미터 기본값 설정

 function myDevice(param1, param2=3, param3=10){
}

파라미터에 기본값을 대입한다. 		 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자바스크립트</title>
<script>
	function sum(param1,param2=3,param3=10){
    document.write(param1+param2+param3+'<br>');
}
	sum(1);
    sum(1,2);
    sum(1,2,3);
</script>
</head>
<body>
</body>
</html>
결과는 14 , 13, 6 이 나온다.

 

재귀함수->함수안에서 자신의 함수를 호출함. (즉, add라는 함수를 만들었다면 add라는 함수 안에 add라는 함수를 호출하는 것이다.)
function add(){
   add();
}		 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>팩토리얼</title>
<script>
function factorial(fnum){
	end_num=1;
    if(fnum==end_num)return end_num;
    else return fnum*factorial(fnum-1);
    }
    document.write("3!="+factorial(3));
</script>
</head>
<body>
</body>
</html>
함수참조 
함수명(); -->함수를 호출하는 것이 된다. 
하지만 함수명만 적고 괄호를 사용하지 않으면 함수를 참조하게 된다.
함수 참조는 함수를 다른 변수에 대입할 수 있다.
var hello = 함수명;
hello();		 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>함수 참조</title>
<script>
	function funcRef(){
    	return "ref";
        }
     var hello = funcRef;
     document.write(hello());
</script>
</head>
<body>
</body>
</html>

 

저작자표시

'JavaScript,JQUERY > JavaScript' 카테고리의 다른 글

JavaScript 정리5  (0) 2020.08.25
JavaScript 정리 3  (0) 2020.08.24
JavaScript 정리2  (0) 2020.08.22
JavaScript 정리1  (0) 2020.08.22
자바스크립트 함수  (0) 2020.08.18
'JavaScript,JQUERY/JavaScript' Related Articles more
Comments