COMPONENTES WEB
ESTRUCTURA DE UNA PAGINA <html> <head> Opcional <title> Ejemplo Titulo </title> </head> <body> ... </body> </html> Entre las etiquetas <html> y </html> esta comprendido el resto del código HTML de la página <head> y </head>. Cabecera de la pagina puede contener <link>, <style>, <script> <meta> <title> El cuerpo del documento contiene la información propia del documento (el texto de la página, las imágenes, los formularios, etc. ) color o la imagen de fondo de la página .
Elemento HTML Nombre de La Etiqueta Nombre del atributo Etiqueta Final Valor del atributo <H1 ALIGN=“LEFT”> Encabezado de Ejemplo </H1> Atributo Contenido Etiqueta de Inicio Elemento HTML
TABLAS <table> y </table> INICO Y FIN DE TABLA <tr> y </tr> Inicio y fin de fila <td> y </td> columna o celda <table> inicio de tabla <tr> inicio de fila 1 <th>…</th> Encabezado 1 de la fila 1 <th>…</th> Encabezado 2 de la fila 1 </tr> fin de la fila 1 <tr> inicio de fila 2 <td>…</td> celda 1 de la fila 2 <td>…</td> celda 2 de la fila 2 </tr> fin de la fila 2 …….. </table> fin de la tabla
COLORES Color Hexadecimal Nombre #FFFFFF white #000000 black #000080 #000000 black #000080 navy #0000FF blue #008000 green #008080 teal #00FF00 lime #00FFFF aqua #800000 maroon #800080 purple #808000 olive #808080 gray #C0C0C0 silver #FF0000 red #FF00FF fuchsia #FFFF00 yellow
¿QUÉ ES JAVASCRIPT? Javascript es un lenguaje liviano, cuya principal característica es que trabaja del lado cliente, ya que el navegador soporta la carga de procesamiento. Javascript puede ser insertado en páginas HTML o bien ser agregado como referencias, al igual que las hojas de estilos o CSS.
SINTAXIS Declaración de Variable: Operadores: Var strnombre; Operadores: +: suma y/o concatenación - : Resta. / : división. * : multiplicación.
SINTAXIS Comentarios: Sentencias de Control, iteración y salto: If /*... * / Bloque de comentarios. // comentarios línea a línea. Sentencias de Control, iteración y salto: If Select case While For Do While Return, break y continue
MANEJO DE OBJETOS Para acceder a un objeto dentro del DOM siempre debe utilizar un document. Las aplicaciones javascript son manejadas por eventos. No todos los eventos son compatibles con todos los browser.
MANEJO DE OBJETOS Dentro de los eventos podemos destacar: onClick: cuando el usuario hace un click en un elemento. onLoad:la página se carga en el browser. onBlur:el usuario sale del campo de un formulario. onSubmit: cuando un formulario va a ser enviado. onMouserOver: cuando se mueve el mouse por sobre el elemento. onMouseOut: cuando se mueve el mouse por fuera del elemento.
MANEJO DE OBJETOS Todo objeto tiene un id o bien un name , y debe ser definido si se quiere acceder a través de javascript. Los manejadores de eventos dependen de los objetos. Los objetos tienen métodos y atributos.
DEFINICION DE FUNCIONES Las funciones se definen con la palabra reservada function y en minúsculas. La función puede recibir parámetros no importando su tipo. Cómo todo lenguaje maneja palabras reservadas. Ejemplo: function validar(variable)
DEFINICIO DE FUNCIONES El contenido de una función va entre llaves. { } Cada sentencia Javascript debe terminar con punto y coma (;) Las mayúsculas y minúsculas deben ser respetadas. Las comillas simples (‘) representan texto. La función debe ir definda con un nombre e independiente si recibe o no parámetros con paréntesis redondos.
EJEMPLO: VALIDACION DE FORMULARIO Vamos a validar que ningún campo venga vacio. Para esto validamos el primer campo del formulario que se llama txt_nombre. De no traer ningún carácter mostraremos un cuadro de dialogo con la función alert y posicionaremos el cursor en la txt_nombre. Nuestra función debería quedar así: function validar() { if(document.frm_contactenos.txt_nombre.value.length==0) { alert('Debe ingresar el nombre'); document.frm_contactenos.txt_nombre.focus(); return false; }
TAREA 1 CONTROL DE NOTAS Código Nombre Nota 1 Nota 2 Nota 3 Nota 4 Promedio Estado
Notas: CARACTERES PERMITIDOS function validaNumeros(){ if ((event.keyCode<=47) || (event.keyCode>57) ) { event.returnValue = false; }
NOTAS: CALIFICACIÓN PERMITIDA function limite(valor,obj){ if (valor >10){ obj.value=0; obj.focus obj.select() }
PROMEDIO function promedio(){ var p = eval(no1.value)+eval(no2.value)+eval(no3.value)+eval(no4.value); p/=4; pro.value = p; }
ESTADO est.value = p>= 6 ? "Aprobado" : "Reprobado" ;
EVENTOS <input name="no1" type="text" id="no1" value="0" onKeyPress="validaNumeros()" />
EVENTOS: notas <input name="no1" type="text" id="no1" value="0" onKeyPress="validaNumeros()" onKeyUp="limite(this.value,this)" />
EVENTOS: notas <input name="no1" type="text" id="no1" value="0" onKeyPress="validaNumeros()" onKeyUp="limite(this.value,this)" onBlur="promedio()" />
promedio <input type="text" name="pro" id="pro" readonly="readonly" /> ESTADO <input type="text" name="est" id="est" readonly="readonly" />