Upload
xjordi
View
485
Download
3
Embed Size (px)
DESCRIPTION
Conceptos básicos para la programación en Javascript. Documentación generada para el posgrado de Web 2.0 del IDEC de la UPF el año 2011
Citation preview
Resumen clase anterior
// numeros aleatoriosMath.random()//entre dos numerosMath.round(Math.random()*5)// RedondeoMath.round( 1.6 )// Mensaje emergentealert(‘un mensaje emergente’)// promptvar k = prompt(‘pregunta al usuario’)
// variablesvar uno = “Esto es un texto”var dos = 23quatro = 2
// operadoresm = dos+quatrom = dos-quatrovar f = dos*quatrom = dos/quatro
// operadores lógicos(a == b)(a != b)(a > b && a <=c)(a >= b || b < c)a == trueb == false
// condicionalesif(a==”un valor”) {
alert(‘la resupuesta 1’)} else {
alert(‘la respuesta 2’)}
if(a==b) {// bloque
} else if(a==c) {// bloque
} else {// bloque
}
Nuevos operadores
++ Incrementa-- Decrementa
Ejercicio:
var numero = 5;numero++numero++numero--
var val = 25;val += 5; // == x=x+5val -= 5; // == x=x-5val *= 2; // == x=x*2
Ejercicio:
val = 5;val += 10;val -= 2;13
Javascript dentro de un html
<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
<html><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
breakdefault:// bloquebreak
}
for(condicion) {//bloque de codigo
}
while(condicion) {// Condicion
}
Javascript switch
Se usa para seleccionar bloques de código en función de condiciones.
switch(cond) {case “A”:
// valor abreak;case “B”:
// valor Bbreak;default:
// codigo por defectobreak;
}
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')
breakcase 2:
console.info('martes')breakcase 3:
console.info('miercoles')breakcase 4:
console.info('jueves')breakcase 5:
console.info('viernes')breakcase 6:
console.info('sabado')breakcase 0:
console.info('domingo')break
}
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 1El valor de i vale 2El valor de i vale 3El valor de i vale 4El 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
While (Mientras)
Mientras se cumpla la condición ejecutará el bloque.
i = 5while(i!=1){
document.write(‘El valor de i vale’ + i +’<br />’);i--
}
El valor de i vale 1El valor de i vale 2El valor de i vale 3El 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 1valor2: 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>
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
El servidor puede ejecutar un programa de script tipo php, y retornar un archivo de texto que contiene, html y javascript
Una vez descargado el archivo, el cliente web (navegador) pinta el html y ejectua el código javascript en el ordenador clienteEl código html, contiene
referencias, a otros documentos, imágenes y archivos css que deben de descargarse des del servidor