window.addEventListener('DOMContentLoaded',() => { const language = localStorage.getItem('lang') || 'en' setLanguage(language) const options = languagesSelector.querySelectorAll('option') options.forEach(option=>{ option.value === language ? option.setAttribute('selected','') : option.removeAttribute('selected') }) }) فيه مشكلة لاحظتها لما بعمل تغيير للغة للعربي واعمل refresh بلاقيه مختار اللغة انجليزي بس الكلام عربي حاولت احلها علي قد ما اقدر وجزاك الله خيرا
@@elmohtreftube-1267 آسف كنت فاهم غلط، لأنه الفايرفوكس ما في داعي انه تعمل هالاشي يدوي فكان يشتغل ويخزن اللغة المختارة حتى بعد الرستارت، بس لما جربت على الكروم المشكلة موجودة. لكن انا فعلياً مش شايف اي مشكلة بالكود تبعك، كنت بالبداية مفكر انك مستخدم double quotes بس ال syntax صحيح ،حتى جربت انسخه عندي بداخل ال set language function وبرضو اشتغل بدون مشاكل على الكروم
@@anasomar1 ولا يهمك انا بس لقيت مشكلة وحليتها وحبيت افيدك وجزاك الله خير علي الفيديو انا مكنش عندي معلومة ازاي اغير لغة الموقع بالجافاسكريبت وحضرتك فيدتني
@@elmohtreftube-1267 شكراً كثير عالمساعدة، رح احدث الكود بالوصف لما اتفرغ واثبت تعليقك، انا بصراحة كنت مفكرك بتسأل، انه واجهتك مشكلة وبدك مساعدة عشان هيك فكرت في خطأ بالكود بالبداية لحد ما فهمت قصدك
في الدقيقة 20:03 بإمكانك اضافة شرط اضافي في حال كانت اللغة غير متوفرة بذاكرة التخزين المحلية (عندما يستخدم المستخدم الموقع لأول مرة) localStorage.getItem("lang") || "en" حيث اذا كانت قيمة الجزء الأول غير متوفرة (null) سيستخدم القيمة الثانية وهي "en". تم تحديث الكود بالوصف.
so many video in youtube and i watched all of them , all of them was useless but you saved my day . thank you ... i dont know what you say but i followed you step by step and it worked . ,,,,,,, LIKED and SUBSCRIBED
ممتاز جدا . ربنا يزيدك لكن المشكلة لو المشروع كبير تخيل كل كلمة يكون ليه ترجمة هل في حل بالإضافة إلى تحريك العناصر داخل الصفحة هل dir فقط هى اللى بتتغير فقط وإلا محتاج اعمل ملف css تانى للعناصر
حتى بالمشاريع الكبيرة دائماً الترجمة كلمة كلمة او جملة جملة، لكن بتكون العملية أول بأول، يعني ما بكون مشروع كامل جاهز وبتبدأ تترجم فيه، دائماً بتخلي براسك فكرة انه كل كلمة بتضيفها لازم تكون localized فلما تضيف الكلمات اول بأول ما رح تواجه مشاكل، حتى المشاريع اللي مصممة ب React وغيره وبتستخدم مكاتب للترجمة لازم تترجم كل اشي. بالنسبة لل dir بتغير الجهة للعناصر وممكن تستخدمها بداخل العناصر كمان، مش شرط فقط في بداية المشروع، لأغلب العناصر ما رح تواجه مشاكل وبكفي انك تعملها مرة وحدة لكن ممكن احيانا تحتاج تعدل بعض الاشياء بال css لحالات خاصة بتكون معقدة شوي ومحتاج تصميمها يتغير
عفواً، نعم لكن بدل ما تعرف ال translations يدوياً، بإمكانك تطلب الترجمات من السيرفر وتنتظر الحصول علىهم قبل ما تغير اللغة، اذا اختلف شكل object الترجمات رح تحتاج تغير بعض الأمور
نفس الفيديو عادي، اذا بتحب تستخدم JQuery بدل ال document.querySelector رح تستخدم $ وبدل مثلاً addEventListener بتستخدم on $(element).on('click') او 'change' عادي نفس الطريقة بس استخدم Jquery methods.
نفس الفكرة بس بدل ما تكتب element.textContent بتكون element.placeholder ممكن تستخدمله data- غير عن المستخدمة للعناصر الداخلية، او ممكن تضيف شرط وانت بتمر على العناصر انه اذا كان العنصر input مثلاً، عدّل ال placeholder بنفس قيمة ال data-i18n، يعني فقط لعناصر ال input
@@ahmadsalloum179 اسف ما انتبهت للتعليق، بما انه ما في ايرور يمكن غلطان باسم عنصر او في غلطة ثانية صغيرة، اذا بتحب ابعتلي الكود او تأكد من انه كل التسميات صح ولما تطبع كل عنصر منهم ببين صح
وعليكم السلام، الفكرة نفسها لكن بدل ما تستخدم select change event بتضيف event listener على الأعلام نفسهم وبتسمع الclick بمجرد الضغط على اي زر منهم بتغير اللغة للغة الزر، سواء كانت عربية او فرنسية او انجليزية او غيره. يعني رح يكون في event listener على الزرين
@@anasomar1 ربنا يجازيك شكرا . تمام لم اتابع درس جيدا وجدت الفكرة يومها عندي سؤال اخر Welcome to TAOUAB ما بيظهر عند الترجمة لاني مغير ستايل span النص داخل
السلام عليكم, شكرا لك الحل اكثر من رائع انا عندي استفسار لك هل في طريقة نخلي الموقع يتعامل طبيعي علي اللغتين؟ انا استخدمت الطريقة لموقع عندي علي اكثر من صفحة بس في مشكلة لما المستخدم يختار لغة عربي لما ليجي يعمل ريفريش او ينتقل لصفحة اخري الصفحة بتبدأ انجليزي لمدة ثواني ثم ببتحول عربي انا بخزن عربي في ذاكرة اتلخيزن للتصفح
@muhammadnasr5395 @basmaalkhameri9388 اعتذر عالتأخير بالرد، اذا بتستخدم جافاسكريبت للتحويل بين اللغات للأسف رح يكون في فترة قصيرة بيتم فيها التحويل بين اللغتين لانه الجافاسكريبت بشتغل بعد ال HTML. لكن اذا بدك الصفحات من البداية تكون ظاهرة باللغة اللي بدك اياها، بإمكانك مثلاً تعمل صفحتين، الصفحة الاساسية للغة الاساسية، وصفحة ثانية html تنقل المستخدم على النسخة المترجمة، يعني نفس الملف، لكن كل ملف بستخدم لغة ويكون رابط للصفحة الثانية. او بإمكانك تستخدم server side rendering اذا كنت بتستخدم اشي مثل next.js, ejs او غيره عشان تكون عارف اللغة عالسيرفر من قبل ما يفتح الموقع، وترسم الصفحة باللغة اللي عندك من البداية. لكن رح تحتاج سيرفر
شكرا علي الرد. اذا انا بستخدم لغة flask كيف اتعامل مع هذا الموقف, وبردو مع بوتستراب بياخد وقت علي اما يغير الاتجاه وتظهر الصفحة بشكل غير مظبوط, هل في طريقة باستخدام الترجمة او اعرض شيْ قبل اما الصفحة تظهر@@anasomar1
window.addEventListener('DOMContentLoaded',() => {
const language = localStorage.getItem('lang') || 'en'
setLanguage(language)
const options = languagesSelector.querySelectorAll('option')
options.forEach(option=>{
option.value === language ? option.setAttribute('selected','') : option.removeAttribute('selected')
})
})
فيه مشكلة لاحظتها لما بعمل تغيير للغة للعربي واعمل refresh بلاقيه مختار اللغة انجليزي بس الكلام عربي
حاولت احلها علي قد ما اقدر
وجزاك الله خيرا
اهلاً، الاشي اللي انا لاحظته هو السطر اللي جوا ال for each
option.setAttribute('selected','')
في خطأ بعلامات الاقتباس، في فاصلة وعلامة اقتباس زيادة
@@anasomar1 مهو عشان ميثود setAttribute لازم تستقبل name And Value
وفي الحالة دي ال option هتاخد اتتربيوت اسمه selected وده مبياخدش اي قيمه
@@elmohtreftube-1267 آسف كنت فاهم غلط، لأنه الفايرفوكس ما في داعي انه تعمل هالاشي يدوي فكان يشتغل ويخزن اللغة المختارة حتى بعد الرستارت، بس لما جربت على الكروم المشكلة موجودة.
لكن انا فعلياً مش شايف اي مشكلة بالكود تبعك، كنت بالبداية مفكر انك مستخدم
double quotes
بس ال syntax صحيح
،حتى جربت انسخه عندي بداخل ال set language function
وبرضو اشتغل بدون مشاكل على الكروم
@@anasomar1 ولا يهمك انا بس لقيت مشكلة وحليتها وحبيت افيدك وجزاك الله خير علي الفيديو انا مكنش عندي معلومة ازاي اغير لغة الموقع بالجافاسكريبت وحضرتك فيدتني
@@elmohtreftube-1267 شكراً كثير عالمساعدة، رح احدث الكود بالوصف لما اتفرغ واثبت تعليقك، انا بصراحة كنت مفكرك بتسأل، انه واجهتك مشكلة وبدك مساعدة عشان هيك فكرت في خطأ بالكود بالبداية لحد ما فهمت قصدك
في الدقيقة 20:03
بإمكانك اضافة شرط اضافي في حال كانت اللغة غير متوفرة بذاكرة التخزين المحلية (عندما يستخدم المستخدم الموقع لأول مرة)
localStorage.getItem("lang") || "en"
حيث اذا كانت قيمة الجزء الأول غير متوفرة (null) سيستخدم القيمة الثانية وهي "en".
تم تحديث الكود بالوصف.
شرحك رائع سلس بسيط ليتك تعمل شروحات للHTML و CSS و Js بهذه البساطة
بارك الله فيك ماشاء الله شرح وافي جدا الحمد لله لله إني لقيت هذا الفديو لأنو علمني حاجة مهمة جدا كنت ادور عليها
ماشاء الله ماشاء الله
الشرح ممتاز جدا
عاشت ايدك و بارك الله فيك
بارك الله فيك شرح وافي جدا
so many video in youtube and i watched all of them , all of them was useless but you saved my day . thank you ... i dont know what you say but i followed you step by step and it worked . ,,,,,,, LIKED and SUBSCRIBED
Glad it worked. If you are confused about anything and need me to explain it let me know and I'd be happy to help you
@@anasomar1 thanks a lot i will do that bro
فيديو أكتر من رائع وأفادني كتير
شكرًا جدًا لحضرتك يا أستاذ أنس
يعطيك العافية على الشرح الجميل
الله يعافيك يا رب
يعطيك العافية حل بسيط و رائع 👌
عاش يا اخي يرحم بوك
Wery good bro
Love ❤️ you in Azerbaijan
شرح جميل جدا، طيب اذا عندك كلمات مو معروفه جايه من قاعدة البيانات كيف اترجمها؟
شكرا أخي علي الشرح، بس عندي سؤال هل هذه الطريقة seo friendly ؟
هل يمكن إضافة عدة لغات لو كان موقعي باللغة الإنجليزية مثلا وشخص اخر يبحث باللغة الفرنسية يظهر له موقعي باللغه الفرنسية
ياليت تسوي لنا دورة للجافا سكربت
هل في موضوع معين من الجافاسكريبت؟ لأنه في كثير دورات على اليوتيوب لشرح جافاسكريبت باللغة العربية
@@anasomar1 لا مافيه موضوع معين بس ابي افضل دورة للجافا سكربت
طب بالنسبة للSEO ?
ازاي اقدر اتعامل معاه باختلاف المحتوى من الclient side فقط
كدا لو المحتوى الاصلي انجليزي، هيحصل مشكلة في البحث على الموقع بالعربي
when i load the page the transition of the language appears (en => arabic or arabic => en) how can we fix that ?
شكرا جداً
عفواً
هل تعرف node js لكي اطلب منك طلب
السلام عليكم اخي . شكرا عل شرح بس واجهتني مشكلة انو بعض الكلمات بعد الترجمة عم تختفي .شو الحل اخي ممكن مساعدة
بتنحفظ عندي القيمة بـ localStorage
بس لما اسوي تحديث للصفحة مابغير اللغة ماعرف ليه؟
هل عند عمل refrech للصفحة تظل اللغة المحددة موجودة ام تختفي ؟
استاذي الفاضل اعاني من مشكلة في القائمة المنسدلة عند اختيار لغة معينة تختفى الاخرى وتظهر بلون ابيض بدون كتابة
بصراحة صعب أعرف بدون ما اشوف الكود، احتمال تكون غلطت بكتابة اشي معين، الكود موجود بالوصف بتقدر تقارن وتشوف شو المشكلة او تكتب الكود هون وبحاول اساعدك.
@@anasomar1 الكود نسخ ولصق وحتى تسميات ال html
@@منتصركاظم-ق2ق غريب، هل لما تفتح ال
Inspect element (Console)
بتشوف أي مشاكل بتظهر، يعني هل في مشاكل بالجافاسكريبت؟ وشو المتصفح اللي بتستخدمه؟
ممتاز جدا . ربنا يزيدك لكن المشكلة لو المشروع كبير تخيل كل كلمة يكون ليه ترجمة هل في حل بالإضافة إلى تحريك العناصر داخل الصفحة هل dir فقط هى اللى بتتغير فقط وإلا محتاج اعمل ملف css تانى للعناصر
حتى بالمشاريع الكبيرة دائماً الترجمة كلمة كلمة او جملة جملة، لكن بتكون العملية أول بأول، يعني ما بكون مشروع كامل جاهز وبتبدأ تترجم فيه، دائماً بتخلي براسك فكرة انه كل كلمة بتضيفها لازم تكون
localized
فلما تضيف الكلمات اول بأول ما رح تواجه مشاكل، حتى المشاريع اللي مصممة ب React وغيره وبتستخدم مكاتب للترجمة لازم تترجم كل اشي.
بالنسبة لل
dir
بتغير الجهة للعناصر وممكن تستخدمها بداخل العناصر كمان، مش شرط فقط في بداية المشروع، لأغلب العناصر ما رح تواجه مشاكل وبكفي انك تعملها مرة وحدة لكن ممكن احيانا تحتاج تعدل بعض الاشياء بال css لحالات خاصة بتكون معقدة شوي ومحتاج تصميمها يتغير
@@anasomar1 متشكر جدا
شكرا لك هل هده طريقة تشتغل مع باكند لغات السرفر ؟
عفواً، نعم لكن بدل ما تعرف ال
translations
يدوياً، بإمكانك تطلب الترجمات من السيرفر وتنتظر الحصول علىهم قبل ما تغير اللغة، اذا اختلف شكل
object
الترجمات رح تحتاج تغير بعض الأمور
هل يوجد طريقة لاضافة تعدد اللغه باستخدام الـ jquery ؟؟
نفس الفيديو عادي، اذا بتحب تستخدم JQuery بدل ال document.querySelector رح تستخدم $
وبدل مثلاً addEventListener بتستخدم on
$(element).on('click')
او 'change'
عادي نفس الطريقة بس استخدم Jquery methods.
moch radhi te5dem lema 3mlet import translations from "./translations.js";
moch 3aref lich
طب كيف ممكن نغير الترجمة الي في placeholder
نفس الفكرة بس بدل ما تكتب element.textContent بتكون element.placeholder
ممكن تستخدمله
data-
غير عن المستخدمة للعناصر الداخلية، او ممكن تضيف شرط وانت بتمر على العناصر انه اذا كان العنصر
input مثلاً،
عدّل ال placeholder بنفس قيمة ال data-i18n، يعني فقط لعناصر ال
input
ممكن تعملها بس ريأكت ❤
شكرا كتير الك ... انا طبقت كل اشي ومشي الحال بس لما يصير الموقع responsive بتبطل تتغير اللغات ... شو الحل ؟
غريب لانه الموقع عندي شغال على التلفون والأحجام الأصغر، لما تفتح الconsole على الحجم الصغير وتغير اللغة شو الايرور اللي بعطيك اياه المتصفح؟
@@anasomar1 انا عم حط السليكتور ضمن nav bar ul li وما عم ياخد الترحمات
مافي error بالكونسول
@@ahmadsalloum179 اسف ما انتبهت للتعليق، بما انه ما في ايرور يمكن غلطان باسم عنصر او في غلطة ثانية صغيرة، اذا بتحب ابعتلي الكود او تأكد من انه كل التسميات صح ولما تطبع كل عنصر منهم ببين صح
@@anasomar1 وين ابعتلك الكود ؟
@@ahmadsalloum179 على إيميلي
anasyaseen1@outlook.com
او ضيفني على حسابي اللينكد ان بالوصف اذا عندك حساب
السلام عليكم
بارك الله فيك على الدرس
لاكني لا اريد استعمال select
اريد استعمال ايقونات الاعلام
هل يمكنك المساعدة و شكرا
وعليكم السلام، الفكرة نفسها لكن بدل ما تستخدم
select change event
بتضيف event listener على الأعلام نفسهم وبتسمع الclick
بمجرد الضغط على اي زر منهم بتغير اللغة للغة الزر، سواء كانت عربية او فرنسية او انجليزية او غيره.
يعني رح يكون في event listener على الزرين
@@anasomar1 ربنا يجازيك شكرا
. تمام لم اتابع درس جيدا وجدت الفكرة يومها
عندي سؤال اخر
Welcome to
TAOUAB
ما بيظهر عند الترجمة لاني مغير ستايل span النص داخل
السلام عليكم, شكرا لك الحل اكثر من رائع
انا عندي استفسار لك
هل في طريقة نخلي الموقع يتعامل طبيعي علي اللغتين؟
انا استخدمت الطريقة لموقع عندي علي اكثر من صفحة بس في مشكلة
لما المستخدم يختار لغة عربي لما ليجي يعمل ريفريش او ينتقل لصفحة اخري
الصفحة بتبدأ انجليزي لمدة ثواني ثم ببتحول عربي
انا بخزن عربي في ذاكرة اتلخيزن للتصفح
لقيت حل للمشكلة ؟
@@basmaalkhameri9388 لا
@muhammadnasr5395
@basmaalkhameri9388
اعتذر عالتأخير بالرد، اذا بتستخدم جافاسكريبت للتحويل بين اللغات للأسف رح يكون في فترة قصيرة بيتم فيها التحويل بين اللغتين لانه الجافاسكريبت بشتغل بعد ال
HTML.
لكن اذا بدك الصفحات من البداية تكون ظاهرة باللغة اللي بدك اياها، بإمكانك مثلاً تعمل صفحتين، الصفحة الاساسية للغة الاساسية، وصفحة ثانية
html
تنقل المستخدم على النسخة المترجمة، يعني نفس الملف، لكن كل ملف بستخدم لغة ويكون رابط للصفحة الثانية.
او بإمكانك تستخدم server side rendering اذا كنت بتستخدم اشي مثل next.js, ejs او غيره
عشان تكون عارف اللغة عالسيرفر من قبل ما يفتح الموقع، وترسم الصفحة باللغة اللي عندك من البداية. لكن رح تحتاج سيرفر
شكرا علي الرد. اذا انا بستخدم لغة flask كيف اتعامل مع هذا الموقف, وبردو مع بوتستراب بياخد وقت علي اما يغير الاتجاه وتظهر الصفحة بشكل غير مظبوط, هل في طريقة باستخدام الترجمة او اعرض شيْ قبل اما الصفحة تظهر@@anasomar1
شكرا لك