JavaScript Notes
JavaScript Notes
ما هي JavaScript؟
JavaScriptهي لغة برمجة حاسوبية ديناميكية .هي خفيفة الوزن وتستخدم بشكل شائع كجزء من صفحات الويب ،حيث
تسمح تنفيذاتها للبرامج النصية على جانب العميل بالتفاعل مع المستخدم وإنشاء صفحات ديناميكية .هي لغة برمجة مفسرة
تتمتع بإمكانيات البرمجة الكائنية.
Client-side JavaScript is the most common form of the language.
يعنى ال JavaScriptبتتعامل مع ال client-sideبتاعك اللى هو مثال ال browserو ده ليه مميزلت كتير جدا فانه
مثال انت لو عايز تعمل checkهل ال userوهو بيدخل ال dataبتاعته في formال mailبتاعه كان validوال ال
فبدل ما تروح لل serverذات نفسه وتعمل ال checkده و طبعا هيحصل loadكتير لما تروح لل serverيتأكد و
يرجع انت ممكن تعمل دا بال JavaScriptوال validationده يحصل فال browserبتاعك في أقل من ثانيه عشان
كده هو client-sideاما بقا ال node.jsهي . server side
وممكن من خاللها تخلى ال web pageبتاعتك dynamicيعنى مثال ممكن لما ال userيــ clickعلى اى buttonاو
يعمل اى eventيروح مثال يعمل tagمعين فال htmlاو يخفى حاجه انت مش عايزها .
ال JavaScriptهي cross Platformيعنى ممكن تعمل ويب سايت تقدر تشغله على اكتر من operation system
يعنى مثال android, iOSودا عن طريق حاجة اسمها ) (ionic or nativeودول عبارة عن toolاو لغة تقدر تحول
الويب بتاعك الى iOSاي تحول من operating system to operating systemوكمان ممكن تقدر تعمل بيها
desktop appعن طريق electron.jsوكمان تقدر تعمل VRاختصار virtual realityفهي flexibleمعايا.
سؤال انترفيو :ماهو الفرق بين JavaScript, ECMAScript؟
JavaScript was first known as Live Script, but Netscape changed its name to JavaScript.
وده كان موجود فى وقتها 3 languagesوهما ال java, scheme, selfو كان ال designبتاع كل languageمنهم
مختلف تمام عن التانيه فاخدوا من ال javaال syntaxوخد من ال schemeال conceptبتاع ال
function in a first-class objectو خد من ال selfال OOP prototype basedو جمع التالته دول مع بعض و
طلع حاجه اسمها live scriptومنها المنظمه العالميه ECMAسمتها ECMAScriptسنة 97وده المفروض االسم
الصح بتاعها حاليا و لكن االسم المنتشر او السوقى لغايه دلوقتى هو JavaScriptو بدأ ينزل منها versionsلغاية
.ECMAScript 6
JavaScript Syntax
االول كده انت ممكن تكتب internal JavaScriptعن طريق انك تيجى قبل قفله ال body
وتعمل كده
او ممكن تعمل externalعن طريق انك تكتب ال scriptبتاعك قبل قفله ال bodyو تحط
و عندنا كذا طريقه نعمل بيها outputيعنى لو عايزين نشوف ال resultبتاعتنا ايه او نتأكد من حاجه وهكذا
• )( Alertدى بخلى ال outputيظهرلى عن طريق messageمن ال browserزي كده )"alert("OK
• )( :Promptدي بخلي اليوزر يدخلي قيمة وخلي بالك ا لبرومبت التايب بتاعه دائما بيكون stringعشان لو
هتعمل عملية حسابية
<h1 id="username" ></h1> // in html
;)"var username = window.prompt("add your name
;document.getElementById("username").innerHTML = "welcom " + username
• )( :Console.logوده اهمهم ,هنا انا بطلع حاجه ليا انا ك developerيعنى ال userمش بيشوفها فبيبقى
زى testليا انا كده ,بعمل inspectو بدوس على tabال consoleمثال )"console.log("Hello
• )( :Confirmتظهر رسالة وتنتظر المستخدم ليضغط على زر “ ”OKأو “ .”Cancelترجع trueفي حالة أوك
و falseفي حالة .Cancel/Esc
;)"هل أنت المدير؟"(let isBoss = confirm
DataTypes:
لسوء الحظ ان JSبتتعامل مع ال nullان هى objectمع ان المفروض ان تطلع nullودا ممكن نعتبره انه bugاو
خطأ فى اللغة ولكن الصح هو ان هي المفروض تكون منالنوع nullوليس .object
ال NaNهي قيمة وال Datatypeبتاعتها هي number
var x = 5 + 5; // 10
var x = 5 + 5 + "5"; // 105 >> 10+"5" = 105
"var x = "5" + 6 + 6; // 566 >> "5"+ 6 = "56">> "56"+ 6 = "566
االقواس بتتنفذ االول "var x = "5" + (6 + 6); // 512 >> "5"+ 12 = "512
ودا بيتنفذ مع البالس +فهو بيتعامل مع البالس على انه كونكات اي ليها وظيفتين انما لو استخدمت اي ابوريتور تاني //
هينفذ العملية الحسابية الن هم بيعملو تحويل ضمني
implicit convert
وكذلك ايضا كال من * => =< < >%/بيعملو امبليسيت كونفيرت //
مثال
var z = "5" * "6"; // 30
var o = "6" / "2"; // 3
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
السبب انه طلعلي النتيجة دي تابع التالى ]var m = "Ahmed" * "Mostafa"; // NaN [Not a number
النه فى الباك جروند بيستخدم فانكشن اسمها نامبر ودي بتستخدم للتحويل من سترنج الى نمبر فهو جي يحول الكلمة لقاها
مش رقم//
var n = "5"; var c=Number(n); console.log(typeof(c)); // number
االسترينج الفاضي بيعتبر صفر عند تحويله console.log(Number("")); // 0
االسترينج الذي يحتوي على اسبيس فقط بيعتبر صفر عند تحويله console.log(Number(" ")); // 0
var b = "" * 5; // 0 >> 0 * 5 = 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
)Conditional statement (if, switch
هو انى ممكن اعمل checkعلى شرط معين لو اتحقق هاخد قرار ما و لو متحققش هاخد قرار تانى فكده احنا
بنتكلم عن اتحقق يعنى الشرط ده كان صح او كان trueاو متحققش فبكده الشرط ده كان غلط او كان false
)Conditional statement (if
والشرط هنا بعمله عن طريق ال If Condition
;var userAge = 10
};)"if(userAge > 18 && userAge < 40) {console.log("you can register
};)"else{ console.log("You must be 15 years old
case "Sara":
;)"console.log("Welcome YA Sara
;break
default:
;)console.log("welcome YA " + userName
;break
}
بس في حالة ان لو حد رخم عليك فى انترفيو او في سؤال وقالك ال انا عايز استخدم =< او == او && ...مع ال
switchبس احنا فى الطبيعي مبنستخدمش الطريقة دي وال بنعمل الطريقة دي يعنى بس عشان لو حد رخم.
احنا عارفين ان ال switchبتقارن ال equalityففى المثال التالى قولتله فى ال switchكلمة trueوفى ال case
userAge == 20فالمفروض الشرط دا بيتم ترجمته الى trueاو falseحسب لو الشرط اتحقق وال ال طب ولو الشرط
اتحقق معناه ان ال caseشايله كلمة trueففي هذه الحالة هو هيقارن ما بين ال trueاللى فى ال switchوبين ال true
اللى في ال caseفهيالقيهم شبه بعض فهيحقق ال caseدي انما لو ال caseشايله falseفهنا الشرط مش هيتحقق
فهيدخل على ال caseاللى بعدها وهكذا...
var userAge = 20
{ )switch (true
case userAge == 20:
;)"console.log("you can register
;break
default:
)"console.log("You must be 15 years old
;break
}
الفرق بين if , switch؟
استخدم ifلو انا عايز اتحكم فى حاجة وبستخدم <او> او&&..
اما switchفي حالة ال Equalityواالتنين Conditional statementعادي
وانا ممكن اعمل اللى بتعملو switchبال ifولكن ال switchكـ readableكـ طريقة كتابة احسن وفى اي لغة برمجة
تانيه بيقولو ان ال switchاسرع من ifاما فى ال JSمبتفرقش كتير الن هي بتعتمد على ال browserولكن فى العادى
معظمنا بيستخدم ال ifفي الحالتين.
تعال نتريس الكود هنا فى ال forاول حاجة بيبص عليها هي ال startوهنا var x=1وبعد كدا بيبص على ال
conditionوهنا x<=100فلو الشرط دا اتحقق وبقا ب trueبيدخل جوا ال scopeبتاع ال forبينفذ الكود وبعد كدا
بيطلع تاني يـ incrementيعنى يزود واحد على قيمة ال xوبكدا ال xفى ال startهتكون ب 2وهكذا لحد ما الشرط
يكون ب .false
طيب في حالة انى محطتلوش حاجة فى ال forزي المثال التالى هينفذلي الكود الى ماالنهاية الن اهم حاجة عند ال -
forهي ال conditionوطالما ال conditionفاضي معني كدا انه .true
{ ) ; ; ( for
;)"console.log("hi
}
انما لو اديته ال startو ال conditionهينفذلى الكود ماالنهاية الن قيمة ال xهنا ثابتة مقولتلوش زود حاجة لحد -
ماالشرط يبقا . false
{ ) ;for (let x = 1; x <= 100
;)"console.log("hi2
}
While
ال whileمعناها طول ما الشرط متحقق ادخل نفذ الكود وال initializationبتاعتها بتكون برا وال incrementبيكون
داخل scopeوزيها زي ل .for
;var x = 1
{ )while (x <= 100
;)"console.log("hello
;x++
}
do While
doمعناها اعمل كذا طول ما whileكذا
;var x = 1
{ do
;)"console.log("Ahmed
x++
;)} while (x<=100
طيب ايه الفرق ما بينهم؟
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
ال forو whileزي بعض ومفيش فرق مابينهم هنا ولكن بيظهر الفرق في الباك اند .ففي حالة ان لو الشرط متحققش مش
هيعرف ينفذ الكود
انما ال do. Whileانا بقوله اعمل كذا ولما تخلص اتشك على الشرط بتاعى ف لو الشرط متحققش ف هو هينفذلى الكود
مرة واحدة.
طيب انا امتا هلجأ اني استخدم do whileاقوله على االقل اعمل دا مرة في حالة انى بعمل انبوت للباسورد واقوله لو
لقيت الباسورد اكبر من 10احرف هقوله ال renterال passwordلحد ما اليوزر يدخلي عدد احرف اقل من 10ويقف
ويدخل فى االسطر اللى بعد كدا .مثال
{ do
;)"var userPass = window.prompt("please inter password less than 10 character
هنا بقوله طول ما الباسورد اكبر من 10اعملى كذا (اظهر البرومبت) } while (userPass.length > 10); //
In HTML
>"<select name="" id="optName
></select
In JS
عملت حصالة فاضية عشان اشيل فيها االوبشنvar Hasalah = ""; //
{ )for (let i = 1985; i <= 2018; i++
قولتله = +عشان في كل مرة يزودلي اوبشن على االوبشن اللى موجود او بقوله كل مرة عايز احوش اوبشن في //
الحصالة بتاعتى
قولتله = +عشان في كل مرة يزودلي اوبشن على االوبشن Hasalah += "<option >" + i + "</option>"; //
اللى موجود
}
انا ضفته برا االسكوب الني لو ضفته جوا كل مرة هيروح يمسح االوبشن اللى ضافه ويحط الجديد //
;document.getElementById("optName").innerHTML = Hasalah
تطبيق بمثال اخر على الجدول او ال cardوممكن تستخدمه على اي حاجة انت عايز تكررها اكتر من مرة
In HTML
>"<table class="table
><thead
><tr
><th scope="col">#</th
><th scope="col">First</th
><th scope="col">Last</th
><th scope="col">Handle</th
></tr
></thead
>"<tbody id="tableOpt
></tbody
></table
In JS
"" = var temp
{ )for (let i = 0; i < 10; i++
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
` =temp +
><tr
">"<th scope="row">" + i + "</th
><td>Mark</td
><td>Otto</td
><td>@mdo</td
></tr
`
}
;document.getElementById("tableOpt").innerHTML = temp
Function
هو اسكوب او دالة او موظف بعمله عشان يكون مسئول عن تنفيذ مجموعة الخطوات الموجودة داخل االسكوب دا حتي لو
كانت 1000خطوة.
وبتنقسم الى مرحلتين:
.1مرحلة ال :Implementationوهي مرحلة التكوين وهي انشاء الفانكشن بتاعتى
{)(function x
;)"console.log("hello
;)"console.log("hi
}
.2مرحلة ال callاو :invokeوهي مرحلة اني بنادي على الفانكشن دي او بشغلها
)(x
:parametersهي متغيرات الفانكشن بتاخدها يعني مثال لو انا عايز اخلي الفانكشن بتاعتي في كل مرة اجمع
رقمين مختلفين فى كل مرة فهنا بقا بيجي دور المتغيرات ( .parametersالفانكشن بتاخد اكتر من parameters
وممكن متأخدش اصال)
االفضل اننا نسمي الفانكشن بفعل ودا احسن ككلين كودfunction sum(x, y) //
{
;)console.log(x + y
}
sum(5,6); // 11
sum(100,200); // 300
:Returnطب في حالة انى لو مش عايز اخلي يطلعهم فى ال consoleوعايزه يرجعهملي في المكان اللى انا
عملت في callودا ال Returnبقا فهو بيروح للسطر اللى انا ب callفي الفانكشن وبيشيل ال callوبيحط
مكانه نتيجة الخطوات اللى داخل ال scopeمثال لو انا بجمع ما بين 2متغير فهو هيحطلي النتيجة بتاعتهم
وعشان كدا انا الزم استقبل القيمة دي في variableفبالتالى وانا بعمل callللفانكشن بحط ال variableبتاعى
زي المثال التالى كدا طب ليه انا بعمل كدا.
{)function getSum(num1, num2
بقوله رجعلي كذا كذاreturn num1 + num2 //
}
;)var total = getSum(5,5
;)console.log(total
طب انا ليه بعمل كدا عشان انا بعد كدا هستخدمها وهعمل عليها operationزي مثال لو انا عايز اقوله لو
الراجل دا اشتري حاجات اكبر من 10االف يبقا الراجل دا له خصم زي المثال التالي كدا
{)function getSum(num1, num2
return num1 + num2
:Local Scopeوهي اني لو عندى functionومستخدم بداخلها variableمقدرش استخدمه خارج ال scopeبتاع
الفانكشن دي ابدا النه هو كدا local scopeخاص بالفانكشن دي فقط واقدر استخدمه فى اي مكان داخلها فقط.
Hoisting
معناه رفع كل ال declarationsاللى عندى في الكود واللى بيقوم بالدور دا هو ال browserفهو بيرفع كل ال
declarationsفى اول الكود وبعد ما بيخلص رفع بيروح يرن الكود بتاعى وبيرن كل حاجة فى مكانها كل حاجة فى
مرحلة ال assignبتاعتها مثال
console.log(x); // undefined
;"var x = "Ahmed
فى الكود السابق الناتج undefinedالنه راح عمل hostingفخد ال ; var xوحطها فوق في بداية الكود وبعد كدا عمل
logفبالتالى ال xلسه فاضية وبعد ال logهيعمل assignلل xفي مكانها فى السطر بتاعها بالقيمة بتاعتها ولو قولتله
logتانى الناتج هيكون احمد
]var x; // declaration [hoisting
console.log(x); // undefined
x = "Ahmed"; // assign
console.log(x); // Ahmed
وال hoistingمع ال functionsال declarationsبيتم داخل الفانكشن وليس فى بداية الكود
{ )(function welcome
;)console.log(y
;"var y = "Ali
}
welcome() // undefined
النه هيعمل دكلريشن على مستوي االسكوب بتاع الفانكشن فهو بيعمل الكود بالشكل التالى كدا
{ )(function welcome
;var y
;)console.log(y
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
;"y = "Ali
}
expression Statement Function
عندى طريقتين لكتابة ال functionوهما ال statement function or declaration function, expression
function
)(return bar
};function bar() {return 3
};var bar = function() {return 8
}
self invoke
ومعناها ان الفانكشن بتنادي نفسها وبستخدمها فى حالة انى لو عايز الفانكشن تشتغل اول ما اعمل ريفريش ,وخد بالك ان
السيلف انفوك بيحصلها callمرة واحدة فقط فبالتالى مش هحتاج اديها اسم النى مش هنديها تانى وطريقة كتابتها بالشكل
دا
{)((function
;)"console.log("Ahmed
)()}
طيب امتا استخدمها او استخدمها فى ايه وايه فائدتها؟
لو انا عندي مجموعة من الفاريبول عايزهم يكونو الى حد ما موجودين داخل االسكوب دا ومحدش برا االسكوب دا يعمل
عليه تعديل
بمعني اننا بنستخدمها عشان نلوكل الفاريبول بس كدا.
طيب ال self-invokeبيحصلها hostingوال ال ؟
مش بيحصلها هوستنج الن انا مش بعملها callقبليها او بعديها النها بترن لوحدها وهى تبع عائلة ال expression
function
// in html
> "<input id="input1" class="form-control mb-3" type="text
>"<input id="input2" class="form-control mb-3" type="text
>""=<input id="input3" class="form-control mb-3" type="text" name="input3" value
><button onclick="run()" class="btn btn-success">click</button
// in js
{)(function run
var userEmail = document.getElementById("input1").value; // [email protected]
var locationAt = userEmail.indexOf("@"); // to get @ location
var cutNameOnly = userEmail.substring(0,locationAt) // to cut name from email
document.getElementById("input2").value = cutNameOnly; // to add value in input2
var cutDomain = userEmail.substring(locationAt +1) // to cut Domain from email
document.getElementById("input3").value = cutDomain; // to add value in input3
}
Object
هو نوع من البيانات اللي بيسمح لك تخزن بيانات على شكل مفتاح وقيمة (key-value pairs).يعني كأنك عندك قاموس
وكل كلمة ليها معنى معين.
المميزات الرئيسية لألوبجكت فيJavaScript:
.1مفاتيح وقيم :كل حاجة جوه األوبجكت بتكون عبارة عن مفتاح وقيمة .المفتاح بيكون اسم الحاجة والقيمة بتكون
الحاجة نفسها.
.2ديناميكية :تقدر تضيف أو تشيل مفاتيح وقيم في أي وقت .وكمان اقدر امسح العنصر كله مرة واحدة بدل ما امسح
بروبرتي بروبرتي
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
.3تخزين أي نوع من البيانات :األوبجكت ممكن يخزن أرقام ،نصوص ،مصفوفات ،وأوبجكتات تانية.
يعني بإختصار األوبجكت بيساعدك تخزن بيانات مترتبة ومنظمة بحيث تكون سهل الوصول والتعامل معاها .زي ما
يكون عندك كراسة وكل صفحة فيها معلومات عن حاجة معينة بعناوين وأوصاف .وفيدته لو انا عايز اجمع اكتر من
معلومة لنفس الشخص (موظف) او لنفس الحاجة (عربية).
مثال:
تخيل إنك عاوز تخزن بيانات عن عربية .األوبجكت بيساعدك تعمل ده بطريقة منظمة.
إنشاء أوبجكت //
{ = var car
make: "Toyota",
model: "Corolla",
year: 2020,
color: "red",
cChild : {cModel: "Corolla S16", cYear:2024, cColor: "Blue"},// child object
calcPrice: function(){console.log("hello Ahmed")}// use function or method in object
;}
الوصول إلى قيم األوبجكت //
: Toyotaالناتج console.log(car.make); //
: Corollaالناتج console.log(car["model"]); //
console.log(car.cChild.cModel); // Corolla S16
car.calcPrice() // hello ahmed
إضافة مفتاح وقيمة جديدين //
;"car.owner = "Ahmed
: Ahmedالناتج console.log(car.owner); //
االوبجكت مهم جدا جدا جدا للجافا سكريبت :النه االساس او البنية التحتية بتاعت الجافا سكريبت النها مبنية عليه
مثال )( window.alertفهنا الويندو عبارة عن اوبجكت وااللرت عبارة عن بروبرتي والويندو بيمثل ال browserوهو
اعم واشمل من ال document
مثال document.getElementById("") 2ايضا الدوكيمنت عبارة عن اوبجكت والجيت عبارة عن بروبرتي
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
والدوكيمنت بيمسك ال htmlكود.
وبما يرضي هللا ف ال windowهو اكبر اوبجكت عندى فى الجافا سكريبت الن المفروض اكتب كدا
window.document.getElement..او
)( Window.console.logطيب انا ليه فى العادي مش بكتب windowالن ال browserفي الباك جراوند بيكلمها
وبيكتبها النه االوبجكت االكبر
فالجافا سكريبت كلها ماشية كدا ودا الكووور بتاعها يا صديقي.
Array
هي طريقة لتخزين مجموعة من القيم في متغير واحد .يعني بدل ما يكون عندك متغير لكل قيمة ،المصفوفة بتسمح لك
تحط كل القيم دي في مكان واحد وتتعامل معاها بسهولة .زي كده لما تكون كاتب حاجات عاوز تشتريها في ورقة ،تقدر
تخزنها كلها في مصفوفة .والداتا تايب بتاعته objectيعنى شئ.
وفى العادة بنستخدمه فى حالة انى لو عايز اعمل listاو قائمة من حاجة.
المميزات الرئيسية للمصفوفات فيJavaScript:
.1تخزين قيم متعددة :تقدر تخزن أرقام ،نصوص ،أو حتى كائنات ومصفوفات تانية جواها .الن ال JSهي
loosely datatype
.2الفهرسة تبدأ من الصفر :أول عنصر في المصفوفة بيكون عند الرقم ،0والتاني عند ،1وهكذا.
.3ديناميكية :المصفوفة ممكن تكبر وتزيد عليها عناصر ،أو تصغر وتشيل منها عناصر.
.4الطرق المدمجة : JavaScriptفيها طرق جاهزة للتعامل مع المصفوفات زي pushاللي بتضيف عنصر في
اآلخر ،و popاللي بتشل آخر عنصر ،و shiftاللي بتشل أول عنصر ،و unshiftاللي بتضيف عنصر في
األول ،وغيرها كتير.
يعني باختصار ،المصفوفة بتخليك تجمع حاجات كتير في مكان واحد وتتعامل معاها بسهولة .مثال
Arrayإنشاء //
;]"var fruits = ["Apple", "Banana", "Cherry
تشغيل زرار اضافة المنتج عن طريق عمل اوبجكت لتخزين مدخالت المنتج واضافتهم فى اراي //
{ )(function addProduct
// 1- create object to recive data from inputs
{ = var oneProduct
pName : inputName.value,
pPrice : inputPrice.value,
pcategory : inputCategory.value,
pdescription : inputDescription.value,
}
//2- push --> Array
temp.push(oneProduct); // to add data to array
console.log(oneProduct); // to test result
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
console.log(temp); // to test result
// 3- Set Items in Local Storage
// استخدمت جيسون استرنج فاي عشان احول الداتا من اوبجكت ل استرينج الن الداتا عندي عبارة عن اوبجكت وهو
مبيقبلش غير استرنج
localStorage.setItem("productList", JSON.stringify(temp))
// 4- call Display
displayproduct(); // to call function display data
// 5- call Clear
clearInputs(); // to clear inputs
}
Search input in CRUD Application
التاج بتاع السيرش وبعد كدا هنعمل فانكشن السيرش في الجافا سكريبتhtml تكملة على الكود السابق هيتم اضافة فى ال
بالشكل دا كدا
<! -- In HTML - Search to product-->
<div class="d-flex justify-content-center mb-4">
<div>
<!-- فاليو عشان زس بتشاور على الحاجة اللى هي فيها ف هيشاورلي على الفاليو اللى ف االنبوت دا. قولتله زس--
>
<input onkeyup="searchByName(this.value)" class="form-control" type="text" name=""
id="" placeholder="Search Product Name">
</div>
</div>
// In JavaScript create function to Search data in table
function searchByName(userWord) {
var allRwoData = "";
for(var i = 0; i < temp.length; i++){
if(temp[i].pName.toLowerCase().includes(userWord.toLowerCase())){
allRwoData += `
<tr>
<td> ${temp[i].pName} </td>
<td> ${temp[i].pPrice} </td>
<td> ${temp[i].pcategory} </td>
<td> ${temp[i].pdescription} </td>
<td> ${temp[i].pName} </td>
<td> ${temp[i].pName} </td>
</tr>`
}
}
addProductRow.innerHTML = allRwoData;
}
Delete Button in CRUD Application
اول حاجة نفكر احنا عايزين نعمل اي احنا عايزين الزرار الموجود فى كل صف يشتغل معنى كدا ان الفانكشن بتاعت ال
هناك في الزرار وهسأل نفسي سؤال ازاي امسك الصف دا اقدر امسك الصف عنcall اللى هعملها هعملهاdelete
3 وبعد كدا هعمل الفانكشن وهي بتنفذdelete في الفانكشن بتاعت الparameter بتاعه وهحطه كindex طريق ال
مثال.storage بعد كدا تعمل حفظ فيdisplay بعد كدا تعملproduct خطوات اول خطوة تمسح ال
// In function display add button and add event on click to call delete function
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
function displayproduct() {
var allRwoData = "";
for (var i = 0; i < temp.length; i++) {
allRwoData += `
<tr>
<td> ${temp[i].pName} </td>
<td> ${temp[i].pPrice} </td>
<td> ${temp[i].pcategory} </td>
<td> ${temp[i].pdescription} </td>
<td> <button onclick="updateProduct(${i})" class="btn btn-
warning">update</button> </td>
<td>
<button onclick="deleteProduct(${i})" class="btn btn-danger">Delete</button>
</td>
</tr>`
}
addProductRow.innerHTML = allRwoData;
}
:**)` (النقطة.`** .1
. بتمثل أي حرف واحد مهما كان-
."bat" " أوcat" " زيa" التاني فيهم،` هيدور على أي حاجة فيها حرفين/a./` : مثال-
:**)الكاريهت
ِ **`^` (عالمة.2
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
-بتمثل بداية السطر.
-مثال `/a^/` :هيدور على النصوص اللي بتبدأ بحرف "."a
دي الرموز األساسية اللي هتحتاجها عشان تكتب وتفهم الـ regexفي الجافاسكريبت .وتعال نجرب
بنكتب الرجولر اكسبريشن بتاعى ما بين 2سالشvar regex = /^(002)?(01)[0-25][0-9]{8}$/ //
دا فاريبول شايل الداتا اللى هتشك عليها var userPhone = "011550235286"; //
تيست هي بالت ان فانكشن خاصة بالرجولر اكسبريشن if(regex.test(userPhone)){ //
;)"console.log("Match
};)"}else{console.log("Not Match
طيب تعال نطبق على ال CRUDبتاعى على فيلد ال product Nameعايز اقوله انه الزم يبدأ بحرف كابتل وميزدش
عن 10حروف وميقلش عن 3ف اول حاجة بعمل االكسبريشن بتاعى فوق وبعد كدا جوا فانكشن االدد برودكت بحط if
conditionولو ترو هينفذ كل حاجة جوا الفانكشن لو فولس يطلع رسالة
;var currentIndex
هنا االكسبريشن بتاعىvar regex = /^[A-Z][a-z0-9A-Z]{3,10}$/ //
;var temp
} ][ = if (localStorage.getItem("productList") == null) { temp
{else
))"temp = JSON.parse(localStorage.getItem("productList
;)(displayproduct
}
{ )(function addProduct
هنا الكونديشن بتاعى وبداخله كل حاجة الفانكشن بتعملها if(regex.test(inputName.value)){ //
{ = var oneProduct
pName : inputName.value,
pPrice : inputPrice.value,
pCategory : inputCategory.value,
pDescription : inputDescription.value
}
)temp.push(oneProduct
;)console.log(temp
;)(displayproduct
;)(clearInput
))localStorage.setItem("productList", JSON.stringify(temp
هنا الرسالة اللى هتطلع فى حالة عدم تحقيق الشرط} else{ alert("Please inter valid Name") } //
}
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
}DOM in JavaScript (Document object model
تعال نترجمها بالعربي شكل االوبجكت فى الجافا سكريبت الدوكيومنت هو االتش تي ام ال
هو ان الجافا سكريبت بتقدر تتعمل مع ال HTML Codeعلي شكل Objectومثال على دا
;document.getElementById("demo").innerHTML
وتعريف اخر لل DOM
الـ ) DOM (Document Object Modelفي الجافاسكريبت هو الطريقة اللي بيستخدمها المتصفح علشان يفهم ويبني
الصفحة اللي بتظهر لك .يعني لما بتفتح أي صفحة ويب ،المتصفح بيحول الـ HTMLاللي مكتوب فيها لشكل شجرة
( )Treeفيها كل العناصر زي الـ divsوالـ spansوكل الحاجات اللي في الصفحة .الطريقة دي بتخليك تقدر توصل ألي
عنصر في الصفحة وتعدل فيه بسهوله باستخدام الجافاسكريبت .فمثالً ،لو عايز تغير نص جوه زرار ،هتستخدم الـ DOM
علشان توصل للزرار وتعدل النص بتاعه.
في اي تاسك الزم احدد 3حاجات والزم الزم بالترتيب:
1- Element 2- Event 3- Action
:Element -1ازاي امسك التاج او ايه االليمنت اللى هشتغل عليه
:Event -2ايه االيفينت اللى انا عايز اعمله
:Action -3ايه االكشن اللى عايز تعمله
Element -1اول حاجة تعال نشرح اي الطرق اللى اقدر امسك بيها ال Elementبتاعى وعندي 6طرق وهما
// in HTML
><h1 id="demo">1. Lorem ipsum dolor sit amet.</h1
><h1>Lorem ipsum dolor sit amet.</h1
><h1 class="test">Lorem ipsum dolor sit amet.</h1
><h1 class="test">Lorem ipsum dolor sit amet.</h1
>"<div class="perant
><h1>Lorem ipsum dolor sit amet.</h1
><h1>Lorem ipsum dolor sit amet.</h1
><h1>Lorem ipsum dolor sit amet.</h1
></div
><h1 id="demo">2. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus</h1
>"<input type="checkbox" name="gender
>"<input type="checkbox" name="gender
IN JAVASCRIPT
بتديله اسم ال اي دي مثال تاج اتش 1وال اي دي 1. document.getElementById("demo").innerHTML; //
بتاعه اسمه ديمو
هيسليكت على اول تاج اللى االي دي بتاعه اسمه ديمو//
// result 1. Lorem ipsum dolor sit amet.
بتديله اسم الكالس بتاع التاج مثال تاج اتش 1والكالس 2. document.getElementsByClassName("test"); //
بتاعه اسمه تيست
HTML Collectionودا بيرجعلي //
النى قولتله جت االيمنتس (ركز مع حرف ال اس) معنى كدا انه ممكن يرجعلي اكثر من عنصر في ليست //
وهنا الليست دي تشبه االراي ولكن مقدرش انفذ عليها االراي ميزودس //
هيسليكت علي كل التاجات اللى الكالس نيم بتاعها اسمه تيست
بتديله التاج اللى عايز تمسكه ودي برضو بترجعلي اتش 3. document.getElementsByTagName("h1"); //
كوليكشن
هيسليكت على كل التاجات اللى هى اتش // 1
بتديله النيم بتاع االنبوت مثال واحنا عارفين ان النيم بيكون 4. document.getElementsByName("gender"); //
يونيك ولكن ممكن استخدمه مع االتشك بوكس مثال
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
وهي تشبه االراي برضو NodeListودي بترجعلي //
هيسليكت على كل تاجات االنبوت اللى انيم بتاعها جندر//
بتديله السليكتور بتاعك اكنك بالظبط بتكتب سي اس اس ودي 5. document.querySelector(".perant h1");//
بتمسك عنصر واحد فقط
هيسليكت على اتش 1واحدة فقط //
ودي بتديله السليكتور بتاعك اكنك بالظبط بتكتب سي اس اس 6. document.querySelectorAll(".perant h1"); //
ودي بتمسك اكثر من عنصر
هيسليكت على كل االتش 1اللى داخل الديف بتاع البيرنت//
ملحوظة الحاجات اللى هي بتكون موجودة مرة واحدة فى ال HTMLزي ال body, head,htmlومش بتتكر ممكن
انادي عليها كدا document.body
Events -2تاني حاجة تعال نتكلم ازاي نتعامل مع االيفنت واي انواع ال Eventsاللى عندي
.1ازاى اتعامل مع ال :Event
اول ما اتعلمنا اتعلمنا ازاي نعمل ايفينت عن طريق ال onclickاللى بنضفها فى التاج فى ال HTMLولكن دا
مش افضل حاجة الن لو انا عندي كذا تاج وعايزهم يعملو نفس االيفينت ف انا كدا هكرر ال Onclickفي كل ال
tagsدي ودا سبب وفي سبب تاني وهو اني بكتب JSفي HTMLودا مش افضل حاجة وبالتالى هروح امسك
التاج او ال Tagsواعمل عليها االيفينت عن طريق addEventListener Function
ودي فانكشن بتحط ودنها على التاج او ال Tagsوبتاخد مني 2براميتر وهما Call Back .2 Event type .1
Functionيال بينا نطبق
;)"var myH1 = document.getElementById("demo
)};)"myH1.addEventListener("click", function(){ alert("welcome
وال اد ايفينت ليسنار يتتم على عنصر واحد فقط ولو انا عايز اطبقها ع اكثر من عنصر هحتاج استخدم فور عشان الف //
على كل عنصر وانفذ عليه مثال
;)"var myH1 = document.querySelectorAll("h1
{)for(var i=0; i < myH1.length; i++
)};)"myH1[i].addEventListener("click" , function(){ alert("welcome
وبالتالى كدا االيفينت هيشتغل على اي اتش وان موجود فى الكود بتاعى } //
طيب انا ليه بحط الفانكشن بدون اسم او بعمل callلفانكشن معينة في البراميتر التاني بتاع ال
addEventListenerلكذا سبب وهما ان الفانكشن دي بتكون مخصصة وهتتطبق مع االيفنت فقط ومينفعش
احط call functionالن الفانكشن بتفاير لوحدها لما حاجة معينة بتحصل قبليها ف انا بقوله لما تعمل كلك فاير
الفانكشن والن البراميتر محتاج مني call back functionوهو عبارة عن جسم الفانكشن البادي بتاع الفانكشن
ولو انا قررت وعايز اعمل الفانكشن منفصلة واانادي عليها فى البراميتر هضيف اسم الفانكشن فقط بدون () ودا
بسبب االسباب اللى قولناها
;)"var myH1 = document.getElementById("demo
)myH1.addEventListener("click", hamada
};)"function hamada(){ alert("welcome
.2ماهي انواع ال Eventsاللى عندنا
في الجافا سكريبت ،الـــ " "Eventsأو األحداث هي الحاجات اللي بتحصل في الصفحة زي ما المستخدم
يتفاعل معاها .يعني مثالً لما تضغط على زرار ،أو تكتب حاجة في ، inputأو حتى لما الصفحة تخلص تحميل.
كل ده بيتسمى "Event".فيه أنواع كتير من األحداث ،وده شرح لبعضها:
1. Mouse Events:
.بيحصل لما تضغط على عنصر معين بالماوس o click:
.بيحصل لما تضغط مرتين بسرعة على عنصر o dblclick:
بيحصل لما الماوس يعدي فوق عنصر معين وبيتنفذ على العنصر وعلى اي حاجة داخل o mouseover:
.العنصر
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
o.بيحصل لما الماوس يخرج من فوق عنصر معين mouseout:
.بيحصل لما تضغط على زر الماوس وانت لسه ضاغط عليه o mousedown:
.بيحصل لما تسيب زر الماوس بعد ما كنت ضاغط عليه o mouseup:
2. Keyboard Events:
بيحصل لما تضغط على زرار في الكيبورد وانت لسه ضاغط عليه وشغالة مع اي زرار o keydown:
.فى الكيبورد مثل زرار التاب
.بيحصل لما تسيب زرار الكيبورد بعد ما كنت ضاغط عليه o keyup:
بيحصل لما تضغط على زرار في الكيبورد ويتسجل الحرف اللي كتبته وشغالة مع حروف o keypress:
.الكيبورد واالرقام
3. Form Events:
.بيحصل لما تبعت الفورم o submit:
select.أو inputبيحصل لما تغير قيمة في o change:
.ياخد الفوكس textareaأو inputبيحصل لما o focus:
.يفقد الفوكس textareaأو inputبيحصل لما o blur:
4. Window Events:
.بيحصل لما الصفحة تخلص تحميل بالكامل o load:
.بيحصل لما تغير حجم النافذة بتاعة المتصفح o resize:
.بيحصل لما تعمل سكرول في الصفحة o scroll:
.بيحصل لما الصفحة تقفل أو تنتقل لصفحة تانية o unload:
5. Touch Events:
.بيحصل لما تلمس الشاشة o touchstart:
.بيحصل لما تحرك صباعك على الشاشة o touchmove:
.بيحصل لما ترفع صباعك عن الشاشة o touchend:
.كل األحداث دي بتساعدك تتفاعل مع المستخدمين وتخلي الويب سايت بتاعك أكتر ديناميكية وتفاعل
مثال :
//in HTML
>""=<img src="images/mango.jpg" alt="" srcset
// In CSS
{img
;width: 50px
;position: absolute
;top: 0px
;left: 0px
}
// In Javascript
{ )document.body.addEventListener("mousemove", function (e
;"document.querySelector("img").style.left = e.clientX + "px
;"document.querySelector("img").style.top = e.clientY + "px
)}
Math
بتوفر مجموعة من الفانكشنز اللي بتساعدك تعمل حسابات رياضية بسهولة .هنا شوية ،Mathمكتبة الـ JavaScriptفي
:من أشهر الفانكشنز اللي بتستخدمها كتير
1. Math.round():
.دي بتعمل تقريب للرقم ألقرب عدد صحيح .يعني لو الرقم ،4.7هيرجع ،5ولو 4.2هيرجع o 4
هيرجع Math.round(4.7); // 5
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
2. Math.ceil():
.دي بتعمل تقريب للرقم لفوق ألقرب عدد صحيح .يعني حتى لو الرقم ،4.1هيرجع o 5
هيرجع Math.ceil(4.1); // 5
3. Math.floor():
o ،.دي بتعمل تقريب للرقم لتحت ألقرب عدد صحيح .يعني لو الرقم ،4.9هيرجع ceil()4عكس
هيرجع Math.floor(4.9); // 4
4. Math.max():
.دي بتاخد مجموعة من األرقام وترجع أكبر رقم فيهم o
هيرجع Math.max(10, 20, 30); // 30
5. Math.min():
o ،.بس دي بترجع أقل رقم فيهم)(maxزي
هيرجع Math.min(10, 20, 30); // 10
6. Math.random():
.دي بتجيبلك رقم عشوايي بين 0و .1ممكن تستخدمها لو عاوز تعمل حاجة عشواية زي توليد رقم سري o
ممكن يرجع حاجة زي Math.random(); // 0.456789
7. Math.sqrt():
.دي بتجيب الجذر التربيعي للرقم .يعني لو دخلت ،16هترجع o 4
هيرجع Math.sqrt(16); // 4
8. Math.pow():
o pow.دي بتستخدم لرفع الرقم لقوة معينة .يعني لو عاوز ترفع 2للقوة ،3هتستخدم
هيرجع Math.pow(2, 3); // 8
9. Math.abs():
.دي بتجيب القيمة المطلقة للرقم ،يعني بتشيل السالب لو الرقم سالب o
هيرجع Math.abs(-5); // 5
10.Math.PI:
دي مش فانكشن بس قيمة ثابتة في مكتبة ،Mathوبتكون قيمة (πباي) اللي هي ،...3.14159ودي o
مفيدة لو بتشتغل بحاجة ليها عالقة بالدوائر.
دول بعض من الفانكشنز اللي هتستخدمهم كتير في البرمجة لما تكون شغال على حسابات رياضية .مثال
;]"var frinds = ["ahmed", "ali", "hager", "bassant
) var randomFrinds = Math.ceil( Math.random() * 4
;)console.log( frinds[randomFrinds], ">> index number = " + randomFrinds
Model EX
ف الـ APIتقدر تتعمل مع ال Web, Android, IOS, Desktopوهنا تكمن اهمية ال APIالن كل حاجة من دول
ليها نوع معين من الداتا بيز بيتعامل معاها ف لو انا عندي ابلكيشن من كل االنواع دي ل امازون مثال ف انا مش هروح
اعمل 4داتا بيز فالصح انى اعمل APIواكلم بيها االنواع دي .والشخص المسئول عن عمل ال APIهو ال
Backendفهو بيعمل الداتا بيز وبيحولها ل JSON Dataفهي اي بالتفورم في الدنيا بيعرف يتعامل معاه وعشان
ااكسس ال JSON Dataدي فالراجل بتاع الباك اند بيخرجلي لينك URLبيحتوي على الداتا وانا كفرونت اند ببدأ
اتعامل معاه .شرح علمي من ChatGPT
الـ ) API (Application Programming Interfaceفي البرمجة هو زي كبري أو وصلة بتربط بين برنامجين
أو أكتر عشان يتبادلوا بيانات أو خدمات مع بعض .بمعنى تاني ،الـ APIهو مجموعة من األوامر والقواعد اللي بتحدد
إزاي برنامج معين يتفاعل مع برنامج تاني أو خدمة معينة.
لما بتيجي تشتغل بالـ JavaScriptوتستخدم ، APIبتقدر تبعت طلب ) (Requestلمصدر خارجي زي سيرفر
)(Serverأو خدمة أونالين ،وتستقبل الرد ) (Responseاللي ممكن يكون بيانات في صورة ، JSONأو ، XMLأو
حتى نص عادي .وبعدين تقدر تستخدم البيانات دي في تطبيقك زي ما تحب.
فاكر لما بتفتح موبايلك وبتالقي التطبيق بتاع الطقس بيجيب لك درجات الحرارة من اإلنترنت؟ ده بيكون عن طريق
استخدام APIعشان يجيب البيانات دي من سيرفر خارجي .وبرضو لما بتشوف خريطة في تطبيق معين ،غالبًا بيكون
شغال بالـ APIبتاعGoogle Maps.
في الـ ، JavaScriptالتعامل مع الـ APIsبيتم باستخدام حاجات زي )( fetchأو ، axiosواللي بيس ههل عليك عملية
إرسال واستقبال البيانات من وإلى الـAPI.
ببساطة ،الـ APIبيس ههل علينا كتير في إننا نوصل لمصادر خارجية ونتفاعل معاها في تطبيقاتنا ،وده اللي بيخلي
التطبيقات بتاعتنا أكتر قوة ومرونة.
{)(myHttp.addEventListener("readystatechange", function
console.log(myHttp.readyState); // 2 3 4
{)if(myHttp.readyState == 4
;)console.log(myHttp.response
}
}
تعال نشرح الـConnection Methods
وهي طريقة التعامل مع ال URLواللى بيحددهالى ال backendفهو بيقولي مع ال URLدا استخدم معاه ال
Methodدي.
دى بستخدمها لو انا رايح اجيب داتا من ال يو ار ال عشان استخدمها 1. GET
دى بستخدمها لو انا رايح اديله داتا زي مثال الفيسبوك وانا رايحله بديله اليوزر والباسورد 2. POST
دي بستخدمها لو انا رايح اعمل ايديت او تعديل علي ال يو ار ال بتاعى 3. PUT
دي بستخدمها لو انا رايح اعمل ايديت او تعديل علي ال يو ار ال بتاعى هنشرح بعدين الفرق ما بينهم 4. Patch
دي بستخدمها لو انا عايز امسح حاجة من اليو ار ال 5. Delete
تعال نشرح الـMyHttp.status
وهي propertyبتراقب حالة ال URLاللى بستخدمه والتالى هم اشهر الحاالت واللى انا محتاجها
معناه ان مفيش اي اتصال خالص 1. myHttp.status = 200 // OK
معناه ان اللينك غلط 2. myHttp.status = 404 // Error / Page not found
معناه ان ممنوع انك تدخل على اللينك دا 3. myHttp.status = 405 // forbidden
فعشان كدا الزم اراقب ال statusمعايا عشان يجبلي الداتا ودي بتكون زيادة تأكيد الن ال readystateلو ب 4دا معناه
ان اللينك شغال والدنيا فل.
{)(myHttp.addEventListener("readystatechange", function
{)if(myHttp.readyState == 4 && myHttp.status == 200
;)console.log(myHttp.response
}
)}
في خطوة بسيطة بس بزودها عشان الداتا اللى رجعالى من ال responseبتكون من النوع stringوعشان نتأكد نحطها
في )( typeofونشوف.
{)(myHttp.addEventListener("readystatechange", function
{)if(myHttp.readyState == 4 && myHttp.status == 200
console.log(typeof(myHttp.response)); // string
}
)}
فبالتالى محتاج احولها ل objectوانا بحول من stringل objectعن طريق ) JSON.parse(ally 3ayz t7oloودا
بيتم بالطريقة التالية.
عملته جلوبال عشان اقدر اعمل فور لوب على الداتا بتاعتى لما اجي اعرضها var myData; //
{)(myHttp.addEventListener("readystatechange", function
{)if(myHttp.readyState == 4 && myHttp.status == 200
)var myData = JSON.parse(myHttp.response
;)console.log(myData
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
}
})
احنا كدا شرحنا وفهمنا والحمدهلل الخطوات كلها وزي الفل هضيف الكود بس بدون اي لوج واي شرح عشان يكون واضح
وجميل
var myData;
myHttp.open("GET","https://jsonplaceholder.typicode.com/posts");
myHttp.send();
myHttp.addEventListener("readystatechange", function(){
if(myHttp.readyState == 4 && myHttp.status == 200){
myData = JSON.parse(myHttp.response)
console.log(myData);
}
})
الجافا سكريبت عملتلنا حاجة2019 دا الكود وهيرجعلي الجيسون داتا وزي الفل ولكن احنا هنغير كل دا بعد كدا الن فى
هنعرفها بعدينfetch حلوة اسمها
وهو اختصارAJAX العملية اللى شرحناه فوق دي كلها تندرج تحت مفهوم او مصطلح او تكنيك اسمه
Asynchronous JavaScript And XMLل
. للويب سايت بتاعىrefresh انه بيروح يجبلي داتا وبيرجع من غير ما يعملAJAX من اهم مميزات ال:ملحوظة
تعال بقا نعرض الداتا دي بقا ونستخدمها والحركات بتاعتنا
<!—in HTML -->
<div class="container mb-5">
<div id="displayData" class="row row-cols-1 row-cols-md-4 g-4">
</div>
</div>
// in JavaScript
var myData;
var myHttp = new XMLHttpRequest();
myHttp.open("GET","https://jsonplaceholder.typicode.com/posts");
myHttp.send();
myHttp.addEventListener("readystatechange", function(){
if(myHttp.readyState == 4 && myHttp.status == 200){
myData = JSON.parse(myHttp.response)
console.log(myData);
displayData(); // هعمل كول للفانكشن هنا عشان اقوله بعد ما تجيب الداتا اعرضهالى
}
})
// هعمل فانكشن تعمل لووب على الجيسون فايل بتاعى عشان اعرض الداتا
function displayData(){
var tempData = '';
for(var i = 0; i < myData.length; i++){
tempData += `
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">${myData[i].title}</h5>
<p class="card-text">${myData[i].body}</p>
</div>
</div>
</div>
`
}
document.getElementById("displayData").innerHTML = tempData;
}
تعال ناخد. ولو مش عارفه اعمل عنه سيرش بسيط جدا جداGo Live Server متنساش تشغل الويب بتاعك باستخدام
مثال اخر
var myData1
var myD = new XMLHttpRequest();
// خد بالك انا ضفت كي في اللينك اللى انا جبته بتاع االخبار ففي اي بي اي بتحتاج انك تضيف ليها كي عشان تشتغل
myD.open("GET" , "https://newsapi.org/v2/top-
headlines?country=eg&category=sports&apiKey=f39595da4c814512baa958b302035021");
myD.send();
myD.addEventListener("readystatechange", function(){
if(myD.readyState == 4 && myD.status == 200){
myData1 = JSON.parse(myD.response).articles
console.log("Hello " + myData1);
DData();
}
})
function DData(){
var BoxData='';
for(var i = 0; i < myData1.length; i++){
BoxData +=`
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">${myData1[i].author}</h5>
<p class="card-text">${myData1[i].title}</p>
</div>
</div>
</div>
`
}
document.getElementById("displayNEWSData").innerHTML = BoxData;
}
هيجبلك لينكاتfree apis واجرب مشاريع والكالم دا وكمان ممكن تكتب في السيرشAPIS لينكات اقدر اجيب منها
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
كتيرة
/https://jsonplaceholder.typicode.com
/https://newsapi.org
/https://any-api.com
دا عظيم جدا جدا جداhttps://github.com/public-apis/public-apis
.Meals وجميل جدا عن الAPI تعال نجرب مثال تاني على ال
<!-- in HTML -->
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Dessert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Seafood</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Display Data in Row -->
<div class="container mb-5">
<div id="displayNEWSData" class="row row-cols-1 row-cols-md-4 g-4">
</div>
</div>
// IN JAVASCRIPT
var myData1
function getData(category) { // لميت خطوات االيجكس في فانكشن عشان اقدر اكول الداتا وقت منا عايز
var myD = new XMLHttpRequest();
// طالما اللينك عندي ثابت والكاتيجوري هو اللى متغير ف هقصه بالشكل دا واحطه كمتغير ف الفانكشن
myD.open("GET", `https://www.themealdb.com/api/json/v1/1/filter.php?c=${category}`);
myD.send();
myD.addEventListener("readystatechange", function () {
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
if (myD.readyState == 4 && myD.status == 200) {
myData1 = JSON.parse(myD.response).meals
console.log("Hello " + myData1);
DData();
}
})
}
function DData() {
var BoxData = '';
for (var i = 0; i < myData1.length; i++) {
BoxData += `
<div class="col">
<div class="card h-100">
<div class="card-body">
<p class="card-text">${myData1[i].idMeal}</p>
<img src="${myData1[i].strMealThumb}" class="card-img-top" alt="...">
<h5 class="card-title">${myData1[i].strMeal}</h5>
</div>
</div>
</div>
`
}
document.getElementById("displayNEWSData").innerHTML = BoxData;
}
getData("Dessert")
// انا عندي ناف بار وعايز كل ما ادوس علي لينك منهم يعرضلي كاتوجري معين
var allLinks = document.querySelectorAll("nav .nav-link"); // 6 links
ES6+
Compare between var, let, const
لتحسين البرفورمنسES6 انما بدأ يحصل تغيير جذري بعدES6 لما كنا بنشرح قبل كدا اي حاجة استخدمناها كانت قبل
. دي شوال وهنطلع منه صفة صفة منه ونشرحES6 وحل مشاكل معينة فتعالى نتخيل ان
ES6 فتعالى نحط مشكلة ونقول حلها ازاي ب
فاول مشكلة هي
console.log(x);
var x = "ahmed";
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
لو انا جيت عملت كدا الكود هيشتغل عادي وهيرن والناتج هيكون undefinedبسبب ال hostingفهو بيعمل دكلريشن
فقط بدون الفاليو فهو معندوش مشكلة انه يطلعلك ناتج لحاجة قبل ما تعرفها وتعملها initializationودا مينفعش ومش
صح اني استخدم حاجة بدون فاليو.
تانى مشكلة هى
لما كنت بعمل فانكشن وبداخلها متغير varوكان ميزة تعريف الفاريبول جوا الفانكشن كان انه كان لوكال على مستوي
سكوب الفانكشن فالبروزر بيتعامل مع المتغيرات ال varداخل اسكوب الفانكشن ان الاليف تايم بتاعته شغاله جوا
الفانكشن فقط وبمجرد ما الفانكشن ترن وتخلص فهو بيخلص معاها ( )varفبالتالى لو جيت بعد ما رنيت الفانكشن طبعت
المتغير مش هيتطبع النه مش موجود فى الرامات الن البروزر بيروح يمسح الوكل اسكوب بتاع اي فانكشن عندي ودا
طبيعي وحلو جدا وشغل فاخر من االخر وراقي انما بقا اللى مش طبيعي نوع تانى من االسكوب وهو ال Block Scope
ودا بيتنشأ مع اكتر من حاجة على سبيل المثال ال for loopوال ifواي حاجة ليها اسكوب معادا الفناكشن ...فالكارثة
هنا ان ال life timeبتاع ال varبيفضل شغال معايا طول ما انا فاتح البروزر بتاعى فبيفضل صاحي فى الرامات
وحاجز مساحة حتي بعد ما يرن الكود ويخلص بتاع ال forفتخيل بقا جوا االسكوب بتاع ال forحطين 100متغير ف
دي كارثة وخطر على الرامات عمال بتحشي في الرامات وعشان تتأكد جرب تطبع ال iبتاعت ال forبرا االسكوب
بتاع ال forهتالقي طبع معاك ودا دليل كافي على انه لسه موجود فى الرامات.
// functional Scope
{ )(function test
;"var x = "ahmed
;)console.log(x
}
)(test
الفانكشن قولنا ان هي تمام وزي الفل وجميلة انما المشكلة التانيه تكمن مع االسكوب بتاع الفوور او ال اف (البلوك //
اسكوب عموما)
// Block Scope
{ )for (var i = 0; i < 10; i++
;)"console.log("hii
}
console.log(i); // = 10
جت بقا ES6تحل المشكلتين دول عن طريق استخدام let, constوتعال نشرح كل واحدة منهم
let
Letمعناها بالعربي اجعل او خلي ال اكس بتساوي 10طيب اي المميزات بتاعتها وهي انه بيعترض على ال
initializationفهو بيقولك انك مينفعش تستخدم حاجة غير لما تعملها assignmentفهي بتعترض على كدا
ومبتعترضش علي ال Declarationالن ال letبيحصلها hostingبالشكل دا = let x; console.log(x); x
" "Ahmedودا المقصود بال Declarationاما المقصود بال initializationهو ال "x = "Ahmed
;)console.log(x
let x = "Ahmed"; // = Cannot access 'x' before initialization
يقصد باالنشليزيشن انك قولتله اطبعلي االكس قبل ما تقوله ان االكس دي بتساوي اي عشان يطبعها
اما الميزة الثانيه لل letهي اني مقدرش اعرف متغير تاني انما اقدر اعمل overwriteعادي
;"let x = "ahmed
;"let x = "ahmed
console.log(x); // Identifier 'x' has already been declared
انما اقدر اعمل اوفررايت عادي جدا زي الفار//
;"let x = "ahmed
;"x = "Ali
console.log(x); // = Ali
اما تالت ميزة هي انه حل مشكلة ال block Scopeمع ال forمثال وهي اني مقدرش استخدم ال iخارج االسكوب بتاع
ال forوقيس على دا اي حاجة ليها عالقة بال block scopeواحنا قولنا ان اي حاجة ليها اسكوب فهي block scope
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
معادا الفانكشن.
// Block Scope
{ )for (let i = 0; i < 10; i++
;)"console.log("hii
}
console.log(i); // i is not defined
const
وهي اختصار لحاجة اسمها constantودي معناها بالعربي حاجة ثابتة وهي تؤام لل letف اي حاجة شرحناها فى ال
letفهي غالبا موجودة فى ال constوفكرته وميزته فى اني معرفش اعمل overwriteعلي عكس ال letاقدر عادي
مثال
;"const x = "ahmed
;"x = "Ali
console.log(x); // = Assignment to constant variable
وكمان مينفعش اعمل declarationالن الهدف من ال constهو اني مقدرش اعمل فاريبول واستخدمه تاني.
;const x
;"x = "Ali
console.log(x); // = Missing initializer in const declaration
وقولنا زيها زي ال letفي حل مشكلة ال block scopeوهي اني مقدرش استخدم متغير خارج البلوك اسكوب مثال
{ )for (const i = 0; i < 10; i++
;)"console.log("hii
}
console.log(i); // Assignment to constant variable
{ )if (true
;"const x = "ahmed
}
وكذلك نفس الناتج لو استخدمت اللت مع ال اف console.log(x); // x is not defined //
default Values
تعال نفتح الشوال تانى ونأخد صفة جديدة جميلة وهي بتحل ليا مشكلة ال default valuesللمتغيرات بتاعت ال
functionالن في االول كنت بعمل if condationعشان يحل ليا مشكلة ان لو ال userعمل callللفانكشن من غير ما
يقولي القيمة بتاعت المتغير فالناتج هيكون undefinedفبالتالي كنت بستخدم ifعشان احل المشكلة دي بس لو انا عندي
اكتر من متغير هقعد اكرر ifكتير مثال
{ )function test(name , age
;)`}console.log(`your name is ${name}, your age is ${age
}
test(); // = your name is undefined your age is undefined
فكنت عشان احل المشكلة دي كنت بعمل ifداخل الفانكشن مثال
{ )function test(name , age
{)if(name == undefined
"name = "Ahmed
}
{)if(age == undefined
age = 27
}
;)`}console.log(`your name is ${name}, your age is ${age
}
test(); // = your name is Ahmed your age is 27
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
فتم حل هذه المشكلة بالشكل التالى
function test(name = "Ahmed", age = 25) {
console.log(`your name is ${name}, your age is ${age}`);
}
test(); // = your name is Ahmed your age is 25
اي فى الكود التالي لمين للعمر وال السالري2000 في تركاية كدا جميلة تفتكر هيطبع رقم
function test(name = "Ahmed", age = 25 , salary = 2000) {
console.log(`your name is ${name}, your age is ${age} and your salary is ${salary}`);
}
test("Ali", 2000);
هيطبع للعمر النه تاني متغير علي طول في القيم المدخله للفانكشن وعشان احل المشكلة دي برمي المدخالت للفانكشن
بالشكل دا
function test(name = "Ahmed", age = 25 , salary = 2000) {
console.log(`your name is ${name}, your age is ${age} and your salary is ${salary}`);
}
test("Ali", undefined ,2000); // your name is Ali, your age is 25 and your salary is 2000
template Literal
ودي استخدمناها قبل كدا كتير وهي لو عندى استرينج وعايز اكونكات معاه فاريبول فبعمل باك تك وبباصي الفاريبول
${} عن طريق
let yourName = "Ahmed"
let x = `your name is ${yourName}`
console.log(x);
this
طب امتا استخدمها... ومعناها بالعربي ( دا ) او بتشاور علي حاجةJS هي كيوورد موجودة فى الthis نفتح الشوال ل
.واستخدمها فين
عشانwindow بتاعى وهو الmain object اول مكان عندى بستخدمها فى الطل ودا لو انا عايز اشاور علي ال
الناتج بيكونwindow مش موجودة فى الproperty ولو فيwindow داخل الproperty اقدر ااكسس اي
مثالundefined
console.log(this); // > Window {window: Window, self: Window, document: document,
name: '', location: Location, …}
console.log(this.yourAge); // undefined
window فهنا برضو بتشاور علي الfor او الif تانى مكان عندى هو داخل اسكوب الفانكشن او ال
دا مثالevent اللى بيحصل عليه الelement هتشاور على الthis ساعتهاevent جواthis ولكن لو انا استخدمت
// In HTML
<h1>Lorem ipsum dolor sit amet.</h1>
// In JS
document.querySelector("h1").addEventListener("click", function(){
console.log(this);
}); // <h1>Lorem ipsum dolor sit amet.</h1>
Arrow Function
function test(x){console.log(x)} عندنا طريقتين لكتابة الفانكشن وهما االستيتمنت فانكشن او الدكلريشن فانكشن
عملت نوع جديد اسمه اروES6 فlet welcome = function(x){console.log(x)} و االكسبريشن فانكشن
فانكشن
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
وطريقة كتابتها بالشكل التالى ولها 3قواعد وهما
.1بشيل كلمة functionوبحط >= بعد البراميتر.
.2لو كانت الفانكشن بتاعتى مبتأخدش براميتر خالص بحط االقواس بتاعت البراميتر فاضية () ولو كانت بتأخد
براميتر واحد فقط ينفع احذف القوسين بتوع البراميتر او اسيبهم عادى ولو كانت بتأخد اكتر من براميتر الزم
أحط القوسين بتوع البراميتر.
.3لو ال bodyبتاع الفانكشن بيعمل سطر واحد بس اقدر احذف اقواس المجموعة }{ بتاعت الفانكشن واخليها
على سطر واحد .ولو السطر دا كان عبارة عن كلمة returnالزم أشيل كلمة returnالنها مش بتقبل return
طالما شايل الكيرلي براكتس.
;)"let welcome = () => console.log("hello
;)(welcome
◼ ال JavaScriptزي ما قولنا قبل كدا ان هي تندرج تحت ال .Prototype-basedطيب عندى سؤال بما ان
الجافا سكريبت تندرج تحت البروتوتايب بيز هل ينفع استخدم فيها class-basedف دا ال مينفعش قبل ES6
وبعد ال ES6برضو ال بس هنعرف ليه .وتعال بقا نشوف ازاي نكتب ال Prototype-basedدا.
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
Prototype-based
فكرة Prototype-basedجابوها من لغة برمجة اسمها selfزي ما شرحنا قبل كدا وقولنا ان هما عملو ال JSمن 3
لغات برمجة لما خدو من ال JAVAال syntaxومن ال schemeال conceptبتاع ال object first-class a in
functionومن ال selfخد ال .OOP Prototype basedطيب هو ليه راح لالتجاه دا ومخدش ال classالنهم شافو
انها كـبيرفورمنس احسن واسرع وكطريقة كتابة أسهل وعشان اعمل prototype-basedنعمل كدا.
اول حاجة بعمل النموذج المبدائي بتاعي وبيكون عبارة عن اوبجكت عادي جدا
{ = let s1
name: "Ahmed",
Age: 27,
};)"AttLec(){console.log("hi from AttLec
}
وبعد كدا بأخد منه نسخة ودا بيكون عن طريق عندنا فى ال built in object JSاسمها objectجواها built in
methodاسمها createوبتكون بالشكل دا )( object.createودي من خاللها بقدر اخد نسخة منه.
;)let s2 = Object.create(s1
;)console.log(s2
وهنا كدا هيطبعلي اوبجكت فاضي وهتالقي في بروتوتايب دوس ع السهم الصغير وافتحه هتالقى خصائص االس.1
ولو انا عايز اطبع حاجة من خصائص ال s1هقوله كدا بالشكل التالى فهو هيروح على البروتوتايب اللى شايلها ويجيب
بروبرتي العمر
هنا هو هيروح على البروتوتايب اللى االس 2شايلها ويشوف بروبرتي العمر اللى هو console.log(s2.Age); //
شايلها ويطبعهالى 27
طيب لو انا عايز اعمل updateيعنى مثال عايز اخلي ال nameبتاع ال s2يكون اسمه (علي) ودا بيكون بالشكل التالى
هنا بعمل ابديت لبروبرتي النيم الخاصة باالس 2فقط واالس 1ملوش عالقة بي فمش هيتأثر s2.name = "Ali" //
نقطة مهمة جدا
هنا هيطبعلي االبديت بتاع االس 2اللى انا عملته وهيطبعلي علي console.log(s2.name); //
تعال نأخد اوبجكت تاني ونجرب (نفس فكرة ال اس 2خدت نسخه من االس 1والتالتة ملهمش عالقة ببعض مبيتأثروش
ببعض)
;)let s3 = Object.create(s1
نفس فكرة ال اس 2خدت نسخه من االس 1والتالتة ملهمش عالقة ببعض مبيتأثروش ببعض console.log(s3); //
طيب لو انا جيت خليت االس 3يأخد نسخة من االس 2فهو هنا هيكون شايل نسخة من االس 2واالس 2شايلة نسخة من
االس 1فا انا اقدر ااكسس عليها وتعال نجرب ونضرب امثلة
;)let s4 = Object.create(s2
;)console.log(s4
هنا هيطبعلى النيم الموجودة فى االس ( 2علي) النه واخد نسخه من االس console.log(s4.name); // 2
هنا هيطبعلي العمر الموجود فى االس 1الن االس 2شايله نسخة من االس + 1اني console.log(s4.Age); //
معملتش ابديت على العمر بتاع االس 2
ف ال s2, s3, s4دول بيكونو شبه ال ... s1انما اللى هيتم شرحه الجاي هو لو اني عايز اورث من اوبجكت بدل ما
اكرر الكود
Prototype Inheritance
يعنى وراثة بمعني اني بورث حاجة من حاجة تانية فهو بيكون جزء من الحاجة اللى بورث منها ودا بستفاد منه فى انى
مقعدش اكرر الكود ودا بيتم عن طريق ال built inاللى اسمها objectجواها حاجة اسمها ) setPrototypeOf( ,
ودي بتأخد 2براميتر اول براميتر بديلو الحاجة اللى انا عايزها تورث وتاني براميتر بديله الحاجة اللى انا عايز اورث
منه .وتعال نوضح بمثال.
{ = let s1
name : "Ahmed",
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
Age : 27,
{)(AttLec
;)"console.log("hi from AttLec
}
}
}
}
فهنا فى ال m1انا بكرر حاجات فى الكود موجودة فى ال s1فهنا بقا يجي دور الوراثة وهو اني اورث من ال s1بدل ما
اكررالكود واقدر ااكسس علي ال s1واقدر اعمل ابديت عليها بنفس الطرق اللى جربناها فوق كدا .مثال
{ = let s1
name : "Ahmed",
Age : 27,
{)(AttLec
;)"console.log("hi from AttLec
}
}
واحد بيحضر ماجستير يعني let m1 = { // master 1
material: ["math", "Geography", "computer"],
{)(search
;)"console.log("Hi from search
}
}
;)Object.setPrototypeOf(m1 , s1
فهو هنا كدا شايل خصائص االم 1ووارث خصائص االس 1فهيطبعلي خصائص االم console.log(m1); // 1
وبروتوتايب شايل خصائص االس 1
Prototype Constructor
احنا اول حاجة عملناها لما كنا بنعمل createوبعد كدا بنأخد نسخة من االوبجكت بس انا حاسس اني مستفدتش حاجة
وانى برجع اعدل واعمل ابديت ” s2.name = “aliفانا كدا برضو رجعت اكني بكريت اوبجكت عادى وانا كدا بفكر
صح ودي فعال فكرة ال oop prototypeطب انا عايز احسنها وفى طريقة ممكن نستخدمها لتحسين دا وهى انى بدل ما
بعمل نسخة مبدأئية فيها قيم وبدل ماتضطر انك لو مش عايز القيم دي تعمل ابديت فيها ف ايه رايك لما نعمل نسخة مبدأئية
بدون قيم (التطوير بتاعهم عايزين يقلدو فكرة الكالس) يال بينا نعملها
{)function student(name, age, id
this.sName= name,
this.SAge= age,
this.sId= id,
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
ودي طريقة عمل الميزود داخل الطريقة دي this.attLecture = function(){ //
;)"console.log("hi from attLecture
}
}
نيو يعني بقوله شيل نسخة جديدة من نسخة اصلية وعندى هنا let s1 = new student("Ahmed",27,1010); //
النسخة االصلية اسمها استيودينت
;)let s2 = new student("Ali",26,5252
هيطبعلي االوبجكت بتاعى وكمان شايل بروتوتايب شايل نسخة منسخة من االستيوديتنت وبيشيلها console.log(s1); //
فى حاجة اسمها كونستركتور
console.log(s1.sName); // Ahmed
console.log(s1.sAge); // 27
console.log(s1.sId); // 1010
console.log(s1.attLecture()); // hi from attLecture
ملحوظة مهمة جدا :احنا عارفين ان thisبتشاور على ال windowولكن لو استخدمتها مع نيو لو انا جيت وعملت
newمعنى كدا ان thisدي هتشاور على االوبجكت اللى انت عايز تكريتو ففي المثال دا هنا thisبتشاور على الفاريبول
s1واللى عمل كدا كلمة نيو .فبكدا ال s1بقا عندها بروبرتي اسمها sName, sAge, sIdوكل واحدة منهم شايلة الفاليو
المحدوفة فى البراميتر اللى انا عملتها.
ولو انا شيلت نيو من البراميتر اللى بعملها كدا thisهتشاور على ال windowوالناتج هيكون .undefined
والفانكشن اللى انا عملتها دي مش بعملها callواللى بيقوم بالدور دا ال newف ان هي بتعمل نسخة.
وبكدا اقدر اخد 100الف نسخة ف الموضوع بقا ابسط وانضف واحسن وكبيرفورمنس اسرع واحسن من التانى .ف دا
احسن الوحشين.
Prototype Share Property
لما كنا بنعمل فانكشن وبنعمل فيها بروبرتي وكنا بنعمل بروبرتي لل methodوبعد كدا بنأخد منهم نسخ ف دا مش افضل
حاجة الن لو عملت 100نسخة من الفانكشن دي كدا انا بحجز مكان فى الميموري لكل methodمن دول ودا مش صح
ف الحل كان فى اي اني اعمل ال methodدي للفانكشن نفسها فبالتالى لما اجي اخد نسخة من االوبجكت بتاع الفانكشن
ال methodدي هتكون فى ال prototypeبتاع االوبجكت اللى خدته كنسخة وكل دا يندرج تحت كونسبت اسمه share
propertyوتعال نجرب بمثال
{)function student(name,age,id
this.sName = name,
this.sAge = age,
this.sId = id
}
{)(student.prototype.attLec = function
;)"console.log("hi from attLec
}
;)let s1 = new student("Ahmed",27,1010
;)let s2 = new student("Ali",26,5252
;)console.log(s1
;)console.log(s2
ودا الناتج
;)"s1.friends.push("Mohamed
}
{)(test
;)"console.log("hi from test
}
}
روح افتح الكونسول فى البروزر هتالقي طابع هاي فروم كونستراكتور let c1 = new car(); //
واي methodداخل الكالس بتروح تلقائي في ال prototypeبتاع النسخة اللى انا خدها من الكالس كما هو موضح فى
االسكرين السابق وهنا بتقوم بنفس الدور اللى عملناه قبل كدا فى البروتوتايب بيزد لما كنا بنعمل شير بروبرتي.
فالكالس شبه اللى عملناه فى البروتوتايب وهي لما كنا بنعمل فانكشن وبنديها براميتر وبعد كدا بنستخدم thisوبعد كدا
بنأخد نسخة بالنيو.
معلومة مهمة جدا :وهي ان ال browserمش بيتعامل مع الكالس مباشرتا ال انما الكومبيلر بتاع ال JSبيأخد شكل
الكالس دا وبيروح يحوله لشكل البروتوتايب اللى هو كنا بنعمله بطريقة الفانكشن .ودا اكبر دليل على ان الكالس معمول
لينا كديفلوبر لطريقة الكتابة فقط.
Class inheritance
لو انا عايز اورث كالس من كالس اخر زي ماعملنا فوق بس ال syntaxمختلف و بيكون عن طريق ال extendsو ال
.superمثال
{class student
{ )constructor(Name, age, id
this.sName = Name,
this.sAge = age,
this.sId = id
}
{)(test
;)"console.log("hi
}
}
;)let s1 = new student("Ahmed",27,1010
;)console.log(s1
setTimeOut setInterval_Date
هما عبارة عن بيلت ان فانكشن او بيلت ان ميزود بتساعدني على ان تخليني اعمل كل اللى انا عايزه بعد وقت معين ودي
من خالل السيت تايم اوت وبتأخد حاجتين .1الفانكشن اللى هتعمل الحاجة اللى انا عايزها .2بتديله الوقت اللى انت عايزه
يتأخر فى تنفيذ الفانكشن وبيكون باللميلي ساكند ف ال 1000ملي ساكند معناها ثانية واحدة مثال والفانكشن دي بتشتغل
مرة واحدة بس ,اما السيت انترفال نفس فكرة السيت تايم اوت ولكن بتفضل شغالة ع طول .امثلة
هيطبعلي هاي بعد ثانيتينsetTimeout(function(){ console.log("Hii"); }, 2000) //
هيقعد يطبع في كلمة هاي كل ثانيتين ومش هيقفsetInterval(function(){ console.log("Hii"); }, 2000) //
طيب هستفاد بيهم اي << لو انا مثال عايز اعمل وقت عمال يعد ..ودا عن طريق السيت انترفال وبيلت ان اوبجكت اسمه
)(Date
{ )(setInterval(function
;)(let time = new Date
;)(document.querySelector(".time").innerHTML = time.toLocaleTimeString
;)}, 1000
ال Dateاوبجكت عنده ميزودس كتير ممكن تجربها لو محتاج الوقت فقط او التاريخ فقط او الوقت والتاريخ...
)(getDate(), getTime
JavaScript Stack
بيقابلني مشكلة وهي اي بيرن قبل اي واحنا عارفين ان الجافا سكريبت بترن سيكونس وعندى حاجات بترن على طول
ومبتأخدش وقت زي مثال )” console.log(“oneودول بيتحطو فى حاجة اسمها execution stackولكن عندى فى
الجافا سكريبت حاجات بتأخد وقت على ما بترن زي ال AJAXو setTimeoutو setIntervalو Eventsفالبروزر
بيأخد الحاجات دي وبيحطها فى صندوق اسمه web API Stackوبعد كدا بيأخدهم حاجة حاجة على حسب اللى بيخلص
االول ويأخده يحطه فى حاجة اسمها event loopفمثال لو setTimeoutرنت وخلصت االول بيأخدها ويحطها فى ال
event loopوبعد كدا ال AJAXخلص بعديها بيأخده يوقفو فى الطابور بتاع ال event loopولما كل حاجة تخلص
يأخدها ويوديها ال execution stackمع اخواتها وترن.
ودي مشكلة عندنا الن لو انا عندى اكتر من AJAXوعايز حاجة ترن قبل حاجة ف انا عندى طريقة اقدر اعمل بيها كدا
عن طريق ال callback functionاقوم بتحول ال Async to Syncومثال على دا
لو انا عندى AJAX 4وهما getCat, getMeals, getDetails, getAreaوانا عايزهم يرنو بالترتيب النهم فى
العادي بيرنو علي حسب اللى بيخلص االول ف كل ما تعمل ريفريش هتالقي الترتيب اختلف وعشان احل المشكلة دي
باستخدم callback functionمثال
// callbacks fun Async ==> Sync
// getCat ==> getMeals ==> getDetails
{)function getCat(callBack
;)(let myHttp = new XMLHttpRequest
;)"myHttp.open( "GET" , "https://www.themealdb.com/api/json/v1/1/categories.php
;)(myHttp.send
{)(myHttp.addEventListener("readystatechange" , function
{)if(myHttp.readyState == 4
;)"console.log("hi form cat
;) console.log(JSON.parse(myHttp.response).categories
;)(callBack
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
}
})
}
function getMeals(callBack){
let myHttp = new XMLHttpRequest();
myHttp.open( "GET" ,
"https://www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata");
myHttp.send();
myHttp.addEventListener("readystatechange" , function(){
if(myHttp.readyState == 4){
console.log("hi form Meals");
console.log(JSON.parse(myHttp.response).meals);
callBack();
}
})
}
function getDetails(callBack){
let myHttp = new XMLHttpRequest();
myHttp.open( "GET" ,
"https://www.themealdb.com/api/json/v1/1/filter.php?a=Canadian");
myHttp.send();
myHttp.addEventListener("readystatechange" , function(){
if(myHttp.readyState == 4){
console.log("hi form Details");
console.log(JSON.parse(myHttp.response).meals);
callBack();
}
})
}
getCat(function(){
getMeals(function(){
getDetails(function(){console.log("End Tree")});
})
})
قالتلك الES6 ف جت ال..callback والطريقة دي مش افضل حاجة الن لو انا عندي اكتر من فانكشن هفضل اعمل
ياباشا اللى بتعمله دا اسمه جحيم الكول باك فهما جابولنا حاجة اسمها
promise
ومعناها بالعربي وعد فهو بيقولي انا هعملك مجموعة من سطور الكود ولو مشيت ورنت تمام اوعدك اعملك حاجة بعده
ولكن لو حصل مشكلة هيقولك متزعلش مني مش هنفذلك الحاجة اللى بعدي وهيطلعلك ايرور
catch() ودي بتحصل بعد ما الراجل يخلص والحاجة التانيه هيthen() والبروميس له حاجتين وهما في ميزود اسمها
ولكن ليهاthen والبروميس الواحدة ممكن تكون ليها اكثر من.ودي بترن لو حصل ايرور او مشكلة فى التسكايه بتاعتي
مثال. واحدة بسcatch
هنكمل شرحها بعدين
fetch
في 2017طورو الموضوع جدا وقالك كل اللى فات دا مش احسن حاجة ولغي كل الخطوات بتاعت ال AJAXوعملك
فانكشن fetchودي بتأخد ال URLبتاعى وبترجعلي معلومات ال URLدا كاملة والمعلومات دى بتكون من النوع
promiseفهي بتأخد وقتها لحد ما تخلص واحنا عارفين ان promiseبتيجي معاها )( thenولكن هنستخدم await
افضل النها كقراءة كود افضل ف انا محتاج اقولها استني ( )awaitوطالما قولت awaitيبقا الزم احول الفانكشن بتاعتي
الى Asyncعن طريق اضافة كلمة Asyncقبل الفانكشن تمام كدا بس انا كدا لسه عايز ارجع الداتا ف دا بيتم عن طريق
حاجة اسمها )( jsonودي بتكون من ضمن المعلومات اللى بيرجعهالى ال URLوبتكون برضو من النوع promise
فبالتالي هستخدم معاها .awaitنطبق بمثال.
{)(async function getCat
;)"let myData = await fetch("https://www.themealdb.com/api/json/v1/1/categories.php
myData = await myData.json(); // to get data only
;)console.log(myData
}
;)(getCat
Sign up Assignment
دي لو انا عايز اعمل registerفى الموقع بتاعى وبتكون بالشكل التالى
><!-- In HTML register--
>"<div class="container
>"<div class="row g-3 m-3
><h1 class="text-info text-center my-5">Sign up</h1
>"<div class="col-md-12
><label for="inputName" class="form-label text-info">Name</label
>"<input type="text" class="form-control" id="name
></div
>"<div class="col-md-12
><label for="inputPrice" class="form-label text-info">Email</label
>"<input type="text" class="form-control" id="email
></div
>"<div class="col-12
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
<label for="inputCategory" class="form-label text-info">Password</label>
<input type="text" class="form-control" id="pass" placeholder="">
</div>
<div class="col-12">
<button id="AddProductBTN" onclick="signUp()" class="btn btn-info">Sign
up</button>
<a href="signin.html">Sign in</a>
</div>
</div>
</div>
// in register JavaScript
let in1 = document.querySelector("#name");
let in2 = document.querySelector("#email");
let in3 = document.querySelector("#pass");
let allUsers;
if(localStorage.getItem("users") == null){
allUsers = [];
}
else{
allUsers = JSON.parse(localStorage.getItem("users"))
}
function signUp() {
let flag = false; // عملنا المتغير دا عشان نتشك االيميل لو موجود خليهولي ب ترو
for (let i = 0; i < allUsers.length; i++) {
if (allUsers[i].email == in2.value) {
flag = true;
break; // دي هتشتغل في حالة ان لو الشرط اتحقق هيوقف اللوب ويطلع برا الفور وينفذ باقي الكود
}
}
// بعد كدا هنتشك لو الفالج بفولس اعملي بوش لليوزر الجديد دا واحفظه فى اللوكل استوردج ويروح لصفحة تسجيل
الدخول
if (flag == false) {
let user = {
name: in1.value,
email: in2.value,
pass: in3.value
}
allUsers.push(user);
// هحتاج اقوله لو المدخالت بتاعتى فاضية طلعلي اليرت يقولي دخل بياناتك
if (in1.value == "") {
alert("Please inter your register Data")
}
else {
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
localStorage.setItem("users", JSON.stringify(allUsers))
window.location.href = "signin.html";
}
} // هنا بقوله لو االيميل فعال موجود اعملي الريت قولي انه بالفعل موجود
else {
alert("this email is already exist")
}
}
وهتكون بالشكل التالىSign in بعد كدا عايزين نعمل صفحة ال
Sign in
<!—in HTML Sign in -->
<div class="container">
<div class="row g-3 m-3">
<h1 class="text-info text-center my-5">Sign in</h1>
<div class="col-md-12">
<label for="inputPrice" class="form-label text-info">Email</label>
<input type="text" class="form-control" id="email">
</div>
<div class="col-12">
<label for="inputCategory" class="form-label text-info">Password</label>
<input type="text" class="form-control" id="pass" placeholder="">
</div>
<div class="col-12">
<button id="AddProductBTN" onclick="signIn()" class="btn btn-info">Sign in</button>
<a href="index.html">Sign up</a>
</div>
</div>
</div>
// in Sign in JavaScript
let emailInput = document.querySelector("#email");
let passInput = document.querySelector("#pass");
let allUsers ;
if(localStorage.getItem("users") == null){
allUsers = [];
}
else
{
allUsers = JSON.parse(localStorage.getItem("users"));
}
function signIn(){
let flag = false;
for (let i = 0; i < allUsers.length; i++)
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
{
if(allUsers[i].email == emailInput.value && allUsers[i].pass == passInput.value){
flag = true;
// عشان اخد اسم اليوزر اللى عامل لوجن عشان اقدر اظهرو بعدين في صفحة الهوم
localStorage.setItem("currentUserName", allUsers[i].name);
break;
}
}
if(flag){
window.location.href = "home.html";
}
else{
alert("this email is not exist")
}
}
بتاعت التنقل بينsecurity واعمل الlogout وزرار الhome بعد كدا هكون محتاج اظهر اسم اليوزر في صفحة ال
.الصفحات
<!-- in Home HTML -->
<h1 class="text-info text-center my-5" id="userName">Welcome Home</h1>
<button class="btn btn-danger" onclick="logout()">logout</button>
// in Home JavaScript
// هعمل شرط عشان اقوله لو الكرنت يوزر اللى انا انشأته شايل داتا اظهرلي اسم اليوزر اللى عمل تسجيل دخول
if(localStorage.getItem("currentUserName") != null){
let userName = localStorage.getItem("currentUserName") // عملت متغير بس عشان يشيلي اسم
اليوزر اللى عمل تسجيل دخول
document.querySelector("#userName").innerHTML = "Welcome " + userName +" from
Home"
}
else{ // هقوله فى حالة ان الكرنت يوزر نيم اللى ف االستوردش فاضي خليني دائما على صفحة تسجيل الدخول
window.location.href = "signin.html";
}
function logout(){
localStorage.removeItem("currentUserName"); // بقوله امسحلى اسم اليوزر من االستوردج عشان
السكيورتي النه مترتب على الشرط السابق
window.location.href = "signin.html";
}
{ = let users
uName : "Ahmed",
uAge : 27,
uNumber : 1155023528
}
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
let {uName,uAge} = users
console.log(uName); // Ahmed
console.log(uAge); // 27
Map
ودي ملهاش عالقة باللى فوق دا تشابه اسماء فقط ,و Mapدي اخت ال objectوعملوها لينا فى ال .ES6
هو نوع بيانات جديد في ECMAScript 6بيخلينا نخزن البيانات كـ أزواج من مفاتيح وقيم) ، (key-value pairsزي
الـ ، Objectلكن مع شوية مميزات ومرونة أكتر.
console.log(myMap.get(1)); // one
لو قولتله هاتلي الماي ماب الناتج هيكون المفتاح اللى اسمه 2بس >> console.log(myMap.delete(1)); // true
اللى هيجي
لحذف االوبجكت كله بقا console.log(myMap.clear); //
التعامل مع الـ Setsبشكل فعال :الـ Setعنده شوية عمليات مفيدة زي ،delete ،addو hasاللي بتساعدك تدير .3
البيانات بسهولة.
;)mySet.add(3
Setيشيل 2من الـ mySet.delete(2); //
للتحقق من وجود قيمة //
لو 1موجود trueهترجع console.log(mySet.has(1)); //
التكرار ) (Iterationعلى الـ Set:زي ما تقدر تتعامل مع ، arraysتقدر كمان تتعامل مع Setبالتكرار عليها، .4
سواء باستخدام forEachأو for...of.
;)]let mySet = new Set([1, 2, 3
{ )for (let value of mySet
هيطبع القيم console.log(value); // 3 ،2 ،1
}
حجم الـ Set:عشان تعرف عدد العناصر في الـ ،Setممكن ببساطة تستخدم size: .5
;)]let mySet = new Set([1, 2, 3
هترجع console.log(mySet.size); // 3
االتحاد والفرق والتقاطع بين مجموعات :لو عندك أكتر من ،Setممكن تعمل عمليات زي االتحاد ( )Unionأو .6
التقاطع ( )Intersectionبينهم باستخدام شوية تقنيات بسيطة.
• االتحاد ( :)Unionعشان تضم القيم كلها من مجموعتين:
;)]let setA = new Set([1, 2, 3
;)]let setB = new Set([3, 4, 5
Jquery.js
jQuery.jsدي مكتبة ( JavaScript )libraryجاهزة بتسهل عليك شغل كتير وانت بتكتب كود .بدل ما تكتب أكواد
طويلة ومعقدة عشان تعمل حاجات زي التعامل مع عناصر الصفحة ،أو إنك تخلي الزرار يعمل حاجة لما تدوس عليه،
jQueryبتختصرلك كل ده في كود بسيط وسهل .يعني بتساعدك تعمل حاجات بسرعة وبسهولة من غير وجع دماغ.
وبتدخل على ال siteبتاعهم ) (https://jquery.com/download/وتنزلها وبتتعامل معاها زي اي libraryبتتعامل
معاها زي ال bootstrapكدا مثالوهتالقي لينكات كتيرة مكبرين الموضوع اوي يعني ف انت هتنزلها من اللينك دا
https://code.jquery.com/jquery-3.7.1.js
هيفتحلك صفحة هتدوس right clickعلي اي مكان فاضي وهتختار save asوتختار مكان الحفظ بقا .وطريقة ربطها
زي اي ملف .js
وعشان تستخدم ال jQueryفي ال JSالزم انادي ال jQueryبتاعتي ودا بيكون عن طريق فانكشن الدوالر ساين )($
ودي بتبدأ تأخد مني ال elementاللى عايز اشتغل عليه وبترجعلي كل ال built in functionاللى عندها.
وبتساعدك انك تتعامل مع ال eventsبكل سهولة عن طريق انك بترمي ال eventع طول بعد ما بتنادي على ال
element
)}{)( $(button).click(functionوميزتها ان هي بتتعامل مع اكتر من اليمين يعنى اي زرار موجود لو دوست عليه
هينفذ الفانكشن.
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
ولو شغلت دماغك وشيلت ال $الكود بتاعك مش هيشتغل -
ممكن تبدل ال $بكلمة jQueryبس احنا فى العادي بنستخدم ال .$ -
jQuery Effects
{)($("button").click(function
التبديل $(".test").toggle(2000) // toggle
)}
{)($("button").click(function
هتخفي الديف فقط $(".test").hide(2000) //
)}
{)($("button").click(function
بتظهر الديف فقط $(".test").show(2000) //
)}
{)($("button").click(function
بتظهر الديف عن طريق االوباستي $(".test").fadeIn(2000) //
)}
{)($("button").click(function
بتظهر الديف عن طريق االوباستي $(".test").fadeOut(2000) //
)}
{)($("button").click(function
بتبدل في اظهار واخفاء الديف عن طريق االوباستي $(".test").fadeToggle(2000) //
)}
{)($("button").click(function
الفيد بيتراوح من 0اوباستي ل 1اوباستي فهنا بقا لو انا عايز االوباستي $(".test").fadeTo(2000 , 0.5) //
يتراوح للنص 0.5
وبكدا هي هتخفي الديف في ثانيتين لحد نص اوباستي يعني هيبقا ظاهر سيكا كدا جربها هتفهم اكتر }) //
{)($("button").click(function
دي لو الديف مخفي وانت عايز تظهره بس طريقة االظهار هتكون على شكل $(".test").slideDown(2000) //
ساليد كدا بيتسحب كدا
)}
{)($("button").click(function
دي لو الديف ظاهر وانت عايز تخفي بس طريقة االخفاء هتكون على شكل ساليد $(".test").slideUp(2000); //
كدا بيتسحب كدا
)}
{)($("button").click(function
دي لو الديف ظاهر وانت عايز تخفي وتظهره على شكل ساليد بيتسحب كدا$(".test").slideToggle(2000); //
)}
دا مصطلح عام بيعبر عن لو انا عايز انفذ اكثر من افيكت على نفس االليمنت // Chaining
{)($("button").click(function
;)$(".test").slideUp(2000).fadeIn(1000).show(1000
)}
الجيكوري لو انت قولتله لما ادوس على الزرار اعمل ساليد اب ل ايلمنت واعمل فيد ان ل ايلمنت تاني بس هنا االتنين
اليمنت هيشتغلو مع بعض مفيش حد هيستنا التاني النهم سينكروننس وعشان احول من سينكروننس ل اسينكروننس
هستخدم الطرق اللى شرحناها قبل كدا
لكن الجيكوري سهلت علينا كل دا وقالتلك ان االيفيكت بتاعى بيأخد 2براميتر واحد خاص بالمدة المستغرقة في تنفيذ
االليمنت والتانى بيقولك انه بياخد كول باك فانكشن عشان لو عايز تنفذ حاجة بعديا بالشكل التالى
{)($("button").click(function
{)($(".test").slideUp(2000 , function
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
;)})$(".demo").fadeOut(2000
)}
)( cssالجيكوري عندها فانكشن اسمها سي اس اس بتساعدني على التعامل مع ال سي اس اس وممكن اكلمها بطريقتين
ممكن امرر ليها الحاجة اللى انا عايز اعملها بالشكل التالى
{)($("button").click(function
;)"$(".test").css("background-color" , "tomato
)}
وممكن امرر ليها الحاجة اللى انا عايز اعملها على شكل اوبجكت في حالة انى لو عايز انفذ اكثر من امر مثال
{)($("button").click(function
;)}$(".test").css({backgroundColor :"tomato" , width:800
)}
تمام كدا طب لو انا عايز ال cssدا بيتنفذ اسموزي يعني يأخد وقت ف التنفيذ ف انا عندي فانكشن اسمها animateزي
ال cssبالظبط بس دي بتأخد 2براميتر واحد خاص باوبجكت خصائص ال cssوالبراميتر التاني بحطلو الوقت
المستغرق بس هي مبتشتغلش مع االلوان الن االنيميت بتلعب فى التدرج وااللوان هنا معندهاش تدرج
{)($("button").click(function
;)$(".test").animate({backgroundColor :"tomato" , width:800},2000
)}
{)($("button").click(function
)$(".test").animate( { width : "800px" } , 1000).animate( { height : "800px" } , 1000
)}
طيب لو انا عايز اقوله زود على ال widthبتاعك مثال مثال ايا كان ايه هو ودا على اي حاجة غير ال widthزي ال
..height
{)($("button").click(function
;)$(".test").animate({backgroundColor :"tomato" , width:"+=200"},2000
)}
وفي حاجة عندى حلوة اوي ممكن احط كلمة toggleكفاليو لبروبرتي ال widthومن خاللها لما ادوس ع الزرار اقدر
ابدل مثال.
{)($("button").click(function
;)$(".test").animate({backgroundColor :"tomato" , width:"toggle"},2000
)}
في تاسكايه بسيطة وهي ان عندي 2زرار واحد بيشغل االنيميشن واالنيميشن دا عبارة عن 3انيميشن بيتنفذو على ال
elementوالزرار التاني دا بيوقف االنيميشن ودا بيتم عن طريق فانكشن اسمها )( stopوالفانكشن دي بتأخد 2براميتر
من النوع Booleanوالديفولت بتاعهم falseيعنى لو سبت القوسين فاضيين ف البراميتر االول لو قولتله trueف كدا
انت بتقوله وقفلي كل االنيميشن stop allاما البراميتر التاني لو قولتله trueف كدا انت بتقوله كمل االنيميشن الحالى
اللى شغال واقف .go to endمثال
{ )( $(".btn-info").click(function
)$(".test").animate({width:"800px"} , 1000
)$(".test").animate({height:"800px"} , 1000
)$(".test").animate({borderRadius:"50%"} , 1000
;)}
{ )( $(".btn-danger").click(function
اكنك قايله فولس وفولس ففى الحالة دي هيقف ف المكان اللى قولتله استوب في وهيكمل للنهاية //
)$(".test").stop(); // (false , false
كدا هيوقف االنيميشن خالص // $(".test").stop(true , false); //
كدا هيوقف االنيميشن اللى شغال وهيديله القيمة النهائية بتاعته ويكمل باقي االنيميشن التانيين //
;)// $(".test").stop(false , true
كدا هيوقف االنيميشن اللى شغال وهيديله القيمة النهائية بتاعته وهيوقف باقي االنيميشن التانيين //
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
// $(".test").stop(true , true);
});
تعال تسكايه تانيه جميلة وهي الديزين بتاعى حركة روشة للعميل وهي اني السيكشن يظهرله اكنه بيتكون قدامه ف يال بينا
.نعمله
<!-- in HTML Model -->
<section class="model bg-dark">
<div class="container">
<h1 class="text-white text-center">Lorem ipsum dolor sit amet.</h1>
<div class="row g-4">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
/* In CSS */
.model{
width: 50px;
height: 10px;
}
.col-md-4 , h1{
display: none;
}
// in JavaScript
$(".model").animate({width:"100%"},2000);
$(".model").animate({height:"100vh"},2000, function(){
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
$("h1").fadeIn(2000 , function(){
$(".card1").slideDown(2000 , function(){
$(".card2").slideDown(2000 , function(){
$(".card3").slideDown(2000, function(){
$(".card4").slideDown(2000 , function(){
$(".card5").slideDown(2000 , function(){
$(".card6").slideDown(2000)
})
})
})
});
});
})
});
Getters & Setters in JQ
ولو عايز اعدل علىGetter عن طريق الhtml من خالل اني اجيب الداتا من الhtml من خاللهم اقدر اتعامل مع ال
هما مصطلحات وليس فانكشن مصطلح للنطقGetter , Setter والSetter بيكون عن طريق الhtml حاجة فى ال
يعني مثال
<-- in HTML -->
<h1>Lorem ipsum dolor sit amet.</h1>
// Getter
console.log($("h1").html()); // Lorem ipsum dolor sit amet.
$("div").before("<div>Ahmed</div>");
$("div").after("<div>Ahmed</div>");
.تعال بقا نعمل تاسكايه لذيذة كدا وهي اعمل ساليد من الصور ولما ادوس على صورة يظهرها فوق زي االسكرين التالي
<div class="container">
<div class="d-flex justify-content-center col-12">
<img src="images/1.jpg" alt="" width="50%" class="baseImg">
</div>
<div class="d-flex justify-content-between col-3 groupImages">
<img src="images/0.jpeg" alt="" class="img-fluid img1">
<img src="images/2.jpg" alt="" class="img-fluid">
<img src="images/3.jpg" alt="" class="img-fluid">
<img src="images/4.jpg" alt="" class="img-fluid">
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
ُللا َ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد Ah-med Mostafa - 01155023528
></div
></div
{)($(".groupImages img").click(function
;)"let currentImage = $(this).attr("src
;)$(".baseImg").attr("src" , currentImage
)}
Traversing in JQ
وهو ان انا ازاي اتفسح في كود ال htmlبداللة حاجة معينة يعني مثال بتستخدم عشان تتحرك أو تتنقل بين عناصر الـ
(DOMهيكل الصفحة بتاعتك) .يعني لو عندك عناصر متعلقة ببعض زي األب ) (parentواألوالد ) (childrenأو
اإلخوات) ، (siblingsتقدر توصل ألي عنصر في الشجرة دي بسهولة باستخدام الـtraversing.
.ده هيجيب لك العنصر األب اللي فيه الـديمو $("#demo").parent().css("border" , "5px solid tomato"); //
.دي بتستخدم عشان توصل لعنصر األب (اللي هو العنصر اللي فوق العنصر الحالي) //
ده هيجيب كل األطفال اللي جوه $(".groupImages").children().css("border" , "5px solid tomato");//
الـجروب
.دي بتستخدم عشان توصل لألوالد بتوع عنصر معين (اللي هما العناصر اللي جوه العنصر ده مباشرة) //
.دي هتجبلي كل االليمنتس اللى جنب الديمو $("#demo").siblings().css("border" , "5px solid tomato"); //
.دي بتستخدم عشان توصل لإلخوات بتوع العنصر (العناصر اللي جنب العنصر الحالي) //
ده هيجيب لك كل االليمنتس $(".groupImages").find("#demo").css("border" , "5px solid tomato"); //
.اللي جوه الجروب وواخده اي دي ديمو
.دي بتستخدم عشان تالقي عناصر جوه عنصر معين ،يعني بتدور جوه العنصر عن حاجات معينة //
يوجد طريقتين وهما 1و 2وممكن تفكر فيها وتجرب طرق اخري // in JavaScript
{ )( .1 $("h1").click(function
;)$("p").slideUp(300
)$(this).next().slideDown(300
;)}
{ )( .2 $("h1").click(function
;)"$(this).next().toggle(300).css("display","block
{)($(this).prev().css({display:"none"},function
;)}
;)}
Color Box edit from JQ
دي تاسكايه جميلة وهي هعمل زي بلتت الوان كدا وكل لما ادوس علي لون ما هيأخد اللون دا ويلونه لكل العناوين اللى فى
الويب مثال.
>"<div class="display-flex colorBox position-fixed
>"<ul class="list-unstyled d-flex
><li></li
><li></li
><li></li
><li></li
><li></li
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
<i class="palta"></i>
</ul>
</div>
<div class="container my-5">
<h1>Lorem ipsum dolor sit item1</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis aperiam.</p>
<h1>Lorem ipsum dolor sit item2</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis aperiam.</p>
<h1>Lorem ipsum dolor sit item3</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis aperiam.</p>
</div>
.colorBox{
z-index: 9999;
}
.colorBox li{
width: 0px;
height: 50px;
background-color: #0f017f;
cursor: pointer;
}
.palta{
width: 30px;
height: 30px;
background-color: black;
border-radius: 50%;
cursor: pointer;
}
// للتبديل والتحكم في اظهار واخفاء البلتة
$(".palta").click(function () {
$(".colorBox li").css("width","50px");
$(".colorBox li").toggle(700);
})
// طريقة اخري للتبديل والتحكم في اظهار واخفاء البلتة ودي الطريقة االفضل
$(".palta").click(function () {
let w = $(".colorBox li").css("width");
console.log(w);
if( w == "0px"){
$(".colorBox li").animate({width:"50px"},500);
}else{
$(".colorBox li").animate({width:"0px"},500);
}
})
الضافة االلوان ل اي عناصر في الصفحة عن طريق الضغط على اللون والعناصر دي هتاخد اللون دا //
{)($(".colorBox li").click(function
)"let x = $(this).css("backgroundColor
;)console.log(x
)$("h1").css("backgroundColor" , x
)}
Navbar edit from JQ
تاسكاية لذيذة برضو وهي اني عايز اغير لون ال navbarاو لون عنوان السيكشن لما اوصل عند سيكشن معين وانا
ماشي باالسكرول .
;let demoPositionTop = $(".demo").offset().top
;)console.log(demoPositionTop
{)($(window).scroll(function
;))(console.log($(window).scrollTop
;)(let scrollValueTop = $(window).scrollTop
{)if(scrollValueTop >= demoPositionTop
هنا ممكن تقوله يغيرلك في اي حاجة في الدنيا موجودة فى $(".demo").addClass("bg-danger") //
السيكشن دا
}
{else
هنا بتقوله لما تطلع فوق تاني رجعلي كل حاجة زي ماكانت $(".demo").removeClass("bg-danger") //
}
;)}
Arrow Up
تاسكايه لو انا عايز اضيف زرار ويكون مخفي فى االول ولما انزل تحت باالسكرول يظهر ولما ادوس عليه يطلع فوق.
اول حاجة هتعمل الزرار فى االتش تي ام ال وفى االول هيكون مخفي وهيظهر لما توصل لتاني سيكشن باالسكرول//
{)($(".GoToTop").click(function
بقوله لما ادوس ع الزرار اطلع للتوب زيرو$("html , body").animate({scrollTop : "0"},300) //
)}
للتحكم فى اخفاء واظهار الزرار هنستخدم نفس فكرة الكود السابق ولكن هنحط بدل اللون نحط اظهار او اخفاء الزرار//
{)($(window).scroll(function
smooth Scroll
تاسكاية لو انا عندي navbarوعايز لما ادوس على اي لينك فيها يروحلي بشكل اسموزي كدا .مثال
{ )($(".nav-link").click(function
let hrefAttribute = $(this).attr("href"); // for example #clients
عشان اجيب مكان السيكشن بالظبط let makanSection = $(hrefAttribute).offset().top; //
بقوله روح لمكان السيكشن دا $("html , body").animate({scrollTop : makanSection} , 1000) //
بسموزي
)}
Loading Screen
ودي تاسكاية جميلة لو عايز يظهرلي loadingكدا لحد ما الصفحة تحمل ..وممكن اجيب كود شكل اللودينج من الموقع
دا cssSpinners
وهتختار الشكل اللى انت عايزه وتدوس عليه وتاخد الكود كوبي بيست وتحطه عندك فى الكود ...مثال
><!-- in HTML --
>"<div class="loading d-flex justify-content-center align-items-center
><span class="loader"></span
></div
/* in CSS */
{.loading
;width: 100%
;height: 100vh
;position: fixed
;z-index: 999999
;background-color: bisque
كود السي اس اس بتاع االسبينر اللى انت هتاخده كوبي بيست من موقع االسبينر } // +
// in JAVASCRIPT
{ )( $(document).ready(function
;)$(".loading").fadeOut(2000
;)}
Plugins in js
وهي اضافات او featuresجاهزة بتساعدنا فى شغلنا وهي مجموعة من الشباب بتعملها وبترفعها على ال GitHub
وهي حاجة مش صعبة خالص بس هي الفكرة كلها فى انك هل انت تعرف ان فى pluginبتعمل دا وال ال .وسهلة فى
االستخدام بتدخل على ال GitHubبتاع ال pluginوبيقولك الشرح بتاعها وازاي تنزلها وازاي تكلمها فى الكود عندك
فانت بتمشي مع الخطوات وعندنا امثلة على ال plugins
: Slider plugins .1اكتب فى السيرش كدا وهيطلعلك حاجات كتير ودول خاصين بأشكال ال Skitter .sliders
Slideshow
:Wow.js .2ودي بتلعب وتتحكم في شكل ظهور ال elementsبشكل جمالى وحلو جربها
:Owl.carousel.js .3ودي فيها اشكال للتحكم في شكل ال sliderعن طريق ال dragكدا بالماوس جربها برضو
وجميلة
:Slick slider .4دي شبه ال owlبرضو نفس الفكرة.
:multiScroll .5دي بيتحكم في شكل الظهور لما تعمل scrollادخل على الموقع بتاعهم وهتفهم قصدي
:parallax.js .6دي جميلة برضو بتحرك ال elementبشكل حلو كدا
:particles.js .7دي بتعمل في الخلفية شكل جميل كدا برضو عامل زي شبكة العنكبوت
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
:morris.js .8دي خاصة بال chartsالرسوم البيانية ودي جميلة ومهمة جدا.
:Charts.js .9دي برضو خاصة بال chartsالرسوم البيانية.
:Lodash .10بيوفر مجموعة دوال بتسهل التعامل مع المصفوفات والكائنات وتحسين األداء.
:Moment.js .11بيستخدم إلدارة وتنسيق التواريخ واألوقات بطريقة بسيطة وفعالة.
:Axios.12بيساعدك في التعامل مع الـ API requestsوجلب البيانات من الخوادم بسهولة.
:Three.js.13بيستخدم إلنشاء الرسوم ثالثية األبعاد في المتصفح باستخدام .WebGL
:Popper.js.14بيستخدم لتنظيم وعرض الـ tooltipsوالقوائم المنبثقة بشكل ذكي ومتجاوب.
:Anime.js.15بيوفر أدوات قوية لعمل األنيميشنز (الحركات) على العناصر في الصفحة.
:FullCalendar .16بيسمحلك تضيف تقويم تفاعلي ،مثالي لتنظيم األحداث والمواعيد.
:Swiper.js.17بيساعدك تعمل كاروسيل أو ساليدر للصور أو المحتوى بشكل متجاوب وسلس.
اشهر ال GIS Pluginsاللى ممكن تستخدمها مع ال JavaScript
:Leaflet )1بيستخدم إلنشاء خرائط تفاعلية خفيفة الوزن بسهولة ،مناسب للويب.
:OpenLayers )2بيوفر أدوات قوية إلنشاء وعرض الخرائط ،ودعم مصادر بيانات متعددة زي WMSو.WFS
:Mapbox GL JS )3بيسمحلك تعرض خرائط تفاعلية ثالثية األبعاد وعالية الدقة باستخدام .WebGL
:Turf.js )4بيستخدم لتحليل البيانات الجغرافية ( ،)GISزي حساب المسافات أو المناطق أو التقاطعات بين األشكال.
:Esri Leaflet )5بيعمل مع ArcGISعشان تعرض وتتعامل مع البيانات الجغرافية بسهولة على خريطة .Leaflet
:CesiumJS )6بيوفر لك بيئة ثالثية األبعاد تفاعلية لعرض الخرائط والمجسمات على الكرة األرضية.
:Deck.gl )7بيستخدم لعرض البيانات الجغرافية الكبيرة والمتعددة الطبقات بطريقة تفاعلية وسلسة.
:GeoJSON-vt )8بيساعد في عرض ملفات GeoJSONالضخمة بشكل سريع ومقسم حسب الحاجة ،عشان يبقى
األداء أعلى.
:Proj4js )9بيستخدم لتحويل اإلحداثيات بين أنظمة اإلحداثيات المختلفة في الـ .GIS
:Leaflet Draw )10بيسمحلك تضيف أدوات للرسم والتعديل على الخريطة بشكل تفاعلي في .Leaflet
:Leaflet.Geoman )11بيوفر أدوات متقدمة للرسم والتعديل على الـ ،Polygonsوالخطوط والنقاط على خرائط
،Leafletمع إمكانيات متعددة للتحكم
:GeoExt )12بيجمع بين Ext JSو OpenLayersعشان تضيف واجهات مستخدم متقدمة على الخرائط زي الـ
،toolbars ،panelsوواجهات البحث.
:SuperMap iClient for JavaScript )13بيستخدم إلنشاء تطبيقات خرائط تفاعلية ثالثية األبعاد ويدعم خدمات
GISالكبيرة زي خدمات .SuperMap
:MapLibre GL JS )14بيعتبر بديل مفتوح المصدر لـ ،Mapbox GL JSبيوفر نفس المميزات تقريبًا لكن مع
تحكم كامل في الكود.
:Leaflet Routing Machine )15بيستخدم إلضافة خاصية توجيه المركبات أو األشخاص على الخريطة
باستخدام الـ .Leaflet
:Heatmap.js )16بيستخدم إلنشاء خرائط حرارية ( )heatmapsعلى البيانات الجغرافية لتوضيح الكثافات أو
التوزيعات.
:Leaflet.markercluster )17بيجمع الـ markersالمتعددة على الخريطة في مجموعة clustersعشان يحسن
من أداء العرض لما البيانات تكون ضخمة.
:Mapshaper )18بيستخدم لتبسيط أو تحسين األشكال الجغرافية وتحويل البيانات بين الصيغ المختلفة زي
Shapefileو .GeoJSON
:Shapefile-js )19بيستخدم لقراءة ملفات الـ Shapefilesوتحويلها لبيانات GeoJSONمباشرة في المتصفح.
:Leaflet Control Geocoder )20بيساعدك تضيف ميزة الجيوكودينغ (تحويل العناوين لنقاط جغرافية) في
خريطة Leafletباستخدام خدمات مثل .Nominatim
التنسوني من صالح دعائكم ّي لَ ْوال أَنْ َهدَانَا ه
للاُ ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ Ah-med Mostafa - 01155023528
:Wicket.js )21بيستخدم لتحويل البيانات الجغرافية بين GeoJSONو ) ،WKT (Well-Known Textاللي
بيساعد في التوافق مع أنظمة GISمختلفة.
:Leaflet TimeDimension )22بيوفر دعم للبيانات الزمنية ،بمعنى إنك تقدر تعرض تغييرات البيانات على
الخريطة مع مرور الوقت ،زي حركة المركبات أو تغيرات الطقس.
:Leaflet.measure )23بيسمحلك تضيف أدوات قياس على الخريطة لتحديد المسافات بين النقاط أو حساب
المساحات لألشكال المرسومة.
:D3-Geo )24جزء من مكتبة ،D3.jsبيتيحلك رسم خرائط جغرافية وتحليل البيانات الجغرافية بشكل تفاعلي مع
إسقاطات خرائط متعددة.
:Windy.js )25بيستخدم إلنشاء رسومات بيانية ديناميكية للرياح وحاالت الطقس على الخرائط.
npm
هو اختصار ل node package managerوهو عبارة عن اوضة صغيرة كدا معتمدة على الى node jsالن ال node
هي اللى عملته واالوضة دي بيكون فيها %99تقريبا من ال JavaScript Packagesاللى بنستخدمها زي ال plugins
و ال Libraryزي ال jQuery , bootstrap, wow.js, live-serverودول على سبيل المثال يعني وال npmفكرته
معتمده على انه بيروح يدور في ال GitHubعلي اللى انا طالبه منه وينزلهولي في فولدر اسمه node_modulesوهو
اللى بيعملهولي داخل فولدر المشروع بتاعي +ان انا ممكن استخدمها عادي مع اي بروجكت عادي مش شرط مع ال
frameworksوليها 3طرق في االستخدام اول طريقة وهي عن طريق ال terminalالموجودة فى ال VS Code
وافتحها عن طريق ذ shift+و دي افضل طريقة وعندي طريقة تانيه عن طريق اقف على فولدر المشروع وادوس shift
+ right clickواختار open PowerShell window hereوطريقة اخري وهي اني ادخل جوا الفولدر واسليكت
طيب انا كدا عرفت ازاي ابدء اتعامل معاه ازاي بقا ابدء اجرب وانزل حاجة على الباص من فوق واكتب .cmd
اول حاجة بعملها اني بكتب npm initو initدي اختصار لكلمة initiationومعنها بداية او فتحة وتضغط انتر
وهيسألك بعض االسئلة العادية وجاوب عليها عادي واكمل معاه لالخر وبعد كدا افتح فولدر المشروع هتالقي في ملف
عملهولي اسمه package.jsonودا فى الحاجات اللى انا جاوبت عليها ولما باجي انزل حاجة بيضفلي اسمها فى الملف دا
فى بروبرتي اسمها dependenciesولو حاجة انا منزلها لمرحلة بناء المشروع فقط زي ال live serverمش هحتاجه
بعد كدا الن المشروع كدا كدا انا برفعو ع سيرفر بعد ما بخلصه فهو بيعملي بروبرتي تانيه اسمها .devDependencies
يبقا تعال نقول الخطوات واحدة واحدة
1) npm init + answer all questions
2) npm i jquery >> to download jQuery …. The same way with anything
3) npm i live-server –save-dev >> to download live server
بع د ما بخلص خالص المشروع بتاعي بيكون حجمه كبير اوي ولو انا عايز ابعته لحد من زمايلي هيشتغل بعدي مثال ف
انا همسح فولدر ال node_modulesالن دا سبب الحجم الكبير واقول لزميلي لما تيجي تشتغل اكتب في الterminal
اكتب npm iواضغط enterفهيروح منزلي كل حاجة انا مستخدمها ويعملي فولدر ال node_modulesوهنا يجي
اهمية ملف ال package.jsonفهو بيروح يشوف الحاجات اللى انا نزلتها فى الملف دا وينزلها من تاني.