Ejemplos de javascript

Cuando hablamos de Javascript, lo hacemos de un tipo de lenguaje informático que podemos utilizar para crear todo tipo de páginas web, además de lograr otras funciones relacionadas con internet. Veamos a continuación, los mejores Ejemplos de Javascript.

Javascript es un lenguaje de programación orientado a objetos, basado en prototipos, imperativo y dinámico. Se trata del lenguaje de programación más utilizado en la red, y permite obtener dinamismo e interactividad en internet.

Este lenguaje, se compone de una secuencia de comandos que nos permite implementar cosas complejas en páginas web. Cada vez que una página web hace algo más que simplemente sentarse y mostrar información estática para que la vea, mostrando actualizaciones de contenido oportunas, mapas interactivos, animación 2D / Gráficos 3D, jukeboxes de video desplazables, etc. – puede apostar que JavaScript probablemente esté involucrado.

JavaScript permite así que tu página sea interactiva de otras formas que no involucran formularios en absoluto. Puede agregar animaciones a la página que atraigan la atención sobre una parte específica de la página o que faciliten el uso de la página. Puede proporcionar respuestas dentro de la página web a varias acciones que realiza el visitante para evitar la necesidad de cargarlas.

Javascript, podemos añadir, es la “tercera capa del pastel de capas” de las tecnologías web tras el lenguaje HTML y CSS.

De este modo podemos decir que para cualquier web que queramos crear necesitaremos estos tres lenguajes:

HTML es el lenguaje de marcado que utilizamos para estructurar y dar sentido a nuestro contenido web, por ejemplo, definir párrafos, encabezados y tablas de datos, o incrustar imágenes y videos en la página.
CSS es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro contenido HTML, por ejemplo, establecer colores de fondo y fuentes, y diseñar nuestro contenido en múltiples columnas.
JavaScript es un lenguaje de scripting que permite crear contenido de manera dinámica, controlar multimedia, animar imágenes y prácticamente todo lo demás. (De acuerdo, no todo, pero es sorprendente lo que puedes lograr con unas pocas líneas de código JavaScript).

Los tres se estructuran de modo que dan forma a nuestra web paso a paso. Mira aquí un ejemplo con tres campos. Primero HMTL. luego le sumamos código CSS y por último código Javascript.

<p>Player 1: Chris</p>

Ahora añadimos el CSS:

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}

Y para acabar, Javascript da dinamismo a todo:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

A continuación, te muestro algunos ejemplos más de Javascript para que comprendas mejor cuál es su utilidad y uso.

Ejemplos de Javascript

Javascript, como verás en los ejemplos a continuación, se incluye dentro de HTML (el cual no es un lenguaje de programación, a diferencia de Javascript). En estos dos ejemplos de Javascript, verás cómo crear una calculadora para ecuaciones matemáticas, y un código para calcular el área de un triángulo.

<HTML>

<HEAD>

<TITLE>Ejemplos de Javascript</TITLE>

function calc(form) {

form.result.value=eval(form.expr.value); }

</script>

</HEAD>

<form>

<tr align=center><th align=right>Equasion:</th> <td><input type=text name=expr size=15></td> <td rowspan=2><input type=button value=” Calculate ” onclick=”calc(this.form)”></td></tr>

<tr align=center><th align=right>Answer:</th> <td><input type=text name=result size=15></td></tr>

</table>

</form>

</body>

</html>

Este es uno de los ejemplos de Javascript más típicos, ya que, con ese código, se obtiene una calculadora que permite realizar operaciones con ecuaciones matemáticas.

<HTML>

<HEAD>

<TITLE>Ejemplos Javascript</TITLE>

function area() {

var base = prompt(“enter the base of the triangle”)

var height = prompt(“enter the height of the triangle”)

var sum = (base*.5)*height

alert(“The area is “+sum+”. This was solved by using a = 1/2bh”)

}function about() {

alert(“This script was created by Greg Bland. dabomb@lorien.ml.org”)

}

</script>

</HEAD>

<form>

</form>

</body>

</html>

Este otro ejemplo de Javascript sirve para calcular el área de un triángulo cualquiera.

<!DOCTYPE html>
<title>My Example</title>

Este ejemplo es el que podemos utilizar por ejemplo, para introducir fechas y localizaciones en cualquier página web.

<!DOCTYPE html>
<title>My Example</title>

Este ejemplo de JavaScript nos serviría para incrustar ventanas emergentes en cualquier web que hayamos creado.

<!DOCTYPE html>
<title>My Example</title>

var e = document.getElementById(“go”);

e.addEventListener( “click”, function() {

var name=prompt(“What is your name?”,”Homer”);
if ( name!=null && name!=”” ) {
output = “Well ” + name + “. You seem very daring!”;
}
else {
output = “Hey, I asked you your name!”;
}

document.getElementById( “msg” ).innerText = output;

}, false);

});
</script>

<!– Replace ‘{action page}’ with your own action page to support non-JavaScript users –>
<form name=”myForm” action=”{action page}”>
<input id=”go” type=”button” value=”I dare you to click me!”>
</form>
<p id=”msg”></p>

Este ejemplo de Javascript que veis arriba, serviría para que podamos recordar a alguien que visita nuestra web que ha hecho alguna acción errónea, por ejemplo entrar mal su nombre.

<!DOCTYPE html>
<title>My Example</title>

// Put the button into a variable
var e = document.getElementById(“myForm”);

// Wait for user to click the button
e.addEventListener( “change”, function() {

// Put the selected value into a variable
var myColor = this.color.value;

// The “If” statement. Only display the alert if “Blue” was selected.
if (myColor == “Blue”) {

// Output a message
document.getElementById(“msg”).innerHTML = “Just like the sky!”;

}

}, false);
});
</script>

<!– Replace ‘{action page}’ with your own action page to support non-JavaScript users –>
<form id=”myForm” name=”myForm” action=”{action page}”>
<label>
<input type=”radio” name=”color” value=”Blue”> Blue
</label>
<label>
<input type=”radio” name=”color” value=”Red”> Red
</label>
<label>
<input type=”radio” name=”color” value=”Green”> Green
</label>
</form>

Este ejemplo de JavaScritpt sirve para cambiar cosas que tienen que ver con formatos de color. Es un código de condicional en el que si se elige un color se dirige a otro enlace de la web.

Espero que estos ejemplos de Javascript te hayan servido para comprender un poco mejor la utilidad de Javascript en la red. Como habrás podido ver, es un lenguaje de programación muy sencillo, con el cual, en pocas líneas de código, pueden crearse cosas muy interesantes.

Artículo de interés:

Ejemplos de Javascript

Ejemplos de formularios HTML