Tutorial HTML-CSS-JAVASCRIPT
appsRegnare.com

Episodio 2 - Diferentes maneras de incluir estilos Css y código Javascript

Asumiendo que tienen instalado el Xampp u otro paquete similar y un editor de código, prosigamos.

Dijimos en el capítulo anterior que tanto Javascript como Css pueden estar en la cabecera de la página web, en el cuerpo, o ser incluidos desde un archivo externo. Veamos un ejemplo:

Ejemplo de código Javascript en el cuerpo de la página:


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>
    </head>
    <body>

        <h2>Ejemplo de Javascript en el cuerpo de la Página</h2>

        <input type="button" id="btn1" value="Clickeame!" />

        <script>
            var btn = document.getElementById("btn1");
            btn.setAttribute("onclick", "alert('me clickeaste!')");
        </script>

    </body>
    </html>

Vemos en el ejemplo anterior que primero va el Html y luego la código Javascript que modificará el Html. Siempre debe ir después del Html puesto que corre en "tiempo de ejecución". Si lo colocáramos antes daría un error del siguiente tipo: Uncaught ReferenceError: btn1 is not defined.

Los errores de Javascript los podemos ver abriendo la consola. En el navegador Chrome presionamos "Ctrl+Shift+j", en Firefox presionamos "Ctrl+Shift+i".

También podemos acceder a btn1 desde la cabecera, luego de la carga de la página. Pero esto lo veremos en el próximo capítulo.

Ejemplo de código Javascript dentro de la etiqueta Html:


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>

    </head>
    <body>

        <h2>Ejemplo de código Javascript dentro de la etiqueta Html</h2>

        <input type="button" id="btn1" value="Clickeame!" onclick="btnClick()" />

        <script>
            function btnClick()
            {
                alert('me clickeaste!');
            }
        </script>
    
    </body>
    </html>

En el atributo onclick de la etiqueta input hacemos la llamada a la función "btnClick()". También podríamos poner el código Javascript dentro del mismo atributo onclick, de manera que queda: onclick="alert('me clickeaste')". Es considerado una buena práctica de programación hacer la llamada a la función y ejecutar el código dentro de las etiquetas script.

Ejemplo de código Javascript en la cabecera de la Página:


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>

        <script>
            function btnClick()
            {
                alert('me clickeaste!');
            }
        </script>

    </head>
    <body>

        <h2>Ejemplo de código Javascript en la cabecera de la Página</h2>

        <input type="button" id="btn1" value="Clickeame!" onclick="btnClick()" />
    
    </body>
    </html>

El resultado es el mismo que en el caso anterior.

Ejemplo de código Javascript mediante un archivo externo de extensión .js:

Creamos un archivo llamado jsfile.js en el mismo nivel o carpeta donde se encuentra index.html (o la página que lo incluirá):

jsfile.js

    function btnClick()
    {
        alert('me clickeaste!');
    }

En index.html:

index.html

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>

        <link href="jsfile.js" rel="stylesheet" />

    </head>
    <body>

        <h2>Ejemplo de código Javascript mediante un archivo externo de extensión .js</h2>

        <input type="button" id="btn1" value="Clickeame!" onclick="btnClick()" />
    
    </body>
    </html>

El resultado es el mismo que en los dos casos anteriores.

Ejemplo de definición de estilos Css en la cabecera de la Página:


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>

        <style>
            #btn1{
                color: red;
            }
        </style>    

    </head>
    <body>

        <h2>Ejemplo de definición de estilos Css en la cabecera de la Página</h2>

        <input type="button" id="btn1" value="Mi texto es rojo!" />
    
    </body>
    </html>

Definimos en la etiqueta style un estilo para el elemento que tiene por id="btn1": color establece el color del texto, por lo que el texto del botón se verá de color rojo.

Ejemplo de definición de estilos Css mediante el atributo style:


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title> 

    </head>
    <body>

        <h2>Ejemplo de definición de estilos Css mediante el atributo style</h2>

        <input type="button" id="btn1" value="Mi texto es rojo!" style="color: red;" />
    
    </body>
    </html>

Este ejemplo produce el mismo resultado que el anterior. En cuanto a colores se refiere, hay nombres de colores estandarizados soportados por todos los navegadores. En este caso: style="color: red" es equivalente a style="color: #ff0000", definimos el atributo color mediante su correspondiente valor hexadecimal. También daría el mismo resultado: style="color: rgb(100,0,0)". Se puede usar también el valor rgb.

Ejemplo de definición de estilos Css mediante un archivo externo de extensión .css:

Creamos un archivo llamado estilos.css y lo guardamos en el mismo nivel o carpeta donde se encuentra index.html

estilos.css

    #btn1{
        color: red;
    }


index.html

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title> 

        <link href="estilos.css" rel="stylesheet" />

    </head>
    <body>

        <h2>Ejemplo de definición de estilos Css mediante un archivo externo de extensión .css</h2>

        <input type="button" id="btn1" value="Mi texto es rojo!" />
    
    </body>
    </html>

El resultado es el mismo que en los dos casos anteriores.

← Anterior Siguiente →