Your SlideShare is downloading. ×
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Introducción a la Progamación en Javascript. Classe 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introducción a la Progamación en Javascript. Classe 2

465

Published on

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

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
465
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.
    • Introducción a la programación (Clase 2)
    • Jordi Collell
    • [email_address]
    • @galigan
  • 2.
    • 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) {
          • // bloque
          • } else {
          • // bloque
          • }
  • 3.
    • Nuevos operadores
    • ++ Incrementa
    • -- Decrementa
    • Ejercicio:
    • var numero = 5;
    • numero++
    • numero++
    • numero--
    • var val = 25;
    • val += 5; // == x=x+5
    • val -= 5; // == x=x-5
    • val *= 2; // == x=x*2
    • Ejercicio:
    • val = 5;
    • val += 10;
    • val -= 2;
    • 13
  • 4.
    • 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>
  • 5.
    • 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>
  • 6.
    • Instrucciones con bloques
    • if( condicion )
    • {
    • // bloque de código
    • } else {
    • }
    • switch(cond)
    • {
    • case val:
      • // bloque
      • break
    • default:
    • // bloque
    • break
    • }
    • for(condicion) {
      • //bloque de codigo
    • }
    • while(condicion) {
      • // Condicion
    • }
  • 7.
    • 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
          • break;
            • default:
            • // codigo por defecto
            • break;
    • }
    • En caso que cond sea valor A, ejecutará el bloque y terminará, en caso que b, ejecutará el bloque y terminará.
  • 8.
    • 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')
    • break
    • case 3:
    • console.info('miercoles')
    • break
    • case 4:
    • console.info('jueves')
    • break
    • case 5:
    • console.info('viernes')
    • break
    • case 6:
    • console.info('sabado')
    • break
    • case 0:
    • console.info('domingo')
    • break
    • }
  • 9.
    • 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
  • 10.
    • 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
  • 11.
    • 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.
  • 12.
    • 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; }
  • 13.
    • 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 )
  • 14.
    • 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()
  • 15.
    • 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.
  • 16.
    • Plantilla para el uso de jquery
    • <html>
    • <head>
    • <script src=&quot; https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js &quot;> </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>
  • 17.
    • Snippets basicos jquery
    • <html>
    • <head>
    • <script src=&quot; https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js &quot;> </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
  • 18.
    • 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.
  • 19.
      • Ejercicio final clase 2
  • 20.
      • 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...
  • 21.
    • 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 cliente El código html, contiene referencias, a otros documentos, imágenes y archivos css que deben de descargarse des del servidor

×