Conocimientos básicos

Estructura de página web

Estructura de la página, títulos,

HTML
párrafos, imágenes, etc.

CSS Estilos de la página, colores,

fondos, tipografías, tamaños,
etc.

Interactividad con el usuario,

JS
funcionalidad de la página, lógica.

Vamos a manejar dos archivos

Archivo .js
Archivo .html
Script de la página, el
código de programación, La página, la estructura.
la lógica.

Se llama al
archivo js
desde el html
 HTML

Establece la versión del

HTML a la versión 5

Cabecera: Información que Título que aparece en la

no se muestra al usuario pestaña del navegador

Para poder escribir letras

con tildes y letra ñ

Inserta el código
JavaScript

Título visible en
página

párrafo
HTML

HEAD -> cosas no visibles

BODY -> cosas visibles

 Programación en JavaScript

Mostrar por pantalla

Siempre poner
un ; al final
Función que La ventana muestra lo
muestra la ventana que le pongamos de
emergente contenido dentro de
los paréntesis

Textos SIEMPRE
ENTRE COMILLAS

Números
El contenido puede
Ser cualquier cosa

Los dos (separados con un +)

Lo que hace el
signo + es juntar
los dos términos
El número es 10
Imprimir en consola
Imprimir significa escribir. Se trata de escribir mensajes por la consola del
navegador.
Los mensajes no se muestran al usuario, porque son mensajes que no les
importa. Estos mensajes son importantes solo para programadores.

Usar F12 para hacer aparecer la consola.

Funciona exactamente igual que el alert()

Incluso te dice el archivo js que

hacer la impresión y te dice en qué
línea del código se manda a escribir
(en este caso la línea 9)
 Variables
Son como cajas que guardan datos (nombres, edades, medidas, etc).
Se le asigna un nombre, un valor y un tipo de dato.

Edad Edad Edad

20 21 22

El valor de la variable Edad puede cambiar

a lo largo del código. Es decir, tenemos la
posibilidad de cambiar el valor

Tipos de datos
El tipo del dato de la variable es asignado automáticamente según el valor que
tenga. Es decir, el lenguaje ante de guardar la variable, detecta de qué tipo es y
define la variable con ese tipo y luego guarda el valor.

Y establece que
edad guarda datos El lenguaje detecta al
de tipo número 20 como un número
Y guarda el valor (Si tuviera comillas, la detecta
como texto)

Siempre que escribamos

let antes del nombre de
la variable, el lenguaje
interpreta que se está
creando una nueva
variable
 typeof(nombre) deja
como resultado el tipo
de la variable que le
Lo que hace el lenguaje
demos dentro de los
paréntesis

Alert( “el tipo de la variable nombre es ” + “string” + “ y el valor es: ” + “Pablo”);

Lo que muestra el código

 Entrada de datos con prompt()
La función prompt() pausa la página y muestra una ventana emergente, donde
espera a que el usuario ingrese algo por teclado para guardarlo en una variable.

El prompt tiene dos botones: aceptar y cancelar. Si se presiona en aceptar, se

envía lo que se haya escrito por teclado. Si se presiona cancelar, Se envía un
valor llamado null. Este valor significa vacío.

Números, textos, etc.

Básicamente, una undefined: que significa que es una

variable puede tener variable creada, pero que no tiene
tres tipos de valores valor ni tipo definido. Solo se creó,
pero queremos que tenga un valor

null: que significa que es una variable vacía y que

queremos que esté vacía. (intencionalmente vacía)

Imagen que sirve para entender la diferencia

entre null (intencionalmente vacío)

Y undefined (no existe el valor)

Código de prompt

Ingreso: hola

El lenguaje agarra el
“hola” que ingresé

Let variable = “hola”; Y lo guarda en la

variable

Conversión de variables
Por defecto, la función prompt guarda todos los datos como si fueran un texto.
Para guardar números hay que convertirlos a lo que son, números.

Es decir

“20” 20

Convertir esto A esto

 Para convertir un texto a entero usamos la función parseInt() El cual va a
convertir en entero la variable que le demos como argumento dentro de los
paréntesis.
Si se quiere convertir un texto a float (con coma flotante) se debe de usar la
función parseFloat().

Supongamos que quiero ingresar el número 5

let numero 1 = parseInt( “5” );

let numero 1 = 5;
Lo que hace el lenguaje es agarrar lo que se ingresó
en el prompt (en este caso 5) y por defecto deja el
resultado como un texto (sería “5”). Luego lo
convierte a entero y lo guarda en la variable como si
fuera un número entero