لغة جافا سكريبت : المستوى الأول دورة كاملة للمبتدئين
لغة جافا سكريبت أو JS , وهي لغة برمجة تتعلق ببناء صفحات الويب. فهي تضفي المزيد من الفعاليّة في صفحات العميل. وتخضع اللغة إلى تطويرٍ قائم إلى الآن من شركة موزيلا.
نقدم لك دورة جافا سكريبت والتي تتضمن العديد من الشروحات حول إنشاء صفحات ويب أكثر تفاعلية. بما في ذلك الوصول إلى أهم خصائص لغة CSS قوالب HTML.
إنشاء صفحة Hello World
لغة جافا سكريبت تُستخدم في العديد من المجالات ، ونعلم أنها لغة تتعلّق بــ Client side , مما يعني القيام ببعض وظائف المتصفح دون تحديث ملازم للصفحة.
و قد شملت تلك اللّغة العديد من المزايا والجوانب. يعد استخدام أو شفرة المصدر من JavaScript أمرًا سهلاً للغاية إذا كانت لديك معرفة مسبقة بلغة HTML وسنقوم ببناء برنامج javascript hello world في صفحة HTML وطباعة العبارة الشهيرة Hello World لتصبح:
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</ body >
</html>
الفكرة غالباً ليست في عبارة Hello World ، ولكن في طريقة استدعاء كود JavaScript. كل ما نحتاجه هو علامتا HTML ثم علامتا البرنامج النصي لقراءة جميع بيانات JavaScript.
ما دون ذلك ، لن يعمل البرنامج ، بالتالي ستكون النتيجة برنامج JavaScript hello world. لا تنس أن بيان document.write مهم جدًا في لغة جافا سكريبت عند طباعة النتائج وسترى أهميته عند استخدامه في البرامج الكبيرة.
تحميل الصفحات
يمكنك كتابة كود JavaScript على صفحة مشتركة مع علامات HTML الأخرى ، وهذه طريقة جيدة للاتصال بجميع موارد الصفحة دون الشعور بالبطء في التحميل. على سبيل المثال , قد نحتاج إلى فصل كود JavaScript من أجل تنظيم الصفحات جيدًا. والذي غالباً ما سنقوم بتنفيذه عند تحميل برنامج JavaScript ودمجها في علامات HTML.
يعد تضمين ملف JavaScript أمرًا سهلاً للغاية في بيئة HTML. قم بإنشاء أي ملف وقم بتغيير امتداده إلى .js واحرص على وضعه في ملفات المضيف المحلية لصفحة HTML الخاصة بك ليصبح:
<!--External JavaScript File are same of javascript script load --> <script type="text/javascript" src="yourfile.js"></script>
أعلم أنك سترفق في المستقبل الكثير من ملفات js ، لذا من الأفضل تنظيم شؤونك جيدًا ووضع جميع ملفات js في علامة الرأس بتنسيق HTML.
علامة البرنامج النصي
لا تنس كتابة أي كود في ملف js بصيغة html ، ما عليك سوى تضمينه في علامة js ليصبح كالتالي:
<script> JavaScript code here... </script>
هل رأيت ذلك ؟ لا تحتاج الأشياء إلى التعقيد في تكنولوجيا الويب وهذه الأساسيات ستساعدك بشكل كبير في المستقبل.
إضافة الصفحة الأولى
لا تنس أنه يمكن تضمين علامة البرمجة النصية في أي لغة برمجة ، اعتمادًا على المصدر الذي نشرح منه. بالتالي يمكنك تضمين لغة Visual Basic أو لغات برمجة أخرى ، لكنني شخصياً لم أطبق ذلك. يمكن استخدامه أيضاً في Microsoft asp.net ولأنني من محبي JavaScript ، ربما نتطرق لشرحها في تقنياتٍ مختلفة عن الوصول المباشر لصفحات الويب.
على سبيل المثال, ستتمكن من تضمين أي لغة تريد أداء مهام صفحتك في شكلها. وربما سنقوم بتطبيق أكثر من لغة بنطاق الويب في دورات أخرى. الميزة التي قد لا يعرفها الكثير من الأشخاص في JavaScript هي وضع التعليقات في علامة noscript لتجنب استخدام // أو / ** / أثناء كتابة التعليقات ، لذا يبدو الأمر كما يلي:
<script type="text/javascript">
document.write("Hello World!");
</script>
<noscript>
The color is Green.
</noscript>
كما نعلم أنه في كل لغة برمجة يوجد بند طباعة مخصص يختلف عن اللغات الأخرى. تتميز JavaScript باحتوائها على جملة document.write باعتبارها جملة print نكتب فيها الرسالة الظاهرة لتصبح على النحو التالي:
<script type="text/javascript">
document.write("Hello World! in javascript :-) ");
</script>
نعتبر إن جملة document.write مخصصة للطباعة على شاشة النتائج ، وليس لوحدة التحكم ، كما أن جملة وحدة التحكم مختلفة تمامًا. على سبيل المثال , فإن الأقواس وعلامات "" تشير إلى وجود سلسلة من الكتابة داخل الجملة المطبوعة.
و بالتالي عند الاخطاء في وضع العلامتين بمكان آخر ربما لن يعمل الكود. سنقوم الآن بتضمين قالب من HTML مع كود JS. في الواقع ، هذا مهم بعض الشيء. في حال أردت إخضاع صفحة الويب إلى تنفيذ لغة جافا سكريبت.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>First page with script!</title>
</head>
<body>
<h3>Welcome to first HTML page with JS script!</h3>
<script type="text/javascript">
document.write("Yes , this is me JAVASCRIPT Code! , I am easy to learn!!");
</script>
</ body >
</html>
التعليقات في لغة جافا سكريبت
عند كتابة كود JavaScript متقدم ، ستبدأ صعوبة تحليل الكود بالظهور مرة أخرى ، مما يؤدي إلى أخذ الكثير من الوقت في تحليل الكود ، خاصة عند تعديل وظائف العديد من الأسطر. جافا سكريبت مثل اللغات الأخرى ، وقد وفرت التعليقات جانباً لتسهيل الأمر على المطورين.
يمكنك اضافة تعليق في سطر واحد. وكل ما ستفعله هو حجز سطر واحد من المحرر فقط لكتابة ملاحظاتك على النحو التالي:
<script> // I am javascript comment </script>
أو يمكنك كتابة تعليقك بعد تنفيذ أمر معين في JavaScript على النحو التالي:
<script>
document.write("Javascript code here !");// I am javascript comment
</script>
هناك العديد من الطرق التي يمكنك من خلالها تنشيط كود JavaScript أو إلغاء تنشيطه ، ويمكنك القيام بذلك عن طريق:
<script>
// document.write("I deactivated this code by considering as a comment!");
</script>
<script>
// document.write("I deactivated this code by considering as a comment!");
</script>
على سبيل المثال , يمكنك أيضًا إضافة تعليق متعدد الأسطر ليصبح هكذا:
/* You can do this by creating multiple lines of comment to become like this and this is very effective way if you want to write paragraph comment */
يمكنك وضع سطور التعليمات البرمجية هذه في صفحتك لمعرفة طرق استخدام التعليقات المتعددة.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Types of comment in javascript</title> <link href="style.css" rel="stylesheet" /> </head> <body> <script> /*Welcome to javascript comment definition you learned how to create first comment by using multiple line */ // you learned how to create first comment by single line </script> </ body > </html>
المتغيرات
تعتبر المتغيرات جزء مهم ولكي تفهم كيفية عملها ، يجب أن تدرك القليل من المعرفة في ذاكرة الكمبيوتر. لأن هذا يساعد بشكل كبير في الانتقال إلى مواضيع أخرى أكثر تعقيدًا في اللغة. في هذا الدرس ، سوف تفهم ماهية المتغيرات وكيف تعمل في نصوص JavaScript النصية.
وذلك من خلال تعيين قيم لها ثم البدء في إظهار النتائج على شاشة الكمبيوتر. لا تختلف المتغيرات في لغة جافا سكريبت عن غيرها من لغات البرمجة الأخرى. وإذا كنت تريد تحديد متغير ، فإن أسهل طريقة للقيام بذلك هي كما يلي:
/*Declaring variable*/ let x = 2;
يمكنك استخدام let in JavaScript ، وهذه طريقة شائعة في المكتبات المتخصصة. والمتغيرات عادةً ما توفر قيمة يمكن تغييرها في أي وقت مطلوب ، ولفهم ذلك جيدًا ، هناك طريقة مختصرة تعمل على تحديد المتغير:
/*Declare variable in short*/ x = 2;
هذه طريقة صحيحة ومقبولة لدى المترجم ، وإذا قمت بتعريفها مسبقًا وبطريقة أو بأخرى يجب تغييرها. نعطيها قيمة بهذه الطريقة ، على سبيل المثال:
/*Declare variable in short*/ x = 10;
يظل اسم المتغير كما هو ، وهذا شرط أساسي عند إعطاء قيمة للمتغير أكثر من مرة في الكود. خاصةً إذا كان كبيرًا جدًا.
فوائد المتغيرات
هناك العديد من الفوائد للمتغيرات في JavaScript:
- تشير المتغيرات إلى كيفية عمل الكود ، تمامًا مثل خوارزميات الرياضيات. والسماح باستخدام JavaScript هي أفضل طريقة لتحديد المتغيرات.
- تقصير الكثير من الوقت وإطالة الكود للمساعدة في حل العقدة.
- في بعض الأحيان توضّح آلية عمل الشيفرة.
عند تحديد المتغير ، ستحتاج إلى ثلاثة عوامل أساسية ، الأول هو التعريف عن طريق كلمة محجوزة في لغة البرمجة مثل Let in javascript أو var. والعامل الثاني هو إضافة نص إلى هذا المتغير بحيث يمكنك استدعاؤها في كل مرة تستخدمها. والعامل الثالث هو مساواة هذا النص بقيمة رقمية أو نصية أو عشرية أو ما شابه ذلك.
التخصيص بين المتغيرات
عندما تحدد متغيرًا في JavaScript وتعطيه قيمة ، أو ربما تريد متغيرًا ثابتًا لا يتأثر بعمليات البرمجة. يمكنك تحديد متغير آخر ومساواته بالمتغير الثابت كنوع من تجريد القيم من التأثير المباشر.
طرق تسمية المتغيرات
هناك طرق محددة لتسمية المتغيرات حتى يتم قبولها في المترجم. بالتالي توجد بعض الطرق التي لا يمكن قبولها. لهذا السبب سنوضح لك الطرق الصحيحة. الطرق المسموح بها.
- .tajer_sys_654 , tajer_sys , tajer2sys , tajersys , _tajersys
أنواع المتغيّرات
في الأمثلة السابقة ، ركزنا على الأرقام في تحديد المتغيرات لأنها الأفضل للفهم قبل كل شيء. ولكن ماذا لو أردنا متغيرات بأسماء أو قيم منطقية ، فقد أدرجت JavaScript هذا أيضًا في تعريف المتغيرات وأنواعها.
من المحتمل أن تقوم بتضمين نص داخل المتغير وهذا ممكن حقًا أو على سبيل المثال تضمين قيمة NULL. وهذا يتم توفيره بواسطة JavaScript وجميع لغات البرمجة أيضًا بطرق خاصة بكل لغة.
الأرقام
يمكنك تحديد الأرقام باستخدام Let in JavaScript على النحو التالي:
let a = 1; let b = 20.50; var c = 0; var d = 20;
النصوص في لغة جافا سكريبت
في لغة جافا سكريبت ، يمكنك تحديد متغير من نوع السلسلة ووضع نص أو كلمة أو حتى حرف فيه. بحيث يصبح كما يلي:
var myJob = "Programmer"; var name = "Violet jack"; var E_W = "Hello World! , JavaScript";
قيمة منطقيّة
قد يكون من المفيد استخدام عوامل التشغيل المنطقية كثيرًا في JavaScript. وقد تحتاجها في التعليمات البرمجية الكبيرة لتبدو كما يلي:
var on = true;
if(on )
{
on = false;
}
انسخ هذا الرمز داخل المحرر ثم حاول رؤية النتائج في متصفحك:
<body>
<script type="text/javascript">
var is_true=true;
var nada =null;
var estimated =15.59;
var John = "John said this project is amazing!";
document.write(John);
</script>
</ body >
الدّوال
نظرًا لأنك أصبحت مبرمجًا لجافا سكريبت ، فستحتاج بالطبع إلى استخدام وظائف في التعليمات البرمجية الخاصة بك.
والحاجة إلى استخدام وظيفة JavaScript جاءت بسبب التعريف المتكرر للمتغيرات ونفس الخطوات ، ولكن بأسماء مختلفة.
مما جعل من الضروري أن يكون لديك كتلة تقوم بتشغيلها مرة واحدة أو تختبئ بعيدًا عن الكود. بالتالي حتى لا تفقد التحكم في التعليمات البرمجية الخاصة بك.
تستخدم وظيفة JavaScript نفس نظام لغة C ++. ولكن بطريقة مبسطة ، وإذا حددنا وظيفة ، فستكون كتابتها على النحو التالي.
function call ()
{
//Your code here
}
حيث يتم ذكر اسم الدالة ، متبوعًا بالاسم المراد تعريفه بالذاكرة. ثم الأقواس ، مع الكود الذي نريد كتابته.
ما هي الدّوال؟
في الواقع ، لا تختلف وظيفة JavaScript عن أدوات الاقتران التي يتم فيها حل المشكلات الرياضية. وكذلك حالة لغات البرمجة الأخرى.
بالتالي هي مهمة واحدة تتم معالجتها بعيدًا عن الكود الخاص بنا. ثم يتم استدعاؤها وتشغيلها كلما تنشأ الحاجة. على النحو التالي:
function print_func()
{
document.write("I am a function you called!");
}
الاتصال بالدالة
حسنًا ، بعد أن حددنا وظيفة JavaScript ثم أنشأناها ، سنسمي هذه الوظيفة الآن على النحو التالي.
<html>
<body>
<script>
function print_func()
{
document.write("I am a function you called!");
}
</script>
</ body >
</html>
إذا كنت تعتقد أن شيئًا ما سيظهر على الشاشة أمامك ، فأنت مخطئ. لأننا لم نقم بالاتصال بهذه الوظيفة. ولتحقيق ذلك سنقوم بذلك عن طريق استدعاء هذه الوظيفة داخل علامات البرنامج النصي بهذه الطريقة.
<html>
<body>
<script>
function print_func()
{
document.write("<h2>I am a function you called!</h2>");
}
print_func(); // You should call function like that
</script>
</ body >
</html>
تمرير المتغيرات
والآن سنقوم بتعريف متغير بين قوسين الدّالة. ثم نحاول طباعة نفس الجملة السابقة ولكن بتمرير البيانات من أعلى.
تعتبر هذه الطريقة فعالة جدًا إذا كنت تريد إنشاء وظيفة جافا سكريبت لـ الاستخدام المتكرر في أكثر من مكان. حسنًا ، سنقوم بتضمين هذه الخطوة في ختام هذا الدرس.
<html>
<body>
<script>
let a = "<h3>I am a function you called!<h3>";
function print_func(a)
{
document.write(a + "You've Done!");
}
print_func(a); // You should call function like that
</script>
</ body >
</html>
المعاملات في لغة جافا سكريبت
تعتمد لغات البرمجة بشكل عام على عوامل الرياضيات مثل الضرب والقسمة والطرح والناقص. والسبب في ذلك هو تعيين قيمتين منفصلتين للمتغيرات ثم الحاجة إلى استخراج حلول للمعادلات لاحقًا. لهذا ، سنسلط الضوء على المعاملات في لغة جافا سكريبت ، والتي ستساعدك كثيرًا أثناء تنفيذ المعادلات البسيطة والمعقدة.
و إذا كنت تريد تخيلها في معادلات التحويل والإسقاط في معالجة الرسومات ثنائية الأبعاد. بالتالي ستستخدم الكثير من العوامل في هذه اللغة.
أهمّية المعاملات
تم استخدام العوامل الرياضية في البرمجة على نطاق واسع قبل ظهور لغات البرمجة عالية المستوى. بالتالي كانت أساس لغة الآلة مثل لغة التجميع ، وهذا ما جعلها ذات أهمية مطلقة في عالم الحاسوب.
الرياضيات: تُستخدم عوامل الرياضيات البسيطة في لغة جافا سكريبت. مثل الجمع والطرح والقسمة ، وهذه بعض أنواعها:
<script> var x = 5; var y = 3; a = x + y; m = x * y; s = x - y; d = x / y; </script>
حددنا كل هذه المتغيرات ، ثم قمنا بتغيير x و y المضافين بعلامة الجمع + ، والمتغير m ، والذي ضرب قيمتين بعلامة *. المتغير s ، الذي طرح قيمتين باستخدام العلامة - وأخيراً المتغير d. والذي يقسم المتغيرين باستخدام العلامة /.
عوامل التعيين: عوامل التعيين والمساواة بين قيمتين هي من المعلّمات. التي يتم استخدامها لتحقيق التعادل بين قيمتين. أو تعيين قيمة لمتغير فارغ آخر ويتم استخدام علامة = للقيام بذلك:
x = 10; y = x; document.write(y);
المقارنة والمنطقية: يمكنك استخدام عامل المقارنة بين قيمتين تحتويان على علامات <أو>. كما يمكنك استخدام عوامل التشغيل المنطقية إذا كنت تريد التحقق من بعض القيم. وعادة ما تستخدمها في العبارة الشرطية على النحو التالي:
let c = 10;
let d = 20;
if(c > d)
{
console.write("c is bigger!");
}
else
{
console.write("No , d is bigger!");
}
if(c == 10 || d == 15)
{
console.write("c = 10 and d != 15");
}
if(c != d)
{
c = d;
}
لقد زودتنا JavaScript بعوامل Postfix و Prefix المدرجة في قائمة مشغلي لغة جافا سكريبت. ويمكنك استخدامها متى شئت داخل الكود للتأثير على نتائج القيم بدقة شديدة.
<script>
x = 10;
++x; //prefix value
console.write("X value became: " + x);
--x;
console.write("X value became: " + x);
</script>
عامل باقي القسمة: كما ترى ، هناك طريقة لإنشاء معادلة باقي قسمة. ولا تنسَ أن المعامل مهم جدًا في برمجة الرسومات مثل التكرار أو العبارات الشرطية. هنا ببساطة يمكننا شرح ذلك على النحو التالي:
<script>
x = 5;
y = 13;
document.write("x Modulus y is :" + x % y);
</script>
من خلال ممارسة جميع معاملات جافا سكريبت التي ذكرناها. ستتمكن من استخدامها بسرعة في التعليمات البرمجية الخاصة بك. ومن السهل جدًا القيام بذلك مع جميع لغات البرمجة. بالتالي ضع في اعتبارك أنه باستخدام قائمة مشغلي JavaScript بشكل صحيح. ستوفر الوقت لفهم الخوارزميات الصعبة بجميع اللغات الخلفية.
استخدام المعاملات في النصوص
يُستخدم عامل الجمع على نطاق واسع في متغيرات String. مع الأخذ في الاعتبار أنه يمكنك بسهولة الجمع بين متغيرين للسلسلة. ومن الجيد أن نجرب شيئًا كهذا:
<script> var paragraph1="It's first combination between paragraph1"; var paragraph 2="and paragraph 2" window.alert(paragraph1+paragraph2); <script>
الجمل الشرطيّة
تُستخدم العبارات الشرطية على نطاق واسع في لغات البرمجة ، ولأن JavaScript تدعم جميع مزايا عوامل التشغيل. فإنها توفر لك استخدام مزايا الجمل الشرطية المتعدّدة. تمكّنك العبارات الشرطية من إعطاء المعنى الصحيح للشفرة التي كتبتها.
ولأن اللغة المنطقية هي أساس أجهزة الكمبيوتر ،ستجد استخدامها في صفحات الويب أمر لا محال. قد تكتب الكثير من الأسطر إلى الحاسوب ويتم تنفيذ مزيداً من الأوامر المتنوعة.
بالتالي ستصل معه إلى مفترق طرق وتخبره بما يجب القيام به. يتم تحديد الشرط بين خيارين ، وإذا كان أحدهما صحيحًا ، فسيتم تنفيذه وفقًا للبيانات. وإن كان خاطئًا ، فلن يفعل شيئًا سوى إرجاع قيمة -1 على أي حال. وينطبق ذلك أيضاً على لغة جافا سكريبت.
<script>
if(condition)
{
//Do something
}
else
{
//return -1 or do an other method
}
</script>
طريقة الاستخدام
سأقوم بتبسيط معنى الجملة الشرطية لكي يتسنّى لك فهمها على النّحو المطلوب. ثم سأضعها في الكود. الجملة هي: "If it's Sunday, I'm going to work!".
حسنًا ، سأحدد متغيرًا ، على سبيل المثال فليكن اليوم وأضيف قيمة إليه ثم سأضع الجملة "سأذهب إلى العمل!" داخل الشرط. وإذا تم استيفاء الشرط ، فسيقوم بطباعة هذه الجملة ، وإلا سيخبرني أن اليوم ليس الأحد , كالتالي:
<script>
today = "Sunday";
_sentence1 = "I will go to work!";
_sentence2 = "Today is not sunday! keep at home :)";
if(_today == "Sunday")
{
document.write(_sentence1 );
}
else
{
document.write(_sentence2 );
}
</script>
هذا كل ما في الأمر بالضبط ، لقد حددت متغيرًا String يساوي كلمة Sunday. ثم وضعت المترجم مع اختبار سريع للتحقق من القيمة. في حال وجودها.
تستخدم غالبيّة لغات البرمجة العبارات الشرطية ، إن لم يكن كلها. وهذا يشير إلى نوع المعرفات المرتبطة ببيئة كل لغة على وجه التحديد.
يمكنك أيضًا استخدام nest ويتم ذلك عن طريق تضمين أكثر من عبارة شرطية واحدة ضمن جملة الشرط الرئيسي.
ويمكنك تضييق نظام الاحتمالات في الجمل الشرطية للوصول إلى أضيق احتمال الذي سيعود إليك بالنتيجة التي تريدها.
<script>
boolean x = true;
var value= 16;
if(x)
{
if( value== 16)
{
document.write("Congratulations! ,you accessed Block Nesting!");
}
}
else{
//return -1
}
</script>
الأحداث في لغة جافا سكريبت
عند البدء فى إنشاء صفحة HTML ، ستجد في أغلب الأحوال العديد من الإضافات التي تظهر للمستخدم أثناء تحريك الفأرة. على سبيل المثال ، تغيير طفيف في حجم الخط أو لون حافظة العناوين. أو ربما تحريك الكائن من مكان إلى آخر على الشاشة.
بالتالي يتم وضع Event Handler في مكان مخصص في الكود ويقوم بعمله كما ينبغي. في الواقع ، أقوى ميزات JavaScript هي Event Handler ، والسبب في ذلك أنها أظهرت جانباً تفاعلياً كبيرًا في صفحات الويب. مما أدى إلى انتشار تقنياتها على خوادم WEB.
إذا انتقلنا إلى Facebook ، فسنجد أن هناك مئات الآلاف من الأسطر من JavaScript. والتي أعطت العديد من وظائف وجماليات الصفحة. يتم تحديد معالجات الأحداث داخل علامة HTML وغالبًا ما تكون عنصرًا في المستند يتم استخدامه للتعامل مع عناصر الويب التي تتكون منها الصفحة.
على سبيل المثال , قد تتطرّق للضغط على لوحة المفاتيح ثم بعد ذلك يظهر لك صندوق في وسط الشاشة. أو قد تقم بتحريك الفأرة لتجد تغيير في أنماط Div الاعتيادية.
<body>
<form>
<input type="button" value="Click Me Now!" onclick="clickMe();" />
</form>
</ body >
<script>
function clickMe()
{
window.alert('Welcome to your first js event handlers !!');
}
</script>
أين تستخدم Event Handler؟
هناك العديد من المواقع الشهيرة التي تستخدم معالجات أحداث js إلى حد كبير. حتى مع WordPress أو Wix أو حتى قوالب جوملا أو غيرها. بالتالي هناك إمكانية أيضاً لاستخدام JS Events ، ولكن بطريقة أو بأسماء أخرى. وسنذكر أكثر أمثلة مهمة على آليّة عملها في المتصفح.
دعم خاصية Hovering
يمكنك الاتصال في ملفات CSS عبر JavaScript وإجراء بعض التحسينات على الألوان ونمط الخط وإضافات CSS الأخرى. لدى JS اتصال افتراضي في نمط CSS ، مما يضعك أمام خيارين: استخدام التصميم في CSS. أو الاعتماد على JavaScript لعمل بعض التصميمات. لا يتم العبث بالوصول إلى ملفات CSS عبر JavaScript.
تحتاج أحيانًا إلى إضافة عناصر وعلامات لا يمكنك تعديلها في CSS لأنها غير محددة مسبقًا في الذاكرة. ولهذا السبب ستستخدم التشغيل المؤقت لعناصر JavaScript والتي تعمل على إدارة الذاكرة في المتصفح بطريقة أكثر فاعليّة.
طلب صفحات HTTP
ستحتاج إلى JavaScript مع تقنية Ajax عند الاتصال بصفحة الخادم ، والتي تعمل فقط من خلال Event Handler.
تساعدك هذه المرحلة على إجراء بعض التعديلات على قواعد بيانات الخادم دون الحاجة إلى تحديث صفحة الويب.
وعلى سبيل المثال , لقد حصلت HTTP Response الكثير من الاهتمام لأنه يعمل مع تقنية Realtime في الخادم. لذلك تخيّل أن Java Scripts رائعة عند إدارة قواعد البيانات بسرعة باستخدام لغات Backend للخوادم.
إضافة العناصر
نوع آخر من إدارة الذاكرة من خلال JavaScript هو استخدام إضافة عناصر مؤقتة. وأحيانًا نحتاج إلى ذلك لأن الحاسوب لا يعرف خطط المستخدم في استخدام قواعد البيانات أثناء جلسته.
لتبسيط المسألة قليلاً ، تخيّل أنك قمت بتسجيل الدخول على موقع LinkedIn ثم بدأت محادثة مع شخص ما.
ستظهر معلومات هذه المحادثة لأول مرة في قواعد البيانات ولا يعرف الخادم حتى ذلك إلا بعد البدء في نصوص المحادثة. بالتالي يمكن تخزينها فقط بأمر منك ، مما يعني إنشاء عناصر في JavaScript.
من تجربتي الشخصية ، فإن إضافة عناصر JavaScript مؤقتة وحفظها على الخادم هو أحد أكثر المزايا التي أدهشتني حقًا في برمجة الويب.
لأنني وصلت إلى قواعد البيانات مباشرة عن طريق فتح وإغلاق بعض العناصر دون إجراء أي تحديثات رئيسية على الصفحة.
إضافة الكائنات في لغة جافا سكريبت
إذا لم تكن لديك أي فكرة عن لغة CSS ، فأنا أريدك أن تلقي نظرة سريعة على قسم CSS حتى تتمكن من فهم ما سيتم كتابته لأننا سنلعب بالألوان عبر JS Event Handlers. سأقوم بنسخ كود من مشروع كبير ولكنه يحتوي على فكرة بسيطة وهي إضافة علامة HTML بمعرف.
ثم تسميتها عبر معالجات الأحداث js وبعد ذلك سأقوم بتطبيق خلفية زرقاء داكنة وهذا هو الكود في البداية.
<html>
<body>
<div id = "vav_c_home" style="text-align:center; font-size:">Welcome To CSS3</div>
</ body >
<script>
// Apply color while run the HTML page
document.getElementById("vav_c_home").style.color = "#2b2d2d";
//Apply CSS hover on area If touched by the mouse
var css = '#vav_c_home:hover{ background-color: #517AA7; }';
//Create Child element by JS then apply new color on
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
</script>
</html>
قمت بتعريف وسم بتنسيق HTML ثم أضفت معرفًا إليه في جافا سكريبت بالعنوان vav_c_home. ولكي يتم الوصول إلى هذا الوسم لا بد من تعريف كلاس أو id لديه.
بعد ذلك قمت بالوصول إلى هذا الــ id من خلال جافا سكريبت وأجريت بعض التغييرات عليه.
وبعد ذلك قمت بتطبيق لون آخر عندما لمست تلك المنطقة بالماوس وقام بالفعل بإجراء تغيير عبر التمرير ، الموجود بالفعل في CSS.
بالتالي ، قمت بدمج CSS في JavaScript أثناء العمل . وأنا أعلم أن هذا الرمز ينتابه بعض الصّعوبة على المبتدئين ، لكنني سأحاول تبسيطه لاحقًا. انسخه في متصفحك لترى كيف يعمل.
الحلقات التكراريّة في لغة جافا سكريبت
يجب أن تكون قد درست عمل الحلقات في لغات البرمجة أو في علم الخوارزميات ولديك فكرة واضحة عنها. جاءت الحاجة إلى الجمل التكراريّة عندما قرّر المبرمجون الهرب من التعليمات البرمجية Hard Coding. مما يزيد من الوقت والملل أثناء إنشاء وتصنيع البرامج.
ولأننا نتحدث هنا عن لغة JavaScript ، فإن الاعتماد على الحلقات التكرارية أمر مهم للغاية أثناء التعامل مع البيانات . ربما لا يوجد تعريف واضح يدل على الحلقات التكرارية. لكن الحلقات التكرارية تعبر عن عملية روتينية يتم تنفيذها لمجموعة كبيرة من البيانات. والتي تنتهي عندما يستمر مؤشر العد في الزيادة أو النقصان.
أهمّية الحلقات التكراريّة
الحصول على كود يسهل تعديله وقراءته أمر صعب للغاية ، وكتابة الكود بطريقة احترافية هي العامل الرئيسي لنجاح أي برنامج.
والسبب في ذلك هو أن يكون له تنسيق وتنظيم شائع جدًا لجميع المبرمجين. مما يؤدي إلى الحفاظ على الشيفرة لأطول وقتٍ ممكن بين المطوّرين.
على سبيل المثال , إنّ بعض الحلقات التكرارية قد تصل إلى ما يقرب من 500 سطر.
نعم ، هذه هي الحقيقة عند استدعاء البيانات الضخمة وتطبيق بعض الشروط على بعضها البعض أثناء تشغيل الكود.
بالتالي ، تعد Loops طريقة احترافية لكتابة التعليمات البرمجية. حيث تمكّن الجميع من فهم الشيفرة واستخدامها مرة أخرى في البرامج مع بعض التعديلات.
حلقات For
بنية For هي الأقرب إلى بنية الجمل الشرطية. وهي تتضمّن كلمة For وقوسين () ، وبينهما مؤشر يعمل على حساب مجموعة من الدورات في سطور الجملة. والتي يتم حسابها بين قوسين {} ، بحيث يكون شكل الجملة في JavaScript كما يلي:
<script type="text/javascript">
for(var i = 0; i<=20 ; i++ )
{
/*Your Code Here*/
}
</script>
لقد حددت حلقة تكرارية في هذا الرمز تتكون من متغير i ، والذي يحسب عدد الجولات في التكرار. بالتالي فإن عدد الدورات 20 دورة. وهذا يعني أنني طلبت من وحدة المعالجة المركزية تحديد عدد من النوع الصحيح Int وقيمته صفر.
وإذا كانت القيمة لا تزال أقل من أو تساوي 20 ، فقم بزيادة هذا المتغير وبعد كل إضافة ، أدخل Body وقم بتنفيذ الكود بالداخل. ثم عد مرة أخرى حتى تنتهي من جميع الدورات ، والتي ستتوقف عند وصولك إلى الرقم 20. عندما تقوم بتطبيق هذا الرمز في متصفحك ، فلن يحدث شيء. لماذا ا؟. لأننا حجزنا بند For في الذاكرة للتشغيل دون تنفيذ أي كود داخلي.
إذا كنت تريد رؤية النتيجة بنفسك ، إنسخ الكود في متصفحك واطبع أي قيمة بين قوسين لترى كيف يعمل Looping.
جملة While loop
في حين أن طريقة الحلقة سهلة التنفيذ ويمكنك ممارسة حلقات JavaScript باستخدام while Loop. كل ما عليك فعله هو كتابة الكلمة المحجوزة أثناء التواجد في المحرر ، بين الأقواس والمتغير ما لم تستوف الشروط. افتح الأقواس في الأسفل ، قم بزيادة قيمة المتغير الذي حددته مسبقًا ، ثم قم بتنفيذ التعليمات البرمجية الخاصة بك بحيث يكون مظهر الكود كما يلي:
<script type="text/javascript">
var x = 0;
while(x<=20)
{
x++;
document.write("<h2>Hello World</h2>");
}
</script>
لا أعتقد أنك ستجده صعبًا ، لأنه لا يختلف كثيرًا عن For Loops السابقة ويعمل تمامًا كما ينبغي. لكن بعض المبرمجين يفضلون هذه الطريقة بدلاً من For أو Do while.
جملة Do While
أكتب جمل Looping دون الإشارة إلى مصادر JavaScript لأنها متشابهة في لغات البرمجة. نصل الآن إلى الطريقة الأخيرة ، وهي Do while ، والتي لا تختلف كثيرًا عن السابقة while ، لكن البعض يفضلها في الكود مثل هذا:
<script type="text/javascript">
c = 0;
do{
document.write("<h5>Hello Javascript!</h5>");
c++;
}while(c <=5)
</script>
لاحظ معي أنني حددت متغيرًا وأعطيته قيمة صفرية. ثم استخدمت عبارة محجوزة do والأقواس وأدخلت الكود. مع زيادة قيمة المتغير في كل دورة ووضع الشرط في نهاية الكود.
استخدام ديناميكية CSS
كما تعلم أن الوصول إلى جميع عناصر HTML في لغة جافا سكريبت متاح لك. بالتالي أريد التعقيب قليلاً على بعض المهام التي يجب اتباعها أثناء الاتصال في الصفحة الديناميكية دون الحاجة إلى العديد من علامات HTML غير المفيدة.
لقد قيل لنا أن الاستدعاء الرئيسي لأي عنصر يتم عبر document.getElementById (). ويمكنك أيضًا الوصول إلى الاسم عبر getElementByTagName () وهذه هي الوظائف التي اشتهرت بها JavaScript منذ إنشائها.
في هذا الدرس ، سأتصل ببعض خصائص CSS المتاحة لـ HTML عبر JavaScript. وربما تساعدني وظائف JavaScript القوية التي يمكنها العمل على أي صفحة دون أي مشاكل برمجية في هذا الشأن.
الوصول إلى تصميم CSS
على الرغم من اختلاف الأمر في CSS JavaScript الديناميكي ، إلا أنه متشابه جدًا. باستثناء بعض الاختلافات بين وصف CSS و JavaScript. على سبيل المثال إذا أنشأنا علامة HTML أو علامتين على النحو التالي.
<html> <div class="Div_one">This is first DIV</div> <div class="Div_two">This is second DIV</div> </html>
لاحظ هنا أنني أنشأت علامتي HTML وأعطيت اسم كلاس مختلفًا لكل منهما. وقد فعلت ذلك حتى أتمكن من الوصول إليها بشكل فريد من خلال CSS. وربما بعد ذلك سأغيّر لون الخطوط داخل هذين العلامات من خلال كود CSS لتصبح.
<head>
<title>Test CSS Style</title>
<style>
.first {
color: blue;
}
.second {
color: aquamarine;
}
</style>
</head>
<body>
<div class="first">
This is first DIV
</div>
<div class="second">
This is second DIV
</div>
</ body >
ربما يكون أفضل ما يمكن قوله هنا هو أنني قمت بتعريف طبيعي لمحتوى الصفحة. حيث أسمي علامات HTML عبر CSS عبر فئة محددة وأعطي كل علامة لونًا مختلفًا بداخلها.
بالتالي لا تنس أن كلاس HTML يتم الوصول إليها بواسطة علامة # ، على عكس المعرف id. الذي يتم الوصول إليه من خلال النقطة حيث يخلط معظم المبرمجين بين المفهومين. وغالبًا ما يتم اكتشاف المشكلة في وقت متأخر من الكود الكبير.
لقد رأيت من قبل كيف نسمي علامات HTML عبر CSS وفي CSS JavaScript الديناميكي. سنفعل ذلك برمجيًا ، وليس وصفًا.
لكنني سأعيد تعريف المتغيرات لاستدعاء علامات HTML حسب المعرف. على سبيل المثال ، سأستخدم المعرّفات وأتخطّى الكلاس في المثال السابق ، وستبدو صفحة HTML على النحو التالي:
<head>
<title>Style in JavaScript</title>
</head>
<body>
<div id="first_div"> This is dynamic JS DIV_1 </div>
<div id="second-div"> This is dynamic JS DIV_2 </div>
</ body >
<script>
var div_1 = document.getElementById("first_div");
var div_2 = document.getElementById("second-div");
</script>
الآن لدينا متغيرين جافا سكريبت مرتبطين بكل من العلامتين first div و seconds div. بهذه الطريقة ، تم تحقيق أبسط شروط جافا سكريبت CSS الديناميكية لتمكيننا من اتخاذ المزيد من السيطرة على HTML. سأحاول الآن استدعاء علامات HTML و CSS باستخدام كائنات متجهة تدعمها JavaScript.
على سبيل المثال ، إذا قمت بتغيير لون علامة HTML باستخدام متغير JavaScript ، فسأفعل ما يلي:
div_2.style.color = "#665868"; div_2.style.fontFamily = "Arial"; div_2.style.fontSize = "30px";
استخدام جافا سكريبت DOM
في طريقة Dynamic CSS JavaScript ، سيتم تبديل خصائص العنصر باستخدام Event Handler. عادةً ما يستخدم بعض المبرمجين الطرق السريعة للوصول إلى مترجم المتصفح عن طريق الاتصال مباشرة بمعالج الأحداث مثل طريقة النقر ، والتي يتم تعيينها داخل العلامة.
لكنني سوف أستخدم طريقة مختلفة وقياسية في JavaScript من خلال الوصول إلى العلامة عبر المتغير. و سأجري بعض التعديلات على حجم الخط عندما يلمس الماوس سطح العلامة ، مثل الكود التالي:
div_2.onmouseover = function() {
div_2.style.backgroundColor = "#ffef72";
div_2.style.borderWidth = "10px";
};
لكن يبقى شيء واحد بالنسبة لنا ، وهو كيفية العودة إلى الوضع السابق ، وإذا قمت بتطبيق الكود على صفحتك ، فستجد أن لون الخلفية لعلامة div2 قد تغير وبقي كما هو دون الرجوع إلى السابق . في هذه الحالة ، سأستخدم الأمر عند خروج الفأرة من حدود الكائن لكي يتم العودة للوضع السابق.
بالتالي يتعيّن عليك حفظ الإعدادات السّابقة والتمرير فيما بينها باستخدام كائنات DOM:
div_2.onmouseout = function() {
div_2.style.backgroundColor = "#FFFFFF";
div_2.style.borderWidth = "1px";
};
الخلاصة
- لغة جافا سكريبت مستخدمة على نطاق واسع في تقنيات الويب.
- تعد اللغة أساساً لظهور تقنيات مطوّرة مثل تقنية اجاكس و Node JS.
- تسيطر اللغة على صفحات الويب تماماً مثل لغات الخادم ولغات سطح المكتب.
المراجع
- 1.^ كتاب جافا سكريبت الإصدار الثالث.
تمت الكتابة بواسطة : محمد
آخر تحديث : لم تخضع لتحديثات بعد