06 - JavaScript

Primeros pasos en Desarrollo Web
Módulo 1
Presentación Nº 6: JavaScript
2019 - Segundo Cuatrimestre
Licenciatura en Sistemas
Facultad de Ciencias de la Administración
Universidad Nacional de Entre Ríos
1
Objetivos de la clase
● Conocer las características básicas de JavaScript.
● Programar funciones.
● Entender cómo trabajar con clases y objetos.
● Comprender las nuevas características de ECMAScript 5 y 6.
2019 – Segundo Cuatrimestre 2

JavaScript - Historia
● JavaScript fue desarrollado en 1995 por Brendan Eich para funcionar en el
navegador Netscape.
● Su nombre original era Mocha, luego fue renombrado como LiveScript para
tomar finalmente el nombre por el que hoy es reconocido.
● A pesar de estar su nombre formado por la palabra Java, las semejanzas con
este lenguaje de programación son superficiales.
● En 1997, ECMA (European Computer Manufacturers Association) elaboró un
estándar basado en el desarrollo de Netscape con el objetivo que otros
navegadores lo implementen.
● El estándar se llama ECMAScript y una de las implementaciones más
conocidas es JavaScript.
● A pasado por varias versiones:
– Desde junio de 2015 se publica una versión por año. Excepto 2019.
– La última versión es la ECMAScript 9 ES2018.

JavaScript - Características
● Javascript es un lenguaje de scripting cuyo entorno de ejecución
es usualmente una página Web. Por tanto los resultados se
visualizan en un navegador.
● Esto permite utilizar JavaScript para (entre otras cosas)
programar respuestas a eventos del mouse y teclado, crear y
animar elementos en la página, comunicarse con servidores,
entre otras operaciones.
● Algunas de sus características son:
– Lado del Cliente: los scripts corren en el software de visualización
del usuario y no en el servidor donde el sitio está alojado.
– Lenguaje de scripting: el programa no es compilado sino que es
interpretado por el navegador Web.

JavaScript – Características (2)
– Requerimientos mínimos Hardware-Software: Podemos programar
en JavaScript utilizando un editor de textos y un Web browser.
– Fácil puesta en funcionamiento: necesitamos subir nuestros códigos
JavaScript al servidor e incluir el tag <script> en nuestras
páginas Web.
– Lenguaje pequeño: podríamos decir que JavaScript es un lenguaje
de características reducidas. Pero su flexibilidad y expresividad nos
permite alcanzar fácilmente nuestros objetivos.
– La comunidad: Podemos encontrar gran cantidad de manuales,
tutoriales y ejemplos de código JavaScript disponibles gratis en la
Web.

JavaScript – Primer script
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Primer JavaScript</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<script type=”text/javascript”>
document.write(“Hola Mundo!!!”);
</script>
</body>
</html>

Sintaxis del lenguaje - Características Generales
● Case sensitive: debemos prestar atención a la hora de nombrar
variables, funciones y objetos incorporados.
● Comentarios: De línea: // y de bloque: /**/
● Punto y Coma: es el delimitador de sentencias en JavaScript.
– Técnicamente su inclusión es opcional pero sólo porque la mayoría de los
intérpretes lo agregan automáticamente. No incluirlos puede dar lugar a
extraños efectos secundarios.
● Espacios en Blanco: el lenguaje ignora el carácter de espaciado, las
tabulaciones y las líneas en blanco, su uso tiene como finalidad
aumentar la legibilidad del programa resultante.
– En la producción de scripts a gran escala, se suelen quitar los espacios en
blanco innecesarios para que los mismos puedan ser descargados más
rápidamente.
– Ver http://javascript-minifier.com/

Variables y Tipos de Datos
● Variables: sus nombres pueden ser cualquier identificador. Un
identificador es una palabra formada por: letras, números, $ o _ y no
comienza con un número.
– Declaración de una variable en JavaScript:
var miVariable; //Declaración.
var miVariable = 42; //Declaración y asignación.
– Todas las variables declaradas fuera de una función tienen alcance global.
● Tipos de Datos: cuenta con pocos tipos de datos predefinidos. Algunos

ejemplos:
● var miNumero = 42;
● var miString = “Un texto”;
● var miBoolean = true;
● var miArray = [miNumero, miString, miBoolean];
● var miNull = null;

Variables y Tipos de Datos (2)
● Tipos de Datos (cont.): como no se trata de un lenguaje fuertemente
tipado podemos asignar a una variable valores de diferentes tipos de
datos durante su ciclo de vida.
– En el caso de los tipos primitivos, podemos determinar el tipo de
datos de una variable utilizando el operador typeof.
● typeof miNumero; //Resultado: "number"
● typeof miString; //Resultado: "string"
● typeof miBoolean; //Resultado: "boolean"
● typeof miArray; //Resultado: "object"
– Los arrays no son tipos de datos primitivos por ello typeof nos
devuelve como resultado object. La forma de determinar si una
variable es un Array es mediante instanceof.
– miArray instanceof Array; //Resultado: true
– Si aplicamos typeof a una variable a la que aún no se le ha
asignado un valor obtenemos como resultado: undefined.

Variables y Tipos de Datos (3)
● Las variables pueden utilizarse antes de ser declaradas.
● Esto es válido dado que el comportamiento por defecto de JavaScript es
mover la declaración de una variable al principio del alcance actual
donde hacemos uso de ella.
– Ya sea al principio de un script o al de la función actual.
● Este comportamiento se conoce con el nombre Hoisting (izamiento).
● Debemos tener en cuenta que la inicialización de las variables no sufre el
mismo tratamiento. Esto puede llevarnos a resultados inesperados.
● Se recomienda mover las declaraciones de las variables al principio (de
los scripts o de las funciones):
– El hoisting es una característica desconocida para muchos programadores
JavaScript.
– Puede llevar a errores.
– Es recomendable programar en modo estricto (“use strict”;).

Variables y Tipos de Datos - Modo estricto: “use strict”
● La directiva “use strict” fue incorporada al lenguaje en ECMAScript 5.
● No se trata de una sentencia sino más bien de una expresión literal que es
ignorada por las versiones anteriores de JavaScript.
● Su propósito es establece que el script que estamos programando debe
ejecutarse en modo estricto.
● En este modo NO está permitido:
– Utilizar variables y objetos sin previamente declararlos.
– Borrar variables y funciones (delete).
– Especificar parámetros de una función con igual nombre.
– Utilizar literales octales 010 ni caracteres de escape octales "\010".
– Definir propiedades readonly ni get-only.
– Utilizar palabras especiales como nombres de variables (eval,
arguments, etc.).
● Además el comportamiento de la referencia this cuando no existe objeto
receptor del mensaje devuelve undefined en vez del objeto global window.

Variables y Tipos de Datos - Comparación y Verdad
● En JavaScript existen dos operadores de comparación:
– Igualdad: ==
– Identidad: ===
var miNumero = 42;
miNumero == 42; => true //verifica si miNumero es igual al
número 42
miNumero == "42"; => true //verifica si miNumero es igual a "42"
miNumero === "42"; => false //verifica si miNumero es idéntico
al string "42"
● Todos los valores en JavaScript tiene asociado una noción de verdad y
falsedad. Es decir, pueden ser tratados como true o false sin realmente ser
boolean.
● Cero, null, undefined y el string vacío son "falsos" y todo los demás
“verdaderos”.

Variables y Tipos de Datos – let y const
● ECMAScript 2015 introdujo dos palabras reservadas importantes: let y const.
● Ambas dos proveen al lenguaje de una forma de establecer el alcance a nivel de bloque de
variables y constantes.
● Antes de ECMAScript 2015, solo podíamos definir variables dentro que tengan un alcance global
o de función.
– Esto podía traer problemas cuando nombrábamos una variable en un bloque for o while con igual
nombre que otra fuera del mismo.
● A través de let, podemos definir una variable con alcance de nivel de bloque. Ejemplo:
var x = 10;
// Aquí x es 10
{
let x = 2;
// Aquí x es 2
}
// Aquí x es 10
● La palabra reservada const nos permite definir referencias constantes a un valor. No confundir
con constantes. En realidad una variable definida con const para:
– Tipos primitivos: es realmente una constante.
– Tipos referencias: puede cambiar sus propiedades pero no su referencia.
Estructuras de Control
● En JavaScript tenemos las siguientes estructuras de control:
– Repetitivas:
● while
● for
● break y continue
– Condicionales:
● if/if-else/else
● switch/case
● Operador ternario: ( )? :
– Manejo de Excepciones:
● try/catch/finally
● throw

Strings
● Para crear un string rodeamos caracteres con los símbolos (') o (“). Por
ejemplo: var cadena1 = 'Hola!'; var cadena2 = “Hola!”;
● Caracteres de Escape: las secuencias: \', \”, \n, \t nos permiten
escapar caracteres especiales. Ejemplo: tabulaciones y retornos de carro.
● Operadores:
– Concatenación: + y +=
– Comparación: > y <
● Propiedades: length es la única propiedad de los strings.
● Métodos comunes:
– Cambio de mayúsculas: toUpperCase(), toLowerCase(),
– Extracción de secciones: charAt(), slice(), substr(),
– Conversión a array: split().
– Búsqueda y reemplazo: indexOf(), lastIndex(), search(),
match(), replace().
– Conversión: parseInt(), parseFloat().
Arrays
● Los arrays JavaScript pueden almacenar elementos de cualquier tipo de
datos, en cualquier orden.
● Creación:
– var miArray = [1, 2, 3, 4];
– var miArrayLLenado = new Array(4);
– miArrayLlenado; => [undefined, undefined, undefined,
undefined]
● Propiedades: length es la única propiedad de los arrays en JavaScript.
● Recorridos: podemos utilizar un bucles for o forEach().
● Métodos:
– Adición: concat(), push(), unshift().
– Remoción: pop(), shift().
– Extracción: slice(), splice().
– Ordenación: reverse(), sort().
– Conversión a String: toString().
Funciones
● Las funciones en Javascript son muy flexibles, nos permiten realizar
muchas operaciones. Sin embargo, esta flexibilidad suele generar
confusiones en lo que respecta a la interacción entre funciones,
variables y objetos.
● Declaración:
function nombreFuncion(arg1, arg2, argN) {
//Sentencias
}
– Los intérpretes de Javascript, ante que cualquier cosa, buscan
declaraciones de funciones. Por lo que se las puede invocar antes de
declararlas.
● Funciones anónimas:
– No es necesario especificar un nombre para una función.
– Las funciones que no tienen nombre se denominan expresiones función o
funciones anónimas.
– Se puede almacenar una expresión función en una variable o establecerla
como el resultado de otra función.
Funciones (2)
● Funciones anónimas (cont.):
(function() {
// Sentencias
});
(function() {
//Se ejecuta de manera inmediata
})();
var nombreFuncion = function(arg1, arg2, argN) {
// Sentencias
};
// Esta función devuelve una función anónima
function funcionExterior() {
return function() { console.log("Función interior"); };
}

Funciones (3)
● Argumentos:
– Los argumentos de las funciones en Javascript son muy flexibles.
– Los parámetros (o argumentos nominados) que aparecen en la signatura
de la función son más que nada una convención.
– No es necesario proveer un valor para cada argumento.
function miFunc(arg0, arg1, arg2) { miFunc("a", "b");

console.log(arg0); "a"
console.log(arg1); "b"
console.log(arg2); undefined
}
– También se puede proveer más argumentos de los que están definidos en

la signatura de la función. Los argumentos son almacenados en una
variable local llamada arguments para su fácil acceso.

Funciones (4)
● Argumentos (cont.):
function miFunc(arg0) { miFunc("a", "b", "c");
console.log(arg0); "a"
console.log(arguments[1]); "b"
console.log(arguments[2]); "c"
}
– La variables arguments es un objeto tipo array. No se trata

verdaderamente de un array.
– Los objetos tipo array JavaScript son comúnmente llamados colecciones.
– Las propiedades de las colecciones son accedidas a través de índices
numéricos (arguments[0]) y tienen la propiedad length pero no tienen
ninguna de las propiedades restantes con las que cuentan los arrays.

Objetos
● En JavaScript un objeto es una colección de valores llamados propiedades.
● Podemos agregar a un objeto la cantidad de propiedades que queramos.
Pueden tratarse de valores, objetos y otras funciones.
● Cuando la propiedad es una función nos referimos a ella con el nombre de
método.
● Usualmente se accede a una propiedad a través del operador “.” seguido del
nombre de la propiedad.
– Por ejemplo: persona.apellido
– No obstante también podemos accesar las propiedades utilizando “[ ]”.
Ejemplo: persona[“apellido”]
● Utilizando la versión for-in del bucle for podemos iterar a través de las
propiedades de un objeto.
● Podemos saber si un objeto tiene o no una propiedad utilizando el método
hasOwnProperty()
● Existen métodos comunes a todos los objetos como por ejemplo
toString().

Prototipos
● Si nos detenemos a pensar....
– Todos los arrays tienen los mismos métodos, como push(), slice() y
join().
– Todos los strings tienen split(), substr() y replace() y todos los
objetos tienen toString().
– De donde vienen estos métodos?
● Resulta que cada tipo de dato tiene su objeto prototype que define un
conjunto de propiedades.
● Cada instancia de un tipo de datos tiene acceso a las propiedades del
prototipo de su tipo.
● Se puede acceder el objeto prototipo de un tipo accediendo la propiedad
__proto__.
– No se recomienda su uso a no ser que sepamos muy bien lo que
estamos haciendo.
● Para ampliar:
– https://exploringjs.com/impatient-js/ch_proto-chains-classes.html#prototype-
chains
Prototipos (2)
● Cuando accedemos a la propiedad de un objeto JavaScript lleva a cabo los
siguientes pasos hasta encontrar el valor de la propiedad:
1. Busca la propiedad en el objeto.
2. Si la propiedad no existe en el objeto, busca en el prototipo del objeto
constructor.
3. Si la propiedad no fue encontrada entonces JavaScript determina que no
existe.

Clases
● En la versión ECMAScript 6 (ECMAScript2015) se introdujo el concepto de
clase para acercarse a los conceptos de orientación a objetos.
● Para definir una nueva clase utilizamos la palabra reservada class. Por
ejemplo:
class Vehiculo {
constructor(tipoParam, marcaParam) {
this.tipo = tipoParam;
this.marca = marcaParam;
}
}
● A partir de la definición podemos crear objetos de clase Vehiculo:
var miAuto = new Vehiculo(“Auto”, “Ford”);
console.log(miAuto.marca); // → Ford

Clases (2)
● En orientación a objetos las funciones se conocen con el nombre de métodos.
● El método constructor está pensado especialmente para inicializar las propiedades de los
objetos. Es invocado automáticamente cuando utilizamos la palabra reservada new.
– Si no definimos un método constructor JavaScript añadirá automáticamente uno vacío por
nosotros.
● Podemos agregar nuestros propios métodos que le den el comportamiento a las clases que
creamos:
class Vehiculo {
constructor(tipoParam, marcaParam) {
this.tipo = tipoParam;
this.marca = marcaParam;
}
convertirAString() {
return “Tipo: “ + this.tipo + “, Marca: “ + this.marca;
}
}
var miAuto = new Vehiculo(“Auto”, “Ford”);
console.log(miAuto.convertirAString()); // → Tipo: Auto, Marca: Ford

La palabra reservada this
● La palabra reservada this nos permite hacer referencia a un objeto.
● Generalmente se hace uso de la referencia this en conjunción con el
operador punto para acceder a métodos o propiedades. Ejemplo:
this.caminar() o this.velocidad.
● A diferencia de otros lenguajes de programación el significado de this varía
de acuerdo al contexto en donde la utilicemos:
– En un método: al objeto dueño.
– Sólo, al objeto global (window).
– En una función, al objeto global (window).
– En una función en modo estricto, es siempre undefined.
– En un evento, al objeto que recibió el evento.

Bibliografía
● Libro: The JavaScript Pocket Guide 1st Ed.
– Lenny Burdette.
– Peachpit Press.
● Libro: JavaScript: A Beginner’s Guide.
– John Pollock.
– Ed. McGrall Hill.
● Web: W3schools.
– URL: https://www.w3schools.com/js/default.asp
● Web: MDN.
– URL: https://developer.mozilla.org/es/docs/Web/JavaScript

06 - JavaScript

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

06 - JavaScript

Cargado por

Copyright:

Formatos disponibles

Primeros pasos en Desarrollo Web

2019 – Segundo Cuatrimestre 2

2019 – Segundo Cuatrimestre 3

2019 – Segundo Cuatrimestre 4

2019 – Segundo Cuatrimestre 5

2019 – Segundo Cuatrimestre 6

2019 – Segundo Cuatrimestre 7

● Tipos de Datos: cuenta con pocos tipos de datos predefinidos. Algunos

2019 – Segundo Cuatrimestre 8

2019 – Segundo Cuatrimestre 9

2019 – Segundo Cuatrimestre 10

2019 – Segundo Cuatrimestre 11

2019 – Segundo Cuatrimestre 12

2019 – Segundo Cuatrimestre 14

2019 – Segundo Cuatrimestre 18

function miFunc(arg0, arg1, arg2) { miFunc("a", "b");

– También se puede proveer más argumentos de los que están definidos en

2019 – Segundo Cuatrimestre 19

– La variables arguments es un objeto tipo array. No se trata

2019 – Segundo Cuatrimestre 20

2019 – Segundo Cuatrimestre 21

2019 – Segundo Cuatrimestre 23

2019 – Segundo Cuatrimestre 24

2019 – Segundo Cuatrimestre 25

2019 – Segundo Cuatrimestre 26

2019 – Segundo Cuatrimestre 27

También podría gustarte