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

‫عالم جافا سكريبت‬

‫مقدمة‬
‫أعتقد أن التعليم كالماء والهواء ومن حق‬
‫كل عربي الحصول على المعرفة التي‬
‫يريدها‬
‫مبرمج المستحيل ‪ :‬عيد فتحي‬
‫العنوان ‪ :‬ميت الفرماوي مركز ميت غمر دقهلية‬
‫مصر‬
‫محمول ‪0121270873:‬‬
‫‪Mail:eid200002@gmail.com‬‬

‫مقدمة الجافا سكريبت‬

‫تعتبر الجافا سكريبت من أهم اللغات التي تستخدم‬
‫برمجة صفحات الويب وهي تعطي ديناميكية للصفحة‬
‫حيث يمكن للمستخدم أن يتفاعل مع صفحة الويب‬
‫ويمكن استخدام محرر المفكرة ‪notepad‬‬
‫أو محرر خاص بالجافا سكريبت لكتابة الكود‬
‫كما أن كود الجافا سكريبت يكتب ضمن كود ‪HTML‬‬
‫كالتالي‬
‫كما أنه البد من كتابة العبارة‬

‫وتنتهي بعبارة <‪>script/‬‬

‫كما يحفظ الملف بامتداد ‪html‬‬

‫;‬ ‫كما أن كود الجافا البد أن ينتهي بهذه العالمة‬

‫(سمي كول)‬

‫كما أننا سوف نستخدم محرر نصوص خاص بالجافا‬

‫سكريبت‬
 ‫أوال الرسائل‬
‫تعتبر الرسائل سمة مميزة للغة جافا سكريبت‬
‫‪alert‬‬ ‫‪-1‬‬
‫هي تتكون من باروميتر واحد وهو نص الرسالة‬
‫وتكتب كالتالي‬

‫لتكون النتيجة كالتالي‬

‫ب – ‪prompt‬‬
 ‫ولها ‪ 2‬بارومتر األول نص الرسالة والثاني القيمة‬
‫االفتراضية ويمكن عدم كتابة المتغير الثاني وتكتب‬
‫كالتالي‬

‫لتكون النتيجة كالتالي‬

‫ج‪confirm -‬‬
‫وهي تتكون من واحد بارومتر وهو نص الرسالة كما‬
‫تحتوي على زر ‪ ok‬موافق و ‪ cancel‬ارفض وتكتب‬
‫كالتالي‬

‫وتكون النتيجة كالتالي‬

 ‫ثانيا اآلمر ‪write‬‬
‫يستخدم للكتابة داخل صفحة الويب وصيغته كالتالي‬

‫كما يمكن استخدام كود ‪ html‬في داخلها لتكبير‬

‫الخط كالتالي‬

‫ولكن ما الجديد في أمر ‪write‬‬

‫الجديد هو إمكانية إضافة صورة ويمكن أيضا إضافة‬
‫الصوت كالتالي‬
‫‪ -1‬إضافة صورة‬

‫‪ -2‬إضافة الصوت‬
‫كما يمكن استخدام المتغيرات وهي تبدأ ‪ + var‬أسم‬
‫المتغير النصي‬
‫ويمكن استخدام عدة خصائص للمتغير منها ‪bold‬‬
‫خط عريض‬

‫ولنبدأ بعمل عدة مشاريع كي نوضح إمكانيات لغة‬

‫الجافا‬
‫أوال مشروع حفظ الصفحة‬
‫قم بكتابة الكود التالي‬

‫*لعمل زر نبدأ بالعبارة ‪ input‬ثم النوع ‪ type‬هو زر‬

‫‪ button‬ثم تسمية هذا الزر من الخاصية ‪ value‬ثم‬
‫نقوم بوضع الحدث وهو الضغط ‪onclick‬‬
‫*ملحوظة يكتب كود الزر في كود ‪ body‬داخل أكواد‬
‫‪ html‬وليس داخل أكواد جافا‬

‫*بعد ذلك نقوم بصنع وظيفة فنبدأ بالكلمة ‪function‬‬

‫ثم نقوم بتسمية الوظيفة وليكن ‪ clos‬والبد في نهاية‬
 ‫السطر من كتابة هذا الرمز{ كما تنتهي الوظيفة بهذا‬
‫الرمز }‬
‫*ونكتب الكائن ويندوز ‪ window‬متبوع بالخاصية ‪close‬‬

‫*كما نستدعي الكائن من خالل الضغط على الزر في‬

‫الحدث ‪ onclick‬وذلك بكتابة أسم الوظيفة ‪)(clos‬‬

‫مشروع زر للخلف ‪back‬‬ ‫‪-2‬‬

‫كما تالحظ فقد أدرجنا زر وسميناه للخلف وجعلناه‬

‫يستدعي الدالة ‪)(wback‬‬
‫بعد ذلك أنشأنا دالة ‪)(wback‬‬
 ‫وداخل الدالة كتبنا الكائن ويندوز متبوع بالطريقة‬
‫‪ history‬متبوع بالخاصية باك ‪)(back‬‬
‫ويمكنك إنشاء ‪ )(forward‬بنفس الطريقة (أي لألمام)‬

‫‪ -3‬مشروع حفظ الصفحة‬

‫أكتب الكود التالي‬

‫لقد استخدمنا الكائن ‪ document‬متبوع بالطريقة‬

‫‪ execommand‬ثم كتبنا بين األقواس ‪save as‬‬
‫‪ -4‬مشروع فتح صفحة ويب‬
‫أكتب الكود التالي‬
 ‫‪ -5‬مشروع ‪href‬‬
‫الخاصية ‪ href‬ترسلك إلى موقع ما وهي تنشأ‬
‫ارتباط تشعبي و تكتب ‪ location‬متبوعة بخاصية‬
‫‪ href‬أكتب الكود التالي‬

‫مشروع فتح صفحة ‪URL‬‬ ‫‪-6‬‬

 ‫أكتب الكود التالي‬

‫‪ -7‬عمل قائمة للتنقل بين صفحات الموقع‬

‫أكتب الكود التالي‬
 ‫شرح الكود‬
‫‪ ‬قمنا بإنشاء نموذج ‪ form‬وقمنا بتسميته‬
‫‪ ‬اآلمر ‪ select‬وهو قائمة أعطيناه اسم ‪dest‬‬
‫‪ ‬اآلمر ‪ option‬وهو عناصر القائمة‬
‫‪ ‬وأعطيناه القيمة ‪ value‬اسم الموقع والقيمة‬
‫الظاهرة‬
‫‪ ‬بعد ذلك إنشائنا زر ‪button‬‬
‫‪ ‬ثم قمنا بإنشاء دالة ‪function‬‬
‫‪ ‬قمنا بإنشاء متغير ‪ myindex‬وهو يساوي النموذج‬
‫متبوع باسم القائمة متبوع بالخاصية ‪selectindex‬‬
‫وهي تعني تحديد عنصر ما بالقائمة‬
‫‪ ‬وأخير أمر ‪ window.open‬لفتح صفحات الويب‬
‫المحددة‬

‫عمل قائمة ‪ href‬للتنقل في الموقع‬ ‫‪-8‬‬

‫هو نفس الكود السابق ولكن قمنا بالتغيير إلى‬
‫‪location.href‬‬

‫‪ -9‬مشروع حساب مساحة الدائرة‬

‫أكتب الكود التالي‬
 ‫شرح الكود‬
‫أوال نقوم بعمل ‪ form‬وإعطاؤه أسم‬
‫ثانيا نقوم بعمل ‪ 2‬مربع نص ‪ text‬وإعطاؤهما اسم‬
‫ثالثا نقوم بإنشاء زر‬
‫نقوم بتعريف متغير ‪ x‬ومساويته ‪txt1‬‬
‫‪;var y=parseFloat(x)*parseFloat(x)*3.14‬‬
‫نقوم بتعريف متغير ‪ y‬وهو قانون نصف قطر الدائرة‬
‫واستخدمنا الدالة ‪ parseFloat‬وهي تقوم بتغيير‬
‫المتغير النصي إلى رقمي‬
‫ثم نقوم بتسوية مربع النص الثاني ‪ txt2‬بالمتغير ‪y‬‬

‫‪ -10‬مشروع إعادة الوصالت التشعبية الموجودة في‬

‫الصفحة‬
‫قوم بكتابة الكود التالي‬
 ‫شرح الكود‬
‫أوال قمنا بكتابة بعض الوصالت التشعبية ‪link‬‬
‫ثانيا ‪ document.links.length‬هذا المتغير يعيد عدد‬
‫الوصالت في الصفحة‬
‫ثانيا قاعدة ‪ for‬ولها ثالث معامالت األول رقم المتغير‬
‫والثاني الشرط وهو اقل من ‪ x‬والثالث الزيادة وهي‬
‫‪1‬‬
‫ثالثا‬
‫]‪ document.links[y‬وهو يكتب الوصلة أو اللنك حسب‬
‫رقمها في الصفحة وبما أن المتغير ‪ y‬يزيد بمقدار‬
‫واحد حتى يصبح أقل من المتغير ‪ x‬الذي يمثل عدد‬
‫الوصالت فأنه سوف يكتب جميع الوصالت التشعبية‬

‫‪ -10‬مشروع معرفة أسم الهوست ‪host‬‬

‫ملحوظة‬
‫لمعرفة الهوست البد من رفع الصفحة في الموقع‬
‫الخاص بك وإذا لم يكن لديك موقع فسوف تظهر‬
‫الرسالة فارغة‬
 ‫ولمعرفة البرتوكول غير الكود إلى‬
‫‪document.location.protocol‬‬
‫ولمعرفة البورت‬
‫‪document.location.port‬‬
‫ولمعرفة المسار‬
‫‪document.location.pathname‬‬
‫وبذلك نكون قد انتهينا من الكائن‬
‫‪.document.location‬‬

‫‪-11‬مشروع معرفة نوع المتصفح ومعلومات عنه‬

 ‫الفصل الثالث الحافظة ‪clipboard‬‬
‫وهي نسخ وقص ولصق النصوص‬
‫أوال نسخ‬

‫شرح الكود‬
‫نقوم بإنشاء زر ونموذج نسميه ‪ myform‬و أداة‬
‫‪ textarea‬نسميها ‪ta‬‬
‫بعد ذلك ننشأ الدالة ‪coy‬‬
‫الكود ‪ )(focus‬يعيد التركيز إلى مربع النص ‪ta‬‬
‫الكود ‪ )(select‬يحدد الكلمات التي سوف تنسخ‬
‫بعد ذلك كود ‪copy‬‬

‫ثانيا كود ‪cut‬‬

‫نفس الكود السابق مع تغيير كلمة ‪ copy‬إلى ‪cut‬‬

‫كود ‪ paste‬لصق‬
 ‫الفصل الرابع ‪shell‬‬
‫وظيفة ‪ shell‬أنها تقوم بفتح الملفات في ‪windows‬‬
‫أوال فتح ‪notepad‬‬
‫أكتب الكود التالي‬

‫ثانيا فتح ‪my computer‬‬

 ‫ثالثا عمل إغالق للجهاز‬

‫رابعا عمل إعادة تشغيل‬

‫وفي النهاية ال أرجو منكم سوى الدعاء لي‬