Post on 17-Apr-2020
Interfaz (UI)
Motor (browser engine)
Motor de render
Intérprete de JS
Backend de UI
Persistencia
Conectividad (Networking)
Web browser (componentes)
Analizador de XML
Interpretes de JS
Motor Browser
SpiderMonkey Netscape Navigator, Firefox
V8 Chrome, NodeJS, Opera
Javascript core Safari
Chakra Microsoft Edge
Carakan Opera
Nitro Safari
JAVASCRIPT
• Es un lenguaje de programación creado por Netscape para incluir en sus navegadores web
• Inicialmente se llamó Mocha/LiveScript
• Ante la popularidad de Java, pasó a llamarse Javascript
• En realidad, no tiene relación con Java
JAVASCRIPT
Interpretado
Los programas se ejecutan a partir del código fuente (o una representación intermedia), sin compilar el código en lenguaje de máquina.
De scripting
Permite construir “scripts” que definen extensiones , comportamiento ante ciertos eventos o automatiza la ejecución de tareas en un entorno determinado.
Dinámicamente tipado
Las variables pueden definirse sin establecer su tipo. Su tipo se define en tiempo de ejecución. De hecho, el tipo de una variable puede cambiar durante la ejecución del programa.
JAVASCRIPT
Dinámico
Es posible modificar/definir partes del programa en tiempo de ejecución. Es posible extender objetos y definiciones en tiempo de ejecución
Funcional
Las funciones son elementos de “primera clase” (y de alto orden). Es posible asignar una función a una variable, guardar funciones en estructuras de datos y/o usar funciones como parámetros o como retorno de una función.
Basado en objetos
Además/en lugar de clases, es possible definer objetos y variar su comportamiento en tiempo de ejecución. Es posible crear nuevos objetos clonando objetos existentes que funcionan como prototipos.
JS: Historia
• Mayo 1995: Creado por Netscape (Mocha) • Sept. 1995: LiveScript • Dic. 1995: JavaScript (decisión de mercadeo) • 1997: ECMAScript; estándar oficial • 1998: ECMAScript 2 • 1999: ECMAScript 3 • 2005: AJAX->Prototype, JQuery, Dojo • 2007: ECMAScript 3.1 • 2009: ECMAScript 5 • >2009: JS moderno, JS del lado del servidor
JAVASCRIPT
Originalmente JS fue orientado a agregar interacciones simples en páginas web
window.alert( "Hola mundo !" );
Con la evolución de DOM , JS permitió la creación de interfaces de usuario web que se actualizaban con las peticiones del usuario.
var m = document.getElementById( "mensaje" );m.innerText = "Hola Mundo !";
JAVASCRIPT
Con AJAX, las aplicaciones JS podían llamar funcionalidades del lado del servidor y actualizar la pantalla.
xmlhttp=new XMLHttpRequest();xmlhttp.open("GET", "nombre.txt",false); xmlhttp.send();var m = document.getElementById( "mensaje" );m.innerText = "Hola " + xmlhttp.responseText;
HTML y JS
<!DOCTYPE html><html><head>
<script src="script.js"></script></head><body>
:</body></html>
HTML y JS
<!DOCTYPE html><html><head></head><body>
<script>document.write("Hola Mundo");
</script>
</body></html>
HTML y JS
<!DOCTYPE html><html><head></head><body>
<button onclick="alert('Hola Mundo!')">Hola
</button>
</body></html>
HTML y JS (Arbol DOM)
<!DOCTYPE html><html><head> <title>My Title</title></head><body> <a href=“#”>My Link</a> <h1>My header</h1></body></html>
Root Element: <html>
Element: <body>
Document
Element: <head>
Element: <title>
Text: “My title”
Element: <a> Element: <h1>
Text: “My link”Text: “My header”
HTML y JS (Arbol DOM)
document provee funciones para buscar nodos en el árbol DOM
document.getElementById("demo")document.getElementsByTagName("div")document.getElementsByClassName("btn")
HTML y JS (Arbol DOM)
element provee funciones para cambiar nodos en el árbol DOM
element.innerHTML= "demo"element.attribute = valorelement.setAttribute ( atributo, valor )element.style.property = valor
HTML y JS (Arbol DOM)
<!DOCTYPE html><html><body><div id="mensaje"></div><script>
var div = document.getElementById("mensaje");div.innerHTML = "Hola Mundo !";
</script></body></html>
HTML y JS (Arbol DOM)
<!DOCTYPE html><html><body><div id="mensaje"></div><script>
var div = document.getElementById("mensaje");div.innerHTML = "Hola Mundo !";
</script></body></html>
HTML y JS (Arbol DOM)
document permite crear y eliminar nodos
document.createElement()document.removeChild()document.appendChild()document.replaceChild()
document.write( text )
HTML y JS (Arbol DOM)
<!DOCTYPE html><html><body><script>
var btn = document.createElement("BUTTON"); var t = document.createTextNode("CLICK ME"); btn.appendChild(t); document.body.appendChild(btn);
</script></body></html>
Funciones en JS
function nombre ( ) {}
function nombre ( ) {return value;}
function nombre ( paramA, paramB ) {}
Funciones en JS
<!DOCTYPE html><html><body><h1 onclick="cambiar(this)">Texto</h1><script> function cambiar( elemento ) { elemento.innerHTML = "Ooops !"; }</script></body></html>
Funciones en JS
<!DOCTYPE html><html><body><h1 onclick="cambiar(this)">Texto</h1><script> function cambiar( elemento ) { elemento.innerHTML = "Ooops !"; }</script></body></html>
Estructuras de control
if ( a < b ) { t = b; b = a;}
switch ( valor ) {case 0: x = 1; break;case 1: x = 3; break;default: x = 12;}
while ( b !== 0 ) { b = a % b; a = t;}
elems = [ "uno", "dos" ];var i;var text = "";for (i=0; i<elems.length; i++) { text += elems[ i ];}
Estructuras de control
<!DOCTYPE html><html><body><p id="demo"></p>
<script> cars = ["BMW", "Volvo", "Saab", "Ford"]; text = ""; var i; for (i = 0; i < cars.length; i++) { text += cars[i] + "<br>"; } document.getElementById("demo").innerHTML = text;</script>
</body></html>
JS: Interacción básica
alert( “Hola Mundo” );window.alert( “Hola Mundo” );
confirm( “¿Estás de acuerdo ?” );window.confirm( “¿Estás de acuerdo” );
prompt( “¿Cómo te llamas?” );window.prompt( “¿Cómo te llamas?” );
console.log( “mensaje” );
Mostrar mensajes o cajas de diálogo en pantalla
JS: Variables
var precio1 = 6;var precio2 = 7var total = precio1 + precio2;
var pi = 3.14;var persona = “Juan Perez”;var saludo = ‘Hola Juan’;var fin = false;
JS: Variables
Los identificadores (nombres) de las variables:
• pueden contener letras, digitos, y los símbolos “underscore” y de “dollar”
• deben empezar con una letra, $ o _
• son sensibles a mayúsculas y minúsculas (y != Y)
• no puede coincidir con una palabra reservada
JS: Tipado dińamico
var x = 15; // Number (int)var y = 15.6; // Number (float)var z = ‘Hola Mundo’; // String
var arr = []; // Arrayvar obj = {}; // Object
console.log( typeof(x) ); // numberconsole.log( typeof(z) ); // stringconsole.log( typeof(arr) ); // objectconsole.log( typeof(obj) ); // object
Los tipos se asocian a los valores, no a las variables
JS: Tipado dińamico
var x; // x es undefinedvar x = 5; // x es Numbervar x = “Jhon”; // x es String
var x; // sigue String
Los tipos se asocian a los valores, no a las variables
JS: Tipos
Hay tipos que pueden contener valores • string • number • boolean • object • function
Hay tipos de objetos instanciables con new • String • Date • Number • Boolean • Array • ObjectHay dos tipos que no
pueden contener valores • null • undefined
JS: Tipos
var number = 2;typeof number;
var number = new Number();typeof number;
var string =“oh yeah!”;typeof string;
var string = new String();typeof string;
JS: Tipos
var number = 2;typeof number;
var number = new Number();typeof number;
var string =“oh yeah!”;typeof string;
var string = new String();typeof string;
number
JS: Tipos
var number = 2;typeof number;
var number = new Number();typeof number;
var string =“oh yeah!”;typeof string;
var string = new String();typeof string;
number object
JS: Tipos
var number = 2;typeof number;
var number = new Number();typeof number;
var string =“oh yeah!”;typeof string;
var string = new String();typeof string;
number
string
object
JS: Tipos
var number = 2;typeof number;
var number = new Number();typeof number;
var string =“oh yeah!”;typeof string;
var string = new String();typeof string;
number
string
object
object
JS: Tipos
typeof "John" // string typeof 3.14 // number typeof NaN // number typeof false // boolean typeof [1,2,3,4] // object typeof {name:'John', age:34} // object typeof new Date() // object typeof function () {} // function typeof variableNoDefinida // undefined typeof null // object
JS: Arreglos y Objetos
var numeros = [ 1, 2, 3 ];var carros = [ “Saab”, “Volvo”, “BMW”];var mezcla = [ 1, “Hola” ];
// objectvar persona = { nombre: “Juan”, apellido: “Perez”, edad: 20 };
JS: Arreglos y Objetos
typeof “John” // string typeof 3.14 // number typeof false // Booleantypeof [1,2,3,4] // object typeof {name:'Juan', age:20}// object
JS: undefined vs null
undefined: la variable no ha sido declarada (no existe), o no ha sido inicializada
null: tipo de objeto usado para denotar objetos vacíos
var x; // typeof : undefinedx = undefined; // typeof : undefinedwindow.alert(x);
var x = “”; // typeof : stringvar x = null; // typeof : objectwindow.alert(x);
JS: Date
<p id="demo"></p><script>document.getElementById("demo").innerHTML = Date();</script>
<script>var d = new Date();document.getElementById("demo").innerHTML = d;</script>
<script>var d = new Date("October 13, 2014 11:13:00");document.getElementById("demo").innerHTML = d;</script>
Editores en línea
JSBin: https://jsbin.com/
JSFiddle. https://jsfiddle.net/
CodePen: https://codepen.io/