function align_mouse_position(div) {
  var obj = document.getElementById(div);
  obj.style.pixelLeft = window.event.clientX;
  obj.style.pixelTop = window.event.clientY;
  obj.style.display = "block";
}


function div_close(div) {
  var obj = document.getElementById(div);
  obj.style.display = "none";

해당 div style속성은 아래와 같이 되어있어야 한다.

style="position:absolute; display:none;"

 

.hide() 메서드

diplay 스타일 프로퍼티의 값을 display:inline에서 display:none으로 바꾼다.

none으로 변경되기 전의 display 프로퍼티 값(일반적으로 block또는 inline)을 기억한다.

.show() 메서드

display:none이 적용되기 전의 display값이 무엇이었든 숨김 바로 전의 상태로 복구한다.

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

iframe  (0) 2013.08.26
새로고침 종류  (0) 2013.05.30
워터마크 구현  (0) 2013.01.24
복사 방지, 소스보기 막는 소스  (0) 2013.01.23
체크박스 전체선택 전체 해제  (0) 2013.01.23
 

iframe

Programming/Javascript | 2013. 8. 26. 23:34
Posted by 오요미

프레임과 인라인 프레임

frame 요소는 한때 가장 많이 사용하던 HTML 요소 중 하나였지만 지금은 접근성과 사용성의 문제로 거의 사용하지 않습니다. 하지만 mash up 사이트를 위해 다른 사이트의 콘텐트를 포함할때 iframe(인라인 프레임)요소를 사용하기도 합니다.

frame 대신 iframe 요소를 사용하는 이유는 iframe요소가 하나의 마크업 문서의 일부로 포함되기 때문입니다. 반면 frame 요소는 완전히 다른 하나의 문서의 형태로 브라우저에 포함되고 또한 frame 요소 안에 있는 링크를 통해 새로운 페이지를 frame 내부로 불러올 수도 있습니다. 즉, iframe은 CSS를 통해 위치 등을 조절할 수 있지만 frame은 요소 자체의 여러가지 속성값을 사용해서 위치 등을 결정합니다.


-- 현재 페이지를 최상단에 유지함으로서 하이재킹을 방지하고 페이지가 항상 브라우저 자체에 있도록 만든다.

if(top.location != self.location) {

top.location.replace(self.location);

}

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

마우스 위치에서 div를 보여주는 예제  (0) 2013.09.06
새로고침 종류  (0) 2013.05.30
워터마크 구현  (0) 2013.01.24
복사 방지, 소스보기 막는 소스  (0) 2013.01.23
체크박스 전체선택 전체 해제  (0) 2013.01.23
 

새로고침 종류

Programming/Javascript | 2013. 5. 30. 00:00
Posted by 오요미

location.reload();        //새로고침

top.document.프레임이름.location!.reload();        //프레임 새로고침

top.document.location!.reload();            //프레임 전체 새로고침

opener.location!.reload();                    //부모창 새로 고침


자바로 자동 새로고침

<script type="text/javascript">

setTimeout("history.go(0);", 10);

</script>


펌 : http://blog.naver.com/xers1?Redirect=Log&logNo=140148442821

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

마우스 위치에서 div를 보여주는 예제  (0) 2013.09.06
iframe  (0) 2013.08.26
워터마크 구현  (0) 2013.01.24
복사 방지, 소스보기 막는 소스  (0) 2013.01.23
체크박스 전체선택 전체 해제  (0) 2013.01.23
 

워터마크 구현

Programming/Javascript | 2013. 1. 24. 00:06
Posted by 오요미

<!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>워터 마트 구현</title>

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

//초기값인 상태라면 텍스트박스 값 지우기 : 워터마크 지우기

function clearField(field) {

if(field.value == field.defaultValue){

field.value = '';

}

}

//아무것도 입력되지 않았다면, 초기값으로 다시 지정 : 아이디/비밀번호

function checkField(field) {

if(field.value == ''){

field.value == field.defaultValue;

}

}

</script>

</head>

<body>

아이디 : <input type="text" value="아이디" onfocus="clearField(this)" onblur="checkField(this);"/><br />

비밀번호 : <input type="password" value="비밀번호" onfocus="clearField(this)" onblur="checkField(this);"/><br />

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

</body>

</html>

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

iframe  (0) 2013.08.26
새로고침 종류  (0) 2013.05.30
복사 방지, 소스보기 막는 소스  (0) 2013.01.23
체크박스 전체선택 전체 해제  (0) 2013.01.23
주문자와 배송지 정보 같게 설정하는 checkbox  (0) 2013.01.22
 

복사 방지, 소스보기 막는 소스

Programming/Javascript | 2013. 1. 23. 23:51
Posted by 오요미

<!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>마우스 오른쪽 버튼 사용금지</title>

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

//[1] 마우스 오른쪽 버튼 사용 금지

function clickMouse()

{

if((event.button ==2 ) || (event.button == 3)){

return (false);

}

}


function clickKey(){

if((event.shiftKey) && (event.keyCode == 121)){

return false;

}

}


function noAction(){

return false;

}


document.onmousedown = clickMouse;

document.onkeydown = clickKey;

document.oncontextmenu = noAction;

document.ondragstart = noAction;

document.onselectstart = noAction;

</script>

</head>

<body>


본문에 있는 데이터를 기본적으로 읽어가지 못하도록 방지하는 스크립트


</body>

</html>

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

새로고침 종류  (0) 2013.05.30
워터마크 구현  (0) 2013.01.24
체크박스 전체선택 전체 해제  (0) 2013.01.23
주문자와 배송지 정보 같게 설정하는 checkbox  (0) 2013.01.22
웹브라우저 관련 예제들  (0) 2013.01.22
 

체크박스 전체선택 전체 해제

Programming/Javascript | 2013. 1. 23. 23:32
Posted by 오요미

<!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>체크박스 전체 선택 전체 해제</title>

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

var checkflag = "false";

//false이면 전체선택, true이면 전체해제.

function check(field) {

if(checkflag == "false"){

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

field[i].checked = true; //모든 체크박스를 체크한다.

}

checkflag = "true";

return "전체 해제";

//버튼객체의 value속성으로 반환(this.value.list로 넘겨져 왓기 때문)

}

else {

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

field[i].checked = false; //모든 체크박스를 해제한다.

}

checkflag = "false";

return "전체 선택";

//버튼 객체의 value 속성으로 반환(this.value로 넘겨져 왔기 때문)

}

}//end function

</script>

</head>

<body>

<form name="MyForm" action="" method="post">

<input type="checkbox" name="list" id="list" value="1" />C#<br/>

<input type="checkbox" name="list" id="list" value="1" />JAVA<br/>

<input type="button" value="전체선택" onclick="this.value=check(this.form.list);"/>

</form>

</body>

</html>




 


폼을 동기화해주는 스크립트


<html>

<head>

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

<title>폼을 동기화시키는 스크립트</title>

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

var name = "";

var email = false;

function InitValue(frm){

name = frm.txtName.value;

email = frm.chkmail.checked;

}

function ShipToBill(frm){

if(frm.copy.checked){

InitValue(frm); //현재 텍스트박스와 체크박스의 상태유지

document.getElementById("txtDeliveryName").value = document.getElementById("txtName").value;

frm.chkDeliveryEmail.checked = email;

}else{ //체크박스를 해제한다면

frm.txtDeliveryName.value=name;

frm.chkDeliveryEmail.checked = email; //폼객체 활용

}

</script>

</head>

<body>

<form id="MyForm" action="" method="post">

주문자 정보<br/>

이름 : <input type="text" id="txtName" /><br />

<input type="checkbox" id="chkmail" name="chkmail"/> 배송정보를 메일로 받음


<hr />

<input type="checkbox" id="copy" onclick="ShipToBill(this.form);"/>주문자 정보와 배송지 정보가 같음

<hr />


배송지 정보<br/>

이름 : <input type="text" id="txtDeliveryName" /><br />

<input type="checkbox" id="chkDeliveryEmail" name="chkDeliveryEmail"/> 배송정보를 메일로 받음

</form>

</body>

</html>


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

복사 방지, 소스보기 막는 소스  (0) 2013.01.23
체크박스 전체선택 전체 해제  (0) 2013.01.23
웹브라우저 관련 예제들  (0) 2013.01.22
자바스크립트 내장 객체  (0) 2013.01.04
스타일객체  (0) 2013.01.03
 

웹브라우저 관련 예제들

Programming/Javascript | 2013. 1. 22. 00:46
Posted by 오요미

즐겨찾기 구성하기


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

<hr>

<input type="button" value="즐겨찾기 내보내기" onclick="window.external.ImportExportFavorites(false, '');">

<hr>

<input type="button" value="즐겨찾기 가져오기" onclick="window.external.ImportExportFavorites(true, '');">

<hr>

<input type="button" value="즐겨찾기 추가하기" 

onclick="window.external.AddFavorite('http://www.dotnetkorea.com/', '닷넷코리아');">

<hr>


인쇄창 띄우기


<html>

<head>

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

<title>Insert title here</title>

</head>

<body>

<a href = "#" onclick="if(window.print){window.print();}">

현재 페이지를 인쇄하시겠습니까?

</a>

</body>

</html>


시작페이지로 설정


<html>

<head>

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

<title>Insert title here</title>

</head>

<body>

<a href="#" onclick="this.style.behavior='url(#default#homepage)';

this.setHomePage('http://www.dotnetkorea.com/');">

이 홈페이지를 시작 페이지로 설정하시겠습니까?

</a>

</body>

</html>


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

체크박스 전체선택 전체 해제  (0) 2013.01.23
주문자와 배송지 정보 같게 설정하는 checkbox  (0) 2013.01.22
자바스크립트 내장 객체  (0) 2013.01.04
스타일객체  (0) 2013.01.03
onload이벤트  (0) 2013.01.01
 

자바스크립트 내장 객체

Programming/Javascript | 2013. 1. 4. 00:39
Posted by 오요미

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

<pre>

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

//[1] 날짜 관련 객체

// Date객체의 인스턴스 생성

var today = new Date();

// Date객체의 주요 속성/메서드 출력

document.write(today.getYear() + "년<br />");

document.write((today.getMonth()+1) + "월<br />"); //0월 부터 시작 Day는 요일

document.write(today.getDate() + "일<br />");

document.write(today.getHours() + "시<br />");

document.write(today.getMinutes() + "분<br />");

document.write(today.getSeconds() + "초<br />");

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

//[2] 수학 관련 객체

document.write("2의 10승 : "+Math.pow(2,10)+"<br />");

document.write("3, 5, 1, 4 중 가장 큰 값 : "+Math.max(3,5,1,4) + "<br />");

document.write("3, 4, 1, 4 중 가장 작은 값 : "+Math.min(3,5,1,4)+ "<br />");

document.write("3.4를 소수 첫째 자리에서 반올림 : "+Math.round(3.4)+ "<br />");

document.write("3.5를 소수 첫째 자리에서 반올림 : "+Math.round(3.5)+ "<br />");

//[3] 문자열 관련 객체/함수

var s = " Abc Def Fed Cba";

with(document){                                          //with안에 있는 document객체는 document를 생략할 수 있다.

writeln(s.length); //길이 writeln 자동으로 줄바꿈<pre></pre>안에 있을 경우

writeln(s.toLocaleLowerCase());         //소문자 : LCase()

writeln(s.toUpperCase());         //대문자 : UCase()

writeln(s.charAt(5));         //5번째 인덱스에 위치하는 문자

writeln(s.indexOf("e"));         //"e"문자열의 인덱스(위치)

writeln(s.lastIndexOf("e"));                 //뒤에서 "e"문자열 검색

writeln(s.substring(5,8));         //5번째 인덱스에서 8-1번째

writeln(s.substr(5, 3));                 //5번째 인덱스 부터 3자 반환

var ss = s.split(" ");         //공백을 기준으로 배열값으로 반환

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

writeln(ss[i]);

}

}

</script>

</pre>

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

주문자와 배송지 정보 같게 설정하는 checkbox  (0) 2013.01.22
웹브라우저 관련 예제들  (0) 2013.01.22
스타일객체  (0) 2013.01.03
onload이벤트  (0) 2013.01.01
이벤트 정리  (0) 2013.01.01
 

스타일객체

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

<!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>스타일 객체 : style</title>

<style type="text/css">

#Panel1{

background-color:Yellow; width:"200px"; height:"200px";

}

</style>

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

function ChangeColor(obj) {

obj.style.backgroundColor='';

}

function ChangeValue(obj){

obj.value = ""; //html레벨 : 각각의 속성을 지정

obj.size = 40;

obj.style.border = "1px solid red"; //css레벨 : style객체로 접근

}

function ChangeTextBox(){

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

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

}

</script>

</head>

<body>

<div id="Panel1" onmouseover="this.style.backgroundColor='silver';" onmouseout="ChangeColor(this);">

<!-- 노랑->은색->노랑 (backgroundColor='' 속성에 아무값을 주지 않으면 처음값으로 돌아가게 된다.) -->

<!-- background-color -> backgroundColor 스크립트에 속성을 적을 때 이렇게 표기한다. -->

<input type="text" id="txt" value="아이디" onfocus="ChangeValue(this)"/>

<!-- 워터마크기능 -->

<input type="button" value="텍스트박스 모양 변경" onclick="ChangeTextBox();" />

</div>

</body>

</html>

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

웹브라우저 관련 예제들  (0) 2013.01.22
자바스크립트 내장 객체  (0) 2013.01.04
onload이벤트  (0) 2013.01.01
이벤트 정리  (0) 2013.01.01
폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
 
블로그 이미지

오요미

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

카테고리

분류 전체보기 (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)