달력

022012  이전 다음

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  •  
  •  
  •  

'자바스크립트'에 해당되는 글 5건

  1. 2006/10/24 JavaScript - Event 객체
  2. 2006/08/04 자바스크립트로 로컬 파일 사이즈 알아내기 (2)
  3. 2006/06/30 JavaScript 내장 객체
  4. 2006/06/30 JavaScript - location 객체
  5. 2006/06/30 JavaScript - window 객체

JavaScript - Event 객체

HTML/CSS/JS 2006/10/24 10:44

자바스크립트 이벤트 .....................................................

아주 중요한 이벤트!!!
이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있다.

예를 들어 사용자가 마우스를 클릭할 것이다.... 이건 click 이벤트로 준비!
이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내야 다음 일을 할 수 있을 것이다. 고맙게도 click이 일어났다는 걸 자동으로 알 수 있으니 얼마나 고마운 일인가...

(Click, MouseOver, MouseOut, Submit...)

이벤트 핸들러란 ?

이러한 이벤트와 우리가 준비한 프로그램을 연결해 주는 구실을 한다
(onClick,onMouseOver,onMouseOut, onSubmit...)

* 그래서 우리가 할일은 이벤트가 일어났을 때 할 일을 준비하고
이벤트 핸들러에게 그 일을 하도록 연결해 두면 되는 것이다~~~


■ 이벤트의 종류와 의미 (이벤트핸들러는 이벤트에 on을 붙여 준다)

blur
포커스를 다른곳으로 옮길 경우
click링크나 폼의 구성원을 클릭할 때
change선택값을 바꿀 경우
focus포커스가 위치할 경우
mouseover마우스가 올라올 경우
mouseout마우스가 떠날 경우
mousedown마우스를 누를 경우
mousemove마우스를 움직일 경우
mouseup마우스를 눌렀다 놓을 경우
select 입력양식의 하나가 선택될 때
submit 폼을 전송하는 경우
load페이지,윈도우가 브라우져로 읽혀질 때
unload현재의 브라우저,윈도우를 떠날 때
error문서나 이미지에서 에러를 만났을 때
reset리셋 버튼이 눌렸을 때
dbclick더블클릭시
dragdrop마우스 누르고 움직일 경우
keydown키 입력시
keypress키 누를 때
keyup키를 누르고 놓았을 때
move윈도우나 프레임을 움직일 때
resize윈도우나 프레임 사이즈를 움직일 때


■ 메서드

blur()
입력 포커스를 다른 곳으로 이동시킴
click()마우스 버튼이 눌러진 것처럼 해줌
focus()입력 포커스를 준 것처럼 해줌
submit()폼의 submit 버튼을 누른 것처럼 해줌
select()메소드 폼의 특정 입력 필드를 선택함


■ 속성

event.keyCode누른 키의 ASCII 정수 값
event.x
문서 기준 누른 좌표의 left
event.y문서 기준 누른 좌표의 top
event.clientX문서 기준 누른 좌표의 left
event.clientY문서 기준 누른 좌표의 top
event.screenX콘테이너 기준 누른 좌표의 left
event.screenY콘테이너 기준 누른 좌표의 top


■ 브라우저 객체별 이벤트 핸들러

선택 목록(SELECT)
onBlur, onChange, onFocus
문자 필드(TEXT)onBlur, onChange, onFocus, onSelect
문자 영역(TEXTAREA) onBlur, onChange, onFocus, onSelect
버튼(BUTTON) onClick
체크박스(CHECKBOX)onClick
라디오 버튼(RADID)onClick
링크onClick, onMouseover
RESET 버튼(RESET)onClick
SUBMIT 버튼(BUTTON)onClick
DOCUMENTonLoad, onUnload
WINDOWonLoad, onUnload
폼(FORM)onSubmit
TAG Event, JavaScript, 자바스크립트
Posted by 상현넘™

댓글을 달아 주세요

자바스크립트로 로컬 파일 사이즈 알아내기

HTML/CSS/JS 2006/08/04 10:38
스크립트
<script type="text/javascript" language="javascript">
function getFileSize(filePath)
{
  var len = 0;
  if ( navigator.appName.indexOf("Netscape") != -1)
  {
     try {
        netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
     } catch(e) {
        alert("signed.applets.codebase_principal_support를 설정해주세요!\n"+e);
        return -1;
     }
     try {
        var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
        file.initWithPath ( filePath );
        len = file.fileSize;
     } catch(e) {
        alert("에러 발생:"+e);
     }
  }
  else if (navigator.appName.indexOf('Microsoft') != -1)
  {
     var img = new Image();
     img.dynsrc = filePath;
     len = img.fileSize;
  }
  return len;
}

function checkFile(obj)
{
  var len = getFileSize(obj.value);
  // 아래 빨간색 부분이 파일사이즈 지정해 주는 부분입니다.
  // 상황에 맞게 아래 부분을 수정해서 사용하시면 됩니다.
  if (len > 1024 * 1024)
  {
     alert("파일 크기는 1메가보다 작아야 합니다.");
  }
}
</script>


사용방법 예제
<form name="test">
<input type="file" name="file" onChange="checkFile(this);" />
</form>

작성 : 상현넘™ [SHBLITZ.NET]
TAG 로컬, 사이즈, 자바스크립트, 파일
Posted by 상현넘™

댓글을 달아 주세요

  1. 쿠컹  댓글주소 수정/삭제 댓글쓰기 2009/12/15 22:56

    음.....안되는것 같은데여...파폭은 에러 나고 익스8에서는는 dynsrc 를 찾을수 없다고 나옵니다..

    • 상현넘™  댓글주소 수정/삭제 2009/12/16 19:42

      이 글은 2006년에 작성된 글입니다.
      IE6 일때 동작하던 스크립트로..
      IE7에서부터 기능이 보안문제로 막혀버렸네요!!

JavaScript 내장 객체

HTML/CSS/JS 2006/06/30 11:25
■ Boolean 객체
메쏘드설명
toString()불린 값을 문자열 형태로 반환 (true 또는 false)
valueOf()지정한 객체의 값을 반환

■ String 객체
메쏘드설명
length문자열의 길이를 반환
anchor()문자열에 태그를 단 형태로 반환: 문자열
big()문자열에 태그를 단 형태로 반환: 문자열
blink()문자열에 태그를 단 형태로 반환: 문자열
bold()문자열에 태그를 단 형태로 반환: 문자열
charAt()지정한 인덱스에 있는 문자 반환
charCodeAt()지정한 인덱스 문자의 유니코드 반환
concat()두 문자열을 연결시킨 결과를 반환
fixed()문자열에 태그를 단 형태로 반환: 문자열
fontColor()문자열을 지정한 색상으로 반환: 문자열
fontSize()문자열을 지정한 폰트 크기로 반환: 4 ->문자열
fromCharCode()charCodeAt과 반대 역할. 지정한 유니코드의 문자열 반환
indexOf()지정한 문자가 처름 나타나는 인덱스 반환. 만일 나타나지 않으면 -1 반환.
italics()문자열에 태그를 단 형태로 반환: 문자열
lastIndexOf()indexOf와 비슷하지만 오른 쪽에서부터 찾기 시작
link()문자열에 링크를 지정하여 반환: 문자열
match()indexOf와 lastIndexOf와 비슷하지만 인덱스 대신 문자열 반환.
replace()특정 문자열을 새롭게 지정한 문장열로 대치
search()문자열이 지정한 문자를 포함하고 있으면 정수 값 반환, 그렇지 않으면 -1 반환
slice()지정한 문자 인덱스를 포함한 문자열 반환
small()문자열에 태그를 단 형태로 반환: 문자열
split()지정한 문자를 컴마(,)로 대치
strike()문자열에 태그를 단 형태로 반환: 문자열
sub()문자열에 태그를 단 형태로 반환: 문자열
substr()지정한 문자 반환. 예를 들어 substr(5, 3)은 5번째 문자로부터 3문자를 가지고 온다.
substring()지정한 문자 반환. 예를 들어 substring(5, 3)은 3번째와 5번째 사이에 있는 문자를 가지고 온다.
sup()문자열에 태그를 단 형태로 반환: 문자열
toLowerCase()문자열을 소문자 형태로 반환
toUpperCase()문자열을 대문자 형태로 반환

■ Array 객체
메쏘드설명
length배열에 있는 요소의 갯수를 반환
concat()두 배열을 연결시켜 하나의 배열로 반환
join()배열에 있는 모든 요소를 하나로 합쳐 하나의 문자열로 반환
reverse()배열의 내용을 뒤집어서 반환
slice()배열의 특정 부분을 반환
sort()정렬된 배열 반환

■ Date 객체
메쏘드설명
Date()Date 객체 반환
getDate()Date 객체의 날짜 반환 (1-31 사이의 값)
getDay()Date 객체의 요일에 해당하는 숫자 값 반환 (0-6 사이의 값. 0=일요일, 1=월요일, ...)
getMonth()Date 객체의 "월" 반환 (0-11 사이의 값. 0=1월, 1=2월, ...)
getFullYear()Date 객체의 연도 반환 (4자리 숫자)
getYear()Date 객체의 연도 반환 (낮은 브라우저에서는 두 자리수 연도 반환) getFullYear를 사용하는 것이 더 바람직함.
getHours()Date 객체의 시간 반환 (0-23 사이의 값)
getMinutes()Date 객체의 분 반환 (0-59 사이의 값)
getSeconds()Date 객체의 초 반환 (0-59 사이의 값)
getMilliseconds()Date 객체의 밀리세컨드 값 반환 (0-999 사이의 값)
getTime()1970.1.1 자정 이후의 밀리세컨드 값 반환
getTimezoneOffset()사용자 컴퓨터와 GMT 사이의 시간 차이 반환
getUTCDate()Date 객체의 날짜를 UTC 형태로 반환
getUTCDay()Date 객체의 요일 값을 UTC 형태로 반환
getUTCMonth()Date 객체의 월 값을 UTC 형태로 반환
getUTCFullYear()Date 객체의 년도를 UTC 형태로 반환
getUTCHourc()Date 객체의 시간을 UTC 형태로 반환
getUTCMinutes()Date 객체의 분을 UTC 형태로 반환
getUTCSeconds()Date 객체의 초를 UTC 형태로 반환
getUTCMilliseconds()Date 객체의 밀리세컨드를 UTC 형태로 반환
parse()1970년 1월 1일 자정 이후의 밀리세컨를 갖고 있는 문자열로된 데이트 값 반환
setDate()Date 객체에 날짜 설정 (1-31 사이의 값)
setFullYear()Date 객체에 연도 설정
setHours()Date 객체에 시간 설정 (0-23 사이의 값)
setMilliseconds()Date 객체에 밀리세컨드 설정 (0-999 사이의 값)
setMinutes()Date 객체에 분 설정 (0-59 사이의 값)
setMonth()Date 객체에 월 설정 (0-11사이의 값. 0=1월, 1=2월)
setSeconds()Date 객체에 초 설정 (0-59 사이의 값)
setTime()1970.1.1 이후의 밀리세컨드 설정
setYear()Date 객체에 연도 설정 (00-99 사이의 값)
setUTCDate()Date 객체에 날짜를 UTC 형태로 설정
setUTCDay()Date 객체에 요일을 UTC 형태로 설정
setUTCMonth()Date 객체에 월을 UTC 형태로 설정
setUTCFullYear()Date 객체에 년도를 UTC 형태로 설정
setUTCHour()Date 객체에 시간을 UTC 형태로 설정
setUTCMinutes()Date 객체에 분을 UTC 형태로 설정
setUTCSeconds()Date 객체에 초를 UTC 형태로 설정
setUTCMilliseconds()Date 객체에 밀리세컨드를 UTC 형태로 설정
toGMTString()Date객체를 문자열 형태로 반환 (GMT)
toLocaleString()Date객체를 문자열 형태로 반환 (로컬 시간)
toString()Date객체를 문자열 형태로 반환

■ Math 객체
속성설명
E오일러 상수, 자연 로그의 밑으로 사용
LN2밑이 e인 2의 자연 로그
LN10밑이 e인 10의 자연 로그
LOG2E밑이 2인 E의 로그
LOG10E밑이 10인 E의 로그
PI파이(PI) 값 반환
SQRT1_21/2의 제곱근
SQRT22의 제곱근
메쏘드설명
abs(x)x의 절대 값 반환
acos(x)x의 arccosine 값 반환
asin(x)x의 arcsine 값 반환
atan(x)x의 arctangent 값 반환
atan2(x,y)x 축에서 어떤 지점까지의 각도 반환
ceil(x)x보다 크거나 같은 가장 가까운 정수 값 반환
cos(x)x의 cosine 값 반환
exp(x)x의 exponent 값 반환
floor(x)x보다 작거나 같은 가장 가까운 정수 값 반환
log(x)x의 자연 로그 값 반환
max(x,y)x와 y 중 큰 값 반환
min(x,y)x와 y 중 작은 값 반환
pow(x,y)x의 y승 반환
random()0과 1 사이의 난수 값 반환
round(x)x와 가장 가까운 정수로 반올림
sin(x)x의 sine 값 반환
sqrt(x)x의 제곱근 반환
tan(x)x의 tangent 값 반환
TAG JavaScript, 내장객체, 자바스크립트
Posted by 상현넘™

댓글을 달아 주세요

JavaScript - location 객체

HTML/CSS/JS 2006/06/30 10:53
location 객체 .........................................................

window객체에서 파생된 것으로 window를 생략한다.
현재 열려있는 문서의 URL정보를 얻을 수 있고...

이보다는 앞으로 이동할 문서의 URL을 설정하는 데 아주 중요하게 사용됩니다!!!


■ location 객체 프로퍼티
href문서의 URL 주소위 주소 전체
host호스트 이름과 포트http://www.dragoneye.co.kr:80
hostname호스트 컴퓨터이름http://www.dragoneye.co.kr
hash앵커이름#top
pathname디렉토리 이하 경로/column2/list.asp
port포트번호 부분80
protocol프로토콜 종류http:
searchURL 조회부분table=table30&page=2


■ location 객체 메서드
eval()문자열을 숫자로 바꿈
toString()오브젝트를 문자열로 바꿈
reload()현재 문서를 다시 읽어옴
replace()현재 문서를 다른 URL 문서로 바꿈
valueOf()오브젝트 값을 표시
toSource()오브젝트 값을 문자열로 표시


■ 열릴 문서의 URL설정하기
<script language="javascript">

// URL을 이동시킴
location.href= "http://www.dragoneye.co.kr"
//location.href= "login.html"
</script>
<script language="javascript">
alert("회원가입을 하시겠습니까?")
location.href= "member.html"
</script>
<script language="javascript">
// 연 창의 URL 이동
opener.location.href= "member.html"
</script>
<script language="javascript">
// 부모창 지정프레임의 URL 이동
parent .frame1.location.href= "member.html"
</script>
<script language="javascript">
// 전체창에 새 페이지 열기
top.location.href= "index.html"
</script>

■ 문서 새로 고침
<a href="location.reload()"> 새로고침 </a>
<script language="javascript">
// 연 창의 URL 새로 고침
opener.location.reload()
</script>
TAG JavaScript, Location, 자바스크립트
Posted by 상현넘™

댓글을 달아 주세요

JavaScript - window 객체

HTML/CSS/JS 2006/06/30 10:42
window 객체 .........................................................

아래는 최상위 window객체가 가진 속성과 메서드,이벤트 핸들러의 종류를 훓어보고 몇가지 예제를 해본다. 필요한 작업이 있을 때마다 객체를 찾아보고 속성이 있나, 메서드를 가졌나, 이벤트핸들러가 있는지를 찾아봄으로써 점점 내공이 깊어지는 것이다.

■ window 객체 프로퍼티
status브라우저의 상태바에 문자열을 출력하는 경우에 사용
defaultStatus브라우저의 상태바에 초기 문자열을 설정
length창안의 프레임 수
name창 이름
self현재 창 자신, window와 같음
window현재 창 자신, self와 같음
parent프레임에서 현재프레임의 상위프레임
top현재프레임의 최상위프레임
openeropen()으로 열린 창에서 볼 때 자기를 연 창
documentdocument 오브젝트
frames창안의 모든 프레임에 대한 배열정보
historyhistory 오브젝트 및 배열
locationlocation 오브젝트
closed창이 닫혀 있는 상태
locationbarlocation 바
menubar창 메뉴 바
innerHeight창 표시 영역의 높이(픽셀), 익스플로러 지원되지 않음
innerWidth창 표시 영역의 너비(픽셀), 익스플로러 지원되지 않음
outerHeight창 바깥쪽 둘레의 높이, 익스플로러 지원되지 않음
outerWidth창 바깥쪽 둘레의 너비, 익스플로러 지원되지 않음
pageXOffset현재 나타나는 페이지의 X위치, 익스플로러 지원되지 않음
pageYOffset현재 나타나는 페이지의 Y위치, 익스플로러 지원되지 않음
personalbar창의 퍼스널 바
scrollbar창의 스크롤 바
statusbar창의 상태 바
toolbar창의 툴 바


■ window 객체 메서드
alert()경고용 대화상자를 보여줌
clearTimeout()setTimeout 메소드를 정지
confirm()확인, 취소를 선택할 수 있는 대화상자를 보여줌
open()새로운 창을 오픈
prompt()입력창이 있는 대화상자를 보여줌
setTimeout()일정 간격으로 함수를 호출하여 수행, millisecond 단위로 지정
eval()문자열을 숫자로 바꿈
toString()오브젝트를 문자열로 바꿈
blur()focus를 이동
focus()focus를 줌
scroll()창을 스크롤 함
valueOf()오브젝트 값을 반환
back()한 단계 전 URL(이전화면)로 돌아감. 익스플로러 지원 안함
find()창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false. 익스플러러 지원 안함
forward()한 단계 뒤의 URL(다음화면)로 이동. 익스플로러 지원 안함
home()초기화 홈페이지로 이동. 익스플로러 지원 안함
moveby()창을 상대적인 좌표로 이동. 수평방향과 수직방향의 이동량을 픽셀로 지정
moveto()창을 절대적인 좌표로 이동. 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정
resizeby()창의 크기를 상대적인 좌표로 재설정. 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정
resizeto()창의 크기를 절대적인 좌표로 재설정. 창 크기를 픽셀로 지정
scrollby()창을 상대적인 좌표로 스크롤. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정
scrollto()창을 절대적인 좌표를 스크롤. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정
stop()불러오기를 중지. 익스플로러는 지원 안함
captureEvents()모든 타입의 이벤트를 판단
setInterval()일정시간마다 지정된 처리를 반복
clearInterval()setInterval 메소드의 정지
handleEvent()이벤트 취급자를 정함
print()화면에 있는 내용을 프린터로 출력
releaseEvent()다른 계층의 이벤트로 이벤트를 넘김
routeEvent()판단한 이벤트와 같은 계층의 이벤트
toSource()오브젝트값을 문자열로 반환


■ window 객체 이벤트핸들러
onBlur브라우저가 포커스를 잃을 때 발생
onDragDrop사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생. 익스플로러는 지원 안함
onError문서를 읽는 중에 에러가 생길 때 발생
onFocus브라우저에 포커스를 얻을 때 발생
onLoad문서를 읽을 때 발생
onMove브라우저의 위치를 변경했을 때 발생. 익스플로러는 지원 안함
onResize창의 크기를 변경했을 때 발생. 익스플로러는 지원 안함
onUnload현재 문서를 지울려고 할 때 발생


■ 새창열기 open() 메서드
window.open("문서url","창이름","창의 특성")

웹여행중에 많이 본 것일텐데 링크나,버튼,이미지를 누를 때 많이 뜨죠!

첫째인수로 url이 필요하죠. 새창에도 내용을 넣어야 하니까요.
둘째인수로 창이름, 이게 같은 경우엔 계속 창을 열 때 새로 열지 않고 이미 열린 창을 이용합니다.
세째인수는 새로 열릴 창의 너비,높이,툴바,상태바등을 지정하는거죠.


■ 창의특성
directoriesyes || no익스플로러 연결도구모음, 익스플로러 전용
locationyes || no주소입력란
menubaryes || no메뉴표시줄
scrollbarsyes || no스크롤바
statusyes || no상태표시줄
toolbaryes || no도구모음
copyhistoryyes || no히스토리정보를 복사
resizableyes || no창 크기 조절 가능여부
width픽셀창의 너비
height픽셀창의 높이

<script language="javascript">
// 페이지로딩시 새창 열기

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<body onLoad="winOpen()">
<script language="javascript">
// 클릭시 새창열기

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<font onClick="winOpen()">
<script language="javascript">
// 클릭시 새창열기 , 링크에서

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<font onClick="winOpen()"> 클릭열기 </font>
<a href="winOpen()"> 링크열기 </a>
<script language="javascript">
// 매개변수를 이용하기

function winOpen(url,winname,winhow) {
window.open(url,winname,winhow)
}
</script>

<a href= "winOpen('123.html','newWin','width=300,height=200,toolbar=no')"> 매개열기 </a>

■ 새창열기 close() 메서드
<script language="javascript">
function winClose() {
window.close()
}
</script>

<a href= "winClose()"> 함수이용해서 닫기 </a>

<a href= "window.close()"> 메서드 이용 닫기 </a>

■ 새로 열린 창에서 연 창을 컨트롤하기
<script language="javascript">

// 창 닫기 전에 연 창의 폼요소에 값 넘기기

function winClose(addr) {
opener.form1.address=addr
self.close()
}
</script>

<a href= "winClose('서울 종로구')"> 종로구</a>
<a href= "winClose('서울 마포구')"> 마포구</a>
<script language="javascript">

// 창 닫기 전에 연 창을 리로드하기

function winClose() {
opener.location.reload()
self.close()
}
</script>

<a href= "winClose()"> 함수이용해서 닫기 </a>

■ 새로 열린 창에서 크기 조절하기 window.resizeTo
<script language="javascript">
// 페이지로딩시 크기 조절

function winSize() {
window.resizeTo(300,200) // 너비,높이
}
</script>

<body onLoad="winSize()">

■ 새로 열린 창에서 위치 조절하기 window.moveTo
<script language="javascript">
// 페이지로딩시 위치 조절

function winMove() {
window.moveTo(200,200) // X,Y 좌표
}
</script>

<body onLoad="winMove()">
TAG JavaScript, window, 자바스크립트
Posted by 상현넘™

댓글을 달아 주세요