1

Consulta html css js

Historia

HTML sus siglas significan (HyperText Markup Language) lenguaje marcado de hipertexto, se
modifica a través de los años, contando ya con cinco versiones, para crear lo que hoy es
conocido como HTML5, se usa generalmente para simplificar la estructura de los documentos,
se usa principalmente como un documento plano de solo texto, ya que se puede aliar con otro
tipo de programas para tener una interface o presentación, se emplea únicamente con
procesadores web y de texto, como notePad, Block de notas, SublimeText, Visual Code, entre
otros. Fue creada por Tim Bernes-Lee en 1991, fue modificada por Dan Connelly en distintas
versiones. Para su creación se tuvo en cuenta todo tipo de normas establecidas por la ISO.
2
 3

ETIQUETAS HTML

https://www.mclibre.org/consultar/htmlcss/html/html-etiquetas.html
 4

APLICACIÓN DE ETIQUETAS

Fuente: Elaboración propia

 5

Historia js

JS en la historia cuenta que en los los años 90 solo se conectaban a interneth por medio de
módems y la velocidad no era tan buena era lenta
En una navegación tan lenta que empezaron a Desarrollar las primeras aplicaciones web
Brenda Eich es un programador que trabajaba en Netscape que se le ocurre que podía
solucionar el problema con otras tecnologías como ScripEase un navegador de 2.0 se lanzó en
el año 1995 y eich lo nombre LiveScrip un lenguaje.
Netscape firma con Sun Microsystem para el nuevo lenguaje de programación al que le
Netscape le cambia el nombre por JavaScript por exclusividad para marketing ya que se
dice que Java era una de moda de todo mundo
Después de ser la primera versión de JavaScript que fue un éxito y que se incorporó al mismo
lenguaje con Sun Microsystem navegador 3.0 JScript con su navegador Internet Explorer 3.
JScript era una copia de JavaScript al que le cambiaron el nombre para evitar problemas legales.
 6

Operadores lógicos

http://panamahitek.com/operadores-logicos-en-arduino/
 7

Operadores racionales

http://jptutorialsplus.blogspot.com/2013/08/operadores-relacionales-y-su-jerarquia.html
 8

Operadores aritméticos

https://virtual.itca.edu.sv/Mediadores/dlp/13_tipos_de_datos_y_jerarqua_de_operadores.html
 9

. Estructuras
"if ":
Una condicional básica, es aquella que evalúa la necesidad más simple, evaluar una
condición y determinar si esta es verdadera o falsa, dependiendo de la resultante actuará de una u
otra manera, permitiendo así ejecutar distintas sentencias, la estructura condicional más simple
que podríamos construir es la siguiente:

“if… else”:

Caso contrario, la cual nos permite tener dos bloques de código, el primer bloque se
ejecutará si la condición es cierta, en caso contrario, se ejecutará el segundo bloque de código.

Múltiples condiciones:
En ocasiones, se deben evaluar diversas condiciones, lo que implica que tengamos diversos
bloques de código. Para ello utilizaremos lo que se conoce como condiciones múltiples o
condiciones anidadas, las cuales evalúan y si no cumple, procede a evaluar otra, hasta encontrar
la que corresponda a un bloque de código, no existe algún límite de condicionales.
 10

“for”:
El ciclo for permite realizar repeticiones de una manera más sencilla que si lo hiciéramos
con estructuras if ... else

Siendo su función la siguiente:

● Inicialización: Aquí se establecen los valores iniciales que controlan la repetición.
● Condición: Es el elemento que decide si la repetición continúa o se detiene.
● Actualización: Nuevo valor que se asigna después de cada repetición.

La parte inicializadora del bucle consiste en var i = 0, por lo tanto primeramente se crea la
variable i y se asigna el valor de 0, podemos considerar a i como la variable contador.
Los bucles se ejecutan mientras las condiciones cumplan, es por ello por lo que en la zona
de condición tenemos la regla i < 5, esta regla indica que mientras i sea menor a 5 seguirá
ejecutando la instrucción.
Por último, en este ejemplo vemos que en la zona de actualización, se pone la regla i++,
esto indica que iremos aumentando en una unidad el valor inicial, hasta llegar a 5, llegando a 5
nuestro ciclo terminará.

“While”:
Un ciclo no siempre tiene que ejecutarse un número finito de veces, en algún momento
necesitaremos programar ciclos basados en una condición, por ejemplo, un acceso con
 11

contraseña, para este tipo de casos emplearemos la instrucción While().

La condición decide cuando se ejecuta o no el ciclo, este tipo de ciclo se ejecuta "mientras" la
condición se cumpla.

Observe la línea 3 del código, aquí es donde estamos declarando nuestro ciclo el cual se
ejecutará mientras la variable passwd no contenga el calor de password, inicialmente la variable
cuenta con una cadena vacía, lo que hace que la condición se cumpla. Dentro del cuerpo del

ciclo, se le pide al usuario que introduzca una clave a través de un mensaje en pantalla, si el
usuario introduce una cadena de caracteres diferente a password, la condición seguirá siendo
cierta y nuestro ciclo seguirá ejecutándose, si el usuario introduce la palabra password, nuestra
condición deja de cumplir, permitiendo al script la ejecución de la línea 6. Ejecútelo para
comprobar el funcionamiento.
“do...While”:
Es posible que en algún momento necesitemos un programa que contenga un ciclo que se
ejecute al menos una vez, independientemente de que la condición se cumpla o no, cabe
mencionar que este tipo de ciclos no son muy comunes, pero se puede presentar el caso, Sintaxis
general de un ciclo do ... While:

Este script le pide al usuario que teclee cualquier cosa y no le permite que pulse [Aceptar]
ni que pulse [Cancelar] mientras la caja esté vacía, por ende se ejecuta al menos una vez, después
 12

de que se ejecuta la instrucción while() (que evalúa la condición) se define si se vuelve a ejecutar
o no, en este particular caso hemos establecido que el ciclo vuelva a ejecutarse si el contenido de
la variable input es null o si se trata de una cadena vacía.
Switch:
La declaración se utiliza para realizar diferentes acciones en función de diferentes
condiciones.
Así es como funciona:
21

● La expresión de cambio se evalúa una vez.

● El valor de la expresión se compara con los valores de cada caso.
● Si hay una coincidencia, se ejecuta el bloque de código asociado.
2.4. Cómo declarar una función.
Toda función en JavaScript es un objeto Function, Las funciones no son lo mismo que los
procedimientos. Una función siempre devuelve un valor, pero un procedimiento, puede o no
puede devolver un valor.
Para devolver un valor específico distinto del predeterminado, una función debe tener una
sentencia return, que especifique el valor a devolver. Una función sin una instrucción return
devolverá el valor predeterminado. En el caso de un constructor llamado con la palabra clave
new, el valor predeterminado es el valor de su parámetro. Para el resto de funciones, el valor
predeterminado es undefined.
Los parámetros en la llamada a una función son los argumentos de la función. Los
argumentos se pasan a las funciones por valor. Si la función cambia el valor de un argumento,
este cambio no se refleja globalmente ni en la llamada de la función. Sin embargo, las referencias
a objetos también son valores, y son especiales: si la función cambia las propiedades del objeto
referenciado, ese cambio es visible fuera de la función. (mozilla, 2020)
La definición de una función (también llamada declaración de función o sentencia de
función) consiste en la palabra clave (reservada) function, seguida por:
 13

● El nombre de la función (opcional).

● Una lista de argumentos para la función, encerrados entre paréntesis y separados por
comas (,).

● Las sentencias JavaScript que definen la función, encerradas por llaves, { }.

Por ejemplo la función square toma un argumento, llamado number. La función consiste en
una sentencia que expresa el retorno del argumento de la función (el cual es, number)
multiplicado por sí mismo:
function square(number) {
return number * number;
}
Cómo declarar arreglos y matrices

En ocasiones y dependiendo del autor que se consulte a los arreglos, se les denomina
también vectores, matrices o arreglos, pero el término Array es el más común y aceptado en el
jerga de la programación.
Un arreglo es solo una colección de variables que pueden o no ser del mismo tipo, su uso
permite realizar agrupación de datos, lo cual nos facilita el manejo de la información, para
entender mejor esto, basta con ejemplificar de la siguiente manera:

Aunque el código anterior no es erróneo puede complicar la eficiencia y sobre todo puede
complicar la legibilidad del código, para mejorar este tipo de situaciones nos apoyamos de
algunas otras funcionalidades como los arrays, quedando de la forma siguiente:
 14

Una vez que ya tenemos definido un Array es muy fácil acceder a cada uno de sus
elementos, para acceder a ellos, basta con indicar la posición en la que se encuentra al interior
del array, tomando en cuenta que la posición inicial toma el valor de 0 y no de 1 aplicando de
izquierda a derecha.

En la imagen anterior la primera instrucción hace referencia al primer mes, para ello se hace
mención del nombre del arreglo (meses) y la posición de la cadena dentro del array, que se indica
entre corchetes, en este caso [0] es la posición que ocupa la cadena denominada "Enero", en la
segunda instrucción de hace referencia al mes de Diciembre, el cual se encuentra en la posición
número [11] dentro del array.
Cómo conectar un archivo de JavaScript y HTML

. Agregar JavaScript directamente a un archivo HTML Utilizando la etiqueta <script> </script>

que debe envolver todo el código JavaScript que escriba, se recomienda agregarlo en la sección
<head> para que permanezca separado del
contenido de tu archivo HTML.

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta

name="viewport" content="width=device-width, initial-scale=1"> <script>JAVASCRIPT
</script> <title>Time right now is: </title> </head> <body> <script>JAVASCRIPT CAN
ALSO GO HERE</script> </body>
 15

</html>

Agregar código JavaScript a un archivo separado.

Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript. Se

puede hacer referencia a estos archivos desde adentro de los documentos HTML, al igual que
hacemos referencia a los documentos CSS. Algunos de los beneficios de agregar código JS en
archivos separados son:
● Cuando los códigos HTML y JavaScript están separados, se cumple el principio de
diseño de separación y hace que todo sea mucho más sostenible y reutilizable.
● La legibilidad y el mantenimiento del código es mucho más fácil.
● Los archivos JavaScript en caché mejoran el rendimiento general del sitio web al
disminuir el tiempo que tardan las páginas en cargarse.
<! DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta

name="viewport" content="width=device-width, initial-scale=1"> <title>Time right now:</title>

</head> <body> </body> <script src="js/myscript.js"></script> </html> 3

 16

¿Para qué sirve?

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los
documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los
contenidos y su presentación y es imprescindible para crear páginas web complejas. Separar la
definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que

obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también
llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la
complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de
dispositivos diferentes
El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la
forma de presentación que le aplicaremos a:
● Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
● Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código
en la cabecera, a toda la página.
● Una porción del documento, aplicando estilos visibles en un trozo de la página.
● Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para
una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra
programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul,
con márgenes, sin ellos...

Aplicar CSS al sitio web

div{
background-color: yellow;
 17

width: 50%; /*ANCHO*/

float: left;
}
nav{
background-color: blue;

width: 30%; /*ANCHO*/

float: right;
}
section{
background-color: red;
width: 80%; /*ANCHO*/
}
. texto{
font-size: 30px;
}

@media only screen and (max-width: 900px){

div{
background-color: blue;
width: 80%; /*ANCHO*/
}
nav{
background-color: darkgoldenrod;
width: 50%; /*ANCHO*/
}
section {
 18

background-color: green;

width: 50%; /*ANCHO*/

}
}
@media only screen and (max-width: 600px){
div{
background-color: darkgoldenrod;
width: 45%; /*ANCHO*/
}
nav{
background-color: green;
width: 75%; /*ANCHO*/
}
section {
background-color: yellow;
width: 100%; /*ANCHO*/
}
}
 19

http://www.hipertexto.info/documentos/html.htm
http://dis.um.es/~lopezquesada/documentos/IES_1314/IAW/curso/UT7/libroswebjavascript/ww
w.librosweb.es/javascript/capitulo1/breve_historia.html
http://www.profesordeinformatica.com/css/historia