javascript 수업

HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

javascript 수업 HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

함수

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

함수(function, method)

  • 일련의 로직을 다시 사용할 수 있도록 묶어둠(모듈화) - 개발자의 미덕은 게으름
  • 입력(인자,argument)와 출력(반환,return)으로 이루어짐 
  • 사용자 정의 함수와 내장함수가 있다.

문법

  • 함수의 정의는 다음과 같이 한다.
  • 함수명은 함수를 호출할 때 사용할 이름(함수는 변수에 저장된다)
  • 인자는 함수에 저장되는 변수. 콤마로 구분되고 없을 수도 있고 무한히 많을수도 있다.
  • return은 함수가 결과값으로 출력할 값. return은 함수의 종료조건이 됨
function 함수명(인자명1, 인자명2...) {
    // 로직
    return 반환값;
}
    
  • 함수의 호출은 다음과 같이 한다.
함수명(인자값, 인자값....);

예제

example1.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			function test(x, y) {
				var z = x + y;
				return z;
			}
			alert(test(1, 2));
			// 3을 출력함
		</script>
	</head>
</html>

example2.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script type="text/javascript">
			function sum(num1, num2) {
				return num1 + num2;
			}
		</script>
	</head>
	<body>
		<form>
			<input type="button" onclick="alert(sum(1,1))" value="1+1" />
			<br />
			<input type="button" onclick="alert(sum(1,2))" value="1+2" />
			<br />
			<input type="button" onclick="alert(sum(1,3))" value="1+3" />
			<br />
			<br />
			<br />
			<input type="text" onchange="alert(sum(10,Number(this.value)))" />
			+10
		</form>
	</body>
</html>

댓글

댓글 본문
작성자
비밀번호
  1. egoing
    thanks
    대화보기
    • Welfare23
      Thanks a lot Egoing ,This tutorial helped me in understanding javascript very easily ,as the way you written and talked are very easy to understand .I am feeling fortunate to being here ,I really like your teaching process.
    • egoing
      크롬에서 아래 예제 페이지를 열고 result 칸에 마우스를 올려놓고 프래임 소스보기를 해보세요.
      http://jsfiddle.net/9B8SE/

      그럼 아래와 같은 코드 내용이 보일 겁니다.
      http://ideone.com/VUNLAH
      대화보기
      • leeta
        질문이 있습니다. 정말 궁금한것이니꼭 답변 해주셨으면 좋겠습니다.
        jsffidle로 예제를 쭉해왔었는데
        html css 하는 부분에서는 초기에 html칸에 html과 css를 둘다 넣을때 항상 상단에 <style type="text/css"></style> 를 붙이셔서 전 그게 꼭 붙여 져야 만 된다고 생각을 하던도중 html은 html칸에 css는 css칸에 넣게 되면<style type="text/css"> 이부분은 필요가 없다고 알게되었습니다 그리고 제가 지금 해봤는데 꼭 저걸다 쓰지 않아도<style></style> 만 입력해도 결과가 잘나오는군요. 그런데 자바 스크립트 배우면서 마찬가지로 <script type="text/javascript"></script>이게 마주치게 되었습니다 제가 예제 2번을 복사해서 넣게 되면 <script type="text/javascript"></script> 이부분이 모두 입력이 되지만 jsfiddle에서 바로 열게되면
        <script>
        function sum(num1, num2) {
        return num1 + num2;
        }
        </script>
        이렇게만 입력이 되더라구요. 그래서 제가 여기서 <script></script> 빼고 저 부분을 jsffidle자바 스크립트 칸에 넣어놓고 run을 눌렀더니 결과에 보이기는 하나 버튼이 눌리지가 않습니다.

        어떻게 이해할수 있을까요?..도와주세요.
        바디와 헤드차이인가요?
      • zzang님,

        자바스크립트 강의 둘러보다 좀 (많이) 늦었지만 답글 남깁니다.

        alert은 function 내에서 return 해주는 값과 관계없이 즉각적으로 반응하는 (사전 정의된) 함수입니다. 따라서 실행되는 순간 바로 창에 뜨게 되는 것이고, 두번째 alert은 이미 함수가 return으로 종료되었기 때문에 실행되지 않게 되죠. zzang님이 남기신 자바스크립트문의 실행순서는 다음과 같습니다.

        1. var value=returnTest(); // 변수 value에 returnText()에서 return된 값을 저장한다.
        2. function returnTest(){ // 함수의 시작
        3. alert('a를 실행합니다.'); // alert 내부의 내용을 화면에 띄움.
        4. return; // return. 함수 종료
        5. alert(typeof(value)+':'+value); // undefined의 타입(undefined):undefined 띄움
        대화보기
        • 에그에그
          저도 배우는 입장이라 잘 모르지만 함수에서 return은 함수의 끝을 의미하는걸로 알고있습니다 return뒤에 리턴할 것을 명시해주시면 리턴이 되겠지만 아무것도 안넣고 그냥 단순히 return;으로 로직을 구성하면 함수가 종료되는걸로알고있습니다. 지금 zzang님의 returntest라는 함수에서는 경고창을 하나 띄우고 함수 진행이 잡시 중단 되엇다가 확인을 클락하면 바로 함수가 종료되는것이 맞는것입니다.
          그리고 value라는 변수에는 아무것도 저장되지 않는것 같습니다 리턴되는게없으니 저장되는것도 없지요 ㅎㅎ 제가 알기론 그렇습니다...
        • heaven
          저도 잘은 모르겠지만, var value=returnTest(); 에서 변수에 함수실행구문을 보내서 그런게 아닐까 싶습니다.

          var value=returnTest() 와 var value=returnTest 의 차이로 인해서,
          함수 자체가 인자로 넘어간게 아닌...실행된 함수의 반환된 값이 인자로 넘어간게 아닐까요?
          대화보기
          • zzang
            궁금한게 있어요,

            function returnTest(){
            alert('a를 실행합니다.');
            return;
            alert('b를 실행합니다.');
            }

            var value=returnTest();
            alert(typeof(value)+':'+value);

            라고 했을때 맨밑에 alert창으로 undefined:undefined 만 뜰거라고 예상했는데
            returnTest 로 정의한 'a를 실행합니다.'가 먼저 alert되던데.. 왜 이렇게 되는지 이해하기가 어려워서요..
            맨처음에 변수를 지정할때 원래 그 변수를 한번 실행하나요?
            초보적 질문 죄송..;
          • egoing
            (수업이 오래되서 맥락이 잘 기억은 안납니다만) 그건 특별한 이유는 없는 것 같습니다. 그냥 일관성이 떨어진 것이라고 생각하시면 될 것 같습니다.
            대화보기
            • Derek
              exemple2에서요...jsfiddle에서 실습할때...이전것들은 모두 javascript란에 쓰였는데요. 왜 이것만 html란에 쓰인건가요? javascript에서는 input이 안되서 그런건가요?
            • 구글맵레드닷맨
              다함께 lazy~~ 하핫;;
            • 콤퇘지
              함수의 선언과 함수의 호출 좋아요
            • zxcvxr
              대문자 소문자를 명확히 기재를 해줘야 정상작동이 되나봐요???
              까다롭네요 ㅎ
            • Lee, Junghoon
              버튼 하나 하나 만드는 것만 해도 참 신기하네요. 감사합니다. ^^
            • Lee, Junghoon
              버튼 하나 하나 만드는 것만 해도 참 신기하네요. 감사합니다. ^^
            • takk
              두번째 예제에서 <input type="text">태그에서 사용자가 입력하는 인자값을 숫자로 명시해주는 number라는 태크는 앞에 n을 대문자로 입력하지 않으면 텍스트박스에 직접 입력하는 인자값이 인지가 안되네요. 직접 만들어보다 실행이 안되서 당황했습니다.:)
            • Chris
              어찌됐든 함수,메소드는 기능을 구현하는 넘이라는 거...
            • 색비름
              http://insanehong.kr......a...
              여기로 변경된거 같습니다!
              대화보기
              • insanehong
                함수가 전달 받는 인자가 call by value 혹은 call by referece가 되는 것이조요 . call by value로서 function이 넘어가면 복사값이 call by reference로 넘어가면 참조값이 넘어가게 되죠. 함수와 객체의 차이가 되겠지요
                대화보기
                • insanehong
                  블로그 엔진이 변경되어 404페이지에서 찾아보시면 원하는 글 목록이 있을 거 같네요
                  대화보기
                  • Luis, Park
                    좋은 글 감사합니다. 블로그에서 확인하였습니다. 자바스크립트에서 함수는 무조건 call by value형식으로 작동한다고 하는데 이것도 메소드와 다른 점으로 볼 수 있을까요?
                    대화보기
                    • insanehong
                      대화보기
                      • manorgass
                        좋은 정보 감사합니다!걸어주신 링크에 연결이 안됩니다.블로그에서 많은 정보를 얻고싶어요 :D
                        대화보기
                        • Han Jung Hyun
                          참고에 있는 링크가 변경 되었습니다 :) ( 데이터 타입 #2 ) 블로그 운영자분이 따로 링크를 명시해서 들어갈수는 있지만 초기 링크랑은 다르네요
                        • egoing
                          좀 더 자세한 내막을 알고 싶은 분들을 위해서 본문에 언급해주신 링크도 참고로 걸었습니다. 고맙습니다.
                          대화보기
                          • insanehong
                            간단하게 함수는 독립객체입니다. javascript에서의 함수는 1급객체로 변수나 데이터 로서 존재 가능하고 인자로 전달할수 있습니다. callback 함수를 인자값으로 넘길수 있는 이유이지요.
                            메소드는 해당 메소드를 품은 객체를 통해서만 실행가능합니다. 함수가 독립적인 실행 모듈이라면 메소드는 객체에 특정 행동을 의뢰해야 동작가능한 수행모듈입니다.
                            미약하게 나마 제블로그에 올려논 글 링크를 올립니다. 꾸벅http://insanehong.kr/2012/02/j...
                            대화보기
                            • egoing
                              의견 감사합니다. 어떤 차이점이 있는지도 알려주시면 더 좋을 것 같습니다. :)
                              대화보기
                              • insanehong
                                function과 method는 엄연한 차이가 있습니다. javascript의 함수는 꽤 복잡하고 큰 의미를 가지는 부분이라고 생각합니다. javascript에서 함수를 단순 모듈로만 설명한다면 정말 javascript 따위가 될수밖에 없는 듯하네요
                              • BuBuCompany
                                정말 천연기념물같은곳이군요!!! 훌륭하네요!!! ^^
                              버전 관리
                              egoing
                              현재 버전
                              선택 버전
                              graphittie 자세히 보기