Adnane Kadri

يمكنك استخدام محدد يخص عنصر option يحوي القيمة المستهدفة واسناد الخاصية selected له. نستعمل المحدد option[value="target_value"] لتحديد هذا العنصر: var target = $('option[value="value 3"]'); ثم اسناد القيمة selected للخاصية selected لهذا العنصر: target.attr('selected','selected')

بجانب ما اقترحه المدرب حسن، يمكنك ايضا استعمال الصنف الزائف after:: او before:: لإنشاء عنصر بوضعية مطلقة position absolute تحكم في تموضعه: .bg::after{ background-image: url(path/to/image); position: absolute; top:0; left:0; height:100%; width:100%; opacity:0.4; content:''; } لاحظ أن الحاوي يجب ان يمتلك الوضعية relative ايضا: .container { position: relative; } يمكنك ايضا تشكيل الخلفية من طبقة بيضاء نتحكم في شفافيتها + صورة. يكون ذلك كـ: .bg{ background-size: cover; height: 500px; background: linear-gradient( rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) ), url(imgage.jpg); } يعطي هذا نفس المقاربة ايضا.

يمكنك استعمال التابع serializeArray لتحليل كامل المدخلات واعدادها في مصفوفة كائنات. <form> <input type="radio" name="active" value="1" checked="checked" /> <input type="radio" name="active" value="0" /> <input name="title" type="text" /> <input name="subtitle" type="text" /> </form> <button onclick="getData()"> get data </button> شيفرة الجافاسكربت: function getData(){ var data = $('form').serializeArray(); console.log(data) } الناتج: [{ name: "active", value: "1" }, { name: "title", value: "TITLE VALUE" }, { name: "subtitle", value: "SUBTITLE VALUE" }] يمكنك انشاء ازواج key-value انطلاقا من قيمة واسم كل حقل عن طريق المرور حول كل كائن من المصفوفة من الناتج. يكون المنطق العملية مشابها لـ: function getData(){ var data = {}; var dataArray = $('form').serializeArray(); for(var i=0; i < dataArray.length ; i++){ data[dataArray[i].name] = dataArray[i].value; } console.log(data) } الناتج: { active: "1", subtitle: "SUBTITLE VALUE", title: "TITLE VALUE" } jQuery

يمكنك ايضا الوصول اليه من خلال تمرير id عبر التابع prop كـ: var myId = $("span").parent().prop("id"); التابع ‎‎.prop()‎‎ في jQuery الفرق بين خاصيات Attributes) HTML‎) وخاصيات الكائنات (Properties)

رغم ان الحاجة الى انموذج PSD لتكويد موقع ليس بمشكلة ابدا لك كمطور واجهات امامية في الغالب ولكن لا مشكلة بتعلم غير ذلك. ففريق الـ web integration الذي يحول بالتصميم الى ما هو قابل للتفسير من قبل المتصفحات غالبا ما يكون منفصلا عن فريق تصميم الويب web ui/ux design الذي يهتم بالعمل على واجهة الاستخدام وتجربته. عموما، يلجئ مصممو الويب وحتى المصورون وكتاب المحتوى وغيرهم الى ما يعرف بالتغذية البصرية. وهي عملية الاطلاع على أعمال من ذات الجنس الذي تشتغل عليه بشرط ان تكون ذات مستوى اعلى من تلك التي تستطيع استلهامها بنفسك. ثم التعرض لها بشكل مستمر ومحاولة تحليل مكوناتها. من شأن هاته العملية البطيئة والمستمرة أن تطور حسك الفني وقدرتك على الابداع وعلى إنشاء تصاميم عصرية واحترافية. بل وحتى انها عملية سترافقك طول مدة انتاجك في المجال. ابحث دوما عن نماذج ما تقوم به.

ليس هنالك تشكيلة ألوان معينة تجعل العملاء يكتسبون ثقة أكبر عند تصفحهم لموقعك الشخصي. فكامل تشكيلات الألوان جميلة وجذابة ان استعملت في سياقها على نحو مضبوط. فالموقع الشخصي يفترض أن يعبر عنك على وجه الخصوص، وبالتالي فأنت لا تريد ان تستعمل الوانا ذات ايحاءات لا تعبر عنك فتعطي انطباعا خاطئا عنك للعملاء. يجب عليك اختيار تركيبات الوان تحمل دلالات وايحاءات تحس انها تعبر عنك او عن صفات فيك او عن ميولات لك. خذ تدرجات عديدة لهذا اللون واعمل بها. ركز ايضا على ان لا تتجاوز الالوان المضمنة 3 او 4 الوان، واستعمل تدرجات مختلفة لنفس اللون بحسب أهمية العنصر او ترتيب ظهوره. تعرف على ايحاءات الالوان اكثر من هاته المقالة: قم مثلا بتحديد: لون skin خاص بعنصر body. لون لخلفية حاويات مستوى اول (رئيسية). لو لخلفية حاويات مستوى ثان (فرعية). لون للنصوص ذات مستوى اول. لون للنصوص ذات مستوى ثان. لون حدود رئيسي. لون ضل رئيسي. ثم استخلص تشكيلة ألوان color pallete انطلاقا من هاته الالوان التي تعبر عنك. ووزعها على ما حددته. اجعل التعديل على قيم هاته الألوان سهلة حتى يمكنك التوسع فيها او تعديلها مستقبلا. وقم بالتلاعب بهاته القيم في سياق تشكيلة الوانك الى حد ان تتلائم. اعرف اكثر ايضا عن:

نذكر من بين المواقع: webdesign-inspiration siteinspire dribbble pinterest codepen بعضها متخصص في تجميع تصاميم مواقع ويب وبعضها الآخر يحتوي طرقا للبحث عن وسوم او كلمات مفتاحية تخص تصميم الويب، يمكنك الاستعانة بكليهما. من العملي جدا ايضا استعمال google images لذات الغرض. سيعلمك البحث بفعالية عن ما تريد. يجب ايضا النظر الى اي موقع تقوم بتصفحه او زيارته كمصدر الهام. ايضا تعلم البحث عن الهام بخصوص مكونات وجزئيات في صفحة الويب خاصتك ولا تستهدف صفحات كاملة. سيعطيك هذا نظرة ادق ويتطلبك التنسيق بينها واعطاءها لمسات خاصة تميز التصميم على نحو خاص.

أنت تقوم بتحديد تبويبة Block . للحصول على ذات الخيارات في القسم الجانبي لصفحة اضافة المنشور في النسخ الاقدم من وردبرس: قم بالتوجه الى تبويبة post في الصفحة الجديدة. ستظهر لك كامل الادوات في القائمة الجانبية

جرب تمرير الخاصية self_ كمعامل ثان للتابع open كالتالي: window.open("https://site.co","_self")

يوجد بالفعل زر من نوع reset يقوم بإعادة القيم المسندة لحقول الادخال في استمارة ما لقيمتها الافتراضية. يمكنك الاستعانة به مباشرة: <form> <input type="file" name="file"> <button type="reset"> reset </button> </form> اما ان تطلب الامر فعل ذلك برمجيا، يمكنك مباشرة تجاوز قيمة value الخاصة بهذا الحقل وفقط. <form> <input type="file" name="file" id="file"> <button type="button" id="reset" onclick="file.value = ''"> reset </button> </form>

قم بالاستعلام عن العدد الاجمالي للسطور المدرجة ضمن جدول ما، ثم استعمل ذلك في تقييد شيفرة برمجية بشرط ما. مثال: $result = mysql_query('SELECT COUNT(1) FROM target_table'); $num_rows = mysql_result($result, 0, 0); if($num_rows > 10) { // في حالة تجاوز عدد الصفوف لهذا العدد قم بداخل الشرط }

توجد مكتبة Dropzone.js أظنها الأفضل والأكثر شيوعا، تمتلك حتى جزء خاص بالتلاعب مع الملفات على مستوى الخادم، تثبت عن طريق: npm install --save dropzone او عن طريق تضمين الملفات المصدرية: <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" /> ثم تمرير معرف العنصر المستهدف الى التابع الباني الخاص بهاته المكتبة: let myDropzone = new Dropzone("div#myId", { url: "/file/post"}); تعرف عن المكتبة اكثر من خلال التوثيق الخاص بها.

من المهم جدا الاستعانة بنافذة الطرفية console لتشخيص الأخطاء والعمل عليها. في codepen يمكن الوصول اليها عن طريق الضغط على تبويبة console في الشريط السفلي. عند التبديل بين خيارات القائمة المسندلة يظهر الخطأ: Uncaught ReferenceError: actor is not defined وذلك لأن الوظيفة actor المسندة لحدث onchange: <div class="tagrba" onchange="actor(this.Valuo)"> <h2 id="h2"> </h2> </div> غير معرفة فهي موجودة في شيفرة الجافاسكربت كـ actore (انتبهي الى الخطأ في this.Valuo ايضا، هل تقصدين this.value؟) أيضا، راجع اسناد وظيفة الى حدث onchage خاصة بعنصر div من الاساس. سيضل الخطأ Uncaught ReferenceError: actore is not defined يظهر رغم اصلاح المشكلة، وهذا لأن الوظيفة actore معرفة بشكل محلي داخل الوظيفة get. لا يمكن استدعاءه من خارجها. لاصلاح المشكلة قم باخراجها الى ما قبل او بعد الوظيفة get: async function get() { const apiLink = await fetch("https://www.breakingbadapi.com/api/characters") const data = await apiLink.json() document.querySelector(".tagrba").innerHTML += `<h1>${data[3].name}</h1>` document.querySelector(".tagrba").innerHTML += ` <select onchange="actore(this.Value)"> ${data.map (item => `<option> ${item.name}</option>` )} </select> ` } get(); function actore(e) { console.log(e); }

بشكل بسيط، يمكنك اسناد وظيفة تشغيل الصوت الى حدث الضغط على الزر. نشغل الصوت عن طريق الجافاسكربت بشكل عادي كـ: let audio = new Audio("/audio.mp3") ثم الحدث start: const start = () => { audio.play() } وأخيرا استهداف الحدث onClick: <button onClick={start}>Play</button> يكون كاملا: import React from 'react'; function App() { let audio = new Audio("/audio.mp3") const start = () => { audio.play() } return ( < div > <button onClick={start}>تشغيل</button> </div > ); } export default App;

يمكنك استعمال التابع parse بفعالية. حيث يتيح طريقة لاستخراج عدد الثواني بين تاريخ معين و أول جانفي 1970 الساعة 00:00:00. بعد هذا ستحتاج طرح تمثيل الوقت الحالي من التمثيل الناتج، ان كان الناتج موجبا فان الناتج من الماضي. let d1 = Date.parse(your_datestring); let d2 = Date.parse(new Date()); console.log(d2 - d1) في مثل الحالة التي لديك لا تنسى تحويل datetime الى datestring فيكون كاملا: let d1 = new Date('2022-10-01T00:12:10.19Z').toDateString(); d1 = Date.parse(d1); let d2 = Date.parse(new Date()); console.log(d2 - d1) الناتج: -2088323000 تعبر الاشارة عن ان التاريخ من المستقبل. الكائن Date في JavaScript

يمكنك ايضا باستعمال مكتبة moment.js الاستعانة بالتابع diff لتحديد فرق الايام بين تاريخ وآخر. مثال: var a = moment([2022, 1, 1]); var b = moment([2023, 1, 1]); a.diff(b) // الفرق بالثواني a.diff(b ,'days') // الفرق بالأيام بالطبع فان هذا يقتضي تضمين الملف المصدري للحزمة: <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

البصمة ما هي إلا واحدة من البيانات البومترية biometric data. التي ستحتاج لهذا الغرض استخراجها بطريقة ما وتشغيلها في عمليات المصادقة. يوجد مثلا حزمة DarkGhostHunter/Larapass التي تم ارشفتها واستبدالها بـ Laragear/WebAuthn. تحتوي هاته الحزمة على واجهة تطبيق برمجية من تشكيلة من التوابع في الجافاسكربت للتعامل مع هاته البيانات على مستوى المتصفح. وواجهة برمجية كاملة للتعامل مع عمليات المصادقة ككل وليس فقط تحليل هاته البيانات. قد تكون ما تبحث عنه.

ضع في اعتبارك ان هاته الحلقات ليس الا آداة لتكرار كتلة برمجية معينة عددا من المرات وفق شرط معين او اعتبارا لشيء ما. يمكن تمييز كل تكرارة من الحلقة بفهرس يميزها عن غيرها. فالحلقة الاولى تمتلك فهرسا 0 والثانية 1 والثالثة 2 الى ان ينقضي التكرار او ينتفي شرطه. فمثلا يوجد: الحلقة for التي تقوم بتكرار الكتلة البرمجية من اجل قيمة متغير ما. for(var i = 0 ; i < 5 ; i++) { // اي كتلة برمجية } الحلقة while التي تقوم بتكرار الكتلة البرمجية باعتبار شرط ما، فطول ما كان الشرط محققا يتم تكرار التنفيذ. var i = 1; while(i < 5 ) { // كتلة برمجية } تتبع هاته الحلقات غالبا ما يكون عن طريق الفهرس الذي يميز كل تكرارة. فقد تحتاج مثلا تتبع قيمة ما يتم تجاوز قيمتها من داخل التكرار. هنا ستكون طباعة هاته القيمة داخل الحلقة بجانب الفهرس الخاص بهاته التكرارة عمليا. لا اظن انه يوجد طريقة معينة لاحتراف هذا المفهوم، وانما يجب فهمه واستيعابه جيدا والخروج للتطبيق العملي ومصادفات حالات استخدام تتطلب استعمال الحلقات.

يمكنك الاستعانة بأحد انظمة التحكم في النسخ git مثل github لمشاركة المشروع بينك وبين هذا الشخص بعد رفعك عليه. مثلما يمكنك ارساله بشكل تقليدي عن طريق البريد الالكتروني كمرفقات مثلا. يمكنك ايضا رفعه الى احد الخوادم الوسيطة بينكما ليسهل نقل هاته الملفات. ايضا يمكنك استعمال سطح المكتب البعيد في وندوز للحصول على تصريح يمكنك من تبادل الملفات بينكما. يوجد الكثير من الطرق لتحقيق ذلك. ان كانت الملفات هي ملفات نهائية لمشروع ما، فتأكد من التقيد بشروط تقديم المشروع واحرص على ان لا يكون ذلك خارج المنصة التي تعمل فيها.

كنت لأختار استعمال التجميعة الاولى كونها صديقة لمحركات البحث أكثر من الثانية، خصوصا ان الموقع موقع شخصي سيعتمد على حظه وظهوره في نتائج محركات البحث. فباعتمادك على جافاسكربت كليا (React) سيقوم الموقع ببناء او تصيير المكونات والصفحة بعد طلبها من قبل المتصفح فقط، بمعنى أن هاته العناصر والمكونات لن تتم فهرستها من قبل محركات البحث. وللتخلص من هاته المشكلة قد تحتاج الاعتماد على مفهوم التصيير على الخادم SSR او التصيير المسبق Pre rendering وهي مفاهيم خارجة عن سياق تطوير الواجهات الامامية فأنت ستحتاج معرفة بـ NodeJS و اطار عمل مثل NextJS.

لا يمكن حصر الموضوع في بضعة طرق فالمواقع الشخصية تعبر عن أشخاص او شركات او مؤسسات ولكل منها ما يميزها بشكل يتطلب الاشارة اليه بها في هاته المواقع، قم بالبحث بشكل اكثر تخصيصا. فبدل البحث عن portfolio websites examples قم بالبحث عن portfolio websites for front end developers examples او web designer portfolio website . بعد استلهام افكار منها يمكنك الانطلاق في بناء موقع شخصي، إما بمحتوى مشابه او هيكلة او تصميمين مشابهين. وبالطبع يمكنك اضافة لمساتك الخاصة التي تظن انها تميزك دون غيرك. فيما يلي بعض الخطوات التي قد تساعدك: قم بتحديد المحتوى الذي تريد الاشارة اليه في موقعك. (مثال: نبذة عامة، الخبرات، الدراسة، الأعمال السابقة، شهادات عملاء، قسم للمراسلة) استلهم افكارا بخصوص التصميم والهيلكة بخصوص كل جزئية بدل استلهام الشكل العام للموقع فقط. سيعطي هذا لمسة خاصة تميز كل مكون دون ان يخرج عن نمط البقية. (مثال: ابحث عن امثلة عن نماذج اتصل بنا في الانترنت، او عن امثلة عن قسم شهادة العملاء) لا تتكلف كثيرا وركز على تجربة الاستخدام، فالزوار او العملاء غالبا لن يقوموا بقراءة كامل ما ستشير إليه. ركز على دلالية العناصر والألوان وتموضعها. وعلى ما قل ودل من النصوص والكلام.

ان كنت تنوي تطبيق الخاصية scroll-behavior على كامل العقد الفرعية لعنصر body فيجب اضافة ذلك في عنصري body,html وسيتم التقاطها من قبل كامل العناصر: body , html { scroll-behavior: smooth; } تأثيرات التمرير في صفحات الويب باستخدام Javascript وCSS

لما لا تستعمل querySelectorAll مرفقة بذات المحدد *؟ var nodes = document.querySelectorAll('*'); nodes.forEach(node => { console.log(node) }) Document.querySelectorAll()‎

توجد هنالك واجهة برمجية كاملة تخص السحب والافلات في جافاسكربت، تأتي بمجموعة من الأحداث يمكن بناءا عليها تحريك العناصر وفق شكل ما. نذكر: drag: حدث سحب العنصر. dragend: حدث نهاية سحب العنصر. dragstart: حدث بداية السحب drop: حدث افلات العنصر مثلما يوجد الأحداث dragenter، dragleave و dragover يجب اولا تعريف الخاصية draggable واسناد القيمة true لها في html . مثال عملي: نقوم بتعريف متغير dragItem يحدد العنصر الذي يتم سحبه كل مرة. فعند سحب العنصر نقوم بتحديده عن طريق الجافاسكربت ولنعطه الصنف invisible حيث يتم تطبيق display:none على هذا العنصر، ننشئ الدالة dragStart: function dragStart() { dragItem = this; setTimeout(() => this.className = 'invisible', 0) } تعبر this عن العنصر المسحوب. عند نهاية السحب يفترض ان تعود القيمة dragItem الى قيمتها الافتراضية. نلخص ذلك في الوظيفة dragEnd: function dragEnd() { this.className = 'item' dragItem = null; } تعبر this عن العنصر المسحوب. عند الافلات يفترض ان يستقبل الحاوي الذي تم الافلات فيه العنصر المسحوب ويضيفه اليه، نلخص ذلك: function dragDrop() { this.append(dragItem); } تعبر this عن الحاوي الذي تم الافلات فيه. تعبر dragItem عن العنصر الذي يتم سحبه. كخطوة اضافية نقوم بتعطيل الحدث dragOver لأنه يتم تشغيل هذا الحدث عند سحب الماوس فوق العنصر. وغالبا ما تكون العملية التي تحدث مماثلة لحدث السحب ونحن نستهدفها بالفعل. لنعطلها: function dragOver(e) { e.preventDefault() } لنعرف الهيكلية التالية في HTML: <div class="container"> <div class="column"> <h1>اسحب من هنا</h1> <div class="item" draggable="true">عنصر 1</div> <div class="item" draggable="true">عنصر 2</div> <div class="item" draggable="true">عنصر 3</div> <div class="item" draggable="true">عنصر 4</div> </div> <div class="column"> <h1>افلت هنا</h1> </div> </div> نطبق التنسيقات التالية: .container{ display: flex; gap: 30px; } .column{ flex-basis: 20%; background: #ddd; min-height: 90vh; padding: 20px; border-radius: 10px; } .column h1{ text-align: center; font-size: 22px; } .item{ background: #fff; margin: 20px; padding: 20px; border-radius: 3px; cursor: pointer; } .invisible{ display: none; } نسند الأحداث الى الحاويات والعناصر كـ: const items = document.querySelectorAll('.item') const columns = document.querySelectorAll('.column') items.forEach(item => { item.addEventListener('dragstart', dragStart) item.addEventListener('dragend', dragEnd) }); columns.forEach(column => { column.addEventListener('dragover', dragOver); column.addEventListener('drop', dragDrop); }); يفترض ان يقدم هذا مقاربة بسيطة لعملية السحب والافلات عن طريق الجافاسكربت مباشرة. اختبر النتيجة هنا.

يستحسن ان يتم بواسطة الواجهة الخلفية، لأن هذا يخدم مفهوم التصيير على الخادم وهو الآخر يخدم الـ SEO. ونعم، يمكن ايضا استعمال الجافاسكربت لانشاء موقع متعدد اللغات.