دورة جافا سكربت - Javascript الدرس الاول | مدونة علم البرمجة والحاسوب

بسم الله الرحمن الرحيم

نبدأ بالدرس الاول وقبل كل شيء نبدأ بمقدمه كان الكتاب ومؤلفه حفظ للحقوق جافا سكربت اقتراح .....!!!

اسم الكتاب JaVaScRiPt In Easy Steps (( جافا سكربت في خطوات سهله ))

مؤلف الكتاب مايك ماك جراث (( الترجمه د / خالد العامري ))

المقدمه

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

وهناك فرق بين لغه الجافا سكربت ولغه جافا وعلى الرغم من وجود نوع من الشتابه بينهما الا ان الاخيره تعتبر لغه مختلفه تماما وقد ظهرت الجافا سكربت عام 1995 حيث كان يطلق عليها في البدايه لايف سكربت Live Script وتم تغيير الاسم بسبب الأغراض التسويقيه

وتحتوي لغه جافا سكربت على عدد كبير من الامكانيات الممتعه ولكن من منطلق الامان فانه لا يمكن قراءه او كتابه الملفات باستثناء الكوكيز او ملفات البيانات التي تقوم بتخزين قدر ضئيل من المعلومات

الفصل الاول

قبل البدء بالدرس استخدم المفكره ( النوت باد) بالنسبه للويندوز اما الانظمه الثانيه بصراحه اسفه ما اعرف ايس محرر النصوص فيها اللي يعرف ياليت يضيف المعلومه وشاكره له

يقوم بالقاء الضوء على آليات اللغه التي توضح بالامثله كيف يمكن كتابه نصوص جافا سكربت حتى يستطيع المستخدمون ان يتعلموا المبادئ والاساسيات الخاصه بهذه اللغه ثم يقوم متصفح (DOM)
"document object model" بتوضيح كيف يمكن لصفحات الويب على عناصر مزوده بخصائص يمكن التحكم فيها من خلال جافا سكربت ويؤدي ربط جافا سكربت بالمعلومات الخاصه بــ (DOM) لى انشاء مؤثرات فعاله باستخدام DHTM

ويمكن تحديد بادايه ونهايه ايه كتله نصيه في الكود الذي تم كتابته باستخدام HTML على الرغم من ان المكان الدائم برأس مستند بين علامتي الترميز <\HEAD> و<HEAD>

وتبدو الكتله النصيه على النحو التالي

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 

//--> 

</SCRIPT>

ويتم ادخال الكود الفعلي بين السطرين 

**** ملاحظه ****

لا تستخدم سمه LANGUAGE التي كان يتم استخدامها كثيرا في تحديد لغه البرمجه في الاصدار HTML4.0 لذلك فان سمه TYPE تستخدم الان لهذا الغرض

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

ومن الممكن ان يتم فصل كود جافا سكربت عن كود HTML داخل ملف جافا سكربت ويعتبر هذا بمثابه مستند نصي يتم حفظه في ملف امتداده (( js )) ولا يحتوي على علامات ترميز خاصه بلغه HTML

كما ان المرجع بالملف المشتمل على نص الكود النص يجب ان يتم وضعه في قائمه المستند مع سمه SRC بحيث يشير المتصفح الى عنوان الموقع الخاص بملف جافا سكربت كما يتضح في المثال

كود PHP:

  <SCRIPT TYPE="text/javascript" SRC="mycode.js"> 

</SCRIPT>

**** ملاحظه ****

تذكر ان علامه الترميز للنهايه </SCRIPT>

داله التحذير

ولاستدعاء داله التحذير قم باستدعاء الداله alert() الخاصه بلغه جافا سكربت مثال

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 

alert("منتديات العاصفه ترحب بكم"); 

//--> 

</SCRIPT>

النص بين الاقواس في الداله alert يجب وضعها بين علامتي الاقتباس "" ويجب ان تضع الفاصله المنقوطه بعد القوس الاخير

قواعد التركيب الخاصه بجافا سكربت

الفاصله المنقوطه تتماشى مع قواعد خاصه بتركيب جافا سكربت ويجب استخدامها في نهايه كل نص في جافا سكربت

تعتبر لغه جافا سكربت بمثابه لغه دقيقه حيث ان استخدام كلمات التاليه بمعان مختلفه مثل
alert و Alert و ALERT يجب التدقيق في حاله الاحرف

ولو طبقت استدعاء داله التحذير بــ Alert او ALERT فانه لن تعمل معك داله الاستدعاء

كما ان المسافات وعلامات الجدوله والاسطر الجديده لا تمثل ايه مشكله بصفه عامه ويتم تجاهلها في جافا سكربت فان الكود قد يتم تنسيقه بحيث يسهل على اي شخص قرائته

ومن الافضل ان يتم اضافه بعض التعلقيات الى كود جافا سكربت مثال فالمحلل اللغوي عندما يرى اي نص مسبوق بعلامه // ويتالف من سطر واحد فانه يتعامل معه كتعليق يتكون من سطر واحد وبالتالي فانه يتجاهله كما انه يتجاهل ايضا اي نص يتكون من سطر او اكثر ويكون مدرجا بين هاتين العلامتين */ و/*

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 

/*طريقه عمل الكود كالتالي 



تستطيع كتابه التعليمات هكذا*/ 

alert("منتديات العاصفه ترحب بكم"); 

//كل هذه طرق خاصه بالايضاح 



//--> 

</SCRIPT>

**** ملاحظه ****

يجب كتابه الكلمات الرئيسيه الخاصه بجافا سكربت باحرف صغيره

الكلمات الرئيسيه

سوف اكتبها لكم كامله

typeof
null
function
do
break
var
return
if
else
case
void
switch
import
export
continue
while
this
in
false
default
with
true
new
for
delete

بالاضافه الى ذلك جافا سكربت تحتفظ بجميع الكلمات المدرجه في الكلمات التاليه

abstract
debugger
goto
package
synchronized
throw
throws
try
transient
private
protected
public
short
static
super
implements
instanceot
int
interface
long
native
double
enum
extends
final
finally
float
boolean
byte
catch
char
class
const

المتغيرات

يعتبر المتغير بمثابه مكان يتم فيه تخزين البيانات من اجل استخدامه في اي برنامج يتم انشاؤه باستخدام جافا سكربت

ويجب مراعاه ان اسم المتغير لا يبدا برقم ابداااااااااااااااااااااااااااا ;)

مثال

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



var message="NaWaL2040@HotMaiL.Com"; 

alert(message); 

//--> 

</SCRIPT>

يتم تخزين النص داخل المتغير المسمى بــ message

انواع البيانات

تعتبر لغه جافا سكربت لغه صعبه في عمليه الكتابه ولذلك فان متغيراتها تقوم بتخزين الارقام والسلاسل الحرفيه او القيم البوولينيه سواء اكانت true او false

**** ملاحظه ****

لغه جافا سكربت لا تفرق بين الارقام الصحيحه وارقام floating-point

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



var a=0.06; 



var b="JavaScript In Easy Steps"; 



var c=false; 

alert(typeof a+"\n"+typeof b+"\n"+typeof c); 

//--> 

</SCRIPT>

والمثال السابق يقوم بانشاء متغيرات ذات قيم اوليه من انواع البيانات المختلفه في جافا سكربت كما ان الثلاث قيم يتم ارسالها اولا الى داله alert() ثم يتم استخدام الكلمه الرئيسيه typeof في لغه جافا سكربت لعرض نتيجه بنوع البيانات الخاصه بها في مربع حوار التحذير الموضح في نهايه الصفحه ويقوم الكود "+\n+" الموجود داخل الاقواس بعرض المخرجات الخاصه بكل قيمه في سطر جديد في مربع التحذير

مفهوم Escape Sequences

عندما تسبق علامه الشرطه "/" اي حرف في النص فان هذا يشير الى ان الحرف الذي يتبع هذه العلامه من نوع معين ومسئول عن احداث محدد ويطلق على تسلسل الحروف من هذا النوع بــ Escape Sequences حيث ان الحرف لايمكن اعتباره جزء من تركيب لغه جافا سكربت

التوضيح

\b حذف
\f ادخال حرف
\n سطر جديد
\r علامه الرجوع
\t علامه جدوله
\' علامه اقتباس مفرده ولا تدل على انتهاء السلسله الحرفيه
\" علامه الاقتباس المزودجه تشير الى نهايه السلسله الحرفيه
\\ شرطه خلفيه واحده

مثال بسيط للطريقه

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 

alert("NaWaL\"JavaScript\" "); 

//--> 

</SCRIPT>

الدوال

تعتبر الداله جزء من الكود المكتوب بلغه جافا سكربت حيث يمكنها ان تقوم بتنفيذ بعض المهام من خلال التطبيقات المكتوبه بلغه جافا سكربت وتعتبر الدوال والمتغيرات بمثابه اساسيات في برمجه جافا سكربت

مثال

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



function call_alert(){ 

alert("Welcom Back To 3asfh"); 



} 

//--> 

</SCRIPT>

المثال السابق يقوم بانشاء داله جديده باستخدام الكلمات الرئيسيه function في جافا سكربت متبوعه باسم معرف يجب ان يكون الاسم مميزا داخل النص ويلتزم بنفس القواعد الخاصه باسلوب تحديد اسماء المتغيرات ويكون الاسم متبوعا بقوسين عاديين على النحو () ثم بزوج من الاقواس على الشكل التالي {} والتي تحتوي على الكود المراد تنفيذه

ويمكن لسمه "onload" الخاصه بعلامه الترميز <BODY> في HTML ان تقوم باستدعاء الداله عندما يتم تحميل المستند كالتالي

كود PHP:

<BODY ONLOAD="call_alert()">

وسائط الدوال

تعرف البيانات المدرجه بين الاقواس باسم argument او الوسيط

في المثال التالي عند اجراء عمليه الاستداعء يتم ارسال سلسله حرفيه الى الوسيط عباره عن str في داله call_alert() من اجل استخدامها في الكود التي سيتم تنفيذها

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



function call_alert(str){ 

alert(str); 



} 

//--> 

</SCRIPT>

يستخدم المتغير str في لغه جافا سكربت كاسم للمتغير الذي يشتمل على بيانات عن سلاسل حرفيه

الدوال المتعدده

تقوم الدوال الخاصه بلغه جافا سكربت باستدعاء دوال اخرى اثناء تنفيذ الكود الخاص بها بالطريقه نفسها التي استخدمتها الامثله في استعداء داله alert() في جافا سكربت

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



function call_alert(num){ 



var new_number=make_double(num); 



} 



function make_double(num){ 



var double_num=num+num; 



return double_num; 



} 

//--> 

</SCRIPT>

وتنتقل قيمه الوسيط من مركز الاستدعاء الى داله make_double بواسطه call_alert()

**** ملاحظه ****

تستخدم علامه الزائد (+) في التركيز على النص عند استخدامه مع المجموعات الحرفيه وكذلك في تنفيذ بعض الاضافات عند استخدامها مع الاعداد

نطاق المتغيرات الخاصه

هي عباره عن متغيرات يقتصر استخدامها على الداله التي يتك كتابتها فيها

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



var stored_num; 



function call_alert(num){ 

stored_num=num; 

make_triple(); 

alert("The Value Is"+stored_num); 



} 



function make_triple(){ 

stored_num=stored_num+stored_num+stored_num; 



} 

//--> 

</SCRIPT>

الوسائط المتعدده

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



var a, b, c; 



function call_alert(str1,str2,str3){ 

a = str1; 

b = str2; 

c = str3; 

alert(a+b+c); 



} 

//--> 

</SCRIPT>

==========================

انتهى الفصل الاول من الكتاب

وعلى فكره انا اتمنى انه تكتب الكود كتابه ولا تنسخه عود يدك على كتابه الاكواد راح تتقنها اسرع وتعرف قيمتها اكثر

مجرد راي خاص فيني

الحقوق محفوظه لمنتديات العاصفه فقط

واسفه على اي خطأ مطبعي في الكتابه ;)

باااااااااااايوووو <=== :D

دورة جافا سكربت - Javascript الدرس الاول

بحث هذه المدونة الإلكترونية

اقسام المدونة

أرشيف المدونة الإلكترونية

من انا ؟