본문 바로가기

IT일반과목/자바스크립트

자바스크립트 개요, 기본 문법, 배열, 함수



@ 자바스크립트

-> 기존 HTML은 똑똑하지 못한 언어

-> 혼자서 스스로 계산도 못하고, 누군가가 form(폼)을 정확하게 

채웠는지도 알 수 없고 (HTML4 일경우)

클라이언트의 행동에 따른 결정을 내릴수도 없음

-> 자바스크립트는 웹 페이지가 지능적으로 반응할 수 있도록 함

-> 자바스크립트를 사용해서 방문객이 필수 정보를 빠뜨렸는지도 알려

줄 수 있어서 똑똑한 웹을 만들 수 있음

- 사실 2000년 초반에는 자바스크립트는 개발자들에게 무시 당하는

언어 였음 (기능도 별로 없고, 성능도 좋지 못했음)

- 최근 몇년사이에 다양한 자바스크립트 프레임 워크와 라이브러리 가 다양하게 생기면서 크게 확장되고 엄청난 발전을 하였음

- 현재에는 웹에서는 자바스크립트가 절대적으로 빠져서는

안되는 언어로 자리 잡고 있음 

(몇몇 기업에서는 커스텀 자바스크립트 등 다양한 자바스크립트를

이용한 기법들이 생겨나고 있음)



웹페이지의 구조는 HTML 꾸미는건 CSS 웹페이지 꾸민다음 뭔가 액션같은거 넣는건 자바스크립트


@ 자바스크립트 선언

-> <SCRIPT> </SCRIPT> 태그를 이용하여 선언함

- <script> ~ </script> 사이가 자바스크립트 작성 영역임

-> 시작시 type 값을 통해 브라우저에 자바스크립트 라는것을 알려줌

- default 값이 자바스크립트로 되어 있기 때문에 

생략 가능함


ex)

<script type="text/javascript">

alert("자바스크립트 입니다.");

</script>


혹은 

<script>  // type은 생략이 가능함

alert("자바스크립트 입니다.");

</script>


※ 자바스크립트는 html 태그 영역 밖에 작성이 가능하나

웹 표준과 웹 접근성을 고려하여 

일반적으로 <head>나 <body>에 작성함





@ 자바스크립트 작성 방식


1. inline 방식 - 고전방식

- html 파일안에 자바스크립트가 있는 방식

- html 코드내의 자바스크립트 코드가 작성되어 있어

html 코드와 자바스크립트 코드가 섞여 있는 방식


2. internal 방식

- html 파일안에 자바스크립트가 있는 방식

- inline 방식과는 다르게 html 코드내의 자바스크립트 

코드가 있지 않음 (분리 되어 있음)


3. external 방식

- 자바스크립트의 양이 많은 경우 자바스크립트 코드 부분을

외부 파일로 저장하여 작성하는 방식

- <script src="경로"> </script> 태그를 이용하여 내용을

호출하여 사용함






## inline 방식 ##

-> html 코드와 자바스크립트 코드가 섞여 있는 방식


ex) inline 방식


<script>

        function helloBtn(){

            alert("안녕");

        }

</script>

    

<button onclick="javascript:alert('Hello')">클릭</button>

<button onclick="helloBtn();">클릭2</button>



## internal 방식 ##

-> 자바스크립트 코드를 html코드 내부에 작성하지만

html코드와 분리되어 있는 방식



ex)


<script>

    window.onload = function(){

    document.getElementById("Btn").onclick= function(){

            alert("Hello");

        }

    }

</script>

    

<button id="Btn">클릭</button>



## external 방식 ##

-> 외부에 별도의 자바스크립트 소스파일 (*.js)을 작성하고 html에서

호출하는 방식

-> <script src="경로.js"></script>를 사용하여 불러옴

-> 자바스크립트 코드가 너무 길거나 혹은 공통적으로 사용하는 기능

들은 external을 사용함



ex)


# JS1.jsp 파일 내용 #


window.onload = function(){

document.getElementById("Btn").onclick= function(){

alert("Hello");

}

}



# text.html 파일 내용 #


 <script src="../JS/JS1.js">

  </script>


3. external 방식

<button id="Btn">클릭</button>



@ 자바스크립트 실행 방식

-> 웹 브라우저에 내장되어 있는 자바스크립트 parser가 소스 코드를

 한 줄 씩 읽고 해석한다는 점에서 인터프리터 방식으로 소스를 

해석하기 때문에 전체를 해석하고 처리하는 컴파일 언어와는 차이가 있음



※ 컴파일 방식 : 코드 전체를 컴파일 후 처리 하는 방식

- 컴파일 속도가 느리지만 실행 속도는 빠름

(별도의 컴파일 시간이 필요함)


※ 인터프리터 방식 : 코드를 한 줄 한 줄 읽고 처리하는 방식

- 코드를 한줄씩 처리 하기 때문에 한줄씩은 빠르지만

전체적인 코드는 처리는 느림





@ 데이터 출력 방법


## document.write(내용); ##

-> 브라우저 화면상의 값을 출력함



ex)


<script>

    function myfunc(){

        document.write("<H1>클릭하였습니다</H1>");

        document.write("<button onclick='myfunc();'>클릭하세요</button>");

    }

</script>


document.write() 예제 <br>


<button onclick="myfunc();">클릭하세요</button>




## window.alert(내용); ##

-> 메시지창을 이용하여 내용을 출력하는 메소드

-> window 라는 코드는 생략 가능함 

- alert 메소드는 window라는 객체 안에 포함된 메소드임



ex) 


<script>

function myfunc(){

alert("클릭하였습니다.");

}

</script>


<button onclick="myfunc();">클릭 </button>





## innerHTML ##

-> 태그 엘리먼트의 내용(태그와 태그 사이의 값)을 변경하여 출력함



ex)


<script>

    function gender(value){

        var span1 = document.getElementById("span1");

        

        if(value==1){

            span1.innerHTML="남성";

        }else{

            span1.innerHTML="여성";

        }

    }

    </script>  

성별 : <span id="span1">

    <button onclick="gender(1);">남성</button>

    <button onclick="gender(2);">여성</button>

    </span>



@ 데이터 입력 방법

-> 자바스크립트 내장객체인 window 객체가 제공하는 

confirm(), prompt() 메소드를 사용하여 입력 값을 받을 수 있음


## window.confirm() ##

-> 어떤 질문에 대해 "예/아니오"의 결과를 얻을 때 사용

-> 대화창에 메시지와 확인, 취소 버튼 표시

-> 리턴 값 : 확인 (true), 취소 (false)



사용법

var 변수명 = [window.]confirm("질문내용");



ex)


    <script>

        function del(){

          var result = window.confirm("정말 탈퇴하시겠습니까?");

            if(result==true){

              alert("탈퇴했습니다... 잘가...")  ;

            } else{

                alert("그래.. 넌 영원한 우리의 호구")  ;

            } 

        

        }

    </script>

<button onclick="del();">회원탈퇴</button>



## window.prompt() ##

-> 텍스트 필드와 확인/취소 버튼이 있는 대화창

-> 리턴 값 : 입력한 메시지 내용



사용법


var 변수명 = [window.]prompt("메시지");







@ 자바스크립의 기본 문법


## 자바스크립트 주석 ##

// : 한 줄 주석

/* ~ */ : 범위 주석




## 변수 선언 ##

변수 종류 : 멤버 변수와 지역 변수

멤버 변수 : 전역변수라고도 하며, 기본적으로 window 객체의 멤버변수,

변수의 대한 자료형을 선언하지 않음




형식 설명

변수명 = 값; window.변수명 또는 this.변수명과 같은 의미

변수 선언시 변수명 앞에 var를 붙이지 않으면

전역 변수로 간주함


var 변수명 = 값; 변수 선언시 변수명 앞에 var를 붙이면 지역 변수

(함수 안에서 var를 붙이면 지역변수)

(함수 밖에서 var붙이면 생성하면 전역변수)



즉,

1. 함수 밖에서 var를 붙이거나 붙이지 않아도 전역 변수

2. 함수 안에서는 var를 붙이면 지역변수, 붙이지 않으면 전역 변수


※ window 객체는 해당 브라우저 창을 이야기 한다고 보면 됨

※ 모든 전역에 선언된 자바스크립트 객체, 함수, 변수는 자동으로

window 객체의 멤버가 됨









자바 스크립트

변수 :


전역변수(멤버변수)

1. var라는 데이터형을 붙이지 않았을 때

2. var를 붙여도 메소드 안에서 만들어지지 않았을 때


지역변수

1. var라는 데이터형을 붙이면서 메소드 안에서 만들어 질 때





## 변수 이름 명명 규칙 ##

-> 영어 대/소문자, 숫자, _(언더바), $사용 가능

-> 첫글자 숫자 사용 불가

-> 공백을 포함한 특수문자 사용 불가

-> 이름에 의미있는 단어의 조합을 권장

(변수명을 a,b,c 등등 단어가 아닌 알파벳 1글자 형태로

만들지 마세요..)

-> 예약어를 이름으로 사용 불가

-> 두 단어 이상 결합시 낙타 표기법 권장

-> 한글 이름 사용 가능

-> 생성자 함수의 이름은 항상 대문자로 시작

-> 변수, 인스턴스, 함수, 메소드 이름은 항상 소문자로 시작





## 문자열 (String) ##

-> " " , ' ' 로 묶여 있는 리터럴값 (상수)

-> 내장객체로 String 객체 / 기본적인 메소드가 존재함


toUpperCase() : 모든 문자를 대문자로 변환

toLowerCase() : 모든 문자를 소문자로 변환

length : 글자 개수 조회용 멤버변수

indexOf() : 시작부터 가장 먼저 찾는 문자열의 위치를 리턴

lastIndexOf() : 끝에서 부터 가장 먼저 찾는 문자열의 위치를 리턴

※ indexOf, lastIndexOf도 인덱스는 0번째 부터 시작하여 계산


charAt() : 찾는 위치의 문자 리턴

substring() : 값을 일부분만 리턴

split() : 토큰 문자로 분리한 문자열 배열 리턴





## 숫자 (number) ##

-> 정수형 숫자와 부동소수점 숫자로 구분

-> 내장 객체로 Math 객체 제공, 기본 메소드 존재


Math.abs() : 절대값 리턴

Math.random() : 임의의 난수 발생 리턴 (소수점)

Math.round() : 소수점에 대해 반올림 처리 후 리턴

Math.floor() : 부동소수점 숫자를 정수로 리턴 (소수점 자리 버림)

Math.ceil() : 소수점 자리에서 무조건 올림



## 기타 자료형 ##

-> 논리값 (Boolean) : true, false 값

ex) Boolean(10<5); 사용시

Boolean에 의해 false값이 리턴 됨


-> 객체 (Object) : new로 선언된 사용자 객체와 자바스크립트 내장 객체

-> undefined : 변수명이나 함수명으로 선언되지 않은 식별자 일때

-> 함수(function): 함수(메소드)를 가지는 자료형


 

## 형 변환 ##


1. 숫자 -> 문자열 

-> 숫자와 문자를 + 연산하게 되면 문자가 우선되어 숫자를 문자로

변환함

-> 강제 형변환 : String() 함수 이용


ex)


<style>

    div{

        border:1px solid red;

        height:300px;

        width:400px;

        

    }

</style>

    

<script>

    function test(){

        var test1 = 7+7;        //14

        var test2 = 7+"7";      //77

        var test3 = "7"+7;      //77

        var test4 = "7"+"7";    //77

        var test5 = 7+7+"7";    //147

        var test6 = 7+"7"+7;    //777

        var test7 = "7"+7+7;    //777

        var test8 = "7"+(7+7);  //714

        

        var p1 = document.getElementById("p1");

        p1.innerHTML += "결과1 : "+test1 +"<br>";

        p1.innerHTML += "결과2 : "+test2 +"<br>";

        p1.innerHTML += "결과3 : "+test3 +"<br>";

        p1.innerHTML += "결과4 : "+test4 +"<br>";

        p1.innerHTML += "결과5 : "+test5 +"<br>";

        p1.innerHTML += "결과6 : "+test6 +"<br>";

        p1.innerHTML += "결과7 : "+test7 +"<br>";

        p1.innerHTML += "결과8 : "+test8 +"<br>";

        

    }

</script>

<div>

    <p id="p1"></p>

</div>

<button onclick="test();">클릭</button>





2. 문자열 -> 숫자

-> 숫자, 문자 + 이외의 사칙 연산시 숫자가 우선되어 문자를 숫자로 변환

-> 강제 형변환 : Number(), parseInt(), parseFloat() 함수 이용



ex)


<style>

    div{

        border:1px solid red;

        height:300px;

        width:400px;

        

    }

</style>

    

<script>

    function test(){

        var su1 = document.getElementById("su1").value;

        

        var su2 = document.getElementById("su2").value;

        

        document.getElementById("result").innerHTML = parseInt(su1)+parseInt(su2);

       

        

    }

</script>

<div>

    <input type="text" id="su1" size="3"/> + 

    <input type="text" id="su2" size="3"/> = <span id="result">?</span>

</div>

<button onclick="test();">계산</button>













※ 갑자기 등장하는 innerHTML과 value의 차이!

-> innerHTML은 시작태그와 끝태그 사이에 있는 문자열 공간을 의미

-> value는 태그안에 있는 속성을 의미함


ex) 

-> 'Hello'라는 문자열은 현재 innerHTML에 있는 문자열

<p>Hello</p>


ex)

-> 'World'라는 문자열은 현재 value에 있는 문자열

<p value="World">Hello</p>



그렇다면? <input type="text"/> 태그에서 사용자가 입력하는 값은

어디에 들어 있는 것일까?

정답 : value 입니다.


input 태그는 시작태그와 끝태그가 없습니다.! innerHTML 공간은 

없다는 의미가 됩니다. 


ex)


<style>

    div{

        border:1px solid red;

        height:300px;

        width:400px;

        

    }

</style>

    

<script>

    function test(){


        alert(document.getElementById("input1").innserHTML);

        

    }

</script>

<div>

    <input type="text" id="input1"/>

</div>

<button onclick="test();">계산</button>





## 연산자 종류 ##


최우선 연산자 : (), {}, .

단항 연산자 : ++, --, +(양수), - (음수)

산술 연산자 : +, -, *, /, %

관계 연산자 : >, <, >=, <=, ==, !=,===, !==

논리 연산자 : &&, ||

대입 연산자 : =

복합대입 연산자 : +=, -=, *=, /=, %=

삼항 연산자 : ?:;


※ 연산자 우선순위는 최우선 > 단항 > 산술 > 관계 > 논리 > 삼항 > 대입






@ 제어문 

## 조건문 ##

-> if, if~else, else if, switch, 짧은 조건문(||,&&)


## 반복문 ##

-> for, while, do~while, for in문


## 분기문 ##

-> continue, break



※ 기존 Java에서 사용한 제어문 문법과 동일함



## 짧은 조건문 (||, &&) ##


-> ||는 거짓이면 실행

-> &&는 참이면 실행


하는 조건문


기존 ||(OR) 와 &&(AND) 의 동작 방식을 이용하여 만든 조건문

-> OR 연산자는 앞의 조건이 참이면 뒤의 조건을 볼 필요가 없으므로

뒤의 구문이 작동하지 않음 (안보기 때문에!!)

- 하지만 앞의 조건이 거짓이면 뒤에 조건을 봐야 하므로 

뒤에 코드가 실행이 되는 원리


-> AND 연산자는 앞의 조건이 참이고, 뒤에 조건도 참이여야 하므로

참일때만 뒤에 조건을 보게 되어 실행됨

- 만약 앞의 조건이 거짓이면 뒤에것을 볼필요가 없으므로 

뒤에 코드가 실행되지 않는 원리






@ 배열

-> 다양한 타입의 데이터를 보관하는 변수의 모음

- 자바, C언어 등은 같은 데이터 타입을 보관하는 변수의

모음이 배열이지만! 자바스크립트에서는 var 타입으로 

처리하기 때문에 다양한 타입의 데이터를 보관하는 변수의

모음이라고 할 수 있음

-> '[ ]'(대괄호)를 통해 생성과 초기화를 동시에 처리함

-> 자료형 지정이 없어 모든 자료형(숫자,문자열,함수,Boolean,undefined,객체)이 데이터로써 저장 가능함


var 변수명 = [값1(숫자), 값2(문자), 값3(객체), ... 등등 ];




@ 배열 선언

-> new 연산자와 Array 객체를 통한 배열을 선언 가능함

-> 배열 크기를 정하지 않고 선언 / 배열 크기를 정하는 선언



# 배열의 크기를 정하지 않은 배열 선언 #

var 변수명 = new Array();


# 배열의 크기를 정하는 배열 선언 #

var 변수명 = new Array(개수);



ex)


var a = new Array(1,2,3);

var b = [1,2,3];

var c = new Array();


c.push(1);

c.push(2);

c.push(3);


※ 배열을 선언하는 방법은 위에 코드처럼 3가지가 있음

※ var c = new Array()로 선언시 배열의 길이는 0으로 되지만

데이터가 들어올때마다 자동으로 1개씩 늘어남 (동적 처리가 됨)





@ 배열에 값 대입

-> 값을 입력시에 index 번호를 활용

-> 번호 범위 : 0~(지정한 크기 -1)   -> 자바와 같음




var arr = new Array(3);

arr[0] = 123;

arr[1] = 456;

arr[2] = 789;






@ Array 객체 함수

-> Array(배열)도 하나의 객체이기 때문에 배열에서 활용할 수 있는

메소드들이 있음



배열명.indexOf('값') : 배열에서 요소가 위치한 인덱스 리턴

배열명.concat(배열명) : 두 개 또는 세 개의 배열을 결합 함

배열명.join() : 배열을 결합하고 문자열로 반환

배열명.reverse() : 배열의 순서를 뒤집는다

배열명.sort() : 배열을 내림차순 또는 오름차순으로 정렬

-> sort는 문자열을 정리하는 함수

-> 숫자가 있어도 암시적으로 문자열로 변경되어 처리함

배열명.push('값') : 배열의 맨 뒤에 요소 추가

배열명.pop() : 배열의 맨 뒤에 요소 제거

배열명.shift() : 배열에서 첫번째 요소 제거

배열명.unshift('값') : 배열의 앞에 새로운 요소 추가

배열명.toString() : 배열을 문자열로 반환




## indexOf ## 

-> 문자열을 입력하여 처음으로 나오는 위치를 반환


ex)



<style>

    div{border:1px solid red;

        width:300px; height:100px;}

</style>

    

<script>

    function test(){

        var fruits = ['바나나','딸기','복숭아','수박'];

        var fruit = document.getElementById("fruit");

        var index = fruits.indexOf(fruit.value);

        

        if(index>=0){

            alert("배열의 " + index+"번째에 존재합니다.");

        }else{

            alert("입력하신 과일은 존재하지 않습니다.");

        }

        

    }

</script>

    

    

<div>

    좋아하는 과일을 입력하세요 <br>

    바나나 / 딸기 / 복숭아 / 수박 

    <input type="text" id="fruit"/>

</div>

    


<button onclick="test();">확인</button>




## 배열명.concat ##

-> 여러 배열들을 결합할 때 사용하는 함수


ex)


<style>

    div{border:1px solid red;

        width:300px; height:100px;}

</style>

    

<script>

    function test(){

        var arr1 = ['사과','딸기','바나나'];

        var arr2 = ['복숭아','키위'];

        var arr3 = [10,20,30];

        var arr4 = [true,false];

        

        var array = arr1.concat(arr2,arr3,arr4);

        

        console.log(array);

        

    }

</script>

    

<button onclick="test();">확인</button>







## 배열명.join() ##

-> 배열을 결합하고 문자열로 반환

-> join 함수 안에 있는 것을 구분자로 사용하여 결합함



ex)


<script>

    function test(){

        var arr1 = ['사과','딸기','바나나'];

        var arr2 = ['복숭아','키위'];

        var arr3 = [10,20,30];

        var arr4 = [true,false];

        

        var array = arr1.concat(arr2,arr3,arr4);

        var str= array.join(',');


        console.log(array);

        console.log(str);

        

    }

</script>

    

<button onclick="test();">확인</button>





## 배열명.reverse() ##

-> 배열의 순서를 뒤집는 메소드



ex)


<script>

    function test(){

        var arr = [1,2,3,4,5,6,7,8,9];

        arr.reverse();

        console.log(arr);


        

    }

</script>

    

<button onclick="test();">확인</button>



## 배열명.sort() ##

-> 순서를 정렬할때 사용하는 메소드 (오름차순, 내림차순)



ex)


<script>

    function test(){

        var arr = [5,4,6,2,3,8,1,9,7];

        arr.sort(sortDESC);

        console.log(arr);

    }

    function sortASC(a,b) //오름 차순

    {

        return a-b;//a가 더 크다면?

                    // 두 수를 교환해라

    }

    function sortDESC(a,b) //내림 차순

    {

        return b-a;

    }

</script>

    

<button onclick="test();">확인</button>



## 배열명.push('값') 와 배열명.pop() ##

 -> 데이터 삽입과 데이터 추출


ex)


    

<script>

    function test(){

       var arr = ['조다연','구혜연','정소라'];

        

        arr.push('김종규');

        arr.push('변지영');

        arr.push('송지훈');

        arr.push('박수진');

        arr.pop();

        console.log(arr);

        

    }

    

</script>

    

<button onclick="test();">확인</button>




## 배열명.shift() 와 배열명.unshift('값') ##

-> 배열에서 첫번째 요소를 제거 혹은 앞에 새로운 요소 추가



ex)


<script>

    function test(){

       var arr = ['조다연','구혜연','정소라'];

        

        arr.unshift('김종규');

        arr.unshift('변지영');

        arr.unshift('송지훈');

        arr.unshift('박수진');

       

        arr.shift();

        console.log(arr);

        

    }

    

</script>

    

<button onclick="test();">확인</button>



## 배열명.toString() ## 

-> 배열의 요소들을 문자열로 변환


ex)


<script>

    function test(){

       var arr = ['조다연','구혜연','정소라'];

        

       

        console.log(arr.toString());

        

    }

    

</script>

    

<button onclick="test();">확인</button>








@ 함수

-> 소스코드의 집합으로 메소드, 모듈, 기능, 프로시져 등을 말함

-> 자바스크립트에서는 function도 하나의 자료형임

-> 함수는 인자/매개변수, 리턴값을 가질 수 있음


@ 함수 선언

-> 반환 값 선언 없이 function 키워드만 이용하여 사용함

-> function 키워드에 함수명을 작성하여 사용하는 방법 (선언적 함수)

-> function에 함수명을 작성하지 않고 변수에 대입하는 방법

(익명 함수)

-> 스스로 동작하는 함수 (익명함수)

- 이벤트 처리시 사용




## 선언적 함수 ##

-> 함수 이름이 있는 함수



# 형식 #

function 함수명([매개변수]){

처리로직

[return 돌려줄 값;]

}



1. 매개변수도 없고, 인자값도 없는 함수


매개변수 : 함수(메소드) 호출시 넘겨지는 값(인자값)을 저장하는 변수

인자값 : 함수(메소드) 호출시 넘겨지는 값


<script>

function test1(){

alert("버튼 클릭 하였습니다.");

}

</script>


<button onclick="test1();">버튼 클릭1 </button>



유연하다는게 매개변수가 없는데도 값을 넘길 수 있다.


ex)

    <script>

    function test(){//매개변수

        alert("호출");

    }

    </script>

    

    

    <button onclick="test(100);">확인</button>//인자값

    


2. 매개변수는 없지만, 인자값이 있는 함수(메소드)

 -> 매개변수는 없어도 메소드가 인자값을 받아서 처리 가능함

 -> 즉, 자동으로 arguments 라는 배열이 생성되어 사용이 가능함


ex)

  <script>

    function test(){

        alert("호출");

        alert(arguments[0]);

         alert(arguments[1]);

         alert(arguments[2]);

         alert(arguments[3]);

    }

    </script>

    

    

    <button onclick="test(100,200,300,400);">확인</button>

    


3. 매개변수는 있지만, 인자값이 없는 함수

 -> 자바스크립트의 메소드는 매개변수가 있어도 인자값을 넘기지 않고 호출이 가능함 (유연합니다......)



ex)


<script>

    function test(data1){

        alert("호출됨");

    }

</script>

  

<button onclick="test();">확인</button>






4. 매개변수도 있고, 인자값도 있는 함수


<script>

    function test(data1){

        alert(data1);

    }

</script>

  

<button onclick="test(100);">확인</button>




5. 함수의 리턴 처리



ex)


<script>

    function test(){

        var input = document.getElementsByTagName("input");

        var result1 = add(input[0].value,input[1].value);

        var result2 = sub(input[0].value,input[1].value);

        var result3 = multi(input[0].value,input[1].value);

        var result4 = div(input[0].value,input[1].value);

        

        document.getElementById("p1").innerHTML = 

            "더한 결과 : " + result1 + "<br>" +

            "뺀   결과 : " + result2 + "<br>" +

            "곱한 결과 : " + result3 + "<br>" +

            "나눈 결과 : " + result4 + "<br>";

       

    }

    function add(su1,su2){

        return su1+su2;

    }

    function sub(su1,su2){

        return su1-su2;

    }

    function multi(su1,su2){

        return su1*su2;

    }

    function div(su1,su2){

        return su1/su2;

    }

    

</script>

  

첫번째 수 : <input type="text" size="3"><br>

두번째 수 : <input type="text" size="3"><br>

<button onclick="test();">결과 확인</button>

<p id="p1">

</p>


@ 익명 함수 : 변수에 함수를 넣어 작성하는 방법

-> 기존 선언적 함수는 만든 함수를 메모리에 바로 올려 놓기 때문에 

코드 순서와 상관없이 호출이 가능함

-> 하지만 변수에 담기는 익명함수는 함수 선언 이후에만 사용이 가능함


# 형식 #


var func = function([매개변수]){

처리 로직

[return 돌려줄 값;]

}




ex)

 <style>

    div{border:1px solid red;

        width:300px; height:100px;}

</style>

    

<script>

    var test = function (){

        alert("호출");

    }

    var test2 = function(){

        alert("호출2");

    }

    

    var test3 = test; //변수에 담아서 쓰는 방식이다.

    

    var arr = [test,test2];

    console.log(arr);

    

</script>


<button onclick="test();">클릭</button>


    

ex)

<script>

  

    test1(); //호출 가능

    test2(); //호출 불가

    

    function test1(){

        alert("test1 메소드 입니다.");

    }

     var test2 = function(){

        alert("test2 메소드 입니다.");

    }

    // 선언적 함수는 페이지 로딩시 선언된 함수를 

    // 가장 먼저 처리하기 때문에 언제라도 호출 가능함

     

    // 익명 함수는 만들어지는 시점 이후부터 사용이 가능함

    

</script>




## 익명함수 : 스스로 동작하는 함수 (호출 없이 바로 실행, 1회용) ##


(function(){

처리 로직;

})();


-> 스스로 실행되기 때문에 리턴 값을 넘길 수 없음



ex)



    <script>

    

    //익명함수

    (function(){

        alert("호출되었습니다.");    

    })();

        

        

    </script>