Explicación detallada de la etiqueta de script y la página de acceso HTML

Autor：Eve Cole Fecha de actualización：2025-03-15 18:00:04

Copiar código del código de la siguiente manera:

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

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

Alerta (img2.onmouseover);

// emite las siguientes imágenes

</script>

Es decir, salida:

Firefox:

Copiar código del código de la siguiente manera:

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

img1.onmouseover = rotar;

Función rotate () {) {

this.src = '1_yylklshmyt20090217.jpg';

}

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

img1.onmouseover = onMouseOver;

Función en mouseover (evento) {

this.src = '1_yylklshmyt20090217.jpg';

}

// de hecho, el document.getElementById ("IMG1");

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

ID: "IMG1",

Alt: "" ,,

Título: "Imagen de inversión"

}*/

</script>

Copiar código del código de la siguiente manera:

< %@Page lenguaje = "c#" autoeEventWireUp = "true" codeBeHind = "webform1.aspx.cs" heredes = "WebApplication1.webform1" %>

<title> Página no titina </title>

// Todos los atributos de la imagen de ciclo img, puede ver muchos atributos inespecíficos que no están definidos

Window.onload = repetir;

Función repetir () {) {)

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

para (var i en img1) {

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

}

</script>

</ablo>

<Body>

<div>

</div>

</form>

</body>

</html>

Etiqueta de script y página de acceso HTML

Etiqueta de guión

La etiqueta de script se usa en la página HTML incrustada en algunos scripts obvios

// algún script va aquí

</script> La etiqueta de script tiene tres atributos especiales (por supuesto, también tiene atributos como ID, clase y casi todos los elementos en la página HTML pueden tener clase, atributos de ID))))

// Tiene tres valores comunes JavaScript, JScript, VBScript

// algún script va aquí

</script>

// Solo es decir, se puede reconocer por JScript, y otros navegadores ignorarán el contenido de esta etiqueta

// Para VBScript, solo se puede reconocer en Windows, en ejecución

// Sin embargo, el atributo del idioma fue reemplazado por el atributo de tipo en xhtml

// algún script va aquí

</Script> En el navegador web, solo usaremos JavaScript, escriba la propiedad al texto/JavaScript. Javascript

Alerta ("¡Hola!");

</script>

// El código anterior se ejecutará en la forma en que JavaScript se ejecutará en JavaScript

// Incluso si hay IE, el bloque de script sin declaraciones se realizará como JavaScript, no VBScript

msgbox "¡Hola!"

</script>

// 上面的代码在上面的代码在中也会报错, es decir, javascript 执行以前在 html 页面中, 一些标签常会加一些诸如 onclick, on mouseover 这样的属性, 这是一种事件绑定 (关于事件, Explicaremos en detalle en el futuro, no se preocupe). )

<img src = "../ images/stack_heap.jpg" onClick = "alerta ('¡Me lastimaste!"/> El código mostrará una imagen en la página HTML, cuando haces clic en los clics del mouse. En ese momento, Habrá una ventana pop -up que muestra '¡Me lastimó!', El valor del atributo OnClick es en realidad un código JavaScript;

onClick, ejecutarlo una vez cuando se haga clic en el mouse

en mouseover, ejecute una vez cuando se coloque el mouse

en mouseut, ejecute una vez cuando el mouse se mueva

Onmousetown, ejecutarlo una vez cuando se presione el mouse

OnMouseUp, ejecute una vez cuando se libera el mouse (rebote)

OnmousedblClick, ejecute una vez cuando el mouse doble haga clic en

En línea, ejecute una vez cuando el objeto esté cargado

El efecto de ser popular en Internet antes es en realidad el efecto de RollveriMages

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

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

onMouseOut = "this.src = '../ images/out.jpg'"/> puede saber, la cadena en atributos como OnMouseOver se ejecutará como script en el momento del incidente, pero el código anterior depende de la El código anterior es muy vago

// Para que sea fácil de ver, los extraeremos a continuación

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

This.src = '../images/out.jpg' Analiza el código anterior. Este objeto es un objeto que siempre ha existido. Para la etiqueta IMG a continuación, se analizará en el siguiente objeto:

// Tenga en cuenta que, de hecho, esto no se puede asignar o declararse manualmente manualmente.

esto = {

src: "../ imágenes/ stack_heap.jpg" ,,

Alt: "Memory Stack",

OnClick: "alerta ('¡Hola!')",

TagName: "IMG"

};

// de hecho, no solo estos atributos, las etiquetas IMG se analizarán como un objeto, con atributos como SRC, Alt, SRC, ALT Los atributos se escriben en HTML, y TagName se genera automáticamente por el sistema. ¡El nombre de la etiqueta!

<img src = "../ images/stack_heap.jpg" onClick = "alerta (this.src); alerta (this.tagname);"/> Naturaleza, también podemos modificar su valor, por lo que el efecto de la imagen Flip El efecto de la imagen de la imagen acaba de tener éxito

Hay cierta atención a tal vinculación de eventos en línea.

Función myfn () {

alerta ("la imagen está cargada!");

}

</script>

</ablo>

// ................ después de varios código

<img src = "../ images/stack_heap.jpg" en línea = "myfn ()" /// Cuando la imagen se carga con éxito

La ejecución del código anterior está bien, pero el pedido se voltea (el script se puede colocar en cualquier lugar legal)

<img src = "../ images/stack_heap.jpg" en línea = "myfn ()" /// Cuando la imagen se carga con éxito

// ................ después de varios código

Función myfn () {

alerta ("la imagen está cargada!");

}

</script> La página HTML se carga y ejecuta en orden de arriba a abajo. ; es por eso que la etiqueta del script es para colocar la parte del script en la parte de la cabeza, porque la cabeza frente al cuerpo, cuando el elemento en el cuerpo está cargado, el script en la cabeza definitivamente se cargará.

Pero luego estaba XHTML, con "tres capas de separación", W3C lanzado DOM2, necesitamos unir eventos de otra manera, obtener elementos de página HTML.

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

//document.getElementById El método tiene un parámetro, un ID de cadena

// entonces img significa ese objeto de etiqueta de imagen

img.OnClight = myfn;

/*¿No le damos el código JavaScript a su propiedad OnClick con el valor de caracteres de cadena

Se asigna directamente para darle un nombre de función

También dirás, ¿por qué no img.Onclick = myfn ();

Porque ahora está en el área del código JavaScript

Agregar "()" para indicar esta función y luego dar el valor de retorno de esta función a img.onclick*/

Función myfn () {

alerta ("la imagen está cargada!");

}

</script>

</ablo>

// .......

// Ya no agregamos el atributo OnClick, pero le damos una identificación

Sin embargo, el código anterior aún cometerá un error, porque HTML se carga de arriba a abajo. cargado todavía, por lo que habrá errores; ¡Un objeto vacío, por lo que cometerá un error aquí!

// .................... después de varios código

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

// En este momento, dado que la posición de la etiqueta del script se coloca en la etiqueta IMG, la etiqueta IMG definitivamente se carga al cargar en el script

img.OnClight = myfn;

Función myfn () {

alerta ("la imagen está cargada!");

}

</script> ¡Pero el estándar todavía se recomienda poner el script en la parte de la cabeza!

Window.Onload = initall;

// La ventana representa el objeto de la ventana.

función inicial () {

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

img.OnClight = myfn;

Función myfn () {

alerta ("la imagen está cargada!");

}

} Entonces, el código no está mal.

Visite la página HTML: HTML DOM

HTML DOM utiliza la página completa como objeto de documento.

<P id = "P1"> Usamos una etiqueta P para demostrar </p> se convertirá en el siguiente objeto

// Recuerda siempre la gramática literal del objeto, ¿verdad?

{{

TagName: "P",

ClassName: "Demo",

Título: "El primer párrafo: Dom Tree",

ID: "P1",

Innerhtml: "Usamos una etiqueta P para demostrar"

}

// Puede ser extraño, por qué el atributo de clase de la etiqueta se convierte en el atributo de nombre de clase del objeto en lugar de la clase.

// La clase es JavaScript Palabras reservadas !!!

// TagName representa su nombre de etiqueta, e innerhtml significa que el código HTML navegando en él convierte la etiqueta HTML en dicho objeto, y los atributos o contenido dentro de la etiqueta en JavaScript son mucho más simples, pero la pregunta es cómo acceder a cómo acceder ¡Acceda a este objeto!

// Primero agregue una ID a la etiqueta y luego use el método document.getElementById para acceder a ella

Window.Onload = initall;

función inicial () {

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

Alerta (P.ClassName);

alerta (p.tagname);

alerta (p.tital);

alerta (p.id);

Alerta (p.innerhtml);

} Acceder a la página HTML es tan simple después de obtener un elemento, ¡no solo puede leer su valor de atributo, sino también establecer su valor de atributo!

Window.Onload = initall;

función inicial () {

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

p.title = "javaScript";

P.ClassName = "Load";

} Usarlos, ¡ya podemos hacer algo emocionante!

// algunos CSS

.oder {

Color: rojo;

fondo: azul;

tamaño de fuente: más grande;

}

.afuera {

Color: negro;

Fondo: blanco;

tamaño de fuente: más pequeño;

}

. Haga clic en {{

Color: amarillo;

Antecedentes: amarillo;

tamaño de fuente: 12px;

}

// código HTML

<P id = "P1"> Una gran línea de texto, ¡todos son texto ordinario!

// código JavaScript

Window.Onload = initall;

función inicial () {

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

P.Onclick = clickfn;

p.onmouseover = overfn;

p.onmouseOut = outfn;

}

Función clickfn () {

This.classname = "Haga clic";

// Tenga en cuenta que es classname, no clase

}

función overfn () {

this.classname = "Over";

}

función outfn () {

this.classname = "out";

} Por supuesto, la obtención de elementos de página no solo este método. El nombre del nombre de ID es el único, y la mayoría de los nombres de etiquetas son los mismos, por lo que el método GetElementsByTagName tiene solo un parámetro, es decir, un nombre de etiqueta en forma de una cadena, y el valor de retorno es una lista de HTML elementos similares a una matriz.

Window.onload = initall; // todavía escrito en la función de procesamiento de eventos

función inicial () {

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

// ¿Por qué necesitas usar una P Capital P?

Alerta (plist.length);

Alerta (plist [0] .innerhtml);

} Además, para el método document.getElementsByTagName, también puede pasar un número "*" como parámetro para obtener todos los elementos de la página, similar al carácter de paso en CSS

Window.Onload = initall;

función inicial () {

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

// Puede llamar al método GetElementsByTagName en cualquier elemento DOM.

Alerta (AllThings.length);

Alerta (Allthings [3] .innerhtml);

} Otro-JavaScript: Pseudo Protocolo

El pseudoprotocol es diferente de la existencia real en Internet, como http: //, https: //, ftp: //, pero para aplicaciones asociadas. :

Podemos ingresar "JavaScript: alerta ('JS!');" En la barra de direcciones de navegación. y el valor del resultado se devuelve a la página actual

Del mismo modo, podemos usar el pseudo protocolo JavaScript en el atributo HREF de la etiqueta A

// Haga clic en el enlace en este lado.

<A href = "javascript: window.prompt ('El contenido de entrada reemplazará la página actual', '');"> A </a> La solución es muy simple

// Agregar indefinido al final, aunque el pseudo protocolo de JavaScript proporciona una cierta flexibilidad, ¡pero trate de no usarlo en la página para depurar JavaScript, JavaScript Pseudo Protocole es muy útil!