본문 바로가기
CLASS/HTLML,CSS,JS

#5-2 / Js(함수)

by eungSe__ 2024. 4. 24.

 Js 파일 연동 및 함수 활용 

 

⚡ js파일 로드
<script src="./js14.js?v=1"></script>

 

⚡함수 

-함수명은 동일한 이름 x

-함수

 

<함수종류>

- 일반함수 : 호출형태
-  이벤트 핸들링 함수 : 이벤트를 발생 (ex- 로그인 버튼)
-  이벤트 버블링 함수 : 하위 > 상위로 전달하는 형태 (인자값 전달)
-  버블링 함수 : (ex- 전체선택 클릭시 하위 체크박스 모두선택)
-  이벤트 캡쳐링 합수 : 상위 > 하위로 전달하는 형태 (ex- body태그에서 -> div태그로 출력)
-  캡쳐링 함수 : ?
-  return 함수 : 부모 함수에서 자식 함수를 호출과 동시에 결과값을 return받는 형태

function abc(){ // abc 함수를 설정
    console.log('test1212121'); //출력값
}

abc(); //abc함수를 즉시 실행


/*-----------------------------------------------*/

//변수값 할당
var a = 10;
var b = 20;

function plus(aa,bb){
    //aa라는 인자명에 a값 10 , bb라는 인자명에 b값 20을 받게됨
    //인자명은 가상
    var sum = aa+bb;
    console.log(sum);
}

plus(a,b); //함수호출 및 두개의 값 보냄
//plus(); 이렇게 하면 NAN뜸 (: Not a Number)

/*-----------------------------------------------*/

var id = "hong";
var pw = "a1234";

//memebr 함수의 인자값 갯수에 맞춰서 전달
function member(mid,mpw){
    console.log(mid)
    console.log(mpw)
}

//인자값이 3개일 경우에 받는 함수에 인자명이없을 경우 data lose
member(id,pw,32);


/*-----------------------------------------------*/

//aaa함수 -> bbb함수로 값을 전달하려 출력

function aaa(){
	//변수값을 생성 및 데이터값
    var data1 = 200;
    var data2 = 100;
    bbb(data1,data2); //bbb함수를 호출
}

function bbb(d1,d2){ //aaa함수에서 호출된 인자값을 받은 후 처리
    var sum = d1*d2;
    console.log(sum)
}

aaa(); //최초 함수

 

⚡ return 함수

- return 선언은 최종 결과값을 자신을 호출한 함수로 재전달
  -> 받을 때 변수에 담아 받아야함
- return은 기본으로 값은 한개입니다. 단, 배열화 하였을 경우 여러개의 값을 보낼 수 있다.
(return a,b 할 경우 b만 보내짐)
- 마지막에 1번만 씀
 
function aaa(){
    var adata = "hong";
    var message = bbb(adata); //return 값을 변수로 받음
    console.log(message)
}

function bbb(id){
    var call;
    if(id == "hong"){
        call = "ok"
    }else{
        call = "no"
    }
    return call; 
}

aaa(); //ok

 

⚡ 외부 스크립트와의 통신

문제 )
ccc함수에 2개의 인자값을 전달 (10,20)
ccc는 값을 두개 받은 후 
반복문을 통해서 인자값 범위의 모든 숫자의 합계를 다시 return

aaa함수에 전달된 합계를 bbb함수에서 
짝수값인지 홀수값인지 최종 출력하는 코드 제작
 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>외부 js를 활용한 통신 데이터</title>

    <script src="./data17.js?v=1"></script> <!---외부 스크립트는 꼭 상단에 작성할것-->
    <script src="./js17.js?v=1"></script>
</head>
<body>
    
</body>
</html>

 
<!-- 외부 스크립트 (data.js) -->

function ccc(c1,c2){
    var i;
    var sum =0;
    for(i=c1; i<=c2; i++){
        sum+=i;
    }
    
    return sum;
}

🔽 🔽 🔽 🔽 🔽 🔽 인자값을 받아 계산한 후 return하면 aaa에서 var re = ccc()로 받음 🔽 🔽 🔽 🔽 🔽 🔽

<-----------짝수,홀수를 판별하는 내 스크립트 내 함수------------>

function aaa(){
    var re = ccc(10,11);
    bbb(re);
}

function bbb(odd){
    var call;
    if(odd%2 ==0){
        call = "짝수";
    }else{
        call = "홀수";
    }
    console.log(call);
}

aaa();

 

 

'CLASS > HTLML,CSS,JS' 카테고리의 다른 글

#6-2 / HTML + Javascript(video,input value(로그인))  (0) 2024.04.25
#6-1 / 배열,랜덤함수  (0) 2024.04.25
#5-1 / Js(반복문,선택문)  (0) 2024.04.24
#4 / Js.1  (0) 2024.04.23
#3  (0) 2024.04.22

관련글

티스토리툴바