Scribd
Cargar
82 vistas

HTML - Css - Js

Este documento presenta una introducción a los lenguajes HTML, JavaScript y CSS. Explica brevemente la historia y uso de HTML, incluyendo etiquetas comunes como <head>, <title>, <link>, <meta>, <style>, <body> y <article>. También incluye una tabla que describe el propósito de estas etiquetas HTML clave y cómo se aplican comúnmente.

Cargado por

Laura Daniela Fajardo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
82 vistas

HTML - Css - Js

Este documento presenta una introducción a los lenguajes HTML, JavaScript y CSS. Explica brevemente la historia y uso de HTML, incluyendo etiquetas comunes como <head>, <title>, <link>, <meta>, <style>, <body> y <article>. También incluye una tabla que describe el propósito de estas etiquetas HTML clave y cómo se aplican comúnmente.

Cargado por

Laura Daniela Fajardo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 30

1

HTML, JAVASCRIPT Y CSS

PRESENTADO POR:

CRISTIAN FABIAN SERRATO 

LORENZO SANCHEZ RAMIREZ 


 

PRESENTADO A:  

JESUS ARIEL GONZALEZ BONILLA 

SENA

ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACIÓN

FICHA: 1906756

NEIVA, 2020
2

1. HTML

1.1. Historia del HTML

Según [ CITATION Raú12 \l 9226 ], La historia


del HTML (lenguaje de marcado, Hypertext Mark Up Language), ésta llena de muchas necesidades, así

como de desarrollos en un entorno de innovación totalmente dinámico y colaborativo, dónde se

mezclan intereses de empresas privadas, con deseos de estandarización de consorcios, intereses de

usuarios generalistas y hasta impulsos personales (Abbate, 2000).

HTML es un lenguaje estandarizado con el que los navegadores interpretan la información que

contienen la multitud de páginas que componen la World Wide Web (de aquí en adelante WWW). Es

un lenguaje de marcación de texto que permite al navegador conectado interpretar la página que solicita

al servidor.

Para entender el HTML, debemos de tener claro que éste no es un lenguaje de programación y no tiene

compiladores, razón por la cual, si se presenta un error en los documentos que interpreta, lo visualiza de

la manera en que no lo ha entendido. El lenguaje HTML se basa principalmente en un sistema de

etiquetas que indica al navegador dónde está el cuerpo de un documento (Rodríguez, 2006), es decir,

cuando necesitamos realizar una operación, colorear un texto, aplicar animación a una caja, etc. HTML

tiene sus limitaciones y por ello se desarrollaron «lenguajes auxiliares» como CSS (Cascade Style

Sheets) o JavaScript, para implementar estilos o ejecutar acciones en los documentos Web.

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN

(Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para

compartir documentos. Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito

de la informática, el "hipertexto" permitía que los usuarios accedieran a la información relacionada con

los documentos electrónicos que estaban visualizando. De cierta manera, los primitivos sistemas de

"hipertexto" podrían asimilarse a los enlaces de las páginas web actuales. Tras finalizar el desarrollo de
3

su sistema de "hipertexto", Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar

un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas

Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3). El primer

documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags

(Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática. La

primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del

organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances significativos (en

esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas

de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.

1.2 Etiquetas HTML y aplicación.

Tabla 1

Etiquetas HTML

ETIQUETAS HTML
NO. NOMBRE DESCRIPCCION APLICACION
1 !DOCTYPE es una instrucción <!DOCTYPE html>
especial que va al inicio
de nuestro documento
HTML y que permite al
navegador entender
qué versión de HTML
estamos utilizando
2 <html> El elemento raíz de una <!DOCTYPE html>
página web es el <html>
elemento <html>, que
abarca todo el </html>
documento excepto la
declaración de tipo de
documento inicial
3 <head> El elemento <head> <!DOCTYPE html>
contiene información <html>
de carácter general <head>
(metadatos) que no se
muestra en la ventana </head>
4

del navegador. Esta


información se recoge </html>
en los elementos
<title>, <base>, <link>,
<meta> y <style>.
4 <title> El elemento <title> <!DOCTYPE html>
contiene el título del <html>
documento. Es un <head>
elemento obligatorio <title>Adsi 1906756 Grupo de 5
que debe contener </title>
únicamente texto. </head>
Normalmente, los
navegadores muestran </html>
ese texto en la pestaña
del navegador. Como
las pestañas son
pequeñas, se suele
mostrar solamente el
principio del texto.
Situando el ratón sobre
la pestaña se suele
mostrar un cuadro de
texto flotante con el
título completo.
5 <link> Los elementos vacíos <!DOCTYPE html>
<link> enlazan a otros <html>
documentos para <head>
diferentes fines. El uso <title>Adsi 1906756 Grupo de 5
más habitual es para </title>
enlazar a hojas de
estilo, aunque puede <link rel='stylesheet' type='text/css'
tener muchos usos. media='screen' href='../css/estilo.css'>
</head>

</html>
5

6 <meta> Los elementos vacíos <!DOCTYPE html>


<meta> no tienen un <html>
propósito definido. <head>
Pueden contener <title>Adsi 1906756 Grupo de 5
cualquier tipo de </title>
información, pero el
agente que recibe la <link rel='stylesheet' type='text/css'
página web debe ser media='screen' href='../css/estilo.css'>
capaz de interpretar
esa información. <meta charset="UTF-8">
<meta name="description"
content="Trabajo Grupal">
<meta name="keywords"
content="HTML,CSS,XML,JavaScript">
<meta name="author"
content="Grupo de 5">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">

</head>

</html>

7 <style> El elemento <style> <!DOCTYPE html>


permite incluir en una <html>
página web <head>
declaraciones de estilo <style>
que se aplican al h1 {color:red;}
propio documento p {color:blue;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
6

8 <body> La etiqueta <body> <!DOCTYPE html>


abarca todo el <html>
contenido de la página <head>
web que se visualiza en <title>Adsi 1906756 Grupo de 5
el navegador. Por ello, </title>
una página web sólo
puede tener un <link rel='stylesheet' type='text/css'
elemento <body>. media='screen' href='../css/estilo.css'>
</head>
<body>

</body>

</html>

9 <article> La etiqueta <article> <!DOCTYPE html>


está pensada para <html>
agrupar el contenido <body>
de la página que forma
una unidad en sí misma <article>
desde el punto de vista <h1>Grupo 5</h1>
temático. Es decir, que <p>Conformado por: Viviana, Cristian,
un artículo debería Edward, Kevin, Lorenzo</p>
poder publicarse y </article>
leerse como
documento </body>
independiente, aunque </html>
una página puede estar
formada por varios
artículos de temática
relacionada o no.
10 <h1> <h2> <h3> <h4> Están pensadas para <!DOCTYPE html>
<h5> <h6> marcar los títulos y <html>
subtítulos de los <body>
apartados de un
documento. <h1> Hola </h1>
<h2> ¿Como estás? </h2>
<h3> ¿Estudias o Trabajas? </h3>
<h4> ¿ Vives solo? </h4>
<h5> ¿ Tienes Netflix? </h5>
<h6> ¿ Vemos una pelicula? </h6>

</body>
</html>
7

11 <aside> La etiqueta <aside> <!DOCTYPE html>


está pensada para <html>
agrupar contenido <body>
secundario y tangencial
al contenido al que <p>Cristian invitó a Andrea a ver
acompaña (por Netflix</p>
ejemplo, un bloque de
anuncios, un grupo de <aside>
enlaces externos <h4>Ver Netflix</h4>
relacionados, una cita <p>a tu imaginación </p>
del texto). </aside>
Normalmente se suele
mostrar en los lados </body>
del documento </html>

12 <footer> La etiqueta <footer> <!DOCTYPE html>


está pensada para <html>
contener información <body>
general sobre el
documento, <footer>
información que se <p>Posted by: Grupo de 5 </p>
suele poner al final del <p>Contact information: Ambiente
documento: autor, 209_1 </p>
direcciones de </footer>
contacto, licencia o
condiciones de uso,
enlaces a otros
documentos </body>
relacionados, etc. </html>

El elemento <footer>
puede estar incluido en
<body> y entonces se
entiende que es el pie
de página de la página
en su conjunto, pero
también se puede
incluir en <article>,
<section>, <nav> y
<aside> y entonces se
entiende que es el pie
de página del elemento
que lo contiene.
8

13 <p> La etiqueta <p> está <!DOCTYPE html>


pensada para definir <html>
párrafos de texto e <body>
imágenes
<p>Cristian es lo mas lindo del
salón</p>
<p>Andrea quiere con Cristian</p>
<p>Cristian no me hace caso a mi,
porque él quiere con Andrea</p>

</body>
</html>

14 <hr> La etiqueta vacía <hr> <!DOCTYPE html>


está pensada para <html>
separar párrafos e <body>
indica un cambio de
tema. <p>Cristian es lo mas lindo del
Tradicionalmente, los salón</p>
navegadores han <p>Andrea quiere con Cristian</p>
mostrado este <hr>
separador como una <p>Cristian no me hace caso a mi,
línea horizontal porque él quiere con Andrea</p>

</body>
</html>

15 <br> La etiqueta vacía <br> <!DOCTYPE html>


está pensada para <html>
insertar saltos de línea <body>
en un bloque
<p>Tristes guerras<br>
si no es amor la empresa.<br>
Tristes. Tristes.</p>

</body>
</html>
9

16 <img> La etiqueta vacía <img> <!DOCTYPE html>


permite mostrar <html>
imágenes vectoriales o <body>
de mapa de bits en una
página web. Las <img src="smiley.gif" alt="Smiley face"
imágenes no forman width="42" height="42">
parte del documento,
sino que se mantienen </body>
como archivos aparte. </html>

17 <video> <!DOCTYPE html>


El elemento <video> <html>
HTML5 especifica una <body>
forma estándar de
insertar un video en <video width="320" height="240"
una página web. controls>
<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg"
type="video/ogg">
Your browser does not support the
video tag.
</video>

</body>
</html>
18 <table> Una tabla HTML <!DOCTYPE html>
(<table>) es un <html>
conjunto de celdas <body>
(<td> o <th>) <table border="1">
organizadas en filas <caption>Ejemplo de tabla</caption>
(<tr>) que a su vez se <tbody>
organizan en grupos de <tr>
filas (<thead>, <tbody> <td></td>
o <tfoot>). <th>A</th>
<th>B</th>
</tr>
<tr>
<th>1</th>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<th>2</th>
<td>A2</td>
<td>B2</td>
</tr>
</tbody>
</table>
10

</body>
</html>
19 <td> , <th> Cada celda de la tabla <!DOCTYPE html>
está marcada con la <html>
etiqueta <td> (celda de <body>
datos), aunque <table border="1">
también se pueden <caption>Fútbol 1º división</caption>
marcar con la etiqueta <tbody>
<th> (celda de <tr>
cabecera). Las celdas <td></td>
<th> están pensadas <th>2003/2004</th>
para utilizarse en las <th>2004/2005</th>
celdas que sirven de </tr>
cabecera para la fila o <tr>
columna, por lo que los <th>Campeón</th>
navegadores las <td>Valencia C.F.</td>
muestran resaltadas <td>F.C. Barcelona</td>
(normalmente, en </tr>
negrita y centradas en <tr>
horizontal), aunque se <th>Subcampeón</th>
pueden utilizar en <td>F.C. Barcelona</td>
cualquier celda. <td>R. Madrid</td>
</tr>
</tbody>
</table>

</body>
</html>
20 <caption> La leyenda (<caption>) <!DOCTYPE html>
es texto explicativo <html>
opcional que se <body>
muestra fuera de la
tabla (normalmente, <table border="1">
arriba). La leyenda no <caption>Liga de
puede incluir párrafos <strong>Fútbol</strong> española -
ni otros elementos de Resultados de la primera
bloque, aunque sí división</caption>
etiquetas en línea <tbody>
(<strong>, imágenes, <tr>
etc). ...

</tbody>
</table>

</body>
</html>
21 <tbody>, <thead> y Los elementos <!DOCTYPE html>
<tfoot> <tbody>, <thead> y <html>
<tfoot> abarcan una o <body>
varias filas seguidas <table>
11

para formar un grupo


de filas. Un grupo de <caption>Ejemplo de tabla</caption>
filas puede ser una
cabecera de la tabla <thead>
(<thead>), un pie de
tabla (<tfoot>) o <tr>
formar parte del
contenido de la tabla <th>País</th>
(<tbody>)
<th>Capital</th>
En una tabla puede
haber uno o varios <th>Moneda</th>
<tbody>, pero tanto la
cabecera de la tabla </tr>
(<thead>) como el pie
de tabla (<tfoot>) son </thead>
opcionales y sólo
puede haber uno de <tbody>
cada en una tabla.
<tr>
Si una tabla contiene
<thead> o <tfoot>, <td>Reino de España</td>
también debe contener
<tbody>. <td>Madrid</td>

<td>Euro</td>

</tr>

<tr>

<td>Estados Unidos
Mexicanos</td>

<td>Ciudad de México</td>

<td>Peso</td>

</tr>

<tr>

<td>República Argentina</td>

<td>Buenos Aires</td>

<td>Peso</td>

</tr>

</tbody>
12

<tfoot>

<tr>

<th>País</th>

<th>Capital</th>

<th>Moneda</th>

</tr>

</tfoot>

</table>

</body>
</html>
22 <input> y <button> Los botones se crean <!DOCTYPE html>
mediante la etiqueta <html>
<input> o mediante la <body>
etiqueta <button>. La
diferencia entre ellos <input type="button" value="Haga clic
es que <input> sólo en aquí">
puede contener texto,
mientras que <button> <button type="button"
permite incluir onclick="alert('Hello world!')">Click
elementos html como Me!</button>
imágenes.
<button type="button">
<img src="cdlibre.png"
alt="cdlibre.org" width="32"
height="32" style="vertical-align:
middle">

</body>
</html>
13

23 <select> Los menús se crean <!DOCTYPE html>


mediante la etiqueta <html>
<select>. Cada opción <body>
del menú se define <h2>Create a drop-down List</h2>
mediante la etiqueta
<option>. <label for="cars">Choose a car:</label>

<select id="cars">
<option
value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

</body>
</html

2. JavaScript

2.1 Historia del JavaScript

A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con

módems a una velocidad máxima de 28.8 kbps. En esa época, empezaban a desarrollarse las primeras

aplicaciones web y por tanto, las páginas web comenzaban a incluir formularios complejos.

Con unas aplicaciones web cada vez más complejas y una velocidad de navegación

tan lenta, surgió la necesidad de un lenguaje de programación que se ejecutara en el

navegador del usuario. De esta forma, si el usuario no rellenaba correctamente un formulario,

no se le hacía esperar mucho tiempo hasta que el servidor volviera a mostrar el formulario

indicando los errores existentes.


14

Brendan Eich, un programador que trabajaba en Netscape, pensó que podría

solucionar este problema adaptando otras tecnologías existentes (como ScriptEase) al

navegador Netscape Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich denominó

a su lenguaje LiveScript.

Posteriormente, Netscape firmó una alianza con Sun Microsystems para el desarrollo

del nuevo lenguaje de programación. Además, justo antes del lanzamiento Netscape decidió

cambiar el nombre por el de JavaScript. La razón del cambio de nombre fue exclusivamente

por marketing, ya que Java era la palabra de moda en el mundo informático y de Internet de

la época.

La primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0 ya

incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo tiempo, Microsoft

lanzó JScript con su navegador Internet Explorer 3. JScript era una copia de JavaScript al que

le cambiaron el nombre para evitar problemas legales.

Para evitar una guerra de tecnologías, Netscape decidió que lo mejor sería

estandarizar el lenguaje JavaScript. De esta forma, en 1997 se envió la especificación

JavaScript 1.1 al organismo ECMA European Computer Manufacturers Association).

ECMA creó el comité TC39 con el objetivo de "estandarizar de un lenguaje de script

multiplataforma e independiente de cualquier empresa". El primer estándar que creó el

comité TC39 se denominó ECMA-262, en el que se definió por primera vez el lenguaje

ECMAScript.

Por este motivo, algunos programadores prefieren la denominación ECMAScript para

referirse al lenguaje JavaScript. De hecho, JavaScript no es más que la implementación que

realizó la empresa Netscape del estándar ECMAScript.


15

2.2 Operadores lógicos, relacionales y aritméticos

Tabla 2.

Operadores lógicos

Operador Uso Descripción


Regresa expr1 si tal puede convertirse a false; de
lo contrario, regresa expr2. De esta forma,
AND (&&) lógico expr1 && expr2 cuando se usa con valores Boolean, && regresa
true si ambos operandos son verdaderos; de lo
contrario regresa false.
Regresa expr1 si tal puede convertirse a true; de
lo contrario, regresa expr2. De esta forma,
OR (||) lógico expr1 || expr2 cuando se usa con valores Boolean, || regresa true
si cualquier operando es verdadero; pero si
ambos son falsos, regresa "false".
Regresa false si su único operando puede
NOT (!) lógico !expr
convertirse a true; de lo contrario, regresa true.
Nota: Tomado de [ CITATION dev20 \l 9226 ]

Tabla 3.

Operadores relacionales

Operadores
Descripción Ejemplo
relacionales

== Es igual a == b
=== Es estrictamente igual a === b
!= Es distinto a != b
Es estrictamente
!== a !== b
distinto
Menor, menor o igual,
<, <=, >, >= a <=b
mayor, mayor o igual
Nota: Tomado de [ CITATION apr20 \l 9226 ]
16

Tabla 4.

Operadores aritméticos

Operador Descripción Ejemplo

Resto (%) Operador binario correspondiente 12 % 5 devuelve 2.


al módulo de una operación.
Devuelve el resto de la división de
dos operandos.

Incremento (++) Operador unario. Incrementa en Si x es 3, entonces +


una unidad al operando. Si es +x establece x a 4 y
usado antes del operando (+ devuelve 4, mientras que x+
+x) devuelve el valor del operando + devuelve 3 y, solo después
después de añadirle 1 y si se usa de devolver el valor,
después del operando (x+ establece x a 4.
+) devuelve el valor de este antes
de añadirle 1.

Decremento (--) Operador unario. Resta una unidad Si x es 3, entonces --


al operando. Dependiendo de la x establece x a 2 y devuelve 2,
posición con respecto al operando mientras que x-- devuelve 3 y,
tiene el mismo comportamiento solo después de devolver el
que el operador de incremento. valor, establece x a 2.

Negación Unaria (-) Operación unaria. Intenta * -"3" devuelve -3.


convertir a número al operando y * -true devuelve -1.
devuelve su forma negativa.

Unario positivo (+) Operación unaria. Intenta * +"3" devuelve 3.


convertir a número al operando. * +true devuelve 1.

Exponenciación (**)  Calcula la potencia de la base al 2 ** 3 devuelve 8.


valor del exponente. Es 10 ** -1 devuelve 0.1.
equivalente a baseexponente

Nota: Tomado de [ CITATION apr20 \l 9226 ]

2.3 Estructuras

2.3.1 If …else
17

Por medio de if se puede indicar una condición que, de cumplirse, permite la ejecución de

uno o más enunciados. Por medio de else se puede establecer una alternativa, aunque su uso es

opcional.

La sintaxis de esta estructura es la siguiente:

If (condición){ …enunciados a ejecutar si se cumple la condición…


} else {
…enunciados a ejecutar si NO se cumple la condición…
}
Las instrucciones se pueden concatenar: if (variable_a_comparar>100){
alert ("El valor de la variable es mayor que 100");
} else if (variable_a_comparar==100) {
alert ("El valor de la variable es exactamente 100");
} else {
alert ("El valor de la variable es menor que 100");
}

2.3.2 Switch

Por medio de Switch se puede listar una serie de bloques de enunciados que se

ejecuten dependiendo del valor de una variable.

La sintaxis sería:

Switch (variable){
case(valor1):
…enunciados a ejecutar para ese valor…
break;
case(valor2):
…enunciados a ejecutar para ese valor…
18

break;
case(valor3):
…enunciados a ejecutar para ese valor…
break;
default:
…enunciados a ejecutar cuando el valor no
coincida con ninguno de los anteriores…
break;
}
Por ejemplo, supongamos que analizamos el valor de una variable y que dependiendo de
éste lanzamos un mensaje de alerta:
Switch (nombrePersonaje){
case('Harry Mason'):
alert('El protagonista del primer «Silent Hill»');
break;
case('James Sunderland'):
alert('El protagonista de «Silent Hill 2»');
break;
case('Maria'):
alert('Protagonista de «Silent Hill 2: Born from a Wish»');
break;
case('Heather Mason'):
alert('Protagonista de «Silent Hill 3», hija de Harry Mason');
break;
case('Henry Townshend'):
alert('Protagonista de «Silent Hill 4: The Room»');
break;
case('Travis Grady'):
alert('Protagonista de «Silent Hill Origins»');
break;
default:
alert('El nombre no corresponde a ningún protagonista de «Silent Hill»');
19

break;
}

break indica que el bloque de código puede dejar de interpretarse cuando se haya dado una

coincidencia.

La especificación de default: es opcional. En este caso, si no se emplease simplemente no se

lanzaría ninguna alerta en caso de que el valor de nombrePersonaje no coincidiese con

ninguno de los nombres recogidos en switch. [ CITATION cod20 \l 9226 ]

2.3.3 For

Hay varias estructuras para crear un bucle, la más utilizada es la estructura for, la cual la

veremos en esta página, dejando las demás para temas posteriores.[ CITATION apr \l

9226 ]

La estructura for tiene la siguiente sintaxis:

for (inicialización; condición; actualización) {

...Sentencias javascript ...

En primer lugar, escribimos la palabra reservada for seguida de un paréntesis.

Dentro del paréntesis debemos escribir tres sentencias: inicializacion, condición, y

actualización. El bucle funcionará mientras la condición se cumpla, para ello se toma una

variable inicial -inicialización-, y en cada repetición se va variando o actualizando

-actualización-.

Por último, dentro de los corchetes escribimos las sentencias que queremos que se repitan

 Inicialización: var i = 1 Escribimos una variable y le asignamos el valor 1:

 Condición: i <= 7 Escribimos la condición necesaria para que el bucle se

repita. En este caso, mientras la variable sea menor o igual a 7 el bucle se repetirá.
20

 Actualización: i++ Al acabar cada repetición el valor de la variable cambia,

La estructura del bucle en este ejemplo será la siguiente:

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

...sentencias JavaScript...

2.3.4 do...while

La sentencia do...while se repite hasta que la condición especificada que se evalúa sea false.

Una sentencia do...while se mostrará como sigue:

do {
sentencia
}while (condición);
sentencia
 se ejecuta antes de que la condición sea evaluada. Para ejecutar múltiples

sentencias, use un bloque de sentencias ({ ... }) para agruparlas. Si condición es true, la

sentencia se ejecuta de nuevo. Al final de cada ejecución, la condición es comprobada.

Cuando la condición es falsa, la ejecución se detiene y el control pasa a la sentencia

siguiente al do...while.

En el siguiente ejemplo, el bucle do itera al menos una vez y vuelve a hacerlo mientras i sea

menor que 5.

do {
i += 1;
console.log(i);
} while (i < 5);

2.3.5 while
21

Una sentencia while ejecuta sus sentencias mientras la condición sea evaluada como

verdadera. Una sentencia while tiene el siguiente aspecto:

while (condición){
sentencia
}
Si la condición cambia a falsa, la sentencia dentro del bucle deja de ejecutarse y el control

pasa a la sentencia inmediatamente después del bucle.

La condición se evalúa antes de que la sentencia contenida en el bucle sea ejecutada. Si la

condición devuelve verdadero, la sentencia se ejecuta y la condición se comprueba de nuevo.

Si la condición es evaluada como falsa, se detiene la ejecución y el control pasa a la sentencia

siguiente al while.

Para ejecutar múltiples sentencias, use un bloque de sentencias ({ ... }) para agruparlas.

Ejemplo 1

El siguiente bucle while itera mientras n sea menor que tres:

n = 0;
x = 0;
while (n < 3) {
n++;
x += n;
}
Con cada iteración, el bucle incrementa n y añade ese valor a x. Por consiguiente, x y n toman

los siguientes valores:

Después del primer paso: n = 1 y x = 1

Después del segundo paso: n = 2 y x = 3

Después del tercer paso: n = 3 y x = 6


22

Tras completar el tercer paso, la condición n < 3 ya no es verdadera, por tanto, el bucle

termina.

2.3.6 Label

Un label proporciona una sentencia con un identificador que permite referirse a él desde

cualquier lugar de su programa. Por ejemplo, usted puede usar un label para identificar un

bucle, y usar las sentencias break o continue para indicar si el programa debe interrumpir un

bucle o continuar su ejecución.

La sintaxis de la sentencia label es:

label :
sentencia
El valor de label puede ser cualquier identificador JavaScript que no sea una palabra

reservada. La sentencia que usted identifique con un label podrá ser cualquier sentencia.

Ejemplo:

En este ejemplo, el label markLoop identifica a un bucle while.

markLoop:
while (theMark == true) {
doSomething ();
}

2.4 Funciones
La definición de una función (también llamada declaración de función o sentencia de función)

consiste de la palabra clave (reservada)  function, seguida por:

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


23

 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, { }

Sintaxis:

function nombre_funcion(parámetros){

instrucciones;
}
Ejemplo:
function sumar (){
var num1 = 5;
var num2 = 8;
suma = num1 + num2;
alert ("La suma es: "+suma);
}
En JavaScript existen dos maneras de definir una función las cuales pueden ser mediante:

declaración de función o una expresión de función.

Para declarar una función se le asigna un nombre a la función. Dicha función se debe cargar

en el ámbito de la aplicación antes de la ejecución del código.

Ejemplo:

function Saludar (){


alert ("Hola a todos");
}

Para expresar una función, se crea una función anónima y se le asigna a una variable. Esta

función no se encuentra lista hasta que esa línea en particular sea evaluada durante la

ejecución del código.


24

Ejemplo:

var Cantar = function(){


alert("Yo canto muy bien");
}

Para invocar una función desde cualquier parte de nuestro programa, solo es necesario

escribir el nombre de la función creada seguido de paréntesis( en caso de tener parámetros

indicarlos dentro, separados por comas).

Ejemplo:

Sumar();
Saludar();
Cantar();

Para crear una función con parámetros, simplemente se debe ingresar los parámetros que

deseemos dentro de los paréntesis, una función puede tener muchos parámetros separados por

comas.

Ejemplo 1:

function Saludar(nombre, edad){


this.nombre = nombre;
this.edad = edad;
console.log("Hola mi nombre es: "+ this.nombre + " y tengo: " + this.edad + "
años." );
}
Saludar(“Juniors”, 24);

Ejemplo 2

function Sumar(num1,num2){
25

var resultado= num1 + num2;


alert(“La suma es: ”+ resultado);
}
Suma (8,9);

Es importante tener en cuenta de igual manera que una función JavaScript puede tener la

instrucción return. Esta es requerida si queremos que la función dada nos retorne un valor. La

instrucción return debe ser la última línea en una función.[ CITATION dev \l 9226 ]

Ejemplo:

function Valores(a,b,c){
return a+b+c;
}
var suma = Valores(3,4,5); // esta función nos retorna el valor de 12

2.5 Arreglos

Al igual que en la mayor parte de los lenguajes de programación, en JavaScript podemos

trabajar con array (también llamados arreglos, vectores o matrices). Los arrays son de gran

importancia ya que permiten organizar series de datos que comparten el mismo nombre pero

se diferencian por un índice. [ CITATION apr201 \l 9226 ]

La declaración de un array se hace de misma forma que se declara cualquier variable: var

nombreDelArray; el array adquiere condición de tal cuando la variable se inicializa con

forma de array, bien como array con un contenido inicial o bien como array vacío:

var pais;

pais = ['Mexico', 'España', 'Argentina', 'Chile', 'Colombia', 'Venezuela', 'Perú',

'Costa Rica'];
26

O podemos hacerlo todo en una sola línea:

var pais = ['Mexico', 'España', 'Argentina', 'Chile', 'Colombia', 'Venezuela',

'Perú', 'Costa Rica'];

En este ejemplo decimos que hemos declarado un array de 8 elementos. Cada

elemento tiene un índice, comenzando los índices por el número 0. Por tanto los 8 elementos

del array anterior son: pais[0], pais[1], pais[2], pais[3], pais[4], pais[5], pais[6] y pais[7].

También podemos inicializar un array vacío de dos formas distintas:

var fruta = [];

var fruta = new Array();

Ambas expresiones tienen el mismo efecto: crean un array vacío. En este caso se

entiende que se añadirán contenidos a posteriori. Por ejemplo fruta[3] = 'manzana';

2.6 Matrices

Las matrices se describen como "objetos tipo lista"; básicamente son objetos individuales que

contienen múltiples valores almacenados en una lista. Los objetos de matriz pueden

almacenarse en variables y tratarse de la misma manera que cualquier otro tipo de valor, la

diferencia es que podemos acceder individualmente a cada valor dentro de la lista y hacer

cosas útiles y eficientes con la lista, como recorrerlo con un bucle y hacer una misma cosa a

cada valor. [ CITATION dev201 \l 9226 ]

Las matrices se construyen con corchetes, que contiene una lista de elementos separados por

comas.
27

Digamos que queríamos almacenar una lista de compras en una matriz — haríamos algo

como lo siguiente. Ingresa las siguientes líneas en la consola:

var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];

shopping;

En este caso, cada elemento de la matriz es una cadena, pero ten en cuenta que puedes

almacenar cualquier elemento en una matriz — cadena, número, objeto, otra variable, incluso

otra matriz. También puedes mezclar y combinar tipos de elementos — no todos tienen que

ser números, cadenas, etc. Prueba estos:

var sequence = [1, 1, 2, 3, 5, 8, 13];

var random = ['tree', 795, [0, 1, 2]];

2.7 Conectar un archivo de JavaScript

Con la etiqueta     <script ></script>

Ejemplo
<!DOCTYPE html>
<html>
<head>    
    <title>Ejercicio1</title>   
    <script src='../js/Ejercicio1.js'></script>
</head>
<body>    
</body>
</html>
28

3. Css

3.1 ¿Para qué sirve Css?

CSS es un lenguaje de programación que se utiliza para definir el estilo y el

aspecto de un documento que se ha escrito a través de un lenguaje de etiquetas,

como HTML . Conocido también como hojas de estilo en cascada, es el que se

emplea para dar colores, indicar tipos de letra o incluso señalar aspectos como el

espacio entre elementos para dotar de estilo a una web.

CSS sirve para poder dar un estilo a cualquier web y hacerlo con las reglas que se

deseen. Es el lenguaje con el que el programador y el navegador se comunican para indicar a

este último cómo ha de distribuir los contenidos de una web en base a las instrucciones

indicadas en los correspondientes ficheros.

3.2 Aplicar css al sitio web

Figura 1. Ejemplo css


29

Figura 1. Ejemplo css

Bibliografía
aprenderaprogramar.com. (2020). Obtenido de aprenderaprogramar.com:
https://www.aprenderaprogramar.com/index.php?
option=com_content&view=article&id=795:operadores-logicos-javascript-relacionales-igual-
distinto-and-or-not-prioridades-ejemplos-cu01117e&catid=78&Itemid=206

aprenderaprogramar.com. (2020). Obtenido de aprenderaprogramar.com :


https://www.aprenderaprogramar.com/index.php?
option=com_content&view=article&id=799:arrays-javascript-arreglos-declaracion-
inicializacion-array-vacio-length-undefined-ejemplos-cu01121e&catid=78&Itemid=206

aprende-web. (s.f.). Obtenido de aprende-web: https://aprende-web.net/javascript/js4_4.php


30

codexexempla. (2020). Obtenido de codexexempla:


http://www.codexexempla.org/curso/curso_4_2_c.php

devcode.la. (s.f.). Obtenido de devcode.la: https://devcode.la/tutoriales/funciones-en-javascript/

developer. (2020). Obtenido de developer:


https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Arrays

developer. (2020). Obtenido de developer.:


https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Operadores
_l%C3%B3gicos

Gutierrez, R. T. (2012). El inicio de la Web: historia. ArtefaCToS, 26.

mclibre. (2019). Obtenido de mclibre: https://www.mclibre.org/consultar/htmlcss/html/html-


etiquetas.html

uniwebsidad. (2020). Obtenido de uniwebsidad: https://uniwebsidad.com/libros/javascript/capitulo-


1/breve-historia

w3schools. (2020). Obtenido de w3schools: https://www.w3schools.com/

También podría gustarte