คัดลอกรหัสรหัสดังนี้:
<img src = "1_nder1000.jpg" id = "img2" onclick = "การแจ้งเตือน ('onclick');
<script type = "text/javascript">
var img2 = document.getElementById ("IMG2");
การแจ้งเตือน (img2.onmouseover);
// ส่งออกรูปภาพต่อไปนี้
</script>
คือเอาต์พุต:
Firefox:
คัดลอกรหัสรหัสดังนี้:
<img src = "1_nder1000.jpg" id = "img1" />
<script type = "text/javascript">
var img1 = document.getElementById ("IMG1");
img1.onmouseover = หมุน;
ฟังก์ชั่นหมุน () {) {
this.src = '1_yylklshmyt20090217.jpg';
-
var img1 = document.getElementById ("IMG1");
img1.onmouseover = onMouseOver;
ฟังก์ชั่น onmouseover (เหตุการณ์) {
this.src = '1_yylklshmyt20090217.jpg';
-
// ในความเป็นจริง document.getElementById ("IMG1");
/* var img1 = {src: "1_nder1000.jpg"
ID: "IMG1",
Alt: "" ,,
ชื่อเรื่อง: "ภาพย้อนกลับ"
-
</script>
คัดลอกรหัสรหัสดังนี้:
< %@page language = "c#" autoeEventWireUp = "true" codebehind = "webform1.aspx.cs" สืบทอด = "webapplication1.webform1" %>
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "เซิร์ฟเวอร์">
<tite> หน้าไม่ใช่ -title </title>
<script type = "text/javascript">
// แอตทริบิวต์ทั้งหมดของรูปภาพ IMG วงจรคุณสามารถเห็นคุณลักษณะที่ไม่เฉพาะเจาะจงจำนวนมากที่ไม่ได้กำหนดไว้
window.onload = ทำซ้ำ;
ฟังก์ชั่นซ้ำ () {) {)
var img1 = document.getElementById ('img1');
สำหรับ (var i ใน img1) {
การแจ้งเตือน (i+":"+img1 [i]);
-
-
</script>
</head>
<body>
<found id = "form1" runat = "เซิร์ฟเวอร์">
<div>
<img src = "1_nder1000.jpg" id = "img1" />
</div>
</form>
</body>
</html>
ค่ายสคริปต์และหน้าเข้าถึง HTML
แท็กสคริปต์
แท็กสคริปต์ใช้ในหน้า HTML ที่ฝังอยู่ในสคริปต์ที่ชัดเจน
<script>
// สคริปต์บางส่วนไปที่นี่
</script> ฉลากสคริปต์มีแอตทริบิวต์พิเศษสามตัว (แน่นอนว่ายังมีแอตทริบิวต์เช่น ID คลาสและเกือบทุกองค์ประกอบในหน้า HTML สามารถมีคลาสแอตทริบิวต์ ID)))
<ภาษาสคริปต์ = "javascript"> // แอตทริบิวต์ภาษาระบุภาษาที่ใช้ในฉลาก
// มีสามค่าทั่วไป JavaScript, JScript, vbscript
// สคริปต์บางส่วนไปที่นี่
</script>
// เท่านั้น IE เท่านั้นที่สามารถรับรู้ได้สำหรับ JScript และเบราว์เซอร์อื่น ๆ เท่านั้นที่จะเพิกเฉยต่อเนื้อหาของฉลากนี้
// สำหรับ vbscript มีเพียง IE ใน windows เท่านั้นที่สามารถรับรู้ได้ทำงาน
// อย่างไรก็ตามแอตทริบิวต์ภาษาจะถูกแทนที่ด้วยแอตทริบิวต์ประเภทใน XHTML ในภายหลัง
<script type = "text/javascript"> //
// สคริปต์บางส่วนไปที่นี่
</script> ในเว็บเบราว์เซอร์เราจะใช้ JavaScript เท่านั้นพิมพ์คุณสมบัติไปยังข้อความ/JavaScript จาวาสคริปต์
<script>
แจ้งเตือน ("สวัสดี!");
</script>
// รหัสด้านบนจะทำงานในแบบที่ JavaScript จะทำงานใน JavaScript
// แม้ว่าจะมี IE บล็อกสคริปต์ที่ไม่มีการประกาศจะดำเนินการเป็น JavaScript ไม่ใช่ vbscript
<script>
msgbox "สวัสดี!"
</script>
// 上面的代码在 IE 中也会报错, เช่น JavaScript 执行以前在 html 页面中, 一些标签常会加一些诸如 onclick, onmouseover 这样的属性, 这是一种事件绑定 (关于事件, เราจะอธิบายรายละเอียดในอนาคตไม่ต้องกังวล) )
<img src = "../ images/stack_heap.jpg" onclick = "การแจ้งเตือน ('คุณทำร้ายฉัน!"/> รหัสจะแสดงภาพในหน้า html เมื่อคุณคลิกที่การคลิกเมาส์ในเวลานั้น จะมีหน้าต่างป๊อปอัพที่แสดงว่า 'คุณทำร้ายฉัน!' ค่าของแอตทริบิวต์ onclick เป็นรหัส JavaScript จริง ๆ
onclick ดำเนินการหนึ่งครั้งเมื่อคลิกเมาส์
OnMouseOver ดำเนินการหนึ่งครั้งเมื่อเมาส์ถูกวาง
Onmouseout ดำเนินการหนึ่งครั้งเมื่อเมาส์เคลื่อนที่ออก
Onmousetown ดำเนินการหนึ่งครั้งเมื่อกดเมาส์
onmouseup, ดำเนินการหนึ่งครั้งเมื่อเมาส์ถูกปล่อย (ตีกลับ)
onmousedblclick ดำเนินการหนึ่งครั้งเมื่อเมาส์สองเท่า -คลิก
ออนไลน์ดำเนินการหนึ่งครั้งเมื่อโหลดวัตถุ
ผลของการเป็นที่นิยมบนอินเทอร์เน็ตก่อนหน้านี้เป็นผลกระทบของ rollverimages
<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 ด้านล่างมันจะถูกแยกวิเคราะห์ลงในวัตถุต่อไปนี้:
<img src = "../ images/stack_heap.jpg" onclick = "Alert ('Hello!)"/>
// โปรดทราบว่าในความเป็นจริงสิ่งนี้ไม่สามารถมอบหมายหรือประกาศด้วยตนเองด้วยตนเอง
this = {
src: "../ images/ stack_heap.jpg" ,,
Alt: "Memory Stack",
onclick: "Alert ('Hello!')"
Tagname: "IMG"
-
// ในความเป็นจริงไม่เพียง แต่แอตทริบิวต์เหล่านี้แท็ก IMG จะถูกแยกวิเคราะห์เป็นวัตถุที่มีคุณลักษณะเช่น SRC, ALT, SRC, แอตทริบิวต์ ALT ถูกเขียนขึ้นใน HTML และ Tagname ถูกสร้างขึ้นโดยอัตโนมัติโดยระบบ ชื่อฉลาก!
<img src = "../ images/stack_heap.jpg" onclick = "การแจ้งเตือน (this.src); แจ้งเตือน (this.tagname);"/> ธรรมชาติเรายังสามารถปรับเปลี่ยนค่าของมันได้ เอฟเฟกต์ภาพของภาพเพิ่งประสบความสำเร็จ
มีความสนใจไปที่การเชื่อมโยงเหตุการณ์ในบรรทัด
<head>
<script>
ฟังก์ชั่น myfn () {
การแจ้งเตือน ("ภาพถูกโหลด!");
-
</script>
</head>
// ................ หลังจากหลายรหัส
<img src = "../ images/stack_heap.jpg" online = "myfn ()" /// เมื่อภาพถูกโหลดสำเร็จ
การดำเนินการรหัสด้านบนไม่เป็นไร แต่คำสั่งซื้อจะพลิก (สคริปต์สามารถวางไว้ในสถานที่ทางกฎหมายใด ๆ )
<img src = "../ images/stack_heap.jpg" online = "myfn ()" /// เมื่อภาพถูกโหลดสำเร็จ
// ................ หลังจากหลายรหัส
<script>
ฟังก์ชั่น myfn () {
การแจ้งเตือน ("ภาพถูกโหลด!");
-
</script> หน้า HTML ถูกโหลดและดำเนินการตามลำดับจากบนลงล่าง นี่คือเหตุผลที่ฉลากสคริปต์คือการวางส่วนสคริปต์ไว้ในส่วนหัวเพราะหัวที่อยู่ด้านหน้าของร่างกายเมื่อองค์ประกอบในร่างกายถูกโหลดสคริปต์ในหัวจะถูกโหลดอย่างแน่นอน
แต่มี XHTML ด้วย "สามเลเยอร์ของการแยก", W3C เปิดตัว DOM2 เราต้องผูกเหตุการณ์ในอีกทางหนึ่งรับองค์ประกอบหน้า HTML
<head>
<script>
var img = document.getElementById ("myimg");
//document.getElementById Method มีพารามิเตอร์ซึ่งเป็นรหัสสตริง
// จากนั้น IMG หมายถึงวัตถุฉลากภาพนั้น
img.onclight = myfn;
/*เราไม่ให้รหัส JavaScript กับคุณสมบัติ onClick กับค่าอักขระสตริง
มันถูกกำหนดโดยตรงเพื่อให้ชื่อฟังก์ชัน
คุณจะพูดว่าทำไมไม่ img.onclick = myfn ();
เพราะตอนนี้อยู่ในพื้นที่รหัส JavaScript
เพิ่ม "()" เพื่อระบุฟังก์ชั่นนี้จากนั้นให้ค่าส่งคืนของฟังก์ชันนี้เป็น img.onclick*/
ฟังก์ชั่น myfn () {
การแจ้งเตือน ("ภาพถูกโหลด!");
-
</script>
</head>
-
<img src = "../ images/stack_heap.jpg" id = "myimg"/>
// เราจะไม่เพิ่มแอตทริบิวต์ onClick อีกต่อไป แต่ให้ ID
อย่างไรก็ตามรหัสข้างต้นจะยังคงทำผิดพลาดเนื่องจาก HTML ถูกโหลดจากบนลงล่าง ที่โหลดมาแล้วจะมีข้อผิดพลาด; วัตถุที่ว่างเปล่าดังนั้นมันจะทำให้เกิดข้อผิดพลาดที่นี่!
<img src = "../ images/stack_heap.jpg" id = "myimg"/>
// .................... หลังจากหลายรหัส
<script>
var img = document.getElementById ("myimg");
// ในเวลานี้เนื่องจากตำแหน่งของค่ายสคริปต์ถูกวางไว้ในแท็ก IMG แท็ก IMG จะถูกโหลดอย่างแน่นอนเมื่อโหลดไปยังสคริปต์
img.onclight = myfn;
ฟังก์ชั่น myfn () {
การแจ้งเตือน ("ภาพถูกโหลด!");
-
</script> แต่มาตรฐานยังคงแนะนำให้วางสคริปต์ไว้ในส่วนหัว!
window.onload = initall;
// หน้าต่างแสดงถึงวัตถุหน้าต่าง
ฟังก์ชั่นเริ่มต้น () {
var img = document.getElementById ("myimg");
img.onclight = myfn;
ฟังก์ชั่น myfn () {
การแจ้งเตือน ("ภาพถูกโหลด!");
-
} ดังนั้นรหัสไม่ผิด
เยี่ยมชมหน้า html: html dom
HTML DOM ใช้ทั้งหน้าเป็นวัตถุเอกสาร
<p id = "p1"> เราใช้แท็ก p เพื่อแสดง </p> มันจะถูกแปลงเป็นวัตถุต่อไปนี้
// จำไวยากรณ์ปริมาณตามตัวอักษรของวัตถุได้เสมอใช่ไหม?
-
Tagname: "P",
ClassName: "Demo",
ชื่อเรื่อง: "ย่อหน้าแรก: Dom Tree",
ID: "P1",
InnerHtml: "เราใช้ฉลาก P เพื่อแสดงให้เห็น"
-
// คุณอาจแปลกทำไมแอตทริบิวต์คลาสของฉลากกลายเป็นแอตทริบิวต์คลาสของวัตถุแทนคลาส
// คลาสคือ JavaScript คำที่สงวนไว้ !!!
// tagname แสดงถึงชื่อฉลากและ innerhtml หมายความว่ารหัส HTML เรียกดูในนั้นแปลงฉลาก HTML เป็นวัตถุดังกล่าวและแอตทริบิวต์หรือเนื้อหาภายในแท็กใน JavaScript นั้นง่ายกว่ามาก เข้าถึงวัตถุนี้ !!
// ก่อนเพิ่ม ID ลงในฉลากก่อนจากนั้นใช้วิธีการ document.getElementById เพื่อเข้าถึง
window.onload = initall;
ฟังก์ชั่นเริ่มต้น () {
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 บางส่วน
.der {
สี: สีแดง;
ความเป็นมา: สีน้ำเงิน;
ขนาดตัวอักษร: ใหญ่ขึ้น;
-
.ออก {
สี: สีดำ;
ความเป็นมา: สีขาว;
ขนาดตัวอักษร: เล็กกว่า;
-
.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 มีพารามิเตอร์เดียวเท่านั้นนั่นคือแท็กชื่อในรูปแบบของสตริงและค่าส่งคืนเป็นรายการของ HTML องค์ประกอบคล้ายกับอาร์เรย์
window.onload = initall;
ฟังก์ชั่นเริ่มต้น () {
var plist = document.getElementsByTagname ("P");
// ทำไมคุณต้องใช้ Capital P?
Alert (plist.length);
การแจ้งเตือน (plist [0] .innerhtml);
} นอกจากนี้สำหรับวิธีการ document.getElementsByTagname คุณยังสามารถส่งหมายเลข "*" เป็นพารามิเตอร์เพื่อรับองค์ประกอบทั้งหมดของหน้าคล้ายกับอักขระที่ผ่านใน CSS
window.onload = initall;
ฟังก์ชั่นเริ่มต้น () {
var allThings = document.body.getElementsByTagname ("*");
// คุณสามารถเรียกวิธี GetElementsByTagname บนองค์ประกอบ DOM ใด ๆ
การแจ้งเตือน (allthings.length);
การแจ้งเตือน (allthings [3] .innerhtml);
} other-javascript: Pseudo Protocol
pseudo -protocol นั้นแตกต่างจากการมีอยู่จริงบนอินเทอร์เน็ตเช่น http: //, https: //, ftp: //, แต่สำหรับแอปพลิเคชันที่เกี่ยวข้อง ::
เราสามารถป้อน "JavaScript: Alert ('JS!');" ในแถบการเรียกดู และค่าผลลัพธ์จะถูกส่งกลับไปยังหน้าปัจจุบัน
ในทำนองเดียวกันเราสามารถใช้โปรโตคอล JavaScript Pseudo ในแอตทริบิวต์ HREF ของแท็ก A
<a href = "JavaScript: Alert ('JS!');"> </a>
// คลิกที่ลิงค์ในด้านนี้
<a href = "JavaScript: window.prompt ('เนื้อหาอินพุตจะแทนที่หน้าปัจจุบัน!', '');"> a </a> โซลูชันง่ายมาก
<a href = "JavaScript: window.prompt ('เนื้อหาอินพุตจะแทนที่หน้าปัจจุบัน!', ''); undefined;"> a </a>
// เพิ่มที่ไม่ได้กำหนดจนจบแม้ว่า JavaScript Pseudo Protocol ให้ความยืดหยุ่นบางอย่าง แต่พยายามอย่าใช้มันในหน้า!