2022-09-28 javascropt 함수, 객체

javascript 함수

: 자주 사용하는 명령문들을 하나의 기능으로 만들어 놓은 것

함수를 정의하고 피룡한 곳에서 불러서 사용할 수 있다. => 함수호출(call)

- [함수의 기본 사용방법]
- [함수 내부에서 변수 종류]
- [함수의 호이스팅]
- [함수의 표현식]
- [클로저]

1. 함수의 사용 방법

(1) 함수의 정의
function 함수명 (매개변수명1, 매개변수명2...)

(2) 함수의 호출
호출할 함수명();
호출할 함수명(매개변수로 전달할 값1, 매개변수로 전달할 값2...)

(3) 리턴값이 있는 함수의 호출
- 함수의 실행 결과로 값이 함수를 호출하는 곳으로 전달되므로 전달되는 값을 저장할 변수가 선언되어야 한다.

변수명 = 호출할 함수명()

- 결과를 반환하기 때문에 또 다른 함수의 매개변수로 직접 전달할 수 있다.

함수1(함수2())
=> 함수1이 매개변수를 갖고 있는 함수인 경우
함수2가 리턴값이 있는 함수인 경우

2. 변수의 종류

- 지역변수
: 선언된 위치에서만 사용할 수 있는 변수
함수 {}(블럭) 안에서 var키워드로 선언된 변수는 선언된 함수 내부에서만 사용 할 수 있다.

- 전역변수(글로벌변수)
: 문서 내의 모든 자바스크립트를 사용할 수 있는 곳에서 공유하여 사용할 수 있는 변수

1. function 밖에서 변수를 선언하는 경우 - 전역변수

2. function 내부에서 변수를 선언하는 경우

=> 반드시 변수가 선언된 함수가 먼저 호출되어 실행되어야 한다. ( test1에서 만들어진 값을 test2가 활용하는 작업을 해야 하는 경우)

3. var키워드를 사용해서 함수 내부에서 변수를 선언(함수 안에서만 사용할 수 있는 변수) - 지역변수

4. var키워드를 이용해서 function 밖에서 정의하는 경우 - 전역변수

* js는 인터프리터(interpreter, 문화어: 해석기)언어이기 때문에 위에서 아래로 실행함.

중간에 에러가 발생하면 중단

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
		// 자바스크립트에서 전역변수와 지역변수를 사용할 수 있다.
		// 1. function 밖에서 변수를 선언하는 경우 - 전역변수
		//    => 함수끼리 변수를 공유해서 사용하거나 함수에서 변경한 값을 문서 전체에서 사용하는 경우 선언
		num1 = 100;
		// 4. var키워드를 이용해서 function 밖에서 정의하는 경우 - 전역변수
		var num4=400;
		function test1(){
			// 2. function 내부에서 변수를 선언하는 경우
			//    => 반드시 변수가 선언된 함수가 먼저 호출되어 실행되어야 한다.
                    ( test1에서 만들어진 값을 test2가 활용하는 작업을 해야 하는 경우)
			num2=200;
			// 3. var키워드를 사용해서 함수 내부에서 변수를 선언
                  (함수 안에서만 사용할 수 있는 변수:num3) - 지역변수
			var num3 = 300;
			document.write("test1에서 num1을 사용 => "+num1+"<br/>");
			document.write("test1에서 num2을 사용 => "+num2+"<br/>");
			document.write("test1에서 num3을 사용 => "+num3+"<br/>");
			document.write("test1에서 num4을 사용 => "+num4+"<br/>");
		}
		function test2(){
			document.write("test2에서 num1을 사용 => "+num1+"<br/>");
			document.write("test2에서 num2을 사용 => "+num2+"<br/>");
	//		document.write("test2에서 num3을 사용 => "+num3+"<br/>");
			document.write("test2에서 num4을 사용 => "+num4+"<br/>");
		}
		</script>
	</head>
	<body>
		<script type="text/javascript">
			test1();
			document.write("<hr/>");
			test2();
			document.write("<hr/>");
			document.write("body에서 num1을 사용 => "+num1+"<br/>");
			document.write("body에서 num2을 사용 => "+num2+"<br/>");
	//		document.write("body에서 num3을 사용 => "+num3+"<br/>");
			document.write("body에서 num4을 사용 => "+num4+"<br/>");
		</script>
	</body>
</html>

3. 함수를 호출하는 방법

1. 리턴값이 없고 매개변수가 없는 함수의 호출

2. 리턴값이 없고 매개변수가 있는 함수

=> 매개변수가 있다는 것은 함수를 사용할 수 있는 경우의 수가 더 많아졌다는 의미

3. 리턴값이 있고 매개변수가 있는 함수

=> 함수에서 결과로 발생한 값을 사용하지 않고 함수를 호출한 곳을 전달(리턴)하기 위해서 또다른 변수를 선언해서 결 과를 저장한다.

=> 함수의 결과를 변수에 저장

=> 결과로 alert에 출력하거나 document로 출력하거나 조건을 적용할 수 있다.

=> 함수의 결과를 또 다른 함수의 매개변수로 전달할 수 있다.

* return문은 함수의 마지막 문장에서 호출된다. 기본적으로 return할 수 있는 값은 1개.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			2. 리턴값이 없고 매개변수가 있는 함수
			//   => 매개변수가 있다는 것은 함수를 사용할 수 있는 경우의 수가 더 많아졌다는 의미
			function test2(num1,num2){
				document.write("<h2>test1함수:"+(num1+num2)+"</h2>");   // : 500, 800
			}
			// 3. 리턴값이 있고 매개변수가 있는 함수
			function test3(num1,num2){
				// 함수에서 결과로 발생한 값을 사용하지 않고 함수를 호출한 곳을 전달(리턴)하기 위해서
				// 또다른 변수를 선언해서 결과를 저장한다.
				// return num1+num2;
				result = num1+num2;
				return result;  // return문은 함수의 마지막 문장에서 호출된다.
				                // 기본적으로 return할 수 있는 값은 1개.
			}
			function checkdata(data){
				if(data>3000){
					alert("성공");
				}else{
					alert("실패");
				}
			}
		</script> 
	</head>
	<body>
		<script type="text/javascript">
			// 함수를 호출하는 방법
			// 1. 리턴값이 없고 매개변수가 없는 함수의 호출
			document.write("<h1>시작</h1>");
			test1();
			
			// 2. 리턴값이 없고 매개변수가 있는 함수
			test2(200,300); 
			test2(500,300); 
			document.write("<h1>종료</h1>");
			
			// prompt를 이용해서 매개변수 값을 전달하기
			input1 = parseInt(prompt("숫자1입력"));
			input2 = parseInt(prompt("숫자2입력"));
			test2(input1,input2);
			
			// 3. 리턴값이 있고 매개변수가 있는 함수
			//    => 함수의 결과를 변수에 저장
			mydata1 = test3(1000,5000);
			// 결과로 alert에 출력하거나 document로 출력하거나 조건을 적용할 수 있다.
			alert(mydata1);
			document.write("<h2>test3함수 결과값:"+mydata1+"</h2>");
			if(madata1>3000){
				alert("성공");
			}else{
				alert("실패");
			}
			
			// => 함수의 결과를 또 다른 함수의 매개변수로 전달할 수 있다.
			checkdata(test3(1000,3000));
			
			document.write("<h1>종료!</h1>");
		</script>
	</body>
</html>

* F12 - ~~~is not defined___ 나오면 오타확인하기

< 과제 >

<script type="text/javascript">      // 7단 구구단
			function printGugu() {
				document.write("<table border='1'>");
				for(i=1; i<=9; i++){
					document.write("<tr>");
					document.write("<td><h3>"+7+"*"+i+"="+(7*1)+"</h3></td>");
					document.write("</tr>");
				}
			}
			document.write("</table>");
</script>
</head>
	<body>
		<script type="text/javascript">
			printGugu();      // 바디태그에서 함수 호출하기
    	</script>

=> 바디태그에서 함수호출 꼭 해줘야 함!

<!DOCTYPE html>     < 숫자 두가지 입력받아 사이의 모든 수의 합 구하기 >
<html>              < 매개변수2개, return값 있음 >
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
            function getSum(num1,num2) {
                    sum=0;
                    for(i=num1; i<=num2; i++){     // i는 냅두고 매개변수를 이용해 코드바꾸기!!!!!!!!!
                        sum += i;
                    }
                    return sum;
                }
        </script>
	</head>
	<body>
		<script type="text/javascript">
			callvalue = getSum(1,100);
			document.write(callvalue+"<br/>");
			callvalue = getSum(1,1000);
			document.write(callvalue+"<br/>");
		</script>
	</body>
</html>

=> 매개변수와 리턴값이 있을 때는 body태그에 변수(리턴값을 저장할 변수)를 선언하고 받아줘야 함!!!!!!

callvalue = getSum(1,100);
document.write(callvalue+"<br/>");

* return : 함수 끝나야할 때, 함수 끝에 사용

<!DOCTYPE html>       두 가지 함수. <2. 매개변수 2개, 리턴X >
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
 			function mydisplay() {
				for(i=0; i<=10; i++){
					document.write("*");
				}
			}
			function display(mychar,count) {
				for(i=0; i<=count; i++){
					document.write(mychar);
				}
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
 			mydisplay(); 
			
			display("#",20);
			display("!",100);
			display("%",10);
		</script>
	</body>
</html>

javascript 내장객체

- 브라우저마다 자바스크립트를 해석하고 사용할 수 있는 엔진이 탑재(프로그램이 포함)되어 있다.
- 자바스크립트 엔진에 포함된 객체를 내장객체라고 부른다.

객체를 사용하는 방법

: 브라우저에 포함된 자바스크립트 해석기가 내장하고 있는 객체(코드로 만들어져 있는)를 사용하기 위해서 메모리에 내장객체를 생성해서 해석기가 실행될 때 인식할 수 있도록 해야 한다.
  이를 객체생성이라고 한다.
  변수 = new 내장객체명()
------------ ===> 자바스크립트 내부에서 사용할 수 있도록 메모리에 할당된 Date를 객체 or 인스턴스라 한다.
1. string객체
       - 문자열

2. Math객체
- 수학, 삼각과 관련 기능을 제공하는 객체

3. Date객체
- 날짜와 시간에 대해 다룰 수 있도록 기능을 제공하는 객체

4. Arrays객체
- 배열을 관리하는 객체

Date객체

var today = new Date //시분초 날짜관련객체

var day = today.getDay(); //요일정보 : 0 - 일요일, ...6 - 토요일

ㄴ> 변수 선언해서 담아주기

var newday = new Date(); //날짜데이터를 새로운 값을 중간에 설정할 수 있다.

newday.setMonth(7); // 8월을 셋팅
newday.setDate(1); // 1일셋팅1

myimg = "m_garden01.jpg"; //이미지 가져오기, 배경색 적용하기
document.write("<img src='../images/" + myimg+"'/>");
document.bgColor = "yellow";

'HTML, CSS, JS' 카테고리의 다른 글

2022-09-30 이벤트 Window객체 (0)	2022.10.04
2022-09-29 Date객체, Array객체, String객체, BOM객체 (0)	2022.09.29
2022-09-27 switch,다중if, for-if, 다중for (0)	2022.09.28
2022-09-26 javascript 문법 (0)	2022.09.26
html,css_박스모델 실습과제 layout_main.html 리뷰 (0)	2022.09.24

HT Prog

2022-09-28 javascropt 함수, 객체

'HTML, CSS, JS' 카테고리의 다른 글

댓글

티스토리툴바

2022-09-28 javascropt 함수, 객체

'HTML, CSS, JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바