كيف نكتب كود جافا سكريبت ؟

-

بداية ماذا يمكن أن تفعل لغة JavaScript ؟

  • تقدم لغة الجافاسكربت JavaScript أداة برمجية لصفحات HTML : ان كاتبو صفحات HTMLL ليسوا بمبرمجين وعلى الرغم من أن لغة الجافاسكربت لغة برمجية وبتركيبة بسيطة يمكن لأي شخص ارفاق أكواد جافاسكربت في صفحات HTML .
  • يمكن استخدام لغة الجافاسكربت JavaScript مع الأحداث : مع هذه الخاصية يمكن ارفاق أحداث في صفحات HTMLL عند حدوث شيئاً ما مثل انتهاء تحميل الصفحة أو عند ضغط المستخدم على عنصر HTML معين في صفحة الويب .
  • يمكن للغة الجافاسكربت JavaScript كتابة وقراءة عناصر HTML : يمكن للغة الجافاسكربت كتابة وتغيير محتوى عناصر HTMLL .
  • يمكن استخدام لغة الجافاسكربت JavaScript مع النماذج : حيث تسمح لغة الجافاسكربت JavaScriptt بالتأكد من النموذج قبل ارساله الى السيرفر من أجل تجنب عمليات اضافية يتم تحميلها على السيرفر .
  • يمكن استخدام لغة الجافاسكربت JavaScript لمعرفة متصفح المستخدم : حيث  يمكن تحديد نوع المتصفح الذي يستخدمه الزائر ثم فتح صفحة معينة مختلفة حسب المتصفح الذي لديه .
  • يمكن استخدام لغة الجافاسكربت JavaScript لإنشاء كوكيز المتصفح cookies : حيث يمكن تحميل بيانات ومعلومات على حاسوب الزائر مثل ( تأريخ المتصفح ) .





كيفية الاستخدام


يستخدم الوسم <script> لادراج كود جافاسكربت داخل صفحات HTML

كتابة الكود داخل صفحة الويب

في المثال التالي سيتم استخدام كود جافاسكربت داخل وسم <P> وسيتم عرض التاريخ الحالي ضمنه.
مثال
<html>
<body>
<h1>أول صفحة جافاسكربت</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
ملاجظة : حاول أن تتجنب استخدام الكود الوظيفي document.write()في أكواد الجافاسكربت الضخمة لأن صفحة HTML ستفرط في كتابة الأكواد عند استخدام document.write() داخل كود وظيفي أو عند تحميل الصفحة . ولكن على أي حال يعتبر كتابة الكود الوظيفي document.write() أسهل طريقة لإظهار نتيجة كود الجافاسكربت .
يمكنكم التجربة هنا

تغيير عناصر HTML

في المثال التالي سيتم استخدام كود جافاسكربت داخل وسم <P> من خلال استدعاء اسم معين له وسيتم عرض التاريخ الحالي ضمنه.
مثال
<html>
<body>
<h1>أول صفحة جافاسكربت</h1>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
ملاحظة : يمكن للغة جافاسكربت معالجة عناصر HTML حيث تستخدم طريقة DOM الحصول على العنصر من خلال الآي دي الخاص به getElementById() أي من خلال اسم فريد يمكن استخدامه في الجافاسكربت تماماً مثل لغة  CSS

يمكنكم التجربة هنا
مثال مشروح
يمكن استخدام الوسم <script> لإدراج كود جافاسكربت داخل صفحة HTML
بعد ادخال الوسم <script> يجب اضافة لاحقة لتعريف نوع لغة هذا السكربت .
يخبر بداية الوسم <script> ونهايته </script> أين سيبدأ كود الجافاسكربت واين سينتهي .
<html>
<body>
<h1> أول صفحة جافاسكربت </h1>
<p id="demo">هذه فقرة</p>
<script type="text/javascript">
هنا سيتم ادراج كود الجافاسكربت
</script>
</body>
</html>
يحتوي السطر بين بداية الوسم <script> ونهايته </script> كود الجافاسكربت الذي سيتم قرائته  من قبل المتصفح .
وفي هذه الحالة سيقوم المتصفح باستبدال محتوى عنصر HTML بالآي دي demo وسيتم اظهار الوقت الحالي id=”demo”
<html>
<body>
<h1>أول صفحة جافاسكربت</h1>
<p id="demo">هذه فقرة</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>

</body>
</html>

جرب بنفسك هنا


عند عدم استخدام الوسم <script> سيقوم المتصفح بإظهار الكود
“document.getElementById(“demo”).innerHTML=Date();” كنص عادي في الصفحة .


    نتمنى ان تكون بداية جيدة في لغة JavaScript 

    تعليقات

    إرسال تعليق