국비지원학원/HTML,JavaScript,jQ

75일차-Javascript_함수(function)

초코맛 2019. 2. 14. 02:02
반응형
*JavaScript
*function함수(자바로 치면 method-자바아닌 다른언어에서는 함수라고 많이 부른다.)
  • 일을, 업무를 구분하여 작성할 때
  • 코드의 중복을 줄일 수 있다.
  • 호출하여 사용.(사용자의 동작에 의해)
  • <<만들수도 제공받아 사용할 수도 있다.>>
  • 제작사 함수(w3c에서 만듦), 사용자 정의 함수(개발자가 생성)
  • *작성법(반환형이 없다->정의하지 않는다_아니 없진않는데 무조건 있는데? 데이터형때문에 정의ㄴ?)
    • function 함수명(매개변수,,,=>무조건 전역형태로 만들어야 한다, var를 붙이지 않는다,붙이면 Error){
    •  
    •  }
    • 호출)
    • <script> 영역안에서 호출
      • 함수명(값,,,);
    • <body>에서 사용자의 동작에 의한 호출.
      • 속성이란걸 사용.(클릭시, 마우스가 올라갔을때,,,,)
      • (속성임)onXxx~="함수명(값,,,)"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     //함수정의 호출: function 함수명(매개변수,,,) {    }
     //매개변수 없는 함수
     function test1(){
           alert("test1 호출");
     }//test1 =>고정일
     //호출 : 함수명();
     //test1();
     
     //매개변수 있는 함수 : 매개변수는 전역변수 형태★ var  name적지않는다.
     function test2(name,age){
           alert("입력 이름 : "+name+", 나이: "+age);
     }//test2
     //test2("김",20);
     
     //반환값(반환형은 없다)있는 함수 : 함수의 가장 마지막줄에  return
     //반환형은 정의하지 않는다.(못한다! 데이터형을 개발자가  지정하여 쓸수 없기 때문에!)
     //return을 정의하지는 않지만 모든함수에는 return이 정의되어  있다.
     function test3(){
           var msg="오늘은 월요일 입니다.";
           return msg;
     }//test3
     //반환값이 있는 함수는 호출시 결과값을 받는다
     var returnValue=test3();
     alert(returnValue);
     
</script>
</head>
<body>
</body>
</html>



*사용자의 동작에 의한 함수 호출

동작
속성
주 적용 Tag 사용 예.
클릭
onclick(권장)
onClick
모든태그(이미지도 테이블도 모두 ok) ->가장많이 사용.
<input type="button" onClick="함수명()"/>
브라우저 실행
onload <<<:순차적으로 읽어들이기 때문에 먼저실행되는 script에서 body부분의 요소들을 알 수 없는데, onload 를 통해 요소를 알 수 있게 된다.>>
body태그에만 사용가능?
<body onload="함수명()">
-body에 정의된 태그에 접근할 수 있다.
-body가 loading되어 태그정보를 적재한 후 실행.

 
키가 눌릴 때
onkeydown
-키보드의 입력을 받을 수 있는 태그
<input type="text,password">
<textarea>
<<<다른태그들은 써봣자 먹히지 않는다.>>>
키가 올라올 때
onkeyup
-키보드의 입력을 받을 수 있는 태그
<input type="text,password">
<textarea>
-눌린키의 정보를 얻을 수 있다.(down은 모름)
마우스가 올라갔을 때
onmouseover
모든태그에 사용 가능.
<td>도, 이미지도 ~다
<img onmouseover="함수명()"
rollover???
마우스가 빠져나갔을 때
 onmouseout
모든태그에 사용 가능.
값이 변경되었을 때
onchange
<select onchange="함수명()">
-다른 옵션이 선택되었을 때
<input type="text,password">
-커서가 들어갔을때의 값과 커서가 빠져 나갔을때의 값이 다르다면 동작
커서가 빠져 나갔을 때
onblur
커서를 가질수 있는 모든 Tag
<input type="text, password">
<textarea>
더블 클릭
ondblclick
모든 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     //사용자 동작에 의한 함수 호출
     function test(){
           //onload로 호출되면 <body>내의 정보가 loading 된 후  실행되기 때문에 tag의 정보를 script영역에서 얻을 수 있다.
           
           //script영역에서 직접 호출하면 <body>가 로딩되기 전에  호출되므로 tag의 정보를 script영역에서 얻을 수 없다.
           //var val=document.getElementById("temp");
           alert("test!!!!"/* + val.value */);
     }//test
     
     //test();//<<차이가 없어 보이나..alert가 먼저 출력되면서  코드출력을 멈춰 이미지가 나중에 출력->실행 순서에 대한 차이가 있다.
</script>
</head>
<!-- <body onload="test()"> -->
<body>
<!-- <input type="text" id="temp" value="월요일"/> -->
<label>클릭</label>
<input type="button"value="클릭" class="btn"  onclick="test()"/><br/>
<label>키가 눌릴 때</label>
<input type="text" class="inputBox"onkeydown="test()"/><br/>
<label>키가 올라올 때</label><!-- 키의 연속입력이 가능..계속누름?  -->
<input type="text" class="inputBox"onkeyup="test()"/><br/>
<label>마우스 포인터가 들어갈 때</label>
<img src="../common/images/img.png"style="border:2px solid #333"  onmouseover="test()"/><br/>
<label>마우스 포인터가 빠져나갈 때</label>
<img src="../common/images/img.png"style="border:2px solid #333"  onmouseout="test()"/><br/>
<label>값이 변경 될 때</label>
<!-- select의 onchange는 다른 옵션이 선택되면 변경되는것으로  간주한다. -->
<select onchange="test()">
     <option>어머님!</option>
     <option>예서</option>
     <option>멘탈이</option>
     <option>약한 아이입니다.</option>
</select>
<!-- input이나 textarea의  onchange는 커서가 들어갔을때의 값과  빠져나갔을 때의 값이 다를때 변경된 것으로 간주한다. -->
<input type="text" onchange="test()"/><br/>
<textarea style="width:400px;height:100px;"  onchange="test()"></textarea><br/>
<label>커서가 빠져 나갔을 때</label>
<input type="text" onblur="test()"/><br/>
<label>더블클릭 했을 떄</label>
<input type="button" value="더블 클릭"  ondblclick="test()"/><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     /* function lod(){ */
     window.onload=function(){
           ////////////////////무기명 함수로 이벤트  처리//////////////////////////////
           //var  btn=window.document.getElementById("btn").onclick=function(){
          window.document.getElementById("btn").onclick=function(){
           //이미지 태그를 얻기
           var img=document.getElementById("img");
           //이미지 태그의 src속성의 값을 변경한다.
           img.src="../common/images/img2.jpg";
           alert(btn);
           }//function
           
          document.getElementById("div").onmouseover=function(){
                //이미지 태그를 얻기
                var img=document.getElementById("img");
                //이미지 태그의 src속성의 값을 변경한다.
                img.src="../common/images/img2.jpg";
           document.getElementById("div").onmouseout=function(){
                //이미지 태그를 얻기
                var img=document.getElementById("img");
                //이미지 태그의 src속성의 값을 변경한다.
                img.src="../common/images/img.png";
           }//function
           ////////////////////무기명 함수로 이벤트  처리//////////////////////////////
           
           ////////////////////addEventListener로 이벤트  처리//////////////////////////////
          document.getElementById("btn1").addEventListener("click",chgImg);
          document.getElementById("name").addEventListener("click",setName);
          document.getElementById("addr").addEventListener("click",setAddr);
           ////////////////////addEventListener로 이벤트  처리//////////////////////////////
           }//onload=function
           
           function setName(){
                document.getElementById("div1").innerHTML="<strong>이름</strong>";
           }//setName
           function setAddr(){
                document.getElementById("div1").innerHTML="<marquee>서울시</marquee>";
           }//setAddr
           function chgImg(){
                document.getElementById("img").src="../common/images/img1_1.png";
           }//end chgImg
     }//function
     
/*   HTML :구조
     CSS :디자인
     JavaScript :이벤트처리, 유효성검증, 화면 일부분 변경. */
</script>
</head>
<body>  <!-- onload="lod()" 구조에만 집중할수 있게 지워줌...-->
     <input type="button" value="무기명 함수 클릭" class="btn"  id="btn"/><!-- name과 class,id는 다 다르게 쓰인다. -->
     <input type="button" value="addEventListener클릭"  class="btn" id="btn1"/><!-- name과 class,id는 다 다르게 쓰인다.  -->
     <div id="div" style="height:400px;">
           <img src="../common/images/img.png" id="img"/>
     </div>
     
     <input type="button" value="이름" class="btn" id="name"/>
     <input type="button" value="주소" class="btn" id="addr"/>
     <div id="div1" style="width:400px; height:150px; border:1px solid #333"></div>
</body>
</html>



*기명함수와 무기명 함수
  • 기명 함수 : 이름이 있는 함수
    • function 함수명(매개변수,,,){
    • }//업무를 구분하여 처리할 때
  • 무기명 함수 : 이름이 없는 함수 =>이름이 없어 부를수도 없다. 자동으로 호출되어야 할 때
    • 변수대입)
    • var 변수명=function(매개변수,,){
    • }//변수명으로 함수에 접근
    • 변수명(값,,);
    • 속성대입)
    • window.onload=function(){
    • }
    • 속성이 동작하면 코드가 동시에 실행되어져야 할 때.
    • 자동 호출 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     //무기명 함수 : 이름이 없는 함수
     //변수에 대입하는 경우
     //변수의 이름을 함수처럼 사용
     var func=function(){
           alert("무기명 함수");
     }//func
     
     //속성에 대입하여 사용하는 경우
     window.onload=function(){
           alert("윈도우가 로딩 되었음.");  
     }//function
     
</script>
</head>
<body>
<input type="button" value="클릭" onclick="func()"/>
</body>
</html>



*태그를 얻는 함수
  • name이름으로 얻기
    • <form>태그가 반드시 필요   <<//=>입력한 값을 백엔드로 값전달?하는 태그?>>
      • =>HTML Form Control의 값을 back-end로 전송할 때 사용.
    • 값의 유효성 검증할 때 많이 사용.
    • 문법)
      • window(생략가능).document.폼이름.컨트롤명  //이라 폼태그가 반드시 필요
  • Id아이디로 얻기
    •  form태그 없어도 얻을 수 있다. 
    • HTML특정 부분의 디자인을 변경할 때 많이 사용.(AJAX,JQuery에서 DOM으로 디자인 변경할 때), 값넘김 없이 접근..
    • 문법)
      • window(생략가능).document.getElementById("id명");
  • tag명 얻기
    • document.getElementByTagName("태그명");
    • <<웹은 이름이 같으면 배열로 처리되어 찾기 힘들어 잘 사용하지 않는다.>>
    • 같은 태그가 여럿존재하기 때문에 특정태그에 접근하기 어렵다.



*무기명 함수의 이벤트 처리
  • 태그하나를 얻어와서 태그하나에 이벤트를 처리
  • 이벤트처리 코드의 재사용성이 낮다.
  • 문법)
    • window.document.getElementById("id명").onclick과같은 이벤트 처리속성=function(){
    •                   =>태그를 얻는 과정                      =>이벤트 속성
      • 이벤트가 발생했을 때 처리할 코드
      • 개발자가 불러주는게 아니라 동작이 있으면 브라우저에서 처리된다.
      • web browser에는 JavaScript를 처리하기 위한 Engine(V8_compiler_현재처리하는것중 젤 빠르고 엔진이없으면 자바스크립트가 돌지 않는다.)이 들어간다.
    •  }
    •  
    • <input type="button" value="클릭" id="ID명"/>


*이벤트를 Listener에 등록하여 처리
  • 이벤트 처리 코드의 재사용성이 높아진다.
  • addEventListener함수 사용
  • 문법)
    • <script type="text/javascript"> //웹 어플리케이션 개발자(scriptor)가 만든다.
    • window.document.getElementById("id명").addEventListener("이벤트(on을 빼고 사용)", 함수명(함수명만! 괄호 쓰지않는다.);
    • function 함수명(){
      • 이벤트 처리 코드 정의
    • }

    • document.getElementById("id명").addEventListener("click", 함수명);
    •  </script>
    •  
    •  <body>//코더, 디자이너가 만든다.
    • <input type="text" id="id명"/>
    • </body>


*HTML Form Control의 값 얻기
  • name속성
    • ((이름이같다면 배열로 처리됨.))
    • <form>태그 필요
    • HTML의 형상은 항상 이래야 한다.
      • <form name="이름">   //라디오나 체크는 같을수 있는데, 배열로 처리
      •        <input type="text" name="유일이름">
      •        <input type="radio, checkbox">=>배열로 처리
      •        <select>=>배열로 처리
    • 이름이 유일한 객체의 값 얻기
      • <form name="frm">   
      •        <input type="text" name="name"> 
      •        <input type="text" name="addr">  
      •        <input type="button" value="클릭" id="btn" onclick="getValue()"> 

      • window.document.폼이름.컨트롤명.value
      •           <script type="text/javascript">
      •                window.onload=function(){
      •                      document.getElementById("btn").addEventListener("click",getValue);
      •                }
      • function getValue(){
      •         var name=document.frm.name.value ;
      •         var addr=document.frm.addr.value;
      •                           =>생략가능=>
      • var obj=dovument.frm;
      • var name=obj.name.value;
      • var addr=obj.addr.value;
      • //더 많이 쓰이는 방법. 폼태그의 이름변경이 한쪽에서만 변경되고 코드도 짧아지는 장점.

  • id속성(<form>태그가 필요 없음)
    • var name=document.getElementById("id명").value;
    • var addr=document.getElementById("id명").value;
    • <<값을 얻을때는 폼태그를 사용하게 된다.=>더 간단!!>>


*JavaScript 에서 HTML <body>로 출력
  1. 출력 대상 얻기
    • var divNode=document.getElementById("div tag id명");
    • //HTML Element==tag==XML node
  2. HTML생성
    • var output="<strong>ooo</strong>";
  3. 출력
    • divNode.innerHTML=output;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     window.onload=function(){
           //이벤트 등록
          document.getElementById("frm").addEventListener("click",getValue);
     }//function
     function getValue(){
           /* alert("dddd"); 잘 나오나 확인*/
           //폼태그의 이름속성을 사용하여 값 설정
           
           //1.form태그 얻기
           var obj=document.frm;
           //2.form태그의 하위컨트롤 값 얻기.
           var name=obj.name.value;
           var addr=obj.addr.value;
           var age=obj.age.value;
           //값을얻어 서버로 보내기도 하고 동적으로 바꾸어주기도  한다.
           
           //alert("이름 : "+name+"\n주소 : "+addr+"\n나이 :  "+age);
           //1.div얻기(출력 대상)
           var divNode=document.getElementById("output");
           //2.출력 내용 생성
           var output="이름 :<strong>"+name+"</strong><br/>나이  : "+age+"<br/>주소 : " +addr;
           //3.출력
           divNode.innerHTML=output
     }//getValue
     
     function idGetValue(){
           //form태그를 거치지 않고 id속성으로 태그를 찾아서 값  얻기
           var name=document.getElementById("name").value;
           var addr=document.getElementById("addr").value;
           var age=document.getElementById("age").value;
           
           alert("id속성으로 값 얻기 : "+name+"/"+addr+"/"+age);
     }//idGetValue
</script>
</head>
<body>
     <form name="frm">
           <label>이름</label>
           <input type="text" name="name" id="name"  class="inputBox"><br/>
           <label>주소</label>
           <input type="text" name="addr" id="addr"  class="inputBox"><br/>
           <label>나이</label>
           <input type="password" name="age" id="age"  class="inputBox"><br/>
           
           <input type="button" value="form 값 얻기" class="btn"  id="frm"><br/>
           <input type="button" value="id 값 얻기" class="btn"  id="id" onclick="idGetValue()"><br/>
           <input type="button" value="onclick 값 얻기"  class="btn" onclick="getValue()"><br/>
           <!-- onclick은 이벤트 등록이 안되어 있어도 누르면 뜬다?  -->
           
     </form>
     
     <div id="output"></div>
</body>
</html>






<<숙제>>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test01</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
function getValue(){
     var name=document.getElementById("name").value;//id속성으로  값을 가져오고
     var divNode=document.getElementById("output");
     var output="";
     /* var output="<h"+i+">"+name+"</h"+i+"><br/>"; */
     
     for(i=1;i<7;i++){
           output+="<h"+i+">"+name+"</h"+i+">";
     }//end for
     divNode.innerHTML=output;
           
}//getValue
</script>
</head>
<body>
     <div>
           <label>이름</label>
           <input type="text" id="name"/>
           <input type="button" value="확인"  onclick="getValue()"/><br/>
     </div>
     <div id="output"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test02</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
function getValue(){
     var  number=document.getElementById("number").value;//id속성으로 값을  가져오고
     var divNode=document.getElementById("output");
     var output="";
     
     if(number>=2&&number<=9){
     output+="<table border='1' id='gugudanTable'>";
           for(var i=1; i<10; i++){
           output+="<tr>";
           output+="<td align='center' width='50px'  onclick='popup("+number+","+i+")'>"+number+"*"+i+"</td>";
           output+="</tr>";
           }//end for
     output+="</table>";
     }else{
           alert("구구단은 2~9단 사이입니다.")
           output+="<marquee><img  src='../common/images/img2.jpg'/></marquee>"
     }
     divNode.innerHTML=output;
}//getValue
function popup(number, i){
     alert(number*i+"입니다.");
}
</script>
</head>
<body>
     <div>
           <label>구구단</label>
           <input type="text" id="number"/>
           <input type="button" value="입력"  onclick="getValue()"/>
     </div>
     <div id="output"> </div>
</body>
</html>

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

'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글

77일차-JavaScript_함수  (0) 2019.02.17
76일차-JavaScript_값  (0) 2019.02.15
74일차-JavaScript_제어문과 배열(2차원 배열)  (0) 2019.02.13
73일차-JavaScript  (0) 2019.02.12
72일차-JavaScript  (0) 2019.02.02

'국비지원학원/HTML,JavaScript,jQ'의 다른글

  • 현재글75일차-Javascript_함수(function)

관련글

티스토리툴바