JavaScriptالموسوعةدرس تتعليمي JS

1- مقدمه جافاسكربت

جافاسكربت هي لغة البرمجة الأكثر شيوعًا في العالم. جافاسكربت هي لغة برمجة الويب. جافاسكربت سهلة التعلم.

التعلم من خلال الأمثلة

الأمثلة أفضل من ألف كلمة. وغالبًا ما يكون فهم الأمثلة أسهل من التفسيرات النصية.

لماذا يجب دراسة جافاسكربت؟

جافاسكربت هي واحدة من اللغات الثلاث التي يجب على جميع مطوري الويب تعلمها:

  1. HTML لتعريف محتوى صفحات الويب
  2. CSS لتحديد تخطيط صفحات الويب
  3. جافاسكربت لبرمجة سلوك صفحات الويب

سنذكر جميع إصدارات جافاسكربت:

  • جافاسكربت الأصلية ES1 ES2 ES3 (1997-1999)
  • المراجعة الرئيسية الأولى ES5 (2009)
  • المراجعة الثانية ES6 (2015)
  • الإضافات السنوية (2016، 2017 … 2021، 2022)

سرعة التعلم

في الدروس القادمه ، أنت تتحكم في سرعة التعلم. الأمر متروك لك بالكامل.

إذا كنت تواجه صعوبة، خذ استراحة أو أعد قراءة المواد. تأكد دائمًا من فهمك لجميع الامثله وطبق بنفسك.

الطريقة الوحيدة لتصبح مبرمجًا ماهرًا هي: التدرب. التدرب. التدرب. Code. Code. Code!

حول الحصول على جافاسكربت

  • كيف أحصل على جافاسكربت؟
  • أين يمكنني تحميل جافاسكربت؟
  • هل جافاسكربت مجانية؟

لا داعي للحصول على جافاسكربت أو تنزيلها.

جافاسكربت موجودة بالفعل وتعمل في المتصفح الخاص بك على جهاز الكمبيوتر واللوحة والهاتف الذكي.

جافاسكربت مجانية الاستخدام للجميع.


جافاسكربت يمكنها تغيير محتوى HTML

إحدى طرق JavaScript العديدة للتعامل مع HTML هي getElementById ().

يوضح المثال التالي كيف يمكن لـجافاسكربت “العثور” على عنصر HTML (باستخدام id=”demo”) وتغيير محتوى العنصر (innerHTML) إلى “Hello JavaScript”:

document.getElementById("demo").innerHTML = "Hello JavaScript";

جافاسكربت تقبل كل من علامتي الاقتباس المزدوجتين والمنفردتين

في جافاسكربت، يمكن استخدام كل من علامتي الاقتباس المزدوجتين (“”) والمنفردتين (”) لتمثيل سلسلة نصية. لا يوجد فرق دلالي بينهما، أي أن جافاسكربت تفسر النص داخل كل من علامتي الاقتباس بنفس الطريقة.

document.getElementById('demo').innerHTML = 'Hello JavaScript';

جافاسكربت يمكنها تغيير قيم خصائص HTML

في هذا المثال، يغير جافاسكربت قيمة الخاصية src (المصدر) <img>:

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

جافاسكربت يمكنها تعديل خصائص نمط العناصر (CSS)

document.getElementById("demo").style.fontSize = "35px";

جافاسكربت يمكنها إخفاء عناصر HTML

يمكن إخفاء عناصر HTML عن طريق تغيير خاصية display (العرض):

document.getElementById("demo").style.display = "none";

جافاسكربت يمكنها إظهار عناصر HTML

يمكن أيضًا إظهار العناصر المخفية باستخدام تغيير خاصية display (العرض):

document.getElementById("demo").style.display = "block";

هل تعلم؟

جافاسكربت وجافا ليستا لغتين متشابهتين على الإطلاق، سواء من حيث المفهوم أو التصميم.

تم اختراع جافاسكربت بواسطة بريندان آيك في عام 1995، وأصبحت معيارًا لمنظمة Ecma International (ECMA) في عام 1997.

ECMA-262 هو الاسم الرسمي للمعيار. ECMAScript هو الاسم الرسمي للغة.

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى