Introduction à JavaScript
JavaScript est le langage de script le plus populaire sur Internet. Ce langage peut être utilisé pour le HTML et le Web, et peut être largement utilisé sur les serveurs, PC, ordinateurs portables, tablettes, smartphones et autres appareils.
JavaScript est un langage de script
JavaScript est un langage de programmation léger.
JavaScript est du code de programmation qui peut être inséré dans des pages HTML.
JavaScript, lorsqu'il est inséré dans une page HTML, peut être exécuté par tous les navigateurs modernes.
JavaScript est facile à apprendre.
Ce que vous apprendrez
Voici les principales choses que vous apprendrez dans ce tutoriel.
JavaScript : écrire directement dans le flux de sortie HTML
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> JavaScript 能够直接写入 HTML 输出流中: </p> <script> document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落。</p>"); </script> <p> 您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。 </p> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
![]() | 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。 |
---|
JavaScript : Réagir aux événements
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>我的第一个 JavaScript</h1> <p> JavaScript 能够对事件作出反应。比如对按钮的点击: </p> <button type="button" onclick="alert('欢迎!')">点我!</button> </body> </html>
Exécuter l'instance »
Cliquez sur "Exécuter" Bouton "Exemple" pour visualiser des exemples en ligne
La fonction alert() n'est pas couramment utilisée en JavaScript, mais elle est très pratique pour tester du code. L'événement
onclick n'est qu'un des nombreux événements que vous découvrirez dans ce didacticiel.
JavaScript : Modifier le contenu HTML
Utiliser JavaScript pour traiter le contenu HTML est une fonctionnalité très puissante.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改变 HTML 元素的内容。 </p> <script> function myFunction() { x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改变内容 } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Vous verrez souvent document.getElementById("some id"). Cette méthode est définie dans le DOM HTML.
DOM (DocumentObject Model) (Document Object Model) est la norme officielle du W3C pour accéder aux éléments HTML.
Vous découvrirez le HTML DOM dans plusieurs chapitres de ce tutoriel.
JavaScript : Modifier l'image HTML
Cet exemple modifiera dynamiquement la source (src) du HTML <image> :
Exemple
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/upload/course/000/000/009/580432b53cb5d221.gif"; } else { element.src="/upload/course/000/000/009/5804353cb2562758.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/upload/course/000/000/009/580432b53cb5d221.gif" width="100" height="180"> <p>点击灯泡就可以打开或关闭这盏灯</p> </body> </html>
Exécuter l'exemple»
Cliquez sur le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne
JavaScript peut modifier la plupart des attributs de n'importe quel Élément HTML. Et pas seulement des images.
JavaScript : Changer le style HTML
Modifier le style des éléments HTML, qui est une variante de la modification des attributs HTML.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改变 HTML 元素的样式。 </p> <script> function myFunction() { x=document.getElementById("demo") // 找到元素 x.style.color="#ff0000"; // 改变样式 } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
JavaScript : Valider la saisie
JavaScript est souvent utilisé pour valider la saisie de l'utilisateur.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>我的第一段 JavaScript</h1> <p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p> <input id="demo" type="text"> <script> function myFunction() { var x=document.getElementById("demo").value; if(x==""||isNaN(x)) { alert("不是数字"); } } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Le saviez-vous ?
![]() | JavaScript et Java sont deux langages complètement différents, à la fois dans leur concept et leur conception supérieure.
|
---|