HTML5 introduit de nombreuses nouvelles fonctionnalités et améliorations, dont la sémantique. HTML5 ajoute de nouveaux éléments pour améliorer la sémantique. Nous n'utilisons plus que 2, en tête et pied de page. La balise <-en-tête> définit l'en-tête (informations d'introduction) du document, et la balise <foomer> définit le pied de page de la section ou du document. En règle générale, cet élément contiendra le nom du créateur, la date de création du document et / ou les coordonnées.
[Les balises sémantiques fournissent des informations significatives dans HTML, pas seulement définir les effets visuels. ]]
Le meilleur endroit pour placer le code JavaScriptIl y a une raison pour laquelle nous placons du code JavaScript après tout le contenu de la page avant la balise </body>, plutôt que dans la zone <A-Head> </ Head>.
En règle générale, les navigateurs chargent et rendent le contenu de haut en bas. Si le code JavaScript est placé dans la zone de tête, le contenu du document HTML ne sera pas chargé tant que tout le code JavaScript sera chargé. En fait, tout le chargement et le rendu sont bloqués si le navigateur charge le code JavaScript dans la page. C'est pourquoi nous mettons le code JavaScript à la fin du document afin que nous puissions fournir des performances plus élevées.
Lors de la traduction de ce livre, la dernière version jQuery est 1.7 (les mots originaux sont: à la suite de l'écriture de ce livre, la version jQuery la plus la plus. C'est pourquoi le nom du fichier jQuery dans notre exemple de code est jQuery-1.7.min.js. Ce numéro de version peut ne pas fonctionner comme vous utilisez, mais l'utilisation est la même à moins que JQuery ait des modifications majeures pour rendre la nouvelle version qui n'est plus compatible en arrière.
Exécutez notre code une fois que la page est prêteNous devons nous assurer que la page est prête avant d'exécuter notre code JavaScript. Sinon, nous obtiendrons une erreur lorsque nous essaierons d'accéder aux éléments qui ne sont pas chargés. JQuery nous fournit une méthode pour nous assurer que la page est chargée. Le code est le suivant:
jQuery (document) .ready (function () {
// Codehere.
});
En fait, nous avons juste besoin d'écrire ceci:
$ (function () {
// Codehere.
});
Cette tag $ est l'abréviation de jQuery. Lorsque nous appelons (le mot est le sens de l'appel, zhuangabilité) $ (quelque chose), nous appelons en fait JQery (quelque chose).
$ (function_callback) est une autre abréviation pour ReadyEvent.
C'est la même chose que le code suivant:
$ (document) .ready (function_callback);
De même, la même chose que ce qui suit:
jQuery (DuCment) .ready (function_callbak);
Questionnaire1. Quel emplacement est le plus adapté à la mise en place du code JavaScript?
un. Avant la balise <A-Head>
né Insérez au milieu de l'élément <adre> </ada>.
c. Après la balise <body>
d. </body> avant le balise
Créer des éléments du jeu de pingpong
Nous sommes prêts à créer un jeu de pingpong.
Bouger
1. Nous continuerons avec notre exemple d'installation de jQuery et ouvrir Index.html dans l'éditeur.
2. Ensuite, utilisez le nœud Div dans le corps pour créer une plate-forme de jeu, avec 2 battements et une balle dans la plate-forme de jeu:
<divid = "jeu">
<divid = "Playground">
<divid = "paddlea" class = "paddle"> </div>
<divid = "paddleb" class = "paddle"> </div>
<divid = "ball"> </div>
</div>
</div>
3. Nous avons maintenant construit les objets de jeu et leur donner maintenant des styles. Mettez le code dans l'élément de tête:
<style>
#Playground {
Contexte: # E0FFE0;
Largeur: 400px;
hauteur: 200px;
Position: relative;
débordement: caché;
}
#balle{
Contexte: #fbb;
Position: absolue;
Largeur: 20px;
hauteur: 20px;
Gauche: 150px;
En haut: 100px;
Border-Radius: 10px;
}
.pagayer{
Contexte: #bbf;
Gauche: 50px;
En haut: 70px;
Position: absolue;
Largeur: 30px;
hauteur: 70px;
}
#paddleb {
Gauche: 320px;
}
</ style>
4. Dans la dernière partie, nous plaçons la logique JavaScript derrière la référence jQuery. Nous l'écrivons dans un fichier séparé car notre code deviendra de plus en plus grand. Par conséquent, nous devons créer un dossier nommé html5 / "> html5games.pingpong.js.
5. Après avoir préparé les fichiers JavaScript, nous devons les connecter à notre fichier HTML. Placez le code suivant devant la balise </body> du fichier index.html:
<scriptsrc = "js / jquery-1.7.min.js"> </ script>
<scriptsrc = "js / html5games.pingpong.js"> </ script>
[Astuce amicale du traducteur: essayez-le
<scriptsrc = "js / jquery-1.4.4.js" />
<scriptsrc = "js / html5games.pingpong.js" />
Vous constaterez que l'écriture en fonction des spécifications évitera beaucoup de problèmes]
6. Nous avons mis la logique de jeu dans html5games.pingpong.js. Voici notre seule logique maintenant, initialisant la raquette:
// CodeInside $ (function () {} willrunafterthedoLisloadEdandand
prêt
$ (function () {
$ ("# paddleb"). css ("top", "20px");
$ ("# paddlea"). CSS ("top", "60px");
});
7. Maintenant, testons nos résultats dans le navigateur. Ouvrez le fichier index.html dans le navigateur, nous devrions voir une capture d'écran similaire à la capture d'écran suivante:
ce qui s'est passé?Il y a 2 raquettes et 1 balle dans notre jeu. Nous avons également initialisé la position de 2 raquettes à l'aide de jQuery.
[C'est tout aujourd'hui, et la prochaine partie concerne le sélecteur jQuery et la fonction CSS. Si vous avez des erreurs ou des questions, veuillez me laisser un message]
Voir vos commentaires est ma plus grande motivation!