يقدم HTML5 العديد من الميزات والتحسينات الجديدة ، أحدها هو دلالات. يضيف HTML5 عناصر جديدة لتعزيز الدلالات. نحن الآن نستخدم 2 ، رأس وتذييل. تحدد علامة <Header> رأس (معلومات مقدمة) المستند ، وتحدد علامة <Tower> تذييل القسم أو المستند. عادة ، سيحتوي هذا العنصر على اسم المبدع ، وتاريخ إنشاء المستند ، و/أو معلومات الاتصال.
[العلامات الدلالية توفر معلومات ذات معنى في HTML ، وليس فقط تحديد المؤثرات البصرية. ]
أفضل مكان لوضع كود جافا سكريبتهناك سبب يجعلنا نضع رمز JavaScript بعد كل محتوى الصفحة قبل علامة </body> ، بدلاً من في منطقة <head> </head>.
عادةً ما يتم تحميل المتصفحات وتقديم المحتوى من أعلى إلى أسفل. إذا تم وضع رمز JavaScript في منطقة الرأس ، فلن يتم تحميل محتويات مستند HTML حتى يتم تحميل جميع رمز JavaScript. في الواقع ، يتم حظر جميع التحميل والعرض إذا قام المتصفح بتحميل رمز JavaScript في الصفحة. هذا هو السبب في أننا وضعنا رمز JavaScript في نهاية المستند حتى نتمكن من توفير أداء أعلى.
عند ترجمة هذا الكتاب ، فإن أحدث إصدار من jQuery هو 1.7 (الكلمات الأصلية هي: AtThetime من كتابة هذا الكتاب ، إصدار Thelatest jQuery هو 1.4.4. JQuery لديه إصدار MIN وإصدار التطوير ، يمكنك الاختيار كما تريد). هذا هو السبب في أن اسم ملف jQuery في مثال الكود الخاص بنا هو jQuery -1.7.min.js. قد لا يعمل رقم الإصدار هذا عند استخدامك ، ولكن الاستخدام هو نفسه ما لم يكن لدى JQuery تعديلات كبيرة لجعل الإصدار الجديد لم يعد متوافقًا إلى الوراء.
قم بتشغيل رمزنا بمجرد أن تكون الصفحة جاهزةنحتاج إلى التأكد من أن الصفحة جاهزة قبل تشغيل رمز JavaScript الخاص بنا. خلاف ذلك ، سنحصل على خطأ عندما نحاول الوصول إلى العناصر التي لم يتم تحميلها. توفر لنا jQuery طريقة لضمان تحميل الصفحة. الرمز كما يلي:
jQuery (وثيقة). ready (function () {
// codehere.
}) ؛
في الواقع ، نحن فقط بحاجة إلى كتابة هذا:
$ (function () {
// codehere.
}) ؛
هذه العلامة $ هي اختصار jQuery. عندما ندعو (الكلمة هي معنى المكالمة ، Zhuangability) $ (شيء ما) ، فإننا ندعو بالفعل jqery (شيء ما).
$ (function_callback) هو اختصار آخر لـ ReadyEvent.
إنه نفس الرمز التالي:
$ (document). ready (function_callback) ؛
وبالمثل ، مثل ما يلي:
jQuery (ducment). ready (function_callbak) ؛
لغز1. ما هو الموقع الأكثر ملاءمة لوضع رمز JavaScript؟
أ. قبل علامة <head>
ب. أدخل في منتصف العنصر <head> </head>.
ج. بعد علامة <Body>
د. </body> قبل العلامة
إنشاء عناصر من لعبة Pingpong
نحن على استعداد لإنشاء لعبة pingpong.
احصل على تتحرك
1. سنستمر في مثال تثبيت jQuery الخاص بنا وفتح index.html في المحرر.
2. ثم ، استخدم عقدة DIV في الجسم لإنشاء منصة ألعاب ، مع 2 إيقاع وكرة في منصة اللعبة:
<vivid = "game">
<divid = "playground">
<divid = "paddlea" class = "paddle"> </viv>
<divid = "paddleb" class = "paddle"> </viv>
<divid = "ball"> </viv>
</div>
</div>
3. لقد بنينا الآن كائنات اللعبة ونمنحهم الآن أنماط. ضع الرمز في عنصر الرأس:
<style>
#ملعب{
الخلفية:#e0ffe0 ؛
العرض: 400 بكسل ؛
الارتفاع: 200 بكسل ؛
الموقف: قريب
الفائض: مخفي.
}
#كرة{
الخلفية: #FBB ؛
الموقف: مطلق ؛
العرض: 20 بكسل ؛
الارتفاع: 20 بكسل ؛
اليسار: 150 بكسل ؛
أعلى: 100px ؛
الحدود الحدودية: 10px ؛
}
.مجداف{
الخلفية: #BBF ؛
اليسار: 50 بكسل ؛
أعلى: 70 بكسل ؛
الموقف: مطلق ؛
العرض: 30 بكسل ؛
الارتفاع: 70 بكسل ؛
}
#paddleb {
اليسار: 320 بكسل ؛
}
</style>
4. في الجزء الأخير ، نضع منطق JavaScript وراء مرجع jQuery. نكتبه في ملف منفصل لأن الكود الخاص بنا سيصبح أكبر وأكبر. لذلك ، نحتاج إلى إنشاء مجلد اسمه HTML5/"> html5games.pingpong.js.
5. بعد أن أعدنا ملفات JavaScript ، نحتاج إلى توصيلها بملف HTML الخاص بنا. ضع الكود التالي أمام علامة </body> لملف index.html:
<scriptsrc = "js/jquery-1.7.min.js"> </script>
<scriptsrc = "js/html5games.pingpong.js"> </script>
[نصيحة الودية للمترجم: جربه
<scriptsrc = "js/jquery-1.4.4.js"/>
<scriptsrc = "js/html5games.pingpong.js"/>
ستجد أن الكتابة وفقًا للمواصفات ستتجنب الكثير من المتاعب]
6. وضعنا منطق اللعبة في html5games.pingpong.js. هنا هو منطقنا الوحيد الآن ، تهيئة المضرب:
// codeinside $ (function () {} willrunafterTheDomIsloadedand
مستعد
$ (function () {
$ ("#paddleb"). css ("top" ، "20px") ؛
$ ("#paddlea"). css ("Top" ، "60px") ؛
}) ؛
7. الآن دعنا نختبر نتائجنا في المتصفح. افتح ملف index.html في المتصفح ، يجب أن نرى لقطة شاشة مشابهة لقطة الشاشة التالية:
ماذا حدث؟هناك 2 مضارب وكرة واحدة في لعبتنا. لقد قمنا أيضًا بتهيئة موضع 2 مضارب باستخدام jQuery.
[هذا كل شيء اليوم ، والجزء التالي يدور حول وظيفة محدد jQuery و CSS. إذا كان لديك أي أخطاء أو أسئلة ، يرجى ترك رسالة لي]
رؤية تعليقاتك هي أكبر دافع لي!