Curso de Javascript 1 Instalación: Aurelio López Ovando - Javascript

Aurelio López Ovando - Javascript
CURSO DE JAVASCRIPT
1 INSTALACIÓN
1. Descargar Visual studio Code desde: https://code.visualstudio.com e instalarlo.

2. Una vez instalado debemos Instalar la extensión Live Server que nos servirá como servidor de pruebas
a. Entrar a la pestaña de extensiones
b. Escribir en la barra del buscador la palabra “Live server”
c. Una vez encontrado ya se puede instalar.
Durante el curso iremos se irán presentando una serie de problemas que deberá ir resolviendo utilizado Javascript.
Mientras se resuelven se irán abordando conceptos que se explicarán mientras lo vamos aplicando.
No es un curso de HTML asi que no se tomarán conceptos relacionados a este leguaje a pesar de que lo usaremos
regularmente durante el curso.
2 CREAR UN PROYECTO DE PRUEBA
1. Para manejar los proyectos necesitamos una carpeta de trabajo en cualquier parte del disco duro (No
hacerlo en la memoria USB).
2. Dentro de esa carpeta iremos creando una subcarpeta para cada ejercicio, en muchos casos se va a
reutilizar el mismo proyecto para darle continuidad a los temas.
3. Para abrirlo desde VS Code lo que haremos será arrastrar la carpeta del ejercicio y soltarla sobre la
ventana de VS Code.
Ejemplo:
Para este ejemplo mi carpeta de trabajo la tengo en la Mis Documentos y se llama “cursoJS”. Dentro de esta he creado
una subcarpeta llamada Ejercicio1
1
Deberás arrastrarla y soltarla en el escritorio de VS Code y con esto ya podrás comenzar a codificar.
Para organizar los archivos de nuestro proyecto vamos a usar estos dos botones:
Crear el archivo para codificar, se debe llamar index.html, debemos escribirlo con todo y extensión
Vamos a agregar este código, tal como se ve en la imagen
2
Damos click derecho sobre index.html y escogemos la opción “Open with Live Server”
Se nos debe abrir con un navegador en un servidor local asignándole un puerto el cual puede cambiar de una
máquina a otra.
Estamos listos para comenzar el curso
Reto inicial: Crear un proyecto llamado “NombreJS”que muestre tu nombre en un navegador

usando Live server tal como se mostró en el ejercicio anterior.
Ejercicio 1
Etiquetas básicas HTML
<!DOCTYPE html> Informa del tipo de documento, en este caso HTML.
<html></html> Engloba todo el código de nuestra página. Es la etiqueta principal.
<head></head> Indica que esto es la cabecera. Dentro de estas etiquetas se meterá información no visual salvo el título
de la página. Aquí irían todos los enlaces a nuestros archivos CSS y Javascript aunque es recomendable cargar estos
archivos al final de nuestro archivo HTML. Esto es debido a la optimización de la carga de nuestra web.
<title></title> Título de la página. Es lo que aparece en la pestaña del navegador.
<body></body> Quizás la etiqueta más importante que tiene HTML. Dentro de esta etiqueta vamos a meter todos los
elementos visuales de nuestra web.
Practica con los siguientes dos fragmentos de código:
3
En este último ejemplo ya comenzamos a ver un pequeño fragmento de javascript lo cual poco a poco a lo
largo del curso los iremos expandiendo.
4
Ejercicio 2
CONSIDERACIONES INICIALES PARA JAVASCRIPT
1.- Javascript no es Java, se parecen pero nada más en el nombre.

2.- Script es un guion como el que usan los actores, se dedica a hacer una cosa o una serie de cosas
en un lugar y contexto específico.
3.- Es un lenguaje de programación interpretado, no compilado, no lo ejecuta el sistema operativo
sino un navegador.
4.- Es imperativo, es decir, hace las cosas secuencialmente.
5.- Es CASE SENSITIVE, distingue entre mayúsculas y minúsculas
6.- Es orientado a objetos.
7.- Tipado débil, los tipos de datos pueden mutar a lo largo del programa.
Una persona es nueva en el vecindario y se quiere presentar. Para presentarse usaremos el

comando alert, podemos usar document.write o console.log.
1. Crear un nuevo archivo llamado Saludo.js
2. Invocarlo desde el index.html
3. Probarlo en el servidor local.
Saludo.js
alert("Hola me llamo Benny")

document.write(“Hola me llamo Benny”)
console.log(“Hola me llamo Benny”)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Saludo.js"></script>
<title>Document</title>
</head> Agregar esta línea para
<body> invocar el javascript
</body>
</html>
Para alert probemos con

5
• alert(1 + 3 * 2)
• [1, 2, 3, 4].forEach(alert)
Ejercicio 3
DEFINICIÓN DE DATOS
Podemos definir datos mediante: var, let y const
1. La primera diferencia es que let y var son variables y const es constante.

2. La segunda diferencia es que entre let y var hay diferencia en el alcance, let tiene menos alcance que var.
Existen 7 tipos de datos en JS
• String Cadenas de texto.

• Number Valores numéricos.
• Boolean Representa una entidad lógica y puede tener dos valores: true y false.
• null Es un valor asignado tiene el valor de “no valor”.
• NaN No es un número
• undefined Una variable a la que no se le ha asignado ningún valor tiene el valor undefined.
• Symbol Nuevo en ECMAScript 2015.
• Object Un valor en memoria al que podemos acceder por un identificador.
Como JS maneja un tipado débil no es necesario definir el tipo de dato a usar, lo que si se puede hacer es inicializar la
variable con un datos o dejar el nombre de la variable sin inicializar.
Ejemplo:
var nombre = “Benny”

let edad = 17
let estatura = 1.70
var COVID = false
const pi = 3.14.16
const fechaNac = ’10-02-2000’
Las cadenas de texto pueden inicializarse usando “ ”, ‘ ‘, ´ ´
OPERADORES ARITMETICOS OPERADORES LOGICOS OPERADORES DE COMPARACION
Addition +, AND ( & ) == Igual
Subtraction -, OR ( | ) === Estrictamente igual

!= Diferente
Multiplication *, XOR ( ^ )
Division /, NOT ( ~ ) !== Estrictamente diferente
Remainder %, LEFT SHIFT ( << ) > Mayorque
Exponentiation **. RIGHT SHIFT ( >> ) < Menor que
ZERO-FILL RIGHT SHIFT ( >>> ) >= Mayor o igual

<= Menor o igual
6
Una persona necesita saber el nombre de sus compañeros. El ejercicio consiste en preguntar esa información y acto
seguido saludar con el nombre que le digan. Para pedir un dato usaremos la instrucción Prompt
Saludo.js
var nombre
nombre = prompt("¿Como te llamas?")
alert("Hola " + nombre)
document.write(“Hola ” + nombre)
console.log(“Hola ” + nombre)
prompt() es un método de javascript que se usa para mostrar un cuadro de diálogo con un mensaje que solicita al
usuario que ingrese algún texto o información. Sintaxis. result = prompt(message, default);
var respuesta = prompt('¿Cómo te llamas?', ‘Sin respuesta')
Variable donde guarda la Si el usuario no responde nada,

Texto que le indica al usuario regresa este texto de manera
respuesta
lo que debe responder predeterminada
Ejercicio 3
Benny debe validar en caso de que no escriban nada y responder con un “Disculpa, no escuché tu nombre, pero hola”
Saludo.js
var nombre
nombre = prompt("¿Como te llamas?")
if(nombre.length == 0){
alert("Disculpa, no escuché tu nombre... pero HOLA")
}else{
alert("Hola " + nombre)
}
Ejercicio 4
Benny debe ir a la tienda a comprar, solo lleva $10 y debe comprar un refresco, ojalá le alcance el dinero y le den su
cambio correctamente, de lo contrario Benny debe saber cómo responder.
• Crear un nuevo archivo compra.js

• Invocarlo desde el index.html
7
• Hacer pruebas en Live Server
const MIDINERO = 10.00

var precio
precio = prompt("Hola, ¿Que precio tiene la fanta?")

//Preguntamos si el precio no sobrepasa mi dinero
if(precio > MIDINERO)
document.write("No me alcanza, regreso más tarde... muchas gracias")
else{
let respuesta = confirm(`Tenga ${MIDINERO} ¿Debo esperar mi cambio?`)
console.log(respuesta)
if(!respuesta && (precio < MIDINERO)){
document.write(`Que mentiroso eres, dame mi cambio de ${MIDINERO - precio} pesos`)
}else{
document.write("Muchas gracias")
}
}
Reto 1 Modificar el problema anterior, tal que Benny pueda saber para cuantos refrescos
le alcanza tomando en cuenta el precio y el dinero que lleva.

Curso de Javascript 1 Instalación: Aurelio López Ovando - Javascript

Cargado por

Información del documento

Título original

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

Curso de Javascript 1 Instalación: Aurelio López Ovando - Javascript

Cargado por

Copyright:

Formatos disponibles

Aurelio López Ovando - Javascript

1. Descargar Visual studio Code desde: https://code.visualstudio.com e instalarlo.

2 CREAR UN PROYECTO DE PRUEBA

Vamos a agregar este código, tal como se ve en la imagen

Estamos listos para comenzar el curso

Reto inicial: Crear un proyecto llamado “NombreJS”que muestre tu nombre en un navegador

Etiquetas básicas HTML

<!DOCTYPE html> Informa del tipo de documento, en este caso HTML.

<html></html> Engloba todo el código de nuestra página. Es la etiqueta principal.

<title></title> Título de la página. Es lo que aparece en la pestaña del navegador.

Practica con los siguientes dos fragmentos de código:

CONSIDERACIONES INICIALES PARA JAVASCRIPT

1.- Javascript no es Java, se parecen pero nada más en el nombre.

Una persona es nueva en el vecindario y se quiere presentar. Para presentarse usaremos el

alert("Hola me llamo Benny")

Para alert probemos con

Podemos definir datos mediante: var, let y const

1. La primera diferencia es que let y var son variables y const es constante.

Existen 7 tipos de datos en JS

• String Cadenas de texto.

var nombre = “Benny”

OPERADORES ARITMETICOS OPERADORES LOGICOS OPERADORES DE COMPARACION

Addition +, AND ( & ) == Igual

Subtraction -, OR ( | ) === Estrictamente igual

Remainder %, LEFT SHIFT ( << ) > Mayorque

Exponentiation **. RIGHT SHIFT ( >> ) < Menor que

ZERO-FILL RIGHT SHIFT ( >>> ) >= Mayor o igual

var respuesta = prompt('¿Cómo te llamas?', ‘Sin respuesta')

Variable donde guarda la Si el usuario no responde nada,

• Crear un nuevo archivo compra.js

• Hacer pruebas en Live Server

const MIDINERO = 10.00

precio = prompt("Hola, ¿Que precio tiene la fanta?")

También podría gustarte