Introducción a la programación  Jordi Collell [email_address] @galigan
Objetivos > Comprender que es un programa informático, como funciona y para que sirve. Saber y comprender que es un lenguaje de programación. > Comprender que es un lenguaje de programación y para que se usa. Aprender los principios básicos de cualquier lenguaje de programación: Variables e instrucciones > Conocer los distintos conceptos entorno a la programación orientada a web. Código en servidor, código en cliente, html, evento, framework (marco de trabajo), lenguaje. > Saber leer y escribir pequeños fragmentos de código en javascript. > Saber y escribir pequeños fragmentos de código utilizando el marco jquery.
¿Que es la programación? ... “Es un conjunto de instrucciones que le dicen a un ordenador como realizar una tarea. Cuando el ordenador sigue las instrucciones de un programa, nosotros decimos que lo ejecuta. Podéis pensar que es lo mismo que una receta de cocina que te cuenta como realizar macarrones. En este modelo, tu eres el ordenador y la receta es el programa que te dice como ejecutar una tarea”... - Un programa es una lista de instrucciones. - Una instrucción es una orden que le damos a la computadora. - Un programa informático, es una lista de instrucciones, cargadas en la memoria del ordenador y listas para ejecutarse.
¿Que es un lenguaje de programación? ... “Un lenguaje de programación es un lenguaje artifical diseñado para expresar computaciones que puede realizar una maquina, en particular un ordenador”...
Algunos programas... fragmento de python fragmento de javascript
> Existen muchos lenguajes de programación: C, C++, Java, Perl, PHP, python, ruby, javascript, logo, basic, cobol....  > Los lenguajes pueden ser  interpretados  o  compilados .  La principal diferencia, es que para ejecutar un lenguaje interpretado, necesitamos un programa que se llama intérprete y que ejecuta las instrucciones de nuestro programa... normalmente un archivo de texto.  En el lenguaje compilado, el programa también es un archivo de texto, pero el programador, utiliza otro programa para generar un archivo binario y ejecutable.
¿Como funciona un programa? programa Lo cargamos en la memoria RAM El procesador interpreta nuestras instrucciones Genera un resultado
Ejercicio 1. Hola Mundo!! 1. Abriremos la consola de javascript del navegador 1. Introducimos la instrucción: alert(“Hola Mundo”) ¿Que es una instrucción? > Una instrucción es una orden que le damos al ordenador para que lo ejecute.
Ejemplos de instrucciones Math.random() Math.round(23.7) Math.sin(25.8) Date() “ hola”.toUpperCase() “ Hola mundo”.substring(5,10) prompt(“Como estas”) confirm(“Si o no”) document.write('Hola mundo')
Ejercicio 2. Operadores 1. Introducimos la instrucción: 5*4*10 400 5*(6-3) 30 ¿Que es un operador? > Un operador es parecido a un operación de cálculo, aunque hay muchos mas casos
Operadores Matemáticos ( - ) Resta ( + ) Suma ( / ) Division ( * ) Multiplicación ( % ) Módulo ( = ) Asignación  Operadores Lógicos y comparación true/false Verdad/Mentira ( > ) Mayor que ( < ) Menor que ( == ) Igual que ( != ) Distinto que ( >= ) Mayor o igual que ( <= ) Menor o igual que ( && )  and  ( | | ) or
Ejercicio 3. Operadores 1 == 1 1 == 5 5 >= 1 5 > 6 7 <= 10 (5==5) && (6==6) (7-4) == 3 (8*4) == 12 || (1 + 5 == 6) true == true true == false
Ejercicio 4. Variables 1. Introducimos la instrucción: var uno = 5*10 ( uno ) ¿Que es un variable? > Una variable es una casilla en la que durante el flujo del programa podremos almacenar un dato.
Ejercicio 5. Variables var uno = 5*10 var dos = “Esto es un texto” var tres = 20 Operadores lógicos uno == dos uno != dos
http://jsfiddle.net Ejercicio. Variables var nombre = prompt( ‘¿Como te llamas ?’) alert( “Hola “ + nombre )  Ejercicio 2: Suponer que tenemos una tienda, estamos en rebajas, y necesitamos un programa que nos calcule un descuento a los clientes el (20%)
Instrucciones Condicionales var valor = 8; if( valor > 10 ) { alert(‘eres muy buen estudiante’) } else if( valor >8) { alert(‘eres excelente’) } else if( valor >= 7) { alert(‘notable’) } else if(valor>=5) { alert(‘aprobado’) } else { alert(‘suspendido’) } Los condicionales son instrucciones, que nos permiten,  modificar el flujo del programa en función de condiciones lógicas
Ejercicio  Necesitamos un programa que cuando lo ejecutemos nos salude en función de la hora del día en que estamos. Para obtener la hora del día en una variable, usaremos: var  fecha  =  new  Date () var  hora  =  fecha . getHours ()
Ejercicio 7:  http://jsfiddle.net/6jMxK/

Más contenido relacionado

PPTX
Algoritmo y programación
DOCX
Jefferson cuenca practica_b#7
PPTX
Como realizar un pseudocodigo (1)
PPT
Algoritmo, diagramas
Algoritmo y programación
Jefferson cuenca practica_b#7
Como realizar un pseudocodigo (1)
Algoritmo, diagramas

La actualidad más candente (20)

PPTX
Métodos de programación
PPTX
Salto condicional dilmerelser
DOCX
Jefferson cuenca practica#8
DOCX
DOCX
Jefferson cuenca trabajos_individuales#13
PDF
Uso de variables en php
PPTX
Como realizar un pseudocodigo
PPTX
Pseint pseudocodigo
PPTX
algoritmo
DOCX
DOCX
Condiciones repetitiva
DOCX
Jefferson cuenca trabajos_individuales#8
DOCX
PPTX
Los pseudocodigos
DOCX
DOCUMENTO UNO DE PROGRAMACIÓN
Métodos de programación
Salto condicional dilmerelser
Jefferson cuenca practica#8
Jefferson cuenca trabajos_individuales#13
Uso de variables en php
Como realizar un pseudocodigo
Pseint pseudocodigo
algoritmo
Condiciones repetitiva
Jefferson cuenca trabajos_individuales#8
Los pseudocodigos
DOCUMENTO UNO DE PROGRAMACIÓN

Destacado (6)

PPTX
Javascript
PDF
Introduccion a java script
PPTX
RESUMEN DE JAVASCRIPT
PPSX
Javascript
PPTX
Presentación JavaScript
PPTX
Java script
Javascript
Introduccion a java script
RESUMEN DE JAVASCRIPT
Javascript
Presentación JavaScript
Java script

Similar a Introducción a la Programación en Javascript. Clase 1 (20)

PPTX
Conceptos de algoritmo, programa y lenguaje de
PPTX
Conceptos de algoritmo, programa y lenguaje de
PPTX
Conceptos de algoritmo, programa y lenguaje de
PPTX
Conceptos de algoritmo, programa y lenguaje de
PPTX
Foro de integracion
PPTX
Presentacion python final
PPTX
Presentacion python final
ODP
Introducción a Python
DOCX
Estructuras básicas
DOCX
Estructuras básicas
DOCX
ESTRUCTURAS BÁSICAS
PPT
Java script(diapositivas)
DOCX
Estructuras basicas
PPTX
Javascript 1
PPT
Samuel bailon sanchez
PPT
Samuel bailon sanchez
PPT
Samuel bailon sanchez
PPT
Samuel bailon sanchez
Conceptos de algoritmo, programa y lenguaje de
Conceptos de algoritmo, programa y lenguaje de
Conceptos de algoritmo, programa y lenguaje de
Conceptos de algoritmo, programa y lenguaje de
Foro de integracion
Presentacion python final
Presentacion python final
Introducción a Python
Estructuras básicas
Estructuras básicas
ESTRUCTURAS BÁSICAS
Java script(diapositivas)
Estructuras basicas
Javascript 1
Samuel bailon sanchez
Samuel bailon sanchez
Samuel bailon sanchez
Samuel bailon sanchez

Introducción a la Programación en Javascript. Clase 1

  • 1. Introducción a la programación Jordi Collell [email_address] @galigan
  • 2. Objetivos > Comprender que es un programa informático, como funciona y para que sirve. Saber y comprender que es un lenguaje de programación. > Comprender que es un lenguaje de programación y para que se usa. Aprender los principios básicos de cualquier lenguaje de programación: Variables e instrucciones > Conocer los distintos conceptos entorno a la programación orientada a web. Código en servidor, código en cliente, html, evento, framework (marco de trabajo), lenguaje. > Saber leer y escribir pequeños fragmentos de código en javascript. > Saber y escribir pequeños fragmentos de código utilizando el marco jquery.
  • 3. ¿Que es la programación? ... “Es un conjunto de instrucciones que le dicen a un ordenador como realizar una tarea. Cuando el ordenador sigue las instrucciones de un programa, nosotros decimos que lo ejecuta. Podéis pensar que es lo mismo que una receta de cocina que te cuenta como realizar macarrones. En este modelo, tu eres el ordenador y la receta es el programa que te dice como ejecutar una tarea”... - Un programa es una lista de instrucciones. - Una instrucción es una orden que le damos a la computadora. - Un programa informático, es una lista de instrucciones, cargadas en la memoria del ordenador y listas para ejecutarse.
  • 4. ¿Que es un lenguaje de programación? ... “Un lenguaje de programación es un lenguaje artifical diseñado para expresar computaciones que puede realizar una maquina, en particular un ordenador”...
  • 5. Algunos programas... fragmento de python fragmento de javascript
  • 6. > Existen muchos lenguajes de programación: C, C++, Java, Perl, PHP, python, ruby, javascript, logo, basic, cobol.... > Los lenguajes pueden ser interpretados o compilados . La principal diferencia, es que para ejecutar un lenguaje interpretado, necesitamos un programa que se llama intérprete y que ejecuta las instrucciones de nuestro programa... normalmente un archivo de texto. En el lenguaje compilado, el programa también es un archivo de texto, pero el programador, utiliza otro programa para generar un archivo binario y ejecutable.
  • 7. ¿Como funciona un programa? programa Lo cargamos en la memoria RAM El procesador interpreta nuestras instrucciones Genera un resultado
  • 8. Ejercicio 1. Hola Mundo!! 1. Abriremos la consola de javascript del navegador 1. Introducimos la instrucción: alert(“Hola Mundo”) ¿Que es una instrucción? > Una instrucción es una orden que le damos al ordenador para que lo ejecute.
  • 9. Ejemplos de instrucciones Math.random() Math.round(23.7) Math.sin(25.8) Date() “ hola”.toUpperCase() “ Hola mundo”.substring(5,10) prompt(“Como estas”) confirm(“Si o no”) document.write('Hola mundo')
  • 10. Ejercicio 2. Operadores 1. Introducimos la instrucción: 5*4*10 400 5*(6-3) 30 ¿Que es un operador? > Un operador es parecido a un operación de cálculo, aunque hay muchos mas casos
  • 11. Operadores Matemáticos ( - ) Resta ( + ) Suma ( / ) Division ( * ) Multiplicación ( % ) Módulo ( = ) Asignación Operadores Lógicos y comparación true/false Verdad/Mentira ( > ) Mayor que ( < ) Menor que ( == ) Igual que ( != ) Distinto que ( >= ) Mayor o igual que ( <= ) Menor o igual que ( && ) and ( | | ) or
  • 12. Ejercicio 3. Operadores 1 == 1 1 == 5 5 >= 1 5 > 6 7 <= 10 (5==5) && (6==6) (7-4) == 3 (8*4) == 12 || (1 + 5 == 6) true == true true == false
  • 13. Ejercicio 4. Variables 1. Introducimos la instrucción: var uno = 5*10 ( uno ) ¿Que es un variable? > Una variable es una casilla en la que durante el flujo del programa podremos almacenar un dato.
  • 14. Ejercicio 5. Variables var uno = 5*10 var dos = “Esto es un texto” var tres = 20 Operadores lógicos uno == dos uno != dos
  • 15. http://jsfiddle.net Ejercicio. Variables var nombre = prompt( ‘¿Como te llamas ?’) alert( “Hola “ + nombre ) Ejercicio 2: Suponer que tenemos una tienda, estamos en rebajas, y necesitamos un programa que nos calcule un descuento a los clientes el (20%)
  • 16. Instrucciones Condicionales var valor = 8; if( valor > 10 ) { alert(‘eres muy buen estudiante’) } else if( valor >8) { alert(‘eres excelente’) } else if( valor >= 7) { alert(‘notable’) } else if(valor>=5) { alert(‘aprobado’) } else { alert(‘suspendido’) } Los condicionales son instrucciones, que nos permiten, modificar el flujo del programa en función de condiciones lógicas
  • 17. Ejercicio Necesitamos un programa que cuando lo ejecutemos nos salude en función de la hora del día en que estamos. Para obtener la hora del día en una variable, usaremos: var fecha = new Date () var hora = fecha . getHours ()
  • 18. Ejercicio 7: http://jsfiddle.net/6jMxK/