أساسيات لغة جافا سكريبت؛ شرح استخدام javascript مع مثال

أساسيات لغة جافا سكريبت؛ شرح استخدام javascript مع مثال

ما هي أساسيات لغة جافا سكريبت؟ استخدامات لغة javascript والأسباب لتعلم هذه اللغة، بالإضافة إلى شرح طرق ربط ملف جافا سكريبت مع صفحة html.

لا غنى عن أساسيات لغة جافا سكريبت javascript فهي لغة عالمية مطلوبة في معظم الشركات الكبرى والمتوسطة، إلى جانب لغات أخرى مثل لغات التصميم للويب.

ما هي لغة جافا سكريبت؟

هي لغة سكريبت برمجية أي أنها لا تحتاج إلى مترجم Compiler أو بمعنى آخر أن أكواد هذه اللغة موجودة بالفعل في البيئة أثناء وقت التشغيل، ظهرت هذه اللغة في عام 1995 كما كانت تسمى سابقًا بلغة Live Script، لغة الجافا السكريبت تستخدم بكثرة مع لغة التصميم html وcss حيث تضفي هذه اللغة الهيئة الديناميكية لمحتوى صفحات الويب، كما أنها أنه بالإمكان استعمالها في معالجة المعلومات والتفاعل مع المستخدم مع عدم الحاجة إلى الوصول إلى الخادم، كما ننوه بأن جافا سكريبت ليست لها أي علاقة بلغة الجافا.

استخدامات لغة الجافا سكريبت

ربما أنك سمعت أو حتى تعلمت أن لغة جافا سكريبت تستخدم فقط في برمجة وتصميم تطبيقات الويب، لكنها في الحقيقة أن استخدامات لغة جافا سكريبت واسعة، أبرزها:

العروض التقديمية.

يمكن عمل العديد من العروض التقديمية باستخدام لغة الجافا سكريبت وذلك لأنها توفر بعضًا من المكتبات مثل BespokeJS وكذلك RevealJS حيث أن الأولى تمكن المبرمج من عمل شرائح للعروض التقديمية على شبكة الانترنت، والثانية تمكنك من إنشاء الكثير من التشكيلات المميزة سواء باستخدام لغة HTML أو CSS لإضفاء الجمال إليه.

الألعاب باستخدام لغة javascript

كذلك تستخدم لغة الجافا سكريبت في برمجة الألعاب أيضًا نظرًا لوجود بعض المكتبات المتخصصة لتسهل التعامل مع التصاميم وخاصةً عند دمج لغة Javascript مع HTML، حيث توجد عدة ألعاب مشهورة ومن الأمثلة عليها:

  • لعبة polycraft التي يمكن استخدامها في المتصفح.
  • لعبة Words With friends التي تعمل على هواتف الايفون.
  • أيضا لعبة Tower Building.
  • لعبة 2048 وهي لغز أرقام يمكن لعبها على الانترنت في الموقع 2048game.com.

الرسم باستخدام لغة جافا سكريبت

إن لغة جافا سكريبت لوحدها قد لا تصنع الكثير من اللغات الأخرى يظهر الفرق جليًا حيث تمتلك لغة html على عنصر جديد وهو canvas الذي يضيف إمكانية رسم أشكال ثلاثية الأبعاد على الصفحة من خلال المتصفح حيث تكون لغة الجافا سكريبت إلى جانبها أيضًا.

الساعات الذكية

قد يتم استخدام لغة javascript في برمجة الساعات الذكية حيث توجد مكتبة Pebble.js والتي تستخدم من قبل مطوري الجافا سكريبت لإنشاء تطبيقات تعمل على الساعات الذكية.

تطبيقات الهواتف المحمولة من خلال لغة جافا سكريبت

قد تستغرب من إمكانية لغة الجافا سكريبت من عمل تطبيقات الهاتف الذكي الأندرويد وIOS حيث أن إطار العمل PhoneGap وكذلك React Native مبرمج خصيصًا لذلك.

دائمًا قبل تعلم أي لغة برمجة لا بد أن تسأل نفسك لماذا أتعلمها؟، أو بمعنى آخر ما الذي أستفيده من تعلمها؟، في الحقيقة هناك أسباب كثيرة قد تدفعك لتعلم أساسيات لغة الجافا سكريبت.

  1. تعد لغة جافا سكريبت من أشهر اللغات وذلك وفقًا لموقع Stackoverflow.
  2. أنها لغة افتراضية في المتصفحات بالتالي فهي مهمة عند إنشاء المواقع فلا يكاد يخلو موقع منها.
  3. سهلة للتعلم ومناسبة للمبتدئين وذلك لأنها تعمل على المتصفحات بسهولة.
  4. أيضا هذه اللغة مطلوبة في سوق العمل كثيرًا سوآءا أكان في تصميم الويب الأمامي أو حتى برمجة الويب الخلفي.

“اقرأ أيضًا عن: أفضل لغات البرمجة للأندرويد


شرح أهم أساسيات لغة جافا سكريبت

يمكن توضيح عدد من الأساسيات في لغة جافا سكريبت وهي المتغيرات وخطورتها، وكيفية الربط، والدوال والتعليقات وكيفية الوصول والتعديل على العناصر، والأحداث وأخيرًا المؤقت.

شرح المتغيرات في لغة javascript

بالنسبة للمتغيرات في لغة جافا سكريبت فهي عبارة عن أوعية لحفظ البيانات فهي من أهم أساسيات لغة جافا سكريبت ولا يشترط في ذلك تحديد نوع البيانات في المتغير، هذا يعني أنها أقرب إلى لغة البايثون في تعريف المتغيرات، والتي تعرف نوع المتغير مباشرةً، لعكس لغة c++ و الجافا.

توجد طريقتين لتعريف متغير من أي نوع كان وهذان الطريقتان هما:

  • طريقة var: عند استخدام هذه الطريقة لتعريف المتغير فإن هذه المتغيرات يمكن التعامل معها في نطاق معين مثل الدوال فقط، ويعرف عند المبرمجين بالمتغير المحلي أو الخاص local.
  • طريقة let: أما عندما نستخدم let فيمكننا حينها استخدام المتغير وتحديثه من أي مكان في البرنامج، وهو ما يعرف بالمتغير العام global.

خطورة المتغيرات العامة

يمكن أن تكون المتغيرات العامة في الملف المكتوب بلغة جافا سكريبت، لأنها تكون معرّضه للتغير من قبل أي شخص، مثال البرنامج التالي:

;let var1 = 0

 }()function var2

;let var3= 3
;let var4 = 4

{
;"var var5 = "hello

في هذا المثال توجد ثلاث متغيرات عامة وهي var1 وvar2 وvar5 ، تلاحظ بأن الدالة نفسها متغير عام، أم بالنسبة للمتغيرات التي داخلها فهي محلية، بالتالي حتى لو وضعنا الكود بالكامل في دالة واحدة سيبقى لدينا متغير عام واحد، إذن كيف نجعل عدد المتغيرات global يساوي صفرً؟

يمكن تطبيق الكود التالي لجعل جميع المتغيرات والدوال local:

}() function )

كتابة جميع الأكواد والدوال هنا

 ;()  ({
(صورة على التطبيق)

شرح ربط ملف javascript بصفحة html

في الحقيقة ربط ملف لغة جافا سكريبت لا يختلف كثيرًا عن طريقة ربط ملف css إلى صفحة html، فقط اتبع أحد الطرق الآتية:

  • إما إنشاء ملف يحمل الامتداد js. في نفس المجلد لملف html، ثم كتابة كود في وسم head وهو:

< "script type="text/javascript" scr="file.js>

<script/>

بعد ذلك تكتب كافة الأكواد والدوال في الملف، وهذه هي أفضل طريقة.

  • أو فتح وسم script في جزء head أيضًا ثم وضع كل أكواد جافا سكريبت داخل ملف html، وهذه الطريقة غير سيئة للغاية لكن لا نحبذ استخدامها في المشاريع الكبيرة.
  • استخدام الخاصية script في جميع وسوم html ثم كتابة جميع أكواد لغة جافا سكريبت داخل علامة التنصيص مع الفصل بينهما باستخدام الفاصلة المنقوطة.

الدوال في لغة javascript

هناك نوعان من الدوال التي يمكن استخدامها في كأحد أساسيات لغة جافا سكريبت، وهي:

الدوال المعرفة مسبقًا: وهي الدوال التي تساعد على عمل معين في لغة جافا سكريبت واشهرها هي دالة() alert، حيث تمرر فيها  أي قيمة لكي يعرضها المتصفحة كرسالة تنبيه مثلًا:

;alert("Welcome visitor")

قائمة بأهم الدوال الجاهزة في لغة جافا سكريبت:

الدالة الغرض منها
()toString مثل اللغات الأخرى، تحوّل أي قيمة عددية إلى قيمة نصية
()valueOf يعيد القيمة العددية
()indexOf يعيد العنوان لعنصر معين سوآء أكان في مصفوفة أو حتى لنص معين.
()charAt يعيد قيمة الحرف في النص بحسب انديكس محدد، حيث نمرر إليه العنوان.
()concat يقوم بتجميع قيمتين نصيتين وتعيد لنا القيمة الناتجة.
()length يعيد لنا قيمة طول النص.
()toLowerCase يحول النص كله إلى حروف صغيرة.
()toUpperCase يحول النص كله إلى حروف كبيرة.
()search يقوم بالبحث عن تعبير نصي في string محدد.
()split يقسّم نصًا معينًا إلى مصفوفة تتكون من عدد من النصوص الفرعية.
()pow دالة الأس الرياضية.
()link ينشأ عنصر link من لغة html وذلك لطلب عنوان URL آخر.
()join لضم ودمج كل العناصر في مصفوفة إلى string
()sort لترتيب عناصر مصفوفة ما.
()Date هذه الدالة تعيد الوقت والتاريخ
ملاحظة: قد توجد هذه الدوال داخل كائنات، لذا يجب ذكرها لاستخدامها، مثل ()Math.pow.

الدوال التي يعرفها المبرمج: ويكون ذلك بذكر الكلمة المفتاحية function يليه اسم الدالة ثم () لكتابة البارامترات بها (أي القيم المراد تمريرها إلى الدالة)، ثم فتح حاصرتين {…} تضع فيها جميع أكواد الجافا سكريبت، مثال على ذلك:

()function test

}

;"let name = "Mohammed

; alert ("Hello" + name)

{

شرح التعليقات في لغة جافا سكريبت

تعد التعليقات أيضًا أحد أساسيات لغة جافا سكريبت، أو حتى أي لغة أخرى بشكل عام حيث، تشبه التعليقات في لغة جافا سكريبت التعليقات في لغة c++ و الجافا، حيث يمكن تضمين تعليق بطريقتين هما:

  • التعليق في سطر واحد: من خلال علامة السلاش مرتين فقط “//”.
  • التعليق متعدد الأسطر ليتضمن أسطر متعددة من خلال وضع العلامة /*جميع تعليقاتك هنا*/.

اللوب والجمل الشرطية في لغة javascript

تتشابه لغة c++ مع جافا سكريبت وحتى لغة الجافا في كيفية كتابة الكود، مثال بسيط على برنامج مكتوب بواسطة لغة جافا سكريبت يعطي مجموع الأعداد الزوجية التي تبدا من 1 إلى 100 حيث أن  فيه جملة if و كذلك for:

;let sum = 0

}( ++let x=1 ; x<=100 ; x)for

}(x %2== 0)if

;sum = sum + y

{

{

كما أن الفرق بين جمل while و Do while و for بسيط كما في لغة السي بلاس بلاس من هنا.

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

ربما عرفت أن معظم لغات البرمجة يوجد بها دالة رئيسية، هذه الدالة تتنفذ في بداية عمل البرنامج وبالتالي تقوم باستدعاء الدوال الأخرى، لكن هذا المفهوم يختلف في لغة جافا سكريبت وذلك لأنها لا تتعامل مع دالة main لاستخدام الدوال، وإنما الأحداث، فإذا تفاعل المستخدم مع الصفحة ينشأ حدث محدد مثلًا حدث من نوع النقر، عندها نقول له استدع الدالة كذا وكذا وهلم جرا، مثال توضيحي:

<DOCETYPE html!>

<html>

<head>

<script>

}()function f

;("You already clicked")alert

{

<script/>

<head/>

<body>

<div/> انقر هنا  < ";()div onclick="f>

<body/>

<html/>

لاحظ وجود الفاصلة المنقوطة داخل علامة التنصيص عند الاستدعاء للدالة.

الوصول إلى المحتويات وتعديلها

يمكن الوصول إلى عناصر صفحة html أو حتى التعديل عليها من خلال استدعاء العنصر بواسطة هويته id ثم وضعه في متغير، والطريقة كالتالي:

;("id") let anyName = document.getElementById

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

أيضا يمكن تعديل محتوى أي عنصر من خلال استدعائه بواسطة الهوية id ثم استخدام innerhtml كالمثال التالي:

;"document.getElementById("id1").innerHTML = "put your new contents

المؤقت لدوال لغة javascript

يستخدم المؤقت لتأخير تنفيذ الدوال بزمن محدد وهناك أربع دوال لذلك وهي:

الشرح للدالة صيغة الدالة
تقوم هذه الدالة بتنفيذ الدالة المدخلة لها لكن بعد مرور الوقت المحدد التي أعطيت لها. ;(وقت التأخير , الدالة)setTimeout
يوقف عمل المؤقت ;(عنوان التايمر)clearTimeout
تنفذ الدالة المعطاة بعد مرور الزمن المحدد مرارًا وتكرارًا. ;(وقت التأخير , الدالة)setInterval
دالة لإيقاف عمل المؤقت من خلال تمرير اسم المتغير ;(عنوان التايمر)clearInterval

“اقرأ أيضًا: أسهل مجالات البرمجة


مثال بسيط على تطبيق Visual studio code

خطوات إنشاء الملف على التطبيق:

  • نفتح البرنامج بعد ذلك ننقر على file ثم new file.
  • نختار اللغة ولتكن أولًا لغة html ونكتب الكود الأساسي لها ثم نحفظ الملف على مجلد ما.

    ما هي أساسيات لغة javascript
    إنشاء صفحة وربطها
  • بعد ذلك تنشأ ملف آخر بنفس الطريقة لكنه بصيغة javascript، وتحفظه في نفس المجلد باسم s.js.
  • ثم نربطها كما تعلمنا سابقًا، (في الصورة السابقة ربطناها بالفعل).
  • بعد ذلك نكتب على ملف javascript الكود التالي:

}()function fun1
;let r= document.getElementById("par")
;"r.innerHTML="Welcome dear on our website
;"r.style.backgroundColor="red
{

ثم تكتب في وسم head الكود التالي:

<"script src="s.js" type="text/javascript>

<script/>

أخيرًا نكتب الوسوم مع الايدي في وسم body:

<"p id="par>
Hello World
<p/>
<";()input type="button" value="ok" onclick="fun1>
<br>
<""=input id="btn" type="text" value>

بعد ذلك تظهر لنا النتيجة فعند الضغط يتغير النص في الفقرة.

شرح أساسيات لغة جافا سكريبت
التطبيق النهائي مع الأكواد

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

فهرس على قوقل نيوز

تابعنا الأن

مقالات هامة
تعليقات (0)

إغلاق