onload이벤트

Programming/Javascript | 2013. 1. 1. 19:59
Posted by 오요미


인터프리터에 의해 웹브라우저는 html의 처음부터 해석을 하게 된다. 하지만 스크립트 코드가 head에 있기 때문에 body태그에 스타일 적용을 하지 못한다. 이를 위해 onload이벤트를 사용한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>window.onload 이벤트</title>

<script type="text/javascript">

//[1]페이지 로드시 함수로 지정한 자바스크립트 실행 

/* window.onload = pageLoad;

function pageLoad() {

changeColor();

changeSize();

}; */

//[2] 익명 함수 : anonymous function 스타일

window.onload = function() {

changeColor();

changeSize();

};

function changeColor(){

document.getElementById("myDiv").style.backgroundColor="red";

}

function chageSize() {

document.getElementById("myDiv").style.height="100px";

}

</script>

</head>

<body>

<div id="myDiv" style="height:50px;">

페이지가 로드 되고 난 후 배경색이 yellow로 변경됩니다.

</div>

<script type="text/javascript">

document.getElementById("myDiv").style.backgroundColor="yellow";

</script>

</body>

</html>

'Programming > Javascript' 카테고리의 다른 글

자바스크립트 내장 객체  (0) 2013.01.04
스타일객체  (0) 2013.01.03
이벤트 정리  (0) 2013.01.01
폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
 

이벤트 정리

Programming/Javascript | 2013. 1. 1. 19:05
Posted by 오요미

이벤트란? 

사용자로 부터 특정 조작이 행해졌을 때 컴퓨터로부터 발생되는 일종의 신호


자바스트립트의 이벤트 목록

  • blur : 입력 포커스가 폼의 구성요소에 있다가 옮겨진 경우에 발생
  • click : 링크나 폼의 구성원을 선택한 경우에 발생
  • change : 입력 포커스가 폼 내의 필드에 주어진 경우 발생
  • focus : 폼의 구성원의 필드에 입력을 하기 위해 선택하는 경우 발생
  • load : 페이지를 브라우저로 읽을 때 발생하는 이벤트
  • mouseover : 마우스 포인터를 하이퍼 텍스트 링크 위로 옮길 때 발생
  • select : 폼의 구성원의 필드를 선택한 경우에 발생하는 이벤트
  • submit : 폼을 등록한 경우에 발생하는 이벤트(폼과 함께 제공되는 submit과 같은 입력이 끝났음을 알리는 버튼을 누르면 발생)
  • unload : 지금 읽고 있는 페이지 외의 다른 페이지를 읽고자 할 경우 발생
  • dblclick : 해당 객체를 더블클릭 했을 경우
  • mouseout : 객체 안에 마우스 포인터가 머무르다 벗어나게 된 경우 발생

이벤트 핸들러란?(on~)
  • 특정 이벤트와 이에 대한 조치 내용을 담은 코드를 연결하는 역할
  • 자바 스크립트에서는 주로 사용자 입력과 관계된 form과 anchor에 대해서 이벤트 핸들러를 제공

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

</head>

<body 

onload="window.alert('어서오세요.');"

onunload="alert('안녕히 가세요');"

>

<input type="text" onfocus="this.style.backgroundColor='yellow';" 

onblur="this.style.backgroundColor='white';"

/>

<input type="text" onkeypress="alert('타이핑 하셨군요.');"

onchange="document.bgColor='silver';"

onmousemove="this.style.backgrounColor='yellow';"

/>

<table border="1" width="100%">

<tr>

<td onclick="alert('클릭하셨군요');">클릭</td>

<td onmouseover="alert('오버하셨군요.');">마우스오버</td>

</tr>

<tr>

<td ondblclick="alert('더블 클릭하셨군요');">더블클릭</td>

<td onmouseout="alert('밖으로 이동하셨군요.');">마우스아웃</td>

</tr>

</table>

</body>

</html>

'Programming > Javascript' 카테고리의 다른 글

스타일객체  (0) 2013.01.03
onload이벤트  (0) 2013.01.01
폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
 

폼 유효성 검사2(submit&button 비교)

Programming/Javascript | 2013. 1. 1. 17:49
Posted by 오요미

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

<script language="javascript" type="text/javascript">

function CheckForm() {

var uid = document.getElementById("txtUserID");

if(uid.value.length<3 || uid.value.length >12){

alert("아이디를 3자 이상 12자 이하로 입력하세요");

uid.focus();

uid.select();

return false;

}else{

return true; //현재 다음 이벤트 실행:submit

}

}

</script>

</head>

<body>

<!-- 확인버튼 눌렀을 때 아이디가 3자 이상 12자 이상인지 검사 -->

<form id="MyForm" action="test.html" method="post" onsubmit="return CheckForm();">

아이디 : <input type="text" id="txtUserID" name="txtUserID"/>

<input type="submit" value="확인" />

</form>

</body>

</html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

<script language="javascript" type="text/javascript">

function CheckForm(){

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

if(txt.value == ""){

alert("아이디를 입력하시오.");

txt.focus();

}else{

document.MyForm.action = "test.html";

document.MyForm.submit();

}

}

</script>

</head>

<body>

<form name="MyForm">

아이디 : <input type="text" name="txt" id="txt"/>

<input type="button" value="확인" onclick="CheckForm();"/>

</form>

</body>

</html>

'Programming > Javascript' 카테고리의 다른 글

onload이벤트  (0) 2013.01.01
이벤트 정리  (0) 2013.01.01
폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
location 객체 속성&메서드  (0) 2012.12.30
 

폼 유효성 검사(아이디, 비밀번호)

Programming/Javascript | 2013. 1. 1. 16:26
Posted by 오요미

<html>

<head>

<meta name="viewport" content="width=device-width;" charset="utf-8" />

<title>폼 유효성 검사 : 아이디 및 암호 체크</title>

<style type="text/css">

div, td, input{color:Navy; font-size:9pt; font-family:"맑은 고딕" Verdana 굴림;}

</style>

<script language="javascript" type="text/javascript">

//자바스크립트는 html의 form, button, textbox등 들을 하나의 객체로 보고 id와 name으로 접근이 가능하다.

function CheckForm(){

//[1] 아이디 텍스트 박스에 접근해서 txtUserID 변수로 객체 담기

var txtUserID = window.document.FrmLogin.txtUserID;

if(txtUserID.value == ""){         //아이디가 입력되지 않았다면

alert("아이디를 입력하시오.");

return false; //진행하지 말고 대기(submit이벤트 중지)

}

//[2] 암호체크

if(document.FrmLogin.txtPassword.value=""){

alert("암호를 입력하시오.");;

return false;

}

}

</script>

</head>

<body>

<!-- form은 post방식을 사용하도록 권장: 데이터가 URL에 노출되므로..-->

<form id="FrmLogin" name="FrmLogin" action="sun/defalt." method="post" onsubmit="return CheckForm();">

<!-- submit이라는 이벤트를 잡을려면 onsubmit이라는 이벤트 핸들러를 사용해야하며 "return 함수명"으로 적는다. -->

<div align="center">

<table border="1" width="300">

<tr>

<td align="right">아이디:</td>

<td><input type="text" id="txtUserID" name="txtUserID" /></td>

<!-- id와 name속성은 될수 있도록 같게 써준다. -->

</tr>

<tr>

<td align="right">암호:</td>

<td><input type="Password" id="txtPassword" name="txtPassword" /></td>

</tr>

<tr>

<td colspan="2" align="center">

<input type="submit" value="로그인" />

<input type="reset" value="취소" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>


submit을 button으로 바꾸고 조금 심화시켜 만들어 봅시다~

 <script language="javascript" type="text/javascript">

function CheckForm(){

var txtUserID = document.FrmLogin.txtUserID;

if((txtUserID.value == "") || txtUserID.value.length<3 || txtUserID.value.length>12){

alert("아이디를 입력하시오.");

document.FrmLogin.txtUserID.focus();         //해당 객체에 커서 포커스:커서가도록

//document.FrmLogin.txtUserID.select(); //해당 객체 텍스트 블록 영역 선택

document.getElementById("txtUserID").select();

return false;

}

else{

document.FrmLogin.action = "./asp/Deault.aspx"; //action속성을 동적으로 변경

document.FrmLogin.submit(); //폼의 내용을 action 속성 URL로 전송

}

}

</script>
 <form id="FrmLogin" name="FrmLogin" action="" method="post">
 <input type="button" value="로그인" onclick="CheckForm();"/>


'Programming > Javascript' 카테고리의 다른 글

이벤트 정리  (0) 2013.01.01
폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
location 객체 속성&메서드  (0) 2012.12.30
document 객체 속성&메서드  (0) 2012.12.30
 

history 객체 메서드&속성

Programming/Javascript | 2013. 1. 1. 14:11
Posted by 오요미

<meta name="viewport" content = "width=device-width;" charset = "utf-8" />

<script language = "javascript" type="text/javascript">

//뒤로가기 앞으로가기 정보가 있어야 적용가능

GoBack = function() {history.back();}

//뒤로가기

GoForward = function() {history.forward();}

//앞으로가기

function GoBack1(){ history.go(-1);}

//-1수가 커질 수록 전전 단계로 증가

</script>


<input type="button" value="뒤로" onclick="GoBack();" /><br />

<input type="button" value="뒤로" onclick="history.go(-1);" /><br />


<a href = "#" onclick = "GoForward();" >앞으로</a><br />

<a href="javascript:GoBack1()">한단계 뒤로</a>

'Programming > Javascript' 카테고리의 다른 글

폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
location 객체 속성&메서드  (0) 2012.12.30
document 객체 속성&메서드  (0) 2012.12.30
window 객체 속성&메서드  (0) 2012.12.30
 

location 객체 속성&메서드

Programming/Javascript | 2012. 12. 30. 23:09
Posted by 오요미

<meta name = "viewport" content = "width=device-width;" charset = "utf-8" />

<script language = "javascript" type="text/javascript">

//[1] href속성 : 지정된 url로 이동

GoGo = function(){

location.href = "http://www.naver.com";

}

//[2] reload()메서드 : 현재 페이지 새로고침

function ReFresh(){

location.reload();

return true; //true를 반환하면, 버튼의 기능을 계속 실행 그렇지 않으면 이벤트 멈춤

}


//[3] 응용 : 3초 후에 지정된 URL로 이동하는 함수

function GoUrl(url){

window.setTimeout("location.href='" +url+"'", 3000);

}


</script>


<input type="button" value = "사이트로 이동" onclick = "GoGo();" />

<input type="button" value = "새로고침" onmouseover = "return ReFresh();" />

<input type = "button" value = "naver" onclick = "GoUrl('http://www.naver.com')" />

'Programming > Javascript' 카테고리의 다른 글

폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
document 객체 속성&메서드  (0) 2012.12.30
window 객체 속성&메서드  (0) 2012.12.30
성적처리 프로그램  (0) 2012.12.30
 

document 객체 속성&메서드

Programming/Javascript | 2012. 12. 30. 22:55
Posted by 오요미

<meta name="viewport" content = "width=device-width;" charset = "utf-8" />

<script language = "javascript" type="text/javascript">

//[1] write()메서드 : 문서 영역에 문자열/데이터  출력

document.write("<hr />");


//[2] title속성 : 현재 문서의 <title>태그의 내용을 출력 또는 설정

document.title = "현재 예제는 document 객체 학습 중 ...";

document.write("현재 문서의 제목 : " +document.title+ "<br />");


//[3] lastModified 속성 : 현재 HTML문서가 마지막에 저장된 시간

document.write("현재 문서의 마지막 저장 시간 : " + document.lastModified+ "<br />");


//[4] 글꼴 색상 변경 관련 간단한 속성

ChangeColor = function(){                 //익명 메서드

document.bgColor = "silver"; //백그라운드 컬러

document.fgColor = "red"; //폰트컬러

}

</script>


<input type="button" value = "색상 변경" onclick="ChangeColor();" />

'Programming > Javascript' 카테고리의 다른 글

history 객체 메서드&속성  (0) 2013.01.01
location 객체 속성&메서드  (0) 2012.12.30
window 객체 속성&메서드  (0) 2012.12.30
성적처리 프로그램  (0) 2012.12.30
selection sort(선택정렬) 알고리즘  (0) 2012.12.30
 

window 객체 속성&메서드

Programming/Javascript | 2012. 12. 30. 22:18
Posted by 오요미

<meta name="viewport" content="width=device-width;" charset="utf-8" />

<script language = "javascript" type="text/javascript">

//[1]alert() : 경고 대화상자

window.alert("제일 많이 사용하는 웹브라우저 내장 객체");


//[2] confirm() : 확인 대화 상자

if(window.confirm("정말로 삭제하시겠습니까?")){

alert("삭제 되었습니다.");

}else{

alert("취소 되었습니다.");

}


//[3] open() : 새로운 창 열기(여러 옵션 알아보기)

function Myweb(){

window.open("http://www.naver.com", "naver", "width=500, height=500");

}


속성 

속성값 

설명 

 directories

yes, no 

디렉토리 메뉴(익스프롤러만 지원) 
location   주소(url)

 menubar

 디렉토리 메뉴

 scrollbars

  스크롤바
 status  상태바
 toolbar  툴바 메뉴(뒤로, 앞으로, 중지 등)
 copyhistory  히스토리 복사 정보

 resizable

  브라우저 크기 조절
 Left, top    브라우저의 위치정보
 width/height  픽셀 수

 창의 너비/높이 설정


//[5] setTimeout() : 시간차 주기(크롬에선 안되나?)

window.setTimeout("alert('꽝!!!')", 3000);

//3초 후에 첫번째 매개 변수 명령어 실행


//[6] status 속성 : 상태표시줄(상태바)에 문자열 출력

function ShowMessage(){

window.status = "안녕하세요.";

//window.defaultStatus = "만나서 반갑습니다.";

}

ShowMessage(); //호출

</script>


<input type="button" value = "사이트 열기" onclick="Myweb();" />

<!--[4] close() : 현재 창 닫기-->

<input type="button" value = "현재 창 닫기" onclick="window.close();" />

'Programming > Javascript' 카테고리의 다른 글

location 객체 속성&메서드  (0) 2012.12.30
document 객체 속성&메서드  (0) 2012.12.30
성적처리 프로그램  (0) 2012.12.30
selection sort(선택정렬) 알고리즘  (0) 2012.12.30
최대값, 최소값 알고리즘  (0) 2012.12.30
 

성적처리 프로그램

Programming/Javascript | 2012. 12. 30. 21:42
Posted by 오요미

<meta name="viewport" content="width=device-width;" charset="utf-8" />

<script language = "javascript" type = "text/javascript">

//3명의 국어점수를 입력받아서 총점과 평균을 구하는 프로그램


//input

//[1]첫번째 모양

/*

var kor = new Array(3);

kor[0] = 100;

kor[1] = 90;

kor[2] = 80;

*/

//[2]두번째 모양

//var kor = new Array(100, 90, 80);

//[3]세번째 모양

var kor = [100, 90, 85, 100, 90];

var total = 0;

var avg = 0.0;


//process

//total = kor[0] + kor[1] + kor[2]; 

for(var i=0; i<kor.length; i++){

total += kor[i];

}

avg = total/parseFloat(kor.length);


//output

document.write("총점 : "+total+"<br />");

document.write("평균 : "+avg + "<br />");

</script>

'Programming > Javascript' 카테고리의 다른 글

document 객체 속성&메서드  (0) 2012.12.30
window 객체 속성&메서드  (0) 2012.12.30
selection sort(선택정렬) 알고리즘  (0) 2012.12.30
최대값, 최소값 알고리즘  (0) 2012.12.30
contine문, break문  (0) 2012.12.20
 

selection sort(선택정렬) 알고리즘

Programming/Javascript | 2012. 12. 30. 21:40
Posted by 오요미

<meta name="viewport" content="width=device-width;" charset="utf-8" />

<script language = "javascript" type="text/javascript">

//정렬 : 데이터를 작은것에서 큰것순으로 정렬(오름차순) 또는 그반대(내림차순)

//오름차순 : 1,2,3 순으로 출력

//내림차순 : C, B, A순으로 출력


//Input

var sort = [33, 22, 11, 55, 44];

var temp = 0;

//Process : selection sort(선택정렬) 알고리즘

for(var i=0; i<sort.length-1; i++){

for(var j=i; j<sort.length; j++){

if(sort[i]>sort[j]){

temp = sort[i];

sort[i] = sort[j];

sort[j] = temp;

}

}

}

//Output

for(var i=0; i<sort.length; i++){

document.write(sort[i] + " ");

}

document.write("<br />");

</script>


'Programming > Javascript' 카테고리의 다른 글

window 객체 속성&메서드  (0) 2012.12.30
성적처리 프로그램  (0) 2012.12.30
최대값, 최소값 알고리즘  (0) 2012.12.30
contine문, break문  (0) 2012.12.20
for문, while문, do while문 비교  (0) 2012.12.20
 
블로그 이미지

오요미

공부할 수 있는 순간을 감사하며 공부하라.

카테고리

분류 전체보기 (121)
Electronics (1)
Programming (72)
Ajax (0)
Jquery (6)
PHP (3)
Javascript (36)
DOM (0)
HTML (2)
CSS (1)
Linux (5)
postgreSQL (5)
Regex (0)
기타 (7)
보안 (1)
Python (0)
Matlab (1)
OrCad (1)
LTSpice (4)
Machine learning (0)
Deep learning (0)
Culturallife (30)
English (11)
취업 (1)
대학원 (4)
Life (1)

티스토리툴바