بوابة الإنترنت الرقمية ADSLGATE

Amazon عنوان IP سرعة الإتصال الإعلان
العودة   البوابة الرقمية ADSLGATE > بوابة البرامج وأنظمة التشغيل > بوابة البرمجة العامة
التنبيهات لوحة التحكم مشاركات اليوم قوانين المنتدى الاتصال بنا مشاركات اليوم اجعل كافة الأقسام مقروءة





إضافة رد
 
أدوات الموضوع
قديم 26-10-2020, 05:22 AM #1
ulamzlu
مشارك
 
الصورة الرمزية ulamzlu
 



ulamzlu @Youtube




افتراضي مساعدة في تحسين كود JS DOM





السلام عليكم



سويت مشروع صغير للممارسة والمستوى مبتدئ عباره عن حاسبة للضرايب 15%


تحط الرقم المطلوب اضافة الضرائب عليه ثم تضغط على زر حساب ويطلع الناتج

وزر اخر Rest يمسح الناتج

اذا المستخدم ضغط حساب بدون ادخال اي قيمة تطلع رسالة *ادخل رقم* وظهور ايطار باللون الأحمر



المشاكل اللي اواجها والاستفسارات :

- زر انتر في الكيبورد مايطلع النتيجة فقط من كلك على الزر

- وحسيت فيه تكرار في الاكواد شوي

- هل طريقتي صحيحه لـ اخفاء النتائج بالطريقة التاليه = " ";




ابغى اي ملاحظات اغلاط او اشياء ممكن تحسن الكود اكثر لاهنتم

لحد يدقق في المسميات اشتغل لحالي



 

 

التوقيع
..





التعديل الأخير تم بواسطة ulamzlu ; 26-10-2020 الساعة 08:04 AM.
ulamzlu غير متصل  
أشكر صاحب الموضوع رد مع اقتباس

قديم 27-10-2020, 10:45 AM #2
iSR5
Laptop Support Team
 
الصورة الرمزية iSR5
 



افتراضي رد: مساعدة في تحسين كود JS DOM





- مشكلة زر الانتر اللي تواجهها بسبب انك ما عملت ايفينت له .. فتحتاج انك تعمل ايفينت يعمل كابتشر للانتر ومن خلاله تشغل ايفينت الكليك تبع الزر !

- بالنسبة للتكرار , دائماً اذا حسيت ان فيه كود يتكرر انقله الى فنكشن لوحده واستدعي الفنكشن بدل ماتكتب كامل الكود كذا مره !
- طريقتك سليمه ومافيها شي في اخفاء النتايج .. لان العناصر اللي بالدوم كلها string والجافاسكربت بيتعامل معها كلها ك string انت اللي تغير نوعها الى اي اوبجكت ثاني.

الملاحظات :
- تحتاج تركز على موضوع التحقق من القيم Validations قبل انك تعمل معالجة لها. مثلاً تتحقق انها مش فاضية او null .. الخ. بحسب نوع القيمة المتوقع معالجتها. مثلاً (x) في الفنكشن myf انت تتوقع ان قيمة x بتكون رقم.. فتحتاج الى انك تعمل تحقق منها قبل تعمل لها بيرس parseFloat .
- التحقق دائماً يجي اول الشغل .. قبل حتى تعدل اي قيمة او تعمل اي اكشن ثاني .. وانت عملت parse اول بعدين عملت الكونديشن ! والصحيح العكس ! تعمل التحقق بعدين تعمل parse
- لما تبي تعمل parse لرقم integer دائماً احفظه في متغير جديد variable واستخدم هذا المتغير في باقي شغلك .. والمتغير الاساسي (السورس) اتركه كما هو .. وهذا بيعطيك دائماً الافضلية بانك تقدر ترجع للسورس (الغير معدل) فيما لو احتجت لذلك.
- لما يكون عندك قيم ثابته .. ادخل القيمة مباشرة ولا تعملها كعملية حسابية .. مثل الضريبة .. هي قيمتها ثابته ( 15%) المفترض انك تدخل 0.15 في الحساب .. بدل (15/100) ..
- في العناصر اللي تستخدمها لعرض النتائج .. دائماً استخدم عنصر واحد .. ولا تعمل عنصر جديد لكل عملية .. مثل انت الان عامل Wrong-ans و result .. استخدم فقط result واللعب فيه مثل ماتبي .. بيكون كذا افضل حتى للتحكم فيه وفي النتائج ..
- ال callback functions مايحتاج تعطيها تسمية .. تقدر تكتبها بدون مسمى مثل function() بشكل مباشر .. او تمرر اسم فنكشن مستقلة فيها ككول باك لها ..
- التسمية مهمة في البرمجة عموماً .. فانت دائماً احرص على انك تختار تسمية تبين مضمون الاوبجكت نفسه .. وعود نفسك على انك تمشي على نمط معين بالتسمية .. فيه انماط مشهورة ومتعارف عليها بين المبرمجين وهذا يسمونه Name Convention وهي عدد من اساليب التسمية ستاندرد في لغة برمجة .. لازم واحد من الاساليب هذي بالتسمية بتاخذها ..

- لما تبي تحفظ عنصر بالصفحة على متغير .. لاتستخدم var معه .. وانما استخدم const وهذا افضل .. حتى تمنع التغييرات عليه ..

عموماً هذا الكود نفسه معدلك عليه :

كود:
function myf(x) {
	
	Reset();
	
	if(!x) 
	{
		ourLab.style.border = "1px solid red"; 
		theWrong.innerText = "Enter a number!";
	}
	else 
	{
		var inputNumber = parseFloat(x);	
		var oNNe = (inputNumber * 0.15) + inputNumber;
		ourRes.innerText = "Total = " + oNNe;		
	}		
}

function Reset()
{
	ourRes.innerText = "";
	ourLab.value = "";
	ourLab.style.border = "";
    theWrong.innerText ="";
	
}

ourBut.addEventListener("click", Reset);

وبرضوه عملت لك الصفحة واضفت عليها موضوع الانتر وبرضوه غيرت نوع الحقل من Number الى text ووخليته فقط يقبل الارقام من الجافاسكربت .. .. بهالطريقة راح يقبل الاعداد العشرية .. وفصلت ال VAT خليته لوحده (تعاملت معها مثل الفاتورة) ... راح تلاقيها كلها على هالرابط ... ان شاء الله تستفيد منها ..

 

 

التوقيع
غالباً لا اقوم بمراجعة المواضيع التي قمت بالرد عليها! فإذا كنت تريد رد مني , فقم بإستخدام خاصية الإقتباس حتى يظهر لدي إشعار بذلك!

[مواضيع قد تهمك]
كيفية إختيار مزود الطاقة Power Supply

iSR5 غير متصل  
1 Yes No
رد مع اقتباس

قديم 28-10-2020, 07:06 AM كاتب الموضوع #3
ulamzlu
مشارك
 
الصورة الرمزية ulamzlu
 



ulamzlu @Youtube
افتراضي رد: مساعدة في تحسين كود JS DOM





مشاهدة المشاركة الأصلية
iSR5
- مشكلة زر الانتر اللي تواجهها بسبب انك ما عملت ايفينت له .. فتحتاج انك تعمل ايفينت يعمل كابتشر للانتر ومن خلاله تشغل ايفينت الكليك تبع الزر !

- بالنسبة للتكرار , دائماً اذا حسيت ان فيه كود يتكرر انقله الى فنكشن لوحده واستدعي الفنكشن بدل ماتكتب كامل الكود كذا مره !
- طريقتك سليمه ومافيها شي في اخفاء النتايج .. لان العناصر اللي بالدوم كلها string والجافاسكربت بيتعامل معها كلها ك string انت اللي تغير نوعها الى اي اوبجكت ثاني.

الملاحظات :
- تحتاج تركز على موضوع التحقق من القيم Validations قبل انك تعمل معالجة لها. مثلاً تتحقق انها مش فاضية او null .. الخ. بحسب نوع القيمة المتوقع معالجتها. مثلاً (x) في الفنكشن myf انت تتوقع ان قيمة x بتكون رقم.. فتحتاج الى انك تعمل تحقق منها قبل تعمل لها بيرس parseFloat .
- التحقق دائماً يجي اول الشغل .. قبل حتى تعدل اي قيمة او تعمل اي اكشن ثاني .. وانت عملت parse اول بعدين عملت الكونديشن ! والصحيح العكس ! تعمل التحقق بعدين تعمل parse
- لما تبي تعمل parse لرقم integer دائماً احفظه في متغير جديد variable واستخدم هذا المتغير في باقي شغلك .. والمتغير الاساسي (السورس) اتركه كما هو .. وهذا بيعطيك دائماً الافضلية بانك تقدر ترجع للسورس (الغير معدل) فيما لو احتجت لذلك.
- لما يكون عندك قيم ثابته .. ادخل القيمة مباشرة ولا تعملها كعملية حسابية .. مثل الضريبة .. هي قيمتها ثابته ( 15%) المفترض انك تدخل 0.15 في الحساب .. بدل (15/100) ..
- في العناصر اللي تستخدمها لعرض النتائج .. دائماً استخدم عنصر واحد .. ولا تعمل عنصر جديد لكل عملية .. مثل انت الان عامل Wrong-ans و result .. استخدم فقط result واللعب فيه مثل ماتبي .. بيكون كذا افضل حتى للتحكم فيه وفي النتائج ..
- ال callback functions مايحتاج تعطيها تسمية .. تقدر تكتبها بدون مسمى مثل function() بشكل مباشر .. او تمرر اسم فنكشن مستقلة فيها ككول باك لها ..
- التسمية مهمة في البرمجة عموماً .. فانت دائماً احرص على انك تختار تسمية تبين مضمون الاوبجكت نفسه .. وعود نفسك على انك تمشي على نمط معين بالتسمية .. فيه انماط مشهورة ومتعارف عليها بين المبرمجين وهذا يسمونه Name Convention وهي عدد من اساليب التسمية ستاندرد في لغة برمجة .. لازم واحد من الاساليب هذي بالتسمية بتاخذها ..

- لما تبي تحفظ عنصر بالصفحة على متغير .. لاتستخدم var معه .. وانما استخدم const وهذا افضل .. حتى تمنع التغييرات عليه ..

عموماً هذا الكود نفسه معدلك عليه :

كود:
function myf(x) {
	
	Reset();
	
	if(!x) 
	{
		ourLab.style.border = "1px solid red"; 
		theWrong.innerText = "Enter a number!";
	}
	else 
	{
		var inputNumber = parseFloat(x);	
		var oNNe = (inputNumber * 0.15) + inputNumber;
		ourRes.innerText = "Total = " + oNNe;		
	}		
}

function Reset()
{
	ourRes.innerText = "";
	ourLab.value = "";
	ourLab.style.border = "";
    theWrong.innerText ="";
	
}

ourBut.addEventListener("click", Reset);

وبرضوه عملت لك الصفحة واضفت عليها موضوع الانتر وبرضوه غيرت نوع الحقل من Number الى text ووخليته فقط يقبل الارقام من الجافاسكربت .. .. بهالطريقة راح يقبل الاعداد العشرية .. وفصلت ال VAT خليته لوحده (تعاملت معها مثل الفاتورة) ... راح تلاقيها كلها على هالرابط ... ان شاء الله تستفيد منها ..




صراحة اشكرك جداً على الملاحظات القيمة اللي كل وحده اهم من الثانيه وراح اشتغل عليهم اكيد




الكود رتبته لي ماشاء الله وحلوه طريقة (x!) ماكنت اعرف عنها

وفهمت قصدك بـ var inputNumber اسرع وسهل للتعديل

وبرضوه الـ Reset(); في البداية ليش؟ لاني شلتها ورجعتها عساس اشوف الفرق شفت انه نفس الشي ماتغير شي

وهل عادي تسوي function في البداية بعدين تسوي declare لمهامه تحت زي منت مسوي؟ لاني يوم اخذت الاساسيات عرفت ان الجافاسكربت يشتغل من فوق لتحت

والكود اللي كتبته انت في الرابط الصلاة على النبي كلين .. ولفل اعلى شوي لازم ارجعله بعد فتره زمنية من التطور

 

 

التوقيع
..




ulamzlu غير متصل  
Yes No
رد مع اقتباس

قديم 28-10-2020, 10:58 AM #4
iSR5
Laptop Support Team
 
الصورة الرمزية iSR5
 



افتراضي رد: مساعدة في تحسين كود JS DOM





SPOILER:
مشاهدة المشاركة الأصلية
ulamzlu
صراحة اشكرك جداً على الملاحظات القيمة اللي كل وحده اهم من الثانيه وراح اشتغل عليهم اكيد




الكود رتبته لي ماشاء الله وحلوه طريقة (x!) ماكنت اعرف عنها

وفهمت قصدك بـ var inputNumber اسرع وسهل للتعديل

وبرضوه الـ Reset(); في البداية ليش؟ لاني شلتها ورجعتها عساس اشوف الفرق شفت انه نفس الشي ماتغير شي

وهل عادي تسوي function في البداية بعدين تسوي declare لمهامه تحت زي منت مسوي؟ لاني يوم اخذت الاساسيات عرفت ان الجافاسكربت يشتغل من فوق لتحت

والكود اللي كتبته انت في الرابط الصلاة على النبي كلين .. ولفل اعلى شوي لازم ارجعله بعد فتره زمنية من التطور



طريقة (x!) يسمونها truthy value .. فكرتها ببساطة المتغير تكون حالته true اذا كان لا يحتوي فيه أحد هالقيم :
  • empty string مثل ""
  • null
  • undefined
  • NaN
  • 0
  • false

فبدل ماتكتب كونديشن طويل يشيك على صحة القيمة (اذا كان فيه قيمة او null ا.. الخ ) هذي اختصار ..!


بالنسبة للـ Reset() اللي في بداية الكود .. هذا يضمن لك ان في كل مره يتم استدعاء الفنكشن يعمل ريسيت للقيم بالصفحة قبل يعمل شي .. (يجهز العناصر للقيم الجديدة) وبعدها يعمل الكونديشن ويطبق القيم الجديدة على العناصر وبكذا تتفادى مشاكل لخبطة عرض النتائج بالصفحة !

بالنسبة لقراءة الكود .. نعم الجافا سكربت وباقي لغات البرمجة تقرأ من فوق لتحت ...
ولكن اللي ماتعرفه انها تقرأها مره وحده (تعمل compile) للكود كامل .. بعدها يبتدي شغل Events بناءاً على هذا الكود ..
فمايهم وين تعمل declare للفنكشن .. في اول او اخر او حتى وسط الصفحة ..


اما بالنسبة لليفل .. ترى ما انا خبير بالجافاسكربت بسبب ان شغلي متعلق اكثر بلغات ثانية .. ولكن الجافاسكربت اشتغل عليها بشكل متوسط .. هذي نقطة .. النقطة الثانية سبب اني كتبتها باسلوبي ولا نسخت اسلوبك هو اني ابيك تتعود على اختلاف اساليب البرمجة حتى لو كان فيه شي مانت متعود عليه .. لان هذا بيساعدك في تطوير مهاراتك البرمجية في الجافا .. وهالطريقة انا اتبعها مع لغات البرمجة عمومأً .. احاول اتعلم من اساليب المبرمجين الثانين .. حتى لو كانت مو مفهومه بالنسبة لي احاول اني افهمها واعرف ليش سواها بهالطريقة وابحث فيها برضوه .. كل هالاشياء تساعد في بناء مهارات برمجية متقدمة بشكل اسرع من اي طريقة ثانيه سبق وجربتها !

 

 

التوقيع
غالباً لا اقوم بمراجعة المواضيع التي قمت بالرد عليها! فإذا كنت تريد رد مني , فقم بإستخدام خاصية الإقتباس حتى يظهر لدي إشعار بذلك!

[مواضيع قد تهمك]
كيفية إختيار مزود الطاقة Power Supply

iSR5 غير متصل  
Yes No
رد مع اقتباس

قديم 28-10-2020, 11:11 AM كاتب الموضوع #5
ulamzlu
مشارك
 
الصورة الرمزية ulamzlu
 



ulamzlu @Youtube
افتراضي رد: مساعدة في تحسين كود JS DOM





مشاهدة المشاركة الأصلية
iSR5

طريقة (x!) يسمونها truthy value .. فكرتها ببساطة المتغير تكون حالته true اذا كان لا يحتوي فيه أحد هالقيم :
  • empty string مثل ""
  • null
  • undefined
  • NaN
  • 0
  • false

فبدل ماتكتب كونديشن طويل يشيك على صحة القيمة (اذا كان فيه قيمة او null ا.. الخ ) هذي اختصار ..!


بالنسبة للـ Reset() اللي في بداية الكود .. هذا يضمن لك ان في كل مره يتم استدعاء الفنكشن يعمل ريسيت للقيم بالصفحة قبل يعمل شي .. (يجهز العناصر للقيم الجديدة) وبعدها يعمل الكونديشن ويطبق القيم الجديدة على العناصر وبكذا تتفادى مشاكل لخبطة عرض النتائج بالصفحة !

بالنسبة لقراءة الكود .. نعم الجافا سكربت وباقي لغات البرمجة تقرأ من فوق لتحت ...
ولكن اللي ماتعرفه انها تقرأها مره وحده (تعمل compile) للكود كامل .. بعدها يبتدي شغل Events بناءاً على هذا الكود ..
فمايهم وين تعمل declare للفنكشن .. في اول او اخر او حتى وسط الصفحة ..


اما بالنسبة لليفل .. ترى ما انا خبير بالجافاسكربت بسبب ان شغلي متعلق اكثر بلغات ثانية .. ولكن الجافاسكربت اشتغل عليها بشكل متوسط .. هذي نقطة .. النقطة الثانية سبب اني كتبتها باسلوبي ولا نسخت اسلوبك هو اني ابيك تتعود على اختلاف اساليب البرمجة حتى لو كان فيه شي مانت متعود عليه .. لان هذا بيساعدك في تطوير مهاراتك البرمجية في الجافا .. وهالطريقة انا اتبعها مع لغات البرمجة عمومأً .. احاول اتعلم من اساليب المبرمجين الثانين .. حتى لو كانت مو مفهومه بالنسبة لي احاول اني افهمها واعرف ليش سواها بهالطريقة وابحث فيها برضوه .. كل هالاشياء تساعد في بناء مهارات برمجية متقدمة بشكل اسرع من اي طريقة ثانيه سبق وجربتها !


ماقصرت والله


فعلاً اخر نقطة .. شيكت على كود شخص اخر مره وطلعت بنتيجة ماكنت اتوقع اعملها بسبب شفت كيف صياغته مختلفه


الف شكر

 

 

التوقيع
..




ulamzlu غير متصل  
Yes No
رد مع اقتباس

إضافة رد

أدوات الموضوع

الانتقال السريع


الساعة الآن 03:22 PM.