Modèle d'événement de didacticiel de base Javascript

Modèle en ligne

Qu'est-ce que le modèle en ligne :

Ce modèle est la méthode A traditionnelle et la plus simple du temps de traitement. La fonction de gestion des événements est un attribut du HTML, utilisé pour gérer des événements spécifiés

Inline était davantage utilisé au début, mais il était mélangé avec du code HTML et ne fonctionnait pas séparément du HTML. code

Le code suivant :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件</title>	
</head>
<body>
	<input type="button" value="按钮" onclick="alert('lee')">
</body>
</html>

Le code ci-dessus est le premier modèle en ligne onclick est un événement de clic

Si le code centimétrique de l'événement sera beaucoup, alors nous besoin de l'écrire d'une autre manière. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件</title>	
</head>
<body>
	<input type="button" value="按钮" onclick="msg()">

	<script type="text/javascript">
		function msg(){
			alert("欢迎来到php中文网学习");
		}
	</script>
</body>
</html>

De cette façon, nous pouvons écrire beaucoup de code dans notre corps de fonction

Modèle de script

Quel est le modèle de script

Dans la page HTML, on ne le fait pas je veux voir écrire du code js, du code js, on le met dans un autre fichier

Regardons un exemple

Nous écrivons d'abord un html code, le code est le suivant :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件</title>	
	<script type="text/javascript" src="demo.js"></script>
</head>
<body>
	<input type="button" value="按钮">
</body>
</html>

Pour le code ci-dessus, nous avons introduit un fichier js, demo.js. Le code de demo.js est le suivant :

window.onload = function(){
	var sum = document.getElementsByTagName("input")[0];
	sum.onclick= msg;
}

function msg(){
	alert("php 中文网");
}

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title> </head> <body> <input type="button" value="按钮" onclick="alert('欢迎学习js事件')"> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Modèle d'événement de didacticiel de base 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]