Javascript
Cargado por
Crisven PolonioJavascript
Cargado por
Crisven PolonioDESARROLLO DE APLICACIONES
WEB
Programación del lado del cliente
JAVASCRIPT: Introducción
JavaScript es el lenguaje de programación ligero más popular en
Internet.
JavaScript es un lenguaje interpretado (las secuencias de comandos
se ejecutan sin compilación preliminar).
Usualmente está embebido directamente en las páginas html a través
de la etiqueta <script> de forma interna o externa.
Interna:
<script type="text/javascript">
document.write("<p>Mi primer JavaScript</p>");
</script>
Archivo con extensión .js
Externa:
<script type="text/javascript" src="myScript.js"></script>
http://www.w3schools.com/js/js_intro.asp
JAVASCRIPT: Qué puede hacer?
JavaScript puede reaccionar a eventos - Un JavaScript puede ser
configurado para ejecutarse cuando algo sucede, como cuando una página ha
terminado de cargar o cuando un usuario da click en un elemento html.
JavaScript puede manipular elementos HTML - JavaScript puede leer y
modificar el contenido de un elemento HTML a través del uso de DOM.
JavaScript se puede utilizar para validar datos - un JavaScript se puede
utilizar para validar formularios de entrada de datos.
JavaScript puede ser utilizado para detectar el browser del visitante - y
dependiendo del browser cargar otra página diseñada específicamente para
ese navegador.
JavaScript puse ser usado para crear cookies - JavaScript puede ser
usado para almacenar y recuperar información en la computadora del
visitante.
JavaScript
Echemos un vistazo!!!
JAVASCRIPT: Sintáxis
JavaScripts puede ser colocado dentro de las secciones <head> o <body> de una
página html.
<html>
<body><h1>My Web Page</h1>
<p id="demo">Un párrafo</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=“Mi primer
JavaScript";
</script>
</body>
</html>
Nota: Colocar el código javascript debajo de la página asegura que éste no
se ejecute antes de que el elemento <p> sea creado.
JAVASCRIPT: Sintaxis (Funciones y eventos)
El ejemplo anterior de JavaScript es ejecutado cuando la página carga.
Sin embargo, algunas veces nosotros necesitamos ejecutar código JavaScript cuando
ocurre un evento, por ejemplo cuando un usuario hace click sobre un botón.
Entonces colocamos el script dentro de una function.
Normalmente las funciones son usados en combinación con eventos.
Llama a la función cuando ocurre el evento click
Revisar lista de eventos en: https://www.w3schools.com/jsref/dom_obj_event.asp
JavaScript Display Possibilities
JavaScript can mostrar datos en diferentes maneras:
Escribiendo dentro de un elemento HTML, utilzando innerHTML.
Ej. document.getElementById("demo").innerHTML = 5 + 6;
Escribiendo como salida del documento HTML, utilizando document.write().
Ej. document.write(5 + 6);
Escribiendo una caja de alerta, utlizando window.alert() o alert().
Ej. alert(5+ 6);
Escribiendo en la consola del navegador, utilizando console.log().
console.log(5 + 6);
DOM : DOCUMENT OBJECT MODEL
Estándar que define un API para la representación de documentos HTML
y XML.
Representa estos documentos como árboles de nodos. En DOM todo es
un nodo.
Es una interfaz de programación de aplicaciones para acceder y manipular
dinámicamente contenido, estructura y estilo en documentos utilizando lenguajes
como ECMAScript (JavaScript).
Ejemplo XML DOM
http://www.w3.org/DOM/
DOM : DOCUMENT OBJECT MODEL
El HTML DOM es un estandar para obtener, cambiar, añadir o eliminar
elementos HTML.
Ejemplo HTML DOM
http://www.w3schools.com/htmldom/default.asp
JavaScript: Métodos principales
getElementById(id)
Permite obtener un elemento del documento html por su
ID. Retorna un elemento.
Ejemplo:
document.getElementById("demo").innerHTML = "Hello
JavaScript";
document.getElementById('myImage').src='pic_bulbon.gif'
JavaScript: Métodos principales
getElementsByTagName(tagname)
Permite obtener elementos por su nombre de etiqueta.
Retorna un arreglo de elementos
var x = document.getElementsByTagName("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
JavaScript: Métodos principales
getElementsByName(name)
Permite obtener elementos por el valor de su atributo
name. Retorna un arreglo de elementos
var x = document.getElementsByName("animal");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].type == "checkbox") {
x[i].checked = true;
}
}
JavaScript: Métodos principales
querySelector(selector)
Retorna el primer elemento cuyo selector CSS coincida
con el especificado.
document.querySelector("#demo").innerHTML = "Hello
World!";
var y= document.querySelector("a[target]");
y.style.color= "red";
JavaScript: Métodos principales
querySelectorAll(selector)
Retorna todos los elementos cuyo selector CSS coincida
con el especificado.
var x = document.querySelectorAll(".example");
x[0].style.backgroundColor = "red";
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
JavaScript: Métodos principales
createElement(tagname)
Crea un nodo de tipo elemento, según el nombre de
etiqueta especificado.
var para = document.createElement("P"); // Create a
<p> element
para.innerHTML = "This is a paragraph."; // Insert
text
document.getElementById("myDIV").appendChild(para); //
Append <p> to <div> with id="myDIV"
JavaScript: Métodos principales
appendChild(child)
Agrega el nodo especificado, como último hijo.
var item;
var lista = document.querySelector("ul");//selecciona elemento
ul
for (i = 0; i < 10; i++) {
item = document.createElement("li"); //crea elemento li
Item.innerHTML = " Item" + i; // escribe contenido en elemento item
lista.appendChild(item); // agrega el item a la lista
}
JavaScript: Métodos principales
removeChild(child)
Elimina el nodo especificado.
var lista = document.querySelector("ul");//selecciona la lista ul
var items = document.querySelector("ul li"); //selecciona
elementos li de la lista ul
for (var i = 0; i < lista.length; i++) {
if (lista.hasChildNodes()) {
lista.removeChild(items[i]);// elimina cada item de la lista
}
}
JavaScript: objeto Style
El objeto style de cada elemento html representa su
estilo individual.
document.getElementById("demo").style.display = "none";
document.getElementById("demo").style.fontSize = "35px";
JavaScript: Validación de Formularios
El elemento <form> de html define un formulario que es utilizado para
recolectar datos de entrada del usuario.
Ejemplo:
<form name="form_datos" action="/action_page.php" method="get">
<label>Nombre: </label>
<input type="text" name= "nombre"/></br>
<label>Apellidos: </label>
<input type="text" name="apellidos"/></br>
<input type="submit" value="Enviar"/>
</form>
JavaScript: Validación de Formularios
El elemento <form> de html define un formulario que es utilizado para
recolectar datos de entrada del usuario.
Propiedades de los elementos de formulario Html
JavaScript: Validación de Formularios
Un formulario html contiene elementos de formaulario. Los elementos de
formulario más importantes son los <input>.
Los elementos input pueden ser mostrados de manera diferente, dependiendo
del valor de su atributo type.
Ejemplos:
Botones: <input type="button">, <input type="reset">, <input type="submit">
Cajas de texto: <input type="text">, <input type="password">, <input type="number">
Casillas de verificacion: <input type="checkbox">
Botones de opcion: <input type="radio">
Campos ocultos: <input type="hidden">
Cajas de fecha o tiempo: <input type="date">, <input type="time">
Cajas para selección de archivos: <input type="file">
Etc.
JavaScript: Validación de Formularios
Adicionalmente existen otros elementos de formulario como:
El elemento <select> que define una lista drop-down (combo). Ejemplo:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
El elemento <textArea> que define una caja de texto de varias líneas
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Validación de Formularios
Ejemplo validación campo vacio.
Validación de Formularios
Uso de expresiones regulares para validación
Las expresiones regulares (regex) son modelos que describen las
combinaciones de caracteres en el texto. Se podrían definir como una serie
de caracteres que forman un patrón, de tal forma que podemos comparar
el patrón con otros conjuntos de caracteres para ver las coincidencias.
Manual para expresiones regulares
http://www.desarrolloweb.com/articulos/2033.php
http://www.w3schools.com/js/js_obj_regexp.asp
Validación de Formularios
Validación de Formularios
Ejemplo validación campo fecha.
var regexFecha = /^(0[1-9]|1\d|2\d|3[1-2])\/(0[1-9]|1[0-2])\/\d{4}$/;
Validación de Formularios
Ejemplo validación grupos de opciones.
