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

Mahmoud Ali Nawwar · 6 أغسطس 2021

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

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

عبدالله عبدالرحمن11 · 6 أغسطس 2021

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

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

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

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

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

Mahmoud Ali Nawwar · 6 أغسطس 2021

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

بلال زيادة · 7 أغسطس 2021

بتاريخ 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>';

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

Yomna Raouf · 7 أغسطس 2021

بتاريخ 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>
`;

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

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

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

السؤال

Mahmoud Ali Nawwar

4 أجوبة على هذا السؤال

Recommended Posts

عبدالله عبدالرحمن11

Mahmoud Ali Nawwar

بلال زيادة

Yomna Raouf

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية