java

Aprendiendo JavaScript de forma básica

Posted on

Vamos a comenzar creando tres archivos: un archivo HTML, un archivo CSS y un JavaScript de archivo fuente. Podríamos hacer todo en el archivo HTML (JavaScript y CSS pueden ser incrustado en HTML), pero hay ciertas ventajas para mantenerlos separados. Si eres nuevo en la programación, te recomiendo que sigas estas Instrucciones paso a paso: vamos a adoptar un enfoque muy exploratorio e incremental. En este caso, que facilitará su proceso de aprendizaje. Puede parecer que estamos haciendo mucho trabajo para lograr algo bastante simple, y hay algo de verdad en eso Ciertamente podría haber creado un ejemplo que hace lo mismo que ocurre con muchos menos pasos, pero al hacerlo, te estaría enseñando malas habilidades. Sus. Los pasos adicionales que verás aquí son los que verás una y otra vez, y mientras pueda parecer demasiado complicado ahora, al menos puedes asegurarte de que estás aprendiendo hacer las cosas de la manera correcta.

Empecemos con el archivo JavaScript. Usando un editor de texto, crea un archivo llamado main.js. por ahora, solo pongamos una línea en este archivo:

  • console.log(‘main.js loaded’);

Luego crea el archivo CSS, main.css. Todavía no tenemos nada que poner aquí, así que solo incluiremos un comentario para que no tengamos un archivo vacío. Luego crea un archivo llamado index.html:

  1. <html>
  2. <head>
  3.  <link rel=”stylesheet” href=”main.css”>
  4.  </head>
  5.  <body>
  6.  <h1>MI PRIMERA APP!</h1>
  7.  <p>BIENVENIDOto <i>APRENDER JAVA</i>.</p>
  8.  <script src=”main.js”></script>
  9.  </body>

Aspectos básicos de Javascrip

Así que señalaremos algunos aspectos de HTML como se relacionan con el desarrollo de JavaScript. Un documento HTML consta de dos principales Partes: la cabeza y el cuerpo. La cabeza contiene información que no está directamente en su navegador (aunque puede afectar lo que se muestra en su navegador). El body contiene el contenido de su página que se representará en su navegador. Es importante entender que los elementos en la cabeza nunca se mostrarán en el navegador, mientras que los elementos en el cuerpo suelen ser (ciertos tipos de elementos, no será visible, y los estilos CSS también pueden ocultar elementos del cuerpo)</p>

En la cabecera, tenemos la línea <link rel = “stylesheet” href = “main.css”>; esto es lo que vincula el archivo CSS actualmente vacío en su documento. Luego, al final del cuerpo, tenemos la línea <script src = “main.js”> </script>, que es lo que enlaza el archivo JavaScript en su documento. Puede parecer extraño que uno vaya en la cabeza. Y el otro va al final del cuerpo. Si bien podríamos haber puesto la etiqueta <script> en la cabeza, hay razones de rendimiento y complejidad para ponerlo al final del cuerpo.

En el cuerpo, tenemos <h1> ¡Mi primera aplicación! </h1>, que es el encabezado de primer nivel de Texto (que indica el texto más grande y más importante de la página), seguido de un <p>Etiqueta (párrafo), que contiene algún texto, parte de la cual está en cursiva (denotada por el Etiqueta <i>). Continúa y carga index.html en tu navegador. La forma más fácil de hacer esto en la mayoría de sistemas es simplemente hacer doble clic en el archivo desde un explorador de archivos (normalmente también puede Arrastrar el archivo a una ventana del navegador). Verás el contenido del cuerpo de tu archivo HTML.

La consola de JavaScript

Ya hemos escrito algunos JavaScript: console.log (‘main.js cargado’). Que hizo ¿Esto que hace? La consola es una herramienta de solo texto para los programadores que les ayuda a diagnosticar sus trabajos. Utilizará la consola extensivamente a medida que avanza en el articulo. Los diferentes navegadores tienen diferentes formas de acceder a la consola. Porque tu estarás Haciendo esto bastante a menudo, recomiendo aprender el atajo de teclado. En Firefox, es Ctrl-Shift-K (Windows y Linux) o Comando-Opción-K (Mac).En la página en la que cargó index.html, abra la consola de JavaScript; debieras ver el texto “main.js loaded” (si no lo ve, intente volver a cargar la página). console.loges un metodo Eso imprimirá lo que quieras en la consola, lo cual es muy útil. Para la depuración y el aprendizaje por igual. Una de las muchas características útiles de la consola es que, además de ver resultados desde su programa, puede ingresar JavaScript directamente en la consola, probando así para aprender sobre las funciones de JavaScript e incluso modificar su programa temporalmente.

Agregar jQuery

Vamos a agregar una biblioteca de scripts del lado del cliente extremadamente popular llamada jQuery para nuestra pagina Si bien no es necesario, o incluso relacionado con la tarea en cuestión, es un biblioteca situada en su código web. Incluso aunque podríamos sobrevivir fácilmente sin él en este ejemplo, cuanto antes comiences a practicar y a ver el código jQuery, mejor estarás. Al final del cuerpo, antes de incluir nuestro propio main.js, enlazaremos en jQuery:

<script src=”https://code.jquery.com/jquery-2.1.1.min.js”></script>

<script src=”main.js”></script>

Notarás que estamos usando una URL de Internet, lo que significa que tu página no funcionará correctamente sin acceso a Internet. Estamos vinculando en jQuery desde un foro público red de entrega de carpa (CDN), que tiene ciertas ventajas de rendimiento. Si tu quieres estar trabajando en su proyecto fuera de línea, tendrá que descargar el archivo y vincularlo desde su computadora en su lugar. Ahora modificaremos nuestro archivo main.js para aprovechar uno de las Características de jQuery:

$(document).ready(function() {

 ‘use strict’;

 console.log(‘main.js loaded’);

});

Lo que jQuery está haciendo por nosotros aquí es asegurarse de que el navegador haya cargado todos los HTML antes de ejecutar nuestro JavaScript (que actualmente es solo una consola.log). Siempre que estemos trabajando con JavaScript basado en navegador, haremos esto solo para establezca la práctica: cualquier JavaScript que escriba irá entre los $ (document) .ready (function () {and}); líneas. También tenga en cuenta la línea ‘uso estricto’; esto es algo sobre lo que aprenderemos más adelante, pero básicamente esto le dice a la interfaz de JavaScript.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *