CENTRO DE DISEÑO Y METROLOGÍA

Objetivo: Conocer el lenguaje JavaScript

Por favor siga los pasos que se describen a continuación:

o Ingrese al siguiente enlace: https://codecombat.com/

o Cree una cuenta con el rol estudiante.

o Seleccione un avatar y de clic en empezar a jugar.

o Posteriormente de clic en home (casa)
o Luego de clic en el botón continuar juego o jugar.
o Deberá observar lo siguiente:

o De clic en jugar el nivel llamado Mazmorra de Kithgar

 o Deberá completar el nivel de la mazmorra de Kithgar y realizar captura de pantalla conquistando el nivel
y mostrar su nombre en ella.

De respuesta a lo siguiente:

• Después de jugar en codecombat que se puede decir que es una sintaxis y un parámetro, de ejemplos al respecto
con base al juego. ¿Cuáles serían las variables, bucles y cadenas?
• ¿En qué consiste el lenguaje de programación JavaScript?
• ¿Qué es un evento y qué es un método en programación?

Posteriormente se socializarán los temas tratados en esta actividad y se tendrá en cuenta la misma para puntos adicionales
o de recuperación de las actividades.
RESUMEN DE PROGRAMACIÓN PARA JAVASCRIPT

Luego de haber realizado la actividad de Code Combat, tenga en cuenta el siguiente resumen:

● Escribir comentarios en el código:

Un comentario es una parte del código que no se va a ejecutar, como si no existiera, pero se usa para
escribir notas alrededor del código.

Escribir dos barras y lo que se escribe después es un comentario. Ejemplo:

//Esto es un comentario en JavaScript

Si quiero escribir más de una línea de comentario se empieza con /* y se termina con */. Por ejemplo:
/*Este es un comentario que tiene
Varias líneas de explicación.
*/

● Variables:

Las variables es lo que se usa para guardar información temporalmente y operar con ella. Por ejemplo,
si un jugador ha conseguido 100 puntos, se necesita guardar ese número en una variable.

Hay varios tipos de variables, pero los principales a saber son: String (cadena de texto),
number(números) y boolean (true o false).

Para declarar una variable se tiene que escribir la palabra clave var y el nombre de la variable.

El punto y coma al final es el fin de la instrucción.

Ejemplo de number:
var iva=19;
var total= 180.62;

Ejemplo de String:
var mensaje="Ejemplo de String";
var nombre;

Ejemplo de Boolean:
var clienteRegistrado=false;
var suscrito=true;

Array es una colección de variables de un mismo tipo.

Ejemplo de array:
Guardar tres nombres diferentes: var nombres=["Ana","Luis","Jorge"];
var fruta = [];

Un array cuenta los elementos desde el índice 0 o contar desde 0. Para acceder al dato del array, se
tiene el siguiente ejemplo:

Asignar el nombre del protagonista en el juego.

var nombres=["Ana","Luis","Jorge"];
var nombreProtagonista;
nombreProtagonista=nombres[0];

● Tipos de datos en JavaScript:

Consultar enlace: Clic aquí

● Operadores condicionales principales:

If se utiliza para decir si esto es cierto, haz esto.

Ejemplo:
var admitido=false;
if ( admitido == true) {//se puede utilizar los operadores lógicos AND(&&), OR(||) NOT(!)
alert ("Se ha admitido el valor");
// "alert es una función del lenguaje de programación JavaScript que devuelve un cuadro de
alerta
} else {
alert ("No se ha admitido el valor");
}

while: Se le dice al código que se quiere repetir algo hasta que se deje de cumplir la condición.

var letra = "";

while (letra !== "x") {
letra = prompt("Introduzca la letra x para salir:");
console.log(letra);
}

Explicación: Se pide al usuario que elija una letra, y la muestra por consola. La ventana de entrada de
datos se vuelve a abrir hasta que el usuario introduzca la letra "x". Es imposible saber cuántas veces va
a tardar el usuario en escribir la letra "x".

For: Es como un whie pero controlando cuantas veces se ejecuta el código que contiene. En el
paréntesis del for se escriben 3 sentencias, separadas por un punto y coma.

La primera inicializa la variable que se va a usar para contar las veces que se repite el bucle, se le dice
que empiece en cero, en programación se cuenta desde cero. (i=0)
La segunda sentencia es la condición que se tiene que cumplir para que el bucle se repita. (i<3).
La tercera sentencia es como va a cambiar la variable cada vez que se ejecute, por ejemplo, sumarle 1
a i. (i++).

var paso;
for (paso = 0; paso < 5; paso++) {
// Se ejecuta 5 veces, con valores desde paso desde 0 hasta 4.
console.log('Dando un paso al Este');
};
El for es util para recorrer arrays.

• Una función es cuando se necesita realizar una acción y llamarla cada vez que se necesita. Cuando se
llama, debe escribirse el nombre de la función y los paréntesis.

var num1 = 20,

num2 = 3;
function multiplicar() {
return num1 * num2;
}
console.log(multiplicar());//muestra en consola el valor que devuelva la función multiplicar.

A veces la función debe hacer las operaciones con el valor que le envíen o parámetros, en el caso dado
a continuación, se llama a la función y se le envía el número 5.

function square(number) {//number es la variable o valor que va a recibir.

//Cuando es llamada la función, le pasan el dato, en este caso el número 5.
return number * number;
 }
var resultado=square(5);//llama a la función y le envía la variable con valor 5.
console.log(resultado);

DESCRIPCIÓN DEL INSTRUCTIVO:

A continuación, deberá realizar las actividades indicadas y responder a cada una de las preguntas (resaltadas
en amarillo).

La evidencia por entregar en la plataforma es la siguiente:

1. Documento con normas APA en el cual presenta el desarrollo del taller y da respuesta a cada pregunta
o indicación planteada.
2. Archivo .zip o .rar de los archivos generados de los casos planteados (.html, .css. js)

PROGRAMACIÓN ORIENTADA A EVENTOS: UNIENDO HTML, CSS Y JAVASCRIPT

Un evento se produce cuando el usuario ha producido una determinada acción, como, por ejemplo, hacer clic en
un componente o redimensionar una ventana. Para ello, en esta ocasión se utilizará HTML, CSS y JavaScript
para permitir al usuario estas acciones.

¿Qué es HTML?

Es un lenguaje de marcas para formatear y estructurar un documento, que puede leerse en cualquier navegador.
<html>...</html>

Responda a lo siguiente:

1. ¿Qué editores de html existen?

2. Ingrese a Sublime o realice el código que se muestra a continuación en el bloc de notas y guárdelo con
la extensión .html.

Ejecute el html en el navegador, (dar doble clic en el archivo).

Explique a continuación que significa cada etiqueta del código:

Etiqueta HTML Descripción

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>T[itulo del documento</title>
</head>
<body>
Mi primera página
</body>
</html>
La siguiente es la estructura de HTML en este caso en su versión 5.

3. De acuerdo con la estructura anterior, el material de apoyo y su investigación. Ingrese a la siguiente

página: https://www.deprisa.com/
Realice captura de pantalla y con un editor sea Word o Paint, señale donde se encuentran las
estructuras de la página. Por ejemplo, indicar cual es el footer.

¿Qué es CSS?

Hojas de estilo en cascada, es un lenguaje para especificar cómo los documentos (HTML) se presentan a los
usuarios.

Enlace de apoyo: https://uniwebsidad.com/libros/css/capitulo-1

4. ¿Qué es un selector en CSS? De ser necesario puede contextualizar con un ejemplo.

5. En un bloc de notas escriba lo siguiente:

Guárdelo con el nombre pruebaEnlace y la extensión .html dentro de una carpeta llamada tallerPOE
Luego en otro bloc de notas escriba la siguiente instrucción de css:
 Guarde el archivo con el nombre: estilo y la extensión .css en la misma carpeta que se encuentra el
archivo pruebaEnlace.html

Ahora de clic sobre el archivo pruebaEnlace y modifique el código con lo que se muestra a
continuación:

Guarde el archivo, recuerde la extensión para ese archivo es .html.

6. Describa en que consiste cada uno de los siguientes atributos de la expresión:

<link rel=stylesheet href="estilo.css" type="text/css" media=screen>
7. Ejecute el archivo pruebaEnlace en el navegador y escriba cual ha sido el cambio y porqué ha
sucedido.
8. ¿Qué pasaría si el archivo css cambia de nombre a pruebaCSS?, si se genera un error como podría
solucionarlo?

¿Qué es JavaScript?

Ingrese al siguiente enlace:

https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript

9. Mencione algunos editores de HTML, CSS y JavaScript

En síntesis a continuación se muestra como es la interacción entre HTML, CSS y Java Script:
https://d2v4zi8pl64nxt.cloudfront.net/javascript-seo/5948abfc0e2df5.02876591.gif
 10. Copie el siguiente código HTML y ejecútelo en diferentes navegadores:

<html>
<head>
<title>Página WEB de ejemplo: hiperenlaces</title>
<script language="javaScript">
function cargar() {
alert("La página ha sido cargada");
}
function pulsar() {
alert("Has escrito algo");
}
function procesar() {
alert("Haz hecho clic en el botón");
}
</script>
</head>
<body onload="cargar();">
<input type="text" id="txt1" name="txt1" onkeypress="pulsar();" />
<input type="button" id="btn1" name="btn1" value="Púlsame" onclick="procesar();" />
</body>
</html>

Consulte el siguiente enlace: Clic aquí

11. ¿Por qué cada navegador al ejecutar el código anterior muestra diferentes aspectos en la interfaz?
12. Consulte material de apoyo y explique a continuación que significa cada sección del código:

Etiqueta HTML Descripción

<html>
<head>
<title>Página WEB de ejemplo: hiperenlaces</tit
<script language="javaScript">
function cargar() {
alert("La página ha sido cargada");
}
function pulsar() {
alert("Has escrito algo");
}
function procesar() {
alert("Haz hecho clic en el botón");
}
</script>
</head>
<body onload="cargar();">
<input type="text" id="txt1" name="txt1"
onkeypress="pulsar();" />
<input type="button" id="btn1" name="btn1"
value="Púlsame" onclick="procesar();" />
</body>
</html>

13. ¿Cuál es la etiqueta para definir que se está insertando un script o código javaScript?

En el código anterior las instrucciones de javaScript se ejecutaba desde el mismo archivo html. Para tener un
orden en el desarrollo web, se generará un archivo html con la estructura, un archivo css con la vista o estilo a
aplicar y un archivo js con las acciones o eventos que se ejecutan.

A continuación, debe copiar el código expuesta en sus respectivos archivos .html, .css y js.
En la misma carpeta donde esta elaborando el taller, cree un archivo html que se llame pruebaScript2 e ingrese
el siguiente código:
En la misma carpeta, cree un archivo css que se llame estiloPrueba e ingrese el siguiente código:

Posteriormente, en el bloc de notas copie el código javaScript que se muestra a continuación y guárdelo con la
extensión .js

Deberá verse la carpeta de la siguiente forma:

Ejecute el archivo .html.

Nota: En el -estilo- css los colores en su mayoría se asignan con el “nombre” en hexadecimal:
https://htmlcolorcodes.com/es/

14. ¿Cuales son las instrucciones o etiquetas en el archivo html que me permite conectar o enlazar
archivos externos (css y .js) para que funcione?
15. ¿Qué cambio se observa en el botón Púlsame?
16. ¿Cuáles son los eventos que se aplican?,¿Como se llaman?
17. Guarde en un archivo comprimido la carpeta del taller con los archivos generados.
18. Para finalizar, comente las conclusiones o conocimientos adquiridos del presente taller.
Fuentes consultadas:

• https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=886:api-drag-
and-drop-html-y-javascript-eventos-efectos-datatransfer-ejemplos-arrastrar-y-soltar-
cu01196e&catid=78&Itemid=206
• https://codepen.io/pablolobos/post/introduccion-a-html-y-css
• https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones
• https://desarrolloweb.com/articulos/ejemplos/javascript/primeras-variables.html
• http://dis.um.es/~lopezquesada/documentos/IES_1314/IAW/curso/UT7/libroswebjavascript/www.librosw
eb.es/javascript/capitulo3/tipos_de_variables.html
• https://developer.mozilla.org/es/docs/Web/CSS/Como_iniciar/Que_es_CSS
• http://www.htmlhelp.com/es/reference/css/style-html.html
• https://informaticapc.com/tutorial-html/eventos.php
• https://jml.neocities.org/mod1/mod01_transparencias.pdf
• https://jml.neocities.org/mod4/mod04_transparencias.pdf
• https://www.youtube.com/watch?v=TAyyujKoY6k&list=PLn6gE5I2TpRccbk_ZFsyOshpJVJ7GDQeD&ind
ex=42&t=363s
Básico Complementario

HTML_CSS
HTML

HyperText Markup Language, es decir,

Lenguaje de Marcas de Hipertexto, que podría
ser traducido como Lenguaje de Formato de
Documentos para Hipertexto.
Elementos Estructurales HTML5
Encabezados
 Los elementos en HTML tienen
atributos; estos son valores
adicionales que configuran los
elementos o ajustan su
comportamiento de diversas formas
para cumplir los criterios de los
usuarios.
Enlaces

Elemento anchor
Páginas de un mismo sitio web termina
en .html si es externa será la url.

Atributo target. Se abrirá

en una pestaña a parte.
 Ubicar sobre el elemento de la
pagina:
Id del elemento y la almohadilla
(#) con el nombre del id en la
referencia.
 Esquema mailto

Atributo download
Sintaxis CSS
(Cascading Style Sheets), en español «Hojas de
estilo en cascada», es un lenguaje de diseño gráfico
para definir y crear la presentación de un documento
estructurado escrito en un lenguaje de marcado.
Selectores
 Se llama con el nombre del elemento.

Se llama con el numeral y el nombre del id

Se llama con el punto y el nombre de la clase
 Información fuera de la estructura
Pseudoclases del document o difícil de expresar
con otros selectores.

Cambia color, mouse sobre el elemento.

Selector y se llama la pseudoclase con :

Enfocar a un elemento,
generalmente a un
formulario.
Cuando se mantenga el clic.
Pseudoelementos
Acceder a información que no es posible
de otra manera en el documento.
Combinación de Selectores

Lista desordenada

Ítem de una lista

Lista ordenada (1,2,3,…)

Actividades en la Sesión
“El buen diseño es obvio. El
diseño genial es transparente.”
Joe Sparano
Asignar Colores a los Elementos

Rojo Verde y Azul

Rango de valores desde 0 a 255
 Opacidad
0: no tiene opacidad
1: totalmente opaco
Longitudes CSS para Definir Tamaño de
Elementos Estructurales, Letras y Bordes

CSS
CSS

Respecto al
font-size
Porcentajes
Técnicamente no es una
longitud a pesar de estar muy
relacionados.
Modificar el Tamaño de un Elemento HTML
Block por defecto ocupa toda
la pantalla, utilizado para Propiedad CSS, todos los
piezas de contenido Display elementos lo tiene.

El valor inline-block, los

bloques en línea.

inline no reconoce el ancho y el

alto, porque se utiliza para
pequeñas piezas. El valor none de la
propiedad display. Los oculta
Concepto Modelo de Caja

En CSS
 Border la única
propiedad para asignar
un color de fondo.

El margin no afecta la caja pero si la

interacción con otras cajas.
La única que acepta valores negativos.
 Clic derecho-
inspeccionar elemento o
F12.
 Referencia Complementaria

http://www.mclibre.org/consultar/ht
mlcss/html/html-
formularios.html#atributos-comunes
Referencia

• DevCode, (2016). Curso de HTML y CSS.

Recuperado de https://devcode.la/cursos/html-css/
• Haz una Web. Listas HTML. Recuperado de
https://www.hazunaweb.com/curso-de-html/listas/
• Mozilla, (2019) . Referencia de Atributos HTML.
Recuperado de
https://developer.mozilla.org/es/docs/Web/HTML/Atri
butos