albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

HTML JavaScript | In Arabic

HTML JavaScript – فى هذا الفصل هنتعرف على JavaScript فى HTML. وكيفية إستخدامها؟ وكل المعلومات حولها، مع بعض الأمثلة التوضيحية.

 

HTML JavaScript

 

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

البرنامج النصي script هو برنامج صغير يستخدم مع HTML لجعل صفحات الويب أكثر جاذبية وديناميكية.

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

 

مثال للتوضيح

JavaScript Example

<h2>JavaScript Example</h1>  
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello World!'">  
    Click to display Message.
</button>  

<p id="demo"></p>

JavaScript Example

 

HTML <script> Tag

 

يتم استخدام وسم <script> لتحديد برنامج نصي من جانب العميل client-side.

قد يكون JavaScript داخليًا أو خارجيًا يحتوي على عبارات نصية، ومن ثم يمكننا وضع وسم <script> داخل قسم <body> أو <head> لكن يفضل وضعه داخل قسم الـ <body> في نهايته.

يستخدم JavaScript طريقة ()document.getElementById لتحديد عنصر HTML.

 

مثال للتوضيح:
<script>
    document.getElementById("demo").innerHTML = "Hello World!";
</script>

 

أمثلة على JavaScript

 

1) يمكن لـ JavaScript تغيير محتوى HTML:

<h4>JavaScript change html content Example</h4>  
<button type="button" onclick="showMsg()">  
    Click to display Message.
</button>
 
<p id="demo">Hello JavaScript!</p>

<script>
    function showMsg() {
        document.getElementById("demo").innerHTML = "Hello World!";  
    }  
</script>

JavaScript change html content Example



Hello JavaScript!


 

2) يمكن لـ JavaScript تغيير attributes عناصر HTML:

<h4>JavaScript change attribute (src) image Example</h4>
<img id="img" src="albashmoparmeg_brand.png">  
<button type="button" onclick="changeImg()">  
    Click to Change Image.
</button>  
<script>  
    function changeImg() {   
        document.getElementById("img").src = "reading_img.png";  
    }  
</script>

JavaScript change attribute (src) image Example




 

3) يمكن لـ JavaScript تغيير style عناصر HTML:

<h4>JavaScript change style of elements Example</h4>
<p id="demo">JavaScript can change any style of elements.</p>
<button type="button" onclick="changeStyle()">
    Click to Change Style Element.
</button>
<script>  
    function changeStyle() {  
        document.getElementById("demo").style.color = "white";  
        document.getElementById("demo").style.backgroundColor = "green";
        document.getElementById("demo").style.fontWeight = "bold";    
        document.getElementById("demo").style.padding = "15px";    
    }  
</script>

JavaScript change style of elements Example


JavaScript can change any style of elements.



 

HTML <noscript> Tag

 

يُستخدم وسم <noscript> فى لغة HTML لكتابة برنامج نصي معطل في المتصفح، لا يتم عرض النص المكتوب داخل وسمين <noscript> </noscript> في المتصفح.

 

مثال للتوضيح:
<p id="demo"></p>
<script>  
    document.getElementById("demo").innerHTML = "Hello World!";    
</script>

<noscript>JavaScript not running in this browser.</noscript>

النص الموجود داخل وسم <noscript> لا يظهر إلا فى حالة عدم دعم المتصفح لغة JavaScript أو تم تعطلها من جانب العميل.

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML JavaScript” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.


إجراء الإختبار
HTML Tags Reference
HTML Code Examples
الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements