تعريف definition JavaScript

-

تعريف JavaScript

 هي لغة برمجة الويب. وتعتبر من أكثر لغات البرمجة شيوعًا في العالم، غالبًا ما يتم اختصار JavaScript ب JS. أيضا معظم متصفحات الويب تدعم هذه اللغة مثل Chrome و Edge و Firefox وما إلى ذلك.

من المهم أن يعرف مطوري مواقع وتطبيقات الويب هذه اللغة ولازم يكون عندهم القدرة على قراءة JavaScript وكتابتها الأكواد البرمجية واستكشاف الأخطاء وإصلاحها.

المتطلبات الأساسية 

لا توجد شروط او متطلبات مسبقة لتعلم JavaScript.لكن بننصح ان تتعلم HTML قبل JavaScript السبب ان بنستخدم ملفات HTML بكثره مع JavaScript.

الأهم هو ان يكون عند الرغبة والإصرار على التعلم والنجاح

تمام. 

اين يكتب كود JavaScript

كود JavaScript يكتب بين <script> و </script> في صفحات HTML ويطلق عليهم اسم tags

حكينا عن tag في HTML .

ملاحظة كود JavaScript يمكن ان يستخدم في أكثر من مكان وأكثر من لغة (View, HTML, aspx, asp, ... الخ) 

تمام بنستخدم في هذه الدرس برنامج Visual studio code 

لمعرفة خطوات التحميل انقر هنا. 

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

نعمل برنامج لإظهار رسالة ترحيب عند فتح الصفحه. 

من برنامج visual studio نضيف صفحة HTML جديده: 

بعدها نختار 


تمام سمي الصفحة الاسم المناسب الك. (بنسميها هون JS.html)
وبعدها نضيف الكود التالي
<!DOCTYPE html>
<html>
<body>
<h3>JavaScript in Html</h3>
<p id="PWelcomeMessage"></p>
<script>
document.getElementById("PWelcomeMessage").innerHTML = "Hi, Welcome to my first JavaScript";
</script>
</body>
</html> 
النتيجة: 
تمام نفهم شو عملنا. 
في البداية عملنا صفحة HTML واضافنا فيها tags للعنوان واستخدمنا <h3> وبعدها اضفنا p> tag> لعرض القيمة المرسلة من JavaScript داخلها.  واعطينا Id لها يساوي PWelcomeMessage
بعد هيك اضفنا الكود JavaScript ولاحظ ان الكود مكتوب داخل <script>…. </script>
واحده من الطرق في JavaScript للوصول الى HTML tag استخدام الامر getElementById ويستخدم هذه الامر مع Id الخاص ب tags. 
طريقة الكتابة بتكون: 
document.getElementById("HTMLTagID").innerHTML="Content"
استخدمنا أيضا الامر innerHTML لعرض المحتوي المطلوب داخل هذا tag 
ملاحظة: في بعض الأحيان يتم إضافة attribute التالية "type = "text / javascript الى <script> وبكون شكل اكود 
<script type="text/javascript">…. </script>

هذه type attribute غير ضرورية. لان JavaScript هي لغة البرمجة النصية scripting language الافتراضية في HTML.
يمكن إضافة اكواد JavaScript في أي مكان في صفحة HTML 
في المثال السابق وضعنا كود JavaScript اسفل في <Body> 
ملاحظة: وضع scripts  في الجزء السفلي من <body> يؤدي إلى تحسين سرعة العرض ، السبب اذا كان الكود في اول الصفحة يتم أولا قراءة هذا الكود الي ممكن يؤدي إلى إبطاء العرض. 

وضع كود JavaScript في <head> 
بالزبط نفس الطريقة السابقة باستثناء مكان الكود بكون في <head> 
طبق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html>
    <head>
      <script>
         document.getElementById("PWelcomeMessage").innerHTML = "Hi, Welcome to my first JavaScript";
      </script>
    </head>
<body>
<h3>JavaScript in Html</h3>
<p id="PWelcomeMessage"></p>
</body>
</html> 
النتيجة 
استخدام ملفات scripts خارجية. 

اكيد ممكن نعمل ملفات JavaScript خارجية واستخدامها داخل صفحات HTML 
نطبق مثال حتى نفهم الموضع
اضف ملف JavaScript في visual studio code واختر النوع JavaScript
صورة 


بعده هيك أضف الكود التالي لها:
document.getElementById("PWelcomeMessage").innerHTML = "Hi, Welcome to my first JavaScript from External";
واكيد لازم تحفظ الملف (اختر الاسم المناسب لك) احنا بنسميه JS 
تمام نرجع لملف HTML ونشوف كيف ممكن نستخدم هذه ملف JavaScript الخارجي. طريقة الإضافة بتكون بإضافة الكود التالي الى ملف HTML: 
<script src="JS.js"></script>
استخدمنا src لتحديد مكان الملف (اكيد لازم يكون الامتداد كامل للملف في مثالنا هون ملف JavaScript ، وملف HTML في نفس المكان).
وهيك بكون الكود الكامل لملف HTML 

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
<h3>External JavaScript in Html</h3>
<p id="PWelcomeMessage"></p>
<script src="JS.js"></script>
</body>
</html> 

يمكن وضع الكود الخاص باستدعاء ملفات JavaScript الخارجية في أي مكان في صفحة HTML ولكن يفضل وضعها اسفل الصفحة في Body.

مزايا External JavaScript

  • من السهولة الفصل بين HTML وcode وبالتالي يجعل من السهل قراءة ملفات HTML و JavaScript وصيانتهما
  • يمكن لملفات JavaScript المخزنة مؤقتًا تسريع تحميل الصفحات

يمكن إضافة عدة ملفات script خارجيه إلى صفحة واحدة - استخدم عدة script tags

<script src="JS1.js"></script>
<script src="JS2.js"></script>

من الأفضل تنظيم العمل بحيث يتم وضع ملفات JavaScript في مجلد منفصل ونفس الاشي بالنسبة لملفات CSS وهكذا. 

اذا كان ملفات JS موجده داخل مجلد باسم JS يكون شكل الاستخدام (اجباري استخدام مسار الملف كامل)

<script src="/js/JS.js"></script>

وهكذا