البرمجة في 7 أيام

لغة جافا سكربت

ستتعلم في هذا اليوم أساسيات لغة جافا سكربت والتي تستخدم لإضافة المؤثرات البرمجية على الموقع

كيف أبدأ
قم بمشاهدة الفيديوهات مع متابعة الخطوات بالأسفل خطوة بخطوة
ابدأ من هنا

خطوة رقم 1

التعريف بلغة js

خطوة رقم 2

أنشئ مجلد جديد مجاور لمجلد اليوم الأول والثاني، وقم بتسميته : اليوم الثالث js

خطوة رقم 3

بداخل مجلد اليوم الثالث
أنشئ ملف جديد بواسطة برنامج ++notepad ويفضل تسميته بـ index
وتكون صيغة الملف html. كما في المثال التالي

index.html

خطوة رقم 4

بداخل مجلد اليوم الثالث أيضا
أنشئ ملف جديد بواسطة برنامج ++notepad ويفضل تسميته بـ style
وتكون صيغة الملف css. كما في الشكل التالي

style.css

خطوة رقم 5

بداخل مجلد اليوم الثالث أيضا
أنشئ ملف جديد بواسطة برنامج ++notepad ويفضل تسميته بـ script
وتكون صيغة الملف js. كما في الشكل التالي

script.js

خطوة رقم 6

في هذه الخطوة سنقوم بترتيب المجلدات والملفات

خطوة رقم 7

انسخ الكود التالي وألصقه بداخل ملف index.html
تنبيه : تأكد من نسخ الكود بشكل كامل

<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/style.css">
	</head>
	
	<body>
		
		<br>
		<br>
		
		<div id = "div1"> هنا الكلام الموجود في القسم الأول </div>
		
		<br>
		<br>
		
		<div id = "div2"> </div>
		
		<br>
		<br>
		
		<input id="text1" type="text" />
		
		<button> button1 </button>
		
		<button> button2 </button>

	</body>
</html>

خطوة رقم 8

انسخ الكود التالي وألصقه بداخل ملف style.css

* {
	direction: rtl ;
	text-align: center ;
}

body { 
	background: #D8D8D8;
}

خطوة رقم 9

نقوم الآن بربط ملف script بملف index.html
وذلك من خلال إضافة الكود التالي في ملف index.html بداخل الـ head
مع بقاء منطقة الـ body و الـ head كما كانت

<html>
	<head>
		...
		<script type="text/javascript" src="js/script.js"></script>
	</head>
	<body>
		...
	</body>
</html>

خطوة رقم 10

مكان آخر لكتابة أكواد Java Script
قم بنسخ الكود التالي وألصقه في أي مكان داخل تاق الـ head أو داخل تاق الـ body

<script>

	// هنا يتم كتابة أكواد جافا سكربت أيضا

</script>

خطوة رقم 11

إظهار رسالة التنبيه alert
قم بنسخ الكود التالي وألصقه في المكان المخصص لكتابة أكواد جافا سكربت

alert("السلام عليكم");

خطوة رقم 12

الدالة function
قم بنسخ الكود التالي وألصقه في المكان المخصص لكتابة أكواد جافا سكربت

function fahad() {
	
	
}

الآن قم بإضافة رسالة التنبيه إلى داخل الـ function

alert("مرحبا");

خطوة رقم 13

طريقة استدعاء الـ function : بكتابة اسم الفنكشن فقط
قم الآن بنسخ الكود التالي وألصقه في المكان المخصص لكتابة أكواد جافا سكربت

fahad();

خطوة رقم 14

خاصية Onclick
قم بنسخ الكود التالي وألصقه بداخل عنصر الـ button

Onclick = " "
<button> button1  </button>

<button Onclick = " " > button1  </button>

الآن قم باستدعاء الفنكشن بواسطة الحدث Onclick
ليصبح الكود بهذا الشكل

<button Onclick = "fahad();" > button1  </button>

توضيحات
1- يمكن إضافتها لأي عنصر من عناصر html
2- يكتب بداخلها أي كود من أكواد JavaScript

خطوة رقم 15

خاصية document.getElementById
وظيفتها : تقوم بالوصول إلى العنصر بواسطة id الخاص بالعنصر

مثال للوصول إلى العنصر الذي يحمل
id = div1

document.getElementById("div1")

خطوة رقم 16

استعمال خاصية document.getElementById لتغيير المحتوى بواسطة
innerHTML.

document.getElementById("div1").innerHTML = "يتم تغيير المحتوى بما يكتب هنا";

خطوة رقم 17

استعمال خاصية document.getElementById للتحكم في خصائص CSS بواسطة
style.
كما في الأمثلة التالية

خطوة رقم 18

لتغيير لون الخلفية

document.getElementById("div1").style.backgroundColor = "yellow";

خطوة رقم 19

لإخفاء العنصر

document.getElementById("div2").style.display = "none";

خطوة رقم 20

لإظهار العنصر

document.getElementById("div1").style.display = "block";

خطوة رقم 21

لتغيير محاذاة العنصر

document.getElementById("div1").style.textAlign = "center";

خطوة رقم 22

لإضافة إطار للعنصر

document.getElementById("div1").style.border = "1px solid red";

خطوة رقم 23

لتغيير لون الخط

document.getElementById("div1").style.color = "red";

خطوة رقم 24

لتغيير حجم الخط

document.getElementById("div1").style.fontSize= "10px" ;

خطوة رقم 25

استعمال خاصية document.getElementById للوصول إلى قيمة الحقل النصي بواسطة
value.

للوصول إلى قيمة الحقل النصي
document.getElementById("text1").value ;

لتغيير قيمة الحقل النصي
document.getElementById("text1").value = "خالد" ;

خطوة رقم 26

المتغيرات

x = "fahad" ;
y = 10 ;

خطوة رقم 27

تمارين على المتغيرات

تمرين 1
المطلوب : قم بتغيير الكود لإظهار رسالة تحتوي على
أسامة

x = "فهد" ;
alert(x) ;

تمرين 2
باستعمال المتغيرات قم بتغيير الكود لإظهار رسالة تحتوي على
مرحبا

alert("مرحبا");

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

x = 10 ;
y = 10 ;
alert(x + y) ;

تمرين 4
ما هو الخطأ في الكود التالي ؟

name = "fahad" ;
alert(z) ;

تمرين 5
ما هي الرسالة التي ستظهر ؟

sss11 = "10" ;
www99 = 10 ;
alert(sss11 + www99) ;

تمرين 6
باستعمال هذين السطرين سابقا :

alert("مرحبا") ;
document.getElementById("text1").value ;

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

خطوة رقم 28

استعمال if الشرطية

Student_Age = 6 ;

if ( Student_Age > 5 )
{ alert("تم قبول الطالب في المدرسة"); }
else
{ alert("عفوا لم يبلغ العمر المطلوب"); }

خطوة رقم 29

jquery جي كويري

قم بنسخ الكود التالي وألصقه في الـ head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

خطوة رقم 30

أمثلة على تأثيرات jquery جي كويري

الوصول إلى العنصر بواسطة جافا سكربت
document.getElementById("div1")

الوصول إلى العنصر بواسطة جي كويري
$("#div1")

الوصول إلى قيمة الحقل النصي بواسطة جافا سكربت
document.getElementById("text1").value ;

الوصول إلى قيمة الحقل النصي بواسطة جي كويري
$("#text1").val();

لتغيير المحتوى بواسطة جافا سكربت
document.getElementById("div1").innerHTML = "تم تغيير المحتوى";

لتغيير المحتوى بواسطة جي كويري
$("#div1").html("تم تغيير المحتوى");

إخفاء العنصر بواسطة جافا سكربت
document.getElementById("div2").style.display = "none";

لإخفاء العنصر بواسطة جي كويري
$("#div1").hide();
$("#div1").show();

$("#div1").fadeOut(1000);
$("#div1").fadeIn(1000);

لإخفاء وإظهار نفس العنصر بكود واحد
$("#div1").toggle(1000);

لمزيد من تأثيرات جي كويري
https://www.w3schools.com/Jquery/jquery_ref_effects.asp

خطوة رقم 31

مراجعة لغة javascript

خطوة رقم 32

تمرين عملي على لغة js
قم بإنشاء مجلد جديد باسم تمرين على لغة js
ثم قم بإنشاء ملف html وملف css

التمرين.html
style.css

ثم قم بنسخ الكود التالي كاملا ، وألصقه في ملف html

<html>
	<head>
		<meta charset="UTF-8">
		
	</head>
	
	<body>
		
		<br>
		<br>
		
		<div id = "div1"> هنا الكلام الموجود في القسم الأول </div>
		
		<br>
		<br>
		
		<div id = "div2"> </div>
		
		<br>
		<br>
		ادخل عمر الطالب
		<input id="text1" type="text" />
		
		<button> تحقق </button>
		
		<button> تأثيرات </button>
		
		
		<script>
			// هنا تكتب أكواد جافا سكربت
		</script>
	
	</body>
</html>

ثم قم بنسخ الكود التالي كاملا ، وألصقه في ملف css
ثم قم بربط ملف html وملف css مع بعضهما البعض كما تعلمت سابقا

* {
	direction: rtl ;
	text-align: center ;
	font-size: 30px
}

body { 
	background: #D8D8D8;
}

ثم قم بإنشاء ملف script.js
المطلوب:
1- ترتيب ملفات html css js داخل مجلدات منفصلة بالشكل المفضل
2- ربط ملف html مع ملف script.js

عند الضغط على زر : تأثيرات
يقوم الموقع بعمل الآتي من خلال الأكواد المكتوبة داخل ملف script.js

3- تغيير حجم النص إلى 60 بيكسل للعنصر div1
4- تغيير لون النص إلى الأحمر للعنصر div1
5- تغيير لون خلفية العنصر div1 إلى اللون الأصفر
6- إضافة إطار للعنصر div1
7- إخفاء العنصر div2 خلال ثانية واحدة

وعند الضغط على زر : تحقق
8- يقوم الموقع بعمل الآتي: من خلال الأكواد المكتوبة داخل ملف html

يتم التحقق مما تم إدخاله في الحقل النصي
فإن كان العدد المدخل أكبر من 5
أظهر رسالة فيها عبارة "الطالب مقبول"
وإلا فأظهر رسالة فيها عبارة "الطالب غير مقبول"

الخطوة الأخيرة

الاطلاع على المراجع المهمة
موقع stackoverflow
موقع w3schools
موقع رواق
دورات js من اليوتيوب
دورات جي كويري من اليوتيوب
ضع سؤالك هنا في مجموعة : فون جاب - كوردوفا - آيونك