لديك حساب بالفعل؟ دخول
دخول  سجل الأن 
مدرسة تطوير المواقع
جدول المحتويات
مدخل للجافا سكريبت
في هذا الدرس يتم توضيح ماهية الجافا سكريبت و لما نحتاجها و هو بمثابة تمهيد و مقدمة نظرية لدراستها
[تحسين] ماذا نحتاج لنبدأ
بالنسبة لما تحتاجه من برامج فأنت لا تحتاج لأكثر من متصفح الإنترنت العادي و أي محرر نصوص مثل notepad أو notepad++ أو أي برنامج متخصص في إنشاء صفحات الويب مثل Dreamweaver أو غيره .
أما بالنسبة لما تحتاج ان تعلمه قبل ان تبدأ في تعلم الجافا سكريبت تحتاج أن يكون لديك فكرة معقولة عن الـ html و الـ css ,
و إن لم تكن لديك معرفة بهم فقم بتعلمهم أولا ثم عد للجافا سكريبت و يوجد بموقعنا شرح لهم .
ليس من الضروري أن تكون قد تعاملت مع أي لغات البرمجه من قبل فسيتم التعامل في الدروس على أساس أن القارئ لم يسبق له التعامل مع أي لغات البرمجه .
[تحسين] لماذا نحتاج الجافا سكريبت؟
يفترض أنك لديك فكرة عن الـ html و أنك قمت بعمل بعض صفحات الويب بإستخدامها و لدينا هنا مثال بسيط على صفحة ويب
مبنية بإستخدام لغة html و css فقط قم بإستعراضه و تجربته بنفسك .
مثال 1
<h1>أهلا بك</h1>
<p> 
    هذه الصفحة تم إنشائها بإستخدام (هيتميل)و (سي إس إس فقط) وكما ترى  لا يتغير المحتوى الذي تعرضه إلا يتعديل الكود الأصلي لها 
</p>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

كما ترى الصفحة لا يمكنها التفاعل مع المستخدم فمثلا لا يمكن أن يختفي نص معين عندما يذهب إليه مؤشر الفأره ولا يمكن أن تظهر قائمة ما عندما تضغط على كلمة و لا يمكن أن يحرك المستخدم نص مثلا من مكانه أو يحدث في الصفحة أي نوع من الحركة و التفاعل .فالصفحات html وحدها تشبه كتاب يعرض معلومات منسقة بشكل معين ولا يتغير هذا التنسيق أو النص الموجود في كل صفحة .

ما تفعله لغة الجافا سكريبت هي أنها يمكن من خلالها إنشاء صفحات ويب تتفاعل مباشرة مع المستخدم ,و من أشهر تطبيقاتها القوائم التي تجدها في معظم مواقع الإنترنت و المثال التالي مثال على صفحة تفاعلية عبارة عن آلة حاسبة بسيطه في صفحة إنترنت يقوم المستخدم بإدخال ما يريد من حسابات ثم يرجع له الناتج في المكان المخصص له و لا تهتم بما يحتويه الكود فكل ما به سيتم شرحه فيما بعد فقط اضغط "حاول بنفسك " لترى كيف تظهر نتيجة الكود,لأن الآن أريدك فقط أن تحس بما هي الجافا سكريبت,مع العلم بأن الجافا سكريبت تفعل أكثر من ذلك بكثير
مثال 2 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <style>
        	table{
        	position:fixed;
        	left:10px;
        	top:100px;	
        	border: 2px solid black;
        	font-size: 200%;
        	border-collapse: collapse;
        	}
        	td{border: 1px solid black;
        	width: 80px;
        	height: 50px;
        	background-color: gray;
        	text-indent: 20px;
        
        	
        	}
        	a,a:link,a:visited{color: black; text-decoration: none; }
        	#result{
        		background-color: #dddddd;
        		height: 60px;
        	}
        	
        </style>
    </head>
    <body>
        
        <table >
        	<tr>
        		<td colspan="4" id="result"></td>
        	</tr>
        	<tr>
        		<td><a href="#">1</a></td>
        		<td><a href="#">2</a></td>
        		<td><a href="#">3</a></td>
        		<td><a href="#">+</a></td>
        		
        	</tr>
        		<tr>
        		<td><a href="#">4</a></td>
        		<td><a href="#">5</a></td>
        		<td><a href="#">6</a></td>
        		<td><a href="#">-</a></td>
        		
        	</tr>
        		<tr>
        		<td><a href="#">7</a></td>
        		<td><a href="#">8</a></td>
        		<td><a href="#">9</a></td>
        		<td><a href="#">*</a></td>
        		
        	</tr>
        	
        		<tr>
        		<td ><a href="#">0</a></td>
        		<td><a href="#">clear</a></td>
        		<td><a href="#">=</a></td>
        		<td><a href="#">/</a></td>
        		
        	</tr>
        	
        </table>
        
        <script type="text/javascript" language="JavaScript">
        var ancors=document.getElementsByTagName("a");
        
        for (var i=0; i < ancors.length; i++) {
        	var text=ancors[i].innerHTML;
        	console.log(text);
        	switch(text)
        	{
        		
        		case "=":
        		 ancors[i].onclick=evalu;
        		break;
        		case "clear":
        		 ancors[i].onclick=clear;
        		break;
        		default:
        		 ancors[i].onclick=chain(text);
        		 break;
        	}
        }
        
        var field = document.getElementById("result");
 
         
         function chain (dig) {
        		return function() {addDigt(dig);}
			    return false;
			}
        		
         function addDigt (dig) {
         
        field.innerHTML +=dig;
         	
         }
         
         function clear () {
           field.innerHTML="";
         return false;
          
        };
        function evalu () {
        	field.innerHTML=eval(field.innerHTML);
            return false;
        }		
        </script>
        	
    </body>
</html>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة



و المثال الذي أمامك هو مجرد مثال على ما يمكن أن تفعله الجافا سكريبت لكنها تفعل أكثر من ذلك بكثير فمما يمكن أن تسخدم فيه
الجافا سكريبت على سبيل المثال و ليس الحصر:
  • إضافة مؤثرات على الصور .
  • عمل ألعاب ديناميكية داخل صفحات الويب أي أنه لا تحتاج لإعادة تحميل الصفحه لكي يحدث تغير بها.
  • بانرات الإعلانات و من أمثلتها الإعلانات التي تحتوى على نصوص تظهر و تختفي بانتظام أو غيرها .
  • مراجعة المعلومات التي يدخلها المستخدم في الحقول "forms" أي ما يسمى بالـForm Validation .

[تحسين] ما هي الجافا سكريبت؟
الجافا سكريبت (javascript) بالإنجلزية هي:
  • لغة سكريبت (script) : و معنى أنها لغة سكريبت أنها تحتاج لبرنامج لتعمل من خلاله (المتصفح) و تطبيقتها لا يمكنها أن تعمل بمفردها بدونه أي أنك مثلا لا تسطتيع عمل برنامج بالجافا سكريبت يعمل على الجهاز مباشرة بدون المتصفح,فالكود الذي تكتبه بها لايتم عمل عملية تجميع و تحويل "compiling"له ,لكن يتم تفسيره مباشرة من خلال محرك الجافا السكريبت الموجود في جهاز الشخص الذي يتصفح موقعك .
  • الجافا سكريبت "object-oriented language" : يصعب ترجمة ماذا يعنى ذلك بالضبط إلى العربية لكن سأشرح مضمون العبارة ,لغات البرمجة أو الإسكريبتنج الأوبجكت أورينتد هي لغات تتكون من شيء يسمى بالـobject
    • و الأوبجكت هو عبارة عن مجموعة من الدوال و المتغيرات المتصلة ببعضها ,ربما يبدو المفهوم غامض حاليا لكنه سيتضح بعد ذلك عندما تلمس ما هي الدالة و ما هو المتغير و ترى أمثلة على الأوبجكت .
الخلاصة أن الجافا سكريبت هي لغة سكريبت script تدعم نظام الأوبجكتس objects سهلة الإستخدام و مصممة لعمل صفحات ويب ديناميكية .
العودة الى القائمة