كود مصدر البرنامج النصي. كيفية تضمين كود JavaScript في صفحة HTML. كيفية عرض الكود المصدري للصفحة لتصحيح البرنامج النصي

08.02.2024

لذلك، اكتشفنا بالفعل أن التطبيق الرئيسي للبرامج النصية في JavaScript هو مواقع الإنترنت. آمل أن تعرف على الأقل بشكل عام. لن أتحدث عن هذا.

أبسط موقع إنترنت يتكون من صفحة ويب واحدة أو أكثر (صفحات الويب، ).

لاستخدام برامج JavaScript النصية، يجب عليك بطريقة ما تضمين كود مصدر البرنامج النصي في صفحة الويب الخاصة بك.

وهذا ما سأتحدث عنه اليوم.

لذلك، يمكن إدراج البرنامج النصي الموجود في نص صفحة HTML في أي مكان تقريبًا.

إذا كنت تقوم بإدراج وظيفة، فمن الأفضل وضعها في عنوان الصفحة. وهذا هو، في مكان ما بين

... .

يتم وضع البرنامج النصي نفسه بين العلامات

هنا كمعلمة للعلامة الافتتاحية

كما قلت، يمكن إدراج البرنامج النصي في أي مكان على الصفحة. ومع ذلك، إذا تم ذلك بين العلامات، فسيكون كود المصدر للبرنامج النصي مرئيًا للمستخدم. وهذا بالطبع ليس ضروريا في الحالة العامة.

لمنع عرض نص التعليمات البرمجية المصدر بواسطة المتصفح، يجب كتابة التعليمات البرمجية المصدر كتعليق ترميز HTML، أي بين الأحرف

أي كالتالي:

ولكن هناك خدعة أخرى. المتصفحات الغبية بشكل خاص لا تفهم الرمز -->. لذلك، للتأكد من أن الكود غير مرئي للمستخدم في جميع المتصفحات، يوصى بالقيام بذلك:

ملحوظة
ستعمل جميع المتصفحات الحديثة تقريبًا بشكل جيد حتى إذا كنت لا تستخدم أحرف التعليق في ترميز HTML الخاص بك. ومع ذلك، من الأفضل القيام بذلك، حيث قد يكون لدى المستخدم متصفح قديم.

حسنًا، الآن مثال لصفحة HTML بسيطة تحتوي على برنامج JavaScript مضمن:

قم بإنشاء ملف نصي، وقم بتغيير امتداده (لا ينبغي أن يكون txt، ولكن htm أو html)، والصق النص أعلاه واحفظه.

ثم ببساطة انقر نقرا مزدوجا فوق هذا الملف. سيتم فتح متصفحك الافتراضي وستظهر الرسالة "البرنامج النصي الأول على صفحة الويب!".

كما كنت قد خمنت، يمكن تشغيل صفحات HTML والبرامج النصية المضمنة فيها على جهاز الكمبيوتر الخاص بالمستخدم، حتى لو لم يكن لديه اتصال بالإنترنت. مما يعني...

انتباه!
باستخدام JavaScript، يمكنك كتابة البرامج التي سيتم تشغيلها على جهاز الكمبيوتر الخاص بالمستخدم. ولا يهم على الإطلاق ما هو نظام التشغيل الموجود به!

الشيء الرئيسي هو أن متصفحه يدعم تنفيذ البرنامج النصي. وفي الوقت نفسه، لا تحتاج إلى أي أدوات تطوير خاصة تكلف أموالاً طائلة - يكفي مجرد محرر نصوص!

لقد أصدرنا كتابًا جديدًا بعنوان تسويق محتوى الوسائط الاجتماعية: كيفية الوصول إلى عقول متابعيك وجعلهم يقعون في حب علامتك التجارية.

الكود المصدري للموقع عبارة عن مجموعة من علامات HTML وأنماط CSS ونصوص JavaScript النصية التي يتلقاها المتصفح من خادم الويب.

المزيد من مقاطع الفيديو على قناتنا - تعلم التسويق عبر الإنترنت مع SEMANTICA

ويمكن مقارنتها بمجموعة الأوامر التي يصدرها القائد للجنود. تخيل أن الجمهور لا يرى أو يسمع رئيسه. ومن وجهة نظرهم، يقوم الجيش بإجراءات بشكل مستقل. في حالتنا، القائد هو المتصفح، والأوامر هي الكود المصدري، والجنود المسيرون هم النتيجة النهائية.
يتم تخزين الموقع على خادم الويب، الذي يرسل الصفحة بناء على طلب المستخدم. الطلب هو كتابة عنوان URL في شريط العناوين، أو النقر فوق رابط، أو النقر فوق زر إرسال في النموذج. لا يهم اللغة التي تمت كتابة صفحات الويب بها أو ما إذا كانت تتضمن مكونًا برمجيًا. النتيجة النهائية لأي خوارزمية من جانب الخادم هي مجموعة من علامات HTML والنص.

  • الكود المصدري للصفحة عبارة عن مجموعة من البيانات تتضمن:
  • ترميز HTML؛
  • ورقة الأنماط أو رابط الملف؛

برامج مكتوبة بلغة JavaScript أو روابط لملفات تحتوي على تعليمات برمجية.

تتم معالجة هذه الأقسام الثلاثة بواسطة المتصفح. بالنسبة للخادم، هذا هو ببساطة النص الذي يجب إرساله استجابةً للطلب.

لماذا قد نحتاج إلى دراسة الكود المصدري؟

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

ابحث عن مشكلات التعليمات البرمجية التي تتداخل مع عملية تحسين موقع الويب: الأنماط غير الموضوعة في ملفات منفصلة، ​​والبرامج النصية، والتعليمات البرمجية غير الصالحة.

كيفية عرض الكود المصدري للموقع

لن يكون من الممكن القيام بذلك بشكل كامل بالشكل الذي تم نشره به على الخادم من المتصفح. ولكن يمكنك رؤية كل العلامات من خلال النقر بزر الماوس الأيمن على الصفحة. هنا وأدناه باستخدام Google Chrome كمثال.

حدد خيار "عرض رمز الصفحة" واحصل على القائمة الكاملة في علامة تبويب منفصلة.

إنه مجرد نص عليك تحليله لفهمه. ولكن يمكنك الحصول على كود تفاعلي باستخدام أدوات المطور.

كيفية العثور على الكود المصدري لصفحة الموقع

انقر على أيقونة القائمة في المتصفح. غالبًا ما يكون على اليمين ويشبه ثلاث نقاط أو خطوط.

في قسم الأدوات الإضافية، حدد "أدوات المطور".

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

في علامة التبويب "المصدر"، يمكنك عرض محتويات بعض الملفات: البرامج النصية والخطوط والصور.

في علامة التبويب "الأمان"، يمكنك التحقق من شهادة الموقع.

ستساعدك علامة التبويب "التدقيقات" على التحقق من الموارد المنشورة على الاستضافة.

إذا كان موقع اللوحة الموجودة على اليمين غير مناسب، فيمكنك النقر فوق النقاط الثلاث وتغييره عن طريق تحديد العنصر المطلوب.

كيفية عرض العلامات الوصفية

يتضمن كل مستند HTML علامات هيكلية. وهنا بعض منها:

  • أتش تي أم أل – الوثيقة بأكملها.
  • الرأس - قسم رؤوس الخدمة.
  • العنوان - عنوان الصفحة (يتم عرضه في علامة التبويب).
  • النص - نص الوثيقة.
  • H1-H6 – عناوين نص الصفحة.
  • مقالة - مقالة.
  • القسم - القسم.
  • القائمة - القائمة.
  • شعبة - كتلة.
  • سبان - سلسلة.
  • ف – الفقرة.
  • الجدول - الجدول.
  • تم تصميم العناصر لتحديد الأقسام بشكل منطقي في الصفحة؛ وإذا لزم الأمر، يتم تصميمها باستخدام الأنماط. أنها تحتوي على نص مرئي بطريقة أو بأخرى على الصفحة. لكن علامة الرأس تحتوي على معلومات الخدمة. يتم استخدام العلامات الوصفية للإشارة إلى ذلك. كل ما هو مكتوب فيها مخصص للخادم ومحركات البحث.

    ولا يمكن معرفة محتوياتها بأي طريقة أخرى.

    دعنا ننتبه إلى علامة الرابط. بمساعدتها، يتم تحديد الروابط للملفات الخارجية المضمنة. إذا رغبت في ذلك، يمكنك رؤية المحتويات وحفظها على القرص. للقيام بذلك، حرك المؤشر إلى العنوان واضغط على RMB. حدد "فتح في علامة تبويب جديدة".

    سيتم فتح الملف المحدد في علامة تبويب جديدة يمكنك عرضها أو حفظها.

    كيفية عرض الكود المصدري للصفحة لتصحيح البرنامج النصي

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

    يمكن رؤية بناء الجملة مباشرة في الكود. هذا هو الغرض من علامة التبويب "المصدر".

    كيفية عرض كود عنصر معين

    بالنسبة للصفحات الكبيرة التي تحتوي على العديد من العناصر، من الصعب العثور على الكود اللازم في جميع العلامات. في هذه الحالة، يجب عليك استخدام أمر قائمة السياق الخاص. حرك الماوس فوق الجزء واضغط على RMB. حدد الأمر "عرض الرمز".

    سيتم فتح نفس النافذة، ولكن مع التركيز على الكائن المحدد.

    سيرة ذاتية

    قلنا لك ما هو رمز مصدر الصفحة. يكفي إتقان المعرفة الأساسية بـ HTML وCSS، وباستخدام أدوات المطور الملائمة، ستتمكن من تصحيح أخطاء مستندات HTML الخاصة بك.

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

    ناتاشا 31 أكتوبر 2011 الساعة 03:10 جافا سكريبت: إخفاء البرنامج النصي عن أعين المتطفلين
    • خزانة *

    هل سبق لك أن أردت إخفاء برنامج نصي على صفحتك عن الغرباء يؤدي إلى ظهور قائمة جميلة بشكل غير واقعي أو تنفيذ إجراءات أخرى لا ترغب في رؤيتها على كل موقع ويب ثانٍ قريبًا؟
    إذا كانت الإجابة بنعم، فستكون الطريقة الموضحة في هذه المقالة مفيدة لك بالإضافة إلى تشويش التعليمات البرمجية. في الوقت نفسه، سأحجز على الفور أن الطريقة ليست فعالة بنسبة 100٪، ولكن من المحتمل أن تحميك من معظم غير المتخصصين وبعض المحترفين.

    النظرية لنفترض أن لدينا صفحة nojs.php، وعليها نص Secret.js يجب إخفاؤه. يمكن للمتصفح والمستخدم استلام البرنامج النصي من الخادم بالطرق التالية:
  • تحميل البرنامج النصي الذي تم وضعه مباشرة على الصفحة أو تحميله باستخدام DOM؛
  • عرض البرنامج النصي في نافذة كود مصدر الصفحة؛
  • حفظ صفحة تحتوي على جميع الملفات على القرص الصلب الخاص بك؛
  • إدخال عنوان URL المباشر في شريط العناوين.
  • في الحالة الأولى، يجب على المتصفح إرسال رأس HTTP_REFERER HTTP.
    في الحالتين الثانية والثالثة، لا يتم نقله بواسطة جميع المتصفحات (يعرض Chrome وFireFox البرنامج النصي الذي تم تنزيله مسبقًا من ذاكرة التخزين المؤقت؛ أما Opera وIE فيقومان بتنزيل البرنامج النصي مرة أخرى، ولكن دون إرسال المرجع).
    وفي الحالة الرابعة، لا يتم نقل المُحيل بواسطة أي من المتصفحات الأربعة.
    إذا قمنا بإصدار JavaScript ديناميكيًا وتحققنا من وجود رأس المرجع في الطلب، فسنحمي أنفسنا على الفور من Opera وIE، ولكن بالنسبة لـ Crome وFirefox، سيتعين علينا التوصل إلى شيء أكثر تعقيدًا. سنقوم أولاً بتنزيل برنامج نصي واحد، والذي بدوره سيقوم بتنزيل برنامج نصي آخر، وسيتم التحقق من كلا التنزيلين للتأكد من وجود مرجع http. لقد ثبت علميًا أنه إذا قمت بإنشاء برنامج نصي على الصفحة ديناميكيًا document.createElement("script")، ثم قمت بحذفه من الصفحة، فسيعمل البرنامج النصي كالمعتاد، لكن لن يتم حفظه Practicenojs.php الصفحة لديها غرض تحميل script1.php
    ابحث عن JS بعد 10 ثواني سترى السكربت المخفي يعمل على شكل تنبيه، اضغط على الرابط بعد التنبيه للتأكد من أن الأحداث لم تسقط أيضاً.على هذا الرابط يمكنك رؤية البرنامج النصي المخفي script1.php ومهمته: تحميل script2.php ديناميكيًا إذا كان هناك رأس مرجعي. يمكن تقليل المهلات، اعتمادًا على وقت التنفيذ التقريبي للبرنامج النصي المخفي.
    script2.php ومهمته هي إنتاج النص النهائي إذا كان هناك رأس مرجعي
    النتائج ونتيجة لذلك، حصلنا على أنه لا يمكننا الاطلاع على الكود المصدري للصفحة، ولا تنزيل البرنامج النصي المخفي أو حفظه باستخدام المتصفحات الأربعة التي تم اختبارها. على العموم يمكنك مشاهدته بطريقتين:
    • اتبع الرابط المؤدي مباشرة إلى script2.php والموجود على صفحة موقعنا؛
    • تشكيل طلب http يشير إلى رأس المرجع.
    يمكنك زيادة فعالية الإخفاء باستخدام الطرق التالية:
  • باستخدام mod-rewrite، استبدل script1.js وscript2.js المتجهين إلى الخادم بـ script1.php وscript2.php، على التوالي، بحيث تحتوي الصفحة على ملفات js المألوفة، نظرًا لأن php ملفت للنظر؛
  • جعل النص الوهمي معقدًا ومعقولًا ومربكًا قدر الإمكان، بحيث يعاني الشخص الذي يحاول تحليله كثيرًا قبل أن يدرك أنه قد تم خداعه؛
  • تشويش الكود.
  • تنصل!

    ما ستراه داخل المصدر هو كود هراء رهيب، يُنصح بعدم استخدامه في مشاريعك لتجنب كل المشاكل التي واجهتها بنفسي ذات مرة. إذا قررت، بالطبع، كونك شخصًا خالدًا، استخدام الكود الخاص بي في مشاريعك، فأنا أحذرك من أنني أرفض كل المسؤولية عن استخدامه وأي مشاكل قد تواجهها. عند نشر تعديلاتك المختلفة، إن وجدت، قم بتغيير اسمها، لأن أدوات الشرطة لا تزال موجودة ومدعومة من قبل المطور. يوصى بأخذ مثل هذه الأمور على محمل الجد، لأنه لا يوجد أحد في مأمن من الإزالة، وأعتزم حماية حقوق الطبع والنشر للمنتج الخاص بي حتى نهاية الدعم لهذا البرنامج النصي. لا تنطبق مسألة حقوق الطبع والنشر على النشر على BlastHack فحسب، بل أيضًا جميع المواقع بشكل عام شكرا لتفهمكم.

    استكشاف سعيد!

    اتمنى لك يوم جيد،أيها السادة أعضاء LUA اليوم، 1 يناير 2019، أود أن أقدم لكم الكود المصدري الكامل للبرنامج النصي الخاص بي أدوات الشرطة. حتى لا يركض الناس لإنشاء نسخهم الخاصة من بنات أفكاري، سأقول أن هذا الإصدار قديم بما يكفي بحيث لم تعد أنظمته تشكل خطراً على مشروعي الرئيسي. سأقول على الفور أنني أنشر هذا المشروع هنا لأن ... أريد أن أساعد الأشخاص الذين يريدون معرفة LUA على التعلم. ليس من الغباء نسخ الكود وتغيير الاسم وتمرير المشروع على أنه مشروع خاص بك، ولكن لاكتساب المعرفة. أنا، مثل أي شخص آخر، أفهم كيف يبدو الأمر عندما تبدأ من الصفر تمامًا، دون أن يكون لديك مثال جيد إلى حد ما في متناول اليد. ولن أقول أيضًا أن هذا المشروع رائع. لقد بدأت في كتابتها 2017، فأنا نفسي بدأت للتو في البرمجة النصية على LUA، يمكن أن تكون هناك أنظمة فظيعة.

    تم التعليق على جزء كبير من الكود، ولا داعي حتى لإلقاء نظرة عليه، لقد كنت كسولًا جدًا لدرجة أنني لم أتمكن من حذفه.


    أوصي بقراءة هذا الموضوع بالكامل، وإلا فلن تفهم أي شيء على الأرجح عند فتح الكود المصدري. جاهز للقراءة؟ آمل أن تكون إجابتك إيجابية. دعونا نبدأ.




    يتكون المصدر نفسه من بعض الأشياء التي يصعب على المبتدئين إتقانها:
    نوافذ وتراكبات ImGUI [الواجهة الرئيسية]
    العمل مع الشبكة [الطلبات غير المتزامنة / طلبات HTTP العادية]
    العمل مع تكوينات INI [إعدادات البرنامج النصي]
    العمل مع مربعات الحوار متعددة الخطوات [واجهة إضافية]
    العمل مع التعبيرات العادية [نمط Lua]


    القليل من العمل مع SAMP LUA.


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


    وإذا تحدثنا عن المزايا فيمكننا تسليط الضوء على ما يلي:

    10 آلاف كود نظيف + 3 آلاف تعليق آخر مفيد في بعض الأحيان.
    الأنظمة الخاصة التي دفعت من أجلها أموالي التي كسبتها بشق الأنفس.
    أنظمة عالية الجودة يمكن أن تكون بمثابة مصادر لوظائف الشبكة.


    سأقوم أيضًا بتبسيط مهمتك وإدراج الوظائف المثيرة للاهتمام:

    لعب الأدوار التلقائي للأسلحة.

    يمكن العثور عليه في التعليق الرئيسي [ WEAPON_FUNCTION_BEGIN ].


    نظام مُعاد تصميمه قليلاً للطلبات الدورية غير المتزامنة.

    يمكن العثور عليه من خلال وظيفة البحث [loop_async_http_request].

    نظام دردشة كامل في البرنامج النصي مع الوظائف المذكورة أعلاه.

    يمكن العثور عليها على الخط [3985] أو عن طريق المفتاح. كلمة [getmsg2.php].


    وستكون قاعدة البيانات الكاملة لوزارة الداخلية مثالاً على ذلك.


    يمكن العثور عليها على الخط [8124] أو عن طريق المفتاح. كلمة [cmd_database].


    نظام ربط كامل بالنص مع العلامات.
    Mini MVDHelper، كما يعتقد الكثيرون، يمكن العثور عليه في جميع أنحاء البرنامج النصي.
    يستخدم كود المصدر هذا المكتبات التالية:



    ربما سأضيف معلومات مفيدة ومثيرة للاهتمام لهذا الموضوع. كما تعلمون، فإن الليلة التي تلي رأس السنة الجديدة تكون دائمًا صعبة. إذا نسيت أن أضيف شيئًا، ووجدته في المصدر، فاكتبه في الموضوع، وسأكون ممتنًا لك جدًا. آمل أن أتمكن من خلال كود المصدر الخاص بي من مساعدة بعض أولئك الذين بدأوا في دراسة LUA، أو يحاولون كتابة السيناريو الأول لهم على الأقل. إذا كانت لديك أسئلة حول المصدر، يمكنك أيضًا طرحها في هذا الموضوع. إذا كنت تريد ترك تعليق، يرجى المضي قدمًا، فالموضوع بأكمله تحت تصرفك. واسمحوا لي أن أذكركم مرة أخرى أنني بدأت كتابة هذا السيناريو عندما كنت أدرس للتو، لذا لا ينبغي أن تنتقدوه كثيرًا. كلنا بشر، كلنا نخطئ بطريقة أو بأخرى. طلب ضخم، قم بإنشاء نصوص فريدة، لا تكرر بعد الآخرين، ما لم تتعلم بالطبع من مثال شخص آخر. تذكر، إذا لم ينجح شيء ما، فحاول المزيد - يومًا ما ستنجح بالتأكيد إذا لم تستسلم. لا تحاول إخفاء الرمز الخاص بك، دع الآخرين يرون ما يمكنك فعله. بعد كل شيء، هذه هي الطريقة الوحيدة التي سيتمكنون بها من التعرف عليك كشخص يمكنه كتابة التعليمات البرمجية ولا يخشى إظهارها. أدرك أنني لست أول من نشر مشروعًا ضخمًا، ولكني آمل أيضًا ألا أكون آخر من يفعل ذلك. حسنًا، كان بافيل جارسون على اتصال بك، ادرس وحقق كل ما تريده. ونعم، أقدم هذا المصدر للمراجعة، وليس للنسخ الصارخ. إذا قمت بنسخه، فاكتب من أين حصلت عليه. وشكرا لكم جميعا.


    في الواقع، أعتقد أنك لا تهتم مطلقًا بما كتبته أعلاه، فأنت فقط تبحث عن المصدر.
    احترام كبير لأولئك الأشخاص الذين قرأوا النص بأكمله الذي توصلت إليه بعد رأس السنة الجديدة =))