nociones basicas de JavaScript

Nociones básicas de JavaScript

JavaScript para gente normal

Índice

1. Las etiquetas de JavaScript

2. Variables

2.1 Funciones y propiedades de las variables  – Métodos

2.2 Arrays

2.2.1 añadir elementos a un array con la función push

2.2.2 Calcula el número de elementos de un array con la función length

2.2.3 Borrar elemento de un array con la función delete

2.2.4 Actualizar los elementos de un array 

3. Operadores

4. Funciones estructuradas

4.1 La función “IF” y “IF…ELSE”

4.2 La Función For

4.3 La función switch

5. Funciones

6. Bucles

6.1 Sentencia for

 

Este articulos pertenece a la serie de post de la formación para desarrollador web. Se puede ver el articulo de Nociones básicas de PHP para conocer más sobre este lenguaje y sus diferencias y similitudes con JavaScript

¿Por qué aprender JavaScript?

JavaScript es uno de los lenguajes de programación del que más se va a hablar de él dentro de los próximos 10 años y claro, pertenece a uno de los 4 jinetes del apocalipsis (HTML5, CSS3, PHP, JAVASCRIPT)  que hacen falta para poder ser un buen desarrollador en wordpress. El mismísimo Matt Mullenweg lo lleva diciendo hace mucho tiempo y cada más se ve que el motor de este CMS se esta basando en programación en JavaScript.

¿Qué es JavaScript?

Es el único lenguaje de programación orientado a objetos compatible con todos los navegadores y que se ejecuta en el lado del navegador al contrario de PHP que lo hace del lado del servidor. Esto nos crea un lenguaje interpretado (que no requiere ser compilado) con una extensión .js y donde su código puede ir incluido en una página HTML clásica  para poder crear páginas webs dinámicas o en un archivo externo que será llamado por una la etiqueta script que se colocara dentro de las etiquetas <head></head>

Documentación extra

 

Tip

Para poder practicar, lo mejor es utilizar un editor de código. Aconsejo ver este video para instalar sublime text y poder hacer pruebas de código.

Código paquete de plugins

Recordar que para que funcione correctamente emmet primero tenemos que crear un proyecto y guardarlo con el un nombre terminado con .html y posteriormente elegir una ruta para grabar el archivo. Es muy cómodo ver los cambio que estamos haciendo en un navegador . Para hacer esto solo tenemos que pulsar en botón derecho pulsar en Open in Browser.

Para poder probar el código PHP usar esta web online.

IMPORTANTE

Para poder visualizar el código HTML mezclado con el JavaScript el archivo tiene que ser guardado con formato .php 

 

1. Las etiquetas de JavaScript

Las etiquetas usadas en JavaScript  son <script>  </script> y se puede incluye en cualquier parte del documento html. Pero se recomienda incluirlas  dentro de la cabecera del documento (dentro de la etiqueta <head>):

Sintaxis

Documentación extra

La consola de JavaScript

Una buena práctica para empezar a trabajar con JavaScript es hacerlo a través de la consola del navegador que se puede visualizar pulsando en botón derecho del ratón y pulsamos en inspeccionar y luego en la pestaña consola (En el caso de Chrome). Para poder visualizar la la información que necesitemos ver del código necesitamos conocer un comando console.log(”);

Ejemplo

Resultado:

resultado en la consola ejecutando el comando console.log

Separador de instrucciones (;)

No es necesario terminar cada sentencia con el carácter de punto y coma (;) como en la mayoría de lenguajes de programación. Aunque JavaScript no obliga a hacerlo, es conveniente hacerlo.

Documentación extra

Comentario

Los comentarios en el código sirven para dejar anotaciones del código sin que afecten al funcionamiento de este. JavaScript acepta dos tipos de comentario.

// incluye comentario hasta el final de la linea.

/*  comentario*/   para insertar comentarios en varias líneas

Ejemplo:

Resultado:
¡Hola Joaquín!

2. Variables

Las variable son “elementos” que contiene un valor fijo o dinámico y diferencian entre minusculas y mayusculas. El nombre de una variable debe empezar con una letra o con el carácter de subrayado _ (underscore/barra baja)

Documentación extras

Existen muchos tipos de variables pero las más importante son:

  • De tipo String. Son variables donde su valor es texto, que siempre debe ir dentro de ‘ ‘ (comillas simples) si dentro de este formato metemos números, PHP los reconocerá como texto, no como un número. 
    variablestring = ‘Siempre Texto’;
  • De tipo Integers. Son variables donde su valor son números enteros con los cuales podemos hacer, entre otras cosas, operaciones matemáticas.
    variableintegers =38;
  • De tipo Float: Son variables donde su valor son  número decimales y se comportan igual que en anterior tipo.
    variablefloat =45,60;
  • De tipo Booleanos.  Es un tipo de dato que indica verdad y solo acepta 2 valores TRUE FALSE  y se usan principalmente cuando necesitamos las condicionales.
    variableboolean = true;

Documentación extra

 

Ejemplos

Resultado en consola
Joaquín
38
true

Ejemplo 2

Resultado en consola

30
10
5

Ejemplo 3

Resultado en consola

Joaquín Lopez

Ejercicio

Modificar el primer script para que:

  1. Todo el código JavaScript se encuentre en un archivo externo llamado codigo.js y el script siga funcionando de la misma manera.
  2. Después del primer mensaje, se debe mostrar otro mensaje que diga “Soy el primer script”
  3. Añadir algunos comentarios que expliquen el funcionamiento del código
  4. Añadir en la página XHTML un mensaje de aviso para los navegadores que no tengan activado el soporte de JavaScript

Solución del código html

Solución de la página codigo.js

2.1 Funciones y propiedades de las variables – Metodos

Las variables en JavaScript, a diferencia de otro lenguajes de programación, también son un objeto (veremos el concepto objeto más adelante) y por ello tienen unas propiedades que las convierten en funciones y que nos permiten utilizar esas funciones para realizar operaciones básicas.

Por ejemplo: si necesitamos que una cadena de texto se conviertan todas sus letras a mayúscula usamos la función  toUpperCase() 

Estas funciones las encontramos en los:

Pulsar en el enlace para ver las funciones de estas variables más comunes

Funciones y propiedades básicas para el manejo de las variables

2.2 Arrays

Un array es una agrupación de variables que pueden ser del mismo tipo (String, integer, float…) o cada una una de un tipo diferente.

Existen tres formas de definir las variables aunque la más usada es la tercera (Tipo_3), ya que con las anteriores existe un caso que la variable si solo tiene un elemento deja de ser un array. Estos elementos tiene que ir separados con coma (,).

Ejemplo

En consola se muestra de esta manera

arrays javascript como se ven desde la consola

Para acceder desde una variable a algunos de los elementos del array las debemos definir de esta forma

Tengamos en cuenta que los elementos de un array se empiezan a contar desde el cero (0) y no desde el uno (1)

los arrays tienen unas funciones muy útiles que las complementan y que nos ayuda a realizar alguna acciones ya definidas por JavaScript.

Veamos las más usadas.

2.2.1 añadir elementos a un array con la función push

Por ejemplo, si queremos añadir un elemento llamado Juernes a nuestro ejemplo anterior y que tomaría el valor 7 lo haríamos así:

2.2.2 Calcula el número de elementos de un array con la propiedad length

2.2.3 Borrar elemento de un array con la función delete

Cuando se utiliza este método lo que realmente hace es eliminarlo pero deja el espacio en blanco.

borrar un elemento de un array con la funcion delete

2.2.4 Actualizar los elementos de un array 

Nos ayudará o bien a reemplazar un elemento que ya se encuentra en una variable o para completar un espacio vacío como en el caso anterior. 

 

 

 

 

Todos los métodos o referencias para las arrays

 

 

3. Operadores

Los operadores son elementos que nos  permiten cambiar el valor de las variables, comparar diferentes variables y realizar operaciones matemáticas. Los operadores permiten a los programas omar decisiones lógicas en función de comparaciones y otros tipos de condiciones y realizar cálculos complejos.

  • Asignación (=)
  • Incremento y decremeto (++) | (–)
  • Lógicos
    – Negación (!)
    – AND (&&)
    – OR (||)
  • Matemáticos suma (+), resta (-), multiplicación (*) y división (/) y el operador “módulo” (%) ver documentación para entender
  • Relacionales mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que (==) y distinto de (!=)

Ver todos los operadores disponibles

Ejercicio

A partir del siguiente array que se proporciona: var valores = [true, 5, false, "hola", "adios", 2];

  1. Determinar cual de los dos elementos de texto es mayor
  2. Utilizando exclusivamente los dos valores booleanos del array, determinar los operadores necesarios para obtener un resultado true y otro resultado false
  3. Determinar el resultado de las cinco operaciones matemáticas realizadas con los dos elementos numéricos

Solución

 

4. Funciones estructuradas

Para poder realizar programas que cumplan condiciones son necesarias las estructuras de control de flujo que son instrucciones tipo “si se cumple esta condición, hazlo; si no, haz esto otro”. Existen otras instrucciones del tipo ” repite estos mientras se cumpla esta condición” y que convierten estos programas en inteligentes para tomar decisiones en función de las variable.

4.1 La función “IF” y “IF…ELSE”

Esta estructura es la más utilizada en la gran mayoría de los lenguajes de programación y se emplea para tomar decisiones en función de una condición y se define así:

La estructura if...else se puede encadenar para realizar varias comprobaciones seguidas:

Documentación extra

Ejemplo:

Otros ejemplos

Ejercicio

Completar las condiciones de los if del siguiente script para que los mensajes de los alert() se muestren siempre de forma correcta:

Solución:

Ejercicio 2

 

Solución

 

4.2 La Función For

La estructura for nos permite realizar bucles siempre y cuando cumplan una condición y se define como:

Vemos, que dentro de los paréntesis del for existen tres instrucciones que se deben cumplir para poder crear el bucle.
La inicialización es donde definimos los valores iniciales del bucle. Seguidamente busca la condición (que es una especie de If) donde se decide según la instrucción si sigue o no, o sea, que mientras su valor sea true se repetirá el bucle hasta que ese valor sea false. Y por último llega hasta la actualización que es el nuevo valor que se asigna a la variable de la inicialización  después de cada repetición.

Documentación extra

Ejemplo 1

 

Ejemplo 2

Ahora utilicemos la misma función for del ejemplo 1 mezclando la función If…else  para pedirle un usuario el número que quiere que cuente y mostrándole unos mensaje dependiendo de una condiciones.

4.3 La función switch

Esta función es una especie de conmutador que utiliza la variable asignada y la compara con distintos casos (case) que habrán dentro del switch.

Definición

 

Ejemplo:

5. Funciones.

Una función es un código de JavaScript encapsulado (conjunto de instrucciones) bajo una palabra dada por nosotros que además le podemos dar unos parámetros y que se ejecutará tantas veces como se lo hayamos indicado. Sirven principalmente para no repetir varias veces alguna instrucción utilizada en el código y de esta forma reutilizarla fácilmente.

Documentación extra

Definición

 

Ejemplo

Vamos a crear una función que sume 2 variables.

Vamos a crear a continuación tres funciones que hagan lo mismo, calcular el impuesto de un precio, pero definidas dentro del código de la función de distinta manera.

Ejemplo 2.1

Función con los valores dados en los argumentos de la llamada de la función.

Ejemplo 2.2

Ahora creamos una función exactamente igual pero uno de los valores de los argumentos ya lo definimos en la función, así cuando llamamos a la función no hace falta darle ese valor ya que es fijo.

Ejemplo 2.3

Por último, haremos lo mismo qua anteriormente pero vamos a pedirle al usuario los valores que quiere calcular, ya que como sabemos, tenemos varios ivas y el ususario podra definir el suyo.

 

Ejercicio 1.

Escribir el código de una función a la que se pasa como parámetro un número entero y devuelve como resultado una cadena de texto que indica si el número es par o impar. Mostrar por pantalla el resultado devuelto por la función.

Solución 1

Solución 2

 

Ejercicio 2.

Definir una función que muestre información sobre una cadena de texto que se le pasa como argumento. A partir de la cadena que se le pasa, la función determina si esa cadena está formada sólo por mayúsculas, sólo por minúsculas o por una mezcla de ambas.

Solución 1

Solución 2

 

6. Bucles

Los bucles no es más que una repetición (recorrido) de un código hasta que se cumpla una condición donde  se detendrá para no entrar en un “bucle” infinito y crear un crack en la web.

Existen varias sentencia (funciones) diferentes para ejecutar un bucle y se diferencian en donde se determina el punto de inicio y final de dicha sentencia . La cuestión es determinar que tipo de sentencia es la más apropiada para recorrer las variables. Veamos los más usados.

6.1 Sentencia for

Esta función ya la estudiamos en el capítulo de Funciones estructuradas

6.X Bucles que recorren arrays

6.X.x Sentencia for…in

Es una función muy usada en objetos pero se trabaja también muy bien para recorrer todas las variables de un array devolviendo el índice de las variable.

definición

Ejemplo

En consola muestra los índices

la sentencia for in devuelve los índices

6.X.x Sentencia for…of

Es una función muy usada en objetos pero se trabaja también muy bien para recorrer todas las variables de un array devolviendo el elemento de las variable.

definición

Ejemplo

En consola muestra los elemento

la sentencia for on devuelve los elementos de una variable

 

 

 

 

 

 

Ver más documentación