Requerimientos
-Conocimientos Básicos de HTML (La estructura de la web)
-Conocimientos Básicos de CSS (El diseño de la web)
-Navegador (Actualizado de preferencia)
-Editor de texto (de preferencia , se puede usar la consola del navegador también)
-Importante no confundir Java con JavaScript , si JavaScript el lenguaje que esta dominando la web es lo que quieres iniciar a aprender , sigue leyendo.
¿Cuál es el trabajo de JavaScript ?
HTML nos brinda una estructura de trabajo , CSS el diseño , y JavaScript es el encargado de darle interactividad a nuestro proyecto.
Ejemplos JavaScript
-Si no entiendes algunas cosas , no te vuelvas loco , solamente queremos mostrarte parte del poder y función de JavaScript , tan solo por el momento copia y pega el código.
-Podemos cambiar el texto escrito en HTML de forma dinámica (Copia y pega este código en tu editor)
<html>
<body>
<p id="cambiaTexto">Cambiaremos este texto</p>
<button onclick='document.getElementById("cambiaTexto").innerHTML = "texto Nuevo"'>
Haz click
</button>
</body>
</html>
Así se mostrara en el navegador
Daremos clic y el texto se cambiara como le hemos indicado
Podemos cambiar también los estilos CSS de forma dinámica (Copia y pega este código en tu editor)
<html>
<body>
<p id="cambiarTamaño">Cambiaremos su tamaño</p>
<button onclick="document.getElementById('cambiarTamaño').style.fontSize='35px'">
Haz clic
</button>
</body>
</html>
Así se mostrara en el navegador
Daremos clic y el texto cambiara de tamaño
Podemos ocultar elementos.(Copia y pega este código en tu editor)
<html>
<body>
<p id="ocultarTexto">Este texto se ocultara</p>
<button onclick="document.getElementById('ocultarTexto').style.display='none'">
Haz clic
</button>
</body>
</html>
Así se mostrara en el navegador
Daremos clic y el texto se ocultara
La forma correcta de incluir JavaScript
-Se recomienda incluir código JavaScript en un archivo externo , así como lo hacemos con el CSS , así tendremos HTML , CSS y JavaScript por separado , los que nos dará un código mas ordenado y legible.
se agrega de la siguiente forma .
<script src="NombredelArchivo.js"></script>
tenemos un archivo completo en el siguiente link
Este tan solo fue un articulo rápido para que continúes con tu aprendizaje en el diseño web, sigue pendiente al siguiente articulo para irte adentrándote de forma practica a la programación de JavaScript
No hay comentarios:
Publicar un comentario