ภายในภายนอก Javaสคริปต์: เรียนรู้ด้วยตัวอย่าง

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

คุณสามารถใช้ได้ Javaโค้ดสคริปต์มี 2 วิธี

  1. คุณสามารถรวมไฟล์ Javaโค้ดสคริปท์ ภายในเอกสาร HTML ของคุณ ตัวเอง
  2. คุณสามารถเก็บไฟล์ Javaโค้ดสคริปท์ใน ไฟล์ภายนอกแยกต่างหาก แล้วชี้ไปที่ไฟล์นั้นจากเอกสาร HTML ของคุณ

ภายในคืออะไร Javaสคริปต์?

จนถึงตอนนี้เราใช้ Internal JS แล้ว นี่คือตัวอย่าง -

<html>
<head>
  <title>My First JavaScript code!!!</title>
  <script type="text/javascript">
    // Create a Date Object
    var day = new Date();
    // Use getDay function to obtain todays Day.
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
    // This value is stored in today variable
    var today = day.getDay();
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
    var weekday = new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    // weekday[today] will return the day of the week as we want
    document.write("Today is " + weekday[today] + ".");
  </script>
</head>
<body>
</body>
</html>

ภายนอกคืออะไร Javaสคริปต์?

คุณวางแผนที่จะแสดงวันที่และเวลาปัจจุบันในเว็บเพจทั้งหมดของคุณ สมมติว่าคุณเขียนโค้ดและคัดลอกลงในเว็บเพจทั้งหมดของคุณ (สมมติว่า 100 หน้า) แต่ในภายหลังคุณต้องการเปลี่ยนรูปแบบวันที่และเวลาที่แสดง ในกรณีนี้ คุณจะต้องทำการเปลี่ยนแปลงในเว็บเพจทั้งหมด 100 หน้า ซึ่งจะเป็นงานที่ใช้เวลานานและยากมาก

ดังนั้นให้บันทึก Javaต้นฉบับ รหัสในไฟล์ใหม่ที่มีนามสกุล .js จากนั้น เพิ่มบรรทัดโค้ดในหน้าเว็บทั้งหมดของคุณเพื่อชี้ไปที่ไฟล์ .js ของคุณดังนี้:

<script type="text/javascript" src="currentdetails.js">

หมายเหตุ: ถือว่าไฟล์ .js และหน้าเว็บทั้งหมดของคุณอยู่ในโฟลเดอร์เดียวกัน หากไฟล์ external.js อยู่ในโฟลเดอร์อื่น คุณจะต้องระบุเส้นทางแบบเต็มไปยังไฟล์ของคุณในแอตทริบิวต์ src

วิธีการเชื่อมโยงภายนอก Javaต้นฉบับ

var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;
	
var hours = currentDate.getHours(); 
var mins = currentDate.getMinutes(); 
var secs = currentDate.getSeconds(); 
var strToAppend;
if (hours >12 )
{
	hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
	hours1 = "0" + hours;
	strToAppend = "AM";
}
else
{
	hours1 = hours;
	strToAppend = "PM";
}
	
if(mins<10)
mins = "0" + mins;
if (secs<10)
	secs = "0" + secs;

switch (month)
{
	case 1:
		monthName = "January";
		break;
	case 2:
		monthName = "February";
		break;
	case 3:
		monthName = "March";
		break;
	case 4:
		monthName = "April";
		break;
	case 5:
		monthName = "May";
		break;
	case 6:
		monthName = "June";
		break;
	case 7:
		monthName = "July";
		break;
	case 8:
		monthName = "August";
		break;
	case 9:
		monthName = "September";
		break;
	case 10:
		monthName = "October";
		break;
	case 11:
		monthName = "November";
		break;
	case 12:
		monthName = "December";
		break;
}

var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);

นี่คือไฟล์ currentdetails.js ของคุณ ไม่ต้องกังวลว่าโค้ดจะยาวเกินไป เพราะคุณจะเรียนรู้การเขียนโค้ดได้ในไม่ช้า แก้ไขเอกสาร HTML ของคุณดังนี้:

<html>
	<head>
	   <title>My External JavaScript Code!!!</title>
	   <script type="text/javascript" src="currentdetails.js">
	   </script>
	</head>
	<body>
	</body>
</html>

เมื่อใดจึงควรใช้ทั้งภายในและภายนอก Javaต้นฉบับ Code?

หากคุณมีโค้ดเพียงไม่กี่บรรทัดที่เฉพาะเจาะจงสำหรับหน้าเว็บใดหน้าเว็บหนึ่ง คุณควรเก็บโค้ดของคุณไว้ Javaโค้ดสคริปต์ภายในเอกสาร HTML ของคุณ

ในทางกลับกันถ้าคุณ Javaโค้ดสคริปต์ถูกนำไปใช้ในหลายเว็บเพจ ดังนั้นคุณควรพิจารณาเรื่องการเก็บรักษาโค้ดสคริปต์ไว้ด้วยping ควรแยกโค้ดของคุณไว้ในไฟล์ต่างหาก ในกรณีนี้ หากคุณต้องการแก้ไขโค้ด คุณก็แค่เปลี่ยนไฟล์เดียว ซึ่งทำให้การบำรุงรักษาโค้ดง่ายขึ้น นอกจากนี้ หากโค้ดของคุณยาวมาก ก็ควรเก็บไว้ในไฟล์แยกต่างหากเช่นกัน เพราะจะช่วยให้การแก้ไขข้อผิดพลาดง่ายขึ้น

สรุปโพสต์นี้ด้วย: