4.- JavaScript . Salidas (Output)

Visualización en JavaScript

JavaScript puede "mostrar" datos de diferentes maneras:

• Escribir en un elemento HTML, usando innerHTML.
• Escribir en la salida HTML usando document.write().
• Escribir en un cuadro de alerta, usando window.alert().
• Escribiendo en la consola del navegador, usando console.log().

Usando innerHTML

A través del ID de un elemento o tag, recordar que el ID identifica a un elemento único en la pagina.

<!DOCTYPE html>

<html>

<body>

<h2>Hola WWW</h2>

<p>Esto es un parrafo.</p>

<p id="demo"> </p>

<script>

document.getElementById("demo").innerHTML = “La suma es ” + 5 + 6;

</script>

</body>

</html>

 Salida:

Utilizando document.write ()

<!DOCTYPE html>

<html>

<body>

<h2>Hola WWW</h2>

<p>Esto es un parrafo.</p>

<p>Escribiendo con Document.Write</p>

<script>

document.write("La suma es " + 5 + 6);

</script>

</body>

</html>

Salida:

NOta: El uso de document.write () después de cargar un documento HTML, eliminará todo el HTML existente :

Prueba

<!DOCTYPE html>

<html>

<body>

<h2>Hola WWW</h2>

<p>esto es un parrafo</p>

<button type="button" onclick="document.write('Borrando Contenido y la suma es ' +5 + 6)">Prueba</button>

</body>

</html>

Salida antes del Clic:

Salida despues del Clic:

ml>

Nota: Se sugiere usar document.write solo para pruebas

Utilizando window.alert ()

<!DOCTYPE html>

<html>

<body>

<h2>Hola WWW</h2>

<p>Esto es un Parrafo.</p>

<script>

window.alert("La suma es "+ 5 + 6);

</script>

</body>

</html>

 Salida:

Utilizando console.log ()

Para fines de depuración, puede utilizar método el console.log() para mostrar datos.

<!DOCTYPE html>

<html>

<body>

<h2>Activa el depurador con F12</h2>

<p>Selecciona la consola "Console" en el menu debuger.</p>

<script>

console.log(5 + 6);

</script>

</body>

</html>

En el depurador saldra 11, que es la suma de 5 mas 6

3.- JavaScript. - Funciones

Funciones y eventos de JavaScript

Un función JavaScript es un bloque de código JavaScript, que se puede ejecutar cuando se "solicita".

Por ejemplo, se puede llamar a una función cuando ocurre un evento, como cuando el usuario hace clic en un botón.

JavaScript en <head> o <body>

Puede colocar cualquier número de scripts en un documento HTML.

Los scripts se pueden colocar dentro de la etiqueta <body> y </body> o dentro de la etiqueta  <head> y </head> de una página HTML, o en ambos.

JavaScript en <head>

En este ejemplo, una función JavaScript  se coloca en la sección <head> de una página HTML.

La función se invoca (llama) cuando se hace clic en un botón:

<!DOCTYPE html>

<html>

<head>

  <script>

    function myFunction() {
    document.getElementById("demo").innerHTML = "Parrafo cambiado con JavaScript :)";
    }

  </script>

</head>

<body>

  <h1>JavaScript en Head</h1>

  <p id="demo">Esto es un Parrafo.</p>

  <button type="button" onclick="myFunction()">Haz Clic</button>

</body>

</html>

Resultado Antes de hacer Clic

Resultado Después de hacer Clic

2.-JavaScript ¿Donde escribo mi código JavaScript?

La etiqueta <script>

En HTML, el código JavaScript se debe insertar entre las etiquetas <script> y </script>.

Ejemplo

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript en el cuerpo de un documento HTML</h2>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "MI primer Programa JavaScript";

</script>

</body>

</html>

Nota: copia y pega este código en un archivo de texto plano(sin formato) y guárdalo con la extensión .html

Ejemplo: primerJavascript.html

Resultado

1.- JavaScript

¿Por qué estudiar JavaScript?

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

   1. HTML te sirve para definir el contenido de las páginas web.

   2. CSS para especificar el diseño de las páginas web.

   3. JavaScript para programar el comportamiento y dinamismo de las páginas web.

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

Vale la pena comentar que java y JavaScript son completamente diferentes.

¿Que puede hacer JavaScript?

Uno de los muchos métodos HTML de 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":

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>

</html>

Tambien puede cambiar los valores de atributos HTML

Ejemplo:

<!DOCTYPE html>

<html>

<body>

<h2>Que puede hacer JavaScript Do?</h2>

<p>JavaScript puede cambiar valores de atributos.</p>

<p>En este ejemplo cambia el atributo src (source) ade una imagen.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>

</html>

JavaScript Puede Cambiar estilos

Ejemplo:

<!DOCTYPE html>

<html>

<body>

<h2>Que puede hacer JavaScript?</h2>

<p id="demo">JavaScript puede cambiar estilos de una etiqueta HTML.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>

</html>

En otras palabras se puede manipular un sitio web completamente.... :)

8.- Impresión con echo / print (PHP)

En Php hay dos formas de Imprimir salidas: echo y print.

Estos tienen la misma función de enviar datos en pantalla, pero con diferencias pequeñas, echo no maneja valor de retorno, mientras que la instrucción print tiene un valor de retorno de 1, con esta característica se puede usar en expresiones.
Echo puede tomar múltiples parametros, mientras que print puede tomar un argumento. Por otro lado echo es ligeramente más rápido que print.
Echo se puede usar con o sin paréntesis: echo ó echo()

Ejemplo 1:
<?php

echo "<h2>PHP is Poderoso!</h2>";
echo "Hola World Wide Web!<br>";
echo "Aprendiendo PHP!<br>";
echo "Esta ", "cadena ", "fue ", "realizada ", "con múltiples parámetros.";

?>

Nota: verifica el uso de html dentro de php a través de echo :)

Salida

Ejemplo 2:

<?php

$txt1 = "Aprendiendo PHP";
$txt2 = "con ejemplos";
$x = 7;
$y = 9;

echo "<h2>" . $txt1 . "</h2>";
echo "Estudiar PHP " . $txt2 . "<br>";
echo $x + $y;
?>

Salida

Ejemplo 3: usando print

<?php

print "<h2>PHP is Poderoso!</h2>";
print "Hola World Wide Web!<br>";
print "Aprendiendo PHP!<br>";


?>

Salida

Ejemplo 4: usando print

<?php

$txt1 = "Aprendiendo PHP";
$txt2 = "con ejemplos";
$x = 7;
$y = 9;

print "<h2>" . $txt1 . "</h2>";
print "Estudiar PHP " . $txt2 . "<br>";
print $x + $y;
?>

Salida

Comentarios: Ejemplos sencillos pero que ilustran el uso de echo y print.  :)

7-Variables (PHP)

Una variable puede tener un nombre corto como x e y) o un nombre más descriptivo (Edad, modelo, total_volumen). 

 Reglas para las variables de PHP:

• Una variable comienza con el signo $, seguido del nombre de la variable
• Un nombre de variable debe comenzar con una letra o el carácter de subrayado.
• Un nombre de variable no puede comenzar con un número.
• Un nombre de variable solo puede contener caracteres alfanuméricos y guiones bajos (A-z, 0-9 y _).
• Los nombres de las variables distinguen entre mayúsculas y minúsculas ($edad y $EDAD son dos variables diferentes).

<!DOCTYPE html>
<html>
<body>

<?php

$txt = "PHP";
echo "I love " . $txt . "!";

echo "<br>"

$x = 7;
$y = 4;
echo $x + $y;

?>

</body>
</html>

Resultado:

Comentario:
 En PHP para concatenar cadenas se usa el punto (.).
Observe como escribir codigo HTML dentro de PHP a través de la sentencia "echo"