Maison > Article > interface Web > Comment créer une page Web avec javascript

Comment créer une page Web avec javascript

王林original: 2023-05-12 11:40:371081parcourir

Avec la popularité d'Internet, de plus en plus de personnes essaient de créer leur propre site Web. En tant que langage de programmation couramment utilisé, JavaScript peut être utilisé pour définir divers effets interactifs et affichages dynamiques pour les pages Web. Cet article explique comment utiliser JavaScript pour configurer des pages Web.

1. Comprendre les bases de JavaScript

JavaScript est un langage interprété qui peut s'exécuter directement dans le navigateur, il n'a donc pas besoin d'être compilé en langage machine comme les autres langages. JavaScript peut être utilisé pour gérer la validation des formulaires, les mises à jour de contenu dynamique, les effets interactifs, etc.

2. Comment intégrer JavaScript dans une page Web

Il existe deux façons de référencer JavaScript dans une page Web :

1 Écrivez directement le code JavaScript dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a

L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用JavaScript设置网页</title>
</head>
<body>
    <h1>这是一个使用JavaScript设置网页的例子</h1>
    <script>
    alert("Hello,World!");
    </script>
</body>
</html>

Dans le code ci-dessus, nous utilisons la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a dans la balise 6c04bd5ca3fcae76e30b72ad730ca86d et y enveloppons la fonction alert(). La fonction alert() est une fonction couramment utilisée en JavaScript. Elle est utilisée pour afficher une boîte de dialogue sur la page et est généralement utilisée pour les tests et le débogage.

2. Écrivez le code JavaScript dans un fichier js externe puis référencez-le dans le fichier HTML.

L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用JavaScript设置网页</title>
    <script src="test.js"></script>
</head>
<body>
    <h1>这是一个使用JavaScript设置网页的例子</h1>
</body>
</html>

Dans le code ci-dessus, nous avons créé un nouveau fichier JavaScript nommé test.js et référencé le fichier en HTML. Dans le fichier test.js, nous pouvons écrire le code qui doit être exécuté.

3. Utilisez JavaScript pour configurer la page Web

1. Changez le titre de la page Web

document.title = "新标题";

Dans le code ci-dessus, nous utilisons l'attribut document.title pour changer le titre de la page Web. Remplissez simplement le nouveau titre dont vous avez besoin dans la partie à droite du signe égal.

2. Récupérez l'élément et modifiez le contenu de l'élément

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用JavaScript设置网页</title>
</head>
<body>
    <h1>这是一个使用JavaScript设置网页的例子</h1>
    <p id="demo">这是一个段落</p>
    <button onclick="myFunction()">点击更改</button>
    <script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "段落内容已更改";
    }
    </script>
</body>
</html>

Dans le code ci-dessus, nous définissons un paragraphe en HTML avec l'identifiant de démo. En JavaScript, nous obtenons l'élément via la méthode document.getElementById(), puis utilisons l'attribut innerHTML pour modifier le contenu de l'élément.

3. Changez le style de l'élément

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用JavaScript设置网页</title>
    <style>
    #demo {
        font-size: 24px;
        color: red;
    }
    </style>
</head>
<body>
    <h1>这是一个使用JavaScript设置网页的例子</h1>
    <p id="demo">这是一个段落</p>
    <button onclick="myFunction()">点击更改</button>
    <script>
    function myFunction() {
        document.getElementById("demo").style.fontSize = "40px";
        document.getElementById("demo").style.color = "blue";
    }
    </script>
</body>
</html>

Dans le code ci-dessus, nous définissons la taille de la police et la couleur de l'élément de démonstration dans la balise de style. En JavaScript, nous utilisons element.style.property pour modifier les propriétés de style d'un élément. Où element fait référence à l'élément dont nous souhaitons modifier le style et property fait référence aux attributs de style à modifier, tels que fontSize et color.

4. Remplacez l'image

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用JavaScript设置网页</title>
</head>
<body>
    <h1>这是一个使用JavaScript设置网页的例子</h1>
    <img id="myImage" src="flower.jpg" width="250" height="200">
    <button onclick="changeImage()">切换图片</button>
    <script>
    function changeImage() {
           var image = document.getElementById('myImage');
           if (image.src.match("flower")) {
              image.src = "bird.jpg";
           } else {
              image.src = "flower.jpg";
           }
    }
    </script>
</body>
</html>

Dans le code ci-dessus, nous définissons une image en HTML et obtenons l'image par identifiant. En JavaScript, nous définissons une fonction changeImage qui modifie l'attribut src de l'image lorsque l'on clique sur le bouton, remplaçant ainsi l'image.

Ci-dessus sont quelques méthodes de base pour configurer des pages Web à l'aide de JavaScript. Grâce aux fonctions puissantes de JavaScript, nous pouvons également implémenter des fonctions avancées telles que la validation de formulaire, l'interaction des données Ajax, le dessin sur toile, etc. via JavaScript. J'espère que cet article sera utile aux lecteurs et ajoutera des effets interactifs plus riches à vos pages Web.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery convertir mb et koArticle suivant：jquery convertir mb et ko

Articles Liés

Voir plus