TEMA 8 INTRODUCCIÓN A JSCRIPT

Sobre Java Script. Inventado por Brendan Eich. Se inventó en 1995. Se convirtió en estándar ECMA en 1997. JS inicialmente se denominó Mocha --> LiveScript --> finalmente JavaScript. La versión de Internet Explorer se llamó JScript.

Características JS. Lenguaje interpretado (no compilado). Tipado dinámico. Es un lenguaje de programación. Su uso está realmente extendido en la web. se utiliza para dar dinamismo en las páginas web. No sólo se utiliza en frontend, si no también en backend (para programar software de servidores).

Están basados en el lenguaje de programación JavaScript. NodeJs. Express. MeteorJS.

Las siglas ECMA significan .... European Computer Manufacturers Association.

ECMA es... una organización que define estándares tecnológicos relacionados con los sistemas de información y comunicación.

Otros ejemplos de estándares ECMA son ... SistemasNFC. Office Open XML formats. JSON. Lenguajes de programación: C#, Eiffel.

Sobre JavaScript en relación con ECMAScript. JavaScript es un lenguaje conforme con la especificación ECMAScript. Es la implementación más popular de ECMAScript, pero no la única. Las características principales de JS se basan el el estándar ECMAScript, pero JS tiene también otras características que no están en el estándar. Cada navegador tiene su propia implementación de la interfaz ECMAScript.

Timeline ECMAScript... se añade. 1995 --> Sun Microsystems y Netscape anuncian JS. 1997--> (ECMAScript1) Se propuso la primera versión del ECMA-62. 1999 --> (ECMAScript5) expresiones regulares y try/catch. 2009 --> (ECMAScript5) el soporte para JSON, funciones de iteración de arrays y "use strict". 2015 --> (ECMAScript6) let/const, valores por defecto para parámetros. 2017 --> ECMAScript 2017 propiedades del Object, Shared Memory y funciones Async. 2019 --> ECMAScript 2019. 2020 --> ECMAScript 2020 o ES11 (última versión).

Para diferenciar Java y JavaScript. Solo comparten el nombre y una sintaxis similar.

UBICACIÓN código JS. ANTES --> en el documento HTML (dentro del elemento head, body, como gestor de evento onEvento="código") - Dentro de un documento HTML tanto en la cabecera como en las distintas partes del cuerpo también debía ir entre comentarios HTML <!-- --> por motivos de compatabilidad Lo habitual dentro del elemento head es poner solo declaraciones de variables y funciones. AHORA --> en un archivo separado (Fichero.js) Hoy en día no es necesario lo del comentario (salvo que necesite compatibilidad con navegadores antiguos).

ORDEN DE EJECUCCIÓN del código (mirar ejs). Siempre en el orden en que aparece en el código HTML.

VARIABLES. Se pueden definir con var o let. definidas con var --> ámbito de función --> o global si se declaran fuera de una función. definidas con let --> ámbito de bloque. var ---> se pueden redefinir en el mismo ámbito donde declaran. let --> NO se pueden redefinir en el mismo ámbito donde se declaran. En el código JS moderno se recomienda usar let. Se pueden declarar constantes con const. nombre variable sensible a mayúsc. y minúsc. (ej: nombre no es la misma variable que Nombre). No es obligatorio declarar las variables --> pero se recomienda. En el modo ESTRICTO si es obligatorio declararlas.

ACCESIBILIDAD EN VARIABLES en los distintos TIPOS DE ÁMBITO (mirar ejs). GLOBAL --> variable definida fuera de una función --> accesible desde todo el código/script de una página web. LOCAL --> variable definida dentro de una función --> accesible desde la función donde se define. DE BLOQUE --> variable definida con let dentro de un bloque --> es accesible desde el bloque.

Comentarios en JS. // comentario de una línea. /* Comentario de varías líneas*/.

Flujo condicional en JS. if-else. switch. operador ternario.

Bucles en JS. for --> con desde, hasta, vamos haciendo. for extendido --> recorremos array o contenedor. while --> condición. do-while --> do ... while condición.

Funciones en JS. También son variables y se pueden referenciar por su nombre. Notación estándar. Notación flecha --> se suele utilizar para funciones anónimas o de una línea, ya que queda más conciso.

Tipos básicos en JS. Primitivos. Compuestos. Nulos.

Los tipos primitivos... SOLO contiene UN VALOR a la vez. son tipos primitivos: - Cadenas --> ej: "Hola, mundo!" "Hola a tod@s" - Números --> ej: 12,22.4,-5 - Booleanos --> ej: true,false.

Sobre cadenas... Se definen como secuencias de caracteres entre " ", ' ', ` `. si están definidas mediante ``: - pueden contener comillas simples y dobles ej: let x = `This is a "string" with both 'types' of quotes`; - pueden contener variables mediante la sintaxis ${} let name = "John"; ej: let x = `My name is ${name} and I'm ${age} years old`;. Pueden incluir a su vez "" o '', siempre que no cierren las comillas abiertas previamente, si no hay que escaparlas --> \ ej; let a = "Let's have a cup of coffe" let a = 'He said "Hello" and left.'; let c = 'We \'ll never give up.';.

CLASE STRING... PROPIEDADES: lenght --> longitud de la cadena MÉTODOS: toString() --> convierte un objeto en una cadena. charAt(n). substring(x,y). substr(x,y). match(c). toLowerCase(). toUpperCase(). replace(). concat(). trim(). split().

Arrays. Colecciones de datos ordenados let ls = ["Alice", "Bob", "Charlie"]. Acceso mediante índice (1) let x = ls[1] //x = "Bob". Acceso mediante índice (2) ls[2] = "Mary" //ls = ["Alice", "Bob", "Mary"]. Iterables mediante for...of for(let name of ls) { console.log(name); }.

SOBRE ARRAYS PROPIEDAD --> lenght: devuelve la longitud del array MÉTODOS: join(). reverse(). sort(). concat(). filter(). find(). indexOf(). pop(). push(). slice().

Objects... - Conjuntos de atributo-valor (los atributos solo pueden ser de tipo String) ATRIBUTOS = CLAVES - si se necesitan atributos de otro tipo deben usar la clase Map de JS - los valores (pueden ser) funciones - similares a los map de Java - o a los Dicts de python. Representación let person = {age:24, name:"John"};. Acceso a los valores: let empName = person.name; // empName = "John" let key = "age"; let numAge = person[key]; //numAge = 24. ej de Object con valores que son funciones: function sayHi(){ Console.log("Hi!"); } let person = { age:24, nombre:"John", greeting: sayHi}; person.greeting(); //Hi!. Los nombre de los atributos de un Object se pueden iterar mediante for...in for(let key in person){ console.log(key); } //"age", "name", "greeting".

Referencias constantes (mirar ejs). se definen con la palabra reservada --> const. En su declaración OBLIGATORIO asignarles un VALOR. Su ámbito es de BLOQUE (al igual que las variables let). NO se pueden REASIGNAR (se quedan con el valor que se les asigna inicialmente en su declaración). NO son INMUTABLES--> son referencias constantes a un valor. Si el valor es un tipo primitivo --> en ese caso si es inmutable. Si el valor es un objeto --> se puede cambiar los valores de las propiedades del objeto (no la referencia al objeto) ej: Se puede declarar mediante const --> un array o declarar un objeto y cambiar los atributos.

Otras clases predefinidas son... Number. Math. Date.

Clase Number. Solo hay un tipo numérico (entra con y sin decimales y notación científica). PROPIEDADES: MAX_VALUE --> número máximo posible MIN_VALUE --> número mínimo posible Nan --> Not a Number (ej: raíces negativas). MÉTODOS: IsInteger() --> comprueba si el número es entero isNan() --> comprueba si el número es Nan toExponential(n) --> convierte el número a la notación exponencial toPrecision(p) --> formatea el número a una precisión de longitud p toString() --> convierte un número a cadena.

CLASE MATH MÉTODOS. abs(num). max(x,y). min(x,y). pow(base,exp). random(). round(num). sin(num). sqrt(). tan(num).

Clase Date MÉTODOS. día del 1 al 31<-- getDate(). del 0 al 6 día semana <-- getDay(). getHours(). getMinutes(). getMonth(). getSeconds(). getFullYear(). getTime(). getISOString().

Browser Object Model (BOM). Cuando se usa JS en una navegador, están disponibles varios objetos predefinidos. Algunos asociados al propio navegador --> BOM. otros con la estructura del HTML (DOM) y son accesibles desde el objeto document ej: <img id="imgmail" src="mai.jpg"/> document.getElementById("imgmail).src = "mail2.jpg";.

OBJETOS PREDEFINIDOS BOM. window. screen. navigator. history. location.

objeto window --> representa la ventana del navegador PROPIEDADES: status. document. history. closed. lenght. frames.

objeto window MÉTODOS. alert(msg). confirm(msg). prompt(msg,default). open(curl). close().

objeto navigator PROPIEDADES. appName navigator.userAgent --> los navegadores suelen mentir por privacidad. mimeTypes. plugins.

objeto location PROPIEDADES. host. hostname. pathname. port. protocol. href.

DEPURACIÓN. consiste en encontrar el erro que hay tras un fallo en el funcionamiento de un programa. en JS especialmente complicada --> muchos errores no se ven en pantalla --> consola. Todos los navegadores modernos tiene un depurador JavaScript incorporado. El depurador: - se puede activar/desactivar - permiten añadir breakpoints y examinar el valor de las variables - Normalmente se activan con F12 y seleccionando "Console". En cada breakpoints, JS pasará la ejecución y permitirá que el desarrollador examine los valores de las variables Después se puede reanudar la ejeución del código.

DEBUGGER (palabra reservada) (depurador). Detiene la ejecución de JS --> y llama a la función de depuración. Tiene el mismo efecto que definir un breakspoints en el depurador.