Saltar al contenido

Aprender Javascript, lo básico

aprender-javascript

Java y Javascript no tienen nada en común, solo el nombre.

Uno es un lenguaje de programación de propósito general (Java sirve para crear apliaciones con cualquier proposito y en cualquier entorno) y el otro de proposito concreto (Javascript es un lenguaje cuyo objetivo es ejecturase en un navegador. Esta creado para la web y no se pueden crear aplicacciones javascript de tipo escritorio aunque a veces lo pueda parecer)

Características de Javascript

  • Se ejecuta en local
  • Es de respuesta inmediata (por este motivo)
  • Es interpretado (no compilado)

En java por ejemplo, el código es compilado en un fichero para poder ejecutarse.
En javascript el código es ejecutado directamente por el navegador.

  • Agrega interactividad a los sitios web

Todo sitio web esta creado con 3 lenguajes:
HTML, la estructura
CSS, la apariencia
Javascript, el comportamiento

  • Proporciona efectos visuales dinámicos

JQuery

Debido a que Javascript se emplea para multiples apliaciones sus estructuras de código son cada vez mas complejas. Por ello surge JQuery.

JQuery es un librería de código Javascript ya programado para nuestro uso. Una recopilación de funcionalidades ya editadas de libre acceso y código abierto, es decir que las podemos modificar a nuestra voluntad.
Todas a nuestra disposición para aplicarlas en nuestros proyectos.
De esta formas nos ahorramos tener que editar miles de lineas de código para crear una funcionalidad concreta.
JQuery:

  • Simplifica la dificultad a la hora de programar.
  • Soluciona problemas de incompatibilidad entre navegadores.

Dónde colocar el código Javascript

¿Donde colocamos el código en nuestras paginas webs?

  • CASI SIEMPRE dentro de la etiqueta <head></head>
  • También se puede colocar dentro del <body></body>, después del <body></body>
  • O en un archivo externo con una extensión «.js» (usando un enlazado similar al que usamos con las hojas de estilo).

Cómo colocar el código Javascript

Teniendo en cuenta el sentido de lectura del código, que es de arriba hacia abajo, la colocación del código en un sitio u otro arrojará resultados diversos. Dependerá de lo que deseemos obtener. Por ejemplo, si lo ubicamos en el Head (<head>) el código Javascript se ejecutará antes que el contenido de la pagina web (<body>). Pero puede suceder que deseemos que se ejecute primero el body antes que javascript, en ese caso lo colocaremos al final o después del body.

No obstante, la mayoría de ocasiones se coloca en el <head></head>.

Colocar el código Javascript en un archivo externo .js

Nuestra web contendrá un enlace a este archivo externo.

Para crear este archivo bastará con guardarlo con extensión .js (por ejemplo, codigos.js)

Cuando creamos el archivo externo .js NO ponemos las etiquetas <script></script>

El enlace lo crearemos en cualquier punto dentro del Head (<head>) usando la etiqueta:

<script src=»nombredearchivo.js»></script>

La ventaja de tener nuestro código Javascript en un archivo independiente es que se puede reutilizar en otras páginas.

Esto es muy útil para los sitios web los cuales están formados por cientos de páginas webs. De esta forma, si quisiéramos modificar una instrucción de Javascript que afecta a todas las paginas de un sitio web, bastaría con modificar el archivo enlazado, en lugar de ir página por página modificando los valores.

(Falta parte de la lección)

Estructuras básicas que tengo que aprender de Javascript

Sentencias

Son las unidades básicas de programación. Terminan en ; (aunque algunos programadores las omiten).

Cada vez que veamos en un código javascript un punto y coma ; quiere decir que ahí termina una sentencia.

Son como las frases en un texto que finalizan con un punto.

Esto es una sentencia:

document.write(«hola»);

Funciones

Las funciones son un conjunto de sentencias que ejecutan una acción. Siempre llevan paréntesis.

Esto es una función:

document.write();

Hay funciones predefinidas, que vienen «por defecto» con el lenguaje y funciones propias, creadas por nosotros.

Ambas se pueden combinar.

Tipos de datos

Cuando nos comunicamos entre personas usamos datos y para programar también necesitamos los datos constantemente. Para aprender Javascript necesitamos usar 7 tipos de datos:

  • Números: Son los valores de números. Enteros o decimales. 1, 50, 20, 1.5
  • Strings: Son los comumente conocidos como valores de texto, pero en realidad son cualquier caracter de tu teclado que vaya  entrecomillas. Pueden ser dobles o simples, preferiblemente se usan las comillas simples: ‘Juan’ es un string.
  • Booleans: Pueden ser true o false. Es útil pensar en los booleanos como interruptores de encendido y apagado.
  • Null: Representa la ausencia intencionada de un valor.
  • Undefined: Representa la ausencia de un valor. Tiene un uso diferente a Null.
  • Symbol: Se trata de un nuevo tipo de dato. Son identificadores únicos empleados en la codificación más compleja.
  • Object: Es una agrupación de datos relacionados entre sí.

Comentarios

De una linea
// Esto es un comentario de una linea
De más de una linea
/*Esto es un comentario de
más de una linea*/

Operadores Aritméticos

JavaScript tiene varios operadores aritméticos integrados que nos permiten realizar cálculos matemáticos.

  1. Suma: +
  2. Resta: –
  3. Multiplicador: *
  4. Divisor: /
  5. Remainder o modulo: %

Concatenación de Strings

Los operadores aritméticos también se usan en Strings.

Cuando usamos + entre strings se añade el string de la derecha al de la izquierda. A esto se le llama concatenación.

Propiedades .length

Los objetos y las sentencias de tipos de datos, pueden tener propiedades, información almacenada.
Se obtienen con un . más la propiedad

por ejemplo:
.length

Esta propiedad (.length) en concreto nos permite conocer el número de caracteres de ese string.

Puede ser útil pensar en los objetos y en las propiedades como nombres, y en los métodos como verbos. Los primeros son cosas, y los segundos, acciones que esas cosas pueden hacer.

Métodos console.log();

Los objetos, incluidos las sentencias de tipos de datos, pueden tener métodos, para realizar acciones con ellos.
Los métodos se invocan con un . el nombre del metodo y ()

JavaScript tiene por defecto métodos de Strings.
Usamos estos métodos así;

Sentencia o declaración, más un punto, más el nombre del método, más () .Mira este ejemplo:

‘string’.metodo();

‘juan’.methodName();

//juan es el string y methodName() el nombre del método

console.log();

//aquí estamos invocando el metodo .log en el objeto console

veamos otro ejemplo:

console.log(‘juan’.toUpperCase());

Aquí estamos invocando el metodo .log sobre console, para ver el resultado en la consola del navegador. En segundo lugar, estamos invocando el método .toUpperCase() sobre la declaración de string ‘juan’. el resultado de la accion en la consola sera JUAN, ya que el metodo .toUpperCase() pone el string en mayusculas.

Objetos Integrados (Buil-in Objects) Math.

Los objetos integrados son colecciones de métodos y propiedades que javascript ya tiene integrados en su programación.

Por ejemplo, el objeto integrado Math para operaciones matemáticas complejas puede ser invocado así:

console.log(Math.random());

Esto arrojarÁ un numero aleatorio en la consola entre 0 y 1. Ya que también estamos aplicando el método .random()

Podemos combinar las invocaciones de métodos añadiendo cualquier operación aritmética.

Por ejemplo
console.log(Math.random()*50);
//el numero aleatorio sera multiplicado por 50.

A su vez, estos objetos integrados tienen métodos. Math tiene el método .random() y el .floor() que redondea un numero decimal a un numero entero.

ejemplo_math

Variables

Son espacios (como compartimentos o cajas) volátiles (ya que se guardan en la memoria RAM del ordenador) donde se almacenan datos que pueden cambiar (por su naturaleza volátil) durante la ejecución del programa.

Las variables sirven para etiquetar con nombres los datos que usamos. Tienen que ser nombres descriptivos para saber a que nos estamos refiriendo.

Las variables etiquetan/nombran y almacenan datos en la memoria.

Solo hay unas pocas cosas que puedes hacer con variables:

  1. Crear una Variable con un nombre especifico.
  2. Almacenar o cambiar la información guardada en una variable
  3. «Extraer» información almacenada en una variable.

La variables no tienen valores, contienen valores y los identifican con nombres.

Así, hay variables con valores de tipo número, string o booleano.

Antes se usaba la palabra reservada var para declarar variables. Actualmente se usan con mayor frecuencia let y const.

Estas dos palabras se usan para declarar variables desde la nueva convención, sin embargo, como aun hay mucho codigo con la palabra var, debemos familiarizarnos con ella.

Palabra reservada let

let indica que se le puede reasignar un valor diferente a la variable.
varible_let

Podemos declarar variables sin asignar un valor, por ejemplo:

let usoLet;
console.log(usoLet);
//En la consola veremos: undefined

Pero como let permite reasignar el valor podemos cambiar su valor, quedando así:

let_ejemplo

Como vemos en el ejemplo para reasingar un nuevo valor a una variable no debemos repetir la palabra reservada:

let usolet;
let usolet=’no mas undefined’; //esto es incorrecto
usolet=’no mas undefined’; //esto es correcto

Palabra reservada const

Const se emplea en variables a las cuales no reasignaremos su valor.

Cuando declaras una variable si necesitas reasignar su valor posteriormente usa let, si no, usa const.

Aplicando Operadores Matemáticos en las variables

Podemos usar los operadores matemáticos +, -, *, / para modificar los valores de la variables:

suma_let

Y también los operadores integrado en javascript +=, -=, *= /=

+= suma (resta, multiplica o divide) el valor de la variable más el nuevo valor.

let v=5
let += 1
console.log(v);
//El valor en consola sera 6

Operadores de Incremento y Decremento en Variables

El operador de incremento (++) aumenta el valor de la variable en 1.
El operador de decremento (–) disminuye el valor de la variable en 1.

operadores_incre-decre

Igual que con los otros operadores, la variable adquiere un nuevo valor tras aplicar el operador.

Si el operador ++ y — se indica después, su valor incrementará después de ejecutar la sentencia.

Ejemplo:

let numero1= 3
let numero2=4
numero3 = numero 1++ + numero 2;
// el resultado será: numero3 = 7 y numero1= 4 (se le suma una unidad después de la sentencia).

Concatenación de Strings en Variables

El operador + puede usarse para combinar strings incluso si esos strings estan dentro de variables.

Ejemplo:

concatenacion_strings

Otro ejemplo, donde incluimos los espacios.

concatenacion_ejemplo

Plantillas de cadena de texto en Variables (Template Strings)

Esta opcion se introdujo en la ultima version de JS, y nos permite insertar variables dentro de strings.

Ejemplo de uso de plantilla de cadena de texto.
interpolacion_ejemplo

Esta es la estructura:
` ${ nombre de variable aqui dentro } `

Otro ejemplo:
plantilla-de-texto

Operador typeof

Usaremos el operador typeof para saber el tipo del valor de una variable.

Ejemplo:
operador-typeof

Condicionales

En la vida tomamos decisiones en función de las circunstancias.
Si llueve, cogemos el paraguas, si estamos cansados, dormimos.
Estas decisiones tiene su traducción en JS en la declaración de condicionales.

Las condicionales revisan una condición dada y realizan una acción en función de esa condición.

Estructura If

Veamos como se declara una condicional con If

declaracion_if

La declaración esta compuesta de:

if + () {
}

Dentro de los paréntesis irá la condición a evaluar como true o false.
Dentro de las llaves irá el bloque de código a ejecutar.

Si la condición se evalúa como verdadera (true) se ejecuta el código.
Si se evalúa como falsa (false) no se ejecuta el código.

if      //lo podemos traducir como un «si…»

Estructura If…Else

En ocasiones, las decisiones que se deben realizar no son del tipo «si se cumple la condición, hazlo; si no se cumple, no hagas nada». Normalmente las condiciones suelen ser del tipo «si se cumple esta condición, hazlo; si no se cumple, haz esto otro».

Usaremos la declaración else cuando la condición es evaluada como falsa.

declaracion_if_else

else debe estar vinculado a if.

le sigue un bloque de código a ejecutar entre llaves {}

Este código se ejecutará cuando la condición de if sea evaluada como falsa.

else // se puede traducir como «Y si  no…»

También conocida como decisiones binarias, la declaración if…else nos permite automatizar soluciones a peticiones de si o no.

Operadores de comparación

En las condicionales necesitamos tipos de operadores para comparar valores.

Siempre se compara el valor de la izquierda con el de la derecha. Es útil interpretar los operadores de comparación como preguntas de si o no. Si la respuesta es sí, la declaración se evalúa como verdadera, si es no, se evalúa como falsa:

operadores_comparacion

< Menor que
(Ejemplo: x < y «¿Es x menor que y?»)
>Mas que
<=Menor o igual que
>=Mayor o igual que
=== Igual que (no confundir con = que es un operador de asignación. Este operador se utiliza para guardar un valor específico en una variable.
!== No es igual que

Podemos usar los comparadores en diferentes tipos de datos, ejemplo con strings:

operador_comparacion

Todas las declaraciones de comparación se evalúan como true (verdaderas) o false (falsas):
Están hechas de:

  • Dos valores comparados entre si
  • Un operador (>,<,>=,<=,===,!==) que las compara entre sí.

Ejemplo:
ejemplo_compara_else_ifejemplo_compara_else_if2

En este ejemplo como nivelDeHambre es 7, la condición se cumple y se registra en la consola ‘Hora de comer’!

Operadores de lógica

Al trabajar con condicionales usamos valores de true y false (booleanos).
Para usar este tipo de datos usamos los operadores de lógica.

Hay tres operadores lógicos:

&& = Operador Y
Cuando usamos este operador estamos comprobando que dos datos son true (verdaderos).

Cuando se utiliza && estamos comprobando que ambas condiciones son true, si ambas son true, la condición es evaluada como true y se ejecuta el condigo dentro del bloque if:
&&-ejemplo

Si alguna de las condiciones no es cierta, la condicion && sera evaluada como false y se pasará a ejecutar el codigo dentro del bloque else:
&&ejemplo_2

|| = Operador O

Si solo queremos que una de las condiciones sea true, usaremos ||. Si se cumple cualquiera de las condiciones comparadas se ejecutara el código en el bloque.
ejemplo1||

Si dia1 === sabado o dia2 === domingo, ejectua console.log(‘findee’); La condición se cumple es true.

ejemplo2||

Si dia1 === lunes o dia2 === martes, ejectua console.log(‘findee’); La condición es false, y pasa a ejecutar else

! = Negación. Es uno de los operadores lógicos más utilizados. Se utiliza para obtener el valor contrario al valor de la variable. Si es false dirá true y viceversa.

ejemplo-operador-!

Datos de valores Verdaderos y Falsos

Cuando usamos variables en un contexto booleano o condicional, los datos son evaluados como true, ya que no se les ha asignado un falso valor.
ejemplo:

ejemplo1_valores_falsos

Valores evaluados como falsos en condicionales:

  • 0
  • Strings vacíos: ‘     ‘
  • null representa cuando no hay valor
  • undefined representa cuando una variable se declara sin valor.
  • nan not a number

Ejemplo:

ejemplo_valores-falsos

la condición es evaluada como false porque numeroDeManzanas es 0. Y 0 es un valor evaluado como falso, por eso se ejecuta el código en else.

Evaluadores cortocircuito

Declaracion Else If

Nos permite más de dos condiciones.
Puedes añadir tantos else if como quieras para hacer condicionales mas complejas.

Viene después del if .
Ejemplo:

else_if_ejemplo

Como luz del semáforo === rojo es false, y luz del semáforo === amarillo es true, se ejecuta el código insertado en else if, el resto de la condición no es evalúa.
Si tanto if como else if resultaran false se ejecutaría el código en else, como en ejemplo:

else_if_ejemplo2

Bucles

Estructura for

Las estructuras if y if…else no son eficientes cuando se desea ejecutar de forma repetitiva una instrucción.

La estructura for permite realizar repeticiones (también llamadas bucles).

Para ello crearemos una variable cuyo valor nos permitirá jugar con las repeticiones del código que deseemos por ejemplo y muchos usos.

Esta es su representación:

estructura-for

Se usa i como identificador de la variable por convención.

for(inicio//aquí insertamos una variable; condición//aquí la condición (traducida como «mientras… i»,  actualización//aqí normalmente decremento o incremento de i {

//bloque de código a ejecutar mientras la condición sea true

}

Esta es la sintaxis de la declaración de una Variable («declarar» significa construir en programación).

variables-sintaxis

Usaremos var y el nombre que le queremos asignar a la Variable.

Nombrar Variables

Para dar nombre a una variable debemos seguir las siguientes reglas:

  • Tiene que comenzar por una letra, $ o _
  • Tener sólo letras, números,$ y _
  • Son case sensitive. El lenguaje javascript distingue entre mayúsculas y minúsculas.

var loquesea, var LOQUESEA, var LoQueSea, son Variables distintas.

  • No deben tener palabras reservadas.

palabra_reservadapalabras_reservadas_no

var y alert son palabras reservadas, palabras que forman parte del propio lenguaje javascript.

  • Que los nombres sean descriptivos de lo que son. Para que cualquiera que revise el código tenga una idea de ello.

No es lo mismo:

var pf;

que

var puntuacion_final;

La segunda es descriptiva.

Declarar e Iniciar Variables

Para explicar la Declaración e Inicio de una Variable usaremos un ejemplo hipotético de creación de un juego de puntuación.

Empezamos con la Declaración, dando un nombre a una Variable:

var puntuacion;

Seguimos con el Inicio de la Variable. Tras el nombre añadimos = y el valor o dato. Para poder almacenar este dato primero debemos haberla declarado.

puntuacion= 0;

Esta es nuestra variable:

var puntuacion;

puntuacion=0;

La sintaxis de Javascript permite Declarar e Iniciar en la misma linea:

var puntuacion=0;

Tambien permite Declarar variables en la misma linea:

Variables sin simplificar:

var puntuacion;

var jugador;

var record;

Variables simplificadas en la misma linea:

var puntuacion, jugador, record;

Veamos las anteriores Variables Declaradas e Iniciadas en la misma linea:

Sintaxis normal:

var puntuacion;

puntuacion=0;

var jugador;

jugador= «Juan»;

var record;

record=500;

Sintaxis simplificada:

var puntuacion=0, jugador= «Juan», record=500;

Practicando con Variables

Donde ubicamos el código Javascript

Hay tres opciones:

  • Dentro del head (dentro del documento html)
  • Dentro del body (dentro del documento html)
  • En un hoja externa

Dentro del head es lo más habitual. Abrimos una etiqueta script y la cerramos e introducimos ahí nuestras Variables.

Tenemos que interpretar las variables como compartimentos que creamos en la memoria RAM del ordenador donde se esta ejecutando el programa en javascript.

prueba-variables

Con la instrucción alert le indicamos que abra en una ventana emergente de lo que hay almacenado en la variable que indiquemos.

Por ejemplo,

alert(nombre);

daría este resultado.

alert-variables

Errores en la sintaxis del código

Si el editor que usamos no tiene la función de corrección automática de sintaxis, podemos usar la consola del navegador para averiguar donde está el error.

Qué son los Arrays

Los Arrays también llamados Arreglos o Matrices, son estructuras comunes a la mayoría de lenguajes de programación.

Para entenderlo, podemos considerar un Array como «una gran Variable» donde almacenamos no 1 solo valor sino muchos.

Si necesitamos almacenar diversos datos para un proyecto en Javascript podemos:

  • Crear una variable para cada dato (lo cual resultaría engorroso y laborioso).
  • Usar Arrays.

Como hemos visto, una Variable es un espacio volátil que creamos en la memoria RAM del PC. Un Array actua igual que una Variable pero albergando muchos espacios a la vez, donde podremos almacenaremos el número de valores que queramos y de cualquier tipo (Números, Strings, Booleans, Fecha…). Mientras que una Variable solo nos deja guardar un Valor, el Array es como una gran Variable donde podemos almacenar muchos valores y de diversa tipología.

Un Array es como una archivador con divisiones o secciones donde podemos almacenar y clasificar múltiples documentos .

Cómo se declara un Array

Como hemos visto los Array nos ayudan a manejar de forma grupal las Variables.

La sintaxis para declarar un Array en Javascript es:

var loquesea=[«loquesea1», false, 1, «loquesea2»];

var + nombre de Array (siguiendo las mismas pautas para nombrar que para las Variables) + signo igual +  corchetes + elementos que alberga el Array, sin son de tipo Strings irán entre comillas)+punto y coma para cerrar

También se puede emplear esta otra (es igual de válida):

var loquesea=new Array(«loquesea1», false, 1, «loquesea2»);

¿Cómo accedemos al índice de un Array (lo que se almacena en un Array?

Para ello tendremos que acceder a los Índices (o Posición) del Array.

Cuando declaramos un Array cada valor o elemento contenido está identificado con un Índice o Posición. El primer elemento o valor de un Array comienza en el Índice 0, y se representa así: [0]

estructuraarray

Recuerda que siempre se empieza desde la posición [0], una menos.

Para acceder a loquesea3 de este Array usando la función alert como ejemplo ejecutaríamos lo siguiente:

alert(loquesea[2]);

instrucción+nombre de Array+Índice

En la ventana emergente aparece loquesea3

alert-array

Propiedades y Métodos, «las herramientas» para manipular los Arrays

Funciones utiles par arrays

length calcula el número de elementos de un array

ejemplo_length2

concat()  se emplea para concatenar los elementos de varios arrays

ejemplo_concat2

split(separador) convierte una cadena de texto en un array de cadenas de texto. La función parte la cadena de texto determinando sus trozos a partir del carácte separador indicado

ejemplo_split

Con esta función se pueden extraer fácilmente las letras que forman una palabra:

ejemplo_split2

join(separador) es la función contraria a split() Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicado

ejemplo_join

pop() elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.

ejemplo_pop

push() añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

ejemplo_push

Propiedades

  • length Es una propiedad muy útil.

Nos dice cuántos elementos tiene un Array:

loquesea.lenght=4;

(nombre de array).(propiedad)=(valor);

Métodos

  • push

Añade un elemento o varios al final del Array:

loquesea.push=(«loquesea1000»);

un elemento

loquesea.push=(«loquesea1000», «loquesea1001», «loqueseaX»);

varios elementos

  • unshift

Añade elementos al inicio del Array.

loquesea.push=(«loquesea1000»);

un elemento

loquesea.unshift=(«loquesea1000», «loquesea1001», «loqueseaX»);

varios elementos

  • pop

Elimina elementos al final del Array

loquesea.pop()

  • shift

Elimina elementos al inicio del Array

loquesea.shift()

Condicionales y Loops (o Bucles)

Ambas son estructuras de control de flujo, porque modifican el flujo de ejecución de arriba hacia abajo.

(x) imagen

Podemos volver a una línea anterior o saltar líneas de código hacia adelante.

Condicionales

Una Condicional  consiste en la toma de una decisión.

Cuando ejecutamos Javascript, tomará una decisión u otra en función de la condición que indiquemos en el código, dando la sensación de que la página web tiene inteligencia propia.

Para crear un Condicional usamos la instrucción:

if      //lo podemos traducir como un «si…»

condicionales-javascript-estructura

Sintáxis del Condicional

condicionales-javascript-sintaxis

El Condicional if puede ir acompañado de la instrucción:

else // se puede traducir como «Y si  no…»

Con el else le estamos indicamos que si no se cumple la condición ejecute la instrucción indicada dentro del else. 

condicionales-javascript-sintaxis-else

Cómo creamos la Condición

Usando los Operadores:

javascript-operadores

Operadores lógicos

javascript-operadores-logicos

operadores-logicos-and

operadores-logicos-or

Estos operadores los usaremos para crear condiciones más complejas y comparar no solo dos valores entre sí, si no muchos más.

Funciones y propiedades

length:

calcula la longitud de una cadena de texto (el número de caracteres que la forman)

var mensaje= ‘hola’;

ejemplo_length

concat() se emplea para concatenar varios strings

ejemplo_concat

toUpperCase() transforma todos los caracteres del string a mayúsculas

ejemplo_touppercase

toLowerCase() transforma todos los caracteres de la cadena a minúsculas

 

Este post esta basado en el Curso de Javascript de Píldoras Informáticas.