السلام عليكم

لن نتكلم عن أساسيات البرمجة، فقط ما يكفي لتضع رجلك على أول الطريق في JS

كلام قصير، واضح وسريع

لنبدأ على بركة الله:

Javascript

لغة مفسّرة interpreted و لا تهتم بالأنواع untyped (يعني لا يوجد integer وchar)

كل المتغيرات يمكن أن يعاد تعريفها بنوع جديد او تُسند لمتغير من نوع آخر، فالنوع مرتبط بالقيمة وليس بالمتغير، وهي لغة معتمدة على الكائنات Objects. يكفي كلامًا، لنبدأ

Hello World

أول سؤال قد يخطر بالبال: أين سيكون الخرج؟

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

للتدريب ادخل إلى هنا

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

ستستخدم الكائن console كثيرًا، وخصوصًا التابع log لتخرج على الكونسول (الخاصة بالمتصفح) ما تريد

console.log("Hello World!");

يمكنك أيضًا استخدام التّابع العام alert("Hello world") لعرض نافذة فيها الخرج

أو استخدم document.writeln("<h1>Hello World</h1>") لكتابة نصوص HTML في الصفحة التي أنت فيها

المتغيرات

لا توجد أنواع هذا أوّلًا، يتم تعريف المتغير بالطريقة:

var varName="value",x=4,y='hello',test="test";

• قواعد تسمية المتغيرات كالمعتاد (أحرف صغيرة وكبيرة و _ ولا تضع الأرقام في بداية الاسم)

• JS حساسة لحالة الأحرف والحرف الصغير غير الكبير

• بعض المتصفّحات تقبل عدم وضع كلمة var عند التعريف

• يمكن تعريف المتغيّر عدة مرات بنفس الاسم، وكل مرة تلغي سابقتها

التعليقات

باستخدام // لتعليق من سطر واحد

//this line is a comment

وباستخدام /* و */ لتعليق محدّد المكنا

var x=/*annoying comment*/5;

الفاصلة المنقوطة

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

`console.log("Hello")

console.log("World")`

السلاسل النّصّيّة Strings

السلسلة النّصيّة هي كائن له توابع كثيرة وعمليّات مثيرة

يمكن دمج سلسلتين باستخدام +

var x="he"+" "+"me";

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

var test=55+" is "+ (44+11)

عناصر مثيرة للاهتمام في السلاسل

.length (متغير وليس تابع)

يعيد طول السلسلة "hello".length

.replace (تابع يأخذ وسيطينA , B)

يعيد سلسلة بعد استبدال أول ظهور فقط لـ A بـB

var x="test it your self".replace("your","my");

.split (تابع يأخذ وسيط واحد)

المثال يوضّح الوظيفة: الكود التالي "look,I,Am,Here".split(",")

سيعطي الناتج التالي [ "look", "I", "Am", "Here" ]

من سلسلة إلى مصفوفة سلاسل مفصولة حسب الوسيط المعطى

.join (تابع يأخذ وسيط واحد)

معاكس لعمل split : الكود التالي [ "look", "I", "Am", "Here" ].join(",")

يعطي الناتج التالي"look,I,Am,Here"

من مصفوفة سلاسل إلى سلسلة مدموجة باستخدام الوسيط المعطى

الوصول للعناصر

 يمكن الوصول لحرف من السلسلة بالتابع charAt أو بوضع الـindex بين[]*

علامة اقتباس مفردة VS علامة اقتباس مزدوجة

لا فرق، كلاهما لتعريف النصوص (لا يوجد نوع char في JS)

الفرق الوحيد يظهر بالمثال التالي:

var x='koko""""""koko'

var y="koko'''''koko"

الأعداد

لا يوجد نوع (عدد صحيح أو عدد عشري) كلّ الأعداد تخزّن كأعداد عشرية(يعني ذات فاصلة عائمة) في 8بايت.

var x=13+13.5+5e1+1e-2 يعطي 76.51

يوجد أعداد خاصة مثل Infinity وNaN وهي قابلة للإسناد إلى المتغيرات

العمليات الحسابية والمنطقية والثنائية

مماثلة لعمليات لغة C

العمليات الحسابية

var x=1+1*5+(4/5)+8%2

يمكنك استعمال x++ و x-- أيضًا، ولهما نفس التّأثير الموجود في ++C بالنسبة للpost والpre

باقي القسمة!

43.5%5

يعطي 3.5 ، :)

عمليات الإسناد

var x=1,y=2,z=3,w=4;
x+=y;
y-=z;
z*=w;
w/=x;
x%=(y+z);

عمليات المقارنة والعمليات المنطقية

if(a==b && x!=y ||x>a && !(x<b) || c<=d || q>=w)
{/*do something */}

عملية مقارنة النوع === و !==

عندما تحتاج إلى مقارنة القيمة والنوع معًا "2"==2 return true "2"===2 return false

عمليات على مستوى البت

تقوم JS بعمليات & و | و ~ و ^ وهي (and و or و not و xor) على الترتيب وتقوم بالإزاحة الثنائية لليمين واليسار << و >> وذلك على بأخذ القسم الصحيح للعدد ضمن 32 بت والقيام بالعملية ثم إعادته للنوع العشري

العبارات الشرطية

لا يوجد اختلاف عن المألوف

if(x<y){
    console.log("x<y");
}else if(x==y){
    console.log("x==y");
}else{
    console.log("x>y");
}

حلقات التكرار

نفس المألوف بالنسبة لـwhile وتوجد أيضًا do .. while

var i=0;
while(i<10){
i++;
}

وهنا

var i=0;
do{
i++;
}while(i<10);

أما بالنسبة لحلقة for فهناك نوعان النوع المعتاد for(var i=0;i<10;i++){} والنوع الخارق:

حلقة for الخارقة for..in

باختصار للمرور على جميع عناصر الكائن، جرب المثال التالي في المتصفّح

for(var x in document){
   console.log(x +" is "+document[x]);
}

الكائن document هو مستند الـ HTML الذي تتم معالجته والكود

continue و break

نفس الاستخدام في C والمثال التالي يوضّح:

for(var i=0;i<10;i++){
    if(i==4)continue;
if(i==7)break;
console.log(i);
}

سيتم طباعة 0 1 2 3 5 6

المصفوفات Arrays

واحدة من أروع إبداعات JS، لا يوجد نوع محدد للمصفوفة فالقيم بداخلها يمكن أن تكون من أيّ نوع معًا، نص ورقم وكائنات ومصفوفات بداخل مصفوفة واحدة يتم التعريف بالشكل التالي: var x=[]; انتبه للأقواس المربعة وليست المتعرجة {} ويمكن وضع العناصر مع فصلها بفاصلة var x=[1,"good",1.33,[true,false],5]; ويمكنك طباعة (مصفوفة) فالكود التالي console.log(x); سيطبع Array [ 1, "good", 1.33, Array[2], 5 ] ولو قمنا بطباعة x[3] سيطبع Array [ true, false ] ربّما يجدر بك تسمية المصفوفة : قائمة عناصر تسمح بالوصول لها عن طريق الفهرس العددي يعني تضع index كعدد فتصل للعنصر ذو الترتيب index

العنصر.length

يحتفظ طول المصفوفة

التابع .push

يقوم بإضافة عنصر لنهاية المصفوفة

التابع .pop

يقوم بإعادة آخر عنصر في المصفوفة وإزالته منها

إضافة عناصر في أماكن غير مرتّبة

يمكنك كتابة الكود التالي: var x=[1,2,3] وسيكون x.length مساويًا إلى 3 ولكن عندما تكتب x[3]=5 فسيصبح الطول 4، وسيضاف عنصر جديد في الموضع 3 ولكن ماذا عن : x[101]=23 ستجعل طول المصفوفة 102 وتكون العناصر غير المعرفة آخذة قيمة undefined

تابع الترتيب .sort

يقوم بترتيب عناصر المصفوفة أبجديًّا ( لا تنفع لترتيب الأعداد، فقط للسلاسل النصية) ولكن يمكن تمرير تابع للمقارنة كوسيط له وهذا التابع يجب أن يأخذ وسيطين ويعيد عددًا سالبًا إن كنت تريد الأول أن يكون قبل الثاني وعددًا موجبًا إن كنت تريد الثاني قبل الأول وصفرًا إن كان العنصران متساويان

التابع .reverse

يعكس ترتيب عناصر المصفوفة

التابع .concat

يقوم بدمج مصفوفتين وإعادة الناتج (يأخذ وسيطًا المصفوفة الثانية) مثال

var x=[1,3,2],y=[5,6,7];
var z=x.concat(y);

الكائنات Objects

لكل كائن خصائص properties، ويمكن إضافة وحذف أي خاصية في أي وقت تعريف الكائن var x={hight:5,width:7,color:"red"}; لاحظ استخدام الأقواس المتعرجة، وكيفية تعريف خاصية وإسناد قيمة لها وعند طباعة قيمة x سيظهر: Object { hight: 5, width: 7, color: "red" } ويمكن أن تقوم بعد ذلك بـx.koko=8' فتصبح x مساوية إلىObject { hight: 5, width: 7, color: "red", koko: 8 } ويمكنك استخدامها على شكل مصفوفة ترابطية (فهرسها نصّ) مثل x["color"];` وفي الكائنات تأتي الأهمية الكبيرة للحلقة الخارقة for in مثال:

var x={rash:22,mosty=23,GK=100};
for(var i in x)
{
console.log("the property " + i + " has value of"+ x[i]);
}

يمكن أن تكون العناصر في الكائن توابع أو متغيرات أو مصفوفات ..

التوابع

لا يوجد تحديد لنوع القيمة المعادة ولا لنوع الوسطاء، ويجب كتابة كلمة function قبل اسم التابع، ولإرجاع قيمة نستخدم تعليمة return المعتادة، مثال:

function test(x,y){
    return x+y;
}

ويمكن تعريف تابع مجهول(بدون اسم) في حالات معينة، مثال: var x=function(a,b){return a+b;} ويمكن استدعاء التابع عند تعريفه console.log((function mo(a=10){return a?a+mo(a-1):0})()) مشابهة لـlambda قليلًا. والتوابع في JS يمكن تمريرها كوسطاء أو إرجاعها كقيم ..

function m(){console.log("Good By");
var w=m;
w();

انتهت الرحلة هنا!

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

المراجع

https://en.wikipedia.org/wi... http://www.w3schools.com/js http://highschoolhacking.cl...

الرخصة

لا أفهم بقضيّة الرخص، ولكن يحقّ لأي شخص نسخ وتعديل وإعادة نشر أي شيء يريده من المقال السابق.

الإهداء

إلى راشد، نور الدين و GK

والله وليّ التوفيق