JAVASCRIPT - Uniandesisis3710/... · 2016-08-18 · HTML y JS (Arbol DOM) document provee funciones para buscar nodos en el árbol DOM document.getElementById("demo")...

JAVASCRIPTISIS 3710

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”


document provee funciones para buscar nodos en el árbol DOM

document.getElementById("demo")document.getElementsByTagName("div")document.getElementsByClassName("btn")


element provee funciones para cambiar nodos en el árbol DOM

element.innerHTML= "demo"element.attribute = valorelement.setAttribute ( atributo, valor )element.style.property = valor


<!DOCTYPE html><html><body><div id="mensaje"></div><script>

var div = document.getElementById("mensaje");div.innerHTML = "Hola Mundo !";

</script></body></html>


<!DOCTYPE html><html><body><div id="mensaje"></div><script>

var div = document.getElementById("mensaje");div.innerHTML = "Hola Mundo !";



document permite crear y eliminar nodos

document.createElement()document.removeChild()document.appendChild()document.replaceChild()

document.write( text )


<!DOCTYPE html><html><body><script>

var btn = document.createElement("BUTTON"); var t = document.createTextNode("CLICK ME"); btn.appendChild(t); document.body.appendChild(btn);


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





number

JS: Tipos





number object

JS: Tipos





number

string

object

JS: Tipos





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>

Consola JS en browsers











Editores en línea: Plunker

https://plnkr.co

Editores en línea: Plunker

https://plnkr.co

Editores en línea

JSBin: https://jsbin.com/

JSFiddle. https://jsfiddle.net/

CodePen: https://codepen.io/

https://codepen.io/

JAVASCRIPT - Uniandesisis3710/... · 2016-08-18 · HTML y JS (Arbol DOM) document provee funciones para buscar nodos en el árbol DOM document.getElementById("demo")...

Documents