웹 애플리케이션 만들기

함수

함수의 기본문법 

12.php

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <h1>JavaScript</h1>
  <script>
    function a(){
      document.write("Hello JS Function");
    }
    a();
  </script>

  <h1>php</h1>
  <?php
    function a(){
      echo "Hello PHP Function ";
    }
    a();
  ?>
</body>
</html>

함수의 입력과 출력 

13.php

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <h1>JavaScript</h1>
  <script>
    function a(input){
      return input+1;
    }
    document.write(a(6));
  </script>

  <h1>php</h1>
  <?php
    function a($input){
      return $input+1;
    }
    echo a(6);
  ?>
</body>
</html>

소스코드

github

댓글

댓글 본문
작성자
비밀번호
  1. 복숭해
    2016.12.02 17:05 완료
  2. harris
    2016.12.01 16.42 완료
  3. 박정한
    완료
  4. San Koh
    161115 양념같은(?) 강의 잘들었습니다.
  5. 완료
  6. 뀨뀨몬
    a라는 함수의 input에 6을 넣으면

    1번 같은경우는 7(=6+1)를 웹브라우져 창에 나타내는 함수이고
    2번 같은경우는 7(=6+1)되는 함수입니당

    1번은 값을 창에나타내는 기능이 다지만
    2번은 숫자 이기때문에 이 숫자를 창에 나타낼수도 더할수도 곱할수도 나눌수도 뺄수도 등 더 다양하게 사용할수있기때문인듯합니당
    대화보기
    • nomad2gleam
      입력값 출력값이야 함수 수학 생각하면 아무 문제 없는데 저는 여기서 조금찝찝하네요
      3번째 다시 보면서 다 이해하긴 했는데요, 제가 3번째 다시 보게 된 이유는


      왜 return으로 바꾼뒤에 '더 좋은지'에 대해
      "document.write말고 다른것도 사용할 수 있으니까요" 라는 설명을 해주셨는데(댓글을 보아도)
      저는 이 문장만으로는 이해하기가 어렵네요

      return으로 바꿈으로써 '실질적으로' return이 아닌경우와 다르게, 어떤점에서 이득이고 안좋은지를
      예를 들어주시면 정말 고마울 것 같아요..


      ㅠㅠ 다른 공동공부 하시는 분들중에서라도 아시는 분 계시면 *상대적비교를 통한 예를 들어서* 설명해주시면 정말 이해하기 좋을 것 같습니다...! 번거롭게 죄송합니다.
    • 깐깐징어
      잘 봤습니다!!!!
    • 이병정
      연산되는 순서의 앞뒤가 잘 이해되지 않네요.. ㅜ0ㅜ
      차츰 알게 되겠죠? ^^);;
    • Andynam
      공감이요... 하나만더 하다가 오늘 엄청많이봤네요 ㅋㅋ
      강의 내용도 설명멘트, 비유도 다 좋네요
      대화보기
      • querencia
        <- 2016.10.29 (17:30~21:10) 수강완료
      • 활화산
        강의 잘 듣고 넘어 갑니다. 감사합니다
      • 수강완료
        감사합니다
      • Gayong Sim
        2016. 10. 22 수강완료 (중요한 파트!!)
      • 유익한 강의 너무나도 감사합니다.
      • 이성진
        수강 완료!
        좋은 강의 항상 감사 드립니다~
      • 아무개
        $표시는 변수선언할때 사용하는것입니다.

        echo는 화면에 php의 결과물을 출력하기위해 쓰는것이구요
        대화보기
        • DECIMO
          2016.09.28 감사합니다.
        • 이수재
          수강완료 09/23
          재수강할 필요 있음.
        • 2016/9/18 완료
        • 강의 내용으로 보았을때

          document.write("내용");
          이라는 것은 화면에 "내용"을 출력한다. 라는 말이구요.

          prompt("제목");
          이라는 것은 화면에 "제목"의 입력창을 띄운다라는 말이네요.

          작성하신 함수 기준으로 보았을때
          a(3) 이라는 함수호출은

          화면에 "3"을 출력하고 나오는 값은 "결과가 없는 제목"으로 입력창을 띄운다가 되겠네요.

          강의 내용대로 변경하시려면
          document.write (input);
          라인을
          return input;
          으로 바꾸셔야 원하시는 결과를 얻으실
          수 있겠네요.
          대화보기
          • Joong-ha Hwang
            function a(input){
            document.write (input);
            }
            prompt(a(3));

            에서는 결과값이 prompt창에 안 뜨고 화면에 출력이 되던데
            document.write 함수의 기능이 '화면에 출력'하는 기능인 건가요????
            괜히 저거 해봤다가 혼란스러워졌네용
          • Joong-ha Hwang
            공감... 하나만 더 하나만 더 하면서 계속 보게되네요 ㅋㅋㅋ
            대화보기
            • 형진
              완료 2016.8.21
            • 제리피
              2016.08.17 완료
            • 복붙합니다.
              감사합니다 :D
              대화보기
              • 이재아
                ㅡ 디버깅부터 함수까지 개념 요약 ㅡ

                ㅁ 디버깅 : 오동작을 해결하는 행위
                Javascript를 사용하다가 오동작할 때에는 우선 웹브라우저에서 '컨트롤+쉬프트+J'를 누른다.
                그러면 자바스크립트 콘솔이 뜨면서 무엇이 어떻게 잘못되었는지, 그 잘못된 코드가 어떤 파일의 몇행에 위치해 있는지를 알려준다.

                php를 사용하다가 오동작했을 때에는 php가 설치되어있는 apache2의 'logs' 디렉토리에 들어가본다.
                그곳에는 어떤 에러들이 발생했는지를 기록해놓은 error.log라는 파일이 있다.
                그 파일을 아톰으로 열어준 뒤 가장 밑으로 내려보면 가장 최근의 에러메세지가 가장 밑에 기록되어 있는데,
                그곳의 로그기록을 통해 어떤 오류가 어떤 파일의 몇행에서 발생했는지를 알 수 있다.



                ㅁ 변수 : 고정적인 내용과 구분하여, 특정 내용이 다른 내용으로 변할 가능성이 있을 때 사용한다.
                js의 경우에는 그냥 글자를 아무렇게나 입력하면 컴퓨터가 알아서 그 글자를 변수로 인식하며,
                php는 '$name'과 같이 문자 앞에 $를 붙여주면 컴퓨터가 그 문자를 변수로 인식한다.
                예 :
                "안녕하세요 (~~~) 님!"이라는 문구를 작성하려는데 사용자의 이름에 따라 (~~~)의 명칭이 달라지므로 (~~~)는 변수처리 해야한다.
                그때에는 아래와 같이 코딩하면 되는데, 아래의 "$dmdkdk"에 해당하는 부분이 변수에 해당하는 부분이다.
                위에서 말한 '$name'은 큰따옴표 없이 아무 문자나 적으면 된다는 뜻이다.
                <?php
                $dmdkdk = "egoing";
                echo "안녕하세요.".$dmdkdk."님"; ?> 은 브라우저에 '안녕하세요 egoing님'으로 출력된다.



                ㅁ 비교문
                a == b : a와 b가 같은지를 비교해서 같으면 true를, 같지 않으면 false를 출력함
                a != b : a와 b가 같지 않은지를 비교해서 같으면 false를, 같지 않으면 true를 출력함
                a > b : a와 b의 크기를 비교해서 a가 b보다 크면 true를, 같지 않으면 false를 출력함
                a < b : a와 b의 크기를 비교해서 a가 b보다 크면 false를, 같지 않으면 true를 출력함
                true 혹은 false로 출력된 데이터 형식을 'Boolean'이라고 부른다.
                php에서 비교문을 입력할 때에는 'var_dump(a==b)'처럼 표시한다.



                ㅁ 조건문 : 어떤 조건을 만족시켰을 경우의 출력과 만족시키지 못했을 경우의 출력을 모두 고려해야 할 때 사용된다.
                코드로 작성할 때에는
                djEJsrkqt = (1==2);
                if(djEJsrkqt) {document.write("알겠습니다.");}
                else {document.write("아니거든ㅎ");} 와 같은 형태로 코딩된다.
                해석해보면 '만약 (djEJsrkqt)가 참일 경우 "알겠습니다"라는 문구를 출력하고, 아니라면 "아니거든ㅎ"이라는 문구를 출력하라는 뜻이다.
                이때 판단의 조건이 되는 ()안의 값을 위와 같은 형태의 코드로 정의해두어야 한다.



                ㅁ 조건문 응용 : 로그인 기능 만들기
                js에서 prompt라는 명령어를 사용하면 무언가를 입력할 수 있는 창이 뜨도록 할 수 있다.
                예를들어 'prompt("뭐라도 써봐요")' 라고 코딩했을 경우 브라우저에서 "뭐라도 써봐요"라고 쓰여진 내용과 함께 뭔가를 입력할 수 있는 창이 뜬다.
                프롬프트창에 입력될 비밀번호를 변수로 지정해둔 뒤, 조건문의 대상이 되는 값을 그 변수로 설정하고, 그 변수를 비교문으로 나타내면 로그인 기능을 만들 수 있다.
                예 : password = prompt("비밀번호");
                if(password == 1111) {document.write("어서오세요!");}
                else {document.write("꺼지세요ㅎ");
                각 줄마다 해석해보면
                '패스워드라는 변수값이 있는데, 그 변수값은 프롬프트 안에 적혀진 값입니다.
                만약 패스워드라는 그 변수값이 1111과 일치한다면, 브라우저에 "어서오세요!"를 출력하세요.
                그러나 일치하지 않는다면 브라우저에 "꺼지세요ㅎ"를 출력하세요' 라는 뜻이다.



                ㅁ 반복문 : 특정 목표에 완전히 도달할 때까지 어떤 일을 계속 반복적으로 수행하고자 때 사용된다. (알고리즘적인 원리가 쓰인다.)
                이때 while이라는 명령어를 사용하는데, js와 php에서 공통적으로 쓰이는 코드다.
                예 : i = 0;
                while(i < 10){document.write("<li>hello world</li>");
                i = i + 1; }
                의 형태로 쓰이는데, while의 괄호 안에 적힌 내용이 참이라면 계산을 반복해서 수행하고, 괄호 안의 값이 거짓으로 된다면 계산을 멈추는 원리다.
                그런데 이것이 '알고리즘'적인 수학적 원리와 만나면 특정 목표에 완전히 도달할 때까지 어떤 계산을 반복적으로 수행하도록 할 수 있다.
                위의 예문을 길게 풀이해 보자면
                'i라는 변수는 현재 0이라는 값을 가집니다.
                그런데 만약 i가 10보다 작다면, 브라우저에 'hello world'라는 문구를 출력하되 리스트의 형식으로 출력하세요.
                또한 출력한 뒤에는 i = i + 1인 것으로 계산하세요.
                위의 과정을 반복해서, (i가 10보다 작다)라는 명제가 거짓이 될 때까지 계속 출력하세요.' 라고 말할 수 있다.
                간단히 말하면 'i가 10보다 작은 동안에는 계산하는 과정과 출력하는 과정을 반복하세요'라고 해석할 수 있다. (php의 경우에는 변수 앞에 $를 붙여야 한다.)



                ㅁ 배열 : 전체를 구성하는 각 요소들의 명칭들을 나열하고자 할 때 사용된다.
                예를들어 list = new Array("철수", "영희", "민수"); 라고 코딩했을 경우
                '어떤 한 리스트의 요소들인 "철수", "영희", "민수"를 그 순서대로 나열합니다.' 라는 뜻이 된다.

                만약 여기에 document.write(list[1]); document.write(list.length); 라는 코드를 더했다면
                첫번째 코드는 '브라우저에 [1]번째 순서를 가지는 요소를 출력하세요' 라는 뜻, (컴퓨터는 숫자를 0부터 세므로, 출력값은 "철수"가 아니라 "영희"다.)
                두번째 코드는 '브라우저에 리스트를 구성하는 요소들의 총 수를 출력하세요'라는 뜻이다. (구성 요소가 총 3개이므로 "3"이 출력된다.)

                php로 작성할 때에는 위와 똑같은 내용을 아래와 같이 작성한다.
                $list = array("철수", "영희", "민수");
                echo $list[2];
                echo count($list);



                ㅁ 배열과 반복문 결합하기
                예문 : list = new Array("최진혁", "최유빈", "한이람", "한이은", "이고잉");
                i = 0;
                while(i < list.length) {document.write("<li>"+list[i]+"</li>");
                i = i + 1;}
                이 예문에서는 반복문의 개념인 while, 목록을 순서대로 이어붙이는 것이 아니라 리스트처럼 아래로 나열해주는 <li> </li>,
                배열의 개념인 list, 리스트를 출력할 때 사용하는 list[리스트의 순서i], 리스트의 구성요소가 총 몇개인지를 출력해주는 list.length가 쓰였다.
                해석해보면
                '리스트에는 "최진혁", "최유빈", "한이람", "한이은", "이고잉"이 있습니다.
                참고로 i라는 변수는 0인데, i = i+1의 수식대로 작업하되 연산작업을 할 때마다 i를 1씩 늘리면서 연산작업하세요.
                연산작업을 언제까지 하냐면, 변수i가 리스트를 구성하는 총 수(5)가 될때까지 하시면 됩니다.
                또한 연산작업을 할 때마다 브라우저에 리스트의 구성요소중 첫번째 것부터 나열하되, <li>의 형식으로 나열하세요.' 라는 명령으로 해석할 수 있다.



                ㅁ 함수 : 어떤 특별한 세부기능을 함수로서 정의하는 기능이다.
                function a() {document.write("Hello JS Function"); }는
                a()라는 함수를 정의합니다. 그 함수는 브라우저에 "Hello JS Function"라는 문구를 삽입하는 기능을 가집니다. 라는 의미가 담긴 코드다.
                이 함수를 정의한 뒤 다른 곳에서 a()만 입력해주면 그것은 'document.write("Hello JS Function")'라는 의미를 가지게 된다.

                그래서 예를들어 function a(x) {return x+2;} document.write(a(6)); 라는 코드가 있으면,
                '변수x에 2를 더해주는 기능을 가진 함수 a(x)를 정의합니다. 브라우져에 a(6)을 출력하세요.' 라는 의미로 해석되므로 브라우저에는 '8'이 출력된다.
                php의 경우에는 같은코드가 function a($x){return $x+2;} echo a(6); 로 코딩된다.
              • Code.Math
                감사합니다~!~
              • 각 강의가 10분 내외인 것이 정말 신의 한 수 같습니다.. 중독적이에요!
              • 김종엽
                2016.08.08 완료!
              • Wookiiis
                잘 보았습니다. :)
              • 이현아
                쉬운강의 감사합니다.
              • 수강완료
              • 차누
                수강완료
              • egoing
                그렇게 하면 함수는 계산만하고 그 결과를 어떻게 사용할지(이메일전송, 파일저장, 또 다른 계산등)는 함수를 호출하는 쪽에서 결정하면 되거든요
                대화보기
                • 권행신
                  이걸 같이 공부하고 계시는 분들께 질문드려요. 이고잉님은 바쁘실 것 같아서..
                  아시는 분 계시면 설명해주시면 감사하겠습니다.

                  이고잉님이 설명중에, document.write라고 되어있는 부분을 return으로 바꾸며
                  더 좋은 코드가 되었다고 설명하시는데요.
                  return으로 변환함으로써 얻는 이득이나 편리한 점이 무엇인지.. 궁금합니다!
                • 김준형
                  수강했어요. 쉬운강의 감사합니다.
                • JustStudy
                  고맙습니다 2.
                • JuHui Lee
                  항상 좋은 강의 감사합니다.
                  객체... 진짜 자바 잠깐 공부하면서 제일 이해 어려웠어요ㅠ 결국 이해 못했고요..
                  책을 몇권이나 뒤져봐도 다 이해할 수 없는 얘길 하고 있는데
                  (번역투 or 자기만이 아는 설명을 해놓음... 전부! ㅠ)
                  점 앞에 있는 단위가 객체인지는 이제야 처음 알았네요
                  다음에 객체에 대한 화끈한 설명도 기대합니다
                • 다람쥐
                  잘봤습니다. 감사합니다^^
                • Sy Kim
                  객체!!!!! 이것도 객체지향 언어라면서 엄청 들어봤는데 뭔지 모르는 용어.. 뭔가 미리만들어진 부속품이라고 이해하고 있었는데.. 이거 어서 끝내고 다른 강의 넘어가고 싶어요.. (아직 절반도 안왔따는..ㅎㅎㅎ휴ㅠㅠㅠ)
                • 숭대
                  항상 잘 보고 있습니다~
                • bulhandang
                  감사합니다
                  대화보기
                  • bulhandang
                    감사합니다
                    대화보기
                    • 변수명
                      $ 표시는 변수를 나타내는 표시에요.

                      변수는 변할수있는 값으로

                      $변수명 = 변수값;

                      이런 코드로 $변수명 의 값이 변하게 되요
                      대화보기
                      • 자판기
                        자판기라고 생각하시면 쉬워요!

                        input 값이 원하는 음료수 버튼을 누른거라고 하면
                        return 값은 그 음료수가 되는거죠!
                        대화보기
                        • Go You Mi
                          $표시는 임의로 정의한 변수를 나타내는 약속같은 것 같아요
                          변수명을 쓰실때는 $를 쓰셔야 합니다
                          대화보기
                          • Rhys Jung
                            어려운 부분이라 예제 보다는 이고잉님이 나열한 소스코드를
                            재차 입력하는 수준에서 머물게 되네요

                            다시한번 복습이 필요한 상황이네요..ㅠㅠ
                          • bulhandang
                            처음 기본문법 영상에서 php코드에는 $표시를 안썼는데
                            출력값을 쓸 때에는 $표시를 필수적으로 써야 하는건가요?

                            제가 처음부터 완벽히 이해하기보다는 일단 한번씩 보고 반복해서 보자는 개념으로 접근해서
                            까먹어서 그런 것일 수도 있는데 php코드 쓸 때에는 $표시를 항상 같이 써야 하는거 아닌가요?
                          • ㅎㅎ
                            undefined 는 타입의 이름입니다.
                            C/C++ 의 void와 비슷한 것으로 보입니다.

                            자바스크립트에서는 함수의 반환형을 명시하지 않아도
                            웹브라우저가 이를 유추하는데,
                            return 을 하지 않으면 제아무리 알파고라도 타입유추가 불가능합니다.
                            그렇기 때문에 b(8)의 반환형은 undefined(정의되지 않음)이 되며,
                            해당 타입의 값을 그냥 출력하게 되면 undefined 라는 문자열로 출력하게 됩니다.
                            대화보기
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기