Jump to content

Mini Chuleta de JavaScript


 Share

Recommended Posts

Buenos días.

Esta publicación es una mini chuleta de qué puede hacer JavaScript. Como siempre, la publicación que supeditada a moderadores, Admin.

 

Vamos a ello.

 

 

<!DOCTYPE html>

<html lang="es-ES">


<head>

<meta charset="UTF-8" />

<!-- Se puede poner aquí en el <head>. -->

		<script>
			function myFunction() {
    										document.getElementById("item5").innerHTML = "Párrafo cambiado con JavaScript desde el Head.";
										}
		</script>

<!-- /Se puede poner aquí en el <head>. -->

<title> Mini chuleta sobre JavaScript </title>

</head>

<body>

<!-- Cambiar contenidos -->

<h1>¿Qué Puede hacer JavaScript?</h1>

<p id="item">JavaScript puede cambiar el contenido del HTML.</p>

<button type="button" onclick='document.getElementById("item").innerHTML = "¡Hola JavaScript!"'> ¡Púlsame! </button>

<!-- /Cambiar contenidos -->

<!-- Mostrar contenidos -->

<p> En este caso al pulsar el botón muestra Fecha y Hora actuales </p>

<button type="button"
onclick="document.getElementById('item1').innerHTML = Date()"> ¡Púlsame! </button>

<p id="item1"></p>

<!-- /Mostrar contenidos -->

<!-- Cambiar atributos -->

<h1>¿Qué Puede hacer JavaScript?</h1>

<p>JavaScript puede cambiar atributos del HTML.</p>

<p> En este caso JavaScript cambia el atributo src (origen) de una imagen.</p>

<button onclick="document.getElementById('myImage').src='http://i.imgur.com/QDepkKS.jpg'"> <b>1</b> </button>

<img id="myImage" src="http://i.imgur.com/2U15q9e.jpg" style="width:100px">

<button onclick="document.getElementById('myImage').src='http://i.imgur.com/2U15q9e.jpg'"> <b>0</b> </button>

<!-- /Cambiar atributos -->

<!-- Cambiar el estilo -->

<p id="item2">JavaScript puede cambiar el estilo de un elemento en HTML.</p>

<button type="button" onclick="document.getElementById('item2').style.fontSize='35px'"> ¡Púlsame! </button>

<!-- /Cambiar el estilo -->

<!-- Mostrar u, Ocultar contenido -->

<p>JavaScript puede mostrar elementos ocultos en el HTML.</p>

<p id="item3" style="display:none";>  <font size="+2" color="#0000FF">¡Hola, JavaScript muestra este elemento oculto!</font></p>

<button type="button" onclick="document.getElementById('item3').style.display='block'"> ¡Púlsame! </button>

<p>JavaScript puede ocultar elementos en el HTML.</p>

<p id="item4" style="display:block"> ¡Hola JavaScript!</p>

<button type="button" onclick="document.getElementById('item4').style.display='none'"> ¡Púlsame! </button>

<!-- /Mostrar u, Ocultar contenido -->

<!-- JavScript en el <head>. -->

<h1>JavaScript en el head</h1>

<p id="item5">Un Párrafo que se ve afectado desde el "head" con JavaScript.</p>

<button type="button" onclick="myFunction()"> Prueba </button>

<!-- /JavScript en el <head>. -->

<!-- JavScript en el <body>. -->

<h1>JavaScript en el Body</h1>

<p id="item6"> Un Párrafo. </p>

<button type="button" onclick="myFunction_1()"> Prueba </button>

<script>
function myFunction_1() {
    document.getElementById("item6").innerHTML = "Párrafo cambiado con JavaScript en el Body.";
}
</script>

<!-- /JavScript en <body> -->

<p> El JavaScript puede colocarse en el cuerpo del documento (body), en la cabecera del documento (head) o, 
puede invocarse desde un archivo externo. </p>

<p> Para saber más, podemos pasar por:  <code> https://www.w3schools.com/js/default.asp </code> </p>

</body>

</html>

Bueno, para ver su funcionamiento copiar el código y pegar en su editor de textos preferido, guardar con extensión .html, y abrir con su navegador .

 

A la espera que la información sea de utilidad,

 

Un saludo

 

JPablos

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...