يوسف سيد

الأعضاء
  • المساهمات

    82
  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • Days Won

    2

السُّمعة بالموقع

16 جيدة

المعلومات الشخصية

  • النبذة الشخصية مطوّر ويب، مبرمج وطالب أزهري -في الشتاء-، مدونٌ ومصممٌ هاوٍ،
  • الموقع

1 متابع

آخر الزُوّار

1,563 زيارة للملف الشّخصي
  1. راجعتُ رسالتك والشيفرة هنا في السؤال ويبدو أن مشكلتك أنك تحتاج إلى تعلم العمل مع وثيقة الصفحة ومع جافا سكريبت؛ لا يوجد أي خطأ في الشيفرة وما تريده شيء بديهي ستستخدم الـكائـن النـاتج من الإستعلام وستنصنع عناصـر في الوثيقة وستضيفها إلى الوثيقة، لا يوجد أي مشاكل، أنصحك بقراءة الجزء الأول (Language) والثاني (Browser) من كتاب: http://eloquentjavascript.net/ أتمنى لك التوفيق صديقي
  2. هذه الشيفرة تعمل مع عنصري المدخلات input وtextarea، يجب أن تعمل على أغلب المتصفحات، كتبتها بـES5 -يمكنك أن تعيد كتابتها بـES6 سيكون تنسيقا أفضل فقط- يجب أن تعمل في أي مكان في بيئة المتصفح سواءً قبل التحميل أو بعده: function checkInputs() { var elements = document.querySelectorAll('input, textarea'), ei; for (ei in [].slice.call(elements)) { if (elements[ei] && typeof elements[ei].value == 'string' && elements[ei].value.length > 0) { return true; } } return false; } window.addEventListener('beforeunload', function unloadCallback(e) { // هذه الرسالة لن تظهر في كل المتصفحات var confirmMsg = 'هل أنت متأكد من رغبتك بمغادرة الصفحة'; if (checkInputs()) { // كروم وWebkit القديم e.returnValue = confirmMsg; return confirmMsg; } });
  3. نعم بالطبع ممكن أتحتاج إلى تفاصيل برمجية؟ أم تسأل قبل التواصل مع مطور ويب؟ إن كان الأول ما هي لغة البرمجة التي تكتب بها في الخادم الخلفي حتى أخبرك بالتفاصيل ما ستفعله -بإذن الله-؟
  4. مع أني لا أنصحك بهاته الطريقة، لديك ضربان للقيام بها: 1. استخدام الدالة setInterval لصنع مؤقت للطلبات: حل سيء جدًا جدًا، لأنّ العمل غير متزامن(async) قد يبدأ طلب قبل تحميل السابق، وتتكدث الطلبات دونما تنظيم. 2. دالة للطلب تستدعيها لأول مرة ثم بعد التحميل تطلب نفسها مجددًا وهكذا دواليك هذا الحل الأفضل في هاته الطريقة إلّا أني ما زلتُ أنصحك بـSSE. للطلبات استخدم XMlHttpRequest أو مكتبة تساعدك في الطلبات لا أنصحك باستخدام مكتبة في البداية، أيضًا أظنُ أني كتبتُ مثالًا لذاك في مقال SSE ستجد الرابط في الرّد السابق.
  5. أي أداة؟ تقصد NW؟ لحذف تنصيبها في العام من خلال سطر الأوامر: npm uninstall -g nw
  6. لا لن يسبب، بسبب استخدام الدالة sleep التي توقف البرمجية لوقت معيّن كأنك تنفذ أمرًا كل ثانية مثلًا، آسف على التأخير لا أتابع الموقع.
  7. بالنسبة لتنبيهات سطح المكتب: تطلب الإذن من المتصفح بالوصول لها -ثم المتصفح يرى هل لك الإذن وإن كان لا، يسأل المستخدم -> بعدما تحصل على الإذن يمكنك استخدام الواجهة البرمجية لتنبيهات سطح المكتب، أما عن جلب التنبيهات من الخادوم يوجد العديد من الطرق أشهرها: 1. طلبات متعددة باستخدام Ajax: الحل الأسهل والأكثر شيوعًا، إلّا أنه يسبب بعض التحميل على الخادم( أي العتاد الكبير) والخادوم(أي البرمجية التي تعالج الطلبات) بسبب الطلبات المتعددة، أيضًا برمجيًا ليس جيدًا إن كانت هنالك حلولًا أُخرى متوّفرة، أيضًا هو المستخدم في حسوب IO بحسب آخر مرة كتبت إضافة له، وجدته يطلب طلبات متعددة. 2. إتصال مفتوح لجلب التحديثات SSE: تفتح إتصالًا بدون حدٍ أدني للطلب وتعالج الطلبات القادمة من الخادوم دونما إنقطاع، قد يكون الحل الأفضل في حالة البرمجة بلغة PHP وأشباهها التي لا تعطي حرية في التصنت على منفذ معين -هذا الشائع بالطبع يوجد بعض الـHacks لكنها لغة كتبتْ لِتصنع الصفح- لحسن الحظ المتصفحات توّفر API لذلك، كتبتُ هذا المقال عن استخدامها مع PHP في السابق. 3. مقبس(Socket) بين الخادوم والمتصفح: قديمًا لم تكن هنالك حلولًا جيدة لكن مع قدوم الـWebSocket أصبح ذلك سهلًا تفتح مقبسًا ترسل الردود بين الخادم والمتصفح بسهولة. على الجانب: مع الإصدار الجديد من بروتوكول HTTP الذي هو HTTP/2 بات يدعم إرسال ردودٍ متعددة بين الخادوم والمتصفح، لكنه حاليًا ما زال جديدًا، لننتظر قليلًا وسنجد الكثير من المكتبات على نغم *.js.
  8. وجدتُ الحل عندما نقلتَ السؤال هنا ؛ حفظ النتائج في مُتغير وتنفيذ الاستعلام، جربته هذه المرة SELECT @q=GROUP_CONCAT(CONCAT('ALTER TABLE DBNAME.', TABLE_NAME, ' ENGINE=MyISAM') SEPARATOR ';') FROM Information_schema.TABLES WHERE TABLE_SCHEMA = 'DBNAME' AND ENGINE = 'MyISAM' AND TABLE_TYPE = 'BASE TABLE'; PREPARE stmt from @q; EXECUTE stmt; DEALLOCATE PREPARE stmt;
  9. مدخل إلى كتابة سكربتات الصدفة

    يوجد خطأ: !/bin/bash يجب أن يضاف قبلها #؛ وإلا ستنفذ من قبل المفسّر بشكل عادي: #!/bin/bash وكذا # قبل التعليق: #My first script
  10. سنتعرّف في هذا الدّرس على أداة nw (سابقًا node-webkit) المُخصّصة لتطوير تطبيقات سطح المكتب العابرة للمنصات؛ باستخدام مُتصفّح كروميوم [Chromium [1 و node.js. حيث أصبح بالإمكان استخدام تقنيات الوِب الحديثة لتطوير برمجيات قادرة على الاستفادة من موارد النظام؛ كالتحكّّم بالملفات، استعمال قواعد البيانات وغيرها من الأمور. في هذا الدّرس سنتعلّم كيفية كتابة تطبيق لسطح المكتب باستخدام nw لتشغيل ملفّات الفيديو. لنبدأ. تثبيت node.jsإذ كنت تَستخدم نظام التشغيل Windows أو Mac OS عندها استعمل معالج التثبيت الرسمي، أما في حال عملك على نظام لينكس فقم بتثبيتها من خلال مدير الحزم. تثبيت nwبعد تركيب node.js من خلال مدير حزم node.js نحتاج إلى تركيب nw، للقيام بذلك نفّذ ما يلي من خلال الطرفية: npm install nw -g أهلا بالعالمأنشئ مُجلدًا مُخصصًا لمشروعنا الأول باسم helloworld ثم أنشئ بداخله ملفّين: package.jsonإن سبق لك التطوير باستخدام node.js فستعرف بالتأكيد أن هذا هو الملف الخاص بمعلومات و خصائص التطبيق أو الحزمة، يمكنك إنشاءه بسهولة من خلال سطر الأوامر: npm init سنضيف إلى الملفّ بعض خصائص nw (حجم النافذة و الرابط للملف الرّئيسيّ) ليصبح شكل الملف بالكامل هكذا: { “name”: “helloworld”, “version”: “1.0.0”, “description”: “”, “main”: “index.html”, “window”: { “width”: 600, “height”: 400 }, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1” }, “author”: “hsoubAcademy”, “license”: “MIT” } index.htmlهو ملف nw الرئّيسيّ الذي قمنا بتحديده من ملف الحزمة (package.json)، سنُنشئ مُستند بسيط لطباعة أهلًا بالعالم. تشغيل التطبيقمن خلال سطر الأوامر انتقل إلى ملف المشروع وشغّل nw: cd helloworld nw يجب أن تظهر لك نافذة بحجم 600X400px وبداخلها نص "أهلًا بالعالم". سياق شفرة javascript يوجد بـ nw سياقان لشِفرة javascript: سياق المُتصفّح وسياق node.js، عند استدعائك لملف javascript أو تشغيلك لشيفرة من خلال مستند html فإن هذه الشفرة تُمرر إلى المتصفح ليقرأها، أما عند تشغيلك لملفّ javascript من خلال خاصية node-main في ملفّ الحزمة (package.json) أو استدعائه من خلال الدّالّة require فإنه يُمرر إلى سياق node.js، حيث يوجد بعض الاختلافات الطفيفة بين هذين السياقين في الكتابة: 1. سياق المتصفح في هذا السياق تعمل الشيفرة بالأسلوب الذي تعمل به في المتصفح، المُتغيّر العام هو window مثلًا، هذه الشيفرة ستعمل بشكل صحيح فقط في سياق المُتصفح: myVar = “test”; // تعريف مُتغير بشكل عام alert(window.myVar); // إخراج نافذة بالمتغير ولتمرير المُتغيرات بشكل عام إلى سياق node.js يجب تعريفها كتابع للمُتغير window.global مثال ليعمل مثال: // ملف window.js // هذا الملف يجب أن يعمل من سياق المُتصفح window.global.myVar = “test”; // تعريف مُتغيّر بشكل عام إلى سياق المُتصفح require(“node.js”); // استدعاء ملف node.js بداخل سياق node.js // ملف node.js // هذا الملف يجب أن يعمل من سياق node.js window.alert(myVar); // عرض المُتغير الّذي تم تعريفه بشكل عام من سياق المُتصفح2. سياق node.js في هذه السياق تعمل الشيفرة بأسلوب عملها باستخدام node.js، المُتغير العام هو global مثال: myVar = “test”; // تعريف مُتغير بشكل عام window.alert(global.myVar); // إخراج نافذة بالمتغير العام الّذي قمنا بتعريفه يُمكن استخدام سياق المتصفح والتمرير إليه من خلال المُتغير window. استدعاء الحزم التي كتبت للمتصفح بداخل سياق node.jsعند استدعاء حزم تمت كتابتها للمُتصفح بداخل سياق node.js عن طريق الدّالّة require فقد لا تعمل، حيث تحدثنا سابقًا أن المتغيّر العام في سياق node.js هو global و ليس window مما يسبب مشكلة إن تم استدعاء أحد توابع window، عمومًا فالمثال لن يعمل في سياق node.js: var div = document.createElement(“div”); لجعل هذه الشيفرة تعمل يجب تعريف مُتغير document بشكل عام في سياق node.js: global.document = window.document; بشكل مبدئي سيجعل هذين السطرين أغلب الحزم تعمل: global.document = window.document; global.navigator = window.navigator; إن كنت تبحث عن حل تلقائي لنقل جميع المُتغيرات إلى سياق node.js (قد لا يُنصح بهذا الحل بسبب حذف المُتغيرات المتطابقة في الاسم): var Var; for(Var in window) if(Var != “require”) global[Var] = window[Var]; ملاحظة: لم ننقل مُتغير require لأن التابع window.require يستخدم global.require في استدعاء الحزم. لاحظ أيضًا أنه لا يمكن استدعاء حزمة nw.gui الخاصة بواجهة المستخدم من خلال سياق node.js عن طريق الدّالّة require فكما ذكرنا؛ التابع window.require يختلف عن global.require. هذا هو النص المصدري للتابع: window.require = function (name) { if (name == ‘nw.gui’) return nwDispatcher.requireNwGui(); return global.require(name); } وكما تلاحظ إن كان اسم الحزمة node.js فإنه يستخدم هذه الدّالّة لاستدعائها: nwDispatcher.requireNwGui(); إذًا لاستدعائها من خلال سياق node.js استخدم الدّالّة السابقة أو استخدم window.require. إنشاء تطبيق لتشغيل الفيديوملفات المشروعهذه قائمة لملفات المشروع: ملف الحزمة (package.json)حجم النافذة الافتراضي هو 800x600px، الملفّ الرّئيسيّ هو index.html، مبدئيًا سيكون الملف بهذا الشكل: { “name”: “nw-video-player”, “version”: “1.0.0”, “description”: “تطبيق بسيط لتشغيل الفيديو”, “main”: “index.html”, “window”: { “width”: 800, “height”: 600 }, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1” }, “author”: “hsoubAcademy”, “license”: “MIT”, “dependencies”: { “videojs”: “^4.12.15” } } الملف الرئيسي index.htmlسنكتب مستند بسيط يحتوي على زر وعنصر، نضيف المشغّل ضمنه من خلال شيفرة javascript: <!doctype html> <html> <head> <meta charset="utf-8"> <title>تطبيق بسيط لتشغيل الفيديو</title> <!-- ملف شفرة js الرّئيسية للتطبيق --> <script src="src/app.js"></script> </head> <body> <button id="play">فتح</button> <div id="player"></div> </body> </html> نافذة فتح الملفاتلا يوجد طريقة مباشرة لفتح الملفات باستخدام نافذة النظام، لكن يُمكننا استخدام مدخل input من نوع file لفتح الملفّات: لكن كخلاف المتصفح للمستخدم يُتاح لنا بعض الأشياء عند التطوير بـ nw كجلب المسار الكامل الحقيقي للملفّ، ويتاح لنا فتحه من خلال javascript: document.querySelector(“input”).click(); من خلال هذا سنكتب دالّة بسيطة لفتح ملفّات الفيديو وإرجاع مسار الملف مع إضافة بروتوكول file لاستخدامه من خلال المُتصفح، الدّالّة: // فتح ملف var openFile = function openFile (callback) { var input = window.document.createElement(“input”); input.setAttribute(“type”, “file”); input.setAttribute(“accept”, “.mp4, .ogg, .ogv, .webm”); input.addEventListener(“change”, function () { // عند إختيار ملف callback(“file://”+this.value); }); input.click() // فتح مُختار الملفات } تجربة استخدام: openFile(alert);مشغل الفيديوسنستخدم video.js لتسهيل تصميم المشغّل من خلال سطر الأوامر، اتجه إلى مجلّد المشروع ثم قم بتنصيب video.js من مدير الحزم الخاص بـnode.js: npm install videojs –save كما تحدثنا في بداية الدرس عن استدعاء الحزم في سياق node.js سنحتاج إلى كتابة هذين السطرين: global.document = window.document; global.navigator = window.navigator; من ثم سيمكننا استدعائها بشكل عادي: var videojs = require(“videojs”); من خلال هذا والدّالّة السابقة لفتح الملفات سنكتب دالّة لإنشاء مشغل فيديو من خلال مسار ملف الفيديو من ثم إضافته إلى عنصر المشغّل في المستند الذي كتبناه من قبل: var playVideo = function playVideo (src) { var videojs = require("videojs"), ext = /[^.]+$/.exec(src)[0], // صيغة الملفّ video = document.createElement("video"), // عنصر الفديو source = document.createElement("source"), // عنصر المصدر للفديو player = document.querySelector("#player"); // عنصر المشغل في وثيقة html ext = (ext == "ogv") ? "ogg" : ext; // ملفات ogg قد تملك صيغة ogv source.type = "video/"+ext.toLowerCase(); // نوع mime للفديو source.src = src; // مسار الفديو video.controls = true; // عناصر التحكّم video.autoplay = true; // تشغيل تلقائي video.classList.add("video-js", "vjs-default-skin"); // الclass الخاصة بvideojs video.appendChild(source); // إضافة عنصر المصدر إلى الفديو player.innerHTML = ""; // إزالة جميع العناصر السّابقة player.appendChild(video); // إضافة الفديو إلى وثيقة html videojs(video) // إستخدام video.js }مشكلة nw مع الصيغ مُغلقة المصدر: بشكل افتراضي سيمكنك تشغيل ملفات ogg و webm فقط لكن بسبب مشكلة مع التراخيص، لا تتضمن nw مشغّل لصيغة mp4 و الصوت mp3 اطلع على طريقة تضمين الملفّات المُشغلة. الآن تبقى فتح الملفّ عند الضغط على الزر: window.addEventListener(“load”, function () { window.document.querySelector(“button#play”).addEventListener(“click”, function () { openFile(playVideo) }); }); ليصبح كامل ملف app.js: "use strict"; global.document = window.document; global.navigator = window.navigator; var nwGui = require("nw.gui"), Window = nwGui.Window.get(); (function(window, nwGui, Window){ var maximized; // فتح ملف var openFile = function openFile (callback) { var input = document.createElement("input"); input.setAttribute("type", "file"); input.setAttribute("accept", ".mp4, .ogg, .ogv, .webm"); input.addEventListener("change", function () { // عند إختيار ملف callback("file://"+this.value); }); input.click() // فتح مُختار الملفات } // تشغيل فديو var playVideo = function playVideo (src) { var videojs = require("videojs"), ext = /[^.]+$/.exec(src)[0], // صيغة الملفّ video = document.createElement("video"), // عنصر الفديو source = document.createElement("source"), // عنصر المصدر للفديو player = document.querySelector("#player"); // عنصر المشغل في وثيقة html ext = (ext == "ogv") ? "ogg" : ext; // ملفات ogg قد تملك صيغة ogv source.type = "video/"+ext.toLowerCase(); // نوع mime للفديو source.src = src; // مسار الفديو video.controls = true; // عناصر التحكّم video.autoplay = true; // تشغيل تلقائي video.classList.add("video-js", "vjs-default-skin"); // الclass الخاصة بvideojs video.appendChild(source); // إضافة عنصر المصدر إلى الفديو player.innerHTML = ""; // إزالة جميع العناصر السّابقة player.appendChild(video); // إضافة الفديو إلى وثيقة html videojs(video) // إستخدام video.js } window.addEventListener("load", function () { // زر فتح فديو window.document.querySelector("button#play").addEventListener("click", function () { openFile(playVideo) }); }); }) (window, nwGui, Window);تصميم التطبيقبداخل مُستند html أضف مسار ملفّ css الافتراضي لـvideo.js الموجود داخل مجلد node_modules: ثم سنلغي شريط الأدوات الخاص بـnw بداخل ملف الحزمة (package.json) وبداخل العنصر window أضف ما يلي: “toolbar”: false من ثم سننشئ ملف تصميم src/style.css: html, body{ width: 100%; height: 100%; background: #ccc; direction: rtl; margin: 0 } /* زر التشغيل */ #play{ height: 25px; background: white; padding: 2px 20px; box-sizing: border-box; border: 1px #ccc solid } #play:hover{ box-shadow: inset 0 0 1px #333 } /* المُشغل */ #player{ background: black; width: 100%; height: calc(100% - 25px) } #player > .video-js{ width: 100% !important; height: 100% !important } إضافته من خلال مُستند html: كان من الأفضل استخدام قائمة النظام لعرض زر تشغيل الفيديو لكن nw لا تدعم الاتجاه من اليمين إلى اليسار بشكل كامل إلى الآن، لذا سنضيف السطر التالي إلى ملف الحزمة كي تظهر من اليمين إلى اليسار: “chromium-args”: “–lang=ar” بدلًا من ذلك سنقوم بإنشاء إطار مُخصص للنافذة لتبدو بشكلٍ أفضل في مختلف الأنظمة. تخصيص إطار النافذةبداخل ملف الحزمة (package.json) وبداخل عنصر window سنلغي الإطار الافتراضي: “frame”: false من ثم بداخل مستند html سنضيف أزرار النافذة في أول عنصر جسم الصفحة (body). سنضيف و نحذف بعض الخصائص من ملف src/style.css ليصبح شكل النافذة شبيه بنافذة نظام OS X: html, body{ width: 100%; height: 100%; background: #ccc; direction: rtl; margin: 0 } /* زر التشغيل */ #play{ -webkit-app-region: no-drag; height: 25px; background: white; padding: 2px 20px; box-sizing: border-box; border: 1px #ccc solid; position: absolute; right: 5px; top: 2px } #play:hover{ box-shadow: inset 0 0 1px #333 } /* المُشغل */ #player{ background: black; width: 100%; height: calc(100% - 25px) } #player > .video-js{ width: 100% !important; height: 100% !important } /* النافذة */ body{ box-sizing: border-box; border: #DDDDDC 5px solid } .window-toolbar{ -webkit-app-region: drag; background: -webkit-linear-gradient(#DDDDDC, #C2C2C2); height: 25px; direction: ltr; padding: 2px 5px; box-sizing: border-box } .window-toolbar > label.title{ position: absolute; left: 50%; transform: translate(-50%, 0) } .window-toolbar-button{ -webkit-app-region: no-drag; width: 12px; height: 12px; border-radius: 100%; display: inline-block; cursor: pointer; margin-right: 2px } .window-toolbar-button.close{ background: #FD4E4E } .window-toolbar-button.maximize{ background: #96D16F } .window-toolbar-button.minimize{ background: #F3BB55 } مُلاحظة: الخاصية webkit-app-region- المسؤولة عن جعل العنصر قابل للسحب والإفلات أيضًا يُمكن التحكّم بموقع النافذة من هذا العنصر لهذا استخدمناه في شريط أدوات النافذة لكن هذا العنصر لن يكون قابل للضغط أو المرور عليه لذلك يجب تعطيلها لعناصر التحكّم بداخله. لنكتب بعض الشيفرات بداخل ملفّ src/app.js لإضافة الحياة لشريط الأدوات. توفّر nw بعض التوابع للتحكم بالنافذة ما سنحتاجه للعمل: require(“nw.gui”).Window.get().close(); // إغلاق النافذة الحالية فقط require(“nw.gui”).App.quit(); // إغلاق التطبيق بجميع النوافذ require(“nw.gui”).Window.get().minimize(); // تصغير النافذة إلى شريط التطبيقات require(“nw.gui”).Window.get().maximize(); // ملء الشاشة بالنافذة require(“nw.gui”).Window.get().unmaximize(); // إرجاع النافذة أولًا زر الإغلاق: var nwGui = require(“nw.gui”); // زر إغلاق التطبيق window.document.querySelector(“.close”).addEventListener(“click”, function () { nwGui.App.quit(); }); ثانيًا زر إخفاء النافذة إلى شريط التطبيقات: var nwGui = require("nw.gui"), Window = nwGui.Window.get(); // زر تصغير النافذة إلى شريط التطبيقات window.document.querySelector(".minimize").addEventListener("click", function() { Window.minimize() });زر ملء النافذة لكن أولًا سنضيف مراقب للحدثين maximize و unmaximize لمعرفة هل النافذة بكامل الحجم أو لا، حيث لا توفّر nw أيّة API لمعرفة ذلك: var nwGui = require(“nw.gui”), Window = nwGui.Window.get(), maximized = false; // مراقب للحدث maximize Window.on("maximize", function(){ maximized = true; }); // مراقب للحدث unmaximize Window.on("unmaximize", function(){ maximized = false; });من خلال هذا وعند الضغط على زر الملئ إما أن تذهب النافذة لكامل الحجم أو تعود لحجمها الطبيعي: window.document.querySelector(“.maximize”).addEventListener(“click”, function () { maximized ? Window.unmaximize() : Window.maximize() }); يجب أن يكون كامل ملف src/app.js بهذا الشكل: "use strict"; global.document = window.document; global.navigator = window.navigator; var nwGui = require("nw.gui"), Window = nwGui.Window.get(); (function(window, nwGui, Window){ var maximized; // فتح ملف var openFile = function openFile (callback) { var input = document.createElement("input"); input.setAttribute("type", "file"); input.setAttribute("accept", ".mp4, .ogg, .ogv, .webm"); input.addEventListener("change", function () { // عند إختيار ملف callback("file://"+this.value); }); input.click() // فتح مُختار الملفات } // تشغيل فديو var playVideo = function playVideo (src) { var videojs = require("videojs"), ext = /[^.]+$/.exec(src)[0], // صيغة الملفّ video = document.createElement("video"), // عنصر الفديو source = document.createElement("source"), // عنصر المصدر للفديو player = document.querySelector("#player"); // عنصر المشغل في وثيقة html ext = (ext == "ogv") ? "ogg" : ext; // ملفات ogg قد تملك صيغة ogv source.type = "video/"+ext.toLowerCase(); // نوع mime للفديو source.src = src; // مسار الفديو video.controls = true; // عناصر التحكّم video.autoplay = true; // تشغيل تلقائي video.classList.add("video-js", "vjs-default-skin"); // الclass الخاصة بvideojs video.appendChild(source); // إضافة عنصر المصدر إلى الفديو player.innerHTML = ""; // إزالة جميع العناصر السّابقة player.appendChild(video); // إضافة الفديو إلى وثيقة html videojs(video) // إستخدام video.js } window.addEventListener("load", function () { // زر فتح فديو window.document.querySelector("button#play").addEventListener("click", function () { openFile(playVideo) }); // زر إغلاق التطبيق window.document.querySelector(".close").addEventListener("click", function () { nwGui.App.quit() }); // مراقب للحدث maximize Window.on("maximize", function(){ maximized = true; }); // مراقب للحدث unmaximize Window.on("unmaximize", function(){ maximized = false; }); // زر تصغير النافذة إلى شريط التطبيقات window.document.querySelector(".minimize").addEventListener("click", function() { Window.minimize() }); // زر الملء window.document.querySelector(".maximize").addEventListener("click", function () { maximized ? Window.unmaximize() : Window.maximize() }); }); }) (window, nwGui, Window);صورة للشكل النهائي: إن لم يظهر التطبيق بنفس الشكل فإليك ملفات التطبيق النهائية. بناء الملف التنفيذيلو أردنا إتباع الأسلوب التقليدي فنحن نحتاج إلى أنظمة التشغيل الثلاثة لبناء التطبيق في كل واحد منها على حدى، بدلًا من ذلك سنستخدم nwbuild لبناء التطبيق من خلال نظام تشغيل واحد إلى جميع أنظمة التشغيل. من مدير حزم npm قم بتركيب nwbuild : npm install nwbuild -g أنظمة التشغيل المتوفرة لـnwbuild: win32 # Windows 32bit win64 # Windows 64bit win # Windows 64bit مع 32bit osx32 # Mac OS 32bit osx64 # Mac OS 64bit osx # Mac OS 64bit مع 32bit linux32 # Linux 32bit linux64 # Linux 64bit linux # Linux 64bit مع 32bit ليعمل على أنظمة التشغيل الثلاث سنبنيه لـlinux ، osx64 و win32، اتّجه إلى مجلد التطبيق ونفّذ: nwbuild -p linux,osx64,win32 ./سيعمل أولًا على تحميل ملفات البناء لأنظمة التشغيل من ثم بناء الملفات التنفيذية، ستلاحظ أن متوسط الحجم 50 ميغابايت للملفّ الواحد بسبب تضمين المتصفحات والملفات التشغيلية. التاليسيكون من الرائع تعلم react لبناء تطبيقات سطح مكتب رائعة باستخدام nw مع react. مصادرnw windownw Appnw javascript contextsnw buildهوامش1 - كروميوم (Chromium) هو متصفح ويب مفتوح المصدر، يأخذ متصفح Google كروم الكود المصدري منه. المتصفحان يشتركان في أغلبية الشِفرة البرمجية والميزات، وإن كانت هناك بعض الاختلافات الطفيفة في ملامح كلا منهما وفي تراخيص الأستخدام أيضا. المصدر: ويكيبيديا.
  11. إستخدم دالّة parse_str مثالّ : parse_str($response, $array); print_R($array);
  12. آسف على هذا الخطأ كانت المشكلة تظهر بسبب إستبدال الكلاسس كامل هذا الكود يقوم بحذف all فقط ووضع الباقي <script type="text/javascript"> window.onload = function(){ var all = document.querySelectorAll(".all"); if(all.length) for(i=0;i<all.length;i++){ all[i].classList.remove("all"); all[i].classList.add("a1","a2","a3","a4"); } } </script> كان يمكن الاشارة لي في الموضوع السابق من خلال الاقتباس بدلًا من عمل موضوع جديد بدلًا من التشتيت.
  13. الطريقة التي يمكن عمل بها طلبك هي بمسح جميع العناصر var items = document.querySelectorAll("*"); for(var i=0;i<items.length;i++){ }ثم إن كان اللون أخضر فيتم الحذف هذه الشفرة مع الشرح var items = document.querySelectorAll("*"); // جلب جميع العناصر for(var i=0;i<items.length;i++){ // تكرار جميع العناصر var color = items[i].style.color; // اللون للعنصر الحالي if(color == "green" || color == "rgb(0,255,0)" || color == "#00FF00" || color == "#0F0"){ // اللون الاخضر بجميع انماط الالوان items[i].outerHTML = ""; // الحذف مع أنه كان يمكن إستخدام remove لكن لن تعمل على متصفح انترنت اكسبلور } }
  14. جافا سكربت مختلفة تمامًا عن php وأيضًا في حالة إستخدام javascript للمتصفح فإنها تكون مختلفة عن php مثلًا سيمكنك بjavascript تحديد العناصر في الصفحة وحذفها وتعديلها إنشاء طلبات للخادم ...... في حال php سيمكنك التعامل مع قواعد البيانات تعديل وحذف الملفاف في الخادم إرسال رد للمتصفح ..... لايمكن وضع أكواد php في بلوجر لان بلوجر لا تتيح لك إلا تعديل التصميم وphp تحتاج إلى التنفيذ من خلال مترجم php الذي يثبت على الخادم مثلًا في إستضافات php يكون منصب بالفعل javascript تتعامل مع المتصفح لذا يمكن كتابتها هذا المثال <?php echo "hello"; ?>يكتب hello لكن هذا الكود لايرسل إلى المتصفح لانه ينفذ في الخادم وإن قرأت النص المصدري لن تجد إلا hello ! في حال javascript document.write("hello");سيمكنك رؤية الكود المصدري لانه يتعامل مع المتصفح أتمنى أن أكون وضحت لك.
  15. يمكنكي عن طريق javascript var all = document.querySelectorAll(".all"); if(all.length) for(i=0;i<all.length;i++) all[i].setAttribute("class","a1 a2 a3 a4");إلا أنه الافضل القيام بالامر من خلال php للعمل قبل إرسالها إلى المتصفح وليس القيام به بالمتصفح عندما تتعلميها ستعرفين ضعيه قبل </head> هكذا <script type="text/javascript"> window.onload = function(){ var all = document.querySelectorAll(".all"); if(all.length) for(i=0;i<all.length;i++) all[i].setAttribute("class","a1 a2 a3 a4"); } </script>أتمنى أن يكون هذا قصدك.