• 0

مشكلة تضمين ملفات جافاسكريبت في ملف html

ما الخطأ في هذا الكود

عندما أفتح المتصفح لا يظهر شئ

project (2).zip

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1
بتاريخ 12 ساعات قال Mahmoud Ali Nawwar:

ما الخطأ في هذا الكود

عندما أفتح المتصفح لا يظهر شئ

project (2).zip

إذا قمت بتضمين ملف ال JavaScript بشكل صحيح باستخدام الوسم script كما أخبرتك في إجابة على السؤال السابق

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <!--تضمين ملف جافاسكربت-->
    <script src="script/script.js"></script>
</head>

<body>

</body>

</html>

ستلاحظ ظهور الخطأ التالي في ال console في المتصفح:

Uncaught SyntaxError: Invalid or unexpected token   script.js:10 

و الذي يخبرك بوجود خطأ متعلق بقواعد كتابة اللغة في السطر رقم 10، و بالنظر إلى هذا السطر في الكود سنجد أنه السطر الذي قمت بتعريف المتغير mark فيه

let mark = '
<div class= "card">
<div class= "child">
<h1> TITLE</h1>
<P> HELLO FREINDS</P>
</div>
</div>
';

طيب، ما هو الخطأ الذي خالف قواعد اللغة هنا؟

الخطأ هو استخدامك لعلامة التنصيص العادية ' ' لوضع أكواد ال html بداخلها، حيث أنه يفترض وضعها داخل backtick"شرطة مائلة" ` ` كما يلي حتى تتمكن من كتابة السلسلة النصية في أكثر من سطر، حيث أن جافاسكريبت لا تدعم ال multiple line strings بشكل افتراضي و إنما تدعم السلاسل النصية ذات السطر الواحد فقط. لذلك في es6 تمت إضافة الشرطة المائلة `` لعدة أسباب منها كتابة متغيرات داخل السلاسل النصية و كتابة سلاسل نصية في أكثر من سطر:

let mark = `
    <div class= "card">
        <div class= "child">
            <h1> TITLE</h1>
            <P> HELLO FREINDS</P>
        </div>
    </div>
`;

و سيعمل بشكل صحيح:

610e6687b960a_Screenshot(2).thumb.png.9d4b5fce725d4d6f5c0239e87a4bb8b7.png

المشروع الخاص بك بعد التعديل: project.zip 

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

لقد قمت بتضمين ملف الجافاسكريبت بالعنصر الخاص بتضمين CSS كالآتي

<link rel="stylesheet" href="script/script.js">

وهذا خطأ هذا أنك تقوم بتضمين جافاسكريبت بإستخدام عنصر آخر يسمى script كالآتي

<script src="script/script.js"></script>

وكان يظهر خطأ أنك تقوم بإستدعاء ملف CSS ليست صيغته .css لأنك كنت تقوم بتضمين ملف جافاسكريبت الذي صيغته .js 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

قمت بتعديله ولكن لا توجد اسـتجابة للأمر document.write()

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 5 ساعات قال Mahmoud Ali Nawwar:

قمت بتعديله ولكن لا توجد اسـتجابة للأمر document.write()

بالإضافة إلى إجابة المدرب عبدالمجيد , ايضا يمكنك إزالة الأسطر من بين الكلمات في السطر التالي 

let mark = '
<div class= "card">
<div class= "child">
<h1> TITLE</h1>
<P> HELLO FREINDS</P>
</div>
</div>
';

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

let mark = '<div class= "card"><div class= "child"><h1> TITLE</h1><P> HELLO FREINDS</P></div></div>';

ثم تقوم بتجربة تنفيذ الكود مرة أخرى ستجد أن الكود يعمل بشكلٍ جيد.

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن