ﻣﺎھﻲ اﻟﺟﺎﻓﺎ ﺳﻛرﯾﺑت (JavaScript) ؟
هى ﻟﻐﺔ ﻣن ﻟﻐﺎت اﻟﺑرﻣﺟﺔ ﻣﮭﺎﻣﮭﺎ اﻷﺳﺎﺳﯾﮫ ﺑث اﻟﺣﯾﺎة ﻓﻲ ﺻﻔﺣﺎت اﻟوﯾب اﻟﻣﻛﺗوﺑﺔﺑﻠﻐﺔ الHTML وﺗﻌطﯾك اﻣﻛﺎﻧﯾﺔ اﻟﺗﺣﻛم ﺑﻛل ﺟزء ﻓﻲ ﺻﻔﺣﺔ اﻟوب، ﻣن الforms اﻟﻰ اﻟوﺻﻼت ﺑل وﺣﺗﻰ ﺑﻌضاﻟوظﺎﺋف اﻟﺧﺎرﺟﯾﮫ.وﺻﻣﻣت ﻣن ﻗﺑلNetscape ﻹﺿﺎﻓﺔ ﺑﻌض اﻟﺣﯾوﯾﺔ اﻟﻰ ﺻﻔﺣﺎت اﻟوﯾب، وقد صممت فى الاصلﻣن ﻗﺑل ﺷرﻛﺔ Sun وھﻲ
اﻟﻣﺎﻟك اﻷﺳﺎﺳﻲ ﻟﻠﻐﺔ.وهى ﺗﺧﻠﺗف ﻋن أﻏﻠب ﻟﻐﺎت اﻟﺑرﻣﺟﺔ اﻷﺧرى ﻓﻲ ﻛوﻧﮭﺎ ﺳﮭﻠﺔ
اﻟﺗﺣﻛم واﻟﺗﺑوﯾب، ﺣﺗﻰ ﻟﻸﺷﺧﺎص اﻟذﯾن ﻟمﯾﻛﺗﺑوا ﺑﺄي ﻟﻐﺔ ﺑرﻣﺟﺔ أﺧرى ﻓﻲ ﺣﯾﺎﺗﮭم
ﻛﻠﮭﺎ.
- ﻣﺎھو اﻟﻔرق ﺑﯾن اﻟﺟﺎﻓﺎ(Java) .. واﻟﺟﺎﻓﺎ ﺳﻛرﯾﺑت (JavaScript) ؟
ﺎﻟﺟﺎﻓﺎ أﻗوي ﺑﻛﺛﯾر ﻣن اﻟﺟﺎﻓﺎ ﺳﻛرﯾﺑت ، وأﻛﺛر ﺗﻌﻘﯾدا ، و أﺻﻌب ﻓﻲ اﻟﺗﺣﻛم . وھﻲﺗﺄﺗﻲ ﻓﻲ ﻧﻔس ﻣﺳﺗوى ﻟﻐﺗﻲ اﻟﺳﻲ(c) ، واﻟﺳﻲ ﺑﻠس ﺑﻠس(c++)ﺑﺎﻹﺿﺎﻓﮫ اﻟﻰ أﻧك ﺗﺣﺗﺎج اﻟﻰ ﺑراﻣﺞ ﺧﺎﺻﺔ ﻟﻠﻛﺗﺎﺑﺔ ﺑﻠﻐﺔ اﻟﺟﺎﻓﺎ (Java) ، ﺑﯾﻧﻣﺎ اﻟﺟﺎﻓﺎ ﺳﻛرﯾﺑت (JavaScript) أﺑﺳط ﺑﻛﺛﯾر حيث ﯾﻣﻛﻧك ﺑﻣﺟرد ﻓﺗﺢ أي ﺑرﻧﺎمج ﺗﺣرﯾر ﻧﺻوص ﻣﺛل ال NOTEBAD ﻛﺗﺎﺑﺔ اﻟﺳﻛرﯾﺑت ﻛﺎﻣﻼ .وهى كأي لغة أخرى تخضع لبعض الشروط نستعرض منها ما يلى:
· Case sensitivity
الجافا سكريبت هيcase sensitive language ، أي أن الكلمة المكتوبه بالحروف الصغيره تختلف عن نفس الكلمة مكتوبة بالأحرف الكبيره .
· الفاصلة المنقوطه Semicolons
يجب أن ينتهي كل سطر بفاصلة منقوطة (;)
·المساحات الخالية :
الجافا سكريبت كالـ HTMLتتجاهل المساحات الخالية ، والسطور الجديدة.
·الأقواس
أثناء الكتابة بالجافا هناك أقواس عدة ، على إختلاف أنواعها ،لذلك
يجب عليك بعد فتح أي قوس من هذا الأقواس غلقة لكي لايخلق لك ذلك أية مشاكل
أثناء تنفيذ البرنامج .
·الكلمات المحجوزة
مصطلحات الجافا المحجوزة ، وهي أوامر الجافا التي لايمكنك نسب أي متغيرات إليها على الإطلاق ، كما في كل لغات البرمجة المعروفة.
· ما يجب أن تعرفه مسبقا قبل البدء فى كتابة كود جافا سكربيت:
قبل البدء، يجب أن يكون لديك فهم أساسي لكلا من (HTML و CSS)
وفيما يلي كيفية كتابة كود جافا سكربت(JavaScript How To):
يجب إدخال كود الـJavaScript في صفحة الـHTMLبينTag تسمى
< </script >……….. <script(حيث يقول متى تبدأ الجافا سكربيت ومتى تنتهى). ويوضع هذا الكود بداخل<BODY>وفي القسم<HEAD>من صفحة HTML.
مثال:
<script>
alert("My FirstJavaScript");
</script>
alert("My FirstJavaScript");
</script>
JavaScript بداخل الـ <body>
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>
وظائف جافا سكريبت والأحداث (JavaScript Functions and Events):
أذا قمنا بوضع كود (JavaScript) بداخل الـ (Functions) يمكننا استدعاء هذه الـ (Functions) عند حدوث حدث معين (Event)
JavaScript Functions بداخل الـ <head >
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript Functions بداخل الـ <body>
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
</html>
External JavaScripts
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
ويما يلى سوف نقوم بعرض بعض من الأمثلة :-
· كيفية العثور على طول النص (Find the length of a string)
<!DOCTYPE html>
<html>
<body>
<script>
var txt = "Hello World!";
document.write(txt.length);
</script>
</body>
</html>
· أستبدال كلمة بأخرى فى النص ( Replace characters in a string - replace())
<!DOCTYPE html>
<html>
<body>
<p>Click the button to replace "Microsoft" with "Apple" in the paragraph below:</p>
<p id="demo">Visit Microsoft!</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace("Microsoft","Apple");
document.getElementById("demo").innerHTML=n;
}
</script>
</body>
</html>
· أسترجاع تاريخ اليوم (Use Date() to return today's date and time)
<!DOCTYPE html>
<html>
<body>
<script>
var d=new Date();
document.write(d);
</script>
</body>
</html>
·أسترجاع اليوم واستخدام المصفوفة لكتابة أيام الأسبوع، وليس فقط العدد (Use getDay() and an array to write a weekday, and not just a number)
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to display todays day of the week.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var d = new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
var x = document.getElementById("demo");
x.innerHTML=weekday[d.getDay()];
}
</script>
</body>
</html>
·عرض الساعة مع التحديث(Display a clock)
<!DOCTYPE html>
<html>
<head>
<script>
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
Check Boolean value
<!DOCTYPE html>
<html>
<body>
<script>
var b1=new Boolean(0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 is boolean "+ b1 +"<br>");
document.write("1 is boolean "+ b2 +"<br>");
document.write("An empty string is boolean "+ b3 + "<br>");
document.write("null is boolean "+ b4+ "<br>");
document.write("NaN is boolean "+ b5 +"<br>");
document.write("The string 'false' is boolean "+ b6 +"<br>");
</script>
</body>
</html>
اسم المدونة
اسم المدونة
اسم المدونة
اسم المدونة
المشاركات
0 التعليقات:
إرسال تعليق