Javascript Basics | أساسيات جافا سكربت

Standard

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

التدوينه دى ان شاء الله فيها تلخيص لأساسيات جافا سكربت بطريقه مبسطه و سهله ممكن اى حد يفهمها و مش حتكلم بألفاظ او اسلوب برمجى بحت علشان الناس اللى بتقول انها مش فاهمه المصطلحات يعنى كله النهارده عاميه و بلدى .. الاول يعنى ايه جافا سكربت و ايه فايدتها؟

جافا سكربت لغه برمجه بتشتغل فى متصفح الويب زى فايرفوكس و اكسبلورر و اوبرا .. الخ , و فايدتها انها لغه من جهه العميل .. يعنى ايه الكلام ده

لغه جهه العميل يعنى لغه بتشتغل عند المستخدم اليوزر فى المتصفح بتاعه و بتخلى الصفحه فيها تفاعل و حركه .. لو عملت صفحه بلغه اتش تى ام ال عاديه خالص مش حتقدر انك تتحكم فيها لانها حتكون مجرد نصوص مرتبه بس و هنا فايده جافا سكربت

فايده تانيه .. نفترض ان عندنا فورم و الفورم ده فى 2 صندوق نص و زر .. الصندوق الاول بياخد الاسم و التانى بياخد الباسورد و بعدها عن طريق اى لغه سيرفر زى بى اتش بى يعمل فحص للباسورد و الاسم و لو صح يسمح بالدخول

طب افرض ان اليوزر اصلا ساب خانه الاسم او خانه الباسورد فاضيه .. من غير الجافا سكربت حيتبعت الكلام الفاضى ده للسيرفر و بعدها السيرفر يرد عليك يقولك انك ماحطتش الاسم او الباسورد .. بس استنى احنا قلنا اننا رحنا للسيرفر .. و ده استهلاك طلب على السيرفر + ان النت عندك ممكن بطىء و كده شغلانه ع الفاضى.. الخ

يبقى الحل اننا نحط كود جافا سكربت يتحقق من و احنا هناك ان كله تمام و ان فى اسم مكتوب و فى باسورد مكتوب و يبعتنا للسيرفر ساعتها

اما لو الاسم مش مكتوب او الباسورد مش مكتوب يطلعلك رساله خطأ او تحذير ان فى خانه ناقصه و طبعا مايبعتكش للسيرفر😀

و فى طبعا فوايد تانيه كتير زى الكوكيز  و استخدام البى بى كوود فى صندوق الكومنتات و استخدامها مع ستايلات سى اس اس  و حاجات حلوه كتير يعنى😀

نبدأ واحده واحده

جافا سكربت بتتكتب فى صفحه الاتش تى ام ال بتاعتنا عادى خالص بالطريقه دى

<html><head><title>Tlfna Blog – JS Basics Tutorial</title>
</head>

<body>

<script type=”text/javascript”>

</script>

</body>

</html>

اللى بالخط السميك ده هو اللى لازم نكتبه لان بين السطرين دول نكتب اكوادنا و نتكل على الله🙂

مثال : عاوزين ناخد من المستخدم أسمه و نقوله مرحبا فلان

<html><head><title>Tlfna Blog – JS Basics Tutorial</title>
</head>

<body>

<script type=”text/javascript”>

x = prompt(“Enter your name: “,” “);

alert(“Welcome “+x);

</script>

</body>

</html>

هنا انا عملت ايه؟

طلعت للمستخدم صندوق نصى سألته فيه اسمك ايه .. لما كتب اسمه حفظ الاسم فى المتغير اللى اسمه أكس

طب يعنى ايه متغير؟ المتغير ده بالظبط زى الوعاء او الكوبايه نحط فيه حاجه و نبدأ نشتغل عليها .. يعنى اتنين متغير و نبدأ نلعب عليهم .. نجمعهم .. نطرحهم .. نطبعهم .. اى حاجه و الامثله توضح ده

مثال 2 :

عاوز اطلع للمستخدم صندوقين نص يدخل اسمه الاول و اسمه الاخير و اطبعهم له على بعض

<html><head><title>Tlfna Blog – JS Basics Tutorial</title>
</head>

<body>

<script type=”text/javascript”>

x = prompt(“First Name: “,” “);

y = prompt(“Last Name: “,” “);

z=x+y;

alert(“Hello Mr. “+z);

</script>

</body>

</html>

بس فى مشكله و هى ان كله حيتطبعله كلمه مستر

Mr .

افرض ان فى ست كبيره او موزه صغيره او كده يبقى خلينا نخلى المثال افضل بالشكل ده و نتعملم صندوق جديد غير دول

prompt بياخد كلام من المستخدم

alert بيطلع رساله للمستخدم فيها معلومات او تنبيه

نشوف المثال ده

<html><head><title>Tlfna Blog – JS Basics Tutorial</title>
</head>

<body>

<script type=”text/javascript”>

x = prompt(“First Name: “,” “);

y = prompt(“Last Name: “,” “);

z=x+y;

q=confirm(“Are you male?”);

if(q){

sex=”Mr.”

}

else{

sex=”Ms.”

}

alert(“Hello  “+sex+z);

</script>

</body>

</html>

هنا عملنا ايه؟

سألنا عن الاسم الاول و الاسم الاخير و بعدها طلعنا صندوق سؤال .. هل انت ذكر ؟ لو الاجابه بالضغط على “نعم”  ساعتها المتغير اللى اسمه الجنس يساوى مستر .. اما لو كان الضغط على “لا” المتغير الجنس يساوى مس

طب ازاى عملت الشرط ده ؟ ازاى لو كذا اعمل كذا؟ ده يخلينا ندخل على الشرط

الشرط :

الشرط ده يعنى بنسأل على حاجه لو اتحققت ننفذ شىء .. لو ماتنفذتش نحقق شرط تانى و هكذا ..

المثال اللى فوق قلنا فيه

if(q){

sex=”Mr.”;

}

else{

sex=”Ms.”;

}

طب كده كان عندنا شرطين

لو عاوزين اكتر من شرط .. خلينا نعمل مثال على ايام الاسبوع و نشرحه

<script type=”text/javascript”>
d = new Date();
day = d.getDay();
if(day == 0)
document.write(“Sun”);

else if(day == 1)
document.write(“Mon”);

else if(day == 2)
document.write(“Tue”);

else if(day == 3)
document.write(“Wed”);

else if(day == 4)
document.write(“Thu”);

else if(day == 5)
document.write(“Fri”);

else
document.write(“Sat”);
</script>

حجزنا متغير اسمه “دى” و المتغير ده نوعه “تاريخ” و يحتوى التاريخ كامل

بعدها حجزنا متغير تانى سميناه “اليوم” و ده بيستخلص اليوم بس من التاريخ الكامل عن طريق الداله

getDay();

الداله دى بترجع لنا رقم يبدأ من صفر الى 6

و لازم تعرف ان اى عد فى اى لغه برمجه بيبدأ من صفر على عكس العد البشرى اللى بيبدأ من 1

بما ان اللغه اخترعها الغربيين اذا اول يوم فى الاسبوع هو الاحد

0 = الاحد

1 = الاثنين

2 =  الثلاثاء

3 = الاربعاء

4 = الخميس

5 = الجمعه

6 = السبت

لو لاحظت المثال السابق تلاقى ان احنا سألنا لو المتغير “اليوم” بيحمل القيمه 0 اطبع كلمه “الاحد” .. و ملحوظه كمان فى كل الامثله السابقه كنت بستخدم الداله

alert(“Sun”);

لكن فى المثال السابق استخدمت

document.write(“Sun”);

الداله دى مش بتطلع صندوق رساله .. دى بتكتب فى صفحه الويب نفسها

ملحوظه كمان

لو عاوز تطبع نص ملون او سميك او اى حاجه شبه كده ممكن داخل الداله

document.write(“<font color=blue><strong>Hello I’m Printing strong blue font </strong></font>”);

تحت الإنشاء😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s