함수 선언하고 호출하기

JavaScript

1 함수 선언하기
- 1.1 방법 1
- 1.2 방법 2
2 함수 호출하기
3 예제 1
4 예제 2
5 예제 3

함수 선언하기

방법 1

function functionName( argument1, argument2, ... ) {
  // Do Something
}

방법 2

var functionName = function( argument1, argument2, ... ) {
  // Do Something
};

함수 호출하기

functionName( value1, value2, ... );

방법 1로 함수를 선언한 경우, 함수 호출은 함수 선언 전 또는 함수 선언 후에 할 수 있습니다.

functionName( value1, value2, ... );
function functionName( argument1, argument2, ... ) {
  // Do Something
}

function functionName( argument1, argument2, ... ) {
  // Do Something
}
functionName( value1, value2, ... );

방법 2로 함수를 선언한 경우, 함수 호출은 함수 선언 후에 해야 합니다.

var functionName = function( argument1, argument2, ... ) {
  // Do Something
};
functionName( value1, value2, ... );

예제 1

Hello World!를 출력하는 예제입니다. 방법 1로 함수를 선언하고 호출합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
      function jbFunction() {
        document.write( '<p>Hello World!</p>' );
      }
      jbFunction();
    </script>
  </body>
</html>

예제 2

Hello World!를 출력하는 예제입니다. 방법 2로 함수를 선언하고 호출합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
      var jbFunction = function() {
        document.write( '<p>Hello World!</p>' );
      };
      jbFunction();
    </script>
  </body>
</html>

예제 3

인자를 사용하는 함수 예제입니다.

인자의 개수와 값의 개수가 같으면 아무런 문제 없이 출력됩니다.
값이 인자보다 적으면 값이 없는 인자는 undefined를 반환합니다.
값이 인자보다 많으면 인자보다 많은 값은 무시됩니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      h1 {
        font-family: Consolas;
      }
      h1 span {
        color: #2196f3;
      }
    </style>
  </head>
  <body>
    <script>
      function jbFunction( jbName, jbJob ) {
        document.write( '<h1>My name is <span>' + jbName + '</span>. I am a <span>' + jbJob + '</span>.</h1>' );
      }
      jbFunction( 'John', 'student' );
      jbFunction( 'John' );
      jbFunction( 'John', 'student', 'male' );
    </script>
  </body>
</html>

JavaScript / Object / Element.childElementCount / 자식 요소의 개수를 반환하는 속성

.childElementCount .childElementCount는 자식 요소의 개수를 반환하는 속성입니다. 바로 아래 단계에 있는 자식 요소의 개수만 세고, 자식 요소의 자식 요소의 수는 세지 않습니다. IE는 버전 9 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <ul> <li>Lorem</li> <li>Ipsum <span>Dolor</span></li> </ul> <script> var jb = document.getElementsByTagName( ...

JavaScript / Object / Array.join() / 배열의 원소를 연결하여 하나의 값으로 만들기

.join() .join()은 배열의 원소들을 연결하여 하나의 값으로 만듭니다. 문법 var jbStr1 = jbAry.join(); jbAry 배열에 있는 원소들을 하나의 값으로 만듭니다. 원소들의 구분은 콤마(,)로 합니다. 원소들의 구분을 다른 문자로 하려면 () 안에 원하는 문자를 넣습니다. var jbStr2 = jbAry.join( ' / ' ); 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / Object / String.length / 문자열의 길이 반환하는 속성

.length .length는 문자열의 길이를 반환하는 속성입니다. 문법 string.length 예를 들어 'abcd'.length 는 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( '<p>"1234".length : ' + '1234'.length + '</p>' ); document.write( '<p>"".length : ' + ''.length + '</p>' ); document.write( '<p>"한글".length : ' + '한글'.length + '</p>' ...

JavaScript / Object / String.substr() / 문자열 추출하는 메서드

.substr() .substr()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substr( start, length ) start로 시작 위치를 정하고 length로 잘라낼 문자열의 길이를 정합니다. 예를 들어 var str = '123456789'; document.write( '<p>substring( 1, 5 ) : ' + str.substr( 1, 5 ) + '</p>' ); 는 23456을 출력합니다. start 값은 필수이고, length를 지정하지 않으면 문자열의 끝까지를 가져옵니다. 예제 <!doctype html> <html lang="ko"> ...

JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드

.removeAttribute() .removeAttribute()는 요소의 속성을 제거하는 메서드입니다. 문법 element.removeAttribute( attributename ) 예를 들어 document.getElementsByTagName( 'h1' ).removeAttribute( 'class' ); 는 문서의 첫번째 h1 요소의 class 속성을 제거합니다. 예제 첫번째 h1 요소의 class 속성을 제거해서 글자색이 검정색이 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } .abc { color: red; } </style> </head> <body> <h1 class="abc">Lorem ...

JavaScript / Object / document.URL / 문서의 URL을 반환하는 속성

.URL .URL 속성으로 문서의 URL을 가져올 수 있습니다. 문법 document.URL 예제 문서의 URL을 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( "<p>document.URL : " + document.URL + "</p>" ); </script> </body> </html> JavaScript / Object / Location - URL 정보 가져오는 객체

JavaScript / Object / String.toUpperCase(), String.toLowerCase()

.toUpperCase() 문법 .toUpperCase()는 대문자로 변환하는 메서드이다. 예를 들어 다음은 ABC를 반환한다. 'abc'.toUpperCase() 예제 1 - 대문자로 변환하여 출력 문자열 Aaa를 대문자로 변환하여 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { font-family: ...

JavaScript / Object / Math.log(), Math.log10(), Math.Log2()

Math.log(), Math.log10(), Math.Log2() Math.log() : 자연로그의 값을 반환합니다. Math.log10() : 상용로그의 값을 반환합니다. Math.Log2() : 밑이 2인 로그의 값을 반환합니다. 문법 Math.log( number) Math.log10( number ) Math.Log2( number) number에는 숫자가 들어갑니다. 0인 경우 -Infinity, 음수인 경우 NaN을 반환합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / 함수 / encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()

encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent() encodeURI() : 인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수입니다. encodeURIComponent() : 모든 문자를 인코딩하는 함수입니다. decodeURI() : encodeURI()로 인코딩한 문자열을 디코딩하는 함수입니다. decodeURIComponent() : encodeURIComponent()로 인코딩한 문자열을 디코딩하는 함수입니다. 문법 encodeURI( uri ) encodeURIComponent( uri ) decodeURI( uri ) decodeURIComponent( uri ) uri : 인코딩하려는 인터넷 주소를 입력합니다. 예제 특수문자와 한글을 포함한 URI를 인코팅, ...

JavaScript / 대화상자 / Alert, Confirm, Prompt

자바스크립트에서 대화상자는 세가지가 있습니다. Alert, Confirm, Prompt로, 새 창을 띄운다는 점은 같으나 역할이 다릅니다. Alert Alert는 단순히 메시지를 전달하는 역할만 합니다. 반환하는 값이 없습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | alert</title> <script> alert( 'Lorem ipsum dolor' ); ...

CODING FACTORY