Contenido

1. INTRODUCCION: ................................................................................................................... 3
EJERCICIO 1: Emplear JavaScript dentro de html .................................................................... 3
EJERCICIO 2: Emplear JavaScript fuera de html con un archivo externo. ............................... 3
2. VARIABLES ............................................................................................................................ 4
EJERCICIO 1: Mostraremos una alerta empleando variables. ................................................... 4
EJERCICIO 2: Mostraremos una alerta empleando variables.................................................. 4
EJERCICIO 3: Mostraremos el nombre de una persona en la pagina. ..................................... 5
EJERCICIO 4: Mostraremos el nombre de una persona en la consola. ................................... 5
EJERCICIO 5: Obtendremos dos datos uno es el nombre y el otro la edad y lo imprimeros
en la pagina............................................................................................................................... 6
3. TIPOS DE DATOS ................................................................................................................... 8
EJERCICIO 1: Crearemos variables y lo imprimiremos en el documento, en muchas lineas
de codigo dentro de document.write(), se coloca un salto de linea <br/>. ........................... 8
4. FUNCIONES ........................................................................................................................... 9
La reutilización de código con las funciones................................................................................ 9
A. Ejercicio 1: Trabajando con las funciones básicas ........................................................... 9
B. Ejercicio 2 ........................................................................................................................ 10
En este segundo ejercicio vamos a ingresar la información por los para metro y se
imprimirá en la consola del navegador. ................................................................................ 10
5. ALCANDE DE LAS FUNCIONES............................................................................................. 12
A. Ejercicio 1 ........................................................................................................................ 12
B. Ejercicio 2 ........................................................................................................................ 13
6. ARREGLOS ........................................................................................................................... 14
EJERCICIO 1: Crearemos un arreglo, imprimiremos el valor de un arreglo, modificaremos el
valor de un arreglo e imprimiremos todos los valores del arreglo para ver el cambio. ...... 14
7. MÉTODOS Y PROPIEDADES CON ARREGLOS ................................................................. 14
8. CONDICIONALES ................................................................................................................. 16
EJERCICIO 1: Según el nombre en la condicional saludarà a una persona o un aninimo. ... 16
EJERCICIO 2: Crearemos una condicional que te emita un mensaje si tienes 18 o no tienes
18, pero existirà otra condicional que te permitirà ingresar si cumples con el nombre
correcto. .................................................................................................................................. 16
EJERCICIO 3: Crear un programa que te permita ingresa siempre y cuando sea mayor de
edad y el nombre del usuario sea correcto. .......................................................................... 17
EJERCICIO 4: Crear un programa que te permita ingresa siempre y cuando sea mayor de
edad o el nombre del usuario sea correcto. .......................................................................... 18
 EJERCICIO 5: Usaremos una condicional y esta se ejecutarà si la variable tiene un dato o
no. ........................................................................................................................................... 18
EJERCICIO 6: Usaremos una condicional y esta se ejecutarà si la variable no solo es el
mismo numero sino que tambien sean del mismo tipo. ...................................................... 19
9. CICLOS ................................................................................................................................. 20
EJERCICIO 1: Imprimir Hola mundo 9 veces........................................................................... 20
EJERCICIO 2: Imprimir valor del 1 al 9 .................................................................................... 20
 CURSO JAVASCRIPT

1. INTRODUCCION:

EJERCICIO 1: Emplear JavaScript dentro de html

Empleando Visual Studio Code, creamos una carpeta y dentro de esta creamos un
archivo llamado “introduccion.html”

Este archivo empleará codigo javascript dentro del html y ejecutará una alerta y
despues mostrará el sitio web.

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
alert("Jorge");
</script>
<h1>Sitio Web</h1>
</body>
</html>

EJERCICIO 2: Emplear JavaScript fuera de html con un archivo externo.

a. Realizamos el codigo del archivo introduccion.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Sitio Web</h1>
<script src="intro.js"></script>
</body>
</html>
 b. Realizamos el codigo del archivos intro.js

alert("Nueva Alerta");

2. VARIABLES

EJERCICIO 1: Mostraremos una alerta empleando variables.

a. Creamor el archivo index.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Sitio Web</h1>
<script src="variable.js"></script>
</body>
</html>

b. Creamos un archivo variable.js, el cual contendrpa el codigo javascript

var nombre = "Carlos";

alert(nombre);

EJERCICIO 2: Mostraremos una alerta empleando variables.

a. Creamor el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="variable.js"></script>
</body>
</html>
b. Creamos un archivo variable.js, en este codigo almacenaremos en una variable el
nombre de una persona ingresado por un campo de texto con el prompt y
finalmente emitiremos una alerta con el nombre.

var nombre;

nombre = prompt("Ingresa tu nombre");

alert(nombre);

EJERCICIO 3: Mostraremos el nombre de una persona en la pagina.

a. Creamos el archivo llamado index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="variable.js"></script>
</body>
</html>

b. Creamos un archivo llamado variable.js, el cual recibirá un nombre empleando el

prompt y luego lo mostrará impreso en la pagina web.

var nombre;

nombre = prompt("Ingresa tu nombre");

document.write(nombre);

EJERCICIO 4: Mostraremos el nombre de una persona en la consola.

a. Creamos el archivo llamado index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="variable.js"></script>
</body>
</html>

EJERCICIO 5: Obtendremos dos datos uno es el nombre y el otro la edad y lo

imprimeros en la pagina.

a. Creamos el archivo index.html que llamara al archivo javascript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="variable.js"></script>
</body>
</html>

b. Creamos el archivo variable.js

var nombre;

nombre = prompt("Ingrese el nombre");

edad= prompt("Ingrese la edad");

document.write(nombre+" "+ edad);

 c. Mandando el dato a la consola
Index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<script src="ejercicio6.js"></script>
</body>

</html>

ejercicio6.js
d. console.log('Hola mundo JS!s');

Ejecucion
 3. TIPOS DE DATOS

EJERCICIO 1: Crearemos variables y lo imprimiremos en el documento, en muchas

lineas de codigo dentro de document.write(), se coloca un salto de linea <br/>.

a. Creamos el archivo index.html que llamara al archivo javascript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="tipos.js"></script>
</body>
</html>

b. Creamos el archivo tipos.js

//Tipos de datos

// Numerico - float
var edad = 19;

// String - Cadena de texto

var nombre = "Carlos";
var apellido = "Arturo";
var texto = "<br/>Esta es una prueba de \"COMILLAS SIMPLES\"";

document.write(nombre+ " " + apellido);

document.write(texto);

// Array - Arreglo
var amigos = ["Carlos", "Alejandro", "Cesar"];
document.write("<br/>"+amigos[0]);
 // Object - Objeto
var objeto = {
color: "black",
size: 12
}

// Boolean - Boleano
var boleano = true;

// Undefined
var variable;
var variable2;
document.write("<br/>"+variable);

// Null
var numero2 = 10; //Le damos un dato 10
var numero2 = null; //Cuando queremos establecer en nulo ya que ha si
do rellenado antes

// NaN - Nos indica cuando hay un error en aplicaciones

var texto2 = "Hola como estas?";
document.write("<br/>"+texto2 * 2);

4. FUNCIONES
La reutilización de código con las funciones
Creamos dos archivos uno es index.html y el otro es string.js donde en idenx.html se
colocará.

A. Ejercicio 1: Trabajando con las funciones básicas

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<script src="string.js"></script>

</body>

</html>
En string.js se colocará la siguiente función

Para realizar ` ` se colocará con el alt+96

Ya creadon la función imprimirEdad() estaremos llamándolo como se muestra en la imagen

var nombre = 'david', edad = 22

function imprimirEdad() {
// el cuerpo de la funcion
console.log(`${nombre} tiene ${edad} año`)
//tengo un problema con la codificacion de los codigos arrglar
}
imprimirEdad();

B. Ejercicio 2
En este segundo ejercicio vamos a ingresar la información por los para metro y se
imprimirá en la consola del navegador.

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<script src="string.js"></script>

</body>

</html>

String.js

// var nombre = 'david', edad = 22

function imprimirEdad(nomb, ed) {

// el cuerpo de la funcion
console.log(`${nomb} tiene ${ed} año`)
//tengo un problema con la codificacion de los codigos arrglar
}
imprimirEdad(nombre, edad);
Solucion:
 5. ALCANDE DE LAS FUNCIONES

A. Ejercicio 1

Cambiaremos de una letra minúscula a una mayúscula

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="variable.js"></script>
</body>
</html>

variable.js aplicando el código toUpperCase que me permitirá el cambio a mayuscula

var nombre = 'david'  variable global

function imprimirNombreEnMayusculas(){
nombre = nombre.toUpperCase()
console.log(nombre)

}
imprimirNombreEnMayusculas();

resultado
 B. Ejercicio 2

Cuando le coloquemos un parámetro a lo resuelto anteriormente, nos daremos cuenta de que

las variables dentro de la función no salen de ella, pero si la ponemos fuera de la función si nos
serviría a esta se le denomina variable global

var nombre = 'david'

function imprimirNombreEnMayusculas(nombre){

nombre = nombre.toUpperCase()

console.log(nombre)

imprimirNombreEnMayusculas(nombre);
 6. ARREGLOS

EJERCICIO 1: Crearemos un arreglo, imprimiremos el valor de un arreglo,

modificaremos el valor de un arreglo e imprimiremos todos los valores del arreglo
para ver el cambio.

a. Creamos el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="arreglos.js"></script>
</body>
</html>

b. Creamor el archivo arreglos.js

//CREANDO ARREGLOS
var amigos = ["Carlos", "Cesar", "Alex"];

//Imprimir el valor de un arreglo por su indice

document.write(amigos[0]);

//Cambiar el valor de un arreglo por su indice

amigos[2] = "Jorge";

//Imprimir el arreglo para ver el cambio

document.write("</br>"+amigos);

7. MÉTODOS Y PROPIEDADES CON ARREGLOS

EJERCICIO 1: Crearemos arreglos y emplearemos métodos para concatenarlos, agregar

valores, eliminar valor, modificar valores.

a. Creamos el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="metodos.js"></script>
</body>
</html>

b. Creamos el archivo metodos.js

//CREAMOS UN ARREGLO
var amigos = ["Carlos", "Cesar", "Alex"];
var amigos2 = ["Carlos", "Antonio", "Oscar"];

//Concatenar arreglos
var amigos3 = amigos.concat(amigos2);

//Imprimimos por consola al arreglo concatenado

console.log(amigos3);

//Obtener el tamaño de un arreglo

console.log("Tienes "+amigos.length +" amigos");

//Agregar un elemento adicional

amigos[amigos.length] = "Fernando";

//Imprimimos el arreglo por consola

console.log(amigos);

//Otra forma de agregar elementos a un arreglo

amigos.push("Luis", "Hernando", "Saul");

//Imprimimos el arreglo por consola

console.log(amigos);

//Eliminamos el ultimo elemento de mi arreglo

amigos.pop();

//Imprimimos el arreglo por consola

console.log(amigos);

//Imprimir un valor del arreglo por su indice

console.log(amigos[5]);

//Separar los valores de un arreglo

document.write(amigos.join(" : "));
//Ordenar los elementos de un arreglo
var ordenados = amigos.sort();
console.log(ordenados);

8. CONDICIONALES

EJERCICIO 1: Según el nombre en la condicional saludarà a una persona o un

aninimo.

a. Creamos el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="condicionales.js"></script>
</body>
</html>

b. Creamos el archivo condicionales.js

var nombre = "Carlos",

edad = 19;

if(nombre == "Carlos"){
document.write("Bienvenido" + nombre);
}else{
document.write("Bienvenido anonimo");
}

EJERCICIO 2: Crearemos una condicional que te emita un mensaje si tienes 18 o no

tienes 18, pero existirà otra condicional que te permitirà ingresar si cumples con el
nombre correcto.

a. Creamos el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="condicionales.js"></script>
</body>
</html>

b. Creamos el archivo condicionales.js

var nombre = "Arturo",

edad = 19;

if(edad == 18){
document.write("Bienvenido, tienes 18");
}else if(nombre == "Arturo"){
document.write("Bienvenido "+nombre);
}else{
document.write("No tienes 18 años");
}

EJERCICIO 3: Crear un programa que te permita ingresa siempre y cuando sea

mayor de edad y el nombre del usuario sea correcto.

a. Creamos el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="condicionales.js"></script>
</body>
</html>

b. Creamos el archivo condicionales.js

var nombre = "Arturo",

edad = 18;

if(edad >= 18 && nombre == "Carlos"){

document.write("Bienvenido, eres mayor de edad");
} else{
document.write("No estas permitido");
}

EJERCICIO 4: Crear un programa que te permita ingresa siempre y cuando sea

mayor de edad o el nombre del usuario sea correcto.

a. Creamos el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="condicionales.js"></script>
</body>
</html>

b. Creamos un archivo condicionales.js

var nombre = "Arturo",

edad = 18;

if(edad >= 18 || nombre == "Carlos"){

document.write("true");
}else{
document.write("False");
}

EJERCICIO 5: Usaremos una condicional y esta se ejecutarà si la variable tiene un

dato o no.

a. Creamos el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="condicionales.js"></script>
</body>
</html>
b. Creamos el archivo condicionales.js

var nombre = "Arturo",

edad = 18;

if(nombre){
document.write("OK");
}

EJERCICIO 6: Usaremos una condicional y esta se ejecutarà si la variable no solo es

el mismo numero sino que tambien sean del mismo tipo.

a. Creamos el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="condicionales.js"></script>
</body>
</html>

b. Creamos un archivo condicionales.js

var nombre = "Arturo",

edad = 18;

// == EVALUA SOLO EL NUMERO Y DA OK

// === EVALUA EL NUMERO Y EL TIPO Y DA NO OK

if(edad === "18"){

document.write("OK");
}else{
 document.write("NO OK");
}

9. CICLOS

EJERCICIO 1: Imprimir Hola mundo 9 veces

a. Creamos el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="ciclos.js"></script>
</body>
</html>

b. Creamos el archivo ciclos.js

for(var i = 0; i<=9; i++){

document.write("Hola mundo </br>");
}

EJERCICIO 2: Imprimir valor del 1 al 9

a. Creamos el archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="ciclos.js"></script>
</body>
</html>

b. Creamos el archivo ciclos.js

for(var i= 1; i<=9; i++){

document.write(i + "</br>");
}