웹페이지 자바스크립트 에센스 코드 세트

저자：Eve Cole 업데이트 시간：2009-06-08 18:25:37

【1. 일반 팝업창】
실제로 코드는 매우 간단합니다.

이는 자바스크립트 코드이므로 <SCRIPT LANGUAGE=javascript> 태그와 </script> 사이에 배치되어야 합니다. 는 일부 이전 브라우저에 효과적이며 이러한 이전 브라우저에서는 태그의 코드가 텍스트로 표시되지 않습니다. 이 좋은 습관을 기르십시오.
window.open('page.html')은 새 창인 page.html의 팝업을 제어하는 데 사용됩니다. page.html이 기본 창과 동일한 경로에 없으면 앞에 경로를 명시해야 합니다. 절대 경로([url]http:// )[/url] 및 상대 경로(../)가 모두 허용됩니다.
작은따옴표나 큰따옴표를 사용할 수 있지만 혼합하지 마세요.
이 코드 조각은 HTML의 <head>와 </head> 사이 또는 <body>와 </body> 사이에 추가할 수 있습니다. 코드가 빠를수록, 특히 페이지의 경우 더 빨리 실행됩니다. 코드가 길어서 페이지가 더 일찍 나타나도록 하고 싶습니다. 가능한 한 앞쪽에 넣으세요.

[2. 설정 후 팝업창]
팝업창 설정에 대해 알아보겠습니다. 위의 코드에 조금 더 추가하면 됩니다. 페이지의 특정 조건에 맞게 이 팝업 창의 모양, 크기 및 팝업 위치를 사용자 정의해 보겠습니다.

<스크립트 언어=자바스크립트>

</SCRIPT>

매개변수 설명:

<SCRIPT LANGUAGE=javascript> js 스크립트가 시작됩니다.
window.open 명령을 사용하여 새 창을 띄웁니다.
'page.html' 팝업 창의 파일 이름.
'newwindow' 팝업 창의 이름(파일 이름 아님)은 선택 사항이며 빈 ''으로 대체할 수 있습니다.
높이=100 창 높이;
너비=400 창 너비;
top=0 화면에서 창 위의 픽셀 값;
left=0 화면 왼쪽에서 창의 픽셀 값입니다.
도구 모음=no 도구 모음 표시 여부, 표시하려면 yes;
메뉴바, 스크롤바는 메뉴바와 스크롤바를 나타냅니다.
resizing=no 창 크기 변경을 허용할지 여부, 허용하려면 yes;
location=no 주소 표시줄 표시 여부, 허용하려면 yes;
status=no 상태 표시줄에 정보를 표시할지 여부(일반적으로 파일이 열려 있음), yes가 허용됩니다.
</SCRIPT> js 스크립트 종료

[3. 팝업 창 제어 기능을 사용]
아래는 완전한 코드입니다.
<html>
<머리>
<스크립트 LANGUAGE=자바스크립트>

</script>
</head>
<본체 온로드=openwin()>
..임의의 페이지 콘텐츠...
</body>
</html>

여기에는 openwin() 함수가 정의되어 있으며 함수 내용은 창을 여는 것입니다. 호출되기 전까지는 아무 소용도 없습니다.
어떻게 부르나요?

방법 1: <body onload=openwin()> 브라우저가 페이지를 읽을 때 창이 팝업됩니다.
방법 2: <body onunload=openwin()> 브라우저가 페이지를 떠날 때 창이 팝업됩니다.
방법 3: 연결을 통해 통화:
<a href=참고: "방법 4: 버튼을 사용하여 통화:
<입력 유형=버튼 onclick=openwin() 값=창 열기>

[4.창 2개가 동시에 팝업]

소스 코드를 약간 변경합니다.
<스크립트 LANGUAGE=자바스크립트>

</script>

두 개의 팝업창이 서로 가리지 않도록 하려면 상단과 좌측을 이용하여 팝업 위치를 조절하여 서로 가리지 않도록 하세요. 마지막으로 위에서 언급한 네 가지 방법을 사용하여 호출할 수 있습니다.
참고: 두 창(newwindows 및 newwindow2)의 이름은 동일하면 안 됩니다. 그렇지 않으면 모두 비어 있어야 합니다. 좋아요?

[5. 메인창에 1.htm 파일이 열리면서 작은창인 page.html이 동시에 뜹니다]

메인창의 <head> 영역에 다음 코드를 추가합니다:

[6. 팝업창 종료 타이밍 제어]

다음으로 팝업창에 대한 제어를 해보면 효과가 더 좋아질 것입니다. 팝업 페이지에 작은 코드 조각을 추가하면(메인 페이지가 아닌 page.html의 HTML에 추가된다는 점에 유의하세요. 그렇지 않으면...), 팝업 페이지가 자동으로 닫히면 더 멋지지 않을까요? 10초?

먼저 page.html 파일의 <head> 영역에 다음 코드를 추가합니다.
<script 언어=javascript>

function closeit() {

setTimeout(self.close(),10000) //밀리초

}

</script>
그런 다음 <body onload=closeit()> 문장을 사용하여 page.html의 원래 <BODY> 문장을 대체합니다. (이 문장을 꼭 작성해주세요! 이 문장의 기능은 창을 닫는 코드를 호출하고, 10초 후에 자동으로 창을 닫는 것입니다.)

[7. 팝업창에 닫기 버튼 추가]
<양식>
<입력 유형='버튼' 값='닫기' onClick='window.close()'>
</FORM>
하하, 이제 더 완벽해졌네요!

[8. 팝업 창 포함 - 한 페이지에 두 개의 창]

위의 예제에는 모두 두 개의 창이 포함되어 있으며, 하나는 기본 창이고 다른 하나는 작은 팝업 창입니다.
다음 예시를 통해 위의 효과를 한 페이지에 완성할 수 있습니다.

<html>
<머리>
<스크립트 언어=자바스크립트>
함수 openwin()
{
OpenWindow=window.open(, newwin, 높이=250, 너비=250,toolbar=no,scrollbars=+scroll+,menubar=no);
//한 줄로 작성
OpenWindow.document.write(<TITLE>예</TITLE>)
OpenWindow.document.write(<BODY BGCOLOR=OpenWindow.document.write(<h1>안녕하세요!</h1>)
OpenWindow.document.write(새 창이 열렸습니다!)
OpenWindow.document.write(</BODY>)
OpenWindow.document.write(</HTML>)
OpenWindow.document.close()
}
</SCRIPT>
</head>
<본문>
<a href=<입력 유형=버튼 onclick=openwin() 값=창 열기>
</body>
</html>

OpenWindow.document.write()의 코드를 보세요. 표준 HTML이 아닌가요? 형식에 따라 더 많은 줄을 작성하십시오. 라벨이 1개 더 많거나 1개 적으면 오류가 발생하므로 주의하세요. OpenWindow.document.close()로 끝내는 것을 잊지 마세요.

[9. 궁극의 애플리케이션 - 팝업창의 쿠키 제어]

위의 팝업창은 멋지지만 약간의 문제가 있다는 점을 기억하세요(기쁨에 푹 빠져 계셨다면 눈치 채지 못하셨을 텐데요?) 위의 스크립트를 넣으면(홈페이지 등) 자주 지나쳐야 하는 페이지에서는 페이지를 새로 고칠 때마다 창이 뜨는데, 많이 짜증나지 않나요? :-(
해결책이 있나요? 네! ;-) 저를 따라오세요.
우리는 쿠키를 사용하여 이를 제어할 수 있습니다.
먼저 메인 페이지 HTML의 <HEAD> 영역에 다음 코드를 추가합니다:

함수 로드팝업(){
if (get_cookie('popped')==''){
오픈윈()
document.cookie=popped=예
}
}

</script>

그런 다음 메인 페이지의 원본 <BODY> 문장을 <body onload=loadpopup()>으로 바꿉니다(openwin이 아니라 loadpop!). 페이지를 새로 고치거나 페이지를 다시 입력해 보면 해당 창이 다시는 나타나지 않습니다. 진정한 Pop-Only-Once!

이제 팝업창 제작 및 적용 스킬은 기본적으로 완성이 되었습니다..저도 많이 지쳤네요.. 웹페이지를 만드는 친구들에게 도움이 되었으면 좋겠습니다. .
JS 스크립트에서는 대문자 사용을 일관되게 유지하는 것이 가장 좋습니다.

1. 전체화면 창 띄우기

2. F11화된 창을 띄웁니다

3. 즐겨찾는 링크 도구 모음이 있는 창 팝업

4. 웹 페이지 대화 상자

<html>
<스크립트 언어=자바스크립트>

</SCRIPT>
<b> 대상=_blank>[url]http://www.pconline.com.cn[/url]</b>
</body>
</html>

showModalDialog() 또는 showModelessDialog()를 사용하여 웹 대화 상자를 호출합니다. showModalDialog()와 showModelessDialog()의 차이점은 showModalDialog()로 열린 창(줄여서 모달 창)이 부모 창에 배치되고 부모 창에 액세스하려면 닫아야 합니다(사람들의 기분을 상하게 하지 않도록 가능한 한 적게 사용하는 것이 좋습니다). showModelessDialog()(모덜리스 창이라고 함)를 닫지 않고도 부모 창에 의해 열린 창에 액세스할 수 있습니다. 개봉 후.

DialogHeight: iHeight는 대화 상자 창의 높이를 설정합니다.
DialogWidth: iWidth는 대화 상자 창의 너비를 설정합니다.
DialogLeft: iXPos는 데스크탑의 왼쪽 상단 모서리를 기준으로 대화 상자 창의 왼쪽 위치를 설정합니다.
DialogTop: iYPos는 데스크탑의 왼쪽 상단 모서리를 기준으로 대화 상자 창의 상단 위치를 설정합니다.
center: {yes | no | 0} 기본값은 "yes"입니다.
help: {yes | no 1 | 0 } 대화 상자 창에 상황에 맞는 도움말 아이콘을 표시할지 여부를 지정합니다. 기본값은 "예"입니다.
resizing: {yes | no 1 | 0} 대화 상자 창의 크기를 조정할 수 있는지 여부를 지정합니다. 기본값은 "아니요"입니다.
status: {yes | no 1 | 0} 대화 상자 창에 상태 표시줄이 표시되는지 여부를 지정합니다. 모덜리스 대화 상자 창의 경우 기본값은 "yes"이고 모달 대화 상자 창의 경우 "no"입니다.

웹페이지 클래식 코드
1. 마우스 오른쪽 버튼이 완전히 차단되어 마우스 오른쪽 버튼 클릭 메뉴가 표시되지 않습니다.
<body oncontextmenu=window.event.returnvalue=false>는

웹 페이지의 테이블 프레임에서도 사용할 수 있습니다.
<테이블 테두리 oncontextmenu=return(false)><td>아니요</table>

2. 선택 취소 및 복사 방지
<본문 onselectstart=false 반환>

3. 붙여넣기 금지
<본문 붙여넣기=false 반환>

4. 복사 방지
<본문 oncopy=거짓 반환; oncut=거짓 반환;>

5. IE 주소 표시줄을 자신만의 아이콘으로 변경
<link rel=단축아이콘 href=favicon.ico>

설명 : favicon.ico 파일 제작에 대해 안내합니다. 먼저 자신의 사이트에 대한 작은 아이콘인 FW에서 그림을 만들 수 있습니다. 그런 다음 ACD에서 파일 속성을 *.ico로 변경한 다음 만든 *.ICO 파일을 서버 디렉터리로 전송합니다. 그런 다음 다른 사람이 귀하의 사이트에 로그인할 때 해당 주소를 사용하여 이를 달성할 수 있습니다. bar 사용자 정의 아이콘을 사용하세요.

6. 귀하의 아이콘이 즐겨찾기에 표시될 수 있습니다
<link rel=Bookmark href=favicon.ico>

주의사항: 제작방법은 위와 동일합니다. 단지 표시 방법이 다를 뿐입니다. 이는 다른 사람이 귀하의 웹 주소를 북마크에 추가할 때 표시되는 맞춤 아이콘입니다.

7. 입력 방법을 닫습니다.
<input style=ime-mode:disabled>

설명: 이 코드는 양식을 제출할 때 사용됩니다. 즉, 데이터를 입력할 때 다른 입력 방법 모드를 사용할 수 없습니다.

8. 항상 틀을 휴대하라
<스크립트 언어=자바스크립트></script>

설명:frame.htm은 웹페이지입니다. 이는 페이지를 보호하는 방법이기도 합니다.

9. 액자에 넣는 것을 방지하세요
<SCRIPT LANGUAGE=자바스크립트></SCRIPT>

10. 웹페이지는 다음과 같이 저장되지 않습니다.
<noscript><iframe src=*.html></iframe></noscript>
참고: <noscirpt>는 다양한 용도로 사용되며 그 중 하나는 JS 광고를 무효화하는 것입니다.

11. 소스파일 확인
<입력유형=버튼값=웹페이지 소스코드 보기
onclick=window.location = '보기-소스:'+ target=_blank>[url]http://bbs.055.cn/test.htm[/url]';>

12.COOKIE 스크립트 기록은 매우 유용한

함수 get_cookie(Name) {
var search = Name + =

var returnvalue = ;

if (documents.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) { // 쿠키가 존재하는 경우

offset += 검색. length

// 값의 시작 인덱스 설정

end = document.cookie.indexOf

(

;, offset)

// 쿠키 값의 끝 인덱스 설정

if (end == -1)

end = document.cookie.length;

(documents.cookie.substring(offset, end))

}

반환 값

}

function loadpopup(){

if (get_cookie('popped')==''){

openpopup()

document.cookie=popped=yes

}

참고: 위는 JS 코드입니다. 시작 및 끝 문자를 직접 추가하세요.

13. 내부 프레임 <IFRAME> 활용
Iframe 태그의 사용 형식은 다음과 같습니다.

예: <iframe name=mm src=http://bbs.055.cn;; width=100% height=100% marginwidth=0 marginheight= ... ot

; .소스 코드의 <head>…</head>로 자동으로 이동하려면 다음 코드를 추가하세요.
<meta http-equiv=refreshcontent=3;URL=http://bbs.055.cn; charset=gb2312>

설명: content=3은 3초 안에 URL을 새로 고치는 것을 의미합니다.

15. 링크의 마우스 모양을 변경하는 방법은 무엇입니까? 이 코드를 링크에 추가하거나 위와 같이 CSS로 작성할 수 있습니다.

style=cursor:hand style=cursor:crosshair
스타일=커서:텍스트 스타일=커서:대기
스타일=커서:이동 스타일=커서:도움말
스타일=커서:e-크기 조정
스타일=커서:n-크기 조정
스타일=커서:nw-크기 조정 스타일=커서:w-크기 조정
스타일=커서:s-크기 조정
스타일=커서:se-크기 조정
style=cursor:sw-resize

페이지의 링크나 스타일 영역에 위 코드를 추가하기만 하면 마우스를 다양화할 수 있습니다.

16. 전체 화면 표시
<양식>
<div 정렬=가운데>
<입력 유형=BUTTON 이름=전체화면 값=전체화면 onClick=window.open(document.location, 'big', 'fullscreen=yes')>
</div>
</form>

<body> 영역에 넣어주세요.

17. 홈페이지로 설정

if(proper_version>=5){
초점=true;
}
함수 launchstock1(htmlurl){
var stock=window.open(htmlurl,stock,top=2,left=2,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,
크기 조정 가능=아니요, 너비=700, 높이=510;
if(포커스OK){
주식.초점();
}
사실을 반환;
}
함수 launchstock(){
var stock=window.open(,stock,top=2,left=2,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,

크기 조정 가능=no,width=700, 높이=510;
if(포커스OK){
주식.초점();
}
사실을 반환;
}
// -->
</script>
<a href=# name=home onClick=defaul_home(); title===E세대 시간==>홈페이지로 설정</a>

18. 다음은 즐겨찾기를 추가하는 코드입니다.

<a href=# onClick=window.external.addFavorite([url]http://bbs.055.cn[/url]';.'Dawn Accord') target=_self 제목 = Dawn Accord>즐겨찾기에 추가</a>

19. 플래시 이미지 효과를 위한 다음 코드가 <head> 영역에 추가됩니다.
<SCRIPT 언어=자바스크립트>
<!--
함수 makevisible(cur, which){
만약 (==0)
cur.filters.alpha.opacity=100
또 다른
cur.filters.alpha.opacity=20
}

//-->

</SCRIPT>
<body> 영역에 다음 코드가 추가됩니다.
<img src=/u/info_img/2009-06/08/logo.gif;; 스타일=필터 ... nbsp;onMouseOver=makevisible(this,0) onMouseOut=makevisible(this,1) 너비=63 높이=56 > //이미지 주소를 직접 변경해주세요.

20.로드 진행률 표시줄

<tablecellspacing=0cellpadding=0bgcolor=#FFFFFFwidth=40%id=P><tr><td>
<table cellpacing=0 cellpadding=0 bgcolor=#0000FF height=18 id=Q><tr><td></td></tr></table></td></tr></table>
</center>
<스크립트 언어=자바스크립트>
var R = 0;
function load() {R = R + 2; Q.style.width = R + % time= setTimeout(load(),50);
if (R > 100) {clearTimeout(time) P.style.width=0}}
</script>
27 전체 화면
<스크립트 언어=자바스크립트>
window.open('index.asp','','fullscreen=1');
</script>

21. 배경 이미지 스크롤

<body scroll=no background=images/bg.jpg link=#00FF00 alink=#FF0000 vlink=#00FF00 bgcolor=#000080 topmargin=8>
<스크립트 언어=자바스크립트>
var 배경오프셋 = 0;
var bgObject = eval('document.body');
함수 스크롤BG(maxSize) {BackgroundOffset = backgroundOffset + 1;
if (BackgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.BackgroundPosition = 0 + backgroundOffset;}
varScrollTimer = window.setInterval(scrollBG(410), 20)
</script>

22. 웹 페이지는

HTML 페이지에

캐시되지 않습니다.

<META HTTP-EQUIV=pragma CONTENT=캐시 없음>
<META HTTP-EQUIV=캐시 제어 CONTENT=캐시 없음, 재검증 필수>
<META HTTP-EQUIV=만료 CONTENT=1997년 2월 26일 수요일 08:21:57 GMT>
또는 <META HTTP-EQUIV=expires CONTENT=0>
ASP webpageResponse.Expires = -1
Response.ExpiresAbsolute = 지금() - 1
Response.cachecontrol = 캐시 없음
PHP 웹페이지
헤더(만료: 1997년 7월 26일 월요일 05:00:00 GMT;
header(Cache-Control: 캐시 없음, 재검증 필수;
header(Pragma: no-cache;

23.

<%
'데이터베이스 연결을 위한 일부 상수를 정의합니다.
Const adOpenForwardOnly = 0 '커서는 레코드 앞으로만 탐색하고 페이징, 레코드세트, 북마크는 지원하지 않습니다.
Const adOpenKeyset = 1 '키셋 커서, 다른 사용자가 레코드를 수정하면 레코드 세트에 반영되지만, 다른 사용자가 추가하거나 삭제한 레코드는 레코드 세트에 반영되지 않습니다. 페이징, 레코드세트, 북마크 지원
Const adOpenDynamic = 2 '동적 커서는 가장 강력한 기능을 가지고 있지만 가장 많은 리소스를 소비합니다. 사용자가 기록을 수정하거나 기록을 추가 또는 삭제하면 기록 세트에 반영됩니다. 모든 기능을 갖춘 브라우징을 지원합니다(ACCESS에서는 지원되지 않음).
Const adOpenStatic = 3 '정적 커서는 단지 데이터의 스냅샷일 뿐이며, 사용자가 레코드를 수정하거나 레코드를 추가하거나 삭제하는 것은 레코드 세트에 반영되지 않습니다. 앞으로 또는 뒤로 이동 지원
Const adLockReadOnly = 1 '잠금 유형, 기본값, 읽기 전용, 수정 불가
Const adLockPessimistic = 2 '편집 시 즉시 레코드를 잠그는 것이 가장 안전한 방법입니다.
Const adLockOptimistic = 3 ' Update 메서드가 호출될 때만 레코드 세트가 잠기고, 다른 이전 작업에서는 현재 레코드를 계속 변경, 삽입 및 삭제할 수 있습니다.
Const adLockBatchOptimistic = 4 '편집 시 레코드가 잠기지 않으며 변경, 삽입, 삭제가 일괄 모드로 수행됩니다.
Const adCmdText = &H0001
Const adCmdTable = &H0002
%>

24. 창 최소화, 최대화 및 닫기
<객체 id=hh1 classid=clsidDB880A6-D8FF-11CF-9377-00AA003B7A11>
<param name=명령값=Minimize></object>
<객체 id=hh2 classid=clsidDB880A6-D8FF-11CF-9377-00AA003B7A11>
<param name=명령값=최대화></object>
<OBJECT id=hh3 classid=clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11>
<PARAM NAME=명령값=닫기></OBJECT>
<입력유형=버튼값=onclick 최소화=hh1.Click()>
<입력 유형=버튼 값=onclick 최대화=hh2.Click()>
<입력 유형=버튼 값=닫기 onclick=hh3.Click()>

참고: 이 예는 IE에 적합합니다.

25. 이전 페이지

asp 페이지의 소스를 결정합니다.
request.server변수(HTTP_REFERER
자바스크립트:
문서.리퍼러

26. 텍스트 상자

의 텍스트 끝에서 커서가 멈춥니다.

함수CC()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value=123 onfocus=cc()>

설명: 양식 데이터 제출에 적합합니다.