كيفية إختيار select عند الذهاب إلى مسار في js

وعليكم السلام ورحمة الله وبركاته.

هل يمكنك إرسال ملفات html الخاصة بالصفحة التي يوجد بها ال select وأيضا الصفحة التي يوجد تحتها زر إستماع وأيضا عناوين url التي يتم الذهاب إليها وذلك لمساعدتك بشكل أفضل.

ازاي

بتاريخ 44 دقائق مضت قال محمد عاطف17:

وعليكم السلام ورحمة الله وبركاته.

هل يمكنك إرسال ملفات html الخاصة بالصفحة التي يوجد بها ال select وأيضا الصفحة التي يوجد تحتها زر إستماع وأيضا عناوين url التي يتم الذهاب إليها وذلك لمساعدتك بشكل أفضل.

بصوت القرآن بكل حاجة؟ 

بتاريخ 8 دقائق مضت قال Mostafa Reaooo:

ازاي

بصوت القرآن بكل حاجة؟ 

لا فقط هيكل الصفحة فقط عناصر html .

هل تضع الاصوات وكل شئ في الصفحة ام تستخدم خادم لجلب تلك الملفات ؟

كل شئ من عندي على الحاسوب

بتاريخ 3 دقائق مضت قال محمد عاطف17:

لا فقط هيكل الصفحة فقط عناصر html .

هل تضع الاصوات وكل شئ في الصفحة ام تستخدم خادم لجلب تلك الملفات ؟

بتاريخ 20 دقائق مضت قال محمد عاطف17:

لا فقط هيكل الصفحة فقط عناصر html .

هل تضع الاصوات وكل شئ في الصفحة ام تستخدم خادم لجلب تلك الملفات ؟

عايز بس اوضح ان كل لغة لوحدها يعني css لوحدها وhtml وjava script كمان 

سأوضح لك بمثال وحاول تطبيقه على مشروعك، لكن للعلم ستوفر على نفسك الكثير لو تعلمت جافاسكريبت فهي اللغة البرمجية الخاصة بالويب وبدونها لن تتمكن من أن تصبح مطور للواجهة الأمامية Front-End حيث ستقوم ببناء مواقع ثابتة بدون أي تفاعل حقيقي.

أولاً عند إنشاء كروت السور في صفحة الرئيسية، أضف سمة data-sura-name لكل كرت، واحفظ فيها اسم السورة.

<div class="sura-card" data-sura-name="الفاتحة">
    <h2>الفاتحة</h2>
    <button class="listen-button">استماع</button>
</div>

بعد ذلك علينا معالجة النقر على زر استماع من خلال جافاسكريبت كالتالي:

• إضافة حدث onclick لزر استماع في كل كرت.
• عند النقر، نحصل على اسم السورة من سمة data-sura-name للكرت.
• نستخدم window.location.href لتحويل المستخدم إلى صفحة القرآن مع تمرير اسم السورة كمعامل في عنوان URL.

const listenButtons = document.querySelectorAll('.listen-button');

listenButtons.forEach(button => {
  button.addEventListener('click', () => {
    const suraName = button.parentElement.getAttribute('data-sura-name');
    window.location.href = `quran.html?sura=${suraName}`;
  });
});

الآن علينا معالجة اسم السورة في صفحة القرآن من خلال القيام بالتالي بجافاسكريبت أيضًا:

1. استخدم URLSearchParams للحصول على اسم السورة من عنوان URL.
2. حدد اسم السورة في عنصر select باستخدام value.
3. ثم نشغل الصوت تلقائيًا باستخدام JavaScript.

const urlParams = new URLSearchParams(window.location.search);
const suraName = urlParams.get('sura');

const suraSelect = document.getElementById('sura-select');
suraSelect.value = suraName;

// شغل الصوت تلقائيًا من خلال إنشاء دالة خاصة بذلك وتمرير اسم السورة إليها)
playAudio(suraName);

لاحظ getElementById('sura-select') نحصل من خلالها على العنصر select لتغيير قيمة السورة به.

لذا عليك تعديل أسماء الكلاسات بما يتناسب مع كود HTML لديك، بالتالي يجب إمتلاك أساسيات جافاسكريبت على الأقل.

بتاريخ 12 ساعة قال Mostafa Reaooo:

كل شئ من عندي على الحاسوب

يبدوا أنك تبني مشروع ثابت static ولا تتسعمل لغة برمجة لإنشاء خادم (back end) و لا تستخدم إطار عمل للواجهة الأمامية ويفضل تعلم إطار عمل أفضل .

الأفضل لو أرسلت لى عناصر HTML لمساعدتك وإنشاء كود جافا سكريبت بناء على الموقع الخاص بك ولكن سأقوم بإرشادك بالطريقة ويمكنك عمل مثلها .

في زر الإستماع يمكنك جعله عنصر a حيث عند الضغط عليه يذهب إلى رابط السورة . ولكن في نهاية هذا الرابط نقوم بوضع معرف السورة أو رقمها وهو ترتيبها في القرآن . هكذا مثلا :

<a href="?q=2">إستماع</a>

وهنا لاحظ أنني وضعت رقم 2 وهو ترتيب سورة البقرة أى عندما سيتم الذهاب إلى الرابط هذا نستطيع قراءة العنوان و معرفة السورة الحالية التي يريد المستخدم الإستماع لها .

والآن في الملف الخاص بالإستماع إلى السورة نضع الكود التالي :

const query = new URLSearchParams(window.location.search);
const q = urlParams.get('q');

let select_audio = document.getElementById('audio');
select_audio.value = q;

let audio = new Audio(q);
audio.play();

ولكن يجب الإنتباه إلى العديد من الأشياء . أولا هو أن عنصر ال select القيمة value الخاصة بعناصر ال option يجب أن تكون هي القيمة التي يتم وضعها في العنصر a في زر الإستماع السابق . وأيضا يجب على تلك القيمة أن تحوى إسم الملف الذي تريد تشغيله . فمثلا لو سورة البقرة الملف لديك بإسم "'2.mp3" فيجب أن تكون قيمة ال value في عنصر ال option هي "'2.mp3" والعنوان الذي تذهب إليه يجب أن يكون به :

?q=2.mp3

يمكنك تجربة الكود السابق على الكود الذي لديك إذا وجدت صعوبة في شئ يرجى إرسال ملف HTML فقط للنظر إليه .

وعليكم السلام ورحمة الله وبركاته,

أتمنى تزويد الكود لكي نعمل على المساعدة بشكل أفضل.

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

يمكنك عمل صفحة ال HTML كالتالي:

<form id="form">
    <label for="suraOptions">اختر صورة</label>
    <select id="suraOptions" name="suraName">
        <option value="al-fatiha">الفاتحة</option>
        <option value="al-nas">الناس</option>
    </select>
</form>

حيث سيكون جميع الأصوات في مجلد اسمه sounds ويكون صيغة الصوت .mp3 ويكون اسم السورة نفس اسم ال value الذي في الHTML

يمكنك عمل دالة لتشغيل الصوت عندما يأخذ اسم السورة كمعامل parameter كالتالي:

function playSound (name) {
    var audio = new Audio("sounds/" + name + ".mp3");
    audio.play();
}

يمكنك وضع اسم كل سورة داخل option في ال value وعلى أساسه نختار اسم السورة عند الضغط على الزر.

function optionName() {
    // نختار العنصر من خلال ال id
    const element = document.getElementById("suraOptions");

    // ملاحظة لو حصل تغير بالقائمة
    element.addEventListener("change", function() {
        // اختيار العنصر
        const selectedOptionName = element.options[element.selectedIndex];
        return selectedOptionName;
    });
}
// تشغيل الصوت حسب الاسم
playSound(optionName());

بتاريخ منذ ساعة مضت قال عماد شيخ العشرة:

وعليكم السلام ورحمة الله وبركاته,

أتمنى تزويد الكود لكي نعمل على المساعدة بشكل أفضل.

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

يمكنك عمل صفحة ال HTML كالتالي:

<form id="form">
    <label for="suraOptions">اختر صورة</label>
    <select id="suraOptions" name="suraName">
        <option value="al-fatiha">الفاتحة</option>
        <option value="al-nas">الناس</option>
    </select>
</form>

حيث سيكون جميع الأصوات في مجلد اسمه sounds ويكون صيغة الصوت .mp3 ويكون اسم السورة نفس اسم ال value الذي في الHTML

يمكنك عمل دالة لتشغيل الصوت عندما يأخذ اسم السورة كمعامل parameter كالتالي:

function playSound (name) {
    var audio = new Audio("sounds/" + name + ".mp3");
    audio.play();
}

يمكنك وضع اسم كل سورة داخل option في ال value وعلى أساسه نختار اسم السورة عند الضغط على الزر.

function optionName() {
    // نختار العنصر من خلال ال id
    const element = document.getElementById("suraOptions");

    // ملاحظة لو حصل تغير بالقائمة
    element.addEventListener("change", function() {
        // اختيار العنصر
        const selectedOptionName = element.options[element.selectedIndex];
        return selectedOptionName;
    });
}
// تشغيل الصوت حسب الاسم
playSound(optionName());

 

طب هو انا المفروض قادما بعد ما اخلص تصميم الموقع خالص ابدأ اعمل mysql واظبطه بحيث انه يكون لكل مستخدم اسم وباسوورد وجلسة هل انا ماشي غلط.؟ 

وبعدين الموقع ده داخل بيه مسابقة والمفروض ابعته مضغوط هل انا كده غلط.؟ 

افيدوني وشكراً لذوق حضراتكم ولكل حد ساعدني

تصميم متطلبات الموقع وتسجيل الدخول يتم بناء على المنتج النهائي المراد أن يظهر للاخرين,

قبل بناء الموقع يجب تحديد الهدف من الموقع وتحديد الفئة المستخدمة وتحديد المتطلبات وعلي هذه المعطيات يتم بناء الموقع إن كان يتطلب قاعدة بيانات أو تسجيل أو أي متطلبات أخرى فيجب فعلها وإن كان لا يتطلب فلا يجب فعلها,

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

تمنياتي لك بالتوفيق.