Explication détaillée de l'étiquette de script et de l'accès à la page HTML

Auteur：Eve Cole Date de mise à jour：2025-03-15 18:00:04

Copier le code du code comme suit:

<img src = "1_nder1000.jpg" id = "img2" onclick = "alert ('onclick');

var img2 = document.getElementById ("img2");

Alert (img2.onmouseOver);

// Sortie des images suivantes

</cript>

IE Sortie:

Firefox:

Copier le code du code comme suit:

var img1 = document.getElementById ("img1");

img1.onMouseOver = Rotate;

Fonction rotate () {) {

this.src = '1_yylklshmyt20090217.jpg';

}

var img1 = document.getElementById ("img1");

img1.onmouseOver = onMouseOver;

Fonction onMouseOver (événement) {

this.src = '1_yylklshmyt20090217.jpg';

}

// En fait, le document.getElementByid ("IMG1");

/ * var img1 = {src: "1_nder1000.jpg" ,,

ID: "IMG1",

Alt: "" ,,

Titre: "Image d'inversion"

} * /

</cript>

Copier le code du code comme suit:

<% @ Page linguistique = "C #" AutoEventWireup = "True" CodeBehind = "webForm1.aspx.cs" hérites = "webApplication1.webForm1"%>

<Title> Page non-title </TITME>

// Tous les attributs de l'image du cycle IMG, vous pouvez voir de nombreux attributs non spécifiques qui ne sont pas définis

Window.onload = répéter;

Function repeat () {) {)

var img1 = document.getElementById ('img1');

pour (var i dans img1) {

alert (i + ":" + img1 [i]);

}

</cript>

</ head>

<body>

<div>

</div>

</ form>

</docy>

</html>

Étiquette de script et accès à la page HTML

Étiquette de script

La balise de script est utilisée dans la page HTML intégrée dans certains scripts évidents

<cript>

// Un script va ici

</cript> L'étiquette de script a trois attributs spéciaux (bien sûr, il a également des attributs comme l'ID, la classe et presque tous les éléments de la page HTML peuvent avoir une classe, des attributs d'ID))

<Script Language = "JavaScript"> // L'attribut linguistique indique la langue utilisée dans l'étiquette

// il a trois valeurs communes javascript, jscript, vbscript

// Un script va ici

</cript>

// seul IE peut être reconnu pour JScript, et d'autres navigateurs ignoreront le contenu de cette étiquette

// pour VBScript, seul IE sur Windows peut être reconnu, en cours d'exécution

// Cependant, l'attribut de langue a ensuite été remplacé par l'attribut de type dans xhtml

// Un script va ici

</dcript> Dans le navigateur Web, nous n'utiliserons que JavaScript, Type à Text / JavaScript. Javascrip

<cript>

Alert ("Bonjour!");

</cript>

// Le code ci-dessus s'exécutera dans la façon dont JavaScript s'exécutera en javascript

// Même s'il y a IE, le bloc de script sans déclarations sera effectué en tant que JavaScript, pas VBScript

<cript>

msgbox "Bonjour!"

</cript>

// 上面的代码在 c'est-à-dire 中也会报错, c'est-à-dire 也会将其当成 javascript 执行以前在 html 页面中, 一些标签常会加一些诸如一些标签常会加一些诸如一些标签常会加一些诸如 onclick, onMouseover 这样的属性, 这是一种事件绑定 (关于事件, Nous expliquerons en détail dans le futur, ne vous inquiétez pas). )

<img src = "../ images / stack_heap.jpg" onclick = "alert ('vous me blessez!" /> Le code affichera une image sur la page HTML, lorsque vous cliquez sur la souris. Il y aura une fenêtre pop -up qui montre «vous me blessez!», La valeur de l'attribut onClick est en fait un code JavaScript;

onClick, exécutez-le une fois lorsque la souris est cliquée

OnMouseover, exécutez une fois lorsque la souris est mise en place

OnMouseout, exécutez une fois lorsque la souris déménage

OnMousetown, exécutez-le une fois lorsque la souris est pressée

OnMouseUp, exécutez une fois lorsque la souris est libérée (rebond)

OnMoudedblclick, exécutez une fois lorsque le double clique de la souris

En ligne, exécutez une fois lorsque l'objet est chargé

L'effet d'être populaire sur Internet avant est en fait l'effet de Rollverimages

<img src = "../ images / stack_heap.jpg"

onMouseOver = "this.src = '../images/over.jpg'"

onMouseout = "this.src = '../ images / out.jpg'" /> Vous savez peut-être, une chaîne dans des attributs tels que OnMouseOver sera exécuté en tant que script au moment de l'incident, mais le code ci-dessus dépend du le code ci-dessus.

// Pour faciliter la visualisation, nous les extraire ci-dessous

this.src = '../images/over.jpg'

This.src = '../images/out.jpg' analyse le code ci-dessus. Cet objet est un objet qui a toujours existé. Pour la balise IMG ci-dessous, il sera analysé dans l'objet suivant:

// Notez qu'en fait, cela ne peut pas être attribué manuellement ou déclaré manuellement.

this = {

src: "../ images / stack_heap.jpg" ,,

Alt: "Pile de mémoire",

Onclick: "alert ('bonjour!')",

Tagname: "img"

};

// En fait, non seulement ces attributs, les balises IMG seront analysées en tant qu'objet, avec des attributs tels que Src, Alt, Src, les attributs ALT sont écrits en HTML, et TagName est automatiquement généré par le système. Le nom de l'étiquette de l'étiquette! Nous pouvons utiliser le code suivant pour les tests:

<img src = "../ images / stack_heap.jpg" onclick = "alert (this.src); alert (this.tagname);" /> nature, nous pouvons également modifier sa valeur, donc l'effet du flip d'image L'effet d'image de l'image vient de réussir

Il y a une certaine attention à une telle liaison d'événements en ligne.

<adal>

<cript>

Fonction myfn () {

alert ("L'image est chargée!");

}

</cript>

</ head>

// ................ après plusieurs code

<img src = "../ images / stack_heap.jpg" en ligne = "myfn ()" /// lorsque l'image est chargée avec succès

L'exécution du code ci-dessus est correcte, mais la commande est retournée (le script peut être placé dans n'importe quel endroit légal)

<img src = "../ images / stack_heap.jpg" en ligne = "myfn ()" /// lorsque l'image est chargée avec succès

// ................ après plusieurs code

<cript>

Fonction myfn () {

alert ("L'image est chargée!");

}

</ Script> La page HTML est chargée et exécutée dans l'ordre de haut en bas. ; c'est pourquoi l'étiquette de script doit mettre la partie du script dans la partie de la tête, car la tête devant le corps, lorsque l'élément du corps est chargé, le script dans la tête sera certainement chargé.

Mais il y avait XHTML, avec "trois couches de séparation", W3C a lancé DOM2, nous devons lier les événements d'une autre manière, obtenir des éléments de page HTML.

<adal>

<cript>

var img = document.getElementById ("myimg");

//Document.getElementById La méthode a un paramètre, un ID de chaîne

// alors img signifie cet objet d'étiquette d'image

img.onclight = myfn;

/ * Ne donnons-nous pas le code javascript à sa propriété onclick avec la valeur de caractères de la chaîne

Il est directement attribué pour lui donner un nom de fonction

Vous direz également, pourquoi pas img.onclick = myfn ();

Parce que maintenant c'est dans la zone du code JavaScript

Ajouter "()" pour indiquer cette fonction, puis donner la valeur de retour de cette fonction à img.onclick * /

Fonction myfn () {

alert ("L'image est chargée!");

}

</cript>

</ head>

// .......

// Nous n'ajoutons plus l'attribut onClick, mais donnez-lui un identifiant

Cependant, le code ci-dessus fera toujours une erreur, car HTML est chargé de haut en bas. Chargé encore, il y aura donc des erreurs; Un objet vide, il fera donc une erreur ici!

// .................... après plusieurs code

<cript>

var img = document.getElementById ("myimg");

// Pour le moment, puisque la position de l'étiquette de script est placée dans la balise IMG, la balise IMG est définitivement chargée lors du chargement au script

img.onclight = myfn;

Fonction myfn () {

alert ("L'image est chargée!");

}

</cript> mais la norme est toujours recommandée pour mettre le script sur la partie de la tête!

Window.onload = initall;

// La fenêtre représente l'objet de fenêtre.

fonction initial () {

var img = document.getElementById ("myimg");

img.onclight = myfn;

Fonction myfn () {

alert ("L'image est chargée!");

}

} Ainsi, le code n'est pas faux.

Visitez la page HTML: HTML DOM

HTML DOM utilise la page entière comme objet de document.

<p id = "p1"> Nous utilisons une balise P pour démontrer </p> il sera converti à l'objet suivant

// Rappelez-vous toujours la grammaire de quantité littérale de l'objet, non?

{{

Tagname: "P",

ClassName: "Demo",

Titre: "Le premier paragraphe: Dom Tree",

ID: "P1",

InnerHTML: "Nous utilisons une étiquette P pour démontrer"

}

// Vous pouvez être étrange, pourquoi l'attribut de classe de l'étiquette devient l'attribut classname de l'objet au lieu de la classe.

// La classe est des mots réservés javascript !!!

// TagName représente son nom d'étiquette, et InnerHTML signifie que le parcours de code HTML convertit l'étiquette HTML en un tel objet, et les attributs ou le contenu à l'intérieur de la balise en javascript sont beaucoup plus simples, mais la question est de savoir comment accéder à la façon de savoir comment pour Accédez à cet objet !!

// Ajoutez d'abord un ID à l'étiquette, puis utilisez la méthode document.getElementById pour y accéder

Window.onload = initall;

fonction initial () {

var p = document.getElementById ("p1");

Alerte (p.classname);

alerte (p.tagname);

alerte (p.tital);

alerte (p.id);

Alerte (p.innerhtml);

} L'accès à la page HTML est si simple! Après avoir obtenu un élément, vous pouvez non seulement lire sa valeur d'attribut, mais également définir sa valeur d'attribut!

Window.onload = initall;

fonction initial () {

var p = document.getElementById ("p1");

p.title = "javascript";

P.ClassName = "Load";

} Utilisez-les, nous pouvons déjà faire quelque chose d'excitant!

// certains CSS

.Oder {

Couleur: rouge;

Contexte: bleu;

taille de police: plus grand;

}

.dehors {

Couleur: noir;

Contexte: blanc;

taille de police: plus petit;

}

.Click {{

Couleur: Jaune;

Contexte: jaune;

taille de police: 12px;

}

// code html

<p id = "p1"> Une grande ligne de texte, ils sont tous du texte ordinaire! </p>

// code JavaScript

Window.onload = initall;

fonction initial () {

var p = document.getElementById ("p1");

P.OnClick = ClickFn;

p.onMouseOver = overfn;

p.onmouseout = oufn;

}

Fonction clickfn () {

This.classname = "cliquez";

// Notez que c'est ClassName, pas la classe

}

fonction overfn () {

this.classname = "over";

}

fonction oufn () {

this.classname = "out";

} Bien sûr, l'obtention d'éléments de page non seulement cette méthode. Le nom du nom d'identification est le seul, et la plupart des noms d'étiquette sont les mêmes, donc la méthode GetElementsByTagName n'a qu'un seul paramètre, c'est-à-dire un nom de tagnom éléments similaires à un tableau.

Window.onload = initall;

fonction initial () {

var plist = document.getElementsByTagName ("p");

// Pourquoi avez-vous besoin d'utiliser un Capital P?

Alerte (plist.length);

Alerte (plist [0] .InnerHTML);

} En outre, pour la méthode Document.getElementsByTagName, vous pouvez également passer un numéro "*" en tant que paramètre pour obtenir tous les éléments de la page, similaire au caractère qui passe dans CSS

Window.onload = initall;

fonction initial () {

var allthings = document.body.getElementsByTagName ("*");

// Vous pouvez appeler la méthode GetElementsByTagname sur n'importe quel élément DOM.

Alerte (allthings.lengle);

Alerte (AllThings [3] .InnerHtml);

} Autre-javascript: protocole pseudo

Le pseudo -protocol est différent de l'existence réelle sur Internet, comme http: //, https: //, ftp: //, mais pour les applications associées. :

Nous pouvons entrer "JavaScript: alert (" js! '); "Dans la barre d'adresse de navigation. et la valeur du résultat est renvoyée à la page actuelle

De même, nous pouvons utiliser le protocole JavaScript Pseudo dans l'attribut HREF de la balise A

// Cliquez sur le lien de ce côté.

<A href = "javascript: window.prompt ('le contenu d'entrée remplacera la page actuelle!', '');"> A </a> La solution est très simple

// Ajouter un non-défini à la fin, bien que le protocole JavaScript Pseudo offre une certaine flexibilité, mais essayez de ne pas l'utiliser sur la page!