สรุป JavaScript
วันที่ 8 กรกฎาคม 56
บทที่ 6
JavaScript: บทนำการเขียนสคริปต์
6.1 บทนำJavaScriptภาษาสคริปต์ที่ใช้ในการเพิ่มการทำงานและลักษณะของหน้าเว็บก่อนที่คุณจะสามารถเรียกใช้ตัวอย่างรหัสกับ
JavaScript บนคอมพิวเตอร์ของคุณคุณอาจต้องเปลี่ยนการตั้งค่าความปลอดภัยของเบราเซอร์E9 ป้องกันสคริปต์บนคอมพิวเตอร์ที่ใช้อยู่จากการทำงานตามค่าเริ่มต้นFirefox,
Chrome, Opera, Safari (รวมทั้งบน iPhone) และ
Android เบราว์เซอร์ได้เปิดใช้งาน JavaScript โดยค่าเริ่มต้น6.2 สคริปต์ของคุณ:
แสดงสายของข้อความที่มีจาวาสคริปต์ในหน้าเว็บเราเริ่มต้นด้วยสคริปต์ง่ายที่แสดงข้อความ
"ยินดีต้อนรับสู่การเขียนโปรแกรมจาวาสคริปต์" ในเอกสาร HTML5เว็บเบราเซอร์ทั้งหมดที่สำคัญมีล่าม JavaScript ซึ่งประมวลผลคำสั่งที่เขียนใน
JavaScriptการเว้นวรรคที่แสดงโดยเบราว์เซอร์ในหน้าเว็บจะถูกกำหนดโดยองค์ประกอบ
HTML5 ที่ใช้ในการจัดรูปแบบหน้าบ่อยครั้งที่ JavaScripts
ปรากฏในส่วน <head> ของเอกสาร HTML5
เบราว์เซอร์ตีความเนื้อหาของส่วน <head> แร แท็ก <script> บ่งชี้เบราว์เซอร์ว่าข้อความที่ตามมาเป็นส่วนหนึ่งของสคริปต์
ชนิดของแอตทริบิวต์ระบุภาษาสคริปต์ที่ใช้ในสคริปต์เช่นข้อความ javascript /
องค์ประกอบของสคริปต์และแสดงความคิดเห็นในสคริปต์ของคุณแท็ก
<script> บ่งชี้เบราว์เซอร์ว่าข้อความซึ่งต่อไปนี้เป็นส่วนหนึ่งของสคริปต์ประเภทแอตทริบิวต์ที่ระบุชนิด
MIME ของสคริปต์เป็นภาษาสคริปต์ที่ใช้ในสคริปต์ในกรณีนี้แฟ้มข้อความที่เขียนใน
JavaScriptใน HTML5
เริ่มต้นสำหรับประเภท <script> MIME คือ "text
/ html" เพื่อให้คุณสามารถละเว้นประเภทแอตทริบิวต์จากแท็ก <script>
ของคุณ สายอักขระที่สามารถมีอยู่ระหว่างคำพูดคู่ (")
เครื่องหมาย (เรียกว่าสตริงตัวอักษร)เอกสารวัตถุเบราว์เซอร์เป็นเอกสาร HTML5 กำลังมีการแสดงในเบราว์เซอร์ช่วยให้คุณสามารถระบุข้อความ HTML5 ที่จะแสดงในเอกสาร HTML5เบราว์เซอร์มีชุดที่สมบูรณ์ของวัตถุที่ช่วยให้โปรแกรมเมอร์สคริปต์เพื่อเข้าถึงและจัดการองค์ประกอบของเอกสาร
HTML5 ทุกวัตถุ
อาศัยอยู่ในหน่วยความจำของคอมพิวเตอร์และมีข้อมูลที่ใช้โดยสคริปต์วัตถุระยะปกติก็หมายความว่าคุณสมบัติ
(ข้อมูล) และพฤติกรรม (วิธีการ) ที่เกี่ยวข้องกับวัตถุวิธีการของวัตถุใช้ข้อมูลคุณสมบัติ
'ในการดำเนินการที่เป็นประโยชน์สำหรับลูกค้าของวัตถุสคริปต์ที่เรียกวิธีการวงเล็บหลังชื่อของวิธีมีข้อโต้แย้งว่าวิธีการที่จำเป็นต้องใช้ในการดำเนินงาน
(JavaScript เป็นกรณีที่สำคัญไม่ได้ใช้ตัวพิมพ์ใหญ่ที่เหมาะสมและอักษรตัวพิมพ์เล็กเป็นข้อผิดพลาดทางไวยากรณ์วิธีwriteln
วัตถุเอกสารของgขียนบรรทัดของข้อความ HTML5 ในเอกสาร HTML5ไม่ได้รับประกันว่าสายที่สอดคล้องกันของข้อความจะปรากฏในเอกสาร
HTML5ข้อความที่แสดงขึ้นอยู่กับเนื้อหาของสตริงที่เป็นลายลักษณ์อักษรซึ่งมีการแสดงต่อมาโดยเบราว์เซอร์เบราว์เซอร์จะแปลความหมายองค์ประกอบ
HTML5
เหมือนปกติไม่ได้ที่จะทำให้ข้อความในเอกสารสุดท้ายหมายเหตุเกี่ยวกับการฝังโค้ด JavaScript
ลงในเอกสาร HTML5
รหัส
JavaScript มักจะอยู่ในไฟล์ที่แยกต่างหากนั้นในเอกสาร HTML5 ที่ใช้สคริปต์นี้จะทำให้รหัสนำมาใช้ใหม่มากขึ้นเพราะสามารถรวมเป็น HTML5 เอกสารใดเป็นกรณีที่มีห้องสมุด JavaScript จำนวนมากที่ใช้ในการพัฒนาเว็บมืออาชีพวันนี้คือเราจะเริ่มแยกทั้งสอง
CSS3 และ JavaScript ลงในแฟ้มที่แยกต่างหากเริ่มต้นในบทที่
10
6.3 การแก้ไขสคริปต์แรกของคุณสคริปต์สามารถแสดงยินดีต้อนรับเข้าสู่การเขียนโปรแกรมจาวาสคริปต์
ในหลาย ๆ6.2
รูปแสดงข้อความในม่วงใช้คุณสมบัติสีวินาทีเขียนวิธีการแสดงสตริงเช่น writeln
แต่ไม่ได้ตำแหน่งเคอร์เซอร์เอาท์พุทในเอกสาร HTML5 ที่จุดเริ่มต้นของบรรทัดถัดไปหลังจากเขียนโต้แย้ง+ ประกอบ (เรียกว่า
"concatenation ตัวดำเนินการ"
เมื่อนำมาใช้ในลักษณะนี้)
ร่วมกับสองสายมารวมกันแสดงข้อความในกล่องโต้ตอบการแจ้งเตือนโต้ตอบที่เป็นประโยชน์เพื่อแสดงข้อมูลในหน้าต่างว่า
"ป๊อปอัพ" บนหน้าจอเพื่อดึงดูดความสนใจของผู้ใช้
6.4 กล่องข้อความให้ผู้ใช้กรอกข้อมูล การเขียนสคริปต์จะช่วยให้สร้างแสดงเนื้อหาของผู้ใช้บนหน้าเว็บ
ซึ่งจะแสดงเป็นแบบ dynamic ที่สามารถเปลี่ยนแปลงข้อมูลได้ง่าย
ซึ่ง dynamic จะสามารถรับข้อมูลจากผู้ใช้แล้วนำไปแสดงบนหน้าเว็บ
โดยโดยการใช้คำสั่ง window.prompt ตัวอย่างเช่นvar
name; // string entered by the user => ประกาศชื่อว่า name name = window.prompt( "Please
enter your name" ); => เรียกใช้ name เพื่อแสดงกล่องโต้ตอบและกรอกข้อมูล document.writeln(
"<h1>Hello " + name +
", welcome to JavaScript programming!</h1>" ); => ให้แสดงคำว่า Hello
ข้อมูลผู้ใช้กรอก welcome to JavaScript programming!
6.4.1
หน้ายินดีต้อนรับคุณแบบไดนามิกสคริปต์ต่อไปสร้างเพจต้อนรับแบบไดนามิกที่ได้รับชื่อของผู้ใช้นั้นจะแสดงบนหน้าเว็บสคริปต์ใช้กล่องโต้ตอบอื่นที่กำหนดไว้ล่วงหน้าจากหน้าต่างวัตถุพรอมต์โต้ตอบซึ่งจะช่วยให้ผู้ใช้สามารถป้อนค่าที่สคริปต์สามารถใช้6.5 รูปที่มีเอาท์พุทสคริปต์และตัวอย่างคำหลักเป็นคำที่มีความหมายพิเศษใน JavaScriptvar
คำที่ใช้ในการประกาศชื่อของตัวแปรตัวแปรเป็นที่ตั้งในหน่วยความจำของเครื่องคอมพิวเตอร์ที่สามารถใดระบุที่ถูกต้องประกอบด้วยตัวอักษรตัวเลขขีดล่าง
(_) และเครื่องหมายดอลลาร์ ($) ที่ไม่ได้เริ่มต้นด้วยหลักและไม่ได้มีคำหลัก
JavaScript สำรองท้ายประกาศด้วยเครื่องหมายอัฒภาค (;)
และสามารถแยกหลายบรรทัดด้วยตัวแปรในการประกาศคั่นด้วยเครื่องหมายจุลภาค
(กลายเป็นรายการคั่นด้วยเครื่องหมายจุลภาคของชื่อตัวแปรแต่ละ)ลายตัวแปรอาจจะประกาศในการประกาศหรือการประกาศในหลาย
ๆความเห็นความเห็น multiline เริ่มต้นด้วยตัวคั่น * /
และจบด้วยตัวคั่น *
/ข้อความที่อยู่ระหว่างตัวคั่นการแสดงความคิดเห็นทั้งหมดจะถูกละเว้นโดยล่ามตัวแปรที่มีการกำหนดค่าด้วยกับคำสั่งที่ได้รับมอบหมายโดยใช้ประกอบการมอบหมาย
=ดำเนินการ = จะเรียกว่าผู้ประกอบการไบนารีเพราะมันมีสองตัวถูกดำเนินการคำสำคัญ Null
6.4.2 นัมเบอร์เพิ่ม
สคริปต์ต่อไปของเราแสดงให้เห็นถึงการใช้งานอื่น
ๆ ของกล่องโต้ตอบพร้อมที่จะได้รับข้อมูลจากผู้ใช้ 6.5 แนวคิดหน่วยความจำชื่อตัวแปรที่สอดคล้องกับสถานที่ในหน่วยความจำของคอมพิวเตอร์ตัวแปรทุกคนมีชื่อประเภทและมูลค่าเมื่อค่าจะถูกวางในตำแหน่งหน่วยความจำค่าแทนที่ค่าก่อนหน้าในตำแหน่งที่เมื่อค่าที่อ่านออกจากตำแหน่งหน่วยความจำกระบวนการจะไม่ทำลายจาวาสคริปต์ไม่จำเป็นต้อง
6.6 เลขคณิตดำเนินการทางคณิตศาสตร์ขั้นพื้นฐาน (+, -,
*, /, และ%)
ส่วนที่ผู้ประกอบการไบนารีเพราะพวกเขาแต่ละคนทำงานบนสองตัวถูกดำเนินการ
โปรแกรมคำนวณเกรด
อธิบายโปรแกรม
unction calculateGrade() เป็นการสร้างฟังก์ชั่นสำหรับคำนวณเกรด ขึ้นมาvar g =
document.getElementById("g").value;บรรทัดนี้เป็นการเข้าไปอ่านค่าใน
Element ที่เป็น TextBox และเก็บค่าไว้ในตัวแปร
g
var objDiv =
document.getElementById("showGrade");
บรรทัดนี้คือการเข้าถึง Element ที่เป็น Tag Div เพื่อกำหนดค่าให้มันแสดงเกรดออกมา
else if
if(g >= 80)เช็คว่า g
มีค่ามากกว่า หรือ เท่ากับ 80 ใช่หรือไม่
หากใช่จะแสดงข้อความ ได้เกรด Aelse if(g >= 70)
นี่คือเงื่อนไขถัดมาจะทำในกรณีที่เงื่อนไขก่อนหน้าไม่เป็นจริง
คือถ้าเงื่อนไขแรกไม่เป็นจริงงั้น g มีค่ามากกว่า หรือ เท่ากับ 70 ใช่หรือไม่
ถ้าใช่จะแสดงข้อความ ได้เกรด B
บรรทัด 24เกรด <input type="text"
name="g" id="g"><input type="button"
value="คำนวณเกรด" onclick="calculateGrade()">
คำว่า onclick="calculateGrade()"
นี่เป็น Event ของ button หรือ ปุ่ม
เมื่อมีการคลิกที่ปุ่ม ในที่นี้ผมต้องการให้ทำ function calculateGrade() หรือ function สำหรับ คำนวณเกรด
ที่เราเขียนขึ้นมานั่นเองจากภาพผมกรอกตัวเลข
80 เข้าไปใน TextBox จากนั้นกดปุ่มคำนวณเกรด
ผลลัพธ์แสดงออกมาด้านล่างเป็นคำว่า
ได้เกรด <!--[if !vml]--><!--[endif]-->A
โปรแกรมแสดงแม่สูตรคูณ
ตามตัวเลขที่ป้อนเข้าไป
<html>
<head>
<title>
step-juice.blogspot.com:: โปรแกรมแสดงแม่สูตรคูณ </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<script
language="JavaScript">
function show()
{
var
number = document.getElementById("number").value;
var objDiv =
document.getElementById("divShow");
for(var i = 1; i<=12; i++)
{
objDiv.innerHTML += number + "
x " + i + " = " +
parseInt(number) * i + "< br />"; //
tag br ใน blog มันเขียนติดกันไม่ได้ แก้ให้มันติดกันด้วยนะค่ะ -*-
}
}
</script>
</head>
<body> สู
ตรคูณแม่ <input type="text" name="number"
id="number">
<inputtype="button"
value="แสดงแม่สูตรคูณ" onclick="show()">
<div
id="divShow"></div>
</body>
</html>
