Introduccion a la programacion (Pseudocódigo + JavaScript)

Introducción a la programación

Quique Fdez GuerraDesarrollador JavaScript@CKGrafico

Agenda

Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra

Día 1: La programación – pseudocódigoDía 2: Introducción básica a JavaScript + ejercicios simples.

Día 3: Plantear entre todos 1ª práct. – Empezar 1ª práct.Día 4: Terminar 1ª práct. – Plantear 2ª pract.

Día 5: Práctica 2Día 6: Terminar práctica 2 – repasar entre todos y dudas del curso

Nota: Práctica 1: 3 en raya sin GUI (consola nodejs)Práctica 2: 3 en raya con GUI (en un navegador)

Programación

La programación, es el proceso de diseñar, codificar, depurar y mantener el código fuente de programas computacionales.

Wikipedia

La lógica de la programación, es el conjunto de ideas y acciones que utilizamos para construir un programa que resuelva un problema.

Quique


RelaciónA nivel académico lo podríamos relacionar con


Matemáticas

LenguaTenemos muchos idiomas.

Nadie se expresa igual.Diferentes idiomas pueden parecerse.Has de comprender.…

Usas símbolos y números.Resuelves problemas.Diferentes caminos mismo resultado.…

Abstracción de las ideas (ir más allá).Hay una base obligatoria y perfeccionable con la práctica.

Filosofía y otros

Nos aportaUn enfoque distinto para afrontar los problemas.


Enfoque matemático

Si tengo 11 personas y 3 cajas

11/3 = 4 por caja y en una 3

Nos aporta


Enfoque matemático (problemas reales)

Ocupa mucho espacio.Si una caja se estropea…Cambios entre colas.Colas más largas que otras.Etc.

Si tengo n personas y x cajas

Mientras queden personasvoy de una en unay las reparto en x cajas

Nos aportaUn enfoque distinto para afrontar los problemas.


Enfoque lógica programación

Nos aporta


Enfoque lógica programación (lo que nos aporta)

Ocupa mucho menos espacio.Si una caja se estropea casi no nos afectaNo hay cambios entre colas.Solo una colaRapidez, eficiencia, etc..Se pone en práctica en tiendas como PRIMARK

Futuro laboralSaber programar te ofrece oportunidades laborales


INFINITAS

Vías de aprendizaje

Autoaprendizaje


FP / Equivalente

Universidad

¿Qué elegir?

Vías de aprendizaje

Autoaprendizaje


FP / Equivalente

/ Universidad

Mi opinión y mi experiencia

Autoaprendizaje

Charlas / Trabajo en equipo / Talleres / Cursos / ….

Lenguajes de programaciónMuchos lenguajes de programación, todos son distintos y comparten algunas cosas. Nos pueden servir para transmitir mensajes similares en distintas situaciones.


Programación

C

JavaScriptC++ Perl

Árbol idiomas: http://bit.ly/1pm4u3sÁrbol lenguajes prog: http://bit.ly/1jQsLXn

… …

Objective-C

Lenguas

Latín

Cat.

Franc. Cast.

… …

Ita.

Aproximació

n

…

Delphi

…

Ruso

En este taller

- Aprenderemos las bases de la programación.

- Trataremos con pseudocódigo

- Aprenderemos las bases de JavaScript

- Haremos dos prácticas:

- JavaScript sin GUI (utilizando NodeJS)

- JavaScript con GUI (Navegador)


¿Pseudoqué…?

“Lenguaje de programación” Utilizado, sobretodo, en ámbitos académicos.

No lo puedes ejecutar en un ordenador, puedes escribirlo en cualquier idioma (no inglés obligatorio).

Te va a servir para entender un poco más la lógica de programación e iniciarte al código de programación.


¿JavaScript?

No es el lenguaje de programación más usado.

Pero es el único UNIVERSAL (servidor, hardware, browser, etc..)

Es muy fácil de aprender (con sus pros y sus contras).

Es de los que más crecimiento está teniendo últimamente.

Están cocinando una nueva versión bastante buena (ECMA6)


Pseudocódigo

Procesos y funcionesVariablesVectoresCondiciones

Si SegunMientrasRepetir-hastaRepetir-para


Nota:Encontraréis muchas

maneras de expresar el pseudocódigo

ProcesosIdea: Resolver un problema pequeño, ejecutar una acción


Define:Proceso Ejemplo

…FinProceso

Proceso Escribir (texto:cadena)…

FinProceso

Ejecucción:Escribir texto

Ejemplo:Proceso HolaAlumno

Escribir “Hola Quique”FinProceso

HolaAlumno

ProcesosResolver un problema


Hacer la compra

Moverme a tienda

Pagar todo

Coger productos

Coger “Peras”

Coger “Leche”

Coger “Pan” Coger “Flanes”

Accion “irMoto”

Accion “irTienda”

Accion “abreCartera

”Pagar

22

Define:Proceso Escribir (texto:cadena)

…FinProceso

Procesos


Proceso HacerLaCompraMovermeTiendaCogerProductosPagar Todo

FinProceso

Proceso MovermeTiendaAccion “irMoto”Accion “irTienda”

FinProceso…

HacerLaCompra

Proceso Coger (que:cadena)

…FinProceso

Proceso Accion (cual:cadena)

…FinProceso

Proceso CogerProductosCoger “Peras”Coger “Leche”…

FinProceso

VariablesIdea: Guardar un valor que luego voy a usar


Define:Entero uno, dosReal alturaCadena palabraBooleano encendido

Ejecucción:uno = 1

Ejemplo:uno = 1dos = uno + unoaltura = 3.4palabra = “Hola”encendido = FALSO

FuncionesIdea: Un proceso que me devuelve un resultado


Define:Funcion Ejemplo

…FinFuncion

Ejecucción:variable = Ejemplo

Ejemplo:Funcion HolaAlumno

retorna “Hola Quique”FinFuncion

hola = HolaAlumno

VectoresIdea: Guardar un conjunto de valores


Define:Caracter vocales[5]

Ejecucción:vocales[1] = ‘a’

Ejemplo:vocales[1] = ‘a’vocales[2] = ‘e’vocales[3] = ‘i’vocales[4] = ‘o’vocales[5] = ‘u’

CondicionesIdea: Nos ayudan a trabajar con nuestro código,No son ni procesos ni funciones pero nos van a servir para conseguir diferentes acciones o gestionar nuestros datos.


Condiciones de comprobaciónSiSegun

Condiciones de repeticiónMientrasRepetir-hastaRepetir-para

Cond. Comprobación: SiIdea: Si pasa esto haré eso.


Utilización:Si condición Entonces

…FinSi

Si condición Entonces…

Sino Si condición Entonces…

Sino…

FinSi

Ejemplo:Entero uno, dosuno = 1dos = uno * 2

Si uno > dos EntoncesEscribir “Eres más grande”

FinSi

Cond. Comprobación: SegunIdea: Desencadena una acción u otra dependiendo del valor.


Utilización:Segun valor Hacer

…De otro modo:

…FinSegun

Ejemplo:Entero unouno = 1

Segun uno Hacer1: Escribir “Correcto”2: Escribir “Mitad”3: Escribir “Te pasas”

De otro modoEscribir “uno > 3”

FinSegun

Cond. Repetición: MientrasIdea: Hacer una acción mientras se cumpla una condición.


Utilización:Mientras condición Hacer

…FinMientras

Ejemplo:Booleano miTurnoEntero miNumeromiTurno = FALSOmiNumero = 342

Mientras miTurno == FALSO Hacer miTurno = EsperaTurno miNumero

FinMientras

// Así se pone un comentario// Cuando EsperaTurno devuelva CIERTO// Entonces miTurno == CIERTO

Cond. Repetición: Repetir-hastaIdea: Repetir una acción hasta que se cumpla una

condición.


Utilización:Repetir

…Hasta que condición

Ejemplo:Booleano miTurnoEntero miNumeromiTurno = FALSOmiNumero = 342

Repetir miTurno = EsperaTurno miNumero

Hasta que miTurno == CIERTO

// Cuando EsperaTurno devuelva CIERTO// Entonces miTurno == CIERTO

Cond. Repetición: Repetir-paraIdea: Repetir una acción un cierto número de veces.


Utilización:Para contador Hasta final

…FinPara

Ejemplo:Booleano miTurnoEntero miNumero,imiTurno = FALSOmiNumero = 342

Para i = 1 Hasta 400 Si EsperaTurno miNumero == CIERTO

HacermiTurno = CIERTO

FinSiFinPara

FunctionVarArrayConditionals

ifswitchwhiledo…whilefor

JavaScript

Procesos y funcionesVariablesVectoresCondiciones

Si SegunMientrasRepetir-hastaRepetir-para


Nota:Recordar, no, no es el

mejor lenguaje del mundo.

¿Cómo trabajaremos?Se puede usar JavaScript de muchas maneras, nosotros veremos 3


1.- Escribir en un archivo de texto y ejecutar en la consola de nodejs.

2.- Escribir en un archivo de texto y ejecutar en el navegador.

3.- Escribir en la consola del navegador y ejecutar en la consola del navegador.

Function


Idea: En JavaScript no diferenciamos entre procesos y funciones

Define:function example(){

…}

function example(name){…

}

Ejecucción:ejemplo();

Ejemplo:function helloGuy(name){

return ‘Hola ’ + name;}

helloGuy(‘Quique’);

VarIdea: Guardar un valor que luego voy a usar


Define:var one;var word = ‘hi’;var myName = function(name) {

return name;};

Ejemplo:one = 1;var word = myName(‘Quique’);one = 2;one = 4;

ArrayIdea: Guardar un conjunto de valores


Define:var arr = [];

Ejemplo:var nums = [1,2,3,2];nums[3] = 4; //Empieza en 0

var words = [‘hola’, ‘quique’];

var some = [nums[2], ‘hi’, 2, 4, [‘a’, ‘b’, ‘c’]];

Cond. Comprobación: if


Utilización:if (condición){

…}

if (condición){…

}else if (condición){…

}else{…

}

Ejemplo:var one, two;one = 1;two = one * 2;

if (uno > dos){console.log(‘Eres más

grande’)}

if (uno > dos && 1 > 2 || 1== 2){console.log(‘se cumple’)

}

Cond. Comprobación: switch


Utilización:switch (valor){

…default:

…}

Ejemplo:var one, two;one = 1;

switch (one){case 1: two = -2; break;case 2: two = -2; break;

default:two = 0;

}

Cond. Repetición: while


Utilización:while (condicion){ …}

Ejemplo:var me, myNum;me = falsemyNum = 342

while (me == false){ me = waitTurn(myNum);

}

// Cuando waitTurn devuelva true// Entonces me == true

Cond. Repetición: do…while


Utilización:do{

…}while (condición);


do{ me = waitTurn(myNum);

}while(me == false);

// Cuando waitTurn devuelva true// Entonces me == true

Cond. Repetición: forIdea: Repetir una acción un cierto número de veces.


Utilización:Para contador Hasta final

…FinPara


for (var i = 0; i< 400; i++){ if (waitTurn(myNum) == true){

me = true;break; // salgo del for

}}

Education

Introduccion a la programacion (Pseudocódigo + JavaScript)