Want to create interactive content? It’s easy in Genially!
HTML5
Lola Madrid
Created on September 17, 2021
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
HTML5
Nociones básicas de programación
EMPEZAR
TIC - 2º BachilleratoLola Madrid
Índice
Objetivos
¿Qué es HTML5?
FormulariosHTML
Objetivos
- Conocer un poco los fundamentos de la programación web.- Aprender nociones básicas de código HTML, CSS y Java Script. - Diseñar alguna página web utilizando el código aprendido.
¿Qué es HTML5?
HyperText Markup Language versión 5
Es un estándar que establece el código para desarrollo web, mejorando versiones anteriores.Incluye 3 lenguajes:
CSS
JavaScript
HTML
HTML
HTML - Primeras nociones
- HTML es un lenguaje de etiquetas; cada una de estas etiquetas tiene una función dentro de la arquitectura de la página web.
- Con HTML podemos configurar los contenidos y la distribución básica de estos dentro de la página.
- Todas las etiquetas están encerradas entre los símbolos <>. Ej: <p>
- El nombre de la etiqueta no distingue entre mayúsculas y minúsculas, aunque convencionalmente se suele usar minúsculas.
HTML - Primeras nociones
Cada etiqueta tiene una función, como por ejemplo:
- <title> título
- <h1> encabezado de mayor jerarquía (la h es de header)
- <h2> encabezado de menor jerarquía
- <p> párrafo
- <a> enlace
- <strong> negrita (bold)
- <img> imagen
HTML - Primeras nociones
- Por lo general, los elementos HTML constan de una etiqueta de apertura, el contenido al que estas etiquetas dan formato y una etiqueta de cierre.
- La etiqueta de cierre, se diferencia de la de apertura en que incluye una barra (/) después del símbolo inicial de etiqueta (<). Ej: </p>
Fuente: https://mdn.mozillademos.org/files/11913/htmlexp.png
HTML - Primeras nociones
Algunas etiquetas no tienen etiqueta de cierre porque no encierran un contenido; es el caso de algunas como <img>, <br>, <link> y <meta>. Algunas etiquetas requieren de atributos para completar la información, por ejemplo: la etiqueta <img> necesita el atributo src="" donde se indica la ubicación de la imagen. Quedaría asi: <img src="images/foto.jpg">. Hay etiquetas que pueden ir con o sin atributo.
HTML - Primeras nociones
- Existe una jerarquía de etiquetas, de manera que unas pueden ir dentro de otras. A esto se le llama "anidamiento". Por ejemplo:
- La etiqueta <p> </p>, indica principio y final de un párrafo:
- Si quisiera poner en negrita la palabra Pitbull, debo añadir la etiqueta <strong> </strong>, pero de modo que solo afecte a dicha palabra:
- La etiqueta <strong> está anidada dentro de la etiqueta <p>
<p>Mi perro es un Pitbull auténtico</p>
<p>Mi perro es un <strong>Pitbull </strong> auténtico</p>
HTML - Primeras nociones
- Podemos distinguir entre 2 tipos de elementos HTML: Inline (en línea) y Block (de bloque).
- Los elementos "en línea" son aquellos cuyo contenido se encuentra en una misma linea, de tal manera que que si colocamos dos o más elementos en linea sin expresar un salto de linea, estos elementos se presentarán uno seguido de otro en una misma linea.
Código
Apariencia real
Fuente: https://desarrolladoresweb.org/html/elementos-inline-y-block-en-html/
HTML - Primeras nociones
Algunas etiquetas de tipo "en línea" son:
- <a>.- etiqueta de enlace.
- <em>.- Texto cursiva.
- <i>.- etiqueta para cursiva (en desuso).
- <img>.- para imagenes.
- <input>.- campos de formulario.
- <span>.- asigna un estilo a un elemento pequeño dentro de una etiqueta de bloque.
- <strong>.- texto en negrita.
- <sub>.- para texto subíndice.
- <sup>.- texto superíndice.
- <u>.- para subrayar texto.
Fuente: https://desarrolladoresweb.org/html/elementos-inline-y-block-en-html/
HTML - Primeras nociones
- Al utilizar los elementos "de bloque", en cambio, se hace un salto de linea de manera automática aunque no pongamos una etiqueta de salto de linea.
Código
Apariencia real
Fuente: https://desarrolladoresweb.org/html/elementos-inline-y-block-en-html/
<!DOCTYPE html>
HTML - Estructura básica
indica que estamos usando la versión 5 de Html
La estructura principal de una página sería:
<html> ...</html>
indica que entre estas etiquetas estamos usando código Html
<head> ...</head>
es información exclusiva para el navegador que no puede ver el usuario, a excepción de la etiqueta <title> que se muestra en la pestaña del navegador y es la que se usa para guardar una página en marcadores.
Fuente: www.laurachuburu.com.ar
<body>...</body>
contenido que ve el usuario
Lo que ponemos dentro de <head></head> no lo puede ver el usuario pero es información importante para los navegadores. Algunas de las instrucciones más frecuentes son:
HTML
<head> <meta charset="utf-8"/> <meta name="description" content="Página de tecnología"/> <meta name="keywords" content="tecnología, proyectos, secundaria"/> <title>Página de tecnología en educación secundaria</title> <link rel="stylesheet" href="mihojadeestilos.css"/></head>
HTML - Estructura básica del body
HTML - Estructura básica del body
HTML
Si además queremos ponerle un texto al pie de la imagen, utilizaremos la etiqueta: <figcaption></figcaption>Hay que ponerla dentro de <figure> pero después de <img>
<figure><img src="imagenes/paisaje.jpg/> <figcaption> Paisaje al anochecer </figcaption></figure>
Abrimos etiqueta figcaption
Texto que aparece al pie de foto
Cerramos etiqueta figcaption
¡OJO! No se deben poner tildes a las carpetas y a los archivos que componen nuestra página web porque podrían dar problemas en servidores extranjeros.
HTML
Para poner en un enlace utilizamos la etiqueta <a></a> con el atributo href:
<a href="URL de la página">Texto que aparece escrito</a>
<a href="https://www.educa.jcyl.es">Página de Educación</a>
Fuente: https://desarrolladoresweb.org/html/elementos-inline-y-block-en-html/
HTML
Dentro del código podemos dejar anotaciones que no se verán en el navegador y se escriben asi por ejemplo: <!-- aquí empezaría el menu principal --> Los comentarios también sirven para ocultar alguna parte del código, y se usa temporalmente para hacer pruebas sin borrar el código.
Fuente: https://desarrolladoresweb.org/html/elementos-inline-y-block-en-html/
HTML
Más etiquetas:
¿Cómo insertar un vídeo o audio desde nuestro equipo?
HTML
<video src="videos/nombredelvideo.mp4" height="315" width="560" preload="none" autoplay="autoplay> </video>
<audio src="audios/cancion.mp3" controls loop autoplay></audio>
¿Cómo insertar un vídeo desde un página tipo YouTube?
HTML
Buscamos el vídeo de YouTube, pulsamos "Compartir", luego "Insertar" y por último copiamos el código html con la etiqueta <iframe> y es el que insertaremos en nuestra página web:
HTML
¿Como añadir más páginas a mi web?
Imaginemos esta página que en su barra de navegación (<nav></nav>) tiene 3 opciones: 1. Noticias (es la página que se está mostrando en este momento y cuyo código se encuentra en el archivo "Index.html" dentro de la carpeta "Mi pagina web". 2. Proyectos y 3. Apuntes son dos páginas adicionales, a las que debería haber sendos vínculos que deberían abrir cada una de estas nuevas páginas al pinchar en ellos.
HTML
¿Como añadir más páginas a mi web?
Lo primero que debemos hacer es diseñar cada página en HTML, igual que hicimos con la página principal que en principio hemos llamado "Index.html". Dentro de la carpeta "Mi pagina web" crearemos una subcarpeta llamada "paginas" y dentro de ella alojaremos los archivos Proyectos.html y Apuntes.html
paginas
Mi pagina web
HTML
¿Como añadir más páginas a mi web?
En las tres páginas encontraremos la etiqueta del navegador y su contenido.
Lo único que nos faltaría hacer es poner un vínculo para que cada pestaña de la barra de navegación nos lleve a la página adecuada. Veamos como se hace:
HTML
¿Como añadir más páginas a mi web?
Primero configuraremos el código de la página "Index.html"
Utilizamos la etiqueta <a href="ubicación de página">Nombre de la página</a> En la linea de Noticias no ponemos nada porque Noticias es la página "Index.html" en la que estamos escribiendo el código ahora mismo.
HTML
¿Como añadir más páginas a mi web?
Después haremos algo parecido con la página "Proyectos.html"
Aquí, en la línea de Noticias los dos puntos antes de la barra que precede a Index, quieren decir que se baja un nivel de carpeta desde el archivo en el que estamos. Es decir, como en este caso estamos en "Proyectos.html", al bajar un nivel de carpeta, pasaría de la carpeta "paginas" a la de "mi pagina web" y allí buscaría el archivo Index.html.En la línea "Apuntes" no se pone la carpeta "paginas" porque ya estamos en esa carpeta con la página "Proyectos. html" Y en la de "Proyectos" no ponemos nada porque corresponde a esta misma página.
HTML
¿Como añadir más páginas a mi web?
Por último, de manera análoga, lo hacemos con "Apuntes.html"
Aquí, en la línea de Noticias los dos puntos antes de la barra que precede a Index, quieren decir que se baja un nivel de carpeta desde el archivo en el que estamos. Es decir, como en este caso estamos en "Apuntes.html", al bajar un nivel de carpeta, pasaría de la carpeta "paginas" a la de "mi pagina web" y allí buscaría el archivo Index.html.En la línea "Proyectos" no se pone la carpeta "paginas" porque ya estamos en esa carpeta con la página "Apuntes. html" Y en la de "Apuntes" no ponemos nada porque corresponde a esta misma página.
HTML
¿Como añadir más páginas a mi web?
Si actualizamos el navegador con las modificicaciones del código, veremos cómo ya nos aparecen los vínculos que nos permiten ir de una página a otra.
CSS
¿Qué es CSS?
Cascade Style Sheet
El lenguaje CSS se encarga de definir la apariencia o la mayoría del aspecto visual de nuestra página web. Algunos de los aspectos que podemos modificar son:
- Los tipos de fuente, tamaños y colores, alineación, espaciado, ...
- La visibilidad y posicionamiento de elementos.
- Las propiedades de las listas, tablas, ...
- Las propiedades de cualquier etiqueta HTML.
- Los márgenes, fondo y colores de zonas del documento, ...
- Las propiedades de caja o cualquier tipo de contenedor.
CSS
- En versiones anteriores de HTML esta configuración se introducía dentro del código HTML, pero actualmente esta programación se realiza en un único archivo llamado Mihojadeestilos.css o Styles.css.
- En nuestra carpeta "Mi pagina web", además del archivo Index.html y la carpeta "imagenes", ahora encontraremos un documento llamado Mihojadeestilos.css.
Mi pagina web
CSS
- Dentro del código HTML, dentro de la etiqueta <head></head> se introduce un vínculo que nos lleva a esta hoja de estilos para aplicar el formato a toda la página:
- El código CSS se compone de reglas.
- Una regla es un conjunto de características y propiedades que se van a aplicar a uno o varios elementos.
CSS
- La estructura básica de una regla consta de un selector y una declaración. La declaración se compone a su vez de una propiedad y un valor.
declaración
CSS
Algunas consideraciones a tener en cuenta:
- Cada regla debe escribirse entre llaves { }
- Cada declaración termina en punto y coma ;
- Cada propiedad se separa de su valor por dos puntos :
- El orden en el que aparecen las reglas en el documento es indiferente salvo que afecten al mismo selector y a la misma propiedad con un valor distinto, si es así prevalece la última. Generalmente las propiedades dentro de un selector se ponen por orden alfabético.
CSS
Algunas consideraciones a tener en cuenta:
- Después de los dos puntos (:) y del punto y coma (;) pueden ir espacios o no, es indistinto.
- Después de la última propiedad, puede ir o no un punto y coma.
- Las propiedades se pueden escribir una debajo de la otra o todas en una misma línea.
- Un archivo CSS puede tener un número ilimitado de reglas CSS y dentro de cada regla podemos escribir tantas propiedades como necesitemos
CSS
- Se pueden incluir varias propiedades en una declaración:
declaración
declaración
CSS
Tipos de Selectores CSS:+ De Etiqueta: header + Identificadores (id): #headercabecera + De Clase (class): .headercabecera
CSS
Selector de Etiqueta
El nombre del selector es directamente el mismo que el de la etiqueta a la que queremos dar formato. En el ejemplo que vemos, estamos aplicando fuente tamaño 12px y color azul a todos los textos h1 definidos en el archivo HTML.
CSS
Ejemplos de selector de etiqueta
Observa cómo en cada ejemplo el valor del color se expresa de una manera diferente
Veamos más información
CSS
Selector "id" o identificadores:
Los selectores tipo "id" se usan para crear formatos que solo se van a aplicar a un elemento concreto. Veamos un ejemplo: Si yo tengo la reglah2 {color: red}todos los textos con la etiqueta <h2> se van a poner en rojo.
h2
CSS
Selector "id" o identificadores:
Si lo que yo deseo es que todos sean rojos menos el último, aplicando un atributo ID a la etiqueta <h2> de este podré crear una regla que aplicaría únicamente a este último texto <h2> Veamos cómo hacerlo. Consideremos, como ejemplo que quiero que todos los <h2> sean rojos excepto el último, que quiero que sea azul.
CSS
Selector "id" o identificadores:
En principio mantengo mi regla h2 {color: red} para que todos los textos <h2> se queden en rojo. A continuación me voy al código HTML y al último <h2> le añado el atributo id y le pongo un nombre identificador que yo elijo ("ultimo"):
CSS
Selector "id" o identificadores:
Seguidamente, vamos a nuestra hoja de estilos y añadimos una regla con selector "id" llamado "ultimo" y en la que vamos a poner el formato que afecta únicamente a esta etiqueta:
Código del color azul
CSS
Selector de clase o "class":
Los selectores de clase se usan para crear formatos generalmente aplicables a una serie de elementos, aunque también podría ser un único elemento.
Veamos un ejemplo: Imaginemos que me interesa crear una regla para poner un fondo azul y un subrayado a algunos párrafos.
CSS
Selector de clase o "class":
Lo primero que haremos será crear una regla en Mihojadeestilos.css con un selector de clase donde configuraremos el formato deseado: fondo azul y subrayado.
CSS
Selector de clase o "class":
Seguidamente, volvemos a la hoja html de nuestra página web, y ponemos el atributo "class="nombredelselector" en todos aquellos elementos que queremos que adopten el formato que hemos definido en este.
Página HTML
Vista navegador
CSS
Algunas propiedades CSS
En la siguientes webs puedes ver algunas de las propiedades CSS más utilizadas:
Fuente:https://www.mclibre.org/consultar/htmlcss/css/css-propiedades.html#css-tipos
CSS
Algunas propiedades CSS
Algunas propiedades muy útiles son: - Font-size (font-family, font-style,.....) - Color - Background-color (Background-image, background-position, ....) - Text-align (text-decoration, text-shadow,....) - Letter-spacing, line-height,....
Fuente:https://medium.com/wolox/what-margin-padding-taught-me-after-50-projects-6878b53c903f
CSS
Algunas propiedades CSS
Algunas propiedades muy útiles son: -Margin - Padding - Border - Height - Width
Fuente:https://medium.com/wolox/what-margin-padding-taught-me-after-50-projects-6878b53c903f
Algunas propiedades CSS
CSS
Formas útiles de algunas propiedades:
border: 2px solid blue;
estilo
color
grosor
padding: 10px 0 0 0;
top left bottom right
margin: 10px 0 0 0;
top left bottom right
Estilos CSS en línea
CSS
Existe la posibilidad de poner un estilo CSS en línea añadiendo el atributo style="propiedadCSS:valor" dentro de la etiqueta a la que queremos aplicar el estilo. Lógicamente solo aplicará a ese documento html.
Sin estilo
Estilo en línea
Algunas propiedades CSS
CSS
-Float Si "flotamos" un elemento a la izquierda, por ejemplo, este contenedor saldrá del flujo normal de la página y se colocará a la izquierda de la misma; los elementos siguientes lo rodearán
Aplicamos la propiedad "float" a la etiqueta "aside", por ejemplo, nos pone la barra lateral a la izquierda y todo lo demás la rodea.
Algunas propiedades CSS
CSS
-Float Si en el ejemplo anterior, la barra lateral fuera más grande, nos quedaría así:
Ver código CSS
Como la imagen empieza antes de que acabe el elemento flotante, se mantiene en esa posición y a continuación, el texto se pone alrededor
Algunas propiedades CSS
CSS
-Float Si ahora aplicamos la propiedad float:left; para la imagen
Ver código CSS
Vemos que la imagen sigue en su posición, aunque ahora el texto que estaba a continuación ha cambiado y está rodeando la imagen. La imagen no se ha puesto del todo a la izquierda, porque detecta que hay otro elemento que ya está flotando ahí, por lo tanto se pone a continuación.
Algunas propiedades CSS
CSS
-Float Para resolver esto se utiliza la propiedad clear, cuyo valor puede ser entre otros: right,left o both.
Ver código CSS
Al hacer un clear:left; en la imagen estamos diciéndole que se ponga a la izquierda del todo en cuanto le sea posible, puesto que el "clear" hace que no tenga en cuenta cualquier otro elemento que ya tuviera esta propiedad con anterioridad.
JavaScript
JavaScript
JavaScript
JavaScript es un lenguaje de programación o de secuencias de comandos que te permite implementar funciones complejas para dotar de dinamismo a las páginas web con funciones tales como mostrar actualizaciones de contenido, mapas interactivos, animación de gráficos, desplazamiento de reproductores de vídeo, etc.,
JavaScript
¿Cómo usar el código de JavaScript?
Hay varias maneras de poner el código de JS:- En línea. - Como contenido en una etiqueta <script></script> - Como contenido en un archivo de formato .js
JavaScript
JavaScript en línea
Es posible escribir instrucciones de JavaScript en línea, aunque no es lo que se usa habitualmente, directamente en el código html dentro de cualquier etiqueta.
Con esta instrucción le estamos diciendo, al hacer "click" (onclick="") en el texto que hay en este "h1" muestra el mensaje "¡Hey!" alert('¡Hey!')
JavaScript
Como contenido de una etiqueta <script></script>
Esto se hace simplemente poniendo la instrucción entre las etiquetas <script></script>. Se suele añadir el atributo type="text/javascript"
Con esta instrucción, al abrir la página (sin necesidad de clicar en ningún sitio) muestra el mensaje "hola" alert('hola')
JavaScript
Como contenido de una página de formato .js
El código JavaScript lo vamos a hacer en un archivo con extensión .js llamado por ejemplo "script.js" y, al igual que hicimos con CSS, crearemos un enlace a él desde la página de html ubicado generalmente dentro de la etiqueta <head></head>
JavaScript
CSS
JavaScript
Como contenido de una página de formato .js
Luego, dentro del archivo script.js, escribiremos todo el código JavaScript que va a afectar a nuestra página .html.
Con esta instrucción, al abrir la página antes de cargar el contenido muestra el mensaje "hello!" alert('hello!')
alert('texto') abre una ventana al abrir la página mostrando el "texto" que hay entre comillas dentro del paréntesis.document.write("texto"), muestra el texto en la propia página. Las comillas pueden ser dobles "x" o simples 'x'
JavaScript
Variables
Las variables son una especie de contenedores para almacenar datos cuyo valor puede variar.
Algunos tipos de variables
- Numéricas: números enteros o decimales
- String: frases, palabras, letras, cadena de palabras
- Booleanas: true/false
- Array: ( también llamados matrices, vectores o arreglos) es un conjunto de elementos en el que no todos ellos tienen que ser del mismo tipo.
JavaScript
Nombres de las variables
Los nombres de las variables pueden comenzar por:- una letra minúscula o mayúscula: nombreVariable - guion bajo (_): _nombreVariable - símbolo de dólar ($): $nombreVariable Los nombres de las variables no deben coincidir con palabras clave de la propia Sintaxis o que se utilicen en la programacióno que se utilicen en la programación de JavaScript.
JavaScript
Declarar una variable numérica en javaScript
Se hace con la función var (variable global), let (variable local) y const (valor constante). Nosotros vamos a utilizar la función var:
La variable num_1 vale 35
La variable num_2 vale 50
La variable resultado vale la suma de las otras dos
Abre una ventana con el valor de la variable resultado
JavaScript
Declarar una variable numérica en javaScript
Otra opción es declarar solo el nombre de la variable con la función var y posteriormente asignarle un valor directamente:
Declaramos el nombre de las 3 variables
Asignamos valor a las variables
Abre una ventana con el valor de la variable resultado
JavaScript
Declarar una variable tipo texto en javaScript
Si queremos incluir unas comillas en el texto, será necesario cambiar el tipo de comillas usado en la cadena de texto o introducir la contrabarra antes del símbolo comillas (\").
JavaScript
Declarar una variable tipo texto en javaScript
La variable letras1 vale "hola"
La variable letras2 vale " a tod@s"
El valor de las variables de tipo textual debe ir entre comillas
JavaScript
Declarar una variable Booleana en javaScript
La variable incorrecto vale "false"
La variable acierto vale " true"
Muestra en pantalla el valor de la variable acierto
JavaScript
Declarar una variable tipo Array en javaScript
La variable animales tiene 5 elementos, 4 de texto y uno numérico
Muestra en pantalla el valor del elemento 2 de la variable animales (¡¡ojo!! el elemento 2 es el tercero, porque el primer elemento se llama elemento 0
JavaScript
Funciones útiles para mostrar e introducir datos
alert('texto') abre una ventana al abrir la página mostrando el "texto" que hay entre comillas dentro del paréntesis. Si queremos que muestre una variable pondremos alert(variable) document.write("texto"), muestra el texto en la propia página. Si queremos que muestre una variable pondremos document.write(variable) prompt("Introduce un dato"), muestra una cajetilla para introducir algún dato, etiquetada con el texto entrecomillado.
JavaScript
Funciones útiles para mostrar e introducir datos
alert('texto') : Si queremos mostrar varias frases, variables, etc. dentro de una misma ventana de alert podemos unirlas con el símbolo +:
Si queremos introducir un salto de línea podemos incluir \r
Los textos literales deben ir entre comillas, sin embargo, las variables, no.
JavaScript
Funciones útiles para mostrar e introducir datos
document.write('texto'): Si queremos mostrar varias frases, variables, etc. dentro de una misma ventana de alert podemos unirlas con el símbolo + o con , (comas):
Si queremos introducir un salto de línea podemos incluir "<br>"
Los textos literales deben ir entre comillas, sin embargo, las variables, no.
JavaScript
Operadores matemáticos
Podemos utilizar operaciones aritméticas con las variables y con cualquier valor numérico haciendo uso de los símbolos + - * / o ** (para función exponencial)
Con esta instrucción conseguimos que introduzca un salto de línea
JavaScript
Operadores matemáticos
Incremento: ++variable1 aumenta en 1 el valor de la variable * Decremento: --variable1 disminuye en 1 el valor de la variable *
* Es equivalente a: variable1 = variable1 + 1 * Decremento: variable1 = variable1 - 1
JavaScript
Operadores relacionales
Son idénticos a los que definen las matemáticas: mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que (==) y distinto de (!=).
Los operadores relacionales se pueden utilizar también con cadenas de texto.
JavaScript
Operadores lógicos
NOT (Negación) (!) Es el valor contrario
El funcionamiento de la función NOT es el siguiente:
JavaScript
Operadores lógicos
AND (Y) (&&): Solo da el resultado de "true" si las dos variables comparadas también son "true".
El funcionamiento de la función AND es el siguiente:
JavaScript
Operadores lógicos
OR (O) (||): Da el resultado de "true" si al menos una de las dos variables comparadas también son "true".
El funcionamiento de la función OR es el siguiente:
JavaScript
Operador resto (Remainder)
numero1 % numero2: Esta operación me permite obtener el resto que obtendría al dividir numero1 entre numero2.
JavaScript
Condicionales
if (condición) { ejecutar esta acción } else { ejecutar esta otra acción}; Nos permite ejecutar una instrucción si se sumple una condición y otra diferente en caso de que no se cumpla.
JavaScript
Condicionales
if - else también se puede usar añadiendo más condiciones añadiendo la siguiente estructura.
JavaScript
Condicionales
Ejemplo: Escribe el código para que el programa te diga si una variables es menor, igual o mayor que 10.
JavaScript
Ciclo for Ciclos, bucles o loops
for( ; ; ){ } nos permite ejecutar una operación cíclica en la que debemos definir lo siguiente:
{ operación };
JavaScript
Ciclo for Ciclos, bucles o loops
Ejemplo: Escribir el código adecuado para que la página muestre los números pares entre el 10 y el 60.
Hasta que i alcance el valor 60
Y antes de ejecutar el próximo ciclo, incrementar el valor de i en 2
Empezando desde el valor 10 de i
JavaScript
Ciclo for Ciclos, bucles o loops
Es parecido al ciclo "for" pero si queremos aumentar o disminuir el valor de la variable tenemos que incluirlo en el código
while( condición ){ ejecuta esta instrucción; }
JavaScript
Ciclo while
Ejemplo: Escribir el código adecuado para que la página muestre los números pares entre el 10 y el 60.
Ejecutar la instrucción siguiente mientras i sea menor o igual que 60
Escribir en pantalla el valor de "i" y dos espacios
Antes de repetir el ciclo incrementar en 2 el valor de i