JavaScript - Introducción

17/2/2018

La verdadera importancia de JavaScript

La importancia de JavaScript cada vez va siendo mayor, prácticamente puede ser usado en cualquier ámbito, aunque quizás su uso más conocido sea el de dotar a las páginas web de interactividad, el alcance al que ha llegado es mucho mayor; se usa en la web, en el desarrollo de aplicaciones móvil, sistemas operativos, servidores, bases de datos, plataformas de juegos y un largo etc.

La idea es simple, si Internet está en todas partes, JavaScript también.

¿Qué relación tiene con HTML5?

Para entender la especificación HTML5 tenemos que entenderla como un todo unitario el cual se sostiene sobre tres puntos, estos son: HTML, CSS y JavaScript. En artículos anteriores vimos HTML y los elementos nuevos que incorporaba y su función en la nueva especificación (la de dar estructura), también estuvimos practicando con CSS aplicando estilos a nuestra página de pruebas. Y nos falta uno, el último y en este caso hemos guardado lo mejor para el final, decimos esto porque este es uno de los puntos más fuertes donde descansa la nueva especificación HTML5 y no es otro que JavaScript.

¿Java y JavaScript tienen algo que ver?

Por si alguno se lo ha preguntado os lo cuento, la respuesta es no, Java es anterior y es un lenguaje multiplataforma creado por la empresa Sun Microsystems y James Gosling en el año 1991, como curiosidad os diremos que fue desarrollado para receptores de televisión y dispositivos embebidos, aunque su uso después se extendiera.
Mientras que JavaScript es posterior, creado por la empresa Netscape por Brendan Eich y su propósito era dotar de interactividad a las páginas web, desde ese momento el lenguaje fue adoptado por todos los navegadores principales, permitiendo crear modernas aplicaciones web, permitiendo hasta interactuar sin tener que cargar la página de nuevo con cada acción.
El lenguaje tuvo varios nombres antes de que decidieran llamarlo JavaScript, Aquí hay dos versiones de una misma historia: una dice que por la gran influencia en su sintaxis por parte del lenguaje Java y otra que fue una maniobra de marketing debido al crecimiento que estaba experimentando Java en aquella época, cada uno que saque sus conclusiones.

ECMAScript

Como hemos explicado el lenguaje fue inicialmente creado para el navegador Netscape, pero rápidamente se extendió fuera del ámbito original y se requirió de una estandarización y así que quedase claro cómo funcionaría el lenguaje y se asegurara que los programas que dijesen que admitían JavaScript realmente fuese verdad.

Así nació el estándar ECMAScript, (ECMA es el nombre de la asociación europea de fabricantes de computadoras, European Computer Manufacturer Association). Después de esto, decir que se podría usar cualquiera de las dos terminaciones ECMAScript o JavaScript.

¿Qué es JavaScript?

Pero bueno después de este paseo por la historia sigamos, JavaScript es un lenguaje de scripting multiplataforma y orientado a objetos. Al principio había sido tomado en si, como un complemento de navegador, pero esto cambió gracias al desarrollo de nuevos motores de interpretación, los cuales buscaban acelerar el procesamiento del código. La clave del éxito fue la de los motores que trasformaron el código JavaScript en código máquina, logrando de esta manera disminuir los tiempos de ejecución, consiguiendo velocidades tales como las que tendrían las aplicaciones de escritorio dotando a la web de una fluidez nunca vista.

¿Qué se consiguió de esta manera? Pues con esta dirección se sobrepasaron las anteriores limitaciones de velocidad que se tenían, y JavaScript se convirtió en la mejor opción para trabajar en la web.

Los navegadores fueron incorporando APIs (Interfaces de programación de aplicaciones) y así asistir al lenguaje en diferentes funciones que pueden ir desde capturar y manipular un video desde la cámara web del usuario hasta la generación de gráficos 3D…

La intención final es proporcionar potentes funcionalidades a partir de técnicas de programación más sencillas, ampliando las posibilidades del lenguaje a la vez que lo simplifica, esto facilita la creación de programas para nuestras webs llegando a poder programarse hasta juegos…

Visto todo esto vamos a empezar y estudiar JavaScript, pero por si no habéis seguido artículos anteriores aquí dejamos un enlace con un archivo para que ejecutéis las prácticas en él o si lo proferís el texto aquí debajo con las fotos.

<!DOCTYPE html>
<html lang="es">
<head>
       <meta charset="utf-8">
       <meta name="author" content="NegociosContra">
       <meta name="description" content="Una revista digital sobre tecnología y sostenibilidad">
       <meta name="keywords" content="tecnología, cine, series, videojuegos, taller">
       <title>Negocios Contra la Obsolescencia</title>
       <link rel="stylesheet" href="estilosdenegocioscontra2.css" >
</head>
<body>
       <div id="estructura">
       <header id="cabecera">
             <h1 id="titulo">negocios contra la obsolescencia</h1>
       </header>
       <nav id="menu">
             <ul>
                    <li>Inicio</li>
                    <li>Tecnología</li>
                    <li>Taller</li>
                    <li>Arte y Videojuegos</li>
                    <li>Cine y Series</li>
                    <li>Moda y Supervivencia</li>
                    <li>Mercadillo</li>
                    <li>Economía Social</li>
                    <li>Nosotros</li>
             </ul>
       </nav>
       <section id="seccion">
             <article>
                    <header>
                           <h1>HTML5 desde el principio - capítulo 5,<br> CSS3 maquillando la página – 1era parte</h1>
                           <p class="subheading">Programación básica</p>
                           <time datetime="2017-06-23" pubdate>publicado 23-06-2017</time>
                    </header>
                    <figure>
                           <img class="imagenes" src="foto1 html5-5.jpg">
                           <figcaption>
                                  PIXABAY montaje kasmangou
                           </figcaption>
                    </figure>
                    <p class="pepito">Bienvenidos de nuevo a nuestro curso de programación. Después de analizar cómo se estructura una página usando HTML5, ha llegado la hora de darle forma, ya hemos hablado acerca de la integración de HTML5 junto a CSS y Javascript, también hemos aclarado el papel que desempeña cada uno de ellos dentro de esta confluencia, así que no vamos a perder el tiempo dándole ya más vueltas y vamos a empezar a ver cómo podemos darle la imagen exacta que queremos a nuestra web con CSS3.</p>
                    <footer>
                           <address>
                           <p>Autor: Kasmangou</p>
                           <a href="http://www.negocioscontralaobsolescencia.com">Negocios Contra</a>
                           </address>
                           <p class="comentarios">Comentarios XXX</p>
                    </footer>
             </article>
             <article>
                    <header>
                           <h1>Corriente eléctrica para dummies: diferenciando entre Voltaje y Amperaje.</h1>
                           <p class="subheading">Taller de electrónica</p>
                           <time datetime="2017-06-21" pubdate>publicado 21-06-2017</time>

                    </header>
                    <figure>
                           <img class="imagenes" src="foto1 VOLTAJE VS AMPERAJE.jpg">
                           <figcaption>
                                  PIXABAY
                           </figcaption>
                    </figure>
                    <p class="pepito">Seguimos con nuestros artículos para poder realizar nuestras reparaciones del día a día donde no necesitamos tener unos conocimientos teóricos tremendos, y seguir un curso sencillo y completo puesto al día, con la tecnología actual que nos permita entender y reparar nuestros problemillas.</p>
                    <footer>
                           <p>Autor: Inflexion Point Doctor</p>
                           <a href="http://www.negocioscontralaobsolescencia.com">Negocios Contra</a>
                           <p class="comentarios">Comentarios XXX</p>
                    </footer>
             </article>
       </section>
       <aside id="lateral">
             
             <p class="lateral">Autores</p>
                    <ul>
                           <li class="transition"><a href="http://www.negocioscontralaobsolescencia.com/inicio/category/kasmangou">Kasmangou</a></li>
                           <li class="transition"><a href="http://www.negocioscontralaobsolescencia.com/inicio/category/inflexion-point-doctor">Inflexion Point Doctor</a></li>
                           <li class="transition"><a href="http://www.negocioscontralaobsolescencia.com/inicio/category/manipinkless">ManiPinkless</a></li>
                           <li class="transition"><a href="http://www.negocioscontralaobsolescencia.com/inicio/category/ruben-requena-sanchez">Rubén Requena Sánchez</a></li>
                           <li class="transition"><a href="http://www.negocioscontralaobsolescencia.com/inicio/category/pipatilas">Cristian Acosta (Pipatilas)</a></li>
                           <li class="transition"><a href="http://www.negocioscontralaobsolescencia.com/tecnologia/category/mario-quiroga">Ana Carrión</a></li>
                    </ul>
       </aside>
       <footer id="piepagina">

                    <p class="pie1">Aviso legal</p>
                    <p class="pie2">Política de privacidad</p>
                    <p class="pie3">Creative Commons</p>
                    <img src="by-nc-nd-eu-petit_orig.png">
                    <p class="pie4">Esta obra está bajo una licencia de Creative Commons<br>
                    Reconocimiento-NoComercial-SinObraDerivada 3.0<br>
                    España</p>
                    <p class="pie5">Siguenos en:</p>

                    <address>
                    Twitter @NEGOCIOS_CONTRA<br>
                    Facebook @negocioscontralaobsolescencia<br>
                    <br>
                    Contacto:
   <br>
                    <br>
                    [email protected]<br>
                    [email protected]
                    </address>
       </footer>
       </div>
</body>
</html>

Texto de página de pruebas HTML, lo copiáis y lo guardáis como JAVASCRIPT1.html

* {
       margin: 0px;
       padding: 0px;
       }

h1 {
       font: bold 20px verdana, sans-serif;
       }

h2 {
       font: bold 14px verdana, sans-serif;
       }



header, section, footer, aside, nav, article, figure, figcaption {
display: block;
       }

body {
       text-align: center;
       }


#estructura {
       width: 960px;
       margin: 10px auto;
       text-align: left;
       }

#cabecera {
       background-image: url("prueba.jpg");
       padding: 90px;


       }

#titulo {
       text-align: center;
       padding: 10px, 10px;
       background-color: #fa8072;
       font: 30px SEGA, verdana, sans-serif;
       color: #ffff00;
       text-shadow: #b22222 3px 3px 5px;


       -moz-border-radius: 40px / 20px;
       -webkit-border-radius: 40px / 20px;
       border-radius: 40px / 20px;

       -moz-box-shadow: rgb(150,150,150) 5px 5px 10px;
       -webkit-box-shadow: rgb(150,150,150) 5px 5px 10px;
       box-shadow: rgb(150,150,150) 5px 5px 10px;

       background: -webkit-linear-gradient(top, #ffc0cb, #ff0000);
       background: -moz-linear-gradient(top, #ffc0cb, #ff0000);
       }
       /*
       -moz-transition: -moz-transform 2s ease-in-out 0.5s;
       -webkit-transition: -webkit-transform 2s ease-in-out 0.5s;
       }

#titulo:hover {
       -moz-transform: translateX(-80px) translateY(40px) rotate(12deg) scale(1,5);
       -webkit-transform: translateX(-80px) translateY(40px) rotate(12deg) scale(1,5);
       }
       */
@font-face { font-family: 'SEGA';
src: url('MR ROBOT.ttf');
}

#menu {
background: #FF7F50;
padding: 10px 20px;
}

#menu li {
display: inline-block;
list-style: none;
padding: 5px 8px;
font: bold 12px verdana, sans-serif;
}

#seccion {
       float: left;
       width: 600px;
       margin: 20px 10px;
       }

#lateral {
       float: right;
       width: 200px;
       margin: 15px 5px;
       padding: 15px;
       background: #FFFFFF;
}

#lateral {
       font-weight: bold;
       color: #b22222;
       }

#lateral li {
       list-style: none;
       text-decoration: none;
}

.transition:hover{
       -moz-transform: rotate(5deg);
       -webkit-transform: rotate(5deg);
       }

.imagenes {
       float: left;
       width: 100%;
       margin: 0px;
       }



#piepagina {
       clear: both;
       text-align: center;
       padding: 20px;
       border-top: 2px solid #000000;
       }


article {
       color: #696969;
       background: #E6e6fa;
       border: 1px solid #e0ffff;
       padding: 20px;
       margin-bottom: 15px;
       }

article header {
       color: #2f4f4f;
       }


article footer {
       text-align: right;
       color: #000000;
       }

time {
       color: #0000ff;
       }

figcaption {
       font: italic 8px verdana, sans-serif;
       padding-bottom: 10px;
       color: #b22222;
       }


div {
       width: 100px;
       margin: 20px;
       padding: 10px;
       border: 1px solid #000000;
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       }


       background: #ffdab9;
       padding: 10px,10px;

       -moz-border-radius: 20px;
       -webkit-border-radius: 20px;
       border-radius: 20px;
       }

Texto estilos página de prueba, copiáis el texto y lo guardáis como estilosdenegocioscontra2.css

foto1 html5-5.jpg

foto1 VOLTAJE VS AMPERAJE.jpg

prueba.jpg

by-nc-nd-eu-petit_orig.png

mr_robot.ttf
File Size:	17 kb
File Type:	ttf

Descargar archivo

Faltará el archivo MR ROBOT.ttf que es la fuente del título, podéis descargarla en el enlace o bien usar otra, pero recordar cambiarle el nombre en el archivo .ttf o en el código css.
Ahora cogéis los dos archivos el .html y el .css junto con las fotos y el archivo .ttf y lo metéis todo dentro de una carpeta.

¡Importante!
Todo el código utilizado en estos archivos ha sido explicado en los artículos anteriores de HTML5 desde el principio, que consta de 11 partes en las cuales se explica a grandes rasgos HTML5 y CSS.

pagina.rar
File Size:	265 kb
File Type:	rar

Descargar archivo

Comenzaremos como otros antes…

Vamos a comenzar para romper el hielo con un ¡Hola mundo!

Cogemos el archivo que hemos descargado: JAVASCRIPT1.html (o bien copiado), el cuál es sobre el que vamos a usar y modificar con un editor de texto plano (blog de notas de Windows, Notepad++, etc.). En JavaScript existen tres formas de incorporar código a nuestra página, si bien, aunque os vamos a mostrar todas las formas más adelante, la manera que se recomienda usar es con archivos externos como en CSS (¿os acordáis?, bueno sino hacéis memoria o no habéis leído los artículos anteriores de HTML y CSS, os los aconsejamos encarecidamente los hemos hecho nosotros, no pasa nada, porque lo vamos a explicar todo lo que vayamos haciendo nuevo).

Hoy veremos la primera forma de incorporar JavaScipt, para realizar una primera práctica rápida, antes de comenzar de una manera estructurada.

En línea

Esta sería la forma más simple de añadir las funcionalidades de JavaScript a nuestro documento, utilizando atributos disponibles en elementos HTML. Estos atributos se denominan manejadores de eventos, hacen que se ejecute código dependiendo de las acciones del usuario, ¿qué quiere decir esto?, los manejadores de eventos que más se suelen usar son por ejemplo onclick, onMouseOver u onMouseOut, con ellos al pasar nuestro ratón por encima de una imagen o a hacer clic con él se pueden activar acciones, llamar a un programa o que salte un molesto popup, también se pueden añadir eventos de teclado y de la ventana, ejecutando comandos después de haber presionado una tecla o al cambiar alguna condición en la ventana de nuestro navegador (como ejemplos onload u onfocus), pero hoy solo usaremos oneclic.

Dicho esto, ahora vamos a ir a la línea 14 del archivo que descargamos y acabos de abrir con un editor de texto:

<h1 id="titulo">negocios contra la obsolescencia</h1>

Ejemplo 1

Lo que vemos en el ejemplo 1 es la línea de código que queremos modificar y la del ejemplo 2 es como debe quedar.

<h1 id="titulo" onclick="alert('Hola mundo!')">negocios contra la obsolescencia</h1>

Ejemplo 2

En el código de arriba se ha usado el manejador de eventos oneclick, si escribís este texto y guardáis como HTML y lo ejecutáis en el navegador veréis que al hacer clic con el ratón sobre el título aparecerá una ventana que dice “Hola mundo!”. Veremos que la función del manejador de eventos oneclick es una sentencia del tipo: “Cuando se haga clic sobre esto (en este caso un título) se hace esto otro”, lo que en este ejemplo hemos programado es que cuando se haga clic se muestre una pequeña ventana con el mensaje “Hola mundo!”.

Arriba vemos la imagen que saldrá en la pantalla al abrir el archivo de texto con nuestro navegador, da igual que este modificado el texto o no, la imagen será la misma.

Y sobre estas líneas vemos la ventana que sale al pulsar sobre el título, en la cual nos dice: Hola mundo!

Bueno, hasta aquí esta semana, nos vemos en breve con el siguiente capítulo del nuevo curso de JavaScript.

Manuel Castelló (kasmangou)

Temas relacionados: Programación, Redacción independiente, kasmangou, JavaScript

Reconocimientos y más información sobre la obra gráfica
ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.

0 Comentarios