3

كتابة HTML بصورة برمجية باستخدام jsH

السلام عليكم

اليوم سنتكلم عن تقنية تمكنك من كتابة صفحات HTML بصورة برمجية من خلال الجافا اسكريبت

كما نعلم ان لغة HTML ليست لغة برمجة انما لغة لبناء و تصميم هيكل الموقع و يتم التحكم بها من خلال الJavascript بواسطة DOM - Document Object Model

من خلال تحديد العناصر DOM Selector و اجراء بعض العمليات من خلال طرق معينة مثل اضافة خاصية الstyle

او ادخال قيمة او جلب قيمة و غيرها من الامور .

و كل هذه العمليات تتم في وسم script او ملف جافا اسكريبت خارجي .

و الان قبل ان ندخل في شرح التقنية سنتكلم عن بعض المفاهيم :

اولا اذا كنت تعمل على ملف PHP و تريد طباعة بعض المخرجات بالتأكيد لن تجد مشكلة في طباعة القيم

بسبب انك فقط تقوم بالطباعة باستخدام print - echo و بعض تنفيذ الملف ستجد انه قد تم طباعة المخرجات بالترتيب و لم تقم باستخدام مكون اخر للتعامل مع المخرجات عكس الجافا اسكريبت

و هنا سبب انشاء التقنية التي تمكنك من كتابة HTML بصورة برمجية باستخدام الJavascript

و لن تتحتاج الى وسم script

للاطلاع على الموضوع :

https://haxcv.org/docs/jsH
يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
3ABDOO أضف ردا

مالفرق بين jsH و jsx ولماذا سأستخدم jsH عوض jsx ؟

0
haxcv أضف ردا

الفرق ان الjsH تعتمد على نمط كتابة الHTML بصورة مباشرة

ما عليك سوى تحديد وسم fn-init و من ثم ستتمكن من كتابة Javascript للتحكم بالمخرجات

اما الjsX تقوم بتحويل الHTML الى Object حتى يمكن التعامل معها في الجافا اسكريبت

و تقوم باستخدامها ReactJs في المكونات Components

و غير هذا الjsH لا تقوم بتحويل الHTML الى object فقط تقوم بطباعة المخرجات وفق عملية منطقية

لاحظ الصورة

0
haxcv أضف ردا

و غير هذا الjsH تغنيك عن استخدام الDOM Selector

1
مجهول أضف ردا

لماذا أستخدم هذا المحرك بدلا عن ejs الذي طور خلال سنوات؟

0
مجهول أضف ردا

كنت عازم على أن أجرب شيفرتك في مشروع أعمل عليه.

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

الطريقة التي كتبت بها تلك "المكتبة" أو حسب ما تقول إطار تنفر أي مطوّر ويب حقيقي من استخدامها في عمل حقيقي، أساسيات كالIndent غير المتناسق، عدم وجود Unit Testing، وناهيك عن أشياء كتلك:

var This = window,

S = this;

This.Root = null;

This.init = null;

This.root = function (sel) {

الم تسمع بالـModule System، ولماذا شيفرتك لبن سمك تمر هندي؟ لماذا تعرف الكثير من الأشياء في النطاق العام؟ ولماذا لا تستخدم IIFE؟ لماذا كل الشيفرة في مكان واحد؟ ..؟ ..؟

0
haxcv أضف ردا

اخي الكريم اشكرك على ملاحظاتك لكن كما تعلم العمل حديث و يحتاج الكثير من العمل

و لا و حاليا اعمل على Unit Testing و هذه النسخة نسخة تجريبية و هذا الكود نسيت حذفه و ليس له دور في الاطار بالمرة لكن فقط اعمل على جمع الاراء سوى كانت سلبية ام ايجابية بما انك محترف و تفهم في مثل هذه الامور

هل لديك ملاحظة قد تفيد شكرا كل الود

1
يوسف سيد أضف ردا

ملاحظتي التي قد تفيدك هو أن تخصصه كـTemplate Engine وفقط لا تجعل له علاقة بالـDOM ولا الـBOM ولا المتصفح من الأساس، واعمل على حل العيوب في المحركات الأخرى كدعم الا تزامن Asynchronous أما محاولتك لبناء إطار "بتاع كلوا" بالطريقة تلك Dose not scale ولا يوفر صورة واضحة لبناء Business Model ينفع تطبيق ويب محترم.

ملاحظة: أنا هو صاحب التعليق فوق.

0
haxcv أضف ردا

كنت افكر مثل تفكيرك لكن قلت يجب ان اخاطر و احاول في نهاية العام الحالي تطويرها و حل العيوب و تغطية كل المشاكل و في النهاية ستخضع للتطوير المتواصل و المكثف الان قمت بعمل نموذج على github

1
يوسف سيد أضف ردا

إذن بالتوفيق، اعمل على الـOptimization، حسّن طريقة التفسير بمفسر قوي لا تجعله يعتمد على replace وeval فهذا سلوك جد سيء وبطيء[1] ولا ينفع في الكثير من الحالات، وحسن الـDesign Pattern، واكتب Unit Testing قوّي، يمكنك الأعتماد على كتابة إضافة لـBabel وهذا سيفتح الباب لاستخدام jsh.

1
haxcv أضف ردا

تعرف اخي الكريم كنت مفيد لي اشكرك على كل ملاحظاتك و كلها ملاحظات في محلها شكرا

0
haxcv أضف ردا

الان هل يمكنك تقييم اداة الموقع لانه مبني بنفس الاطار بالاخص الdocs , social و

0
يوسف سيد أضف ردا

الموقع تصميمه جيد، والتوثيق جيد نوعًا ما، لا أدري بشأن البرمجية ومدى قابليتها للتطوير المستقبلي ونوعية الخوارزميات، والأداء لأني لم أقرأ الشيفرة.

0
haxcv أضف ردا

و على فكرة هذا الجزء خاص فقط كمكتبة و يتم استخدامه داخل الاطار فقط

0
haxcv أضف ردا

لا تستخدمه .

1
يوسف سيد أضف ردا

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

تحياتي وبالتوفيق لك.

0
haxcv أضف ردا

اعزرني ظننته شخص اخر

0
مجهول أضف ردا

اخي لدي سؤال فقط خارج الموضوع اذا تكرمت واجبت اكون شاكر لك

مثلا اي دالة في لغة php لتكن دالة while

هل هذه الدالة مكتبة بلغة البي ايتش بي ؟

0
haxcv أضف ردا

عفوة لكن يوجد لبس في السؤال هل تقصد مكتبة ام مكتوبة ؟ حتى اجيب

0
مجهول أضف ردا

مكتوبة عفوا اخطئت في الكتابة

1
haxcv أضف ردا

على حد علمي php هي اسكريبتينج scripting

, if , while , for , do while , return لا ليست مكتوبة بالphp

انما مكتوبة باللغة التي تمت بها كتابة الphp

++C و تعتبر بيان و ليست دوال statements

1
مجهول أضف ردا

تمام قد فهمت الان لاني مبتدا برمجة واريد تعلمها على صاولها وليس فقط حفظ

شكرا لك

0
mr_student أضف ردا

أعتقد أن مثل هذه الأدوات هي Overkill و لا حاجة لها, أفضل كتابة Plain html فهي لغة المارك آب التي سفهمها كل فريق قد أعمل معه.

0
haxcv أضف ردا

قبل كل شيء يجب ان تعرف لماذا يتم استخدام التقنية ليس فقط في كتابة الhtml بصورة برمجية بل في انشاء المشاريع الكبيرة التي تحتاج الي تصميم قوالب و استدعائها بخصائص مختلفة حسب الاجراءات و هذه تصلح في التطبيقات المتغيرة و ان كنت ستقوم بعمل تطبيق بسيط لا مشكلة

1
mr_student أضف ردا

المشاريع الكبيرة ستسخدم Frameworks من أجل الواجهات مثل angular و الذي يوفر أداوت أقوى بعشرات المرات مثل ngFor directive و يعمل مع plain html

و حتى بدون إطار عمل للواجهات الأمامية تستطيع دائماً استخدام template engine يوفر إطار العمل في الباك إند, بالعودة لموضوعنا انصحك جداً بتعلم شيء حقيقي و مهارة مطلوبة تغطي متطلباتك مثل angular أو vue.js

0
haxcv أضف ردا

بالمناسبة انا المؤسس لهذا الاطار و ان كنت ستنصحني بتعلم مهارات مثل angular

فاحب اقلك انا مطور جافا اسكريبت متقدم لدرجة خرافية و لا اظن اني ساحتاج لاي اطار او مكتبة و ان لاحظ كل الخصائص التي ذكرتها موجودة سلفا لكنك لم تطلع على التوثيق

و ان لاحظت بدل التعابير البسيطة في angular

يمكنك استخدام jsH

شكرا

0
mr_student أضف ردا

جميل جداً كنت أظنك مستخدم له او ما شابه ذلك, أعتقد أنه من الرائع امتلاك مكتبة أو إطار عمل باسمك في الـ C.V تابع ما بدأت إذاً, بالتوفيق.

0
haxcv أضف ردا

كل الود شكرا

0
yanal_shoubaki أضف ردا

هل هنالك ميزة جيدا لها , اعتقد انها مجرد لغة لاضاعة الوقت عند تصميم لغة HTML

1
haxcv أضف ردا

نعم لها ميزة لا تستخدم في كتابة الhtml بصورة مباشرة انما يتم استخدامها في تصميم القوالب و لضمان مرونة المحتوى