Category Archives: Javascript

اسطوانة لتعليم الجافا سكريبت من البداية حتى الاحتراف بالصوت والصورة وباللغة العربية


اسطوانة رائعة من انتاج شركة الخطيب بالصوت والصورة وباللغة العربية مجانا لتعليم لغة البرمجة جافا سكريبت (JavaScript) تلك اللغة المعروفة بقوتها فى برمجة وتصميم صفحات الويب الديناميكية حيث ادى اكتشافها الى تقدم هائل فى عالم الويب ويرجع اكتشافها وتطويرها الى برندان إيتش (Brendan Eich) ذلك الرجل المعروف بعبقريتة فى عالم برمجة وتطوير الويب والذى كان يعمل فى ذلك الوقت فى كبرى شركات البرمجة والاتصالات حيث كان يعمل بشركة نيتسكيب (Netscape) صاحبة المتصفح الشهير نيت سكيب لذلك يرجع فضل ظهور هذة اللغة الى شركة نيتسكيب (Netscape) وبالرغم من ان هذة اللغة اخذت فى البداية اسم (Mocha) الا انها ظهرت فى سبتمبر عام 1995 باسم (LiveScript) ثم تغيرت بعد ذلك الى جافا سكريبت (JavaScript) والتى لاقت رواجا كبيرا من قبل المطورين على مستوى العالم حيث ادت هذة اللغة الى تحويل صفحات الويب الساكنة المصممة بلغة (HTML) الى صفحات ويب ديناميكية يمكن عن طريقها عمل تفاعل بين صفحات الويب وزوار المواقع.ايضا عند ظهور لغة الجافا سكريبت ادى ذلك الى حدوث اختلاف واسع بين المطورين والمبرمجين على مستوى العالم لما فى هذة اللغة من تشابهة مع لغة البرمجة الشهيرة الجافا فعلى الرغم من التشابهة الكبير فى الاسم بينهما الا انهما لغتان مختلفتان تماما فلغة الجافا سكريبت كما ذكرنا هى لغة متخصصة فى عمل صفحات ويب ديناميكية وهى من انتاج شركة نيتسكيب (Netscape) اما لغة الجافا فهى لغة برمجة عالية المستوى تستخدم فى عمل برامج وتطبيقات سطح المكتب وهى من انتاج وتطوير شركة صن ميكروسيستمز (Sun Microsystems).

 

محتوى الاسطوانة

  1. مقدمة للغة البرمجة الشهيرة جافا سكريبت.
  2. الطريقة اللغوية لكتابة اكواد الجافا سكريبت.
  3. كتابة التعليقات داخل الجافا سكريبت.
  4. المتغيرات وانواعها فى الجافا سكريبت.
  5. جمل الشرط والتكرار وعملية اتخاذ القرارات فى الجافا سكريبت.
  6. صناديق الرسائل وصناديق الادخال.
  7. الاقترانات فى لغة الجافا سكريبت.
  8. انواع المعاملات بلغة الجافا سكريبت.
  9. الدوال وانواعها وكيفية كتابتها.
  10. المصفوفات وانواعها وكيفية استخدامها.
  11. شرح لعملية كتابة الاحداث بلغة الجافا سكريبت.
  12. امثلة وتطبيقات.

 

تحميل اسطوانة الجافا سكريبت

الدرس العاشر فى الجافا سكريبت


Dates

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

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

new  Date()

وهذا الكود يقوم باظهار تاريخ اليوم لمستخدم الموقع ويعتمد على التاريخ الموجود بجهاز المستخدم او فى حالة رفع الموقع فيعتمد على التاريخ الموجود على السرفر.

ويمكن كتابة التاريخ باكثر من صيغة كالتالى:

(1)

var day = new Date()
var day1 = new Date(“December 22, 1999 12:17:01”)

(2)

var day = new Date()
var day2 = new Date(1977,8,20)

حيث فى هذة الحالة فالاقواس تمثل (year,month,day).

(3)

var day = new Date()
var day3 = new Date(1978,5,24,12,33,0)

اما فى هذة الحالة فالاقواس تمثل (hours,minutes,seconds,year,month,day).

الدرس التاسع فى الجافا سكريبت


Form Validation

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

مثال(1):

<!DOCTYPE html>

<html>

<head>

<script>

function validateForm()

{

var x=document.forms[“myForm”][“fname”].value;

if (x==null || x==””)

{

alert(“First name must be filled out”);

return false;

}

}

</script>

</head>

<body>

<form name=”myForm” action=”form.php” onsubmit=”return validateForm()” method=”post”>

First name: <input type=”text” name=”fname”>

<input type=”submit” value=”Submit”>

</form>

</body>

</html>

مثال(2):

<!DOCTYPE html>

<html>

<head>

<script>

function validateForm()

{

var x=document.forms[“myForm”][“email”].value;

var atpos=x.indexOf(“@”);

var dotpos=x.lastIndexOf(“.”);

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

{

alert(“Not a valid e-mail address”);

return false;

}

}

</script>

</head>

<body>

<form name=”myForm” action=”form.php” onsubmit=”return validateForm();” method=”post”>

Email: <input type=”text” name=”email”>

<input type=”submit” value=”Submit”>

</form>

</body>

</html>

الدرس الثامن فى الجافا سكريبت


Errors

-سوف ندرس فى هذا الدرس الاخطاء وكيفية معالجتها والاخطاء هى اما اخطاء لغوية ناتجة عن كتابة كود الجافا سكريبت بصورة خاطئة او اخطاء ناتجة من المبرمج او اخطاء ناتجة عن مستخدم الموقع ولتفادى مثل هذة الاخطاء فان لغة الجافا سكريبت توفر لك الكود التالى لمعالجة الاخطاء:

try
{
//code here
}
catch(err)
{
//Handle errors here
}

حيث يوضع الكود المراد عمل اختبار علية بين اقواس كلمة (try) وتتم معالجة الاخطاء بين اقواس كلمة (catch) ولفهم كيفية معالجة الاخطاء فسناخذ مثال لا يوجد بة اخطاء ثم نعيد هذا المثال ولكن بوجود خطا ثم نطبق علية القاعدة السابقة لكى نتعلم كيفية معالجة الاخطاء:

مثال(1):

<!DOCTYPE html>

<html>

<head>

<script>

var txt=””;

function message()

{

try

{

alert(“Welcome guest!”);

}

catch(err)

{

txt=”Error description:” + err.message;

alert(txt);

}

}

</script>

</head>

<body>

<input type=”button” value=”View message” onclick=”message()”>

</body>

</html>

والمثال السابق هو مثال لايوجد بة اخطاء لذلك قام بتنفيذ الكود الموجود بين قوسى كلمة (try).

مثال(2):

<!DOCTYPE html>

<html>

<head>

<script>

var txt=””;

function message()

{

try

{

alertt(“Welcome guest!”);

}

catch(err)

{

txt=”Error description:” + err.message;

alert(txt);

}

}

</script>

</head>

<body>

<input type=”button” value=”View message” onclick=”message()”>

</body>

</html>

وهنا يوجد خطا موجود فى الكود وهو كتابة الرسالة التحذيرية بصورة خاطئة (alertt) لذلك فانة فى هذة الحالة لا ينفذ الكود الاول وينفذ الكود الثانى الموجود بين قوسى كلمة (catch) والكود الثانى هو عبارة عن رسالة تخبرك بانك كتبت الكود بشكل خاطىء حيث (err) هو متغير يكون ملازم (catch) ونستخدم (err.message) والتى تخرج لك نوع الخطا الموجود تلقائيا من داخل لغة الجافا سكريبت لذلك فملخص الكلام انة فى حالة كتابة الكود بشكل صحيح دون وجود خطا فان كلمة (try) هى التى تعمل فى هذة اللحظة اما اذا وجد خطا فانة فى هذة الحالة تعمل كلمة (catch).

-فى المثال السابق فان رسالة الخطا التى تخبرك بنوع الخطا هى رسالة تلقائية من داخل لغة الجافا سكريبت ولكن يمكنك ان تقوم بعمل رسالة او رسائل الخطا بنفسك دون استخدام رسائل الخطا الموجودة داخل لغة الجافا سكريبت وتتم عمل رسالة الخطا عن طريق استخدام كلمة (throw) وهذة الرسائل التى تقوم انت بنفسك بعملها لها اهمية كبيرة فى مساعدة زوار موقعك والمثال التالى يشرح عملها:

<!DOCTYPE html>

<html>

<body>

<script>

function myFunction()

{

var y=document.getElementById(“mess”);

y.innerHTML=””;

try

{

var x=document.getElementById(“demo”).value;

if(x==””) throw “empty”;

if(isNaN(x)) throw “not a number”;

if(x>10) throw “too high”;

if(x<5) throw “too low”;

}

catch(err)

{

y.innerHTML=”Error: ” + err + “.”;

}

}

</script>

<h1>My First JavaScript</h1>

<p>Please input a number between 5 and 10:</p>

<input id=”demo” type=”text”>

<button type=”button” onclick=”myFunction()”>Test Input</button>

<p id=”mess”></p>

</body>

</html>

الدرس السابع فى الجافا سكريبت


Array

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

var car1=”Saab”;
var car2=”Volvo”;
var car3=”BMW”;

فيمكن عمل مصفوفة ووضع القيم الثلاثة داخلها ولكن فى سطر واحد فقط كالتالى:

var myCars=new Array(“Saab”,”Volvo”,”BMW”);

اذا فالمصفوفة توفر فى كتابة الكود مما يؤدى الى توفير الوقت و تسريع صفحات موقعك.

-المصفوفة لها ثلاث طرق لكتابتها كالتالى:

1-Regular:

var myCars=new Array();
myCars[0]=”Saab”;
myCars[1]=”Volvo”;
myCars[2]=”BMW”;

حيث يتم تعريف المصفوفة كما فى السطر الاول ثم ادارج عناصر المصفوفة كما فى السطور التى تليها ولكن لاحظ ان اول عنصر فى المصفوفة ياخذ الترتيب صفر لان المصفوفة يبدا العد فيها من الصفر وليس الواحد.

2-Condensed:

var myCars=new Array(“Saab”,”Volvo”,”BMW”);

3-Literal:

var myCars=[“Saab”,”Volvo”,”BMW”];

– مثال على استخدام المصفوفة وطباعة قيم منها:

<!DOCTYPE html>

<html>

<body>

<script>

var i;

var mycars = new Array();

mycars[0] = “Saab”;

mycars[1] = “Volvo”;

mycars[2] = “BMW”;

document.write(mycars[0]);

</script>

</body>

</html>

ويكون الناتج بصفحة الويب كما يلى:

Saab

والمثال السابق يمكن استخدام التكرار معة لطباعة جميع قيم المصفوفة كالتالى:

<!DOCTYPE html>

<html>

<body>

<script>

var i;

var mycars = new Array();

mycars[0] = “Saab”;

mycars[1] = “Volvo”;

mycars[2] = “BMW”;

for (i=0;i<mycars.length;i++)

{

document.write(mycars[i] + “<br>”);

}

</script>

</body>

</html>

حيث(myCars.length) تشير الى عدد عناصر المصفوفة ويكون الناتج بصفحة الويب كما يلى:

Saab
Volvo
BMW

الدرس السادس فى الجافا سكريبت


Objects

يعتبر جزء (objects) من اهم الاجزاء فى لغة الجافا سكريبت بل فى كل لغات البرمجة الاخرى كالجافا والسى شارب والسى بلس بلس وغيرها من لغات البرمجة حيث هى مدخل لعلم (oop) والتى هى اختصار لى(object oriented programming) فتقريبا يعتبر كل شىء فى لغة الجافا سكريبت درسناها او سندرسها كا(Strings, Functions, Arrays,…) كلها تعتبر(object) ويعرف ال (object) على انة داتا لها شيئين هما(properties , methods) حيث (properties) هى عبارة عن قيمة او قيم لل (object) اما ال (methods) فهى عبارة عن حدث يقوم بة ال (object) وللتوضيح اكثر فمثلا السيارة هى عبارة عن (object) لها (object) كاسم العربية وموديلها ووزنها ولونها مثلا ولها (methods) كحركة السيارة او سواقت السيارة او ايقافها والجدول التالى يوضح المثال:

Object

Properties

Methods

car

car.name =Fiat

car.model = 500

car.weight = 850kg

car.color = white

car.start()

car.drive()

car.brake()

فكل سيارة لها هذة ال(properties)لكنها تختلف من سيارة الى اخرى وايضا كل سيارة لها هذة ال(methods)ولكنها تختلف من وقت لاخر او مثلا من سرعة لاخرى.والان كيف يتم انشاء ال(Object)؟ اولا لابد من تعريف ال(object)فى متغير كما يلى:

var car=new Object();

ثم نضيف لة بعد ذلك (properties,methods) والان ننفذ مثال السيارة عملى بال(object):

<!DOCTYPE html>

<html>

<body>

<script>

var car=new Object();

car.name=”fiat”;

car.model=”500″;

car.weight =850kg;

car.color=”white”;

document.write(person.name + ” is ” + person.model +”is”.”);

</script>

</body>

</html>

مثال اخر:

<!DOCTYPE html>

<html>

<body>

<script>

var person=new Object();

person.firstname=”ali”;

person.lastname=”ahmed”;

person.age=40;

person.eyecolor=”blue”;

document.write(person.firstname + ” is ” + person.age + ” years old.”);

</script>

</body>

</html>

ويكون الناتج بصفحة الويب:

ali is 40 years old.

والمثال السابق يمكن كتابتة بطريقة اخرى كالتالى:

<!DOCTYPE html>

<html>

<body>

<script>

person={firstname:”ali”,lastname:”ahmed”,age:40,eyecolor:”blue”}

document.write(person.firstname + ” is ” + person.age + ” years old.”);

</script>

</body>

</html>

ملاحظة:

كما فى الامثلة السابقة فانة لكى تصل لاى(properties) خاصة بال(object) فانها تتبع القاعدة التالية:

objectName.propertyName

والوصول لاى (method)خاصة بال(object)تتبع القاعدة التالية:

objectName.methodName()

فمثلا اذا كان لدينا نص ونريد ان نعرف عدد حروفة فيكون كالتالى:

var message=”Hello World!”;
var x=message.length;

ويكون الناتج هو 12 حرف وذلك لان المسافة الموجودة بين كلمتى Hello,World تحسب بحرف.

واذا اردنا ان نحول نص من حروف صغيرة الى حروف كبيرة فيكون كالتالى:

var message=”Hello world!”;
var x=message.toUpperCase();

ويكون الناتج هو:

HELLO WORLD!

الدرس الخامس فى الجافا سكريبت


Loops

-تستخدم(loops) فى عمل تكرار على الكود عدد من المرات حيث توفر لك الوقت فى كتابة كود معين بدلا من تكرارة فى اكثر من سطر تستبدلة بسطر واحد عن طريق loops وايضا سرعة موقعك فكتابة اكواد كثيرة يؤدى الى بطىء الموقع ولها اكثر من طريقة فى كتابتها كالتالى:

الشكل العام

استخدامها

Loops

for (initial value; condition; increament or decreament statement)
{
code
}

تقوم بعمل تكرار على الكود عدد من المرات.

for

for (….. in ……)
{
code
}

تقوم بعمل تكرار على خصائص ال object والتى سندرسها فيما بعد وهذا التكرار قليل الاستخدام.

for/in

while (condition)
{
code
}

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

while

do
{
code
}
while (condition);

تقوم بعمل تكرار على الكود فى وجود شرط ايضا لكن فى هذة الحالة يتم التكرار اولا ثم بعد ذلك يختبر الشرط.

do/while

(1)for:

مثال:

<!DOCTYPE html>

<html>

<body>

<script>

var x=””;

for (var i=0;i<5;i++)

{

x=x + “The number is ” + i + “<br>”;

}

document.write(x);

</script>

</body>

</html>

وكما هو موضح فان جملة التكرار for تاخذ ثلاث جمل يتم الفصل بينهم بفصلة منقوطة والجملة الاولى يتم فيها تعريف متغير بقيمة بدائية (var i=0) والجملة الثانية يتم وضع شرط او قيد (i<5) والجملة الثالثة هى عبارة الزيادة او النقصان (i++) حيث فى كل مرة يزيد واحد اما اذا اردنا ان ننقص واحد فنستخدم جملة النقصان وهى (i–) ثم بعد ذلك نضع بين اقواس التكرار الجملة المراد تكرارها ومعها المتغير المعرف فى الجملة الاولى.

وتظهر بصفحة الويب كما يلى:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

ولكن ماذا اذا اردنا ان نكتب هذا الكود بدون استخدام جملة التكرار يكون كالتالى :

<!DOCTYPE html>

<html>

<body>

<script>

document.write(“The number is 0″+”<br>”);

document.write(“The number is 1″+”<br>”);

document.write(“The number is 2″+”<br>”);

document.write(“The number is 3″+”<br>”);

document.write(“The number is 4″+”<br>”);

</script>

</body>

</html>

والفرق بينهما كبير جدا لان الاول يوفر كتابة الكود خاصة فى حالة التكرارات الكبيرة فتكون الطريقة الثانية صعبة جدا وتاخذ وقت طويل وبطء فى صفحة الويب.

(2)for/in :

مثال:

<!DOCTYPE html>

<html>

<body>

<script>

var x;

var txt=””;

var person={fname:”John”,lname:”Doe”,age:25};

for (x in person)

{

txt=txt + person[x];

}

document.write(txt);

</script>

</body>

</html>

وسيتم شرح هذة الحالة بالتفصيل لكن بعد شرح درس ال object .

(3)while :

مثال:

<!DOCTYPE html>

<html>

<body>

<script>

var x=””,i=0;

while (i<5)

{

x=x + “The number is ” + i + “<br>”;

i++;

}

document.write(x);

</script>

</body>

</html>

وفى هذة الحالة من التكرار يتم وضع جملة القيمة الابتدائية قبل جملة التكرار ويوضع الشرط بين قوسى كلمة التكرار while وتوضع جملة الزيادة او النقصان مع الجملة المراد عمل تكرار عليها وهذا المثال يظهر فى صفحة الويب كالمثال السابق.

(4)do/while :

مثال:

<!DOCTYPE html>

<html>

<body>

<script>

var x=””,i=0;

do

{

x=x + “The number is ” + i + “<br>”;

i++;

}

while (i<5);

document.write(x);

</script>

</body>

</html>

وكما نرى فان الحالتين الاخرتين متشابهين مع الفرق بينهما ان التكرار بجملة while يقوم باختبار الشرط الاول فاذا كان الشرط صحيح تتم عملية التكرار اما فى حالة do-while يتم التكرار اولا ثم يختبر الشرط فاذا كان الشرط صحيح يرجع مرة اخرى ليكمل عملية التكرار.

Break and Continue

هذا الجزء هو مرتبط دائما بعملية التكرار حيث تستخدم (break) فى وقف الحلقة التكرارية ونهايتها عند وقت معين اما (continue) تستخدم فى حذف جزء من الحلقة التكرارية ثم تستكمل الحلقة التكرارية كالتالى:

(1)مثال على break:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to do a loop with a break.</p>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>

function myFunction()

{

var x=””,i=0;

for (i=0;i<10;i++)

{

if (i==3)

{

break;

}

x=x + “The number is ” + i + “<br>”;

}

document.getElementById(“demo”).innerHTML=x;

}

</script>

</body>

</html>

(2)مثال على continue:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to do a loop which will skip the step where i=3.</p>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>

function myFunction()

{

var x=””,i=0;

for (i=0;i<10;i++)

{

if (i==3)

{

continue;

}

x=x + “The number is ” + i + “<br>”;

}

document.getElementById(“demo”).innerHTML=x;

}

</script>

</body>

</html>

جرب بنفسك المثالين لتتعرف على الفرق بينهما.

الدرس الرابع فى الجافا سكريبت


Conditions

-وهى عبارة عن جمل الشرط داخل لغة الجافا سكريبت وجمل الشرط تستخدم لتنفيذ اجراء معين فى حالة تحقق شرط معين وجمل الشرط لها اربعة طرق لكل طريقة وظيفتها كالتالى:

الشكل العام

استخدامها

جملة الشرط

if (condition)

{

Code if condition is true

}

تستخدم لتنفيذ كود فى حالة كان الشرط صحيح فقط.

if

if (condition)

{

Code if condition is true

}

else

{

Code if condition is not true

}

تستخدم لتنفيذ كود فى حالة كان الشرط صحيح او تنفيذ كود اخر فى حالة كان الشرط خاطىء

if…else

if (condition1)

{

Code if condition1 is true

}

else if(condition2)

{

Code if condition2 is true

}

else

{

Code if condition1 and condition2 not true

}

تستخدم لعمل اكثر من شرط لوجود مجموعة عديدة من الاكواد

if…else if….else

switch (n)
{
case 1:
code1
break;
case 2:
code2
break;
default:
code3
}

ايضا تستخدم لعمل اكثر من شرط لوجود مجموعة عديدة من الاكواد

switch

امثلة توضح الحالات السابقة

(1)if :

<!DOCTYPE html>

<html>

<body>

<script>
var d = new Date()                //one
var time = d.getHours()           //two

if (time < 10)
{
document.write("Good morning!")
}
</script>

</body>

</html>

حيث (one,two) عبارة عن object تم انشائة لمعرفة التوقيت بالساعة من جهاز الكمبيوتر وسوف يتم شرح الobject فى الدروس القادمة ففى حالة كانت الساعة اقل من عشرة فانة يطبع لك رسالة(Good morning!).

(2)if…else :

<!DOCTYPE html>

<html>

<body>

<script>
var d = new Date()
var time = d.getHours()

if (time < 10)
{
document.write("Good morning!")
}
else
{
document.write("Good evening!")
}
</script>

</body>

</html>

فى هذة الحالة فانة اذا كانت الساعة اقل من عشرة فانة يطبع رسالة (!Good morning) وما غير ذلك اى اكبر من الساعة عشرة فانة يطبع رسالة (Good evening!).

(3)if…else if….else:

<!DOCTYPE html>

<html>

<body>

<script>
var d = new Date()
var time = d.getHours()

if (time < 5)
{
document.write("Good morning!")
}
else if(time>8)
{
document.write("Good evening!")
}
else
{
document.write("Good day!")
}

</script>

</body>

</html>

فى هذة الحالة فانة اذا كانت الساعة اقل من خمسة فانة يطبع رسالة (!Good morning) واذا كانت اكبرمن ثمانية فانة يطبع رسالة (Good evening!) وما غير ذلك فانة يطبع رسالة (Good day!).

ولاحظ انة يمكن تكرار else if اكثر من مرة.

(4)switch:

<!DOCTYPE html>

<html>

<body>

<script>
var d = new Date()
var time = d.getHours()

switch (time)
{
case 1:
  document.write("time now is one")
  break
case 2:
  document.write("time now is two")
  break
case 3:
  document.write("time now is three")
  break
default:
  document.write("we only work from one to three")
}

</script>

</body>

</html>

هذة الحالة هى شبية بالحالة السابقة لذلك يمكن استبدال الحالة الثالثة بالرابعة او العكس والمثال هنا هو عبارة عن شرط يتعرف على الساعة من الجهاز ويخبرك بقيمة الساعة الان فاذا كانت الساعة واحدة فيطبع لك ان الساعة الان واحدة ثم اذا لم تكن الساعة واحدة فانة ينتقل الى الحالة التى تليها وذلك عن طريق كلمة (break) وبالمثل الى ان يصل الى الساعة ثلاثة ثم بعد ذلك فيما عدا الساعة واحدة واتنين وثلاثة فيطبع لك رسالة بانة انتهى العمل وذلك عن طريق كلمة (default).

الدرس الثالث فى الجافا سكريبت


Events and Functions

1-events:

وهى عبارة عن احداث موجودة فى اكواد ال(HTML)تعمل كحلقة وصل بين لغتى (HTML,javascript) لتنفيذ دالة او مهمة معينة واهم الاحداث التى نستخدمها هى:

الشرح

events

هذا الحدث يستخدم لتنفيذ مهمة معينة عند الضغط على زر مثلا.

onclick

هذا الحدث يستخدم لتنفيذ مهمة معينة عند تحميل صفحة الويب.

onload

هذا الحدث يستخدم لتنفيذ مهمة معينة عند تغير الحالة التى يكون عليها الكود.

onchange

هذا الحدث يستخدم لتنفيذ مهمة معينة عند الوقوف بالماوس على جزء فى الموقع.

onmouseover

هذا الحدث يستخدم لتنفيذ مهمة معينة عند ابعاد الماوس على جزء فى الموقع.

onmouseout

والمثال التالى يشرح اهم حدث نستخدمة بكثرة وهو حدث (onload):

<!DOCTYPE html>

<html>

<body>

<h1 onclick=”this.innerHTML=’wellcome'”>click me</h1>

</body>

</html>

– جرب بنفسك المثال السابق حيث عند الضغط على كلمة (click me) يتغير النص ويصبح (wellcome).

– واستخدمنا(this.innerHTML) فى المثال السابق حيث كلمة (this) تشير الى تاج<h1> اما كلمة (innerHTML) تشير الى النص المكتوب داخل تاج <h1> اى تشير الى كلمة( click me).

2-function:

– وهى عبارة عن كود او مجموعة من الاكواد يتم وضعها داخل دالة بشكل معين سنتعرف عليه للقيام بمهمة معينة عند استدعائها عن طريق الاحداث(events) والشكل العام لها كما يلى:

function functionname()
{
code
}

حيث (functioname) هو اسم الدالة التى تسميها انت كما ان (code) هو الكود او مجموعة الاكواد التى تكتبها وتوضع بين القوسين { } والمثال التالى يوضح استخدامها:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert(“Hello World!”);
}
</script>
</head>

<body>
<button onclick=”myFunction()”>Try it</button>
</body>
</html>

جرب المثال بنفسك.

-Calling a Function with parameters:

ويمكن عند عمل الدالة ان نمرر لها قيم حيث يطلق على هذة القيم البارمترات وتستخدم داخل الدالة وتكون كالتالى:

function myFunction(var1,var2)
{
code
}

ويمكن استخدم بارمتر واحد او اكثر من بارمتر لكن المهم ان تضع فاصلة فى حالة استخدمت اكثر من بارمتر.

والمثال التالى يوضح استخدامها:

<!DOCTYPE html>

<html>

<body>

<script>

function myFunction(name,job)

{

alert(“Welcome ” + name + “, the ” + job);

}

</script>

<button onclick=”myFunction(‘ali’,’teacher’)”>click me</button>

</body>

</html>

حيث لهذة الدالة بارمترين هما الاسم والوظيفة ويتم تمرير قيم لهما من الدالة هكذا (‘myFunction(‘ali’,’teacher ثم تخرج برسالة تحذيرية بها الاسم والوظيفة التى ادخلتها للدالة.

-Functions With a Return Value :

يمكن تخزين داتا داخل الدالة واستخدامها عن طريق كلمة(return)كالتالى:

function myFunction()
{
var x=5;
return x;
}

– مثال:

<!DOCTYPE html>

<html>

<body>

<script>

function myFunction(a,b)

{

return alert(a*b);

}

</script>

<button onclick=”myFunction(4,6)”>click me</button>

</body>

</html>

وهى عبارة عن دالة تاخذ رقمين وترجع بحاصل ضربهما.

ملاحظة هامة:المتغير الموجود داخل الدالة لا يمكن استخدامة الا على مستوى هذة الدالة ويعرف بالمتغير المحلى (local) اما المتغير الموجود خارج الدالة فيمكن ان تستخدمة اى دالة قمت بانشائها ويسمى بالمتغير العام (global).

الدرس الثانى فى الجافا سكريبت


Operators

-والمقصود بال(operators)هى العمليات الحسابية فى لغة الجافا سكريبت كالجمع والطرح والضرب والقسمة وكلها موضحة بالجدول التالى:

Let y=5

Operator

الشرح

مثال

Result of x

+

عملية الجمع

x=y+2

7

عملية الطرح

x=y-2

3

*

عملية الطرح

x=y*2

10

/

عملية القسمة

x=y/2

2.5

%

Modulus (الباقى)

x=y%2

1

++

Increment(الزيادة)

x=++y

6

x=y++

5

Decrement(النقصان)

x=- -y

4

x=y- –

5

-مثال على العمليات الحسابية:

<!DOCTYPE html>

<html>

<body>

<script>

y=5;

z=2;

x=y+z;

document.write(x);

</script>

</body>

</html>

وتكون النتيجة بصفحة الويب هى :

7

– مثال اخر على استخدام عملية الجمع مع النصوص:

<!DOCTYPE html>

<html>

<body>

<script>

txt1=”What a very”;

txt2=”nice day”;

txt3=txt1+txt2;

document.write(txt3);

</script>

</body>

</html>

وتكون النتيجة بصفحة الويب كالتالى :

What a very nice day

– ملاحظة مهمة جدا :

علامتى التنصيص(” “) تستخدم مع النصوص فقط فاذا وضعت مع الارقام فانها تتعامل معها وكانها نصوص والمثال التالى يوضح الفرق:

<!DOCTYPE html>

<html>

<body>

<script>

var x=5+5;

var y=”5″+5;

var z=”Hello”+5;

document.write(x + “<br>” + y + “<br>” + z);

</script>

</body>

</html>

وتكون النتيجة بصفحة الويب كالتالى :

10
55
Hello5

Comparison and Logical Operators

– وهى عبارة عن العوامل او العلامات المستخدمة فى عمليات المقارنة فى الجمل المنطقية او جمل الشرط وهى:

Comparison

Operator

الشرح

مثال

==

تستخدم للمقارنة بالتساوى

x==8

x==5

!=

تستخدم للمقارنة بالنفى

x!=8

>

اكبر من

x>8

<

اقل من

x<8

>=

اكبر من او يساوى

x>=8

<=

اقل من او يساوى

x<=8

Logical Operators

Operator

الشرح

مثال

&&

and

(x < 10 && y > 1)

||

or

(x==5 || y==5)

!

not

!(x==y)

وسيتم استخدامها فى الدرس بعد القادم الخاص بجمل الشرط.

الدرس الاول فى الجافا سكريبت


Statements

-جمل الجافا سكريبت او اكواد الجافا سكريبت لابد ان تنتهى بفصلة منقوطة semicolon (;) كما ان لغة الجافا سكريبت هى حساسة لحالة الحروف بالنقيض مع لغة HTML فيجب عليك ان تحفظ اكواد الجافا سكريبت كما هى اى ان الحرف الكابتل يكتب كابتل والحرف الاسمول يكتب اسمول وغير ذلك لن يتم تنفيذ الكود واول كود سنتعلمة بلغة الجافا سكريبت هو كود طباعة النصوص او الرسائل كالتالى:

document.write (“Hello World!”);

وتظهر بصفحة الويب كالتالى :

Hello World!

– ولعمل رسالة تحذيرية تخبر مستخدم الموقع باى شىء نستخدم الكود التالى :

window.alert(“sometext“);

حيث تكتب نص الرسالة بين علامتى التنصيص ويمكن كتابة هذا الكود اختصارهكذا:

alert(“sometext“);

وسوف نوضح هذة الاكواد اكثر فى الدروس القادمة .

Comments

والتعليقات كما تم شرحها بلغة HTML تستخدم لتعريف الفائدة من الكود ولا تظهر بصفحة الويب والتعليقات فى لغة الجافات سكريبت لها طريقتين فى كتابتها كالتالى :

* الطريقة الاولى :وتستخدم مع السطر الواحد

وتتم باستخدام backslash (//) فى بداية السطركالتالى:

//document.write (“Hello World!”);

* الطريقة الثانية :وتستخدم مع العديد من الاسطر

وتتم باستخدام( /* */) فى بداية اول سطر ونهاية اخر سطر كالتالى :

/*

document.write (“Hello ahmed”);

document.write (“Hello mohammed”);

document.write (“Hello ali!”);

*/

Variables

– المتغيرات (variables) هى عبارة عن وعاء لتخزين الداتا سواء كانت نصوص(string) او ارقام (numbers) ويتم تعريف اى متغير عن طريق استخدام كلمة var كما يلى :

<!DOCTYPE html>

<html>

<body>

<script>

var x=5;

var name=”mohammed”;

document.write(x);

document.write(name);

</script>

</body>

</html>

حيث (x,name )اى اسماء تختارها انت وفى الطرف الاخر تضع الداتا التى تريد تخزينها ولكن لاحظ انة فى حالة النصوص لا بد ان تستخدم double quotes (” “) ولا بد ان تراعى عند استخدم اسم المتغير ان يبدا بحرف وليس رقم كما ان اسماء المتغيرات حساسة لحالة الاحرف فهناك اختلاف بين استخدام حرف (x) سمول واستخدامة كابتل(X) .

-ملاحظات:

(1)يمكن تعريف اكثر من متغير فى سطر واحد كالتالى:

var name=”Doe”, age=30, job=”carpenter”;

(2)يمكن تعريف المتغير بدون تخزين داتا داخلة ثم تخزن الداتا بعد ذلك فى اى وقت تريدة كالتالى:

var name;

وفى هذة الحالة فان المتغير(name)لا يحمل قيمة داخلة.

(3)يوجد نوع من المتغيرات ويسمى Booleans وياخذ قيمتين فقط اما true او false ويستخدم هذا المتغير فى حالة الشرط والتى سندرسها بعد ذلك :

var x=true;
var y=false;

(4)يوجد نوعين اخريين من المتغيرات وهما arrays,objects ولكن سيتم شرحهما فى دروس منفصلة لاهميتهما فى لغة الجافا سكريبت او فى لغات البرمجة بصفة عامة.

مقدمة عن الجافا سكريبت


الجافا سكربيت هي إحدي لغات البرمجة والتي أخرجتها شركة (Netscape) لتضفي الحيوية إلي صفحات الويب ويتم وضع اكوادها داخل لغة(HTML) بطريقتين اما بين تاج           <head></head> واما بين تاج <body></body> والتاج المستخدم لتعريف الصفحة بلغة الجافا سكريبت هو <script></script> والمثال التالى يشرح كيفية كتابة كود الجافا سكريبت بالطريقتين:

– اولا بين تاج <body></body>:

<!DOCTYPE html>

<html>

<body>

<script>

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

</script>

</body>

</html>

– ثانيا بين تاج <head></head>:

<!DOCTYPE html>

<html>

<head>

<script>

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

</script>

</head>

<body>

</body>

</html>

– وللغة javascript العديد من الاصدارات واليك اصدارتها وتاريخ اصدارها:

تاريخ الاصدار

الاصدار

1995

JavaScript 1.0

1996

JavaScript 1.0 (JScript 1.0)

1996

JavaScript 1.1

1997

JavaScript 1.2

1997

JavaScript 1.2 (JScript 3.0)

1998

JavaScript 1.3

1999

JavaScript 1.3 (JScript 5.0)

الادوات اللازمة لتعليم javascript :

1-محرر نصوص كال notepad او word او اى محرر نصوص اخر او باستخدام برنامج الدريم ويفر.

2-متصفح للانترنت كالفيرفكس او غيرة لكى ترى نتيجة الاكواد التى سنتعلمها.

3-الالمام بلغتى HTML,CSS .

%d bloggers like this: