JAVASCRIPT.pptx

APLICACIONES EN LA WEB Y REDES
INALAMBRICAS
JAVASCRIPT
• es un lenguaje ligero e interpretado, orientado a objetos con funciones de
primera clase, más conocido como el lenguaje de script para páginas web, pero
también usado en muchos entornos sin navegador, tales como node.js o
Apache CouchDB. Es un lenguaje script multi-paradigma, basado en prototipos,
dinámico, soporta estilos de programación funcional y orientada a objetos.
• Se utiliza principalmente en su forma del lado del cliente (client-side),
implementado como parte de un navegador web permitiendo mejoras en
la interfaz de usuario y páginas web dinámicas.
• Ejemplos de uso:
• Validación de campos, carga por ajax, calculos , cambios en diseño en
tiempo real etc...

INALAMBRICAS
USO JAVA SCRIPT
INALAMBRICAS
Javascript puede utilizarse importando un archivo «.js»
<script type="text/javascript"
src="funciones.js"></script>
O escribiendo el codigo en la pagina en la seccion del
head:
<head>
<script type=«text/javascript»>
Aquí va el codigo javascript
</script>
</head>

INALAMBRICAS
SINTAXIS
•Definicion de variables:
•Var mivariable; //permite almacenar cualquier tipo
de dato.
•Arreglos:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves",
"Viernes", "Sábado", "Domingo"];

INALAMBRICAS
USO DE FUNCIONES
INALAMBRICAS
• Las funciones pueden ser invocadas apartir de un evento,
el evento puede ser producido por cualquier elemento
html:
• Onclick (botones, hipervinculos, checkbox etc)
• Onload (body)
• Onselect ( select, text, textarea)
• Onsubmit (form)
• onFocus ( text, textarea, window etc)
• onBlur (text, textarea etc)
• Window Load
• Document ready

INALAMBRICAS
USO DE JAVASCRIPT
INALAMBRICAS
<FORM NAME="form1” ACTION="" METHOD="post">
<input type="text" name="nombre" >
<input type="button" value="Aceptar" Onclick="mostrar();">
</FORM>
<script type="text/javascript">
Function mostrar(){
If (document.form1.nombre.value == ""){
alert("El campo nombre debe estar diligenciado");
}
}
</script>

INALAMBRICAS
LLAMADOS A LOS ELEMENTOS POR
JAVASCRIPT
INALAMBRICAS
• Se puede capturar cualquier elemento del entorno
por su id.
• document.getElementById("nombre")
• y de esa manera modificar sus atributos, capturar sus
datos:
document.getElementById("nombre").value
document.getElementById("nombre").innerHtml="Contenido nuevo";
document.getElementById("nombre").style.display="none";

INALAMBRICAS
JQUERY
INALAMBRICAS
jQuery es una biblioteca de JavaScript, creada inicialmente
por John Resig, que permite simplificar la manera de
interactuar con los documentos HTML, manipular el
árbol DOM, manejar eventos, desarrollar animaciones y
agregar interacción a páginas web.

JQUERY
jQuery puede ser incluido en la página web, importanto el documento que lo
contiene, ya sea desde la web o desde un archivo local.
desde archivo
<head>
<script src="jquery-3.1.1.min.js"></script>
</head>
desde La web
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
</head>

Sintaxis JQuery
La sintaxis de jQuery está hecha a medida para seleccionar elementos HTML y
realizar alguna acción en el elemento (s).
La sintaxis básica es: $ ( selector ). acción ()
Un signo $ para definir / acceder a jQuery
A ( selector ) para "buscar (o encontrar)" elementos HTML
Una acción jQuery () que se realizará en el elemento (s)
Ejemplos:
$ (This) .hide () - oculta el elemento actual.
$ ("P"). Hide () - oculta todos los elementos <p>.
$(“.test”).Hide () - oculta todos los elementos con class = "test".
$ ("# Test"). Hide () - oculta el elemento con id = "test".

INALAMBRICAS
USO DE JQUERY
INALAMBRICAS
$(document).ready(function() {
$("#boton").click(function(){
alert(“Presiono el
boton”);
});
});

INALAMBRICAS
JQUERY algunos eventos
INALAMBRICAS
$("p").dblclick(function(){
$(this).hide();
});
$("#p1").mouseenter(function()
{
alert("You entered
p1!");
});
$("#p1").mouseleave(function()
{
alert("Bye! You now
leave p1!");
});
$("input").focus(function(){
$(this).css("backgro
und-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("backgro
und-color", "#ffffff");
});

JQUERY algunos eventos
Mouse Events Keyboard Events Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

Efectos Jquery
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("button").click(function(){
$("p").hide(1000);
});
$("p").toggle();
});
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

Acceso a valores
Tres métodos simples, pero útiles, jQuery para la
manipulación de DOM son:
Text () - Establece o devuelve el contenido de texto de los
elementos seleccionados
Html (): establece o devuelve el contenido de los
elementos seleccionados (incluido el marcado HTML)
Val () - Establece o devuelve el valor de los campos de
formulario

Ejercicio
Crear formulario de registro como el que se
muestra a continuación.
Usar Bootstrap para la creación del
diseño.(Investigar).
Usando Jquery:
1. Validar los campos que no esten vacios
2. Validar los campos por tipo de dato (email)
3. Verfificar que las contraseñas sean iguales
4. Verificar seguridad de la contraseña. (Que
contenga Mayusculas+minusculas y
numeros+longitud minimo de 8).
5. Investigar Expresiones regulares
Mostrar los mensajes sobre, elementos
animados, usando Jquery,
Crear un objeto (Javascript) usuario una vez
se ha validado la información. Visualizar
datos.

JAVASCRIPT.pptx

Más contenido relacionado

Similar a JAVASCRIPT.pptx

JAVASCRIPT.pptx