Ir al contenido

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

Compartir este post


Enlace al post
Compartir en otros sitios

Registra una cuenta o conéctate para comentar

Debes ser un miembro de la comunidad para dejar un comentario

Crear una cuenta

Regístrate en nuestra comunidad. ¡Es fácil!

Registrar una cuenta nueva

Iniciar Sesión

¿Ya tienes cuenta? Conéctate aquí.

Iniciar Sesión

×