Sitio web: Conjunto de archivos que se

almacena en un servidor. Back-end.

Capa de acceso a datos
Cliente: Cada una de las máquinas que se
conecta a un servidor. Front-end.
Capa de presentación

Si cliente y servidor se ejecutan en misma

máquina -> A través de bus de altas
prestaciones.
Varias máquinas -> red de comunicaciones.

El cliente NUNCA comparte sus recursos con

servidor.

Fundamentos de desarrollo Arquitectura cliente-servidor: Modelo que Ventajas:

crea aplicaciones distribuidas. - Independiente SO
web - Alto nivel de interacción en interfaces
gráficas ligeras
- Sistema a escalable fácilmente
- Estructura modular para cada componente.

Desventajas:
- Sistema puede fallar si centralizamos todo
en un servidor
- Costoso.

Dos capas -> Servidor recibe una petición y es

capaz de responder con sus propios recursos

Tres capas -> Servidor requiere de acceso a un

Tipos de arquitecturas:
componente externo (servidor de datos)

N capas -> Generalización del modelo. Se

pueden introducir tantas capas de datos como
el problema requiera

Protocolo de comunicación: Permite

establecer reglas necesarias para que unos
dispositivos se comuniquen con otros.

Posibles valores:
Otros casos:
- 1XX. Respuestas informativas
servidor recibe petición para realizar alguna
-2XX. Respuestas de ejecución corrrecta
tarea. El protocolo utilizado sigue siendo
-3XX. Indica redirección.
HTTP. Al recibir respuesta, se guarda un campo
-4XX. Indica errores en el cliente.
que indica como se ha procesado la petición.
HTTP: Protocolo utilizado para transferencia -5XX. Indica error en servidor.
de contenido.
Funciona mediante arquitectura GET. Permite pedir recursos a través de los
cliente/servidor. Cliente solicita información y parámetros pasados por URL
servidor responde con ella. POST. Permite pedir recursos a través de los
HTTP NO es capaz de almacenar información parámetros pasados en el cuerpo del
Protocolo HTTP del estado de una comunicación, lo hace el
cliente.
documento HTML
HEAD. Ejecuta una petición de datos para un
recurso determinado
Peticiones HTTP.
PUT. Permite enviar datos a un servidor
HTTP se basa en mensajes. Soportados en
DELETE. Indica al servidor que debe borrar el
HTTP 1.1:
recurso indicado en la petición
TRACE. Se centra en enviar peticiones para
funciones de depuración
Entorno cliente OPTIONS. Realiza una petición para conocer
las funciones que tiene el servidor.

Tema 1 CONNECT. Se guarda para los servidores

intermedios.

URL (Uniform Resource Locator)-> Dirección

web de una página
UR (Uniform Resource Identifier)-> Permite
identificar un recurso en la red

Sistema de comunicación seguro = La

transmisión que se lleva a cabo entre dos
entidades no puede ser interceptada por un
tercer individuo.
Hay que asegurarse de que destinatario es
quien dice ser y el mensaje que recibe es el
que enviamos.

Diversos niveles. Niveles de mayor interés para

una comunicación web:
Seguridad en la comunicación - Nivel de red. Ofrece la conectividad entre dos
sistemas. IP
web Permite comunicación segura en un entorno
- Nivel de transporte: Transmisión de datos
web gracias a la utilización de cifrado de
entre emisor y receptor, sin errores. TCP y
mensajes a través de SSL (Secure Socket
SSL/TLS. Se apoya en el nivel de red
Layer)/TLS (Transport Layer Security).
- Nivel de aplicación. Ofrece la funcionalidad
directamente al usuario que puede utilizar ese
servicio. HTTP y HTTP. Se apoyan en la capa de
transporte
HTTPS (Hypertext Transfer Protocol Secure):
Protocolo más utilizado. Basado en HTTP.
Limitaciones HTTPS:
Encriptación SSL y TLS dispone de dos formas
de funcionamiento: simple o mutua
-Simple: La autenticación se realiza
Intentan averiguar alguna propiedad sobre el
únicamente por parte del servidor
mensaje cifrado para obtener el mensaje
-Mutua: el cliente deberá instalar un
enviado.
certificado para que el servidor lo verifique.

SSL puede sufrir ataques de MID (Man in the

Middle) intercambia el protocolo a HTTP.

FTP: Protocolo para realizar transferencias de

archivos entre un cliente y un servidor a través
de la red- Está en todos los SO de propósito
general. Lo podemos usar para transferencia
de archivos del cliente al servidor y viceversa
Otros protocolos
SSH: Protocolo para trabajar en un entorno
inseguro que sigue una arquitectura
Cliente/Servidor. Requiere línea de comandos.
Se requiere un cliente SSH y servidor SSH. Para
todos los SO.
 Motor de visualización es el más importante
Motor de ejecución en navegadores web en Front.
- Sistema 24/7 y accesible desde todo el Todos los navegadores tienen: Realiza las transformaciones necesarias para
mundo. - Interfaz gráfica visualizar código HTML recibido desde el
- Entrada por la interfaz gráfica del navegador - Motor de navegación servidor y convertirlo en una web.
- EL resultado de la petición viaja desde el - Motor de visualización Aspecto visual depende del CSS que modifican
servidor hasta el navegador a través del - Intérprete Js varios puntos.
protocolo HTTP - Manejador de red Dependiendo de la interpretación realizada, el
Características lenguajes de - Gestor almacenamiento. resultado visual puede cambiar entre los
diferentes navegadores.
programación en clientes web
- Chrome. Inicialmente se basaba en Webkit y
ahora usa un motor propio llamado Blink
Principales navegadores web - Firefox. Motor Gecko
- Safari Motor Webkit
- Edge. Motor propio EdgeHTML

Front-end se basa en gestionar la interacción Front-end tiene que realizar las peticiones
con el usuario. oportunas al servidor utilizando soluciones
Tecnología Front-end son las tecnologías que síncronas o asíncronas. Es necesario crear
se ejecutan siempre en el navegador web diferentes formas de visualización que
Desarrollo en entornos web (dispositivo de usuario) contemplen diversos tamaños de pantalla
cliente
Ofuscación de código. El código se pone de tal
forma que dificulta su lectura,

Sublime Text. de los más usados.

Tiene soporte para reconocimiento de
múltiples lenguajes. Disponible en principales
SO

Entornos de Programación Editores de texto planos

Notepad++. Código abierto y soporta 27
lenguajes
más utilizados
Vim. propósito general disponible para UNIX

VSCode. Creado por Microsoft. para los SO de

propósito general. muchos plugins

Entorno Cliente
HTML. Lenguaje de marcado estándar para
Tema 2 creación de webs. Se define la estructura de
una web (distribución de contenido)

JSON (JavaScrip Object Notation). formato

sencillo para facilitar el intercambio de datos
que puede interpretarse a través de Js
CSS. Hojas de estilo en cascada que permiten
Otros lenguajes:
cambiar la representación visual del HTML XML (Extensible Markup Language). Leng de
marcado basado en SGML para intercambio de
Lenguajes más utilizados datos. Representa datos de manera
estructurada para permitir su intercambio en
la red. Tecnologías = XPath, XQuery, XSLT...

React. Enfoque de desarrollo reactivo basado

en Js. Desarrollado por Fb para crear
interfaces de forma más sencilla
Js. Lenguaje ligero y sencillo que el navegador
interpreta para permitir la interacción y el
Angular. Para crear interfaces gráficas y
control de componentes web. Se puede usar Frameworks + utilizados
aplicaciones completas de escritorio y móvil
en contextos distintos a entornos web.
evolución -> TypeScript. alto nivel muy tipado.
Vue.js. Para crear interfaces de usuario de
forma sencilla y progresiva.

- Cabecera <head> </head>. Metadatos y

Integración de código enlaces a dependencias externas
- Cuerpo <body> </body>. Se incluye todo el
mediante etiquetas contenido de la web

Entre las tareas que nos permite realizar Js

está:
Lenguajes de script en - Aumento de la interacción del usuario
- Realizar comprobaciones antes de enviar info Para meter Js en HTML <script></script>
entornos web al servidor
- Funcionamiento asíncrono mientras el
usuario realiza otras tareas
 Embeber código en HTML con <script>
</script>
Lenguaje interpretado por el navegador. Se usa
en el lado del cliente. Mediante archivos externos que solo tienen Js.
Js se fundamenta en el DOM de HTML esta es la buena
Se puede introducir código Js :
A través de elementos HTML. Se suele utilizar
para introducir referencias a funcionalidades
de Js var edad = 16;
Fundamentos del lenguaje
JavaScript Se declara con 'var'
Reglas: Si no se pone "var" a la hora de definir la
Una variable sirve para reservar espacio de
- Id puede tener letras, dígitos y _ variable, la entiende como global
memoria para almacenar un valor. El espacio
- debe comenzar con una letra
en el que vive la variable se le llama ámbito de
- no palabras reservadas del lenguaje
visibilidad Tema principal 2
Declaración de variables - Distinguen MAYUS y minus

Operador de asignación "="

Tipos primitivos:
- Boolean: True/False
- Nul: valor nulo
- Undefined: no definido previamente
- Number: Cualquier número
- String: Cadena de caracteres. En Js no se
puede modificar los valores de String
Tipado débil ->no es necesario declarar el tipo
Sistema de tipado de variable
(inmutables)

De normal la conversión de tipos la hace

Con el operador typeof podremos saber el tipo
automática. En caso de que no pueda, es
de variable
necesario acudir a la conversión explícita.

DEC
Tema 3 Comentarios
// Comentario de línea
/*
*/ Comentario multilínea

Añadir nuevos elementos HTML, cambiar el contenido y

modificar su apariencia visual (estilos)

Mecanismos para reaccionar a eventos (clics, movimientos

de ratón...)
No tiene acceso a la memoria ni a la CPU.
Otras tareas de Js Dentro del navegador puede:
Js proporciona mecanismos de comunicación con el servidor
síncronos y asíncronos

Js puede guardar datos como cookies y almacenamiento

local que el protocolo HTTP no puede guardar

No se puede acceder al disco duro ni ejecutar

un programa dentro del entorno de ejecución
del navegador. Js no tiene acceso directo al SO

funcionalidad limitada por seguridad. Js puede interactuar con cámara y micro pero
Limitaciones Evita acceso malicioso a datos
Limitaciones
con permito solicitado explícitamente

No puede acceder a distintas pestañas o

ventanas si no proviene del mismo dominio.
Esto se llama Same Origin Policy
 Propias del lenguaje y no pueden ser
modificadas. No pueden tener ni mayúsculas,
Palabras reservadas ni guiones ni números. No se pueden crear id
con esas palabras (if, for, else, var...)

Las sentencias pueden estar formadas por valores,

operadores, expresiones, palabras clave y comentarios.
finalizan con ;

Las cadenas se utilizan para manejar series de caracteres. Van

definidas con comillas dobles/simples al inicio y al final:
"Hola mundo"

Conjunto de reglas que permite crear código Los bloques de código están delimitados por { } y agrupan el código
Sintaxis del lenguaje en dicho lenguaje. en bloques para permitir su ejecución y facilita la reutilización

Expresiones. Combinación de valores, variables y operadores para generar un

valor determinado.
Cuando una expresión es ejecutada se dice que se ha evaluado

Operadores. Sirven para realizar diferentes tareas. Operador

por excelencia es de asignación =.
Precedencia: Orden de evaluación dde las expresiones.

Ejemplos:
Aritméticos. realizar operaciones con números
+,-,*,**(operador de potencia),/,%,++,--
Operadores aritméticos y
DEC comparación Comparación. comparaciones entre diferentes
Ejemplos:
==, ===(igualdad de valor y tipo), !=, !==
Tema 4 expresiones o variables
(distinto valor y tipo), >,<,>=,<=.

Ejemplos:
Asignación.
=, +=, -=, *=, /=, %=, **=
Operadores de asignación y
lógicos Lógicos. Permiten realizar operaciones que Ejemplos:
devuelven un valor true o false. &&,||, !

Permiten realizar cualquier operación con

Ejemplos: En Js, una vez que computa el valor de verdad
Operadores a nivel de bits valores que puedan ser representados con 32
& (y), | (o), ~ (negación) de una expresión, se devuelve el valor decimal.
bits.

if (cuando se cumple la condición)

if-else
else(cuando no se cumple)
Condicionales
Utiliza diferentes acciones acorder a
switch diferentes condicionales. Se usa cuando el Importante usar break;
nivel de anidamiento es muy elevado

for. Cuando sabemos el número de iteraciones

Permiten ejecutar un bloque de códiugo en un while. Iterará mientras la condición sea

Bucles número determinado de repeticiones verdadera. Puede ejecutarse el bucle o no.

do-while. Se ejecuta al menos una vez, ya que

la condición se comprueba una vez ejecutado
el bloque
 marco !=tabla
Tabla tiene tamaño de celda fijo y los marcos
Elemento HTML que permite contener y dividir tienen todos los elementos propios de HTML
la página en N partes independientes y puede
Frames o marcos tener diferente contenido. No hay límite de Las página que contiene frameset NO pueden
contenido, pero pueden tener propiedades tener cuerpo y si lo tiene, no se verá bien.
semejantes entre ellas <frameset></frameset> Cada frameset contiene una página diferente.
Cada frameset puede contener un conjunto de No todos los navegadores soportan los En HTML5 ya no se soportan los marcos
marcos <frame> frameset. Si esto pasa, se utiliza <noframes>
que garantiza que el marco se verá, aunque
con otro aspecto

Pequeños archivos de texto con cierta

información relevante para el servidor. Cuando
el servidor envía una página web al cliente, la Almacenar nombre de usuario
conexión se cierra y provoca que el servidor no
sea capaz de saber en qué estado está la
conexión. Se debe a que el protocolo HTTP no Recordar el nombre
puede guardar el estado de la conexión. Las
cookies solucionan problemas como:
Cookies
Permiten facilitar el funcionamiento de una
web, ya que permite mayor fluidez para
Cookies temporales Se borran al finalizar la sesión del navegador
trabajar con éstas. Permite almacenar datos
web de los usuarios en la máquina cliente
Pueden guardar gatos sensibles que se pueden Pueden permanecer mucho tiempo y pueden
Cookies permanentes
usar para suplantar la identidad. El robo de ralentizar la interacción con la web.
cookies es un ataque común.

Cambiar todos los elementos HTML

Crear nuevos eventos en la página

Reaccionar a eventos existentes

Representación con forma de árbol que tiene
Introducción al DOM una página HTML cuando se visualiza en el
Gracias a esta representación y a Js se puede
modificar parte de la página a través de Js. Añadir nuevos elementos a dicha página
navegador . Se ve como un árbol de objetos
(Document Object Model) donde cada uno de ellos es un nodo del árbol
Algunas funciones:
Eliminar elementos HTML

Modificar la representación visual, es decir, los

estilos de los elementos

Cambiar todos los atributos de los elementos

deseados

Núcleo. El estándar para todos los tipos de

documentos
Todos los cambios realizados en el DOM se
visualizarán al momento y no es necesario
XML. Estándar únicamente para documentos
cargar la página. El DOM es un estándar web Tres partes
XML
que define una forma uniforme de acceder a
DEC Tema 5 los elementos
HTML. Estándar para HTML

var para = document.createElement("p");

DOM como estándar var node = document.createTextNode("Párrafo 3");
Para crear un nuevo párrafo dentro del div1 para.appendChild(node);
var element = document.getElementById("div1");
Ejemplo: element.appendChild(para);

<div id="div1">
Generación de código HTML con JavaScript <script>
<p id="p1">Párrafo 1</p>
var para = document.createElement("p");
<p id="p2">Párrafo 2</p>
var node = document.createTextNode("Nuevo párrafo 1");
</div>
para.appendChild(node);
var parent = document.getElementById("div1");
Modificación y borrado
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
parent.replaceChild(para, p1); // reemplazo p1
parent.removeChild(p2); //borrado del párrafo 2
</script>

eval(). Permite evaluar el código Js

representado como una cadena

parseFloat(). Permite transformar el

contenido a un número float
Funciones nativas
parseInt() Permite transformar el contenido a
un número entero
Objeto = colección de propiedades que tiene
una asociación entre clave y valor.
Una propiedad puede ser una funcionalidad isNaN() Permite comprobar si la variable en
que el objeto puede desarrollar o un estado NaN
Utilización de objetos que se traduce como un valor. <script>
El lenguaje puede ofrecer objetos de manera var w = window.innerWidth
nativa y permitir que el usuario cree nuevos Array. Permite definir una conexión de || document.documentElement.clientWidth En este ejemplo se muestra como obtiene el
objetos elementos ordenados || document.body.clientWidth; ancho y alto de la ventana del navegador. como
el BOM no es estándar hay que adaptarse a los
var h = window.innerHeight|| diferentes navegadores. se usa || para obtener
Map. Permite definir un conjunto de
Objetos nativos document.documentElement.clientHeight las dimensiones
elementos con clave-valor
|| document.body.clientHeight;
</script>
Permite definir datos estructurados

Ajustar las dimensiones de la ventana del

navegador
La ventana del navegador se maneja a través
del objeto window de Js.
var valor = 'valorParaLaVentana';
Las variables globales, objetos y funciones
Abrir una ventana del navegador window.open('/childwindow.html?value=' +
provienen del objeto window, incluso el
valor);
documento web. A través de él se puede
Js permite manejar el documentos web y la controlar:
ventana del navegador con BOM (Browser
Cerrar una ventana del navegador
Object Model).
Interacción con el navegador A la hora de manejarlo no existe ningún
estándar, pero casi todos los navegadores Cambiar el tamaño de la ventana
actuales implementan casi la misma
funcionalidad
A través del objeto window se puede obtener
información de la pantalla del usuario.
Esto puede ser muy útil para adaptar la
representación visual del contenido web
 Definiendo un constructor. Función encargada
Soporta herencia entre objetos (this). Se de crear un objeto determinado
pueden crear nuevos objetos de manera
+ Sencillo que otros lenguajes. sencilla El objeto genérico. Utilizando el objeto
No está basado en el concepto de clase. Se genérico <<Object>>
POO en JavaScript centra en el prototipado.
Permite el acceso a sus atributos a través de
la notación '.' . Se podría decir que un objeto es una variable
que puede contener muchos valores, además var person = {name:"Fran", surname:"Pérez"}
de métodos asociados

//creación de un objecto con 4 propiedades Las dos formas son iguales y se recomienda la
(literal) literal
var person = {name:"Fran", surname:"Pérez",
age:36, state:"Spain"}
Forma + sencilla de crear un objeto es de
manera literal. Se puede definir y crear en una
sentencia. Operador new
Implementa las propiedades siguiente un var person = new Object();
esquema clave-valor y sigue una notación person.name = "Fran";
similar a las tablas hash de Java o los person.surname = "Pérez";
diccionarios de Python. person.age = 36;
Los métodos del objeto son las tareas que person.state = "Spain";
puede realizar el objeto (acciones). En Js se
definen como propiedades que apuntan a //Opción 1
funciones person.name;
Los objetos pueden cambiar porque se accede
//Opción 2
por referencia y no por valor.
person["name"];
+ importante de un objeto Js son sus
//Opción 3
propiedades y se accede de varias formas
var name = "name";
person[name];

Se borra tanto el valor como la existencia de

la propiedad

Manejo de propiedades en JS. Las propiedades poseen atributos como, por

Se puede modificar el objeto por valor y en Para poder volver a acceder a esa propiedad, es
ejemplo, su valor. Existen otros atributos que
existencia. necesario volver a definirla
se pueden configurar, entre otros: escritura,
Propiedades y métodos Se puede añadir una propiedad definiendola y enumeración, lectura...
se puede borrar utilizando la palabra delete. No debería usarse sobre objetos predefinidos
Al borrar una propiedad con esta palabra hay del lenguaje
que tener en cuenta que:

Este operador solo tiene efectos sobre

propiedades de los objetos

var persona = {
name:"Fran",
surname:"Pérez",
age:36,
Se puede definir métodos en objetos y se state:"Spain", Se crea el objeto persona, que tiene 5
utiliza la notación punto '.' fullInfo: function(){ propiedades y una es un método (fullinfo)
return this.name + " "+ surname + " " +
age+ " "+ state;
}
DEC Tema 6 Métodos de los objetos };

Es fundamental determinar que partes de la

declaración de un objeto puede acceder el
usuario. Qué parte de esa definición es pública
y cual es privada.

Se crea un literal con los valores.

Forma + sencilla es como un litera Los corchetes y la separación indican que se
var pets = ["dog", "cat", "rabbit"]; declara un array. Así se ignoran los saltos de
línea y los espacios en blanco
Creación
va var items = new Array(1, 6); // Crea un array
Mediante operador new.
con dos elementos (1 y 6)
Se puede crear listas y crear todos los objetos
var items = new Array(6); // Crea un array con
del lenguaje. NO RECOMENDABLE ya que
6
puede inducir a erres
elementos

Aquí se declara un array de mascotas y se

var pets = new Array("dog", "cat", "rabbit");
accede al elementos 0 que se le asigna a la
var pet = pets[0];
variable pet y se muestra por consola.
console.log (pet);
Los arrays empiezan por 0
Acceso Sintaxis

Para modificar el contenido se necesita

acceder utilizando el operador "asignación"

Se puede acceder a su longitud con el atributo

var people = ["Jose", "Antonio", "Luis",
length. Para acceder al último elementos se
Propiedades "Olga"];
necesita saber la longutud y recordar que el
people.length; //La longitud es 4
último elementos es longitud -1

var people, text, fLen, i;

people = ["Pepe", "Luis", "Antonio", "Nela"];
len = people.length;
text = "<ul>";
for (i = 0; i < len; i++) { bucle for
text += "<li>" + people[i] + "</li>";
}
text += "</ul>";
Iteración Se usa bucle for o forEach
var people, text;
people = ["Pepe", "Luis", "Antonio", "Nela"];
text = "<ul>";
fruits.forEach(buildList);
text += "</ul>"; forEach
Array o lista es un objeto que proporciona Js.
Es una lista que encapsula diferentes function buildList(value) {
Arrays funcionalidades. text += "<li>" + value + "</li>";
}
El tamaño es indeterminado y puede variar.
Se puede formar matrices
var people = ["Pepe", "Luis", "Antonio",
"Nela"];
- Función push() Se podría utilizar un número entero para people.push("Fran"); //Nuevo elemento con
- Propiedad length. Asignando un nuevo valor a añadir un eemento en cualquier índique, pero método
Insertar elementos
esta posición se crea un nuevo elemento y la la lista puede quedar fragmentada y push()
longitud aumenta aparenciendo "agujeros" people[people.length-1] = "Olga"; //Nuevo
elemento
a partir de la longitud del array

var people = ["Pepe", "Luis", "Antonio",

"Nela"];
Se elimina el último elemento insertado.
people.push("Fran"); //Nuevo elemento con
método pop()
método push()
Eliminar elementos Para eliminar por el principio se usa el método
var pop = people.pop(); //Sacamos el último
shift(). Se recalculan los índices al usar este
elemento insertado
método
var shift = people.shift(); //Sacamos el primer
elemento insertado

var people1 = ["Pepe", "Luis"];

var people2 = ["Antonio", "Nela"];
Para unir diferentes listas se puede hacer con
var guys = people1.concat(people2); //La
el método concat()
concatenación genera un nuevo array sin
modificar los originales
Porciones
Para unir una parte de array se usa el método
splice(). Se uniría una lista ya existente con el
contenido de otra lista. con slice() podemos
indicar que elementos necesitamos seleccionar
var people = ["Pepe", "Luis","Antonio",
"Nela"];
sort() Ordena alfabéticamente en orden creciente people.sort(); //Permite ordenar
alfabéticamente los elementos del array
people.reverse() //Permite dar la vuelta al
Ordena dando la vuelta al contenido de una array ordenado
reverse()
lista
Ordenación Dos métodos
Se puede personalizar la función de
comparación con el fin de cambiar el
var people = ["Pepe", "Luis","Antonio",
comportamiento de los métodos de
Van muy bien con valores alfanuméricos pero Podemos implementar el método de "Nela"];
ordenación. Cuando definimos una función de
con numéricos puede sacar cosas raras ordenación que estimemos necesario people.sort(function(a, b){return 0.5 -
comparación, esta puede devolver valores
Math.random()});
positivos, negativos o cero, dependiendo de los
parámetros utilizados en la invocación
 Usando funciones estructuramos el código y
evitamos duplicar instrucciones y no crear
redundancia, pudiendo mantener el código, y
pudiendo modificarlo en un futuro de forma
Conjunto de instrucciones que realizan una más sencila
tarea determinada
Funciones matemáticas y las funciones
algorítmicas reciben parámetro y generan
resultado

Los argumentos dentro de la función se

Creación de funciones: function procedureExample(a, b) {
comportan como variables, exactamente igual
function nombreFuncion(argumentos En Js no se diferencia entre subrutina (no console.log("El valor es: "+(a*b)); //No se
que en un bloque fuera de la función. Son
opcionales){ devuelve nada) de función (devuelve resultado) devuelve nada
variables locales (fuera de la función NO
} }
existen)
Definición de funciones I
var func = new Function("a", "b", "return a *
Otra forma de crear funciones es con
b");
constructor Function. Se pueden especificar
Objeto Function //Invocación de la función a través del objeto
los parámetros y el cuerpo de la función como
creado previamente
si fuesen literales. (no se usa casi)
var resultado = func(10,10);

Las funciones y variables pueden ser utilizadas ejemploFunc(5);

Llamamos a la función por su nombre para antes de su declaración. Js puede mover las //Declaración de la función
El resultado devuelto se puede utilizar
Invocación de funciones obtener un resultado. delcaraciones al inicio del código para facilitar function ejemploFunc(x) {
también en otra función (funciones anidadas)
Puede ser a través de una sentencia. la lectura de este por otros desarrolladores return x*x;
(hoisting) }

(function () {
Se pueden invocar por si mismas, sin que
var msg = "Hola!!"; // Esto se ejecutará
Funciones autoinvocadas ningún fragmento de código realice la
sin llamar explícitamente a la función
invocación
})();

No tienen nombre definido. Para que

funciones, se le asigna la función a una var func = function(a,b){return a *b};
variable determinada y se podrá usar la //Invocación de la función anónima a través de
Funciones anónimas
variable como si fuese la propia función. No la variable declarada
recomendable porque se pierde visibilidad de lo var result = func(10,5);
que es una ariable y lo que es una función

No son adecuadas para definir métodos en los

objetos
con una forma sintácticamente reducida de
definir funciones. Se basan en la utilización de Deben ser delcaradas antes de su uso, por lo
Funciones con notación flecha funciones anónimas y en la eliminación de const arrowF = (a, b) => a * b; Características que no se mueen al comienzo del código
palabras reservadas para la definición de la automáticamente (no hoisting)
función
Es mejor usarlas como constantes que como
variables, puesto que la definición de la
función va a ser siempre constante
Tipos de funciones
DEC Tema 7 //Protección del parámetro a por si no es
pasado por parámetro
function testFunc(a, b) {
Se pueden definir parámetros para eivtar
1. Los tipos de parámetros no se especifican if (a === undefined) {
errores en la llamada de funciones. Los parámetros se pasan SIEMPRE por valor (la
durante la definición a = 0;
Si un parámetros no se pasa a la función, función solo toma el valor de los parámetros y Los objetos se pasan SIEMPRE por referencia.
2. No se comprueban los tipos de argumentos }
Paso de parámetros Reglas: normalmente se trata como un indefinido, lo no la localización de estos argumentos). Los Los cambios realizados SI se verán reflejados
pasados }
cual puede provocar errores de ejecución. cambios realizados sobre los argumentos no se en el cuerpo del programa
3. No se comprueba el número de parámetros //Mejor aproximación para asignar valores por
Mejor asignar valores por defecto a los transmiten duera del cuerpo de la función
pasados a la función defecto a los parámetros
parámetros
function testFunc(a=1, b=0) {
...
}

function parentFunc() {
var var1 = 0;
Tienen ámbito de visibilidad superior, hasta el
Funciones que se declaran dentro de otra function nestedFunc() {counter += 1;}
Funciones anidadas cuerpo de la función que la contiene. Pueden
función. nestedFunc();
complicar la comprensión del código
return var1;
}

Funciones nativas del lenguaje Estas funciones de deberían llamarse métodos

Se permite la definición de clases de objeto a

El constructor es un método especial para
través de la palabra reservada class. Se permite la herencia a través de la palabra
inicializar objetos que pertenecen a una clase
Una clase es un tipo especial de función que extends y podemos crear jerarquías de clases y
que se invoca automáticamente. En JS solo
puede contener propiedades y métodos para reutilizar código
puede existir UN constructor por clase
construir el objeto de dicha clase

concat(). Unir dos String

match(). Busca una cadena de caracteres en

otra

Se puede albergar cadena de caracteres y

indexOf(). Devuelve la posición de una cadena
Objeto String proporcionar los métodos oportunos para
dentro de otra
tratarlos. Algunos métodos

slice(). Obtenemos subcadena

Objetos
split(). Divide una cadena en un array de
cadenas

//Funciones de redondeo
NO requiere constructor y se puede acceder
Objeto Math Operaciones matemáticas Math.round(7.7); // returns 8
los métodos de manera estática
Math.round(7.4); // returns 7

getDate() devuelve el día del mes

getDay() devuelve día de la semana

getTime(). Devuelve el número entre

Objeto Date Maneja fechas y tiempo. Algunas funciones milisegundos desde el 1 de enero de 1970 y otra
fecha

now() Devuelve el número de milisegundos

desde 1970

parse(). Convierte una cadena con una fecha a

un objeto