Páginas web. HML, CSS Y JAVASCRIPT

HTML CSS JAVaSCRIPT

La Web funciona con 3 herramientas: HTML, CSS, JavaScript, pero, ¿qUÉ SON?

01

02

03

HTML

CSS

JAVASCRIPT

HTML (Lenguaje de marcas de hipertexto), es el lenguaje donde se define la información o el contenido del documento. El formato de los archivos es .html.

CSS (Lenguaje de estilos en cascada), es el lenguaje donde se especifica el diseño del documento, maneja todo lo relacionado con la parte visual. El formato de los archivos es .css.

JavaScript, es el lenguaje que hace que todo sea interactivo y que nos permite crear sitios web. El formato de los archivos es .js. Además, es el lenguaje de programación que interpreta el navegador.

03

02

01

Para lograr comprender estas definiciones observa la imagen, analízala y comenta: ¿qué diferencias notas? Es importante que antes de comenzar a diseñar tu sitio web quede clara la diferencia entre estos 3 elementos. Para ello comenzaremos explicando el lenguaje de programación JAVASCRIPT. Así es, comenzaremos de abajo hacia arriba según la imagen (solo con la intención de que queden claras las diferencias).

ALERTA

javascript

java

Nunca pero NUNCA se te olvide que ¡JAVASCRIPT o JS (para abreviar) no es JAVA! Java es un lenguaje para servidores, aplicaciones de escritorio y aplicaciones Android. JavaScript es el lenguaje de la web, servidores, robots, etc.

Y recuerda que todo lenguaje de programación, no solo javascript; trabaja con variables, condicionales, eventos, funciones, clases y arreglos.

Mi primer línea de código

Ahora, vas a escribir tu primera línea de código.Sigue cada instrucción mostrada en esta presentación para obtener el mismo resultado.

Primero, utilizaremos Google Chrome como nuestra consola de edición, por lo que vas a abrir este navegador.

Google Chrome tiene una herramienta especial que se llama el inspector de elementos.

Para ingresar escribe en la barra de direcciones de Google Chrome lo siguiente: About:blank

Al presionar enter verás que este es solo un lugar vacío, no contiene nada.

Da click derecho en cualquier parte de la ventana y posteriormente da clic en inspect, inspeccionar o inspeccionar elemento.

Como puedes observar nos muestra la forma en que está escrita una página web, estas primeras etiquetas que estás observando son parte del lenguaje html, pero eso lo continuaremos viendo en las siguientes clases; por lo pronto da clic en la pestaña que dice console.

Console es un lugar donde puedes escribir javascript sin necesidad de programar en un archivo y vamos a empezar con un mensaje.

Escribe lo siguiente: alert("Mi nombre es Marco"); y al presionar la tecla enter observa qué es lo que pasa.

Nos sale un aviso, es decir, nos arroja una alerta.

Vamos a crear un nuevo mensaje. Esta vez escribe: alert(“Hola mamá, enciende la computadora que estoy programando”);

Vemos el nuevo mensaje en pantalla.

Alert es una instrucción, una orden que internamente JavaScript tiene preprogamada y es una forma en que los navegadores disparan un mensaje en pantalla; en el mundo de la programación se llaman funciones que son colecciones de código que hacen una tarea y tú puedes llegar a crear tus propias funciones.Todas las funciones son invocadas y se identifican porque enseguida se escriben paréntesis y adentro se denotan los parámetros o información que una función necesita para lograr su objetivo:

alert(“Hola mamá, enciende la computadora que estoy programando”);

String

Ahora, vamos a guardar un valor para una variable.Escribe: var nombre = “Marco”; No olvides colocar cada espacio, paréntesis, comillas y punto y coma como se muestra en cada ejemplo.

Pareciera que no sucedió nada después de presionar la tecla enter, pero veamos qué pasa si ahora escribimos únicamente la palabra nombre (es decir la variable), observa que te muestra el valor que se quedó guardado, es decir, mi nombre, digamos que se acuerda del último valor que le asignamos.

Ahora escribe: alert(“Me llamo “ + nombre); Es decir, se sigue acordando o me sigue mostrando el valor que dejé guardado.

Y como la variable nombre ya existe, ¿qué pasa si escribimos lo siguiente?: nombre = “Vegeta”;

Observa como ahora el valor de nombre es Vegeta y ya no es Marco. Podemos continuar escribiendo otros nombres y siempre seguirá apareciendo el último valor que se le ha asignado.

Escribe nuevamente la siguiente línea de código:alert("Me llamo " + nombre);

Observa qué sucedió: aparece nuevamente el mensaje de alerta pero con el último valor asignado a la variable nombre.

Finalmente, escribe la siguiente línea de código: nombre = prompt(“¿Cuál es tu nombre”);

¿Qué sucede? Ahora el navegador nos pregunta nuestro nombre.

Escribimos nuestro nombre, por ejemplo en mi caso Marco Antonio

Y, si escribimos la línea de alert("Me llamo " + nombre);

Nuevamente aparece el mensaje de alerta con el último valor asignado a la variable nombre.

Ya escribiste y experimentaste con tus primeras líneas de código, es importante que recuerdes que estuviste trabajando con JavaScript. En las siguientes sesiones trabajaremos con HTML.

ACTIVIDADES

1. Sigue los pasos mostrados en el video y sube la captura de pantalla al apartado correspondiente en Classroom del código que escribiste. Recuerda que la práctica la deberás hacer con tu nombre.
2. Contesta las siguientes preguntas:
1. ¿Para qué se utilizan las comillas que se observan en algunas líneas de código mostradas?
2. ¿Para qué se utiliza el símbolo de ; al final de cada línea de código mostrada?

Investiga y define los siguiente términos utilizados en lenguajes de programación:

VARIABLES

CONSTANTES

CONDICIONALES

CLASES Y ARREGLOS

EVENTOS

FUNCIONES

FINALMENTE...

¿Por qué consideras que es importante comprender la funcionalidad de javascript antes de comenzar a diseñar tu página web?

¡Gracias!