بسم الله الرحمن الرحيم
اتقدم لكم اليوم اخوتي واخواتي بشرح مبسط ومفهوم للجافا سكربت وتصميم المواقع
ونسالكم الدعاء
فكرة تصميم موقع إنترنت هي إظهار صفحة أولية(home page) ,هذه الصفحة هي الصفحة المدخل إلى الصفحات الأخرى التي تحوي معلومات الموقع كاملة , حيث يتم فهرسة عناوين الموقع فيها .
و عملية ربط الصفحات ببعضها تتم بعدة طرق :
الربط التسلسلي ،الربط التفرعي , الربط المختلط(وهو مزيج بين الطريقتين
السابقتين) .
أنواع الصفحات في الموقع :
1- الصفحة الساكنة(static page) :
تحوي هذه الصفحة نصوص أو صور أو مقاطع فيديو أو صور متحركة (gif animation) وهي صور متحركة ذات الامتداد gif
تأخذ فاعليتها الحركية عبر متصفحات الإنترنت فقط .
2- الصفحة التفاعلية(dynamic page) :
تحوي هذه الصفحة بالإضافة إلى ما يمكن أن تحويه الصفحة الساكنة عناصر أخرى مثل :
النصوص المتحركة (marque) و النماذج (forms) والأزرار(buttoms) صناديق الحوار (text box) .
تصميم الصفحات بلغة Html :
لغة Html(hyper text markup language) هي لغة عالية المستوى,ومن أهم ميزاتها أنها تستطيع العمل على أي منصة عمل لأنها تعتمد على شيفرةASCII القياسية , أي أن تنفيذ ملف Html يتم بشكل مستقل عن أي نظام تشغيل أو عتاد . و هذا ما يجعل هذه اللغة عالمية الانتشار.
تتميز هذه اللغة أيضاً بأنها ليست لغة برمجة أحداث ولكنها تقدم مزايا رائعة في تنسيق المعلومات النصية مع الصور والتنقل بين الصفحات من خلال خاصة الربط التشعبي (hyber link) الذي تتميز به هذه اللغة .
بنية ملفات Html :
مستند HTML في جوهره هو مجرد ملف نصي عادي يحتوي على شيفرات خاصة تسمى رسوم ( Tags ) توضع عادة حول كتل من النص تلك الكتل تسمى عناصر ( elements ) ويفسر متصفح الويب تلك العناصر ليحدد ما علية عرضه على الشاشة .
وفي أغلب الأحيان يملك كل عنصر من وسم فتح ووسم إغلاق يتأفل وسم الفتح من اسم الوسم محاطاً بمعقفات زاوية ( > , < ) مثلاً ( <A> ) ووسم الإغلاق يكون محصوراً بين معقفات زاوية لكن هنا توجد شرطة أمامية قبل اسم الوسم مثل ( </B> ) ويوضح النص الذي سيتأثر بالوسوم بين وسمي الفتح والإغلاق ...
* وسوم HTML:
الوسم الأول <HTML> يشير للمستعرض أن المواد التي تليه يجب معالجتها باستعمال قواعد التركيب النحوي والبنيوي الذي تفرضه اللغة HTML ويظهر وسم الإغلاق </HTML> ولا يجب وضع شيء خارج هذين الوسمين .
* وسوم الترويسة : <Head> و </Head> تشير إلى منطقة حدود الترويسة في الملف التي تحتوي على بنود لا تظهر على الصفحة بشكل مباشر وهي اختيارية وتوضع فيها بعض العناصر التي لا تعمل إلا عندما توضع ضمنها ... مثل Title .
يعرف الوسمان <Title> و </Title> ما سيظهر على شريط عنوان المستعرض .
وسوم الحسم :
ويحدد الوسمان <dody> و </dody> منطقة جسم المستند وتحتوي على محتويات المستند ( المواد المرئية على الصفحة ) .
وسوم تنسيق الأحرف :
ليست الوسوم السابقة هي حدود الوب و إلا كانت الوب مضجرة جداً ....
فهناك وسوم تتعامل مع النصوص وتنسيقاتها ...
فالوسمان <B> و<B> لجعل الخط ما بينهما أسود عريضي
والوسمان <I> و<I> لجعل الخط ما بينهما مائلاً
والوسمان <u> و<u> لجعل الخط ما بينهما مسطراً
كما يمكن استعمال الوسم <Font> لإعداد تنسيق نصي أكثر تعقيداً ... وهو يدعم عدة سمات ( صفات ) منها Color وSize وFuce تحدد بالتفصيل كيفية عمله .
فمثلاً نستخدم الوسم Font على الشكل :
<Font>
وسوم تنسيق الأسطر :
قد تتفاجأ أن تعلم أن متصفح الأنترنت وخاصةً انترنت اكسبلورر يعالج أسطر HTML المستقلة في السرد كأنها سطر متواصل من النص يلتف فقط عندما يصل إلى حافة إطاره .. تحدد مواصفات HTML أن المستعرضات يجب أن تتجاهل نهايات الأسطر ( Enter ) في الملف النص المصدر وبدل من ذلك يستعمل وسوم خاصة لتجديد تنسيق الأسطر ... فالوسمات <P> و </P> يعرفان كتلة من النص على أنها فقرة وهي سبب وضع سطر فارغ قبل وبعد كل فقرة ...
... أما الرسم خط أفقي فلدينا الوسم <HR> الذي ينشئ خط أفقي على عرض الصفحة وتستخدم معه سمتان هما width و size تحدد الأولى عرض الخط أما الثانية تحدد ثخانة الخط ... أو للفواصل نستخدم الوسم <BR> الذي يدرج فاصل أسطر .
سمات المحاذاة :
تتيح لك HTML التحكم بالوضع الأفقي للعناصر على الصفحة بشكل افتراضي تتم محاذاة كل النص مع الجاني الأيسر لك للشاشة ويتم تغير هذه المحاذاة باستخدام السمة Align وهناك عدة وسوم تدعم السمة Align مثل <P> وكل وسوم للترويسات
مثلاً
<P> ..
وسوم الصور والارتباطات التشعيبية :
يعرف الارتباط التشعيبي كما ذكرنا منطقة من ارتباط انترنت اكسبلورر يستطيع المستخدم نقرها للقفز إلى مستند آخر .. أو نقطة آخرى في المستند الحالي ...
لوضع صورة في النص يستخدم الوسم <Img> وسم الإغلاق </Img> اختياري ...
ويملك هذا الوسم عدة سمات تعرف كيفية إظهار الصورة وأهم صورة هي src التي تحتوي على مسار لف الصورة المصدر
<img>
أما لوضع ارتباط تشعبي نستخدم الوسم <A> و </A> ويتم تنسيق النص بداخله بتنسيق أزرق مسطر عندما يضع المستخدم مؤشر الماوس فوق الارتباط التشعيبي يغير المؤشر شكلها إلى يد ذات اصبع مشير .. تعرف السمة ( hypertext refernce ) HREF المكان الذي يجب أن ينقل إليه الانترنت اكسبلورر ويمكن أن يكون ذلك المكان أي موقع ويب صاح كما يمكن ضبط السمة HREF عند ملف محلي أيضاُ وذلك بكتابة مسار الملف اسمه كما في المثال الآتي :
<A>linkto….</A>
<A>text</A>
وهكذا نجد أن هناك كماً هائلاً من التعابير ذات الوظائف المختلفة في لغة HTML
و لكن مع ذلك تبقى لغة HTML لغة ضعيفة كلغة تنفيذية لذلك يتم تضمينها لغات نصية scripting language)) كلغة JavaScript)) حيث تمتاز هذه اللغة بكونها عرضية التوجه و بقابليتها لبرمجة الأحداث و بإضفائها تأثيرات رائعة على الصفحات
ما هي لغة JavaScript ؟
بنية لغة JavaScript :
تمتلك لغة JavaScript بنية بسيطة و مريحة بآن واحد فيمكن وضع سطر وحيد منها ضمن ملف HTML و سيعمل بنفسه كبرنامج javascript كما أنه لا توجد هناك تعليمات محددة لتعيين بداية أو نهاية نص javascript .
و بعيداً عن تشدد لغات البرمجة الأخرى فإن هذه اللغة ببساطتها … تقترب من هيكلية لغات أخرى مثل C و Perl حيث يستخدم ( ;) لإنهاء التعليمة و { } لاحاطة كتلة من التعليمات البرمجية .
كما أنها تتمتع بعدة ميزات من الميزات القياسية للغات البرمجة و مثل استخدام التوابع وأسماء المتحولات و أنواعها .. كما أنها تستطيع الاستفادة من التعابير الجبرية في العمليات الرياضية…
و أهم ما يميز لغة javascript أنها لغة غرضية التوجيه و هذا يعني أنها تدعم تقنيات الأغراض و الأغراض هي عبارة عن أنواع بيانات تدمج بين المعطيات و التوابع و قد يتضمن الغرض ما يدعى بالخصائص properties التي تكون مسؤولة عن حجز المعطيات كما تتضمن أيضاً ما يدعى بالمناهج method و هي توابع تنفذ على المعطيات .
كما نستطيع وضع التعليقات comments داخل شيفرة javascript والتي تقوم بتوضيح الغرض من الشيفرة المكتوبة ويمكن استخدام نوعين من التعليقات في javascript
- تعليق ذو سطر واحد و يبدأ بالمحرفين // و تنتهي عند نهاية السطر
- تعليق ذو سطور متعددة تبدأ بـ ( */ ) و تنتهي بـ ( / * )
البرامج و التطبيقات : بما أننا في حالتنا هذه نستخدم لغتي برمجة هما : javascript و Html أي أن كلا اللغتين يندمجان في ملف واحد لذلك لا بد من اعطاء تعريف واضح لمفهومي البرنامج و التطبيق :
- برنامج javascript يتألف من جميع التوابع و معالجات الحدث و التصاريح عن المتحولات التي يتضمنها ملف Html وحيد .. و هذه العناصر قد لا يجري تنفيذها بذات الترتيب المعرفة فيه و لكن المتصفح يقرؤها و يفسرها في وقت واحد .
- أما التطبيق javascript فيمكن اعتباره مجموعة من ملفات Html و من نصوص javascript تعمل مع بعضها لإنجاز هدف محدد … و هكذا فإن التطبيق قد يتضمن عدة برامج javascript ضمن عدة ملفات Html و قد يشمل أيضاً توابع إضافية من لغات أخرى مثل CCI أو Java .
و سنتحدث الآن و بشكل سريع عن بعض نواحي و ميزات لغة javascript … بشكل نكّون به نظرة قريبة من الشمول لهذه اللغة …
المتحولات و أنواع المعطيات ..
تقدم javascript دعم لأغلب أنواع المعطيات … و مع ذلك تستطيع باستخدام هذه الأنواع تشكيل و إنشاء أنواع أخرى … و ذلك باستخدام ميزة غرضية التوجه كما سنرى لاحقاً …
أما الأنواع الأساسية في javascript
--> الأعداد : مثل 1.423502,25,3 فهي تدعم الأعداد و الأعداد غير الصحيحة ذات الفاصلة العائمة .
--> القيم المنطقية و التي تأخذ قيمتين أو حالتين فقط صح أو خطأ …
و تستخدم غالباً في رايات الحالة flags و هي عبارة عن متحولات تشير فيما إذا تحقق شرط ما أم لا ..
è السلاسل .. التي تتكون من محرف واحداً أو أكثر مثل السلسلة “This isstring” و يمكن استخدامها كثوابت بوضع إشارتي تنصيص مضاعفتين أو مفردتين حول النص … مثل “Hellow” ، ‘a’
è --> القيمة المعدومة null value و الممثلة بالكلمة المحجوزة null و هي تمثل المتحول الغير معرف …
بعض لغات البرمجة الأخرى تدعم أنواعاً أكثر تعقيداً من المعطيات و توابع تحويل الأنواع إلا أننا نلاحظ أن لغة javascript هي لغة غير منوعة و هذا يعني أننا عندما نصرح عن متحول ما فإنك لا تعرف نوع معطياته و عندها يمكن تخزين أي قيمة معقولة من المعطيات ضمن هذا المتحول .. فالتحويل بين الأنواع المختلفة للمعطيات يتم بشكل آلي …
- يوجد محارف خاصة يمكن استخدامها ضمن سلاسل javascript مثل Tab و return …
و لاستخدام أحدها يمكن اللجوء إلى المحرف \ متبوعاً بشيفرة ذلك المحرف الخاص …
مثل : \b يقوم بتحريك المشيرة إلى الوراء حرفاً واحداً
\n حرف سطر جديد …
\t حرف Tab
- تخضع تسمية المتحولات في Javascript إلى نفس القواعد الموجودة في لغات البرمجة الأخرى .. مثل أنه لا يجب أن يبدأ برقم .. و ألا يحتوي فراغ و ألا يتجاوز طوله سطراً واحداً … و لإلحاق قيمة بمتحول … نستخدم عامل الاحاق ( = ) و علينا تذكر أن عامل الإلحاق يقوم بقسر أنواع البيانات لتلائم بعضها … فمثلاً :
X=16
Y=”because”
فعندما نضع x=y سيتم تحويل y إلى نوع صحيح integer ليتم إسنادها لـx
وعلينا الانتباه دوماً إلى هذه الميزة التي قد تكون مصدر قوة للغة أو مصدر ضعف فيها .
ـ لا يجب التصريح عن كل متحول نستخدمه فالمرة الأولى التي تلحق فيها قيمة ما بالمتحول يعتبر ذلك تصريحاً تلقائياً … وعلينا مراعاة أن لكل متحول ما يسمى بالمجال scope …. وهو مقطع من شيفرة البرنامج حيث يكون المتحول شرعياً ….ولدينا نوعين من تلك المجالات .
A ـ أي متحول يصرح عنه ضمن تابع ما باستخدام var يعتبر محلياً وأي من التوابع الأخرى لا يستطيع استخدامه .
B ـ المتحولات المصرح عنها خارج التابع أو ( دون استخدام var ضمن تابع ما ) تعتبر عامة … وبالتالي إن جميع توابع javascript يمكنها الوصول إلى قيم ذلك النوع من المتحولات …
ويتم عادة التصريح عن المتحولات العامة ضمن ترويسة صفحة Html وهي <head>لأنها بذلك ستضمن أن تكون في بداية الشيفرة …
التعابير والمعاملات : تدعم لغة javascript عدة معاملات وتعابير … وعلى الأشكال التالية :
* عوامل الإلحاق … وتستخدم لإلحاق قيمة ما بتحويل … مثل ( = ) و ( = + ) حيث بدل x=x+1 تكتب x+=1
· العوامل الحسابية وتستخدم لانجاز العمليات الحسابية على القيمة الثابتة أو على المتحولات ( + ، - ، * ، / ) وعامل باقي القسمة (%) فمثلا
2%100=0 100%3=1
عامل السلبية ( - ) وزيادة وإنقاص المتحولات فمثلاً 1+ a = a يكتب 1= +a
أما عامل الزيادة بمقدار واحد فيكتب على الشكل 1+ x = x تعطي x ++
· العوامل السلاسلية : والمستخدمة لمعالجة سلاسل المحارف ..
وفي الحقيقة هناك عامل واحد مخصص للتعامل مع السلاسل في javascript وهو عامل دمج السلاسل بشكل متسلسل ( + ) فهو يأخذ السلسلة الواقعة على يمينه ويلحقها بالسلسلة الواقعة على يساره test = test 1 + this code
وهنا إن احتوى test 1 على قيمة pleas read يصبح test يحوي please read this code
· العوامل المنطقية : وتستخدم مع القيم المنطقية وتستخدم في فحص الشروط :
ـ ( && ) ( and ) يعيد true إذا كان كلا المعاملين لهما القيمة true ويعيد faise في ذلك
ـ ( || ) (or ) يعيد true إذا كان أحد المعاملين له القيمة true و faise في الحالات الأخرى .
ـ ( ! ) (not ) يعيد القيمة المضادة للمتحول الذي يسبقه .
· عوامل المقارنة : وتستخدم لمقارنة عددين مع بعضهما البعض .. وهي تعيد قيم منطقية اعتماداً على الشروط الموافقة وهي عامل المساواة ( = = ) وعامل أصغر من (<) وعامل أكبر من (>) وعامل (<=) (>=)
بعض التوابع : يمكن استخدام بعض التوابع مع أنواع المعطيات كما سنرى الآن :
ـ ( ) parsent يبحث في بداية سلسلة ما عن عدد صحيح فإن وجد عدد غير صحيح في بداية السلسلة تجاهل الجزء السري فمثلاً
a=parseint(“39integer”) ------à a=39
وعندما لا يجد هذا التابع أي عدد في بداية السلسلة ( حصراً ) فإن يعيد قيمة هي “NaN”
ـ ( ) parsefloat ويشبه التابع السابق إلا أنه يتعامل مع القيمة ذات الفاصلة العائمة فهو يحاول إيجاد عدد ذو فاصلة عائمة في بداية السلسلة .
ـ التابع eval وله عدة استخدامات في تقنيات البرمجة وبدلاً من البحث عن عدد ما في السلسلة فإنه يبحث عن تعابير شرعية وصحيحة javascuiptsوينفذها فمثلاً :
a = eval ( " 2 o + 1 + 4 " ) يقوم بجعل a= 25
كما أن استخدام التابع eval قد يكون أكثر تعقيداً من هذا إذ يمكنك استخدام أي تعبير في javascript كسلسلة وتمررها بعد ذلك للتابع eval الذي سيقوم بتنفيذها .
اخوكم / اسد ربيعة
