بدأت حياة جافا سكربت كـ LifeScript واول ظهور لها كان في Netscape2.0 في عام 1995 ثم تغير اسمها الى JavaScript وهي لغة برمجة خفيفة وسهلة التعلم وتعطي الكثير من الحيوية لصفحات الانترنت وهي مضمنة في متصفحات الانترنت .
تعد من إحدى اللغات الرئيسية لبرمجة صفحات الانترنت وتطويرها لأنها لغة برمجة نصية وليست مترجمة حيث ان اللغات المترجمة تعتبر سريعة جدا ولكنها محدودة بنظام تشغيل معين او برنامج محدد .. أما لغات البرمجة النصية فلا يوجد مترجم ويقوم محرك النص البرمجي ScriptingEngine بتفسير هذه الشيفرة اثناء تنفيذها خطوة بخطوة مما يجعل الشيفرة أبطأ وأهم ما يميز لغات البرمجة النصية انها تعمل على مختلف انظمة التشغيل .. وكذلك تعتبر لغة جافا سكربت لغة برمجة من جانب المستخدم اي انها تعمل على جهاز المستخدم الذي يستعرض صفحة الانترنت من خلال متصفح انترنت يدعم لغة الجافا سكربت . ومعنى لغة برمجة من جانب المستخدم اي انها لا ترسل طلبات الى السيرفر ليعالجها ويعيد لنا النتيجة انما تعالج الاوامر البرمجية في متصفح المستخدم مما يوفر الكثير من الجهد والوقت , ويوجد لغة اخرى شبيهة بالجافا سكريبت وهي فيجول بايزك سكربت VBScript إلا ان جافا سكربت هي الاقوى والاكثر استخداما والاكثر دعما من قبل متصفحات الانترنت …
التوافق بين Javascript و Html
نحن نعلم أن مستندات HTML هي عبارة عن مستندات نصية يمكن عرضها بواسطة اي جهاز على اي نظام تشغيل فإن لغة برمجية نصية أخرى كـ JavaScript تناسب تماما مستندات HTML وتعمل معها بتناسق كبير …
ببساطة جافا سكربت هي كود برمجي يتم ادراجه داخل صفحة HTML ليتم تنفيذه سطرا بسطر من خلال متصفح الانترنت .
لغة جافا وجافا النصية :
إن JavaScript ليست مرتبطة بلغة البرمجة Java وليس هنالك أي علاقة بين اللغتين سوى الاسم .. وهذا يختلف تماما عن فيجول بيزك النصية VBScript ولغة البرمجة فيجول بيزك Visual Basic حيث ان VBScript تعتبر فرعا من فيجول بيزك .. والخبر السعيد هنا .. انك اذا كنت مبرمج جافا فإن لغة جافا سكربت ستكون مألوفة جدا لك ودراستها اسهل …
اهم ما تقوم به جافا سكربت :
- التحكم بعناصر HTML حيث انها تستطيع قراءة محتويات العناصر وتغييرها .
- التحكم بالستايل CSS وطريقة العرض حيث انها تستطيع قراءة وتغيير الستايل الخاص بالعناصر وتحريكها .
- باستخدام جافا سكربت نستطيع ان نقوم بعملية التحقق من مدخلات المستخدم في النماذج .
- جافا سكربت تستجيب للاحداث حيث انه يمكن تنفيذ كود برمجي عندما يحصل شيئ ما , مثلا ان يضغط المستخدم على عنصر ما او ان يمرر الفأرة فوقه .
ماذا احتاج لاكتب برنامج بلغة الجافا سكربت ؟
-
معرفة بأساسيات كل من HTML وCSS :
يتم تضمين جافا سكربت داخل كود HTML وجوهر عملها هو التحكم والتأثير بعناصر HTML وطريقة عرضها CSS ,لذا لابد من معرفة اساسيات هذه اللغات اولا قبل البدأ بتعلم الجافا سكربت .
-
محرر نصوص :
يمكن كتابة اكواد جافا سكربت في اي محرر نصوص تختاره ويعتبر برنامج المفكرة notepad جيدا لكتابة اكواد الجافا سكربت .
-
متصفح انترنت لمعاينة وتنفيذ البرنامج :
يوجد لدينا خمس متصفحات شهيرة وجميعها تدعم جافا سكربت دعما كاملا ويجب دائما الحصول على آخر نسخة من هذه المتصفحات وجميعها تمتلك مصحح خاص لاخطاء الجافا سكربت .
هذه المتصفحات هي : انترنت اكسبلورر – جوجل كروم – فاير فوكس – سفاري – اوبرا .
-
آلية العمل :
لابد لنا بداية من فهم آلية عمل لغات البرمجة معا في صفحة الانترنت , فكما نعلم انه يوجد اربع لغات برمجة تعمل معا لصنع صفحة الانترنت لكل لغة وظيفتها الخاصة وهذه اللغات هي : HTML و CSS و JAVASCRIPT و PHP .
سنبين في المثال التالي الدور الذي تلعبه كل من لغات البرمجة السابقة لانجاز عمل ما على صفحة الانترنت .
سنقوم بعمل فورم( نموذج ) بحث مؤلف من مربع ادخال وزر ارسال فقط , مهمة هذا الفورم هي اخذ البيانات من المستخدم والبيانات هنا كلمة البحث ثم التحقق من صحة المدخلات ومن ثم البحث في قاعدة البيانات عن تطابق واسترجاع نتائج البحث .
اولا HTML :
ان الوظيفة الاساسية لـ HTML هي الاهتمام بالبنية والمحتوى على النحو التالي :
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Search Database Example</title> </head> <body> <div> <span>Enter Word To Search :</span> <form method="get" action="#"> <input type="text" name="q" value="Search" /> <input type="submit" name="search" value="Search" /> </form> </div> </body> </html>
سيكون الناتج :
ثانيا CSS :
الوظيفة الاساسية لـ CSS هي الاهتمام بطريقة العرض (الستايل) على النحو التالي :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Search Database Example</title>
<style type="text/css">
body {font-size: medium;}
#search {
margin: 60px auto;padding: 15px;width: 400px;
text-align: center;color: green;background: #eee;
border-radius:15px;box-shadow: 0px 0px 15px #555; /* css 3 properties */
}
#searchform {margin: 5px;}
#searchfield {
border: none;padding: 5px 10px;margin: 5px;background: #fff;color: green;
border-radius: 10px;box-shadow: inset 0px 0px 15px #555;
}
#searchbutton {
border: 1px solid green;padding: 5px 10px;margin: 5px;
background: #ccc;color: green;
border-radius:10px;box-shadow: 0px 0px 15px #555; /* css 3 properties */
}
</style>
</head>
<body>
<div id="search">
<span id="err">Enter Word To Search : </span>
<form name="myform" method="get" action="#" id="searchform">
<input type="text" name="q" value="Search" id="searchfield" />
<input type="submit" name="search" value="Search" id="searchbutton" />
</form>
</div>
</body>
</html>
بعد اضافة كود CSS سيكون الناتج :
في حال ظهور النتيجة التالية لديك :
ان اللذين يكتبون اكواد HTML و CSS فقط لبناء مواقع الانترنت هم مصممين اكثر من ان يكونو مبرمجين ومواقعهم تسمى بالمواقع الستاتيكية ولا تتفاعل مع المستخدم .
ثالثا JAVASCRIPT :
لقد تقصدت في هذا المثال في بداية الكتاب ان انعش ذاكرتك في كلٍ من HTML و CSS واحفزك للدخول الى البرمجة بلغة الجافا سكربت , سنرى ماذا تستطيع جافا سكربت ان تفعل للفورم السابق , لن اقوم بشرح الكود الان ولكن بتجربة الكود في متصفحك ستحصل على فكرة اولية عن جافا سكربت وكيفية تحققها من المدخلات ضمن شروط معينة :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Search Database Example</title>
<style type="text/css">
body {font-size: medium;}
#search {
margin: 60px auto;padding: 15px;width: 400px;
text-align: center;color: green;background: #eee;
border-radius:15px;box-shadow: 0px 0px 15px #555; /* css 3 properties */
}
#searchform {margin: 5px;}
#searchfield {
border: none;padding: 5px 10px;margin: 5px;background: #fff;color: green;
border-radius: 10px;box-shadow: inset 0px 0px 15px #555;
}
#searchbutton {
border: 1px solid green;padding: 5px 10px;margin: 5px;
background: #ccc;color: green;
border-radius:10px;box-shadow: 0px 0px 15px #555; /* css 3 properties */
}
</style>
</head>
<body>
<div id="search">
<span id="err">Enter Word To Search : </span>
<form name="myform" method="get" action="#" id="searchform">
<input type="text" name="q" value="Search" id="searchfield" />
<input type="submit" name="search" value="Search" id="searchbutton" />
</form>
</div>
</body>
</html>
كما نلاحظ في كود جافا سكربت السابق انه يحتوي على تابعين التابع الاول مهمته اخفاء الكلمة search من مربع الادخال عند الضغط بداخله للكتابة واذا كان مربع الادخال فارغا وتم الضغط خارجه فانه يعيد الكلمة search كقيمة افتراضية لمربع الادخال .
اما التابع الثاني فيقوم بفحص القيمة المدخلة في مربع الادخال ويجب ان تكون حصرا اكبر من حرفين واصغر من 20 حرف والا فانه لن يرسل بيانات النموذج مطلقا , وعملية التحقق هذه تتم في متصفح المستخدم اي انه لا يتم ارسال واسترجاع طلبات من والى السيرفر وهذا اهم مايميز جافا سكربت .
جرب ان تدخل حرفين فقط في مربع الادخال ستحصل على النتيجة التالية :
رابعا PHP :
على عكس جافا سكربت تعتبر PHP لغة برمجة من جانب السيرفر اي ان الكود البرمجي يتم تفسيره على السيرفر , بينما يتم تفسير الكود البرمجي للجافا سكربت في متصفح المستخدم لذا تعتبر جافا سكربت لغة برمجة من جانب المستخدم .
اذا وبعد ان يتم التحقق من المدخلات عن طريق الجافا سكربت في الكود السابق يتم ارسالها الى السيرفر ليبدأ عمل PHP حيث انها ستقوم بالاتصال بالسيرفر والبحث في قاعدة البيانات عن تطابق مع مدخلات المستخدم وتعيد لنا النتيجة :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Search Database Example</title>
<style type="text/css">
body {font-size: medium;}
#search {
margin: 60px auto;padding: 15px;width: 400px;
text-align: center;color: green;background: #eee;
border-radius:15px;box-shadow: 0px 0px 15px #555; /* css 3 properties */
}
#searchform {margin: 5px;}
#searchfield {
border: none;padding: 5px 10px;margin: 5px;background: #fff;color: green;
border-radius: 10px;box-shadow: inset 0px 0px 15px #555; /* css 3 properties */
}
#searchbutton {
border: 1px solid green;padding: 5px 10px;margin: 5px;background: #ccc;color: green;
border-radius:10px;box-shadow: 0px 0px 15px #555; /* css 3 properties */
}
</style>
<script type="text/javascript">
function clearText(field){
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
function check(){
var err = document.getElementById('err');
var x = document.forms["myform"]["q"].value;
if (x.length <= 2 || x.length > 20){
err.innerHTML = "Search field can't be less than 3 chars and not more than 20 chars";
document.forms["myform"]["q"].style.border='1px solid #f00';
err.style.color = '#f00';
err.style.fontSize = 'small';
return false;
}
}
</script>
</head>
<body>
<div id="search">
<span id="err">Enter Word To Search :</span>
<form name="myform" method="get" action="search.php" id="searchform" onsubmit="return check();">
<input type="text" name="q" value="Search" id="searchfield" onfocus="clearText(this);" onblur="clearText(this);" />
<input type="submit" name="search" value="Search" id="searchbutton" />
</form>
<?php
$q = $_GET['q'];
if($q==""){} else {
$con = mysql_connect('localhost', '', '');
if (!$con){
die('no connection: ' . mysql_error());
}
mysql_select_db("databaseName", $con);
$sql = "SELECT * FROM tableName WHERE someField='$q'";
$results = mysql_query($sql);
$n = mysql_num_rows($results);
echo "<div>We have " . $n . " Result(s).</div>";
while($row = mysql_fetch_array($results)){
echo ""; // هنا يتم استرجاع النتائج
}
mysql_close($con);
}
?>
</div>
</body>
</html>
لقد قمت بتضمين كود PHP فقط لتوضيح آلية عمل لغات البرمجة معا اي ان هذا الكود لن يعمل لانه يتوجب علينا اولا ان نحفظ الملف بالامتداد php ومن ثم عمل اتصال اي معرفة اسم المستخدم وكلمة المرور على السيرفر وانشاء قاعدة بيانات وجداول وبما ان كتابنا هو عن جافا سكربت فلن اتطرق الى تفاصيل الكود السابق , لكن ان كان لديك سيرفر محلي او مساحة على شبكة الانترنت قم باستبدال القيم في الكود بالمعطيات على سيرفرك وسيعمل الكود بشكل جيد .
