وضع كود جافا سكريبت داخل ملف HTML
وضع كود جافا سكريبت داخل ملف HTML
هناك مرونة لوضع كود جافا سكريبت في أي مكان في مستند HTML. ولكن الطرق التالية الأكثر تفضيلا لتشمل الجافا سكربت في ملف HTML.
- في قسم head.
Script <head>...</head>.
- في قسم body.
Script <body>...</body>.
- في قسم body و head.
Script <body>...</body> و <head>...</head>.
- في ملف خارجي external ثم يدرج في الاقسام body و head.
filename.js
أولا: إدراج جافا سكريبت في قسم head:
إذا كنا نريد تشغيل بعض الأحداث Events مثل عند نقر مستخدم في مكان ما، فإننا سوف تضع الأمر في قسم الرأس head على النحو التالي:
<html>
<head>
<script type="text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
ثانيا: إدراج جافا سكريبت في قسم body:
اذا كنا بحاجة لتشغيل كود عند تحميل الصفحة مثلا بحيث يولد محتوى الصفحة، يتم إدراج الكود في قسم <body>.
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
<p> bodyقسم </p>
</body>
</html>
ثالثا: إدراج جافا سكريبت في قسم body و head:
هنا ندرج كود جافا سكريبت في القسمين معاُ.
<html>
<head>
<title>Head and Body</title>
<script type="text/javascript">
function sayHello() {
alert("Hello World Message")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
النتيجة: سوف تكون اظهار نص Hello World داخل الصفحة و تم ادراج زرار بالضغط علية تظهر رسالة Hello World Message.
رابعاً: إدراج جافا سكريبت في ملف خارجي external:
عندما نبدأ العمل بشكل مكثف علي جافا سكريبت سوف نجد انه من الافضل فصل كود جافا سكريبت بملف خارجي.
وهنا مثال لإظهار كيف يمكننا تضمين ملف جافا سكريبت في ملف خارجي
وداخل ملف HTML الخاص بنا سوف نضيف التاج src :
<html>
<head>
<script type="text/javascript" src="filename.js"></script>
</head>
<body>
.......
</body>
</html>
على سبيل المثال، نقوم بكتابة الكود التالي داخل ملف filename.js وبعد ذلك يمكنك استخدام function sayHello في ملف HTML:
function sayHello() {
alert("Hello World")
}
ونقوم بكتابة الكود التالي داخل صفحة HTML.
<html>
<head>
<script type="text/javascript" src="filename.js"></script>
<script>
sayHello();
</script>
</head>
<body>
</body>
</html>
الأمر document.write
لا يقتصر فقط علي كتابة نص Hello ولكن يمكن اظهار بيانات معينة في وقت ما باستخدامها
لا يقتصر فقط علي كتابة نص Hello ولكن يمكن اظهار بيانات معينة في وقت ما باستخدامها
هنا تم اظهار نص معين من داخل متغير
<script>
var mytext = "Hello again";
document.write(mytext);
</script>
<html>
<head></head>
<body>
<script>
function newContent() {
alert("load new content");
document.open();
document.write("<h1>Some Text</h1>");
document.close();
}
</script>
</head>
<body onload="newContent();">
<p>Some content.</p>
</body>
</body>
</html>
لإظهار الوقت والتاريخ document.write
<html>
<head></head>
<body>
<script>
function newContent() {
document.write(Date());
}
</script>
</head>
<body onload="newContent();">
</body>
</body>
</html>
أضف تعليق:
0 comments: