Wikilibros

Diferencia entre revisiones de «Programación en JavaScript/OOP»

Explorar historial interactivamente
← Edición anteriorEdición siguiente →
Contenido eliminado Contenido añadido
VisualWikitexto
Covi (discusión | contribs.)
10 ediciones
Covi (discusión | contribs.)
10 ediciones
Línea 149:
 
Otro ejemplo de creación de una clase más complicado '''utilizando DOM estándar y JavaScript'''; ''debemos recordar que innerHTML es un método propietario de Microsoft y que desaparecerá de la especificación en un futuro muy próximo''. Nótese que la propiedad texto debe ser un nodo de texto (DOMTextNode) en lugar de HTML (Cualquier interface DOM: DOMNode, DOMElement...) al vuelo como ocurriría usando innerHTML.
<source lang="xml">
<html>▼
<head>▼
<script type="text/javascript" charset="utf-8">
</source>
<source lang="javascript">
// <![CDATA[
▲ <html>
function CrearCapas(idcapa, info) {▼
▲ <head>
this.textoid = infoidcapa;▼
<script language="javascript">▼
this.texto = info;
▲function CrearCapas(idcapa, info) {
this.idCrearCapa = idcapa;function CrearCapa() {
try {▼
▲ this.texto = info;
// Esta es la manera correcta y estándar -aunque más lenta y costosa- de generar contenido mediante el DOM:▼
this.CrearCapa = function CrearCapa() {
// de generar contenido mediante el DOM:
▲ try {
// Objetos DOMElement necesarios:▼
▲ // Esta es la manera correcta y estándar -aunque más lenta y costosa- de generar contenido mediante el DOM:
var body = document.getElementsByTagName('body').item(0); // Tag <body> también se puede en forma de vector:
▲ // Objetos DOMElement necesarios:
var body = document.getElementsByTagName('body').item(0); // Tag <body> también se puede usar: ...agName('body')[0]; pero no es compatible con Opera.
var capa = document.createElement('div'); // División al vuelo
var texto = document.createTextNode(this.texto); // Texto contenido en div al vuelo
// Establecer atributos de división:
capa.setAttribute('id', this.id);
capa.setAttribute('style', 'background-color:#f7f7f7; width:100px; border:#000000 2px solid;');
// Reconstruir el árbol DOM:
capa.appendChild(texto);
body.appendChild(capa);
} catch(e) {
alert(e.name + " - " + e.message);
}
}
}
// ]]>
}
}
</script>▼
</head>▼
<body>▼
<script>▼
var capa=new CrearCapas('idCapanueva','Hola Mundo');▼
capa.CrearCapa(); ▼
</script>
</body>▼
</html>▼
</source>
<source lang="xml">
▲ </script>
▲ </head>
 
▲ <body>
El resultado del código anterior es una página que por medio de JavaScript crea un DIV y le asigna propiedades como ancho, alto, color, etc, y lo inserta dentro de la página al cargarse.▼
<script type="text/javascript" charset="utf-8">
 
</source>
▲ <scriptsource languagelang="javascript">
// <![CDATA[
▲ var capa = new CrearCapas('idCapanueva', 'Hola Mundo');
▲ capa.CrearCapa();
// ]]>
</source>
<source lang="xml">
▲ </script>
▲ </body>
▲ </html>
</source>
 
▲El resultado del código anterior es una página que por medio de JavaScript crea ununa DIVdivisión (div) y le asigna propiedadesatributos como ancho, alto, color, etc, y lo inserta dentro de la página al cargarse.
 
<noinclude>{{Navegador
| libro = Programación en JavaScript
| actual = Clases y objetos
| anterior = FuncionesJS
| siguiente = ClasesJS
}}</noinclude>
Obtenido de «https://es.wikibooks.org/wiki/Programación_en_JavaScript/OOP»