Introducción a la programación (Clase 2) Jordi Collell jordi@tempointeractiu.com @galigan
Resumen clase anterior // numeros aleatorios Math.random() //entre dos numeros Math.round(Math.random()*5) // Redondeo Math.round( 1.6 ) // Mensaje emergente alert(‘un mensaje emergente’) // prompt var k = prompt(‘pregunta al usuario’) // variables var uno = “Esto es un texto” var dos = 23 quatro = 2 // operadores m = dos+quatro m = dos-quatro var f = dos*quatro m = dos/quatro // operadores lógicos (a == b) (a != b) (a > b && a <=c) (a >= b || b < c) a == true b == false // condicionales if(a==”un valor”) { alert(‘la resupuesta 1’) } else { alert(‘la respuesta 2’) } if(a==b) { // bloque } else if(a==c) {
Nuevos operadores ++ Incrementa -- Decrementa Ejercicio: var numero = 5; numero++ numero-- var val = 25; val += 5; // == x=x+5 val -= 5; // == x=x-5 val *= 2; // == x=x*2 val = 5; val += 10; val -= 2; 13
Javascript dentro de un html <head> <script type=”text/javascript”> <!-- alert(‘hola’) // --> </script> </head> <body> <h1>Página de ejemplo para programar en javascript</h1> <p>Contenido que no sirve para nada, solo para demostrar que es un documento html</p> </body> </html>
Javascript dentro de un html código externo <head> <script type=”text/javascript” src=”file.js”></script> </head> <body> <h1>Página de ejemplo para programar en javascript con un fichero externo</h1> <p>Contenido que no sirve para nada, solo para demostrar que es un documento html</p> </body> </html>
Instrucciones con bloques if( condicion ) { // bloque de código } else { } switch(cond) case val: // bloque break default: for(condicion) { //bloque de codigo while(condicion) { // Condicion
Se usa para seleccionar bloques de código en función de condiciones. Javascript switch Se usa para seleccionar bloques de código en función de condiciones. switch(cond) { case “A”: // valor a break; case “B”: // valor B default: // codigo por defecto } En caso que cond sea valor A, ejecutará el bloque y terminará, en caso que b, ejecutará el bloque y terminará.
Ejercicio, en que cae? d = new Date(2011, 2, 27); dia = d.getDay() switch(numero) { case 1: console.info('lunes') break case 2: console.info('martes') case 3: console.info('miercoles') case 4: console.info('jueves') case 5: console.info('viernes') case 6: console.info('sabado') case 0: console.info('domingo') }
Genera iteraciones de bloques de código. Javascript for Genera iteraciones de bloques de código. for(var i=1; i<5; i++) { document.write(‘El valor de i vale’ + i +’<br />’); } El valor de i vale 1 El valor de i vale 2 El valor de i vale 3 El valor de i vale 4 El valor de i vale 5 Ejercicio, calcula el factorial de 5, usando un for y sabiendo que el factorial se calcula con: 5*4*3*2*1
Mientras se cumpla la condición ejecutará el bloque. While (Mientras) Mientras se cumpla la condición ejecutará el bloque. i = 5 while(i!=1) { document.write(‘El valor de i vale’ + i +’<br />’); i-- } El valor de i vale 1 El valor de i vale 2 El valor de i vale 3 El valor de i vale 4
Instrucciones / Funciones > Las instrucciones tratadas son funciones, una función es una instrucción que recibe parámetros y puedo o no devolver algo. Así: alert(‘hola’) Es una función que recibe un parametro cadena de texto, y no devuelve nada, realiza una acción. m = Math.round(2.6) Es una función que recibe un número decimal, y devuelve el número redondeado Decimos que devuleve (return) cuando podemos recuperar la salida de la misma y ver el resultado. k = prompt(‘danos un número) Es una función que devulve lo que el usuario entre con el teclado.
Funciones Una función es una agrupación de código que puede devolver o no devolver algo, una función, puede admitir parámetros y puede retornar valores. Para definir una función: function suma(valor, valor2) { return valor+valor2 } valor: Es el parametro 1 valor2: Es el parametro 2 return es una instrucción que retorna el valor siguiente, así, la función que acabamos de defnir, puede ser llamada: resultado = suma(5+8) ** Para definirla en la consola usaremos: function suma(v, v2) { return v+v2; }
Ejercicio Funciones Vamos a crear una función que divida, otra que sume, otra que reste y otra que multiplique function suma(num1, num2) { return num1 + num2 } Ejecutaremos las funciones, capturando el resultado y mostrandolo en la consola, con la instrucción: console.info( resultado )
Eventos. ¿Que es un evento? Una interacción del usuario. En javascript respondemos a eventos. <script> function aprieta() { alert(‘aprieta’) } <input type=”button” name=”hola” value=”Apreta” onclick=”aprieta()” /> Ejercicio: Programaremos un botón, que cuando lo apretemos llame a una función que muestra en un alert la hora. d = new Date() hora = d.getHours() minuto =d.getMinutes() segundo = d.getSeconds()
Eventos. ¿Que es un evento? Que otros eventos y en que elementos del DOM están disponibles: En los navegadores modernos en todos los elementos. Ejercicio Eventos Construiremos un documetno html, con elementos: h1, h2, p, a, b y les asignaremos un evento onclick, que llame a una función. Al mismo tiempo, esta función tiene que contar las veces que hacemos click.
Plantilla para el uso de jquery <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </script> <script type=”text/javascript”> <!-- $(document).ready(function(){ alert(‘hola’) }) // --> </script> </head> <body> <h1>Página de ejemplo para programar en javascript</h1> <p>Contenido que no sirve para nada, solo para demostrar que es un documento html</p> </body> </html>
Recuperamos un valor de un formulario Snippets basicos jquery <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </script> <script type=”text/javascript”> <!-- $(document).ready(function(){ $(‘#boton’).click(function(){ alert( $(‘#campo’).val() ) } }) // --> </script> </head> <body> <input type=”text” name=”valor” id=”campo”/> <input type=”button” name=”bt” value=”Probar” id=”boton”/> </body> </html> Selector por id Asignamos un evento Recuperamos un valor de un formulario
jQuery super báisco Selector: Nos permite interactuar con elementos del DOM (Html) <div id=capa” class=”item”>Contenido</div> $(‘#capa’); // selector por id $(‘.item); // selector por clase css $(selector).toggle(); Esconde/Muestra modo interruptor $(selectr).click(nombre_funcion) // assigna una fucnion a un clic $(selector).css(‘propiedad’, ‘valor’); // modifica una propiedad css $(selector).val(); // en un campo de formulario nos retorna, el contenido del campo $(selector).val(‘valor’); // nos permite escribir contenido en un campo de formulario... Ejericico. Probaremos, todos estos elementos dentro de un html.
Ejercicio final clase 2
Actividad extra de refuerzo: Vamos a programar un reloj. Hay una instrucción en javascript, llamada, setInterval(1000, nombrefuncion) i lo que hace es ejecutar una función cada x tiempo en milisegundo. En el caso anterior, cada segundo ejecutará la función nombrefuncion. Con esto, un poco de jquery para escribir en un campo: $(‘#iddelcampo’).val( ‘lo que queremos escrivir’ ) Podemos hacer un reloj...
Cliente/Servidor El cliente Mediante un navegador web, hace una petición (una página) a un servidor Una vez descargado el archivo, el cliente web (navegador) pinta el html y ejectua el código javascript en el ordenador cliente El código html, contiene referencias, a otros documentos, imágenes y archivos css que deben de descargarse des del servidor El servidor puede ejecutar un programa de script tipo php, y retornar un archivo de texto que contiene, html y javascript