دورة في التعامل مع خاصية جديد *****css

السـلام علــيـكـم و رحمـة الله تعـالى و بــركـاتـه ..

و الصلاة و السلام على أشــرف المــرسليـن ..

تمضي الأيـام .. لكن الذكرى تبقــى الماضــي مضـى .. و المضارع يمضي

لذلك فلنطـوي صفحـة الماضـي و لنبــدأ بصفحات بيضــاء جديــدة

و لنــجعل من الذكريات الــوانا في كتابنا و لنــملئ صــفاحتنا البيــضاء بســطور ذهبية

تعــكس جمالها على منتــدانا هذا .. الحمـد لله وحده نحمده و نشكره و نستعـينه و نستـغفره و نعـود بالله

مـن شـرور أنـفسنا و من سيـئات أعمالنا .. من يـهده الله فلا مظل لـه و مـن يظـلل فلن تـجد له ولياً

مرشدا ..و أشـهد ألا إلاه إلا الله وحده لا شريك له و أن محــمداً عبده و رسـوله صــلى الله عليه وسلم

و على آله و صحبه أجمعين و من تبعهم بإحسـان إلى يوم الدين ..ربنا لا علم لنا إلا ما علمتنا إنك أنت العليم

الـخـبــيـر .. ربـنـا لا فــهم لـنا إلا ما فهــمتنا إنــك أنـت الجــواد الـكـريـم .

ربـي اشرح لي صــدري و يســر لي أمــري و احــلل عقــدة من لســاني يفقــهوا قــولي ..

... أما بعد ...

فإن أصــدق الحــديث كــتاب الله تعــالى و خير الــهدي هــديُ سيـدنا محمد صلى الله عليه و سلم ..

و شــر الأمــور مــحدثــاتها و كــل محــدثة بدعة و كل بدعـة ظـلالة و كل ظـلالة فــي النار ..

فاللــهم أجــرنا و قــنا عذابــها برحمتــك يا أرحــم الراحميــن


اهلا بكم اخوانى اعضاء ومشرفى ومحبى هذا المنتدى العظيم ..



مقدمـة :

نظرا لان دروس المنتدى اصبح تقريبا تتجه لاتجاه واحد و هو البي ايتش بي

قررت ان اضع لكم دورة شاملة حول لغة الجافا سكريبت

و الدورة ستكون مقسمة لجزئين

1) اسـاسيات Js

2) تقنيات Js

كل درس سيحوي عدد معين من الدروس

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








ما سنحتاجه :



- محرر نصوص و انصح بـ Notepad++


- سرفر محلي و انصح بـ AppServer


- معرفة متوسطة في html







في الدورة كلمة Js في اي كود تعني Ja va sc ript

و ذلك لكي لا يظهر الكود كالتالي --SS--

&& 5scrip تعني sc ript

و ذلك لكي لا يظهر الكود كالتالي --SS--



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

الدرس السابق تطرقنا للالوان ،، في هذا الدرس سنتطرق للحجوم && الخطوط اولا نعيد كتابة الاكواد مثلما فعلنا سابقا


<5cript type="text/Js">
اي دالة خاصة بالجافا في الملف توضع هنـا



اول شيء سندخل لملف html و نضع فيه اكواد و هي عبارة عن بعض الازرار و النصوص في الصفحة و مكان خاص لتغيير الستايل




Js Tutorial



Choose Style:





Some Things




on click دون فراغ

الكود عبارة عن كود فيه تم وضع مايلي

عندما يتم الضغط على الزر نستدعي الفنكشن chk_css و تاخذ احد القيمتينو تاخذ احد القيمتين blue or green

result :




الان سنذهب فوق الكود الذي كتبناه

<5cript type="text/Js">
اي دالة خاصة بالجافا في الملف توضع هنـا

نضع هنا دالة الجافا سكريبت التالية

function chk_css(css){
if(css == "blue"){
}
if(css == "green"){
}
}

فنكشن جافا

الاسم chk_css

البارامتر 1 و هو css

if(css == "blue"){
}


تعني في حالة تم الضغط على زر blue

if(css == "green"){
}





تعني في حالة تم الضغط على زر green



اولا الستايل آلازرق

if(css == "blue"){
document.getElementById("ftext").color="blue";
document.getElementById("fstyle").color="blue";
document.getElementById("fhome").color="blue";
document.getElementById("blue").disabled=1;
document.getElementById("green").disabled=0;
}

اولا

document.getElementById("ftext").color="blue";
document.getElementById("fstyle").color="blue";
document.getElementById("fhome").color="blue";

اعطاء العناصر اللون الازرق حسب الاي دي

document.getElementById("blue").disabled=1;

تعطيل الزر الازرق

document.getElementById("green").disabled=0;
تشغيل الزر الاخضر


الستايل الاخضر

if(css == "green"){
document.getElementById("ftext").color="green";
document.getElementById("fstyle").color="green";
document.getElementById("fhome").color="green";
document.getElementById("blue").disabled=0;
document.getElementById("green").disabled=1;
}

اولا

document.getElementById("ftext").color="green";
document.getElementById("fstyle").color="green";
document.getElementById("fhome").color="green";
اعطاء العناصر اللون الازرق حسب الاي دي

document.getElementById("blue").disabled=0;
تشغيل الزر الازرق

document.getElementById("green").disabled=1;
تعطيل الزر الاخضر



سنضيف في الشرط الاول اي تحت

document.getElementById("green").disabled=0;
ما يلي

document.getElementById("ftext").style.fontFamily="Comic Sans ms";
document.getElementById("fhome").style.fontFamily="Comic Sans ms";
document.getElementById("fstyle").style.fontFamily="Comic Sans ms";

style.fontFamily هي التي تتيح لنا التحكم بالخطوط ،، اخترت في الستايل الازرق الخط Comic Sans ms


سنضيف في الشرط 2 اي تحت

document.getElementById("green").disabled=1;
ما يلي

document.getElementById("ftext").style.fontFamily="Andalus";
document.getElementById("fhome").style.fontFamily="Andalus";
document.getElementById("fstyle").style.fontFamily="Andalus";

style.fontFamily هي التي تتيح لنا التحكم بالخطوط ،، اخترت في الستايل الازرق الخط Andalus



الان سنتحكم بالحجوم كالتالي في الستايل الازرق نضيف

document.getElementById("ftext").size="3";
document.getElementById("fstyle").size="3";
document.getElementById("fhome").size="3";
size. هي المسوولة عن الحجم و اخترت 3



في الستايل الأخضر نضيف

document.getElementById("ftext").size="5";
document.getElementById("fstyle").size="5";
document.getElementById("fhome").size="5";
size. هي المسوولة عن الحجم و اخترت 5



النتيجة :

Blue :

Green:





تقبلوا تحياتي و انتظر رسائلكم او ردودكم بخصوص الاستفسارات
تحيــ Youssef ــاتي

بالتوفيـــقــ،،،ــ