Fundamentos de JavaScriptEN ESTE ARTCULO1. Que es JavaScript realmente?2. Ejemplo "Hola Mundo"1. Qu ha ocurrido?3. Language basics crash course1. Variables2. Comentarios3. Operadores4. Conditionals5. Functions6. Events4. Supercharging our example website1. Adding an image changer2. Adding a personalized welcome message5. ConclusionEste articulo necesita una revisin editorial.This translation is incomplete. Please helptranslate this articlefrom English. AnteriorSiguiente JavaScript es el lenguaje de programacin que debes usar para adicionar caractersticas interactivas a tu Sitio Web, por ejemplo juegos, eventos que ocurren cuando los botones son presionados o los datos son ingresados en los formularios, efectos de estilo dinmicos, animacin, y mucho mas. Fundamentos de JavaScript te dar una idea de lo que es posible hacer con este extraordinario lenguaje, y como empezar.Que es JavaScript realmente?JavaScriptes un robusto lenguaje de programacionque puede ser aplicado a un documentoHTMLy usado para crear interactividad dinmica en los sitios web. Fue inventado por Brendan Eich, co-fundador del proyecto Mozilla, Mozilla Foundation y la Corporacin Mozilla .Puedes hacer casi cualquier cosa con Javascript. Puedes empezar con pequeas caractersticas como el ajuste de diseos, haciendo que algunas cosas pasen cuando un botn es presionado, carrusel, y galerias de imgenes pero eventualmente como vas adquiriendo experiencia con el lenguaje estars en capacidad de crear juegos, grficos 2D y 3D animados, aplicaciones con bases de datos, y mas.JavaScript por si solo es bastante compacto, pero es muy flexible, y los desarrolladores han escrito gran cantidad de herramientas basados en el ncleo del lenguaje JavaScript para proveer acceso a diversas funcionalidades mas fcilmente. Esto Incluye: Interfaces de Programacin de Aplicaciones (APIs) construidas dentro de los web browsers que permiten hacer cualquier cosa, desde crear contenido HTML y establecer estilos CSS , hasta capturar y manipular un video desde la webcam , o generar graficos 3D y sonidos de ejemplo. APIs de Tercera Generacin, para permitir incluir en sus sitios, funcionalidades de otros propietarios como Twitter o Facebook. Frameworks de tercera generacion y libreriasque puedes aplicar a tu HTML para que puedas construir y publicar rapidamente sitios y aplicaciones.Ejemplo "Hola Mundo"La siguiente seccion suena realmente emocionante, y deberia serlo JavaScript es una de las tecnologias web mas emocionantes, y cuando comiences a ver lo bueno de ello en tus sitios web entraras en una nueva dimension de energia y creatividad.SIN EMBARGO, JavaScript es un poco mas complejo de usar con HTML y CSS, y deberas comenzar poco a poco, y continuar trabajando en pequeos pasos. Para comenzar, mostraremos como aadir Javascript Basico a su pagina, pra crear el ejemplo de "Hola Mundo" (El estandar en los ejemplos basicos de programacin.)Importante: Si no has estado a lo largo del resto del curso,descarga este codigo de ejemploy usalo como punto de partida.1. Primero, ve a tu sitio de pruebas y crea un nuevo archivo llamadomain.js. Guardaloen tu carpeta scripts.2. A continuacin, abre tu archivoindex.htmle introduce lo siguiente en una nueva linea justo antes de la etiqueta de cierre:

3. Esto hace bsicamente el mismo trabajo que el elementopara CSS aplica el ccdigo Javascript a la pgina, para que pueda actuar sobre el HTML (y CSS, o cualquier cosa en la pgina).4. Ahora aade el siguiente cdigo al archivomain.js:5. var myHeading = document.querySelector('h1');myHeading.innerHTML = 'Hello world!';6. Ahora asegrate de que has guardado los archivos HTML y JavaScript, y abreindex.htmlen el navegador. Deberas ver algo as:Nota: La razn por la que hemos puesto el elementocasi al final del documento HTML es porque el navegador carga el HTML en el orden en que aparece en el archivo. Si se cargara primero Javascript y se supone que debe afectar al HTML que tiene debajo, podra no funcionar, ya que ha sido cargado antes que el HTML sobre el que se supone debe trabajar. Por lo tanto, cerca del final de la pgina es a veces la mejor estrategia.Qu ha ocurrido?El texto de tu cabecera ha sido cambiado por "Hello world!" usando Javascript. Hicimos esto primero usando la funcinquerySelector()para obtener una referencia al nuestra cabecera, y almacenarla en una variable llamadamyHeading. Esto es muy similar a lo que hicimos con CSS usando selectores queremos hacer algo con un elemento, as que tenemos que seleccionarlo primero..Despus de eso, , establecimos el valor de la propiedadinnerHTMLde la variablemyHeading(que representa el contenido de la cabecera) como "Hello world!".

Conceptos bsicos del idioma del curso accidenteVamos a explicar algunas de las caractersticas bsicas del lenguaje JavaScript, para darle un poco ms de entender cmo funciona todo.Importante: En este artculo, intente introducir los ejemplos de lneas de cdigo en su consola de navegador para ver qu pasa.Para ms detalles sobre las consolas del explorador, consulteDescubrir las herramientas de desarrollo del navegador.Nota: Estas caractersticas son comunes a todos los lenguajes de programacin.Si usted puede entender estos fundamentos, usted debera ser capaz de hacer un nuevo comienzo en la programacin de casi cualquier cosa.VariablesLasvariablesson contenedores en los que puedes almacenar valores. Primero debes declarar la variable con la palabra clavevar, seguida del nombre que le quieras dar:fue myVariable ;Nota: Todas las lineas en JS deben acabar en punto y coma, para indicar que es ah donde termina la lnea. Si no los incluyes puedes obtener resultados inesperados.Nota: Puedes llamar a una variable con casi cualquier nombre, pero hay algunas restricciones (vereste artculo sobre las reglas existentes.)Nota: JavaScript distingue entre maysculas y minsculas myVariablees una variable distinta amyvariable. Si ests teniendo problemas en tu cdigo, revisa las maysculas y minsculas.Tras declarar una variable, puedes asignarle un valor:myVariable = 'Bob' ;Puedes hacer las dos cosas en la misma lnea s lo necesitas:var myVariable = 'Bob' ;Puedes obtener el valor de la variable llamndola por su nombre:myVariable ;Despus de haberle dado un valor a la variable, puedes volver a cambiarlo:var myVariable = 'Bob';myVariable = 'Steve';Ntese que las variables tienen distintostipos de datos:VariableExplicacinEjemplo

CuerdaUna cadena de texto. Para indicar que la variable es un string, debes escribirlo entre comillas.var myVariable = 'Bob';

NmeroUn nmero. Los nmeros no tienen comillas.fue myVariable = 10;

BooleanTienen valor verdadero/falso.true/falseson palabras especiales en JS, y no necesitan comillas.var myVariable = true;

FormacinUna estructura que te permite almacenar varios valores en una sola referencia.var myVariable = [1,'Bob','Steve',10];Llama a cada miembro del array as:myVariable[0],myVariable[1], etc.

ObjetoBsicamente, cualquier cosa. Todo en Javascript es un objeto, y puede ser almacenado en una variable. Mantn esto en mente mientras aprendes.var myVariable = document.querySelector('h1');Todos los ejemplos anteriores tambin.

Entonces, para qu necesitamos las variables? Las variables son necesarias para hacer cualquier cosa interesante en programacin. Si los valores no pudieran cambiar, entonces no podras hacer nada dinmico, como personalizar un mensaje de bienvenida de un usuario que visita tu pgina, cambiar la imagen que se muestra en una galera de imgenes, etc.Comentariospuedes escribir comentarios entre el cdigo JavaScript, igual que puedes en CSS. En JavaScript, los comentarios de una sola lnea se escrben as:// Esto es un comentarioPero tambin puedes escribir comentarios en ms de una lnea, igual que en CSS:/ *Esto es un comentariode varias lneas.* /OperadoresUnoperadores bsicamente un smbolo matemtico que puede actuar sobre dos valores (o variables) y producir un resultado. En la tabla de abajo aparecen los operadores ms simples, con algunos ejemplos para probarlos en la consola del navegador.OperadorExplicacinSmbolo(s)Ejemplo

Suma/concatenacinSe usa para sumar dos nmeros, o juntar dos strings en uno.+6 + 9;"Hola" "mundo!" +;

Resta, multiplicacin, divisinstos hacen lo que esperarras que hicieran en las matmticas bsicas.-,*,/9 - 3;8 * 2; // La multiplicacin en JS es un asterisco9 / 3;

Operador de asignacinLos has visto anteriormente: asigna un valor a una variable.=var myVariable = 'Bob';

identidad/igualdadComprueba si dos valores son iguales entre s, y devuelve un valor detrue/false(booleano).===fue myVariable = 3;=== myVariable 4;

Negacin, distinto (no igual)En ocasiones utilizado con el operador de identidad, la negacin es en JS el equivalente al operador lgico NOT cambiatrueporfalsey viceversa.!,! ==La expresin bsica estrue, pero la comparacin devuelvefalseporque lo hemos negado:fue myVariable = 3;! === myVariable 3;Aqu estamos comprobando "esmyVariableNO igual a 3". Esto devuelvefalse, porque ES igual a 3.fue myVariable = 3;! myVariable == 3;

Hay mucho por explorar, pero con esto ser suficiente por ahora. MiraExpresiones y operadorespara ver la lista completa.Nota: Mezclar tipos de datos puede dar lugar a resultados extraos cuando se hacen clculos, as que asegrate de que relacionas tus variabables correctamente y de que recibes los resultados que esperabas. Por ejemplo, intoduce"35" + "25" en tu consola. Por qu no obtienes lo que esperabas? Porque las comillas convierten los nmeros en strings has acabado con los strings concatenados entre s, y no con los nmeros sumados. Si introduces35 + 25, obtendrs el resultado correcto.CondicionalesLos condicionales son estructuras de cdigo que permiten poner a prueba si una expresin devuelve verdadero o no y, a continuacin, ejecutar cdigo diferente en funcin del resultado.La forma ms comn de la condicin se llamaif ... else.As, por ejemplo:var helado = "chocolate" ; si ( helado === "chocolate" ) { alerta ( "Yay, me encanta el helado de chocolate!" ) ; } otra cosa { alerta ( "Awwww, pero el chocolate es mi favorito ... ' ) ; }La expresin en elcaso (...)es la prueba - esto utiliza el operador de identidad (como se describi anteriormente) para comparar la variable deheladocon la cadenade chocolatepara ver si los dos son iguales.Si esta comparacin devuelveverdadero, ejecute el primer bloque de cdigo.Si no, vaya ese cdigo y ejecutar el segundo bloque de cdigo despus de laotradeclaracin.FuncionesFuncionesson una forma de encapsular la funcionalidad que desea volver a utilizar, por lo que puede llamar a esa funcin con un nico nombre de la funcin, y no tener que escribir todo el cdigo una y otra vez cada vez que lo utilice.Usted ya ha visto algunas de las funciones anteriores, por ejemplo:1. var myVariable = documento . querySelector ( 'h1' ) ;2. alerta ( 'hola!' ) ;Estas funciones estn integradas en el navegador para su uso en cualquier momento.Si usted ve algo que se parece a un nombre de variable, pero tiene soportes -()- despus de l, es probable que sea una funcin.Funciones a menudo tomanargumentos- bits de datos que necesitan para hacer su trabajo.Estos se colocan dentro de los corchetes, y separados por comas si hay ms de uno.Por ejemplo, elde alerta ()funcin hace un cuadro emergente aparece dentro de la ventana del navegador, pero tenemos que darle una cadena como argumento para decirle cul es el mensaje que se supone que escriba en el cuadro emergente.La buena noticia es que usted puede definir sus propias funciones - en el siguiente ejemplo se escribe una funcin simple que toma dos nmeros como argumentos y mltiplos ellos juntos:funcin de multiplicar ( num1 , num2 ) { var resultado = num1 * num2 ; retorno resultado ; }Intente ejecutar la funcin anterior en la consola, y luego tratar de utilizar su nueva funcin de un par de veces, por ejemplo:multiplicar ( 4 , 7 ) ; multiplican ( 20 , 20 ) ; multiplican ( 0,5 , 3 ) ;Nota: Elretornocomunicado indica al navegador para devolver elresultadovariable de salida de la funcin para que est disponible para su uso.Esto es necesario porque las variables definidas dentro de funciones slo estn disponibles dentro de esas funciones.Esto se llama la variablede alcance(leerms en mbito de las variables aqu.)EventosPara crear interactividad real en un sitio web, usted tiene que utilizar eventos - estas son las estructuras de cdigo que escucha por las cosas que suceden en el navegador, y luego le permiten ejecutar cdigo en respuesta a esas cosas que suceden.El ejemplo ms obvio es elevento click, que se dispar por el navegador cuando el ratn hace clic en algo.Para demostrar esto, pruebe a introducir lo siguiente en la consola, a continuacin, hacer clic en la pgina Web actual:documento . querySelector ( 'html' ) . onclick = funcin ( ) { alerta ( "Ouch Deja de meter!" ) ; }Hay muchas formas de adjuntar un evento a un elemento;aqu estamos seleccionando el elemento HTML y haciendo suonclickpropiedad manejador igual a una funcin annima (una funcin sin nombre) que contiene el cdigo que queremos que se ejecute cuando se produce el evento click.Tenga en cuenta quedocumento . querySelector ( 'html' ) . onclick = funcin ( ) { } ;es equivalente avar myHTML = documento . querySelector ( 'html' ) ; myHTML . onclick = funcin ( ) { } ;Es slo un camino ms corto para escribirlo.Sobrealimentacin nuestro ejemplo el sitio webAhora que hemos revisado algunos conceptos bsicos de JavaScript, vamos a aadir un par de caractersticas bsicas fresco a nuestro sitio ejemplo para darle algunos primeros pasos en lo que es posible.Adicin de un cambiador de imagenEn esta seccin vamos a aadir otra imagen a nuestro sitio, y aadimos algunos simples JavaScript para cambiar entre los dos cuando la imagen se hace clic en.1. En primer lugar, busca otra imagen que desea ofrecer en su sitio.Asegrese de que es el mismo tamao que la primera imagen, o lo ms cerca posible.2. Guarda la imagen en tuimgenescarpeta.3. Vaya a sumain.jsarchivo, e introduzca la siguiente JavaScript (si tu mundo hola JavaScript est todava all, eliminarlo):4. var myImage = documento . querySelector ( 'img' ) ;5. 6. myImage . onclick = function ( ) { 7. var mySrc = myImage . getAttribute ( 'src' ) ; 8. if ( mySrc === 'images/firefox-icon.png' ) { 9. myImage . setAttribute ( 'src' , 'images/firefox2.png' ) ; 10. } else { 11. myImage . setAttribute ( 'src' , 'images/firefox-icon.png' ) ; 12. } }13. Guarde todos los archivos y cargaindex.htmlen el navegador.Ahora al hacer clic en la imagen, se debe cambiar a la otra!As que aqu, estamos almacenando una referencia a nuestro elemento de imagen en lamyImagevariable.A continuacin, hacemos de esta variableonclickpropiedad controlador de eventos igual a una funcin annima.Ahora, cada vez que este elemento se hace clic en la imagen:1. Recuperamos el valor de de la imagensrcatributo.2. Utilizamos un condicional para comprobar si elsrcvalor es igual a la ruta a la imagen original:1. Si lo es, cambiamos elsrcvalor a la ruta de la segunda imagen, obligando a la otra imagen para ser cargado dentro de laelemento.2. Si no lo est (lo que significa que ya debe haber cambiado), cambiamos elsrcvalor de nuevo a la ruta de la imagen original, para darle la vuelta de nuevo a lo que era originalmente.Adicin de un mensaje de bienvenida personalizadoA continuacin vamos a aadir otro poco de cdigo, para cambiar el ttulo de la pgina para incluir un mensaje de bienvenida personalizado cuando el usuario navega por primera vez al sitio.Este mensaje de bienvenida se mantendr cuando el usuario abandona el sitio y luego regresa.Tambin vamos a incluir una opcin para cambiar el usuario y por lo tanto el mensaje de bienvenida en cualquier momento que se requiera.1. Enindex.html, aada la siguiente lnea justo antes de laelemento:< tecla > Cambiar usuario 2. Enmain.js, agregue el siguiente cdigo en la parte inferior del archivo, exactamente como est escrito - esto toma referencias al nuevo botn hemos aadido y el ttulo, y los almacena en las variables:3. var myButton = documento . querySelector ( 'botn' ) ; var myHeading = documento . querySelector ( 'h1' ) ;4. Ahora agregue la siguiente funcin para establecer el saludo personalizado - esto no va a hacer nada, pero vamos a utilizar ms adelante:5. funcin setUserName ( ) { 6. var myName = prompt ( "Introduzca su nombre. ' ) ; 7. localStorage . setItem ( 'nombre' , myName ) ; 8. myHeading . .innerHTML = "Mozilla es fresco, ' + myName ; }Esta funcin contiene unsmbolo ()funcin, que muestra un cuadro de dilogo un poco comode alerta ()hace;la diferencia es queprompt ()pide al usuario que introduzca algunos datos, y almacena los datos en una variable cuando el cuadro de dilogoAceptarse pulsa el botn.En este caso, estamos pidiendo al usuario que introduzca su nombre.A continuacin, hacemos un llamado a una API llamadalocalStorage, lo que nos permite almacenar datos en el navegador, y recuperarlo ms adelante.Utilizamos de localStoragesetItem ()funcin para crear y almacenar un elemento de datos llamado"nombre"y establezca su valor a lamyNamevariable que contiene el nombre de usuario introducido.Por ltimo, nos fijamos elinnerHTMLde la rbrica en una cadena, adems del nombre del usuario.9. A continuacin, agregue estapersona si ...bloquear - que podramos llamar el cdigo de la inicializacin, como lo establece la aplicacin cuando se carga por primera vez:10. if ( ! localStorage . getItem ( 'name' ) ) { 11. setUserName ( ) ; 12. } else { 13. var storedName = localStorage . getItem ( 'name' ) ; 14. myHeading . innerHTML = 'Mozilla es fresco, ' + storedName ; }Este bloque utiliza primero el operador de negacin (NOT lgico) para comprobar si elnombreexiste elemento de datos - si no existe, elsetUserName ()la funcin se ejecuta para crearlo.Si ya existe (es decir, el usuario establece que cuando previamente visitaron el sitio), recuperamos el nombre almacenado utilizandogetItem ()y establezca elinnerHTMLde la rbrica en una cadena, adems del nombre del usuario, el mismo que hicimos en el interiorsetUserName ().15. Por ltimo, poner el siguienteonclickcontrolador de eventos en el botn, por lo que al hacer clic elsetUserName ()se ejecuta la funcin.Esto permite al usuario establecer un nuevo nombre cuando lo deseen pulsando el botn:16. myButton . onclick = funcin ( ) { 17. setUserName ( ) ; }Ahora la primera vez que visita el sitio, te pedir tu nombre de usuario y luego darle un mensaje personalizado.A continuacin, puede cambiar el nombre de cualquier momento que desee oprimiendo el botn.Como bono adicional, porque el nombre se almacena dentro localStorage, persiste despus de que el sitio est cerrado, por lo que el mensaje personalizado todava estar all cuando se abre el sitio de nuevo!ConclusinSi usted ha seguido todas las instrucciones de este artculo, usted debe terminar con una pgina que se ve algo como esto (tambin puedever nuestra versin aqu):