스크립트 레이블 및 액세스 HTML 페이지에 대한 자세한 설명

저자：Eve Cole 업데이트 시간：2025-03-15 18:00:04

다음과 같이 코드 코드를 복사하십시오.

<img src = "1_nder1000.jpg"id = "img2"onclick = "alert ( 'onclick');

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

경고 (img2.onmouseover);

// 다음 사진을 출력합니다

</스크립트>

IE 출력 :

Firefox :

다음과 같이 코드 코드를 복사하십시오.

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

img1.onmouseover = 회전;

함수 rotate () {) {

this.src = '1_yylklshmyt20090217.jpg';

}

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

img1.onmouseover = onmouseover;

함수 onMouseOver (이벤트) {

this.src = '1_yylklshmyt20090217.jpg';

}

// 실제로, getElementById ( "img1");

/* var img1 = {src : "1_nder1000.jpg",,,

ID : "IMG1",

alt : "",,

제목 : "반전 사진"

}*/

</스크립트>

다음과 같이 코드 코드를 복사하십시오.

< %@page language = "c#"autoeeventwireup = "true"codebehind = "webform1.aspx.cs"inherits = "webapplication1.webform1" %>

// 사이클 IMG 그림의 모든 속성, 정의되지 않은 많은 비특이적 속성을 볼 수 있습니다.

Window.onload = 반복;

함수 반복 () {) {)

var img1 = document.getElementById ( 'img1');

for (var i in img1) {

경고 (i+":"+img1 [i]);

}

</스크립트>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

스크립트 레이블 및 액세스 HTML 페이지

스크립트 태그

스크립트 태그는 일부 명백한 스크립트에 포함 된 HTML 페이지에 사용됩니다.

<cript>

// 일부 스크립트가 여기로갑니다

</script> 스크립트 레이블에는 세 가지 특수 속성이 있습니다 (물론, ID, 클래스 및 HTML 페이지의 거의 모든 요소와 같은 속성이 있습니다.

// 3 가지 공통 값 JavaScript, jscript, vbscript가 있습니다

// 일부 스크립트가 여기로갑니다

</스크립트>

// jscript에서 IE 만 인식 할 수 있으며 다른 브라우저는이 레이블의 내용을 무시합니다.

// vbscript의 경우 Windows에서만 인식 할 수 있습니다.

// 그러나 언어 속성은 나중에 XHTML의 유형 속성으로 대체되었습니다.

// 일부 스크립트가 여기로갑니다

</script> 웹 브라우저에서는 javaScript 만 사용합니다. 자바 스크립트

<cript>

경고 ( "안녕하세요!");

</스크립트>

// 위의 코드는 JavaScript가 JavaScript에서 실행되는 방식으로 실행됩니다.

// IE가 있더라도 선언이없는 스크립트 블록은 vbscript가 아닌 JavaScript로 수행됩니다.

<cript>

Msgbox "안녕하세요!"

</스크립트>

// 上面的代码在 IE 上面的代码在, 즉 JavaScript 执行以前在 html 页面中, 一些标签常会加一些诸如 Onclick, OnMouseOver 这样的属性, 这是一种事件绑定 (关于事件, 关于事件, 우리는 미래에 자세히 설명 할 것입니다. 걱정하지 마십시오)는 HTML 페이지의 특정 요소가 특정 요소에있을 때 실행되는 JavaScript 코드를 지정하는 데 사용됩니다 (물론 다른 클라이언트 스크립트 일 수도 있습니다. ))

<img src = "../ images/stack_heap.jpg"onclick = "alert ( 'you hurt me!"/> 코드는 html 페이지에 이미지가 표시됩니다. 'You Hurt Me!'를 보여주는 POP -UP 창이 있습니다. OnClick 속성의 값은 실제로 JavaScript 코드입니다. 다음은 다른 간단한 이벤트입니다.

켜기고 마우스를 클릭하면 한 번 실행하십시오

OnMouseOver, 마우스를 올리면 한 번 실행하십시오

onmouseout, 마우스가 움직일 때 한 번 실행하십시오

OnMousetown, 마우스를 누르면 한 번 실행하십시오

Onmouseup, 마우스가 풀리면 한 번 실행 (바운스)

onMousEdBlClick, 마우스가 두 배로 클릭 할 때 한 번 실행하십시오

온라인에서 객체가로드되면 한 번 실행하십시오

이전에 인터넷에서 인기를 얻는 효과는 실제로 롤 버라이지의 효과입니다.

<img src = "../ images/ stack_heap.jpg"

onmouseover = "this.src = '../images/over.jpg'"

onMouseOut = "this.src = '../ images/out.jpg'"/> 알 수 있습니다. onMouseOver와 같은 속성의 문자열은 사건 당시 스크립트로 실행되지만 위의 코드는 위의 코드

//보기를 쉽게보기 위해 아래에서 추출합니다.

this.src = '../images/over.jpg'

this.src = '../images/out.jpg'는 위의 코드를 분석합니다 이 객체는 항상 선언 될 수없는 객체입니다. 아래 IMG 태그의 경우 다음 객체로 구문 분석됩니다.

// 실제로 수동으로 할당하거나 선언 할 수는 없습니다

이 = {

src : "../ images/ stack_heap.jpg",,,

alt : "메모리 스택",

OnClick : "Alert ( 'Hello!')",

tagname : "img"

};

// 이러한 속성뿐만 아니라 IMG 태그는 SRC, ALT, SRC, ALT 속성과 같은 속성을 사용하여 객체로 구문 분석되며 TagName은 시스템에 의해 자동으로 생성됩니다 레이블 레이블 이름! 테스트를 위해 다음 코드를 사용할 수 있습니다.

<img src = "../ images/stack_heap.jpg"onclick = "alert (this.src); alert (this.tagname);"/> worly, 값을 수정할 수 있으므로 이미지 플립의 효과도 수정할 수 있습니다. 이미지의 이미지 효과가 성공했습니다

그러한 인라인 이벤트 바인딩에주의가 있습니다.

<헤드>

<cript>

함수 myfn () {

경고 ( "이미지가로드되었습니다!");

}

</스크립트>

</head>

// ................ 여러 코드 후

<img src = "../ images/stack_heap.jpg"online = "myfn ()"/// 이미지가 성공적으로로드 될 때

위의 코드 실행은 괜찮지 만 주문은 뒤집 힙니다 (스크립트는 법적 장소에 배치 할 수 있습니다).

<img src = "../ images/stack_heap.jpg"online = "myfn ()"/// 이미지가 성공적으로로드 될 때

// ................ 여러 코드 후

<cript>

함수 myfn () {

경고 ( "이미지가로드되었습니다!");

}

</script> HTML 페이지가 위에서 아래로로드되고 실행됩니다. ; 이것은 스크립트 레이블이 스크립트 부분을 헤드 부분에 놓는 이유입니다. 신체 앞의 머리, 본체의 요소가 장착되면 머리의 스크립트가 확실히로드되기 때문입니다.

그러나 XHTML이 있었는데, "3 층의 분리", W3C는 DOM2를 시작했습니다. 다른 방식으로 이벤트를 바인딩하고 HTML 페이지 요소를 가져와야합니다.

<헤드>

<cript>

var IMG = getElementById ( "myimg");

//document.getElementById 메소드에는 매개 변수, 문자열 ID가 있습니다

// 그런 다음 IMG는 해당 이미지 레이블 객체를 의미합니다

img.onclight = myfn;

/*문자열 문자 값으로 javaScript 코드를 OnClick 속성에 제공하지 않습니까?

함수 이름을 제공하도록 직접 할당됩니다.

또한 img.onclick = myfn ();

지금은 JavaScript 코드 영역에 있기 때문입니다

이 함수를 표시하려면 "()"를 추가 한 다음이 함수의 리턴 값을 img.onclick*/에게 제공합니다.

함수 myfn () {

경고 ( "이미지가로드되었습니다!");

}

</스크립트>

</head>

// .......

// 더 이상 OnClick 속성을 추가하지 않지만 ID를 제공합니다.

그러나 위의 코드는 여전히 오류가 발생합니다. HTML은 스크립트에로드 할 때 아래로로드되지 않으며 IM의 IMG가 아닌 경우 JavaScript가 자동으로 실행됩니다 아직로드되므로 오류가 발생합니다 빈 객체는 여기에서 오류가 발생합니다.

// .................... 여러 코드 후

<cript>

var img = document.getElementById ( "myimg");

// 현재 스크립트 레이블의 위치가 IMG 태그에 배치되므로 스크립트에로드 할 때 IMG 태그가 확실히로드됩니다.

img.onclight = myfn;

함수 myfn () {

경고 ( "이미지가로드되었습니다!");

}

</script> 그러나 표준은 여전히 스크립트를 헤드 부분에 놓는 것이 좋습니다

Window.onload = initall; // 하나의 함수로 모든 코드를 작성한 다음 Window 객체의 온라인 이벤트 속성에 등록하십시오.

// 창은 창이 열리면 페이지가로드되면 창 객체에 온라인 이벤트가 트리거됩니다.

함수 이니셜 () {

var img = document.getElementById ( "myimg");

img.onclight = myfn;

함수 myfn () {

경고 ( "이미지가로드되었습니다!");

}

} 따라서 코드가 잘못된 위치에 있지 않으면 페이지가로드 될 때만 실행됩니다.

HTML 페이지 : HTML DOM을 방문하십시오

HTML DOM은 문서 객체로 전체 페이지를 사용합니다.

<p id = "p1"> 우리는 p 태그를 사용하여 </p> 다음 객체로 변환됩니다.

// 개체의 문자 그대로의 수량 문법을 항상 기억하십시오.

{{

Tagname : "P",

ClassName : "데모",

제목 : "첫 번째 단락 : Dom Tree",

ID : "P1",

InnerHtml : "우리는 p 라벨을 사용하여 시연"

}

// 라벨의 클래스 속성이 클래스 대신 객체의 클래스 이름 속성이되는 이유는 이상 할 수 있습니다.

// 클래스는 JavaScript 예약 단어입니다 !!!

// tagname은 레이블 이름을 나타내고, InnerHTML은 HTML 코드 브라우지가 HTML 레이블을 그러한 객체로 변환한다는 것을 의미하며 JavaScript의 태그 내의 속성 또는 내용은 훨씬 간단하지만 문제는 방법에 액세스하는 방법입니다. 이 개체에 액세스하십시오 !!

// 먼저 레이블에 ID를 추가 한 다음 Document.GetElementById 메서드를 사용하여 액세스하십시오.

Window.onload = initall; // HTML 페이지에 액세스하는 코드는 Window의 Onload 이벤트에 있습니다!

함수 이니셜 () {

var p = document.getElementById ( "p1");

경고 (p.className);

경고 (p.tagname);

경고 (p.tital);

경고 (p.id);

경고 (p.innerhtml);

} HTML 페이지에 액세스하는 것은 요소를 얻은 후에는 속성 값을 읽을뿐만 아니라 속성 값을 설정할 수 있습니다!

Window.onload = initall;

함수 이니셜 () {

var p = document.getElementById ( "p1");

p.title = "JavaScript";

p.classname = "로드"; // 스타일을 변경할 수 있습니다

} 이것들을 사용하여 이미 흥미로운 일을 할 수 있습니다!

// 일부 CSS

.oder {

색상 : 빨간색;

배경 : 파란색;

글꼴 크기 : 더 큰;

}

.밖으로 {

색상 : 검은 색;

배경 : 흰색;

글꼴 크기 : 더 작습니다.

}

.Click {{

색상 : 노란색;

배경 : 노란색;

글꼴 크기 : 12px;

}

// html 코드

<p id = "p1"> 큰 텍스트 라인은 모두 일반 텍스트입니다!

// JavaScript 코드

Window.onload = initall;

함수 이니셜 () {

var p = document.getElementById ( "p1");

p.onclick = clickfn; // 여기의 이벤트 등록은 등록 방법이 등록되는 방식보다 괄호보다 작습니다.

p.onMouseOver = Overfn;

p.onmouseout = outfn;

}

함수 clickfn () {

this.classname = "클릭";

// 클래스가 아니라 클래스 이름입니다

}

기능 Overfn () {

this.className = "Over";

}

함수 outfn () {

this.classname = "out";

} 물론이 메소드를 얻을 수 있습니다 ID 이름의 이름은 유일한 이름이며 대부분의 레이블 이름은 동일하므로 getElementsByTagName 메소드는 하나의 매개 변수 만 있습니다. 배열과 유사한 요소.

Window.onload = initall; // Window

함수 이니셜 () {

var plist = document.getElementsByTagName ( "P");

// 왜 자본 P를 사용해야합니까?

Alert (plist.length); // 배열과 유사한 요소 수, 페이지의 P 태그 수,보고 금액

Alert (plist [0] .innerhtml);

} 또한 문서화의 경우 CSS의 통과 문자와 유사한 페이지의 모든 요소를 얻기 위해 "*"숫자를 매개 변수로 전달할 수도 있습니다.

Window.onload = initall;

함수 이니셜 () {

var allthings = document.body.getElementsByTagName ( "*");

// 신체 에서이 메소드를 호출 할 때 getElementsByTagName 메소드를 호출 할 수 있습니다.

Alert (Allthings.length); 페이지에 몇 개의 라벨이 있는지, 얼마나 많은 라벨이 있는지 (DocType 포함)

경고 (Allthings [3] .innerhtml); // 네 번째 요소에 액세스하십시오

} 기타 자바 스크립트 : 의사 프로토콜

의사 -프로토콜은 http : //, https : //, ftp : //와 같은 인터넷의 실제 존재와 다르지만 Base64를 사용하여 브라우저 끝에서 바이너리 파일을 출력합니다. :

"JavaScript : Alert ( 'JS!')를 입력 할 수 있습니다. 결과 값은 현재 페이지로 반환됩니다.

마찬가지로 A 태그의 HREF 속성에서 JavaScript 의사 프로토콜을 사용할 수 있습니다.

//이 측면에서 링크를 클릭하십시오.

<a href = "javaScript : window.prompt ( '입력 컨텐츠는 현재 페이지를 대체합니다!', '');"> a </a> 솔루션은 매우 간단합니다.

// JavaScript Pseudo 프로토콜은 특정 유연성을 제공하지만 JavaScript를 디버깅하려면 JavaScript Pseudo 프로토콜을 사용하지 마십시오.