Utilisation de JavaScript

Utilisation de JavaScript

Les scripts HTML doivent être placés entre les balises <script>

Les scripts peuvent être placés dans les sections <body> et <head>

Balise <script>

Pour insérer du JavaScript dans une page HTML, utilisez la balise <script>

<script>
alert("Mon premier JavaScript ");
</script>

Vous n'avez pas besoin de comprendre le code ci-dessus. Comprenez simplement que le navigateur interprète et exécute le code JavaScript entre <script> et </script>. JavaScript dans

<body> chargement des pages :

<!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écutez le programme pour l'essayer

Fonctions et événements JavaScript

L'instruction JavaScript dans l'exemple ci-dessus sera exécutée lors du chargement de la page. Souvent, nous devons exécuter du code lorsqu'un événement se produit, par exemple lorsque l'utilisateur clique sur un bouton.

Si nous mettons le code JavaScript dans une fonction, nous pouvons appeler la fonction lorsque l'événement se produit.

JavaScript dans <head> ou <body>

Vous pouvez mettre un nombre illimité de scripts dans votre document HTML.

Les scripts peuvent se trouver dans les sections <body> ou <head>, ou les deux.

Une approche courante consiste à placer les fonctions dans la section <head> De cette façon, ils peuvent être placés au même endroit sans interférer avec le contenu de la page. Fonction JavaScript dans

<head>

Dans cet exemple, nous plaçons une fonction JavaScript dans The < head> de la page HTML. Cette fonction sera appelée lorsque vous cliquerez sur le bouton :

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
    <script>
        function myFunction(){
            document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
        }
    </script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

Exécutez le programme pour l'essayer

<body> Fonction JavaScript dans

Dans cet exemple, nous plaçons une fonction JavaScript dans le < de la page HTML ;corps> Cette fonction sera appelée lorsque vous cliquerez sur le bouton :

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title> 
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

Exécutez le programme pour l'essayer

JavaScript externe

Vous pouvez également enregistrer le script dans un fichier externe. Les fichiers externes contiennent souvent du code utilisé par plusieurs pages Web.

L'extension de fichier des fichiers JavaScript externes est .js.

Si vous devez utiliser un fichier externe, veuillez définir le fichier .js dans l'attribut "src" de la balise <script> :

Exemple

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>PHP中文网（php.cn）</title> 
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
</body>
</html>

Vous pouvez placer le script dans la balise <head> ou <body> et l'effet réel sera exactement le même que si vous aviez écrit le script dans la balise <script>

Le code du fichier myScript.js est le suivant :

function myFunction(){
document.getElementById("demo").innerHTML="Mon première fonction JavaScript";
}

Remarque : Les scripts externes ne peuvent pas contenir la balise <script>.

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> function myFunction(){ document.getElementById("demo").innerHTML="你好，我是你的第一个 JavaScript 函数哦"; } </script> </head> <body> <h1>JavaScript</h1> <p id="demo">我是一个段落哦</p> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Utilisation de JavaScript

É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]