برمجة صفحات إنترنت (JavaScript )
مقدمة عامة عن لغة الجافا سكريب JavaScript مقدمة عامة عن لغة الجافا سكريب Place Photo Here, Otherwise Delete Box هي لغة برمجة تلعب دور حيوي وفعال في صفحات الويب وذلك من خلال القيام بوظائف خارجية أو داخلية , وتعتبر مرنه إلى درجة يسهل التحكم بكل جزء من أجزاء الصفحة الويب وذلك بإستخدامها : Forms (نموذج) نوافذ تخرج للمستخدم لتخبره بامر أو تنبيه
ﻤـﻘـﺩﻤــﺔ ﺗﺴﺘﺨﺪﻡ ﺟﺎﻓﺎﺳﻜﺮﻳﺒﺖ ﰲ ﻣﻼﻳﲔ ﺍﻟﺼﻔﺤﺎﺕ ﻋﻠﻰ ﺍﻹﻧﺘﺮﻧﺖ ﻟﺘﺤﺴﲔ ﺍﻟﺘﺼﻤﻴﻢ، ﺃﻭ ﺗﺼﻤﻴﻢ ﳕﺎﺫﺝ ﺍﻹﺩﺧﺎﻝ، ﺃﻭ ﻏﲑ ﺫﻟﻚ .ﰎ ﺗﻄﻮﻳﺮ بواسطة شركة نيتسـكيب Netscape . ﻭﻫﻲ ﻭﺍﺣﺪﺓ ﻣﻦ ﺃﺷﻬﺮ ﺍﻟﻠﻐﺎﺕ ﺍﻟﻨﺼﻴﺔ ﻋﻠﻰ ﺍﻹﻧﺘﺮﻧﺖ. . تعمل جافاسكريبت على معظم المتصفحات الرئيسية الموجودة اليوم مثل Internet Explorer من شركة مايكروسوفـت. وغيرها ...
مـا هــي جافاسكريبت؟ صممت جافاسكریبت لإضافة التفاعلیة لصفحات HTML. جافاسكریبت هي لغة برمجة نصیة – لغة البرمجة النصیة هي لغة خفیفة. جافاسكریبت هي عبارة عن أسطر قابلة للتنفیذ. · جافاسكریبت هي لغة مفسرة. یمكن لأي شخص استخدام جافاسكریبت بدون شراء ترخیص استخدام. جافاسكریبت مدعومة من غالبية متصفحات الإنترنت الشهیرة.
هل جـافا Java هي نفسهـا جافاسكريبت ؟ لا! جافا و جافاسكریبت هما لغتین مختلفتین تماماً... جافا (طورت بواسطة شركة صن مایكروسیستیمز) هي لغة برمجة قویة ومعقدة – وفي نفس التصنیف مع لغات برمجة مثل C و ++C. بالإضافه الى أنك تحتاج الى برامج خاصة للكتابة بلغة الجافا ، بینما الجافا سكربت أبسط بكثیر ! يمكنك بمجرد فتح أي برنامج تحرير نصوص مثل النوتة NOTEPAD كتابة السكربت كاملا
ما الذي يمكن لـ جافاسـكريبت أن تفـعله؟ جافاسكریبت تعطي مؤلفي HTML أداة برمجیة – مؤلفي HTML لیسوا مبرمجین، ولكن جافاسكریبت هي لغة برمجة بسیطة التركیب! فبإمكان أي شخص أن یضع نصاً صغیراً لصفحات HTML الخاصة به. 2. یمكن لـ جافاسكریبت أن تستجیب للأحداث – یمكن لـ جافاسكریبت أن تنفذ أمراً عندما یحدث شيء ما، مثل عند انتهاء تحمیل الصفحة أو عندما یضغط المستخدم على عنصر HTML. · 3. یمكن أن تستخدم جافاسكریبت للتحقق من البیانات – یمكن لـ جافاسكریبت أن تستخدم للتحقق من البیانات المدخلة في النماذج –في مواقع الإنترنت- قبل اعتمادها، وذلك یوفر الكثیر من وقت المعالجة بالنسبة للخوادم Servers
var x = 4هي نفسها var x= مثلا 4 ممیزات الجافا سكربت الجافا سكربت تختلف عن أغلب لغات البرمجة الأخرى في كونھا سھلة التحكم ، حتى للأشخاص الذين لم يكتبوا بأي لغة برمجة أخرى. توفر لغة الجافا سكربت التعامل مع الأحداث events تعمل لغة الجافا سكربت من خلال جمیع أنظمة التشغیل مثل الويندوز و اللینكس ، فھي لا تعتمد علي نظام التشغیل Platform independent الجافا سكربت ھي case sensitive language (لغة حساسة لحالة الأحرف ) أي أن الكلمة المكتوبه بالحروف اللاتینیه الصغیره تختلف عن نفس ، الكلمة مكتوبة بالأحرف الكبیره مثلا: aLi غیر ali غیر Ali . وھكذا.. يفترض الى درجة الإلزام أن ينتھي كل سطر بفاصلة منقوطة: var x = 3; الجافا سكربت كما html تتجاھل المساحات الخالیة ، والسطور الجديدة ، var x = 4هي نفسها var x= مثلا 4 ملاحظة أنه لابد من ترك مسافة خالیة على الأقل بعد أي مصطلح من مصطلحات الجافا
ما هي البرامـج التي أحتاجهـا؟ لا تحتاج – في الحقیقة – سوى إلى محرر نصوص! وذلك لكتابة النص البرمجي (الكود) الخاص بـHTML ومن ثم تضمین جمل جافاسكریبت فیها... إذا كنت تصمم صفحاتك ببرنامج مثل FrontPage فبإمكانك وضع جمل جافاسكریبت ضمن محرر HTML في البرنامج... إذا رغبت في تطبیق التمارين في هذا الكتاب، استخدم برنامج المفكرة Note Pad المرفق بنظام التشغیل، واحفظ ملفات التدریبات بالامتداد htm.file أو html.file ، ویمكنك بعد ذلك استعراضها بمتصفح الإنترنت لدیك، سواءً .Navigator أو Internet Explorer او
إنـهاء الجمل بفاصلة منقوطـة؟ مع لغات البرمجة التقلیدیة مثل ++C وجافا، كل جملة (تعلیمة) برمجیة تنتهي بفاصلة منقوطة " ; " معظم المبرمجین استمروا في هذه العادة عند الكتابة بلغة جافاسكریبت؛ لكن عموماً، كتابة الفاصلة المنقوطة أمر اختیاري! على الرغم من ذلك؛ الفاصلة المنقوطة مطلوبة عند كتابة أكثر من جملة برمجیة في سطر واحد.
أين تضع الكود في الصفحة ؟ جافا سكريبت لغة تعتمد علي الكائنات البرمجية , وهو الشئ الذي يمنحها قوة في الإستخدام , لكن أين نكتب أوامر الجافا سكريبت :- إما في الجسم body الخاصة بكود HTMl إما في الرأس head الخاصة بكود HTMl ويتم ھذا الإدراج عن طريق : ١. إدراج داخلي ٢. إدراج خارجي إدراج داخلي : فیه يتم كتابة كود الجافا سكربت: أو كلاھما <Body> أو الوسم <Head> إدراج خارجي : فیه يتم إدراج كود الجافا سكربت من ملف خارجي غالبا ما يكون ذو إمتداد كما يلي js <SCRIPT LANGUAGE="JavaScript" src="fileName.js"></SCRIPT> jsويتم كتابة كود الجافا سكربت في الملف ذو الإمتداد
يكتب عادة كود الجافا سكربت برأس الصفحة يكتب عادة كود الجافا سكربت برأس الصفحة أي بين وسمي رأس الصفحة )<head> ------------ </head> ) </HTML> <head> <TITLE>كتابه داخل جزء الراس </TITLE> <SCRIPT LANGUAGE="JavaScript"> document.write("Hello World"); </SCRIPT> </head> <BODY> </BODY> Place Photo Here, Otherwise Delete Box
سؤال : هل مسموح كتابه كل من القسمين Body و Head <HTML> <HEAD> <TITLE> الفرق بین وضع الكود </TITLE> <script language="JavaScript"> document.write(" مرحبا بك في الوسم Head"); document.write("<br>"); </SCRIPT> </HEAD> <BODY> document.write(" مرحبا بك في وسم Body"); </BODY> </HTML> نعم.. مسموح فقط الفرق وقت التنفيذ
الفرق بين كتابه الكود البرمجي في قسم الجسم body او الراس head؟ نضع النصوص البرمجیة التي تحتوي على دوال functions في القسم head من الصفحة. بذلك نضمن أن النصوص البرمجیة قد تم تحمیلها قبل استدعاء الدوال. في القسمBODY « یتم تنفیذ النصوص البرمجیة الموضوعة في القسم body.
طريقة كتابة كود الجافا سكربت طرق كتابة كود الجافا سكربت: <script type = " text/javascript"> - هنا یكتب كود الجافا سكربت </script> ---------------------------------- : هذي اللي راح نعتمدها هذا الترم <script language="JavaScript"> طريقة الأولى طريقة الثانية
امثلة طريق الأول في body طريق الأول في head </HTML> <HEAD> <TITLE>My First Script</TITLE> </HEAD> <BODY> <B> this is my First JavaScript Code </B> <HR> <SCRIPT LANGUAGE="JavaScript"> document.write("Hello World"); </SCRIPT> </BODY> -------------------------------------------------------------------- طريق الأول في body </HTML> <HEAD> <TITLE>My First Script</TITLE> <SCRIPT LANGUAGE="JavaScript"> document.write("Hello World"); </SCRIPT> </HEAD> <BODY> <B> this is my First JavaScript Code </B> <HR> </BODY> -------------------------------------------------------------------- طريق الأول في head
امثلة ------------------------------------- <HTML> <HEAD> <Title> الطريقة alert </Title> <SCRIPT LANGUAGE="JavaScript"> Window.alert("من فضلك يجب إدخال بيانات صحيحة"); </SCRIPT> </HEAD> <body></body> </HTML> ------------------------------------- <body> Window.alert("من فضلك يجب إدخال بيانات صحيحة") </body>
تعريف مبدأي ببعض أوامر الجافا سكربت استخدام أنواع النوافذ Window 1-أمر رساله تنبية الصفحات : Window.Alert (“كتابه النص او استدعاء من الذاكره”) 2-أمر تأكيد الصفحات : Window.Confirm (“كتابه النص ”) 3-نافذه إدخال القيم او النصوص من قبل المستخدم : Window.prompt(“الرجاء إدخال القيمه الافتراضيه”) 4- امر تنفيذ اغلاق الصفحات : Window.close() 5- أمر نافذه طباعه الصفحات : Window.print()
1-أمر رساله تنبية الصفحات Alert بعض اوامر الجافا سكربت .. 1-alert تقوم بإظھار رسالة إلي المستخدم . · كما سنري لاحقا ويكتب كودها بالشكل التالي ،window تعتبر إحدي الوظائف التابعة للكائن Window.alert ("welcome to سارا"); بعض الاوامر التي تستخدم مع alert الامر وصف الامر مثال \n سطر جدید window.alert("hi \n all"); \t لترك مسافة بین كل كلمة وكلمة بحیث تظهر كجدول window.alert("hi \t all"); \r لوضع كل كلمة بسطر ولكن بإختلاف الposition window.alert("hi \r all"); \\ لكتابة رمز (\) window.alert("hi \\ all"); \" لكتابة رمز(") window.alert("hi \" all"); \’ لكتابة رمز(‘) window.alert("hi \' all"); ملاحظة : لكتابة سطر جدید لعمل سطر جدید \r\n قمنا بإستخدام علامات : alert بالامر
confirm 2-أمر تأكيد الصفحات بعض اوامر الجافا سكربت .. 3-confirm تقوم بإظهار رسالة مثل الطریقة alert السابقة بالإضافة إلي أنها تقوم بإرجاع أحدي القیمتین false أو true كما سنري لاحقا ويكتب كودها بالشكل التالي ،window تعتبر إحدي الوظائف التابعة للكائن Confirm (" ("ضع هنا رسالتك window. Confirm (" ضع هنا رسالتك"); مثال <HTML> <Title> الطریقة confirm </Title> <HEAD> <SCRIPT LANGUAGE="JavaScript"> confirm(" ("من فضلك هل أنت متأكد من إتمام عملیة حذف هذا الملف؟; </SCRIPT> </HEAD> </HTML>
3- نافذه إدخال القيم او النصوص من قبل المستخدم prompt: بعض اوامر الجافا سكربت .. 2-prompt تقوم بإظهار رسالة مثل الطریقة confirm السابقة بالإضافة إلي أنها تقوم بإرجاع أحدي القیمتین القیمة المدخلة من خلال المستخدم أو القیمة (null) وهي تعني لاشئ. كما سنري لاحقا ويكتب كودها بالشكل التالي ،window تعتبر إحدي الوظائف التابعة للكائن prompt("ضع رسالتك هنا ", "القيمة الافتراضية للقيمة الراجعة "); window. prompt ("ضع رسالتك هنا ", "القيمة الافتراضية للقيمة الراجعة "); مثال <HTML> <Title> الطریقة prompt </Title> <HEAD> <SCRIPT LANGUAGE="JavaScript"> Var name =prompt( "أدخل هنا اسمك" ,"ما هو اسمك") alert(name ) // طريقه ثانيه alert( prompt( "أدخل هنا اسمك" ,"ما هو اسمك")); << تم دمج رساله تنبيه مع مربع ادخال </SCRIPT> </HEAD> </HTML>
4- امر تنفيذ اغلاق الصفحات close بعض اوامر الجافا سكربت .. 2-close تقوم بإظهار رسالة مثل الطریقة Alertالسابقة. كما سنري لاحقا ويكتب كودها بالشكل التالي ،window تعتبر إحدي الوظائف التابعة للكائن Close(); //الاقواس يجيب ان تكون فارغه ممنوع الكتابه داخلها تعتبر داله جاهزه window. close(); مثال <HTML> <Title> الطریقة close </Title> <HEAD> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> </HTML>
5- أمر طباعه الصفحات print بعض اوامر الجافا سكربت .. 2-print تقوم بإظهار نافذه خاصه لطباعه الصفحه كما سنري لاحقا ويكتب كودها بالشكل التالي ،window تعتبر إحدي الوظائف التابعة للكائن print(); //الاقواس يجيب ان تكون فارغه ممنوع الكتابه داخلها تعتبر داله جاهزه window. print(); مثال <HTML> <Title> الطریقة Print </Title> <HEAD> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> </HTML>
Javascript بعض اوامر الجافا سكربت .. ١- أمر الطباعة : document.write و تستخدم لطباعة نصوص معينة على الصفحة object document تابع لل method write فمثلاً نقول ال document. write ونضع بينهم. نقطة ... كما يلي طرق الكتابة: الطریقة الأولى : طباعة جملة لا یقع علیها تأثیر اي وسم من وسوم ال HTML document.write (" هنا الجملة المراد طباعتها") الطریقة الثانیة : طباعة جملة یقع علیها تأثیر وسم ال HTML document.write("<h1< هنا الجملة المراد طباعتها </h1>") الطریقة الثالثة : طباعة قیمة متغیر ... document.write( sum ); الطریقة الرابعة : طباعة قیمة متغیر یسبقه جملة نصیة .. document.write(": الناتج هو " + sum ); الطریقة الخامسة : طباعة قیمة متغیر یسبقه ویعقبه جملة نصیة .. document.write(": الناتج هو " + sum "للعملية" +); كما يتم دمج النصوص ( والنص ھو الجملة المحددة بعلمتین تنصیص " " ) بإستخدام الرمز + المستخدم في عملیات الجمع + ملاحظة : لكتابة سطر جدید بالامر write قمنا باستخدام الوسم “<br>”
امثلة HTML> <HEAD> <Title> الطریقة write </Title> <SCRIPT LANGUAGE="JavaScript"> document.write("<Font Color=red> هل انت متاكد من عملية الحذف </Font>"); document.write ("<br>"); اضافه سطر جديد document.write("<Center>" + "<Input type=button value= موافق>"); document.write("<Input type=button value= غير موافق ></Center>"); document.write("<br>"); </SCRIPT> </HEAD> <Body></Body> </HTML>
ملاحظات مهمة : لـ ربط نصف مع الرساله تنبيه او على الصفحه اي جملة نصیة ترید ان تضعها بداخل كود الطباعة یجب ان تحصرها بین ( " " ) حتى لو احتوت على وسم html ال طباعة قیمة متغیر .... ویوجد لها اكثر من حالة : ١- اذا كنت ترید فقط ان تطبع قیمة المتغیر بمفرده ... تضعه بداخل أمر الطباعة من غیر ان تحصره ب (" " ). ٢- اذا كنت ترید طباعة قیمة متغیر تسبقه جملة نصیة یجب ان تحصر الجملة النصیة بین (" " ) ومن ثم تذكر المتغیر المراد طباعة قیمته ولكن یجب ان تضع قبله ( + " " ) ولتوضیح اكثر تضع اشارة ( + ) بالجهة التي بها النص.... مثلا ... جاء النص قبل المتغیر نضع اشارة ال ( + ) قبل المتغیر مثلا ... جاء النص بعد المتغیر نضع اشارة ال ( + ) بعد المتغیر مثلا ... جاء النص بعد المتغیر وقبله نضع اشارة ال ( + ) بعد المتغیر وقبله ..
مثال قومي بطباعه إسمك على الصفحه مباشره . اكتبي رساله تنبيه (مرحبا بك) تنفيذ أمر نافذه إغلاق الصفحه