티스토리 뷰

[JQUERY]자바스크립트

jQuery 009. 함수 function

가산동 2018. 9. 10. 23:43
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
        
            //함수호출
            fn99dan();
            
        });
        
        //함수
        function fn99dan(){
            var dan = 2;
            var index = 2;
    
            document.write(dan, "단 입니다.","</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
        }
        
    </script>
</head>
    <body>
    </body>
</html>
cs


위는 이번시간 예제이다. 간단하게 구구단 2단을 출력하는 함수를 만들고 호출해보겠다.

아래는 실행화면이다.



한줄씩 살펴보면,


16
        function fn99dan(){
cs

함수는 function 함수이름(){} 형식으로 생성한다.



17
18
            var dan = 2;
            var index = 2;
cs
dan 이라는 변수에 2를 대입하고

index 라는 변수에 2를 대입하였다.


20
21
            document.write(dan, "단 입니다.","</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
cs

document 를 활용하여 body태그안에 html을 작성해 보겠다. document.write에 대한설명은 이전글에서 설명한적이있다. 아래는 이전글 경로이다.

>> [[JQUERY]자바스크립트] - jQuery 003. 출력기능 document.write()


라인 21의 출력값을 예상해보면 dan은 2를 대입했기때문에 2일것이고, index또한 2를 대입했기 때문에 2일것이다. 후에 dan*index++ 를 하였는데 dan(2) * index(2)의 결과로 4가 되고, index의 값을 후위연산을 활용하여 ++ 했기 때문에 3이 될 것이다. 증감연산자는 이전시간에 설명한적이있다. 아래는 경로이다.

>> [[JQUERY]자바스크립트] - jQuery 008. 증감연산자 ++,--


21
22
23
24
25
26
27
28
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
            document.write(dan, " * ", index, " = ", dan*index++ ,"</br>");
cs
라인 21 부터 28 까지 소스는 같지만 결과는 다른걸 볼 수 있다. index의 값이 증감연산자를 통해 하나씩 증가 하기때문에 소스를 바꾸지 않아도, *2 에서 *9까지 같은 소스로 출력할 수 있다.


브라켓을 활용한 jquery 공부하기 브라켓 세팅 방법.

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설치하기

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설정하기

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 제이쿼리(jquery) 연결하기





저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 011. 클래스(class)  (0) 2018.09.12
jQuery 010. 함수 function ,매개변수(파라미터)  (0) 2018.09.11
jQuery 008. 증감연산자 ++,--  (0) 2018.08.04
jQuery 007. 복합연산자 += , -= , *= , /= , %=  (0) 2018.07.26
jQuery 006. 연산자 +-*/%  (0) 2018.07.26
댓글