Expérience d'apprentissage JavaScript

1. Avant-propos :

J'ai lu le Petit Livre Rouge (JavaScript Advanced Programming) il y a quelque temps, mais je n'avais pas prévu de le lire et je n'ai pas pris de notes détaillées après l'avoir lu. , je me sentais un peu vide et j'avais l'impression que quelque chose n'allait pas. C'est difficile de se souvenir de ce que j'ai appris, et je n'ai pas une profonde impression de frustration. Le back-end a appris js, vous décidez de mourir ou non.

Je l'ai donc lu, relu et j'ai décidé de bloguer à ce sujet pour améliorer mon impression et prendre des notes de lecture pour référence et discussion futures.

Rappel chaleureux : les notes seront subjectives, alors concentrez-vous sur l'enregistrement des connaissances.

2. Historique de JavaScript

• Origine : On dit qu'en 1995, à la fin du siècle dernier, Netscape lancé le navigateur Navigator. L'entreprise recherche non seulement du HTML statique, mais également des effets dynamiques. Elle souhaite également pouvoir gérer la vérification du formulaire. N'attendez pas toujours le backend pour savoir si la saisie du formulaire est légale ou non, surtout dans ce domaine. Nous avons attendu des minutes à la fois, et maintenant nous attendons dix secondes sans vouloir l'éteindre, tout en nous plaignant d'un site Web en panne.

• Pratique : Si vous avez un objectif, faites-le. Il y a beaucoup de gens formidables dans Netscape, Brendan Eich a développé JavaScript en 10 jours (il est écrit 10 jours). sur Internet). Lors de sa sortie, il s'appelait LiveScript, mais afin de capitaliser sur la popularité de la célèbre star Java, il a été remplacé par JavaScript, donc en fait ils n'ont rien à voir l'un avec l'autre.

• Concurrence : Voyant que Netscape a js, Microsoft a estimé que ce n'était pas bon et que mon IE était sur le point d'être tué. En même temps, j'ai aussi senti. que js avait un brillant avenir, j'ai donc créé une implémentation JavaScript appelée JScript.

• Standards : La concurrence js entre Netscape et Microsoft a conduit à des incohérences de versions. Avec les inquiétudes de l'industrie, la standardisation de JavaScript a été mise à l'ordre du jour. L'organisation ECMA s'est lancée dans cette démarche et a finalement proposé ECMAScript comme standard en 1997. Ici, ECMAscript et JavaScript peuvent être considérés comme exprimant la même chose

3. ECMAScript

ECMAScript (ci-après dénommé ES) est formulé par ECMA-262, et ES concerne principalement la langue. La base de la grammaire est l'existence d'une norme. Si vous insistez pour distinguer ES et JS, ES est le langage standard de base et JS est le langage implémenté sur la base de ce standard.

À propos des versions ES : ES a connu de nombreuses versions depuis sa formulation en 1997. Les versions précédentes étaient toutes des modifications mineures. Versions importantes :

• ES3, la troisième version, est la première véritable modification du standard

• 2009 ES5 est actuellement supporté par tous les principaux navigateurs populaires

• ES6 publié en 2015 est également devenu populaire.

• Des versions seront publiées chaque année après 2015, mais les navigateurs ne sont pas encore en mesure de le prendre en charge.

4. L'implémentation de JavaScript

javascript se compose de trois parties :

1. ECMAScript : La partie principale est la base grammaticale de js. . Nous continuerons à écrire sur sa syntaxe plus tard.
2.DOM (Text Object Model) : Interface de programmation d'application pour l'exploitation de documents HTML. À propos du DOM :

• L'émergence du DOM permet d'implémenter du HTML dynamique (DHTML), qui peut modifier l'apparence et le contenu des pages Web sans recharger la page.

• Problèmes causés par le DOM : Principalement en termes de compatibilité, Netscape et Microsoft ont leurs propres opinions, ce qui entraîne une incompatibilité des navigateurs. Ce problème n'a pas été résolu. Le W3C a commencé à planifier les niveaux DOM

• DOM : DOM1, DOM2, DOM3. Les niveaux ici sont équivalents aux versions DOM, ce qui signifie que DOM s'améliore constamment. Maintenant, le dernier en date est DOM3

3.BOM (modèle de navigateur) : utilisez BOM pour contrôler des parties autres que la page affichée par le navigateur

Utilisation de JavaScript :

5. 🎜><script>(1) Attributs de balise : la clé pour utiliser js dans les pages Web est d'utiliser la balise

, qui possède 6 attributs :

1. async : facultatif, indiquant télécharger le script immédiatement, mais ne gêne pas les autres opérations sur la page. Autrement dit, les scripts asynchrones s'appliquent uniquement aux fichiers de script externes.

2. defer : facultatif, indiquant que le script peut être retardé jusqu'à ce que le document soit complètement analysé et affiché. Autrement dit, les scripts retardés ne conviennent qu'aux fichiers de script externes.

3. src : Facultatif, indiquant un fichier externe contenant le code à exécuter.

4. type : Texte par défaut/Javascript. js est exécuté par défaut et n'a pas besoin d'être spécifié.

5. charset : facultatif, indiquant le jeu de caractères du code spécifié via l'attribut src. La plupart des navigateurs ignoreront sa valeur et peu de personnes l'utiliseront.

6. 
   langue : obsolète

   Les 4 top 4 sont couramment utilisés

<script >(2) Utilisation : Utilisation

: Il y a deux opérations :

1. Écrivez le code directement dans la balise, c'est-à-dire intégrez le code en html. Cette méthode n'est pas recommandée. Par exemple :

<script>
 function helloWorld(){
    alert("hello world!");
 }
 helloWorld();</script>

2. Une autre façon d'introduire des fichiers externes via l'attribut src.

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

Utiliser au maximum les fichiers js de référence externe, avantages :

• Maintenabilité : code embarqué en html, difficile à maintenir et à une mauvaise lisibilité, il sera beaucoup plus facile à maintenir dans un fichier js séparé. <🎜>

• 可缓存：浏览器可以根据具体的设置缓存链接的所用外部js文件

• 适应未来：通过外部文件来包含js无须对XHML的特别处理和注释hack。HTML和XHTML的包含文件的语法相同。

特别注意：<script>在使用了src属性后，不要在内嵌代码，此时的内嵌的代码不会被执行。只会执行src对应文件的代码。

(3)位置：关于<script> 在HTML文档中的位置：

在HTML4中规定<script> 标签可以放在 <head>和<body> 标签内。
由于浏览器解析HTML文档是由上到下，且在遇到<script> 标签后会先解析和执行js代码，并中断HTML的加载，所以放在<head> 标签中是会使得HTML文档可视内容中断加载。
画重点:所以<script> 标签的位置首考虑放在<body> 标签底部。例如：

<html>
    <head>
       <title>hello js</title>
    </head>
    <body>
        <p>hello js!</p>
        <!-- js文件放在body底部 -->
        <script src="example.js"></script>
    </body></html>

六、JavaScript的平稳退化方案

什么是平稳退化：就是有些浏览器不支持js，当然现在几乎没有浏览器这么菜啦，还有就是js功能被禁用。这时就需要没有js的情况下你的网页怎么友好一点交互，不会搞得太难看，太尴尬。
使用<noscript> 标签，应用场景：

• 浏览器不支持JavaScript

• 浏览器支持脚本，但脚本被禁止了

例子：当浏览器不支持js或禁用js时就会显示出noscript标签中的内容，若浏览器能执行js则noscript就被隐藏。

<html>
    <head>
        <script src="example.js"></script>
    </head>
    <body>
        <noscript>
         <p>本页面需要浏览器支持JavaScript</p>
        </noscript>
    </body></html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!