Conceptos de Programación

Elaborado con cariño por Celia Gómez Profe ☺
Mi ejemplo:

Lenguajes cliente
• HTML – HyperText Markup Language
• Lenguaje de etiquetas de hipertexto
• Generar la estructura
• CSS - Cascading Style Sheets

• Hojas de estilo en cascada
• Dar formato
• JS - Javascript
• Lenguaje de programación interpretado.
• Dar funcionalidad, movimiento, interacción.

JS
• Javascript es un lenguaje de programación interpretado, basado en el
estándar ECMAScript.
Un lenguaje de programación interpretado es aquel que el código
fuente se ejecuta directamente, instrucción a instrucción
• En cuanto encuentra un error, sale de la ejecución del programa
ECMAScript es una especificación de lenguaje de programación publicada por Ecma International.
Ecma International es una organización internacional basada en

membresías de estándares para la comunicación y la información.
https://openwebinars.net/academia/portada/javascript-principiantes/ https://www.w3schools.com/js/default.asp
JS
• Su naturaleza más conocida es la parte del cliente (client-side).
• Integrada en los navegadores web, donde se puede utilizar para mejorar la
interfaz de usuario de una página web, automatizar acciones o construir
aplicaciones o sitios web más complejos y personalizados.
• Además, también se utiliza en servidores gracias a la popularización
de NodeJS.

JS
• js se puede declarar:
a) Directamente en la página html mediante las etiquetas
<script type=“text/javascript”> </script>
b) Mediante un enlace a un fichero independiente
<script src=“fichero.js”> </script>
• Es conveniente declararlo después del contenido del body, antes de cerrarlo,

• O bien asegurarnos que se llama a las funciones cuando se haya cargado la página html
https://www.w3schools.com/js/js_whereto.asp
Vamos a crear una página HTML con un párrafo
• 1º Creamos la estructura básica del HTML y añadimos el <p> al body
<p>Esta es la página que vamos a utilizar para aprender js</p>
• 2º Le añadimos el encabezado donde indicamos dónde está el script

<script src=“primerjs.js”></script>
• 3º Creamos una página vacía con ese nombre
• Que esté situada en la misma carpeta que el html (o en la carpeta que le indiquemos
en src)
• 4º Lanzamos la página html y no pasa nada! ¿Verdad?

• Pues vamos a hacer que pasen cosas!!!

JS – mensajes por consola

• Para visualizar un mensaje mediante un pop-up:
• alert(“Hola mundo!”);
• Los comandos para trabajar con consola son:
• console
• console.log(“Mensaje de registro”);
• console.info(“Mensaje de información”);
• console.error(“Mensaje de error”);
• console.warn(“Mensaje de aviso”);
• debugger
• Para que la ejecución de nuestra página js se pare en esta línea y podamos controlar su
ejecución línea a línea, etc.
Shift + Control + i → para abrir la consola

JS – mensajes por consola

JS – Variables
• Variables en js:
• Son débilmente tipadas: https://lenguajejs.com/javascript/fundamentos/tipos-de-datos/
• var
• let
• const
• var nombre_variable = valor; //Con comillas si se trata de un string.
• https://www.w3schools.com/js/js_variables.asp
• Podemos crear variables directamente en consola: Ctrl+ Shift + i

• var mensaje=“hola soy un mensaje”;
• Para ver su valor:
• mensaje
• Si no está definida aún (solo está declarada
y no tiene valor, entones nos dirá: undefined)
• Tienen un entorno de ejecución (scope)

• Puede ser global o local
var La instanciación es el proceso de leer o especificar información,
como los valores y el tipo de almacenamiento de un campo de datos.
• Genera variables de forma global

• Aquellas que están definidas fuera de cualquier condición, función, etc.
• Se puede acceder a ellas desde cualquier parte del programa
• var mensaje=“Hola”; //Instanciamos la variable mensaje
• mensaje //Recuperamos el valor de la variable mensaje
• SUMA:
• var a, b;
• a=3;
• b=5;
• var sum=a+b;
• alert(sum);

let
• Genera variables de tipo local
• No se puede acceder a ellas fuera del entorno donde se han creado:
condición, función…
• let mensaje=“Hola”; //Instanciamos la variable mensaje
• Ej.:

let
var y let
• Si declaro
const
• Son variables que no pueden cambiar su valor a lo largo del programa
• const saludo=“Hola”; //Instanciamos la variable mensaje
• saludo=“Adiós”; //Dará un error al tratar de cambiar su valor

Var, let, const → Uso de las variables – Resumen
• var
• Son variables globales
• Se pueden definir después de ser utilizadas
• Nos permite declararlas más tarde y ponerles su valor cuando queramos
• let
• Son variables locales, pertenecen a un entorno determinado.
• Nos obliga a definirlas (y asociarles un valor) antes de usarlas.
• const
• Son accesibles después de haberlas definido.
• Y no pueden cambiar su valor a lo largo de la ejecución del programa.

Recomendaciones para los nombres de las variables
Variables:
• unasolapalabra → en minúsculas.
• siSonVarias → camelCase
• CONSTANTES → en mayúsculas
• CONST_COMPUESTAS → con barra_baja

Ejemplos → Ahora tú!!
• Probando las variables var y let
• Haz una suma con dos variables globales (var) y muestra el resultado por consola.
• Haz una resta con dos variables locales (let) y muestra el resultado por consola.
• Probando el entorno de ejecución de una variable var.

• Muestra una variable var fruta sin declarar.
• Declárala pero sin darle valor.
• Muéstrala.
• Ahora dale valor y muéstrala.
• Ahora una variable let.

• Haz lo mismo pero con la variable let color.
• Crea una constante NUM_PI y muéstrala por consola.

• Trata de cambiarle el valor y mostrarlo.

Ejemplos → Ahora tú!!
• Probando las variables var y let
• Haz un bucle if.
• Dentro, crea una variable var deporte y otra let musica.
• Muéstralas por consola dentro de ese bucle.
• Fuera del bucle muestra deporte y luego musica.
• Comenta este bucle y haz lo mismo con una función: function meGusta():
• Dentro, crea una variable var deporte y otra let musica.
• Muéstralas por consola dentro de esa función.
• Fuera de la función, haz una llamada a la función:
• meGusta();
• Luego trata de mostrar por consola deporte y luego musica.

Tipos de datos
• ¿Qué tipos de elementos encontramos en una web?
- Números
- Texto
- Booleanos
- Acciones

Tipos de datos
• Tipos de datos en js
- Numbers
• Tipo de operaciones: +, -, *, /
- Strings
- Booleanos
- Undefined
- Null

Tipos de datos: Numbers
• Tipo de operaciones: • Otras operaciones
• Aritméticas: • Aritméticas:
• Suma: + • Exponente: **
• Resta: - • Incremento: ++
• Multiplicación: * • Decremento: --
• División: /
• Resto: % • Lógicas (Comparaciones)
• Lógicas (Comparaciones) • Mayor que: >
• Mayor que: > • Menor que: <
• Menor que: < • Mayor o igual que: >=
• Mayor o igual que: >= • Igual: ==
• Igual: == • Diferente o “No igual que”: !=
• Diferente o “No igual que”: != • Triple igual: === compara los valores,
• Triple igual: === compara los valores, pero también el tipo…
pero también el tipo…

• Igual: ==
• Diferente o “No igual que”: !=
• Triple igual: === compara los valores, pero también el tipo…

Ej.
• Te vas a tomar algo con amigos y os traen la cuenta. ¿Cuánto os toca
pagar a cada uno?
• TOTAL: 142€
• Personas: 6
• ¿Cómo lo habéis hecho?
https://openwebinars.net/academia/portada/javascript-principiantes/ Elaborado con cariño por Celia Gómez Profe ☺

Ej.
• Tienes que renovar tu tecnología para el nuevo curso con el sueldo del curro del verano y has elegido 3 productos:
• Un ordenador – 700€
• Unos cascos – 50€
• Un teclado mecánico – 70€
• Por ser la primera compra, en esta tienda te hacen el 10% de descuento.
• ¿Cuánto te gastas?
• a) Muestra mensajes por consola para informar
• b) Muestra mensajes por alerta
• c) Pedimos al usuario las cantidades que ha escrito por teclado
d) Vamos a escribirlo en la página web en el <p> </p>

→ Adelanto para ir metiendo cambios en la página html
https://www.w3schools.com/js/js_output.asp

c) Vamos a escribirlo en la página web en el <p> </p>
Ej.
<p id=“id_p” class=“class_p” name=“name_p”>
• Para hacer referencia a la página web desde la página javascript podemos:
• Usar la etiqueta
• document.getElementsByTagName(“p”)[x]
• Usar el identificador
• document.getElementById(“id_p”)
• Usar la clase
• document.getElementsByClassName(“class_p”) [x]
• Usar el selector .css
• document.querySelector(“#identificador”);
• document.querySelector(“.clase”);
• document.querySelector(“div > p”);
• Pero los veremos bien más adelante…
c) Vamos a escribirlo en la página web en el <p> </p>
Ej.
<p id=“id_p” class=“class_p” name=“name_p”>
• Una vez que lo tenemos, podemos utilizarlo para realizar acciones sobre él:
• Usar el identificador
• document.getElementById(“id_p”)
• Por ejemplo, escribir en ese lugar de la página web:

• document.getElementById(“id_p”). innerHTML=“Escribo algo aquí”;

• Tipo de operaciones:
• typeof variable → Nos indica el tipo de la variable variable

• Number
• String
• NaN
• isNaN(var) → Nos devuelve true o false dependiendo de si el tipo de la variable var es o no un número.
• isNaN(3)
• isNaN(“3”)
• .toString() → Cambia el tipo de una variable variable a una cadena.

• variable.toString();
• .toFixed(num) → Añade un número fijo de decimales a la variable número al que se lo apliquemos.

• variable.toFixed(num);
• Si ya tenía decimales y le pongo menos, redondea.


Ej.
• Tienes que renovar tu tecnología para el nuevo curso con el sueldo del
curro del verano y has elegido tres productos:
• Un ordenador – 700€
• Unos cascos – 50€
• Un teclado mecánico – 70€
• Por ser la primera compra, en esta tienda te hacen el 10% de descuento.
• ¿Cuánto te gastas?
• a) Muestra mensajes por consola para informar
• b) Muestra mensajes por alerta
c) Pedimos al usuario las cantidades que ha escrito por teclado

→ Adelanto para ir interactuando con la página html
c) Pedimos al usuario las cantidades que ha escrito por teclado
Ej. → Adelanto para ir interactuando con la página html
• Investiga la función prompt(“Algo aquí”);

• var objetoA = prompt(“Introduce el precio 1”);
• var objetoB = prompt(“Introduce el precio 2”);
• var objetoC = prompt(“Introduce el precio 3”);
• ¿Qué tipo de variables son cada una?

• Usa typeof objetoA;
• Prueba .isNaN(objetoA);
• ¿Qué obtienes?
• Prueba objetoA.toString();
• Prueba objetoA.toFixedNum(2);
https://www.w3schools.com/jsref/met_win_prompt.asp Elaborado con cariño por Celia Gómez Profe ☺

Tipos de datos: Strings
• Son cadenas de caracteres o texto.
• Operaciones
• Concatenar texto
• Unir textos
• Comparación de valores
• Igual que
• Distinto que
• template literals
• Se utiliza una variable en un texto fijo, que se irá sustituyendo según necesidades. `texto fijo ${VARIABLE} texto fijo`
• typeof
• .length
• Es un atributo
• .includes()
• .slice(start,end) variableX.método(parámetros)
• Empieza en cero a contar las posiciones
• .replace(“este texto”, “por este otro”)
• .trim()
• .split(“:”)

• Pide al usuario su nombre:
a) Muéstralo por consola
b) Utiliza un template literal:
c) Muestra el tipo de variable que es
d) Muestra su longitud
e) Comprueba si incluye la “pe”
f) Obtén la parte de su nombre entre la posición 2 y 5 de su nombre,

• Crea una variable:
• var frase=“ No, me, gusta, el, chocolate ”
a) Sustituye las o’s de por i’s
b) Elimina los espacios sobrantes de delante o detrás del texto
c) Recorta en un array los diferentes elementos de un string que están separados por comas

¿Qué sintaxis me estoy encontrando?
variable.función();
variable.función(parámetros);
variable.atributo;
Después de los tipos de datos veremos las funciones…


• Eres la administradora de una finca de vecinos, y tienes que publicar en la
web la información de cada vecino que se te indique por teclado.
• También te indican su edad, y en función de eso, les aplicas un descuento u
otro para el pago de la comunidad.
• var nombre
• const cuota=110€
• Descuentos:
• 0% descuento si menor de 30 años
• Descuento 10% si menor de 65
• Descuento de 30% si mayor o igual a 65
• var carta=`Hola vecina ${nombre}, tienes ${edad} años y por lo tanto, te corresponde
pagar $resultado}`
• document.getElementById(“id_p”).innerHTML=carta;
¿¿Y si quiero mantener el texto que estaba??
document.getElementById(“id_p”).innerHTML= document.getElementById(“id_p”).innerHTML+carta;
document.getElementById(“id_p”).innerHTML += carta;
Tipos de datos: Boolean
• Solo admite 2 valores: true y false
• Se usa muchísimo para comprobar estados de nuestra aplicación.
• Declaración en texto positivo

• let esIgual= (3==“3”); //no la llaméis noEsIgual
• console.log(esIgual);
• Para ver qué valor booleano toma un elemento, tenemos que:

• Boolean(elemento);
• Ej.
• let esVerdadero = Boolean(1);
• Comprobamos todos:
if (1) {
console.log(“Es verdadero”)
}
else console.log(“Es falso”)

Tipos de datos: Boolean
• Pide al usuario que te indique si está de acuerdo con algo:
• confirm("¿Estás de acuerdo con …?");
• Si obtienes un sí, cambiarás el texto de nuestra página a:
• Si la respuesta es no, el párrafo tomará el valor:

Tipos de datos: Boolean - RETO
• ¿Cómo harías para que salga una carita feliz o una carita triste en
lugar de estar de la frase o además de la frase?
https://www.w3schools.com/js/js_output.asp
https://www.w3schools.com/jsref/prop_html_innerhtml.asp Elaborado con cariño por Celia Gómez Profe ☺
Tipos de datos: Undefined
• Cuando la variable está definida pero aún no tiene su valor.
• Recordamos la diferencia entre var y let.

Tipos de datos: null
• Cuando la variable sí tiene su valor y este es null.

Tipos de datos primitivos

Comparadores – Devuelven un valor booleano
• A parte de los comparadores que ya hemos visto:
https://www.w3schools.com/js/js_comparisons.asp Elaborado con cariño por Celia Gómez Profe ☺

Operadores de comparación:
operadores lógicos
• Se utilizan para comparar en sentencias de control o bucles

Otros operadores
• let x=3;
• x+=2; //equivale a x=x+2;
• console.log(x) //x valdrá 5.
Otros operadores
• El operador += también se puede utilizar con Strings

Ejercicio

Operador ternario

Casting entre tipos
• Sirven para cambiar una variable de tipo.
• De String a Number:
• Number(variable)
• variable.parseInt()
• variable.parseFloat()
• De Number a String:
• String(variable)
• variable.toString()
Más conversiones:
https://www.w3schools.com/js/js_type_conversion.asp
“Casting entre tipos” –

Comparaciones y la coerción de js
• En javascript existen una serie de reglas que son el fundamento de la
sintaxis y la lógica interna del lenguaje:
https://jherax.wordpress.com/2014/07/05/javascript-coercion/
Comparadores y la coerción de js
• Se pueden comparar variables de

distintos tipos de datos.
• La comparación de Strings, se
hace según el orden alfabético:
• “a”<“b” → true
• “51” < “7” → true

Conversión automática
• A veces la conversión no es intuitiva:

Conversión automática
EJERCICIO: Prueba en la consola las operaciones anteriores y alguna más con la que tengas dudas
de qué devolverá.

Comparadores y la coerción de js
• Para asegurarnos que la comparación se va a hacer según lo esperado,

debemos hacer un casting de la variable al tipo que necesitemos:

Funciones
• Deberían ejecutar una sola tarea.
• Determina un entorno específico y aislado (scope)
• Variables locales y globales
• Declaración - definición:
function saludar(){
console.log(“Hola a tod@s!!”);
}
• Llamada a la función - ejecución:

saludar();

Ejecuta la función suma con dos datos introducidos
por el usuario
• Muestra el resultado.
• ¿Qué ha pasado?
• ¿Está resuelto?
• Prueba con variables definidas fuera y mostrarla dentro, dentro y

mostrarla fuera, …

Funciones: parámetros
• Las funciones pueden tener o no tener parámetros.
• Podemos ejecutar lógica con esos parámetros
• Pueden tener un valor por defecto.
• Pueden devolver valores por defecto.
• Podemos usar las funciones tantas veces como queramos.
• Haz la función suma con dos parámetros

Funciones: parámetros por defecto

Funciones con retorno de un valor
• Tiene unos datos de entrada
• Y unos datos de salida.

Funciones anónimas
• Se definen igual que las que acabamos de ver, pero no tienen nombre!!
• Se asignan a variables y se pueden utilizar posteriormente sin más que
instanciando la variable con los paréntesis y/o parámetros.
Arrow functions o funciones flecha
• Son como las funciones anónimas, pero además tras los parámetros,
añadimos un igual y un mayor que: =>
https://www.w3schools.com/js/js_arrow_function.asp

Arrays
• https://www.w3schools.com/js/js_arrays.asp

Objetos
• https://www.w3schools.com/js/js_objects.asp

Estructuras de control
Estructuras y bucles: if - else
• if - else

If - ejercicio
• Comprueba si el usuario es menor de 20 años, mayor de 30 o está en
sus 20’s.
• Utiliza el operador ternario para decidir si es mayor de edad o no.

(a<b) ? verdadero: falso

Estructuras y bucles: switch
• switch (variable){
case valor1:{
//lo que quieres que haga
break; /*Hay que escribir break; para que no siga evaluando casos, una
vez que ya haya entrado en la opción correcta.*/
}
case valor2:{
break;
}
default:{
}

switch

Switch
• También se pueden evaluar condiciones en los case:

bucles
While-do
• Se ejecuta 0 o más veces:

Do-while
• Se ejecuta 1 o más veces:

for con contador
for (let i=0; i<max; i++){
//haz algo
}
https://www.w3schools.com/js/js_loop_for.asp
for…in
• El bucle se ejecuta una vez para cada elemento del array (o propiedad
del objeto) y se crea una variable contador que toma como valores la
posición del elemento en el array.

for…in
• También nos sirve para recorrer los atributos de un objeto:

for…of
• Es similar al for…in pero la variable contador en vez de tomar como
valor cada índice toma cada elemento. Es nuevo en ES2015

for…of
• También sirve para recorrer los caracteres de una cadena.

Estructuras y bucles
• https://www.w3schools.com/js/js_if_else.asp
• https://www.w3schools.com/js/js_switch.asp
• https://www.w3schools.com/js/js_loop_for.asp
• https://www.w3schools.com/js/js_loop_while.asp

Estructura del DOM (trabajando con el DOM)

Guía para el buen código - Clean code
• https://github.com/devictoribero/clean-code-javascript
Entornos de desarrollo
• Visual Studio Core
• https://code.visualstudio.com/docs/?dv=win
• Sublime
• https://www.sublimetext.com/download_thanks?target=win-x64
• Atom
• https://atom.io/

Bibliografía
• https://www.liderit.es/aps-crm-erp-mrp-plm-scm-srm-tms-como-pueden-ayudarme-todas-estas-siglas/
• http://daw-fiec.pbworks.com/w/page/16963474/Protocolo%20HTTP
• Wikipedia
• https://lenguajejs.com/javascript/cheatsheets/#javascript
• w3schools
• Openwebinars
• https://cipfpbatoi.github.io/materials/daw/dwc/01-js/
• https://cursosgs.es/dwec/
• https://lenguajejs.com/javascript/

Conceptos de Programación

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Conceptos de Programación

Cargado por

Copyright:

Formatos disponibles

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

• CSS - Cascading Style Sheets

Elaborado con cariño por Celia Gómez Profe ☺

• En cuanto encuentra un error, sale de la ejecución del programa

ECMAScript es una especificación de lenguaje de programación publicada por Ecma International.

Ecma International es una organización internacional basada en

Elaborado con cariño por Celia Gómez Profe ☺

• Es conveniente declararlo después del contenido del body, antes de cerrarlo,

• 2º Le añadimos el encabezado donde indicamos dónde está el script

• 4º Lanzamos la página html y no pasa nada! ¿Verdad?

Elaborado con cariño por Celia Gómez Profe ☺

JS – mensajes por consola

Shift + Control + i → para abrir la consola

Elaborado con cariño por Celia Gómez Profe ☺

• var nombre_variable = valor; //Con comillas si se trata de un string.

• Podemos crear variables directamente en consola: Ctrl+ Shift + i

• Tienen un entorno de ejecución (scope)

• Genera variables de forma global

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

• Probando el entorno de ejecución de una variable var.

• Ahora una variable let.

• Crea una constante NUM_PI y muéstrala por consola.

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

• ¿Cómo lo habéis hecho?

https://openwebinars.net/academia/portada/javascript-principiantes/ Elaborado con cariño por Celia Gómez Profe ☺

d) Vamos a escribirlo en la página web en el <p> </p>

Elaborado con cariño por Celia Gómez Profe ☺

• Por ejemplo, escribir en ese lugar de la página web:

Elaborado con cariño por Celia Gómez Profe ☺

• typeof variable → Nos indica el tipo de la variable variable

• .toString() → Cambia el tipo de una variable variable a una cadena.

• .toFixed(num) → Añade un número fijo de decimales a la variable número al que se lo apliquemos.

Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

c) Pedimos al usuario las cantidades que ha escrito por teclado

• Investiga la función prompt(“Algo aquí”);

• ¿Qué tipo de variables son cada una?

https://www.w3schools.com/jsref/met_win_prompt.asp Elaborado con cariño por Celia Gómez Profe ☺

Elaborado con cariño por Celia Gómez Profe ☺

b) Utiliza un template literal:

c) Muestra el tipo de variable que es

e) Comprueba si incluye la “pe”

f) Obtén la parte de su nombre entre la posición 2 y 5 de su nombre,

Elaborado con cariño por Celia Gómez Profe ☺

a) Sustituye las o’s de por i’s

b) Elimina los espacios sobrantes de delante o detrás del texto

Elaborado con cariño por Celia Gómez Profe ☺

Después de los tipos de datos veremos las funciones…

Elaborado con cariño por Celia Gómez Profe ☺

Tipos de datos: Strings

• Declaración en texto positivo

• Para ver qué valor booleano toma un elemento, tenemos que:

Elaborado con cariño por Celia Gómez Profe ☺

• Si obtienes un sí, cambiarás el texto de nuestra página a: