Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Curso Introductorio de Javascript - 1-1
Curso Introductorio de Javascript - 1-1
CURSO DE JAVASCRIPT
1 INSTALACIÓN
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.
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
Aurelio López Ovando - Javascript
Deberás arrastrarla y soltarla en el escritorio de VS Code y con esto ya podrás comenzar a codificar.
Para organizar nuestro proyecto vamos a usar estos dos botones que nos permiten crear archivos y carpetas:
El archivo principal siempre se debe llamar index.html, debemos escribirlo con todo y extensión y en
minúsculas
2
Aurelio López Ovando - Javascript
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.
Ejercicio 1
<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.
<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.
3
Aurelio López Ovando - Javascript
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
Aurelio López Ovando - Javascript
Ejercicio 2
Saludo.js
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>
5
Aurelio López Ovando - Javascript
alert(1 + 3 * 2)
[1, 2, 3, 4].forEach(alert)
Ejercicio 3
DEFINICIÓN DE DATOS
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:
6
Aurelio López Ovando - Javascript
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);
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.
7
Aurelio López Ovando - Javascript
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.