Script HTML

JavaScript rend les pages HTML plus dynamiques et interactives.

La balise HTML <script>

JavaScript est le plus couramment utilisé pour la manipulation d'images, la validation de formulaires et la mise à jour dynamique du contenu.

Instance

Le script suivant affichera "Comment vas-tu ?" sur le navigateur :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<script>
    document.write("你好吗？")
</script>
</body>
</html>

Résultats du déroulement du programme :

Comment allez-vous ?

Pour en savoir plus sur les didacticiels Javascript, consultez les didacticiels JavaScript

Tag HTML<noscript> La balise

Le contenu de l'élément <noscript> ne sera affiché que si le navigateur ne prend pas en charge les scripts ou si les scripts sont désactivés :

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<script>
    document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p>
</body>
</html>

Résultat de l'exécution du programme :

Expérience JavaScript ( à partir du tutoriel JavaScript sur ce site)

Exemple de code JavaScript :

<!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>

Résultat de l'exécution du programme :

Réponse à l'événement JavaScript :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h1>我的第一个 JavaScript </h1>
<p id="demo">
    JavaScript 可以触发事件，就像按钮点击。</p>
<script>
    function myFunction()
    {
        document.getElementById("demo").innerHTML="Hello JavaScript!";
    }
</script>
<button type="button" onclick="myFunction()">点我</button>
</body>
</html>

Exécutez le programme pour voir

Style HTML de traitement JavaScript :

<!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>

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Script HTML

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]