42-تعلم java script من الألف إلي الياء

السلام عليكم ورحمة الله وبركاته
___________________________________

نبدا بسم الله
---------------
الــــــــــــــــــــــja va scriptــــــ

وهى التى لا غنى عنها فى تطوير المواقع

لكى يتم تعريفها فى موقعك لا بدا من كتابة وسمها يتنفيز السكربتات بانواعها
<script type='text/**********' language='**********'>
/*
هنا تكتب اكوادك

*/
</script>

ال java script من اللغات التى لها اكثر من طريق فى التعامل معها وللوصول لما تريد ان تفعله فى موقعك

ال data type او انواع البيانات
-------------
يوجد العديد من انواع البيانات التى تعامل معها تقسمهم ل 3 مجموعات :-

اولا : الاعداد
--------------
انواع الاعداد هى اما صحيحة واما حقيقة
الصحيحة ( intager ,long,short ) والانتجر يخزن او يحجز فى الذاكرة 2 بايت (اى 16 بت (اصغر وحدة تخزينية )) اما اللونج يخزن ضعف ال int اى 4 بايت
اما الشورت فهو عدد قصير قد يخزن 1 بايت او اكثر

الحقيقية ( اى التى تحتوى على فاصلة عشرية ) وهى (double ,float ) وهى تماما كالنوعين السابقين فى المساحات التخزينية (float ) بحجز 2 بايت وال (double ) يخزن الصعف

كما يمكن الجمع بين نوعين من انواع الاعداد فتقول long double اى عدد طويل بفاصلة عشرية لكن فى هذه الحالة يحتاج مساحة تخزينية كبيرة تعادل المساحة التى تحجز للنوعين اى 8 بايت

ثانيا النصوص text
=============
تمكنك الجافا سكربت من التعامل مع النصوص داخل الصفحة تصل فى التعامل الى الحرف الواحد
وهى (char ,string )

ثالثا ال object او الكائنات
___________________
نتركه لوقت آخر فى التعريف

متطلبات المتغير فى الجافا سكربت
_________________________________

1- لا يبدأ برقم
2 - لا يكون من الكلمات المحجوزة فى اللغة (سيتم ذكرها ان شاء الله )
3 - لا يحتوى على رموز سوا underscor _ مثل ($ و#و^و*و)و@و! ... الخ )
4 - يبدأ بحرف
5- لا يحتوى على فواصل (مسافات ) إذا كان اكثر من كلمة

كيفية تعريف متغير فى الجافا سكربت
___________________________________

يتم كتابة وسم السكربت
<script ></script>
وبينهما يتم تعريف المتغير بذكر كلمة ( var ) ثم اسم المتغير ويمكن اسناد له قيمة اثناء تعريفه

الصيغة العامة للمتغير فى الجافا سكربت
_________________________________

var VariableName ; <--- + ------>or = value ;

ملحوظة
--------------
عند تعريف المتغير لابد ان تلاحظ حالة الحرف المكتوب هل هو capital or small لان جافا سكربت ممتدة من لغة الجافا وهى حسساسة لحالة الاحرف case sensitive
اى ان NAME بختلف عن Name عن name

تطبيق
----------------------------------------

<script language-'**********'>
var c;
var x = 10;
/*
لو لاحظت فى الكود السابق اننا لم نذكر انواع البيانات كما عرفناها
وهذا يعنى انها معرفة مسبقا فى اللغة اى لا تحتاج ان تعرفها مرة اخرى
*/ 

</script>

-------------------------------------------------------------------------------------------------------------

الجافا سكربت تتعامل بصفة
اساسية مع HTML اى لابد ان تكون ملم بقواعد الـ HTML او لديك فكرة عن بنيتها وهذه اللغة
ليسيت لغة برمجة بل لغة هيكلة stracture

ذكرنا فيما مضى ان المتغير يتطلب عدة امور ذكرناها
الان نذكر ما هى الكلمات المحجوزة التى لا يمكن ان تبقى متغيرات
--------------------------------------------------


case,while,if ,swith,
elseif ,def,defaultStatus,default
document,return,window,function ,var
catch,try,public ,self,closed,Infinity
content,location .........الخ

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

عمليات على انواع البيانات
-------------------------------
هناك العديد العمليات التى سنذكرها

اولا العمليات الرياضية Arithmetic Operations
---------------------
جمع (+) -- طرح(-) - قسمة(÷) - باقى قسمة(%)( ليس ناتج قسمة عددين بل هو العدد الزائد من القسمة
مثلا 7÷3 = 2 ويزيد 1 (الـ1) هو المقصود بباقى القسمة )
- الضرب(* > ×)- الزيادة بمقدار واحد صحيح (++) - النقصان بمقدار واحد صحيح(--)

ادخل الى محررك واكتب الكود التالى

كود HTML:
<script type='text/**********'>
//قم بتعريف 3 متغيرات
var num1=10;
var num2=12;
var sum=num1+num2;
document.write(sum);//سيتم تفصيلها فيما بعد
</script>
قم بحفظ صفحتك سواء HTML او php
لايهم فهي تعمل على كلاهما ولكن هناك استثناءات سيتم ذكرها مع php
*******************
عند تشغيل صفحتك ستجد مكتوب يها ناتج الجمع 22
وهكذا مع باقى العمليات الا فى عمليتى الزيادة والنقصان
لاحظ

كود HTML:
<script language="**********">
//عرف متغيرين
var x ,y;
x=0;
y=x++;
alert(y);
</script>
ستلاحظ ان قيمة y تساوى صفر ايضا
اما فى حالة

كود HTML:
<script language="**********">
//عرف متغيرين
var x ,y;
x=0;
y=++x;
alert(y);
</script>
ستلاحظ ان قيمة y تساوى 1
معنى هذا ان عن كتابة (++) يمين المتغير تقول للمترجم (compilor ) ان لا اريد زيادة المتغير الا بعد اتمام العملية
على عكس اذا وضعتها على يسار المتغير فانه يزيد المتغير بمقدار واحد قيل اتمام العملية وهى هنا الاسناد

اولويات العمليات
--------------------
هذه العمليات ليس كلها فى مستوى واحد من الاولوية
فنجد ان :
1 - الزيادة والنقصان متقدمة
2 - السالب (جمع او ضرح او .....)
3 - القسمة والضرب وباقى القسمة ------------------------> فى مستوى واحد فى الاولوية
4 - الجمع والطرح ------------------------> فى مستوى واحد فى الاولوية
5- الزيادة والنقصان ان جائت متاخرة عن المتغير

ملحوظة :


العمليات التى لها نفس درجة الاولوية تنفذ اسبقيتها بقربها من ناحية اليسار


بمعنى اذا كتبنا الاتى

كود HTML:
<script language="**********">
//عرف متغيرين
var a,x ,y;
x=5;
y=9;
a=x+y-10/y*5%x;
alert(a);
</script>
فترتيب العملية كلاتى :
1 - 10 / Y
2 - الناتج يضرب فى 5
3 - الناتج يقسم على x ويبقى باقى القسمة
4 - يجمع x مع y
5- الناتج يطرح من باقى القسمة

ملحوظة اخيرة :

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

------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------- 

ثانيا : العمليات العلائقية او المقارنة relational operations
-------------------------------------
وهى العمليات التى تتم بين الاشياء التى بينها علاقة سواء فى القيم values او النوع type
وناتج هذه العمليات قيمتين لا اكثر وهى قيم منطقية true او false وغالبا ما تاتى مع الجمل الشرطية (كما سياتى )

ادوات هذه العمليات operations tools
=============
اكبر من (<)- اصغر من (>) - المساواة(==) - المطابقة (===)
اكبر من او يساوى (<=) - اصغر من او يساوى (=>) - لا يساوى (=!)

ادوات التحقق materialize tools
=======================
وهى ادوات منطقية ايضا وهى تعمل على معرفة ما اذا كانت العلاقة بين القيمتين صحيحة اما لا
فترجع true اذا كانت صحيحة و false اذا كانت غير ذلك
1 - و ---->(&& او and )
2 - او ---->( || او or )
3 - لا -----> ( ! ) تفيد النفى

تمثيل نظرى
============
لا حظ فى فقرة سابقة انها علاقة بين انوع او قيمة نفترض الاتى :-
انت معك كيلو حديد وشخص اخر معه كيلو من الفاكهة اة غير ذلك لنطبق السابق على المثال
--جاء شخص ثالث وقال ( كيلو الحديد == كيلو الفاكهة ) هذه العبارة صحيحة اذا تعود قيمة منطقية true
لان كلاهما 1000 جرام وهنا علاقة قيمة relational of value
--اما لو قال (كيلو الحديد < كيلو الفاكهة ) فالعبارة خاطئة false
وكذالك باقى الادوات
*****************
ادوات التحقق
----------------
إذا جاء مدير شركة وقدم اعلان لوظيفة وطلب الاتى :
ان يكون الشخص مؤهل عالى و ذو مظهر انيق فتكتب هذه العبارة ( مؤهل عالى && انيق المظهر )
ان يكون مؤهل عالى او متوسط نكتب ( مؤهل عالى || متوسط )
الا يقزيد عمره عن 30 عام يكتب ( ! يزيد عمره عن 30 عاما)

بنية التحكم control stracture
=======================
ما معناها ؟!!
هى الادوات التى تسمح لك بالتحكم فى السكربتات التى تقوم بإنشائها ايهما ينفذ وايهما لا ينفذ
واذا تم تنفيذه سيكون متى ؟ واين يتم تنفيذا ؟ والى اى مدى يتم تنفيذه ؟ ومتى يتوقف عن التنفيذ ؟
واداوتها هى :-
if
else
if else
switsh
while
do while
for
continue
break
------------------------------------------------------------------
if
الصيغة العامة لها
if (condition ) {
/*
statements
*/
}

اى بمعنى *** لو ( تم تحقيق الذى بين القوسين ) { نفذ اللى مكتوب هنا }

مثال عملى
كود HTML:
<script type = "text/**********">
var x,y;
x=10;
y=6;
if(x==10)
{
alert("نعم x يساوى 10");
//الشرط محقق وسيتم ظهور رسالة تفيد ذلك
}
</script>
فى الكود السابق عرفنا متغيرين ماسندنا لكل واحد منهما قيمة ووضعنا شرط
اذا كان الاكس يساوى 10 يتم ظهور رسالة تحقق ذلك

ملحوظة
==========
هناك فرق بين الاسناد(=) والمساوة(==)
ففى الاسناد يتم تعيين القيمة سواء ابتدائية او ثابتة (سيأتى ) اما المساواة فهى تقارن
بين القيمتين او المتغيرين

مثال اخر
HTML]
<script type = "text/**********">
var x,y;
x=10;
y=20;
if(x!=y)
{
document.write('x not equal y');
//هنا الشرط محقق وسيتم الطباعة
}
</script>
مثال على اداوات التحقق

كود HTML:
<script type = "text/**********">
var x,y;
x=2;
y=6;
if(x==y && y=6)
{
alert("نعم ");
}
</script>
لاحظ هنا لن يتم ظهور الرسالة وذلك لعدم تحقق الشرط على الرغم من ان y =6 وهو كذلك
الا ان مع وجود الاداة ( &&) تعين على تقييد الشرط بان كلا المتعبيرين لا بد ان يتحقق ليتم تحقق الشرط
كود HTML:
<script type = "text/**********">
var x,y;
x=2;
y=6;
if(x=y || y=6)
{
alert("نعم ");
// تم تحقق الشرط
}
</script>
اما فى المثال السابق سيتمع عرض الرسالة رغم ان هناك جزء غير محقق ولكن مع وجود
الاداة ( || ) وهى تفيد اذا تحقق احد الشرطين نفز العبارات الاتية اى انها تتطلب واحد فقط ليتم التنفيز على
عكس (&&) التى تطلب كلا التعبيرين ليتم التنفيز ويتحقق الشرط

------------------------------------------------------------------------------------------------------------- 

تحدثنا فيما سبق هن بنأ التحكم control structure وتناولنا if الشرطية
اليوم بمشيئة الله نكمل بنية التحكم

بسم الله
=======

IF ELSE

تتحق هذه الادوات ما اذا كان الشرط محقق فينفذ ما بين القوسين التابعين ل IF
او يتم تنفيذ الجمل الموجودة داخل ELSE

الصيغة العامة ل IF ELSE
===================
اذا تحقق (كذا) نفذ {كذا} او نفذ {كذا}
كود HTML:
if(/*condition*/)
{
// statements
}else {
//statements
}
بالمثال يتضح الحال
كود HTML:
<script type='text/**********'>
var x=50;
var y=6;
if(x===y) // نتحقق هنا ان المتغيرين متطابقان فى النوع والقيمة
{
alert("yes");
}else {
alert("no");
}
</script>
فى حالة if فقط اذا لم يتحقق الشرط لا يفعل شيئا اما هنا
فان else اذا لم يتم تحقيق شرط if تبدأ هى فى عملها

متى نستخدم if else
=============
كما ذكرنا انها للتحقق فنستخدمها مثلا لتحقق ما اذا كان الزائر قام بملئ الحقول ام لا
او ان البيانات التى يدخبهل مسموح بها او لا ...........الخ


ELSE IF


الصيغة العامة ل ELSE IF
=============
اذا كان (كذا) نفذ {كذا} [U]او إذا كان (كذا ) نفذ {كذا} [U] او نقذ { كذا }
بمعنى انه اذا تحقق الشرط ما بين اقواس if يتم تنفيذ اكوادها ( او لم يتحقق الشرط السابق
نضع شرط اخر وهو هنا بعد else ( او لو تحقق الشرط التالى (else if ) نفذ اكوادها اما اذا لم يتم
تنفيذ اى منهما فتعمل جمل else ))
كود HTML:
<script type="text/**********">

var x="ZAIZO_MAX ";
if(x=="ZAIZO MAX")
{
alert("yes");
}else if(x=="ZAIZO_MAX "){
alert("no");
}
else{
alert("this value not found");
}
</script>
فى الكود السابق لن يتم تنفيذ الشرط الاول لعدم تحققه انما سيتم تنفيذ اكواد else if لتحققها
وسيتم تجاهل else

ملحوظة ختامية ل if
===============
عادة فى شروط if اذا تحقق اول شرط يتم تجاهل بقية الشروط مهما كانت اما فى else if يقارن بين الشرط
السابق والشرط الذى يتم تنفيذه حاليا (مع الفورم كما سياتى فى دروس اخرى ) فاذا تحققا يتم تجاهل ما بعدهما
اما else يتم تنفيذها اذا لم يتم تحقيق اى شرط من الشروط
كود HTML:
<script type="text/**********">
var x="ZAIZO";
var y="MAX";
if(x==="zaizo" && y==" max") //غير محقق
{
alert("yes");
}else if( x== "zaizo" || y ==="max"){ // غير محقق لان كما سبق وان ذكرنا ان الاحرف الكبيرة غير الاحرف الصغيرة
alert("no");
}
else{
alert(x+"\n"+y); // محقق
}
</script>
اللهم لا علم لنا الا ما علمتنا
اتمنى من الله ان اكون قد افتكم ولو بالقليل