Introducción a la programación (Clase 2) Jordi Collell [email protected] @galigan.
21
-
Upload
nieves-albuquerque -
Category
Documents
-
view
4 -
download
1
Transcript of Introducción a la programación (Clase 2) Jordi Collell [email protected] @galigan.
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
