JavaScript

¿Que es?

JavaScript es un lenguaje de programación utilizado para dar funcionalidad a los sitios webs

Valores, Tipos y Operadores

En JavaScript podemos manipular diferentes tipos de valores, esto valores conforman los elementos atomicos de JavaScript

Number

Hace referencia a los valores numéricos, ya sean enteros o flotantes

9        Entero
12.3     Flotante
  • La suma (+).
  • La resta (-).
  • La multiplicacion (*).
  • La division (/).
  • La potencia (^).
  • El resto (%).

Strings

Hace referencia a los textos

“Esto es un string”
‘Esto tambien lo es’

La operacion suma (+) puede ser utilizada en strings lo que permitira concatenar cadenas.

Booleans

Son utilizados para distinguir entre dos posibilidades, el si y el no. 

Existen dos valores booleanos,
el true y el false.

Comparaciones

Podemos comparar dos valores

Tambien contamos con operadores logicos:

  • Y (&&).
  • O (||).
  • Mayor (>).
  • Menor (<).
  • Igual (==)
  • Menor o Igual (<=).
  • Mayor o Igual (>=).
  • Diferente (!=).

Expresiones

Todo aquel fragmento de codigo que produzca un valor puede ser entendido como una expresion

15
false
!true

Sentencias

puede ser entendida como aquella oración formada por expresiones

15 + 8
false == !true

Variables

La forma en la cual un programa almacena datos o valores

var numero = 5 * 5;
var miNombre = ‘Neri’;
var mi_apellido = ‘Guidi’;
var perro22 = ‘Guardian’;
var $neri = ‘variable loca’;

Arrays

Representan colecciones de valores.

[“uno”, “dos”, 3, 4, “cinco”, true, false, 8.01]

Objetos

Colección arbitraria de propiedades, las cuales pueden ser agregadas, modificadas y removidas 

var tutor = {
    nombre: “Neri”
,   apellido: “Güidi”
}

Flujo de Control

Permiten que nuestro programa tome una acción si se cumple una condición y una acción alternativa si esta no se cumple o bien repetir una serie de acciones siempre y cuando una condición se cumpla.

if

Se emplea para tomar decisiones

en función de una condición.

if (condición) {
    …
} else {
    …
}

switch

Diseñada para manejar de forma sencilla múltiples condiciones sobre una misma variable

switch (variable) {
    case valor1:
        …
        break;
    case valor2:
        …
        break;
    …
    default:
        …
        break;
}

while

Permite realizar un ciclo simpre y cuando se cumpla una condicion dada.

while (condicion) {
    …
}

do

Permite realizar una tarea similar, solo que la condicion se evalua luego de ejecutar la setencia una vez

do {
    …
} while (condicion)

for

Esta permite agrupar todas las declaraciones en base a las condiciones del ciclo en una misma sentencia.

for (inicialización; condición; actualización) {
    …
}

Funciones

Estas son un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.

function nombre_de_la_funcion(p1, p2, ..., pn) {
    …
}

var mi_funcion = function(p1, p2, ..., pn) {
    ...
}

Propiedades y Funciones

string - length

Calcula la longitud de una cadena, es decir, el número de caracteres que la componen.

var nombre = “Neri”;
nombre.length;
> 4

string - concat

Permite concatenar dos strings.

var nombre = “Neri ”;
var apellido = “Güidi”;
nombre.concat(apellido);
> “Neri Güidi”

string - toUpperCase

Transforma todos los caracteres de una cadena a su correspondiente en mayúscula.

var nombre = “Neri”;
nombre.toUpperCase();
> “NERI”

string - toLowerCase

Transforma todos los caracteres de una cadena a su correspondiente en minúscula.

var nombre = “Neri”;
nombre.toLowerCase();
> “neri”

string - indexOf

Calcula la posición en la que se encuentra un carácter dentro de una cadena de texto. 

var nombre = “Neri”;
nombre.indexOf(“e”);
> 1

var nombre = “Neri”;
nombre.indexOf(“u”);
> -1

string - lastIndexOf

Calcula la última posición en la que se encuentra un carácter dentro de una cadena de texto. 

var nombre = “Neri Güidi”;
nombre.lastIndexOf(“i”);
> 9

var nombre = “Neri”;
nombre.lastIndexOf(“u”);
> -1

string - substring

Extrae una porción de la cadena de texto. 

var parrafo = “Un día de campo”;
parrafo.substring(5);
> “a de campo”

var parrafo = “Un día de campo”;
parrafo.substring(5,9);
> “a de ”

string - split

Separa una cadena de texto en varias en base al delimitador.

var nombre = “hola-como-estas-?”;
nombre.split(“-”);
> [“hola”, “como”, “estas”, “?”];

array - length

Devuelve la longitud de un array.

var numeros = [1,20,45,18,50];
numeros.length;
> 5

array - concat

Permite concatenar dos arrays.

var primeros = [1, 2, 3, 4, 5];
var ultimos = [6, 7, 8, 9, 10];
primeros.concat(segundos);
> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

array - join

Une todos los elementos de un array para formar un string uniendo cada elemento con el delimitador.

var palabras = [“hola”, “como”, “estas”, “?”]; 
palabras.join(“-”);
> “hola-como-estas-?”

array - pop

Remueve el último elemento del array y lo devuelve.

var palabras = [“hola”, “como”, “estas”, “?”]; 
palabras.pop();
> “?”

palabras;
> [“hola”, “como”, “estas”]

array - push

Añade el elemento al final del array

y devuelve la longitud del mismo.

var palabras = [“hola”, “como”, “estas”]; 
nombre.push(“?”);
> 4

nombre;
> [“hola”, “como”, “estas”, “?”]

array - shift

Remueve el primer elemento del array y lo devuelve.

var palabras = [“hola”, “como”, “estas”, “?”]; 
palabras.shift();
> “hola”

palabras;
> [“como”, “estas”, “?”]

array - unshift

Añade el elemento al inicio del array

y devuelve la longitud del mismo.

var palabras = [ “como”, “estas”, “?”]; 
palabras.unshift(“hola”);
> 4

palabras;
> [“hola”, “como”, “estas”, “?”]

array - reverse

Invierte el orden de los elementos del array.

var numeros = [1, 2, 3, 4, 5]; 
numeros.reverse();
> [5, 4, 3, 2, 1]

number - NaN

Es utilizado para indicar que la operación no puede ser representada por un número, normalmente, indefinido.

var numero = 0 / 0;
numero;
> NaN

number - isNaN

Permite determinar si el valor es del tipo numérico.

var numero = 0;
isNaN(numero);
> true

var numero = 0/0;
isNaN(numero);
> false

number - toFixed

Devuelve el numero original con tantos decimales como digitos indicados.

var numero = 23.4869;
numero.toFixed(2);
> 23.49

DOM

Document Object Model

Árbol de Nodos

Tipos de Nodos

Existen 12 tipos diferentes de nodos, sin embargo, solo nos interesan 5 tipo de nodos:

  • Document
  • Element
  • Attr
  • Text
  • Comment

getElementsByTagName

Obtiene todos los elementos de la página HTML cuya etiqueta sea igual que el parámetro que se le pasa a la función.

var parrafos = document.getElementsByTagName(“p”);

getElementByName

Obtiene el elemento HTML que tenga definido un atributo name igual a nombre.

var parrafo = document.getElementByName(“mi-p”);

getElementById

Obtiene el elemento HTML cuyo atributo id

tenga el valor unID. 

var parrafo = document.getElementById(“lorem”);

Nodo como Objeto

Podemos interpretar un nodo como si fuese un objeto Javascript, acceder a sus atributos y modificarlos.

<a href="www.google.com.ar" id="google" >Google!</a>

var link = document.getElementsById(“google”);

link.href;
> “www.google.com.ar”

link.href = “www.com.google.ar”;

<a href="www.com.google.ar" id="google" >Ir a Google!</a>

createElement

Crea un nodo del tipo element que representa el elemento HTML cuya etiqueta se pasa como parámetro de la función.

var parrafo = document.createElement(“p”);

createTextNode

creara un nodo del tipo text que almacena el contenido textual del elemento HTML.

var contenido = document.createTextNode(“Hola!”);

padre.appendChild(hijo)

Añade el nodo hijo dentro del nodo padre. 

parrafo.appendChild(contenido);
document.body.appendChild(parrafo);

padre.remuveChild(hijo)

Remueve el nodo hijo que se encuentra

dentro del nodo padre. 

document.body.removeChild(parrafo);

JavaScript - Introducción

By Neri Guidi

Made with Slides.com

JavaScript - Introducción

  • 665

More from Neri Guidi