Scribd
Cargar
288 vistas

Javascript JQuery

Este documento presenta una introducción a Javascript y jQuery a través de una serie de ejercicios resueltos. Comienza explicando cómo configurar el entorno de desarrollo y realizar los primeros programas "Hola Mundo". Luego, cubre conceptos básicos como variables, operadores aritméticos, y estructuras condicionales. Finalmente, introduce jQuery y muestra cómo manipular elementos HTML de forma sencilla.

Cargado por

matias
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
288 vistas

Javascript JQuery

Este documento presenta una introducción a Javascript y jQuery a través de una serie de ejercicios resueltos. Comienza explicando cómo configurar el entorno de desarrollo y realizar los primeros programas "Hola Mundo". Luego, cubre conceptos básicos como variables, operadores aritméticos, y estructuras condicionales. Finalmente, introduce jQuery y muestra cómo manipular elementos HTML de forma sencilla.

Cargado por

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

Javascript y jQuery

- Ejercicios resueltos Iniciacin a la programacin web. (I)

photo:Andy Piper

Matias Salom Avell

www.ibserveis.com

Javascript y jQuery

Javascript y jQuery, iniciacin a la programacin.

Despus de conocer muchos cursos de los diferentes lenguajes de programacin, puede


encontrase un comn denominador en muchos de ellos: faltan ejercicios realmente prcticos
que ayuden a asimilar todos los conceptos. Tambin pueden encontrase bastantes ejemplos y
ejercicios de programacin en internet, pero muchas veces no ayudan a conseguir unos buenos
fundamentos.
Tras ms de 10 aos impartiendo cursos de programacin, he ido acumulando, puliendo y
creando una serie de ejercicios que consiguen que cualquier persona, con inters y dedicando
el tiempo oportuno, consiga realizar proyectos que realmente funcionan en la web.
Es conveniente tener conocimientos de HTML y de algn entorno de desarrollo web para
depurar y ejecutar los siguientes ejercicios.
Tambin es conveniente seguir algn curso "terico" donde se expliquen con ms profundidad
los conceptos que se aplican en estos ejercicios.
Al ser una iniciacin total de la programacin, se incluyen enlaces a varios videos para las
personas que necesiten ms explicacin de cmo realizar los primeros ejercicios.

Para ms informacin de los conceptos de estos ejercicios, se enlazan los ejercicios con la
informacin aportada por: w3scholls (esta en ingls)

Para ms informacin sobre el libro y el autor: www.ibserveis.com

Est prohibido cualquier tipo de distribucin sin permiso del autor.


Est prohibida la reproduccin de este curso para su utilizacin comercial.
Est permitido el uso en comn en aulas fsicas donde se enseen asignaturas de programacin.

www.ibserveis.com

NDICE

Inicio Javascript ........................................... pg. 4


Inicio jQuery ................................................ pg.10
Condicionales Javascript.............................. pg.15
Condicionales jQuery .................................. pg.17
Condicionales compuestos .......................... pg.21
Funciones Javascript.................................... pg.24
Funciones jQuery ........................................ pg.27
Forms Javacript ........................................... pg.30
Forms jQuery............................................... pg.33
Objetos Javascript ....................................... pg.37
Objetos jQuery ............................................ pg.43

Javascript y jQuery

www.ibserveis.com

Javascript y jQuery

INICIACIN A LA PROGRAMACIN
Iniciacin y variables
En esta leccin se aprende a escribir un primer programa Hola mundo .
Esto significa que se maneja correctamente un editor de texto, en este caso Notepad++,
https://notepad-plus-plus.org/ para sacar por pantalla, en el navegador web, una pequea
frase.
El concepto de Variable tambin se asimila fcilmente a partir de ejemplos muy reveladores.

www.ibserveis.com

Javascript y jQuery

Parte A: Inicio con Javascript - variables

Video 1 Ejercicio 1: Video 1: inicio con Notepad ++


https://youtu.be/0qTwuMouvkU

Javascript Inicio 1)
a) Abrir Notepad ++ ( o cualquier otro editor de HTML)
b) Archivo Nuevo
c) LenguajeH..HTML
d) Copiar el cdigo que empieza por <!DOCTYPE html> siguiente.
e) Archivo..Guardar como. Ej1.html
f) Ejecutar. Launch in X (ver en el explorador, Firefox u otro)

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1 </title>
</head>
<body>
<script type="text/javascript">
document.writeln("Hola Mundo!");
</script>
</body>
</html>

Si no aparece nada en el explorador puede haber un fallo copiando el texto.


Solucin:
En Firefox y Chrome , pulsar CTRL + Maysculas + J , para abrir consola de errores.
Fijarse en el ltimo error que seala. Corregirlo y GUARDAR de nuevo el archivo Ej1

www.ibserveis.com

Video 2
Video 2.1

Javascript y jQuery

: Depuracin de errores (consola): https://youtu.be/zm_SO-SLWaQ


: Depuracin con Firebug: https://youtu.be/8mmJ-UTWtlk

Javascript Inicio 2)

Crear archivo nuevo Ej2.htm y copiar el siguiente cdigo.


Una vez guardado, ejecutar el programa: Launch Firefox, Chrome

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var a, b;
a = 10; b = 5;
resultado = a + b;

La variable a contiene el valor 10


La variable b contiene el valor 5
La variable resultado contiene la suma de a y b

alert ("La suma de a+b es" + resultado );


</script>
</body>
</html>

Javascript Inicio 3) Crear archivo nuevo Ej3.htm y copiar el siguiente cdigo.

Una vez guardado, ejecutar el programa: Launch Firefox, Chrome


<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var num1=0;
var num2=0;

Se aade 1 al valor que hay en num1


Se aade 5 al valor que hay en num2

num1 = num1 + 1;
num2 = num2 + 5;
alert ("El primer numero ahora es " + num1 );
alert ("El segundo numero ahora es " + num2 );
</script>
</body>
</html>

www.ibserveis.com

Javascript y jQuery

Depuracin con puntos de interrupcin: https://youtu.be/CDvn9L9skAg


el programa se ejecuta, pero incorrectamente.

Javascript Inicio 4) Crear archivo nuevo Ej4.htm y copiar el siguiente cdigo.

Una vez guardado, ejecutar el programa: ver en el explorador.


<html>
<body>
<script
var
a =
b =

Imprime en pantalla la frase +


contenido variable.

type="text/javascript">
a, b;
"Hola";
" mundo!";

document.write("Variable a contiene " + a );


document.write("</br>");
document.write("Variable b contiene " + b );
document.write("</br>");
document.write(a + b );
</script>
<p>El signo '+' sirve para concatenar cadenas de texto</p>
</body>
</html>

Ms info en : http://www.w3schools.com/js/js_operators.asp

Inicio 5)

Atencin: Tiene error para aprender a corregirlos UTILIZANDO PTOS INTERRUP.


Crear archivo nuevo Ej5.htm y copiar el siguiente cdigo.
Una vez guardado, ejecutar el programa: ver en el explorador.

<!DOCTYPE html>
<html><body>
<script type="text/javascript">
var a, b;
a = 2; b = 8;
resultado = a * b;

Pulsando las teclas CTRL + MAJ + I , a la


vez, aparece el depurador integrado en el
navegador.

document.write("Variable a contiene " + a );


document.write("</br>");
document.write("Variable b contiene " + b );
document.write("</br>");
document.write("El producto de a por b es " + result );
</script>
<p>Los puntos de interrupcion son fundamentales para programar</p>
</body>
</html>

www.ibserveis.com

Javascript y jQuery

Parte B: Inicio con jQuery - variables


Como nos indican en el curso de jQuery de W3School
- jQuery es una libreria (archivo aadido al proyecto web) que facilita mucho la programacin.
Permite manejar los siguientes elementos con una programacin directa y sencilla:
HTML/DOM , su manipulacin y modificacin.

CSS, modificaciones y asignaciones.

HTML eventos y mtodos.

Efectos y animaciones.

AJAX

Otras utilidades

Para que pueda funcionar la libreria de jQuery, necesitamos que, en la misma carpeta donde tenemos
el archivo HTML donde vamos a trabajar, hagamos lo siguiente:
- Aadir el archivo "jquery-1.12.0.min.js" ( o la versin ms actualizada) .
El archivo se obtiene en jquery.com: Download the compressed, production jQuery

www.ibserveis.com

Javascript y jQuery

Crear archivo nuevo jQuery1.htm y copiar el siguiente cdigo.


En la misma carpeta, aadir el archivo "jquery-1.12.0.min.js"
Una vez guardado, ejecutar el programa abriendo el navegador.

jQuery Inicio 1)

<!DOCTYPE html >


<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var saludo = "Hola mundo!";

Cuando se hace click sobre la


<div> boton, se imprime el
contenido de la variable saludo
en la <div> salida.

$("#boton").click(function () {
$("#salida").append(saludo);
});

});
// fin document.ready
</script>
</head>
<body>
<div id="boton"> Pulsa aqu </div>
<div id="salida"></div>
</body>
</html>

jQuery Inicio 2)

2a) Cambiar el id de la <div> "salida" por otro nombre y hacer que funcione el programa
(cambiar tambin otra instruccin).

2b) Aadir otra <div> y hacer que salga tambin en ella el saludo.

www.ibserveis.com

Javascript y jQuery

Javascript: Condicionales.
Javascript Condicionales 1) ALGORITMO (NO programa) con introduccin de 2 nmeros.
Sacar por pantalla cual es el mayor.
Cambiar en un papel y con lpiz, el pseudocdigo donde aparece XXX
inicio
num1 0: num2 0
Introducir "Introduce primer nmero";num1
Introducir "Introduce segundo nmero";num2
Si (num1>num2)
Escribir "El mayor es el nmero ", XXX
sino
Escriure "El mayor es el nmero ", XXX
Fin si
Fin

Javascript Condicionales 2) Ejecutar el siguiente programa.


Introduccin de 2 nmeros y el programa indica cul es el mayor.
<!DOCTYPE html>
<html><body>
<script type="text/javascript">
var dato1,dato2;
var num1, num2;
dato1 = window.prompt("Primer nmero?", "0");
num1 = parseInt(dato1);
dato2 = window.prompt("Segundo nmero?", "0");
num2 = parseInt(dato2);
if (num1 > num2)
{
Si num1 es mayor que num2 , entonces
resultado = " el primero";
resultado es "El primero"
}
SINO
resultado es "El segundo"
else
{
resultado = " el segundo";
}
document.write("<h3>El mayor es " + resultado + "</h3>");
</script>
</body>
</html>

www.ibserveis.com

Javascript y jQuery

jQuery: Condicionales.
jQuery Condicionales 1) Realizar programa con la introduccin de 2 nmeros por parte del

usuario. La computadora indica cual es el mayor o si son iguales.


<!DOCTYPE html >
<html>
<head><meta charset="utf-8">
<script src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dato1, dato2, resultado;

dato1 contiene el valor introducido en #entrada1.


Lo mismo dato2.

$("button").click(function(){
dato1 = parseInt($("#entrada1").val());
dato2 = parseInt($("#entrada2").val());
if (dato1 > dato2)
{
resultado = " el primero es mayor.";
}
else
{
if (dato2 > dato1){
resultado = " el segundo es mayor.";
}
else {
resultado = " son iguales.";
}
}
$("#salida").append(resultado);
});
});
</script>
</head>
<body>
Introduce primer nmero: <input id="entrada1" type="text"/>
<br>
Introduce segundo nmero: <input id="entrada2" type="text"/>
<br>
<button>Pulsa para calcular</button>
<div id="salida"></div>
</body>
</html>

www.ibserveis.com

Javascript y jQuery

Javascript : Funciones
Informacin sobre funciones: http://www.w3schools.com/js/js_functions.asp

Javascript Ejercicio Funciones 1)


Ejecutar el siguiente cdigo. En qu momento se dispara la funcin?
<html>
<head>
<meta content="text/html; charset=utf-8">
<script type="text/javascript">
function saludo(nombre)
{
document.write("Hola
}

" + nombre);

</script>
</head>
<body>
<input type="button" onclick="saludo('Ana')" value="Pulsa aqu">
</body>
</html>

Javascript Ejercicio Funciones 2)


Colocar un punto de interrupcin en la primera lnea 8 de cdigo del ejercicio anterior
(document.write (Hola +nombre) y otro punto de interrupcin en la lnea 16 (<input type).
Empezar la depuracin e ir ejecutando paso a paso por procedimientos (F10)
Ver el orden en que se ejecutan las instrucciones. Pulsar el botn Llamada a funcin para llegar
al punto de interrupcin de la funcin.

www.ibserveis.com

Javascript y jQuery

jQuery : Funciones
jQuery Ejercicio Funciones 1)
Ejecutar el siguiente cdigo. En qu momento se dispara la funcin?
<!DOCTYPE html >
<html><head>
<script src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#boton").click(function () {
dato1 = $("#entrada1").val();
dato2 = $("#entrada2").val();
Calcula (dato1,dato2);
});
function Calcula (num1,num2){
var resultado = num1 + num2;
$("#salida").append(resultado);
}

La funcin Calcula recibe valores


para los parmetros nu1m y num2.

});
</script>
</head>
<body>
Primer Nmero del 1 al 10: <input id="entrada1" type="text"/>
Segundo Nmero del 1 al 10: <input id="entrada2" type="text"/><br>
<div id="boton"><button>Pulsa aqu</button></div>
<div id="salida"></div>
</body>
</html>

www.ibserveis.com

Javascript y jQuery

Javascript : Forms
Javascript Ejercicio Forms1) Introduccin datos en FORMS
<!DOCTYPE html>
<html>
<head>
<title> Datos en Formularios </title>
<script language="javascript" type="text/javascript">
function saludo()
{
var nom_usuario = document.fdatos.entrada.value
document.writeln("Hola, bon dia "+ nom_usuario)
}
</script>
</head>
<body>
<form name="fdatos">
Escribe tu nombre: <input type="text" size="10" name="entrada"/>
<input type="button" value="Pulsa aqu" onclick="saludo()" />
</form>
</body>
</html>

Javascript Ejercicio Forms 2) Realizar programa en el cual el usuario introduce un valor en un


FORM y por pantalla sale como resultado su 10%.

www.ibserveis.com

Javascript y jQuery

"OBJETOS" en Javascript
Javascript obj 1) Ejecuta el siguiente programa. Las variables en Javascript pueden ser tratadas
como son tratados los objetos: con sus propiedades y funciones propias.

<!DOCTYPE html >


<html>
<head><meta charset="utf-8"/>
<script type="text/javascript">
var alumno = {

En Javascript todo puede ser tratado como


un objeto. Una var "ampliada" puede
presentar propiedades.

nom: "Caterina",
edad: 18
};
document.write(alumno.nom);
document.write(alumno.edad);
document.write('<br><br>');
alumno.nota = "5";
document.write(alumno["nom"]);
document.write(" , su edad es: " + alumno["edad"]);
document.write(" y su nota es: " + alumno["nota"]);
</script>
</head>
<body>
<br><br><br>
<p>Se puede acceder a las -propiedades- de una variable como
<b>variable.propiedad</b>o como variable["propiedad"]</p>
<p>Incluso pueden aadirse propiedades en tiempo de ejecucin!:
alumne.nota</p>
</body>
</html>

www.ibserveis.com

Javascript y jQuery

Hasta aqu los ejercicios de muestra para aprender las bases de la programacin web.

Se puede adquirir la versin completa en esta web:

http://www.bubok.es/libros/244737/Javascript-y-jQuery-Ejercicios-resueltos

También podría gustarte