PDF de programación - La evolución de JavaScript

LA EVOLUCIÓN DE JAVASCRIPT

{
"JavaScript": {
"aunar": "CORPORACIÓN UNIVERSITARIA AUTÓNOMA DE NARIÑO",
"evento": "Maquinarte-2017",
"desc-evento": "VII Muestra de Proyectos de Ingeniería",
"fecha": "26-04-2017",
"orador": {
"name": "Germán Augusto Mora Ruiz",
"correo": {"[email protected]","[email protected]"}
"nick-name": "Germancho",
"jobs": {"Desarrollador","Docente"},
"tags": {"#gnu/linux","#software libre","#open source","#web++"}
}
}
}

#JAVASCRIPT - ¿QUÉ ES?

➢ Lenguaje de programación interpretado (Script).
➢ Javascript es una implementación de ECMAScript
➢ Sintaxis similar a C. Adoptó nombres y convenciones de Java.
➢ Se creó con el objetivo de integrarse en HTML
➢ Inicialmente se lo uso del lado del cliente (client-side)
➢ Actualmente utiliza ECMAScript 6. Liberado en julio del 2015
➢ Es una marca registrada de Oracle Corporation.
➢ Influido por Java, Perl, Self, Python, C, Scheme, AWK
➢ Ha influido a ObjectiveJ, JScript, JScript .NET, TIScript

{"libro" : "Introducción a JavaScript","autor" : "Javier Eguíluz Pérez"}

#SERVICIO @WEB

{"topic" : "Arquitectura Cliente - Servidor"}

#JAVASCRIPT - USOS

➢ Interacción con el DOM
➢ Carga de contenido o envío de datos a través AJAX
➢ Animación
➢ Contenido interactivo
➢ Validaciones

{"libro" : "JavaScript y CSS","autor" : "Juan Carlos Orós"}

#JAVASCRIPT - HISTORIA

➢ Desarrollado por Brendan Eich, empleado en Netscape; inicialmente

se llamaba Mocha, luego LiveScript (1990), y finalmente Javascript.

➢ En diciembre de 1995 Netscape y Sun Microsystems luego de unirse,
definen como objetivo el desarrollar el proyecto en conjunto,
reintroducen este lenguaje con el nombre de Javascript.

➢ En marzo de 1996, Netscape Navigator 2.0 fue lanzado con soporte

para JavaScript. Primer navegador en usarlo

➢ En respuesta a la popularidad de Javascript, Microsoft lanzó su

propio lenguaje de programación a base de script, VBScript

{"url" : "https://es.wikipedia.org/wiki/JavaScript"}

#JAVASCRIPT - HISTORIA

➢ En 1996 Microsoft añade su propia versión de JavaScript en Internet

Explorer (3.0) y lo llama JScript.

➢ En noviembre de 1996 se inicia la estandarización con ECMA y es
adopotado en Junio de 1997 y luego por “Internacional Organization
for Standardization” ISO.

➢ El DOM fue diseñado para evitar incompatibilidades.

{"url" : "https://es.wikipedia.org/wiki/JavaScript"}

#JAVASCRIPT - CARACTERÍSTICAS

➢ Imperativo y estructurado
➢ Débilmente tipado dinámico
➢ Funcional
➢ Prototipos
➢ Orientado a Eventos

{"url" : "https://es.wikipedia.org/wiki/JavaScript"}

#JAVASCRIPT - ECMASCRIPT

➢ Inició en Noviembre de 1996
➢ Primera Edición: Junio de 1997
➢ Segunda Edición: Junio de 1998
➢ Tercera Edición: Junio de 1998
➢ Cuarta Edición: NULL
➢ Quinta Edición: Diciembre de 2009
➢ Sexta Edición: Junio de 2015
➢ Séptima Edición: Junio de 2016

{"url" : "https://www.ecma-international.org/"}

#JAVASCRIPT - SEGURIDAD

Vulnerabilidad Cross-Site Scripting - XSS

{"url" : "https://es.wikipedia.org/wiki/JavaScript"}

#JAVASCRIPT - SEGURIDAD

Vulnerabilidad Cross site Request Forgery - CSRF

{"url" : "https://es.wikipedia.org/wiki/JavaScript"}

#JAVASCRIPT - HERRAMIENTAS EN LÍNEA

● http://www.jslint.com/ (Depurador)
● http://jsonlint.com/ (Validador de Json)
● https://js.do/ (Editor en línea)
● https://www.typescriptlang.org/play/ (Transpilador)
● http://brackets.io/ (Editor multiplataforma)

{"url" : null }

#JAVASCRIPT - AJAX

➢ Acrónimo de Asynchronous Javascript And XML
➢ Creado en 2005 por Jesse James Garrett
➢ Técnica de desarrollo web para crear aplicaciones interactivas o RIA

(Rich Internet Applications).

➢ Ajax es una combinación de cuatro tecnologías ya existentes:

○ HTML y hojas de estilos en cascada CSS
○ Document Object Model (DOM)
○ Objeto XMLHttpRequest
○ XML

{"libro" : "Introducción a Ajax","autor" : "Javier Eguíluz Pérez"}

#JAVASCRIPT - AJAX

{"libro" : "Introducción a Ajax","autor" : "Javier Eguíluz Pérez"}

Adaptive Path

#JAVASCRIPT - AJAX

{"libro" : "Introducción a Ajax","autor" : "Javier Eguíluz Pérez"}

Adaptive Path

#JAVASCRIPT - AJAX

{"libro" : "Introducción a Ajax","autor" : "Javier Eguíluz Pérez"}

Adaptive Path

#JAVASCRIPT - JQUERY

➢ Write less, do more
➢ Librería de JavaScript
➢ http://jqueryui.com/
➢ http://jquerymobile.com/
➢ http://sizzlejs.com/
➢ http://qunitjs.com/

{"url" : "http://jquery.org"}

#JAVASCRIPT - JSON

➢ Acrónimo de JavaScript Object Notation
➢ Json utiliza los estándares RFC 7159, ECMA-404 (Octubre 2013)
➢ Intercambio de datos
➢ Se hace necesario en entornos donde el tamaño del flujo de datos

entre cliente y servidor es de vital importancia

➢ Json surge poco a poco y los lenguajes de programación lo adoptan

y crean librerías y frameworks

➢ Tipos de datos: Numéricos, Cadenas, Booleanos, null, Vectores,

Objetos

➢ Soportado por: Java, javaScript, python, Objective-C, Perl, Cobol,

Lua, Delphi, asp, Qt, Ruby, Visual Basic, C, C++

{"link" : "http://www.json.org/"}

#JAVASCRIPT - JSON

➢ Otras notaciones diferentes a Json son: yaml, so, xml, ogdl,

Expression, Plist

JSON
{
"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}
}

XML
<menu id="file" value="File">
<popup>
<menuitem value="New" onclick="CreateNewDoc()" />
<menuitem value="Open" onclick="OpenDoc()" />
<menuitem value="Close" onclick="CloseDoc()" />
</popup>
</menu>

{"link" : "Facebook"} {"link" : "Api Flickr - XML"} {"link" : "Api Flickr - JSON"}

#JAVASCRIPT - TypeScript

➢ Lenguaje que compila a JavaScript (Transpiladores)
➢ A Statically Typed superset of JavaScript that compiles to plain

Javascript

➢ Multiparadigma: estructurado, imperativo, orientado a objetos, script,

funcional, genérico

➢ TypeScript es el javascript que escala
➢ TypeScript reduce el tiempo de implementación de EcmaScript en los
las

navegadores (Los navegadores se demoran
características)

implementar

{"link-TypeScript" : "https://www.typescriptlang.org/play/"}

#JAVASCRIPT - TypeScript

➢ TypeScript permite definir variables, hacer uso de objetos los cuales

➢ TypeScript reduce el nivel de aprendizaje y de uso de Javascript
➢ El compilador de TypeScript está escrito asimismo en TypeScript,

los transpila a javascript

compilado a JavaScript

➢ TypeScript es desarrollado por Microsoft
➢ Licencia Apache 2
➢ Influido por

Java, C++, JavaScript

{"transpiladores" : ["CoffeScript", "TypeScript", "Babel"]}

#JAVASCRIPT - TypeScript

{"link" : "https://www.typescriptlang.org/play/"}

#JAVASCRIPT - TypeScript

{"link" : null }

#Stack: Apache - Php - Mysql - Gnu/Linux

{"stack" :"LAMP"} {"stack" :"WAMP"} {"stack" :"XAMP"}

#Cliente-web

{"" : ""}

#Cliente-web

{"chrome" : "v8"} {"tool" : "sunspider"}

#V8

{"url" : "https://developers.google.com/v8/"}

#NodeJs

➢ Es un entorno Javascript del lado del servidor, basado en eventos.
➢ Utiliza el motor V8, desarrollado por Google.
➢ V8 compila Javascript en código de máquina nativo, en lugar de

interpretarlo o ejecutarlo como bytecode

➢ Ideal para la programación asíncrona
➢ Curva de aprendizaje de Node.js
➢ “Proporcionar una manera fácil para construir programas de red

escalables”

{"url" : "nodejs.org"}

#MEAN

{"url" : "http://nodejs.org"} {"concepto" : "MEAN"}

#JS

{"url" : null}

#PREGUNTAS

<div id=”mensaje”>
<p class=”view-data text-center”>
{{$respuesta}}
</p>
</div>

pregunta.response= "si"
pregunta.init(function() {
contestar=pregunta.getText()
this.procesar(contestar)
respuesta=contestar.getText()
});

</Gracias>