자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트 <script src="my_script/myscripts.js"> 자바스크립트함수 - 자바의메서드와같은함수를작성하고이용할수있다. function myfunction(){ - 자바스크립트함수는 내에서다음과같이호출한다. myfunction(); 변수, 연산자 var global = 100; function myfunction(){ var local = 50; 자바스크립트의객체 - Date : 날짜와시간정보를담당한다. var today = new Date(); document.write(today+"<br/>"); document.write(today.getfullyear()+","+(today.getmonth()+1)+","+today.getday()+"<br/>"); document.write(today.gethours()+","+today.getminutes()+","+today.getseconds()+"<br/>"); var date = new Date(2015, 11, 5);// 월은 0 부터 11 까지 document.write(date+"<br/>"); - document : HTML 문서의 를담당한다. - window : 윈도우즈시스템을담당한다. 각종대화상자를띄울때사용한다. window.alert(" 이것은알림창입니다.");// 알림창은메세지를충력하는데사용합니다.
var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다."); var name = window.prompt(" 이름을입력합니다."); // 프람프트창은데이터를입력할수있습니다. var addr = window.prompt(" 주소를입력합니다."); var age = window.parseint(window.prompt(" 나이를입력합니다.")); document.write(name+"<br/>"); document.write(addr+"<br/>"); document.write(age+"<br/>"); - history : 웹브라우저의 history 정보를관리한다. history.go(-1);// 웹브라우저를이전페이지로되돌린다. - location : 현재브라우저의 URL 주소를관리한다. 이객체를사용해서페이지를바꿀수있다. location.href = index.jsp ;//index.jsp 로 URL 를변경한다. 제어문 - if 문 var answer = confirm(" 확인이나취소를누르세요."); if(answer == true){ document.write(" 확인을눌렀습니다."); else if(answer == false){ document.write(" 취소를눌렀습니다."); - switch... case var id = prompt(" 주민번호를입력하세요.(XXXXXX-XXXXXXX)"); var length = id.length; if( length!= 14 id.charat(6)!= '-'){ alert(" 잘못된주민번호입니다."); else { alert(" 정상적인주민번호입니다."); var genderpos = id.charat(7);//8 번째자리의문자획득 var gender = ""; switch(genderpos){ case '1': case '3': case '9': gender = " 남성 "; break; case '0': case '2': case '4': gender = " 여성 "; break; document.write(" 당신은 "+gender);
- for for(i = 1; i <= 9; i++){ - while while(i <= 9){ i = i + 1; - do... while var i = 1; do { i = i + 1; while(i <= 9); 이벤트처리 - 자바스크립트를사용하면버튼클릭에의해발생하는이벤트를처리할수있다. - 이벤트이름앞에 on 을붙여서해당이벤트가발생했을경우의처리방법을명시한다. - 다음은 누르세요 를마우스로클릭하면, myfunction() 자바스크립트함수를호출하는문장이다. <a href="#" onclick="myfunction()"> 누르세요 </a> - 다음은자바스크립트에서발생하는이벤트 Blur : 텍스트필드에서포커스 (Focus) 가다른곳으로이동할때발생 Focus : 텍스트필드에서포커스 (Focus) 를얻었을때발생 Click : 마우스를클릭했을때발생 Change : <select> 에서데이터가변경될때발생 Select : 텍스트필드에서글자들을블록으로선택했을때발생 Load : 에서사용하며페이지가로딩될때발생 Submit : Submit 버튼을마우스로클릭했을때발생 Reset : Reset 버튼을마우스로클릭했을때발생 Load 이벤트처리 function load_msg(){ alert(" 환영합니다."); <body onload="load_msg()">
Focus, Blur 이벤트 function get_focus(str){ alert(str.name + " 에커서가있습니다."); function lost_focus(str){ alert(str.name + " 에서커서가사라졌습니다."); <form name="my_form"> 이름 : <input type="text" name="name" onfocus="get_focus(this)" onblur="lost_focus(this)"/><br/> 주소 : <input type="text" name="addr" onfocus="get_focus(this)" onblur="lost_focus(this)"/><br/> Submit, Reset 이벤트 function check_form(){ alert(" 서버로데이터를전송합니다."); return true; //return false; 이면서버로전송되지않는다. function reset_form(){ alert(" 폼을리셋합니다."); <form action="getit.jsp" onsubmit="return check_form()" onreset="reset_form()"> Data : <input type="text" name="id"/><br/> <input type="submit" value=" OK "/> <input type="reset" value=" Cancel "/>
Select, Change, Click 이벤트 function select_view(){ var addr = my_form.addr.value; alert(" 입력한주소 : " + addr); function change_view(){ var hobby = my_form.hobby[my_form.hobby.selectedindex].value; alert(" 선택한취미 : " + hobby); function click_view(){ alert(" 버튼을클릭했습니다."); <form name="my_form"> 주소 : <input type="text" name="addr" onselect="select_view()"/><br/> 취미 : <select name="hobby" onchange="change_view()"> <option> 선택하세요.</option> <option value="fishing"> 낚시 </option> <option value="sing"> 노래부르기 </option> <option value="movie"> 영화보기 </option> </select><br/> 버튼클릭 : <input type="button" value=" 누르세요 " onclick="click_view()"/>