Scribd
Cargar
47 vistas

Java Script

Este documento proporciona una introducción a JavaScript, incluyendo su sintaxis, métodos y eventos principales. JavaScript es un lenguaje de programación ligero que se usa comúnmente para agregar interactividad a páginas web. Puede manipular el contenido HTML, reaccionar a eventos del usuario y validar datos de formularios. El modelo de objetos del documento (DOM) representa páginas web como árboles de nodos que pueden ser modificados dinámicamente con JavaScript.

Cargado por

Don Diego
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
47 vistas

Java Script

Este documento proporciona una introducción a JavaScript, incluyendo su sintaxis, métodos y eventos principales. JavaScript es un lenguaje de programación ligero que se usa comúnmente para agregar interactividad a páginas web. Puede manipular el contenido HTML, reaccionar a eventos del usuario y validar datos de formularios. El modelo de objetos del documento (DOM) representa páginas web como árboles de nodos que pueden ser modificados dinámicamente con JavaScript.

Cargado por

Don Diego
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 32

DESARROLLO 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: 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 // Insert
paragraph."; 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: Eventos

Los eventos HTML son "cosas" que le suceden a los elementos HTML.


Cuando se usa JavaScript en páginas HTML, JavaScript puede "reaccionar" ante
estos eventos.

Un evento HTML puede ser algo que hace el navegador o algo que hace un usuario.

Aquí hay algunos ejemplos de eventos HTML:

•Una página web HTML ha terminado de cargarse


•Se modificó un campo de entrada HTML
•Se hizo clic en un botón HTML

A menudo, cuando ocurren eventos, es posible que desee hacer algo.


JavaScript le permite ejecutar código cuando se detectan eventos.
JavaScript: Eventos
HTML permite agregar atributos de controlador de eventos, con código
JavaScript , a elementos HTML.

Con comillas simples:


<element event='some JavaScript'>
Con comillas dobles:
<element event="some JavaScript">

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>
JavaScript: Eventos
HTML permite agregar atributos de controlador de eventos, con código
JavaScript , a elementos HTML.

Con comillas simples:


<element event='some JavaScript'>
Con comillas dobles:
<element event="some JavaScript"> <!DOCTYPE html>
<html>
<!DOCTYPE html> <body>
<html>
<body> <p>Click the button to display the date.</p>

<button <button onclick="displayDate()">The time is?</button>


onclick="document.getElementById('demo').inner
HTML=Date()">The time is?</button> <script>
function displayDate() {
<button onclick="this.innerHTML=Date()">The document.getElementById("demo").innerHTML =
time is?</button> Date();
}
<p id="demo"></p> </script>

</body> <p id="demo"></p>


</html>
</body>
</html>
JavaScript: Eventos
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body onload="myFunction()"> <body>

<h1>Hello World!</h1> <img src="w3html.gif" onload="loadImage()"


width="100" height="132">
<script>
function myFunction() { <script>
alert("Page is loaded"); function loadImage() {
} alert("Image is loaded");
</script> }
</script>
</body>
</html> </body>
</html>
JavaScript: Eventos
Algunos eventos HTML comunes:

Evento Descripción
onchange Se ha cambiado un elemento HTML.
onclick El usuario hace clic en un elemento HTML.
onmouseover El usuario mueve el mouse sobre un
elemento HTML

onmouseout El usuario aleja el mouse de un elemento


HTML

onkeydown El usuario presiona una tecla del teclado


onload El navegador ha terminado de cargar la
página.

La lista es mucho más larga: W3Schools JavaScript Reference HTML DOM


Events .
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">

Para más información visitar:


https://www.w3schools.com/html/html_form_input_types.asp
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.
Ejercicio práctico:
1.- Crear formulario
2.- Aplicar CSS
3.- Crear JavaScript con validaciones

También podría gustarte