English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

تعليميات HTML الأساسية

وسائط HTML

دليل مرجعي HTML

دليل أساسي HTML5

API HTML5

وسائط HTML5

سكريبتات HTML

يمنح JavaScript صفحات HTML ديناميكية و تفاعلية أكثر؛ يمكن من خلاله تحقيق تأثيرات صفحة الويب.

مثال على ذلك على الإنترنت

إدراج سكربت
كيفية إدراج سكربت في وثيقة HTML.

استخدام علامة <noscript>
كيفية التعامل مع متصفحات لا تدعم السكربت أو تعطيلها.

علامة <script> في HTML

تستخدم علامة <script> لتعريف سكربت العملاء، مثل JavaScript.

يمكن لعنصر <script> أن يحتوي على تعليمات السكربت أو يمكنه إشارة إلى ملف سكربت خارجي باستخدام خاصية src.

يستخدم JavaScript غالبًا في عمليات معالجة الصور، التحقق من صحة النماذج، وتحديث المحتوى بشكليندي.

سيقوم السكربت التالي بإخراج "Hello World!" إلى المتصفح:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>دليل أساسي(oldtoolbag.com)</title> 
</head>
<body>
<script>
document.write("Hello World!")
</script> 
</body>
</html>
اختبار النظر في ‹/›

علامة <noscript> في HTML

تقدم علامة <noscript> محتوى بديلاً عندما لا يمكن استخدام السكربت، مثل عند تعطيل السكربت في المتصفح أو عدم دعم المتصفح للسكربت العملاء.

يمكن لعلامة <noscript> أن تحتوي على جميع العناصر التي يمكن العثور عليها في عنصر <body> من صفحة HTML العادية.

سيتم عرض محتوى علامة <noscript> فقط عندما لا يدعم المتصفح السكربت أو يوقفه:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>دليل أساسي(oldtoolbag.com)</title> 
</head> 
<body>
<script>
document.write("Hello World!")
</script>
<noscript>آسف، متصفحك لا يدعم JavaScript!</noscript>
<p>المتصفحات التي لا تدعم جافا سكريبت ستستخدم محتوى علامة <noscript> المحدد (نص) كبديل.</p>
 
</body>
</html>
اختبار النظر في ‹/›

عرض تأثير سكريبت جافا سكريبت

مثال على كود جافا سكريبت:

يمكن للجافا سكريبت الكتابة مباشرة في流出 HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل أساسي(oldtoolbag.com)</title>
</head>
<body>
    
<p>
يمكن للجافا سكريبت استخدام document.write لتبدأ مباشرة في كتابة流出 HTML:
</p>
<script>
document.write("<h1>هذا هو عنوان H1</h1>");
document.write("<p>هذا هو فقرة P.</p>");
</script>
<p>
يمكنك استخدام <strong>document.write</strong> فقط في流出 HTML.
إذا كنت تستخدمها بعد تحميل المستند (مثل في دالة)، ستغطي المستند بأكمله.
</p>
</body>
</html>
اختبار النظر في ‹/›

استجابة أحداث جافا سكريبت:

<html>
<head> 
<meta charset="utf-8"> 
<title>دليل أساسي(oldtoolbag.com)</title> 
</head>
<body>
<h1>سكريبت جافا سكريبت الأولى</h1>
<p id="demo">
يمكن للجافا سكريبت تفعيل الأحداث، مثل ضغط الزر.</p>
<script>
function test_js()
{
    document.getElementById("demo").innerHTML="Hello JavaScript(oldtoolbag.com)!";
}
</script>
<button type="button" onclick="test_js()">أضغط</button>
</body>
</html>
اختبار النظر في ‹/›

تعامل جافا سكريبت بنمط HTML:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>دليل أساسي(oldtoolbag.com)</title> 
</head>
<body>
    
<h1>قطعة جافا سكريبت الأولى</h1>
<p id="demo">
يمكن للجافا سكريبت تغيير نمط عناصر HTML (oldtoolbag.com).
</p>
<script>
function test_js()
{
    x=document.getElementById("demo")        //        العثور على العنصر
    x.style.color="#ff3300";        //        تغيير النمط
}
</script>
<button type="button" onclick="test_js()">انقر هنا</button>
    
</body>
</html>
اختبار النظر في ‹/›

علامة سكريبت HTML

العلامةوصف
<script>يحدد السكريpt على الجهاز
<noscript>يحدد النص الذي لا يمكن عرضه في المتصفحات التي لا تدعم السكريpt