Introducción al Javascript

JavaScript es el lenguaje de programación de HTML y la Web. Es fácil de aprender. Este tutorial te enseñará JavaScript desde básico hasta avanzado.

Mi primer Javascript

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Mi primer Javascript</h2>		
	<button type="button" onClick="document.getElementById('demo').innerHTML=Date()">
	Haz clic para que se muestre la fecha y la hora
	</button>
	<p id="demo"></p>
</body>
</html>

¿Por qué estudiar Javascript?

JavaScript es uno de los 3 idiomas que todos los desarrolladores web deben aprender:

  • HTML para definir el contenido de las páginas web.
  • CSS para definir el formato de las páginas web.
  • Javascript para programar el comportamiento de las páginas web

Las páginas web no son el único lugar donde se usa JavaScript. Muchos programas de escritorio y servidor usan JavaScript. Node.js es el más conocido. Algunas bases de datos, como MongoDB y CouchDB, también usan JavaScript como lenguaje de programación.

Qué debes saber

JavaScript y Java son lenguajes completamente diferentes, tanto en concepto como en diseño. JavaScript fue inventado por Brendan Eich en 1995, y se convirtió en un estándar ECMA en 1997. ECMA-262 es el nombre oficial de la norma. ECMAScript es el nombre oficial del idioma.

Javascript puede contener contenido HTML

Uno de los muchos métodos HTML Javascript es getElementById().

Este ejemplo utiliza el método para “encontrar” un elemento HTML (con id = “demo”) y cambia el contenido del elemento (innerHTML) a “Hola JavaScript”:

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Hola Javascript</h2>	
	<p id="demo">Javascript puede cambiar contenido HTML</p>
	<button type="button" onClick='document.getElementById("demo").innerHTML="Hola Javascript"'>Haz click</button>
</body>
</html>

Javascript acepta tanto comillas simples como dobles.

JavaScript puede cambiar los valores de los atributos HTML, puede cambiar estilos CSS, cambiar el estilo de un elemento HTML es una variante de cambiar un atributo HTML.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Cambiar estilos CSS</h2>	
	<p id="demo">Javascript puede cambiar estilos CSS</p>
	<button type="button" onClick='document.getElementById("demo").style.fontSize="35px"'>Haz clic</button>
</body>
</html>

Javascript puede ocultar elementos HTML

Es posible ocultar elementos HTML cambiando el estilo display.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Ocultar elementos HTML</h2>	
	<p id="demo">Javascript puede ocultar elementos HTML</p>
	<button type="button" onClick="document.getElementById('demo').style.display='none'">Haz clic</button>
</body>
</html>

Javascript puede mostrar elementos HTML

También se puede mostrar elementos HTML ocultos cambiando el estilo display.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Lo que puede hacer Javascript</h2>	
	<p>Javascript puede mostrar elementos ocultos</p>
	<p id="demo" style="display: none">Hola Javascript</p>
	<button type="button" onClick="document.getElementById('demo').style.display='block'">Haz click</button></body>
</html>