Manipulando HTML

14.
Manipulando HTML
14.1 Estructura de documentos HTML con JavaScript
Ya realizaste páginas HTML con JavaScript, sin embargo es importante que

repases el formato en que se deben estructurar los documentos HTML que
utilizan este lenguaje de programación, para poder realizar páginas Web más
dinámicas.
Cuando estás programando el código HTML debes indicar el inicio del código de
tipo Script. Para ello necesitas utilizar la siguiente línea:
<script language=”JavaScript” type=”text/javascript”> escribir código

JavaScript </script>
La etiqueta script debe cerrarse después de haber escrito todo el código de JavaScript que utilices,
de esta forma el navegador sabrá que lo demás es código HTML.
Un ejemplo básico de cómo integrar HTML y JavaScript es el siguiente:
<HTML>
<HEAD>
<TITLE> Ejemplo de JavaScript </TITLE>
</HEAD>
<BODY>
<script language=”javascript” type=”text/javascript”>
document.write(“este es el texto escrito por una función JavaScript”);
</script>
</BODY>
</HTML>
El ejemplo muestra cómo enviar un mensaje en pantalla que diga “este es el texto escrito por una
función JavaScript”. Observa cómo todo el código que sea de tipo JavaScript debe quedar dentro
de las etiquetas <script> </script>; si en algún momento no utilizas las etiquetas entonces el
navegador al querer interpretar el código, no lo reconocerá y por lo tanto se mostrará información
incorrecta en la página Web e incluso puede generar errores.
Una parte muy importante para el momento de programar código JavaScript con HTML es definir el
tipo de documento a utilizar, es decir el “doctype”.
Doctype es una etiqueta para definir cómo validar el código que se

incluirá en el documento HTML, y esta etiqueta debe definirse al inicio del
código. Esta validación se hace con el fin de decirle al navegador que el
código escrito en el documento está cumpliendo con alguno de los estándares
de programación Web establecidos por la W3C.
Si en algún momento no se especifica el tipo de documento en el archivo

HTML, entonces el navegador al momento de leer el documento pensará que
el código está escrito sin seguir algún estándar y por lo tanto se pueden generar errores o puede
ser que el comportamiento del sitio Web sea distinto al que el programador o diseñador espera.
El tipo de documento se puede definir para 2 lenguajes de programación Web: HTML y XML.
En el caso de HTML los dos tipos de documentos existentes son:

 HTML 4.01 Strict: tipo de documento donde el estándar es mucho más estricto y no
permite utilizar todos los atributos de CSS como un estándar del código HTML.
 HTML 4.01 Transitional: tipo de documento que cumple con el estándar de una forma
más flexible que el tipo strict. Aquí si se permite el uso de los atributos de CSS sin tener
ningún problema al momento de reconocerlo por parte del navegador.
La línea de código que se te recomienda utilizar para definir el tipo de documento HTML a utilizar
es la siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
El código anterior especifica que el documento es de tipo HTML con formato Transitional y que
será validado con el estándar propuesto por la organización W3C. Se te recomienda que para
efectos de este curso siempre utilices el tipo de documento Transitional para que tu código pueda
tener un poco más de flexibilidad en el estándar y no existan errores al momento de manejar
código CSS en tu página de Internet.
Es importante mencionar que existen computadoras que cuentan con navegadores no actualizados
y que tal vez no sean capaces de leer código JavaScript. Es por esto que se necesita “esconder” el
código JavaScript entre otro tipo de etiqueta, de tal forma que si el Navegador que esté
interpretando el código, no lo reconoce, entonces lo ignore para evitar que muestre ese código
como un texto normal en la página Web. Esta es una recomendación que debemos seguir al
programar con JavaScript utilizar  para esconder el código:
<script type=”text/javascript”>

</script>
Como puedes observar, el código debe ir entre las dos etiquetas en negrita, así si el navegador no
es capaz de interpretar JavaScript y simplemente lo ignorará.
14.2 Objetos predefinidos de JavaScript
Ya has manejado a lo largo del curso algunos objetos

predefinidos de JavaScript como son el objeto Array, o el
objeto Document. A continuación conocerás más tipos de
objetos y métodos predefinidos en JavaScript que te serán
de mucha utilidad:
Objeto String(): objeto que permite manipular cadenas de

texto cuya ventaja es que al ser un objeto predefinido ya
cuenta con métodos que facilitan el manejo de cadenas de
texto dentro de un código JavaScript en HTML. En el
momento en que se define una variable de tipo cadena de
texto, ya se está haciendo referencia automáticamente al
objeto String:
var texto = “esta es una cadena de texto”;

Con el código anterior se declara una cadena de texto, y automáticamente se está utilizando el
objeto String(). Al ser un objeto, ya cuenta con métodos predefinidos:
o anchor(nombre): Genera una marca o referencia.

o big(): escribe el texto con una fuente de texto grande.
o blink(): escribe el texto de forma que parpadea.
o bold(): escribe el texto en negrita.
o italics(): escribe el texto en cursiva.
o small(): escribe el texto con fuente de texto chica.
o strike(): escribe el texto subrayado.
o sub(): escribe el texto en formato de subíndice.
o sup(): escribe el texto en formato de superíndice.
o charAt(n): regresa el carácter que está en la posición n del texto.
o fontcolor(color): estable el color del texto.
o fontsize(n): establece un tamaño de texto entre el número 1 y 7.
o concat(): crea una nueva cadena de texto al mezclar dos cadenas, es
decir une dos cadenas de texto en una nueva.
o split(n): regresa en un arreglo los elementos que forman una cadena de
texto, los divide de acuerdo al separador que se especifica en el
argumento “n”.
o replace(n,m): hace un reemplazo de la cadena de texto “n” por la cadena
de texto “m”.
o search(): permite realizar una búsqueda del elemento especificado y
regresa como valor la posición donde se encontró.
Objeto Math(): es un objeto que permite representar funciones matemáticas

gracias a los métodos que ya tiene predefinidos. Para declarar un objeto de
tipo Math() sólo basta asignar algún valor en una variable, por ejemplo:
var numero = Math.PI;
Los atributos que ya existen para el objeto Math () son:
 E: es el valor de Euler.
 LN2: logaritmo de 2.
 LN10: logaritmo de 10.
 LOG2E: logaritmo E base 2.
 LOG10E: logaritmo E base 10.
 PI: valor de PI
 SQRT1_2: es la raíz cuadrada de ½ ó 0.5
 SQRT2: es la raíz cuadrada de 2.
Los métodos que existen son:
 abs(n): es el valor absoluto de n.

 acos(n): arcoseno de n.
 asin(n): arcoseno de n.
 atan(n): arcotangente de n.
 ceil(n): redondeo de números a la unidad superior.
 cos(n): coseno de n.
 exp(n): exponencial del número e, es decir e a la n.
 floor(n): redondeo al número inferior.
 log(n): logaritmo de n.
 max(x.y): regresa el número mayor entre “x” o “y”.
 min(x, y): regresa el número menor entre “x” o “y”.
 pow(x,y): es la potencia del número “x” al orden “y”.
 random(): crea un número aleatorio.
 round(n): redondea al número más cercano.
 sin(n): seno de n.
 sqrt(n): raíz cuadrada de n.
 tan(n): tangente de n.
Un ejemplo de uso de alguno de los atributos es:
var numero = Math.PI;

var numero_redondeado = Math.ceil(numero);
Objeto Date(): objeto que permite trabajar con fechas y horas. El rango
manejado con JavaScript es en milisegundos desde 1/1/1970 a las
00:00:00 horas y no se podrá trabajar con fechas anteriores. Es importante
mencionar que en JavaScript la representación del número de mes
empieza desde 0, es decir 0 se refiere a enero y el mes 11 sería
diciembre. En cuanto a días de la semana pasa lo mismo, el día 0 vendría
siendo domingo, mientras que el día 6 es el día sábado.
Para crear objetos de tipo Date(), podemos utilizar la siguiente sintaxis:
Fecha = new Date(); // crearía un objeto llamado Fecha, con los datos de la fecha y hora
actuales.
Fecha = new Date(año, mes, día [horas:minutos:segundos]); //genera un objeto Fecha, con
los datos que especifiques de argumento, es decir una fecha y hora definidos.
Algunos de los métodos que se incluyen dentro del objeto Date() son:
o getDate(): regresa el día del mes actual.

o getDay(): regresa el día de la semana actual.
o getHours(): regresa la hora actual.
o getMinutes(): regresa los minutos actuales.
o getMonth(): regresa el mes actual.
o getSecond(): regresa los segundos actuales.
o getFullYear(): regresa en formato de 4 dígitos el año actual.
o getYear(): regresa el año actual en sus 2 últimos dígitos.
o getTime(): devuelve la fecha actual.
o setDate(dato): asigna el día del mes que se indica en “dato”.
o setHours(dato): asigna la hora actual que se indica en “dato”.
o setMinutes(dato): asigna los minutos indicados en “dato”.
o setMonth(dato): asigna el mes indicado en “dato”.
o setSeconds(dato): asigna los segundos indicados en “dato”.
o setTime(dato): asigna el tiempo indicado en “dato”.
o setYear(dato): asigna el año indicado en “dato”.
 Objeto Boolean(): tipo de objeto que permite hacer una conversión entre datos no
booleanos a datos de tipo booleanos. Para poder hacerlo puedes utilizar la siguiente línea
de código:
objetobooleano = new Boolean(valor);
El dato de valor puede ser false, true o en su defecto 0 para indicar que es falso, ó 1 para indicar
que es verdadero.
Es importante mencionar que si el dato de valor se deja en blanco, entonces el objeto se creará
como falso o false; pero si se indica cualquier cadena de texto no vacía, entonces el valor del
objeto booleano será true o verdadero. Algunos ejemplos de declaración de objetos booleanos son:
dato1 = new Boolean(); //aquí tomaría el valor de falso

dato2 = new Boolean(false); //aquí tomaría el valor de falso
dato3 = new Boolean(true); //aquí tomaría el valor de verdadero
dato4 = new Boolean(“texto cualquiera”); //aquí tomaría el valor de verdadero
dato5 = new Boolean(0); //aquí tomaría el valor de falso
dato6 = new Boolean(1); //aquí tomaría el valor de verdadero
14.3 Formularios en un documento HTML
Una parte importante de la programación con HTML son los formularios,

estos ayudan a que un usuario pueda interactuar más con el sitio de
Internet al poder ingresar información que le sea solicitada y así el sitio
utilizará los datos para realizar las funciones que se le hayan especificado.
En HTML para poder usar los formularios, se utiliza la etiqueta

<FORM> </FORM>. También es importante mencionar que existen 3 atributos básicos en un
formulario:
 Action: define la acción a realizar cuando se pulsa el botón de ejecución.

 Method: define el método de transferencia de la información del formulario, los métodos
disponibles son get cuando se hace mediante scripts, y post cuando se envía el formulario
por correo electrónico.
 Enctype: define cómo se codificará la información que se enviará desde el formulario.
Para definir la realización de una entrada de información en el sistema, mediante campos de

entrada, se necesita especificar la etiqueta <input/>. Dentro de esta etiqueta existe un atributo que
se llama type, en el cual se define el tipo de campo de entrada que a emplear. Los campos de
entrada disponibles son:
 Text: sirve como campo de entrada para cadenas de texto.
<input type=”text” id=”campo_texto” name=”nombre” size=”50” />
Donde id es el identificador del campo, el cual es único y no puede repetirse; name es el nombre
de la variable donde se guardará la información introducida en el campo de texto, size es la
cantidad de caracteres visibles en el campo.
Otros atributos son value, que permite establecer un valor inicial en el campo de texto; y title que
muestra información sobre el campo de texto al pasar el ratón sobre el mismo.
 Checkbox: son cuadros de selección múltiple.
<center> Selecciona los colores que desees </center>

<input type=”checkbox” name=”Color” id=”negro” value=”Negro”/>
<input type=”checkbox” name=”Color” id=”blanco” value=”Blanco”/>
<input type=”checkbox” name=”Color” id=”azul” value=”Azul”/>
Si se require que alguna de las opciones venga seleccionada por default, se puede agregar el
atributo:
checked=”checked”
 Hidden: sirve para enviar los datos de un formulario a otro formulario de manera que no se
vea nada en pantalla. Se pueden declarar igual que un campo de texto, pero en esta
ocasión no serán visibles para el usuario, sólo el programador sabrá de su existencia.
<input type=”hidden” id=”campo_oculto” name=”dato_oculto” size=”50” />
 Password: sirve para introducir texto pero se visualiza como asteriscos, esto es para
proteger cualquier contraseña.
<input type=”password” name=”contraseña” id=”clave” title=”escriba contraseña”

size=”10”/>
 Radio: es un círculo de selección, y sólo se puede seleccionar una opción de todas las
posibles.
<center> Selecciona sólo un color de la lista </center>

<input type=”radio” name=”Color” id=”negro” value=”Negro”/>
<input type=”radio” name=”Color” id=”blanco” value=”Blanco”/>
<input type=”radio” name=”Color” id=”azul” value=”Azul”/>
 Reset: es un botón para borrar los datos introducidos en un formulario.
<input type = “reset” value=”Borrar” /> // lo que se especifica en value es el nombre que
tendrá el botón al desplegarse en pantalla.
 Submit: es un botón para enviar la información contenida en el formulario.
<input type = “submit” value=”Enviar” /> // lo que se especifica en value es el nombre que
tendrá el botón al desplegarse en pantalla.
En el siguiente subtema conocerás un ejemplo de integración de formulario con lo que ya conoces

actualmente de JavaScript.
14.4 Programando formularios con HTML con JavaScript
Observa a continuación el código HTML y JavaScript utilizado para

crear un formulario donde se validan datos de cadenas de caracteres y
además contiene la función de enviar los datos de formulario por correo
electrónico. Este es un ejemplo práctico de cómo programar páginas
HTML con JavaScript y poder crear un sito más dinámico:
<HTML>
<HEAD>
<TITLE>Verificando datos de envio</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY onLoad="loadDoc()">
<CENTER>
<H3>Verificación de campos en un formulario con JavaScript.</H3></CENTER>
<CENTER>
<FORM NAME="test" ACTION="http://www.prueba.com.mx" METHOD=GET>

<table border>
<tr>
<td>Escribe tu E-mail (p.ej.: micorreo@hotmail.com):</td>
<td><INPUT TYPE="text" NAME="campo1"></td>
<td><INPUT TYPE="button" NAME="1" VALUE="Test"
onClick="runTest(this.form, this)"></td>
</tr>
<tr>
<td>Escribe cinco caracteres: </td>
</tr>
<tr>
<td>Escribe tres o más caracteres:</td>

</tr>
<tr>
<td>Escribe cualquier dato:</td>
</tr>
<tr>
<td align=center><INPUT TYPE="button" NAME="Tfin" VALUE="Test final + envio"
onClick="runSubmit(this.form, this)"></td>
<td align=center><input type="reset" name="reset"
value="Inicializar" onClick="this.form.campo1.value = ''"></td>
</tr>
</FORM>
</table>
</center>
</BODY>
</HTML>
Referencias utilizadas para el desarrollo de este tema:
Norton, P. (2006). Introducción a la computación. (6ª ed.). México DF. McGraw Hill.
ISBN: 9789701051085
Oros, J. (2008). Diseño de páginas web con XHTML, Javascript y CSS. (1ª ed.). Alfaomega.
ISBN: 9701512022

Manipulando HTML

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Manipulando HTML

Caricato da

Copyright:

Formati disponibili

14.

Ya realizaste páginas HTML con JavaScript, sin embargo es importante que

<script language=”JavaScript” type=”text/javascript”> escribir código

Un ejemplo básico de cómo integrar HTML y JavaScript es el siguiente:

Doctype es una etiqueta para definir cómo validar el código que se

Si en algún momento no se especifica el tipo de documento en el archivo

En el caso de HTML los dos tipos de documentos existentes son:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

14.2 Objetos predefinidos de JavaScript

Ya has manejado a lo largo del curso algunos objetos

Objeto String(): objeto que permite manipular cadenas de

var texto = “esta es una cadena de texto”;

o anchor(nombre): Genera una marca o referencia.

Objeto Math(): es un objeto que permite representar funciones matemáticas

var numero = Math.PI;

Los atributos que ya existen para el objeto Math () son:

Los métodos que existen son:

 abs(n): es el valor absoluto de n.

Un ejemplo de uso de alguno de los atributos es:

var numero = Math.PI;

Para crear objetos de tipo Date(), podemos utilizar la siguiente sintaxis:

o getDate(): regresa el día del mes actual.

dato1 = new Boolean(); //aquí tomaría el valor de falso

14.3 Formularios en un documento HTML

Una parte importante de la programación con HTML son los formularios,

En HTML para poder usar los formularios, se utiliza la etiqueta

 Action: define la acción a realizar cuando se pulsa el botón de ejecución.

Para definir la realización de una entrada de información en el sistema, mediante campos de

 Text: sirve como campo de entrada para cadenas de texto.

<input type=”text” id=”campo_texto” name=”nombre” size=”50” />

 Checkbox: son cuadros de selección múltiple.

<center> Selecciona los colores que desees </center>

<input type=”hidden” id=”campo_oculto” name=”dato_oculto” size=”50” />

<input type=”password” name=”contraseña” id=”clave” title=”escriba contraseña”

<center> Selecciona sólo un color de la lista </center>

 Reset: es un botón para borrar los datos introducidos en un formulario.

 Submit: es un botón para enviar la información contenida en el formulario.

En el siguiente subtema conocerás un ejemplo de integración de formulario con lo que ya conoces

14.4 Programando formularios con HTML con JavaScript

Observa a continuación el código HTML y JavaScript utilizado para

function runSubmit (form, button) {

function validatePrompt (Ctrl, PromptStr) {

<FORM NAME="test" ACTION="http://www.prueba.com.mx" METHOD=GET>

<td>Escribe tres o m&aacute;s caracteres:</td>

Referencias utilizadas para el desarrollo de este tema:

Potrebbero piacerti anche

<td>Escribe tres o más caracteres:</td>