¿Qué es JavaScript, realmente?

JavaScript es un lenguaje de programación que añade interactividad a su sitio web (por ejemplo: juegos, respuestas cuando se pulsan los botones o los datos introducidos en formularios, estilo dinámico, animación). Este artículo le ayudará a empezar con este lenguaje emocionante y le da una idea de lo que es posible.

JavaScript es increíblemente versátil. Puede empezar poco a poco, con carruseles, galerías de imágenes, diseños fluctuantes, y respuestas a las pulsaciones de botón. Con más experiencia que usted será capaz de crear juegos 2D, animación y gráficos en 3D, aplicaciones completas bases de datos, y mucho más!

JavaScript en sí es bastante compacto pero muy flexible. Los desarrolladores han escrito una gran variedad de herramientas en la parte superior del núcleo del lenguaje JavaScript, el desbloqueo de una gran cantidad de funcionalidades extra con el mínimo esfuerzo. Éstas incluyen:

  • Interfaces de programación de aplicaciones de navegador ( APIs ) – API en los navegadores web, proporcionando funcionalidades como la creación dinámica de HTML y el establecimiento de estilos CSS, la recolección y la manipulación de una secuencia de vídeo desde la webcam del usuario, o la generación de gráficos en 3D y muestras de audio.
  • API de terceros para permitir a los desarrolladores incorporar funcionalidad en sus sitios de otros proveedores de contenido, como Twitter o Facebook.
  • marcos de terceros y las bibliotecas que se pueden aplicar a su HTML que le permite construir rápidamente sitios y aplicaciones.

Debido a que este artículo sólo se supone que es una introducción a la luz de JavaScript, no vamos a confundir en esta etapa por hablar en detalle acerca de cuál es la diferencia entre el núcleo Javascript y las diferentes herramientas mencionadas anteriormente. Usted puede aprender todo esto en detalle más adelante, en nuestra área de aprendizaje JavaScript , y en el resto del MDN.

A continuación le presentamos algunos aspectos de la lengua de la base, y también vamos a jugar con algunas funciones del navegador API también. ¡Que te diviertas!

Un ejemplo “hola mundo”

La sección anterior puede sonar muy emocionante, y así debe ser – JavaScript es una de las más animadas de las tecnologías de Internet y como usted empieza a ser bueno en su uso, sus sitios web entrará en una nueva dimensión del poder y la creatividad.

Sin embargo, JavaScript es un poco más complejo para sentirse cómodo con que el HTML y CSS. Puede que tenga que empezar poco a poco, y seguir trabajando en pequeños pasos consistentes. Para empezar, vamos a mostrar cómo añadir algo de JavaScript básico para su página, la creación de un “Hello World!” Ejemplo ( el estándar en los ejemplos básicos de programación ).

Importante : Si usted no ha estado siguiendo junto con el resto de nuestro curso, descarga el código ejemplo y utilizarlo como punto de partida.

  1. En primer lugar, ir a su sitio de prueba y crear una nueva carpeta llamada ‘scripts’ (sin las comillas). Luego, dentro de las nuevas secuencias de comandos que acaba de crear la carpeta, cree un nuevo archivo llamado main.js. Guardarlo en su scriptscarpeta.
  2. A continuación, en el index.htmlarchivo de introducir el siguiente elemento en una nueva línea justo antes del cierre </body>de la etiqueta:
    <script src="scripts/main.js"></script>
  3. Esto es, básicamente, hacer el mismo trabajo que el <link>elemento de CSS – se aplica el código JavaScript a la página, por lo que puede tener un efecto sobre el código HTML (junto con el CSS, y cualquier otra cosa en la página).
  4. Ahora agregue el siguiente código al main.jsarchivo:
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. Por último, asegúrese de que los archivos HTML y JavaScript se guardan, y la carga index.htmlen el navegador. Debería ver algo como lo siguiente:

hola mundo

Nota : La razón por la que hemos puesto el <script>elemento en la parte inferior del archivo HTML es que el HTML es cargado por el navegador en el orden en que aparece en el archivo. Si el código JavaScript se carga por primera vez y se supone que debe afectar el HTML, es posible que no funcione, ya que el código JavaScript se carga antes que el código HTML que se supone que trabajar. Por lo cual, JavaScript cerca de la parte inferior de la página HTML es a menudo la mejor estrategia.

¿Que pasó?

Su texto de encabezado ahora se ha cambiado a “¡Hola mundo!” el uso de JavaScript. Lo ha hecho por primera vez el uso de una función llamada querySelector()para tomar una referencia a su título, y almacenarlo en una variable llamada myHeading. Esto es muy similar a lo que hicimos usando selectores CSS. Cuando se quiere hacer algo a un elemento, primero tiene que seleccionarlo.

Después de eso, se establece el valor de la myHeadingde variable de textContentpropiedad (que representa el contenido de la partida a) a “¡Hola mundo!”.

Nota : Tanto de las funciones que utilizaba anteriormente son partes de la API de objetos de documento Model (DOM) , que le permite manipular documentos.

Lo básico del lenguaje curso acelerado

Vamos a explicar algunas de las características básicas del lenguaje JavaScript, para darle una mayor comprensión de cómo funciona todo. Mejor aún, estas características son comunes a todos los lenguajes de programación. Si usted domina estos fundamentos, usted está en su manera de ser capaz de programar casi cualquier cosa!

Importante : En este artículo, intente introducir las líneas de código de ejemplo en la consola JavaScript para ver qué pasa. Para más detalles sobre las consolas de JavaScript.

Variables

Las variables son contenedores que se pueden almacenar los valores de Se empieza por declarar una variable con el. varPalabra clave, seguido por el nombre que desee llamarlo:

var myVariable;

Nota : Un punto y coma al final de una línea indica donde termina una declaración; sólo se requiere absolutamente cuando se necesita para separar las declaraciones en una sola línea, pero algunas personas creen que es una buena práctica para ponerlos en al final de cada declaración. Hay otras reglas para cuando se debe y no debe utilizarlos – ver su guía a punto y coma en Javascript para más detalles.

Nota : Se puede nombrar a una variable casi cualquier cosa, pero hay algunas restricciones de nombre (véase este artículo sobre las reglas de denominación de variables .) Si no está seguro, puede verificar el nombre de la variable para ver si es válida.

Nota : JavaScript es sensible a mayúsculas – myVariablees una variable diferente a myvariable. Si usted está recibiendo problemas en su código, marque la carcasa!

Después de declarar una variable, se puede dar un valor:

myVariable = 'Bob';

Puede hacer ambas operaciones en la misma línea si lo desea:

var myVariable = 'Bob';

Puede recuperar el valor con sólo llamar la variable por su nombre:

myVariable;

Después de dar una variable un valor, posteriormente puede optar por cambiarlo:

var myVariable = 'Bob';
myVariable = 'Steve';

Tenga en cuenta que las variables tienen diferentes tipos de datos :

Variable Explicación Ejemplo
Cuerda Una secuencia de texto conocido como una cadena. Para significar que la variable es una cadena, debe encerrarlo entre comillas. var myVariable = 'Bob';
Número Un número. Los números no tienen comillas alrededor de ellos. var myVariable = 10;
Boole A / Falso Verdadero valor. Las palabras truey falseson palabras clave especiales en JS, y no necesitan comillas. var myVariable = true;
Formación Una estructura que le permite almacenar varios valores en una sola referencia. var myVariable = [1,'Bob','Steve',10];
Refiérase a cada miembro de la matriz de esta manera:
myVariable[0], myVariable[1], etc.
Objeto Básicamente, cualquier cosa. Todo en JavaScript es un objeto, y puede ser almacenado en una variable. Tenga esto en cuenta a medida que aprende. var myVariable = document.querySelector('h1');
Todos los ejemplos anteriores también.

Entonces, ¿por qué necesitamos las variables? Así, se necesitan variables para hacer algo interesante en la programación. Si los valores no podían cambiar, entonces no se podía hacer nada dinámico, como personalizar un mensaje de saludo o cambiar la imagen mostrada en una galería de imágenes.

comentarios

Se puede poner comentarios en el código JavaScript, del mismo modo que en el CSS:

/*
Everything in between is a comment.
*/

Si tu comentario no contiene saltos de línea, a menudo es más fácil de ponerlo detrás de dos barras de este tipo:

// This is a comment

operadores

Una operatores un símbolo matemático que produce un resultado basado en dos valores (o variables). En la siguiente tabla se puede ver algunos de los operadores más sencillos, junto con algunos ejemplos para probar en la consola de JavaScript.

Operador Explicación Símbolo (s) Ejemplo
añadir / concatenación Se utiliza para sumar dos números, o pegar dos cadenas juntas. + 6 + 9;
"Hello " + "world!";
restar, multiplicar, dividir Estos hacen lo que se espera que lo hagan en las matemáticas básicas. -, *,/ 9 - 3;
8 * 2; // multiply in JS is an asterisk
9 / 3;
operador de asignación Usted ha visto esto ya: se asigna un valor a una variable. = var myVariable = 'Bob';
operador de identidad Hace una prueba para ver si dos valores son iguales entre sí, y devuelve un true/ falseresultado (Boolean). === var myVariable = 3;
myVariable === 4;
La negación, no es igual Devuelve el valor lógico contrario de lo que precede; resulta una trueen una false, etc. Cuando se utiliza junto con el operador de igualdad, las pruebas operador de negación si dos valores son no iguales. !, !== La expresión básica es true, pero la comparación devuelve falseporque hemos negado que:

var myVariable = 3;
!(myVariable === 3);

Aquí estamos probando “es myVariableno es igual a 3″. Esto devuelve falseporque myVariablees igual a 3.

var myVariable = 3;
myVariable !== 3;

Hay muchos más operadores para explorar, pero esto es suficiente por ahora. Ver las expresiones y los operadores para obtener una lista completa.

Nota : mezcla de los tipos de datos pueden dar lugar a algunos resultados extraños al realizar cálculos, así que tenga cuidado de que usted se refiere a las variables correctamente y obtener los resultados que espera. Por ejemplo, introduzca "35" + "25"en su consola. ¿Por qué no se obtiene el resultado que esperaba? Debido a que las comillas se convierten los números en cadenas, por lo que han acabado concatenación de cadenas en lugar de añadir números. Si introduce, 35 + 25obtendrá el resultado correcto.

condicionales

Los condicionales son estructuras de código que permiten poner a prueba si una expresión devuelve verdadero o no, la ejecución de código alternativa revelado por su resultado. La forma más común de condicional se llama if ... else. Así por ejemplo:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

La expresión dentro de la if ( ... )es la prueba – esto se utiliza el operador de identidad (como se describió anteriormente) para comparar la variable iceCreamcon la cadena chocolatepara ver si los dos son iguales. Si esta comparación devuelve true, se ejecuta el primer bloque de código. Si la comparación no es cierto, el primer bloque se omite y el segundo bloque de código, después de la elsedeclaración, se ejecuta en su lugar.

funciones

Las funciones son un modo de funcionalidad envases que desea reutilizar. Cuando se necesita el procedimiento se puede llamar a una función, con el nombre de la función, en lugar de volver a escribir todo el código cada vez. Ya ha visto algunos usos de las funciones anteriores, por ejemplo:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

Estas funciones, document.querySelectory alert, están integradas en el navegador para poder utilizar siempre que lo desee.

Si ves algo que se parece a un nombre de variable, pero tiene soportes – ()– después de que, lo más probable es una función. Funciones a menudo toman argumentos – bits de datos que necesitan para hacer su trabajo. Estos van dentro de los corchetes, separados por comas si hay más de un argumento.

Por ejemplo, la alert()función hace que una ventana emergente aparece dentro de la ventana del navegador, pero hay que darle una cadena como argumento para decir la función de qué escribir en el cuadro emergente.

La buena noticia es que puede definir sus propias funciones – en el siguiente ejemplo escribimos una simple función que toma dos números como argumentos y las multiplica:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Pruebe a ejecutar la función anterior en la consola, a continuación, probar con varios argumentos. Por ejemplo:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Nota : El returncomunicado indica al navegador para devolver la resultvariable de salida de la función para que esté disponible para su uso. Esto es necesario porque las variables definidas dentro de funciones sólo están disponibles dentro de esas funciones. Esto se llama la variable de alcance . (Lea más en ámbito de las variables ).

Eventos

Interactividad real en un sitio web necesita eventos. Se trata de estructuras de código que escuchan las cosas que suceden en el navegador, la ejecución de código en respuesta. El ejemplo más obvio es el evento de clic , que se dispara por el navegador cuando se hace clic en algo con el ratón. Para demostrar esto, escriba lo siguiente en la consola, a continuación, haga clic en la página web actual:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Hay muchas formas de adjuntar un evento a un elemento. Aquí seleccionamos el elemento HTML, estableciendo su onclickpropiedad manejador igual a la función de un anónimo (es decir, sin nombre), que contiene el código que queremos que el evento click se ejecute.

Tenga en cuenta que

document.querySelector('html').onclick = function() {};

es equivalente a

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Es sólo más corto.

Sobrealimentación nuestra página web ejemplo

Ahora hemos repasado algunos conceptos básicos de JavaScript, vamos a añadir algunas características interesantes para nuestro ejemplo el sitio para ver lo que es posible.

Adición de un cambiador de imagen

En esta sección, vamos a añadir una imagen adicional a nuestro sitio usando algunas de las características más API DOM, usando algo de JavaScript para cambiar entre los dos cuando se hace clic en la imagen.

  1. En primer lugar, busca otra imagen que quisiera ofrecer en su sitio. Asegúrese de que es del mismo tamaño que la primera imagen, o lo más cerca posible.
  2. Guardar esta imagen en su imagescarpeta.
  3. Cambiar el nombre de esta imagen ‘firefox2.png’ (sin comillas).
  4. Vaya a su main.jsarchivo, e introduzca el siguiente JavaScript. (Si su “hola mundo” JavaScript está todavía allí, borrarlo.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. Guarde todos los archivos y la carga index.htmlen el navegador. Ahora al hacer clic en la imagen, se debe cambiar a la otra!

Se almacena una referencia a su elemento de imagen en la myImagevariable. A continuación, se hace de esta variable onclickpropiedad controlador de eventos igual a una función sin nombre (una función de “anónimo”). Ahora, cada vez que este elemento se hace clic en la imagen:

  1. Recupera el valor de la imagen de srcatributo.
  2. Se utiliza una condicional para comprobar si el srcvalor es igual a la ruta a la imagen original:
    1. Si es así, cambia el srcvalor a la ruta de la segunda imagen, obligando a la otra imagen a cargar en el interior del <image>elemento.
    2. Si no es así (lo que significa que ya debe haber cambiado), las srcpermutas de valor de nuevo a la ruta de imagen original, a su estado original.

Adición de un mensaje de bienvenida personalizado

A continuación vamos a añadir otro poco de código, cambiando el título de la página a un mensaje de bienvenida personalizado cuando el usuario navega por primera vez al sitio. Este mensaje de bienvenida persistirá, el usuario debe abandonar el sitio y volver más tarde – vamos a guardarlo utilizando el API de almacenamiento web . También incluiremos una opción para cambiar el usuario y, por lo tanto, el mensaje de bienvenida en cualquier momento que se requiera.

  1. En index.html, añadir la siguiente línea justo antes del <script>elemento:
    <button>Change user</button>
  2. En main.js, coloque el siguiente código en la parte inferior del archivo, exactamente como está escrito – esto toma referencias al nuevo botón y el encabezamiento, guardarlos en las variables:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Ahora agregue la siguiente función para establecer el saludo personalizado – esto no va a hacer nada, pero vamos a arreglar esto en un momento:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }

    Esta función contiene una prompt()función, y aparecerá un cuadro de diálogo, un poco como alert(). Esto prompt(), sin embargo, le pide al usuario que introduzca algunos datos, almacenarlo en una variable después de que el usuario presione OK .  En este caso, estamos pidiendo al usuario que introduzca su nombre. A continuación, hacemos un llamado a una API llamada localStorage, lo que nos permite almacenar los datos en el navegador y posteriormente recuperarlo. Utilizamos localStorage de setItem()función para crear y almacenar un elemento de datos llamado 'name', estableciendo su valor a la myNamevariable que contiene los datos que el usuario ha introducido. Por último, nos fijamos el textContentde la partida a una cadena, además del nombre de reciente almacenado del usuario.

  4. A continuación, agregar este if ... elsebloque – que podríamos llamar el código de la inicialización, ya que las estructuras de la aplicación cuando se carga por primera:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }

    Este primer bloque utiliza el operador de negación (NOT lógico, representada por el!) Para comprobar si el nameque existen datos. Si no es así, la setUserName()función se ejecuta para crearlo. Si existe (es decir, el usuario establece que durante una visita anterior), recuperamos el nombre almacenado usando getItem()y establecer el textContentde la partida a una cadena, además del nombre del usuario, como lo hicimos en el interior setUserName().

  5. Por último, poner el siguiente onclickcontrolador de eventos en el botón. Al hacer clic, la setUserName()función se ejecuta. Esto permite al usuario configurar un nuevo nombre, cuando lo deseen, pulsando el botón:
    myButton.onclick = function() {
      setUserName();
    }

Ahora la primera vez que visita el sitio, se le pedirá su nombre de usuario, a continuación, le dará un mensaje personalizado. Puede cambiar el nombre de cualquier momento que desee oprimiendo el botón. Como una ventaja adicional, ya que el nombre se almacena dentro localStorage, que persiste después de que el sitio está cerrado, manteniendo el mensaje personalizado allí cuando vuelva a abrir el sitio!

Conclusión

Si ha seguido todas las instrucciones de este artículo, usted debe terminar con una página que se ve algo como esto:

hola final.png

Fuente: Diseño y Programación Web

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s