Scribd
Cargar
274 vistas59 páginas

WE 06 Javascript

JS - UNC

Cargado por

Daniel Hahn
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
274 vistas59 páginas

WE 06 Javascript

JS - UNC

Cargado por

Daniel Hahn
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 59

Ingeniería Web

© Copyright 2019 Edwin Valencia 1
Que hemos aprendido?

• Como escribir contenido para una pagina


web usando HTML
• Como agregar estilos a una pagina web
usando CSS, enlazando un archivo CSS a un
archivo HTML
• Como inspeccionar el código HTML y CSS de
una pagina web en el browser

© Copyright 2019 Edwin Valencia 2
Hoy: JavaScript

• Ahora que conocemos como agregar


contenido y estilos a una pagina web, HTML JS CSS
Structural Behavioral Presentational
exploremos como agregar
comportamiento responsive
(adaptable)

© Copyright 2019 Edwin Valencia 3
Desarrollo Front - end

https://www.upwork.com/hiring/development/front-end-developer/

Client-side script: El código se ejecuta en el browser despues la página


se envia al servidor. Algunas veces el código manipula la página o
responde a acciones del usuario.

© Copyright 2019 Edwin Valencia 4
Que es JavaScript?

• Es un lenguaje de programación que se utiliza


principalmente para crear páginas web dinámicas.
• Una página web dinámica es aquella que incorpora
efectos como texto que aparece y desaparece,
animaciones, acciones que se activan al pulsar botones
y ventanas con mensajes de aviso al usuario.
• Técnicamente, JavaScript es un lenguaje de
programación interpretado, por lo que no es necesario
compilar los programas para ejecutarlos. En otras
palabras, los programas escritos con JavaScript se
pueden probar directamente en cualquier navegador sin
necesidad de procesos intermedios.

© Copyright 2019 Edwin Valencia 5
JavaScript afecta el comportamiento de una web page
via manipulación del documento en el browser

El browser solicita una


pagina.
Estructura: HTML5
Presentacion: CSS web
page
• Con JavaScript, se
puede modificar la El browser
estructura y la retorna la pagina.

presentacion despues El usuario interactua


con el browser.

que la pagina es
cargada Javascript
embebido en la
pagina web es
“ejecutada” por
el browser

© Copyright 2019 Edwin Valencia 6
Que se puede hacer con JavaScript

 Menus en cascada
 Modificar imagenes on mouse “rollover”
 Validar forms antes de enviarlos al servidor
 Num of chars, non-blank input, non-alpha numerics,
etc
 Efectos de fondo (color, musica)
 Aplicaciones “Simples”
 Calendarios, calculadoras de pagos, etc
 Aplicaciones “Complejas”
 Google docs
 Gmail
 Facebook
© Copyright 2019 Edwin Valencia 7
Como se enlaza código JavaScript
<!DOCTYPE html>
<html>
<head>
<script>
// Javascript code can be placed in the <head> or <body>
// of an HTML document; other locations are not recommended
</script>
<charset=“UTF-8" />
<title>Example Javascript</title>
</head>
<body>
<script src=“demo.js”>
/* Javascript can be placed inline or in an external .js file */
</script>
</body>
</html>

Las etiquetas <script>…</script> le indican al browser que su contenido


no es HTML para ser visualizado, es Javascript y debe ser
interpretado.

El codigo Javascript no se visualiza al usuario.

© Copyright 2019 Edwin Valencia 8
Javascript es un lenguaje de programacion completo de alto
nivel, con elementos familiares

• Variables
• Constantes
• Expresiones
• Sentencias de control condicional (if, else if, switch)
• Bucles e iteraciones (for, while, do…while)
• Manejo de excepciones (try-catch)
Pero tambien algunos conceptos no familiares:
• Clases no formales (en su lugar usa prototipos)
– En JS6 hay manejo de clases
• Tipado debil
• Functiones fuera de objetos
• Variables globales

© Copyright 2019 Edwin Valencia 9
La primera sentencia JavaScript

• Para probar el código JavaScript, iniciar una


consola en el navegador, e ingresar el siguiente
código:
• alert("Un mensaje de aviso usando JavaScript");

• Este es un comando JS que hace aparecer un


mensaje en una caja de dialogo
© Copyright 2019 Edwin Valencia 10
Variables y tipos
var name = expression;
var level = 23;
var accuracyRate = 0.99;
var name = “Sistemas";
 Las variables son declaradas con la palabra
clave var (case-sensitive)
 Los tipos no se especifican, JS los asigna, es
débilmente tipado ("loosely-typed")
 Number, Boolean, String, Array, Object, Function, Null, 
Undefined
 Puedo averiguar el tipo de una variable llamando a 
typeof
© Copyright 2019 Edwin Valencia 11
Tipo Number

var enrollment = 99;


var mediangrade = 2.8;
var credits = 5 + 4 + (2 * 3);

 Enteros y números reales son el mismo tipo


(no int vs. double)
 Mismos operadores: + - * / % ++ -- = +=
-= *= /= %=
 Similar precedencia a Java
 Muchos operadores convierten automáticamente
los tipos: "2" * 3 es 6
© Copyright 2019 Edwin Valencia 12
Tipo String

var nickName = "Sparky O'Sparkz“


var fName = nickName.substring(0, nickName.indexOf(" ")); // "Sparky“
var len = nickName.length; // 15
var name = ‘Sistemas’; // can use " " or ' '

 Metodos: charAt, charCodeAt, fromCharCode, indexOf, la


stIndexOf,replace, split, substring, toLowerCase, toUpper
Case
 charAt retorna una cadena de una letra (No hay
tipo char)
 La longitud (length) es una propiedad (no un metodo,
como en Java)
 La concatenación es con +: 1 + 1 es 2, pero "1" +
1 es "11"
© Copyright 2019 Edwin Valencia 13
Algo mas sobre Strings
Las secuencias de escape se comportan como en Java:
\' \" \& \n \t \\

Para convertir números y cadenas:


var count = 10; // 10
var stringedCount = "" + count; // "10"
var puppyCount = count + " puppies, yay!"; // "10
puppies, yay!"
var magicNum = parseInt("42 is the answer"); // 42
var mystery = parseFloat("Am I a number?"); // NaN

Para acceder a los caracteres de una cadena, usar [index]


o charAt:
var firstLetter = puppyCount[0]; // "1"
var fourthLetter = puppyCount.charAt(3); // "p"
var lastLetter = puppyCount.charAt(puppyCount.length - 1);
// "!"
© Copyright 2019 Edwin Valencia 14
Los comentarios (como en java)

// single-line comment
/* multi-line comment */

Recordar: 3 sintaxis para comentarios


HTML: <!-- comment -->
CSS/JS: /* comment */
Java/JS: // comment

© Copyright 2019 Edwin Valencia 15
Bucle for (igual que java)

for (initialization; condition; update) {


statements;
}
var sum = 0;
for (var i = 0; i < 100; i++) {
sum = sum + i; // es igual a sum += i;
}

var s1 = "It's a-me, Mario!";


var s2 = "";
for (var i = 0; i < s1.length; i++) {
s2 += s1[i] + s1[i];
}
// s2 almacena "IItt''ss aa--mmee,, MMaarriioo!!"

© Copyright 2019 Edwin Valencia 16
Objeto Math
var rand1to10 = Math.floor(Math.random()*10+1);
var three = Math.floor(Math.PI);

Metodos: abs, ceil, cos, floor, log, max, min, pow,


random, round, sin, sqrt, tan
Propiedades: E, PI

© Copyright 2019 Edwin Valencia 17
Operadores logicos

 Relacional: > < >= <=


 Logico: && || !
 Igualdad: == != === !==
 La mayoría de operadores lógicos convierten
automáticamente los tipos. Ejemplos:
5 < "7"
42 == 42.0
"5.0" == 5
•El === y !== son pruebas de igualdad estrictas;
verifican tipo y valor: "5.0" === 5 es falso

© Copyright 2019 Edwin Valencia 18
Tipo Boolean

var iLikeJS = true;


var ieIsGood = "IE6" > 0; // false
if ("web dev is great") { /* true */ }
if (0) { /* false * }

Cualquier valor puede ser usado como Boolean


• Valores "falsos”: 0, 0.0, NaN, "", null, y undefined
• Valores “verdaderos": todo lo demas
Convirtiendo un valor en un Boolean explicitamente:
•var boolValue = Boolean(otherValue);
•var boolValue = !!(otherValue);

© Copyright 2019 Edwin Valencia 19
Valores especiales: null y undefined

var foo = null;


var bar = 9;
var baz;
/* At this point in the code,
foo is null
bar is 9
baz is undefined */

 undefined: no ha sido declarado, no existe


 null: existe, pero se asigno específicamente un valor
vacío o nulo
Porque JavaScript tiene estas características?

© Copyright 2019 Edwin Valencia 20
Sentencias if/else (igual a java)

if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}

• Estructura idéntica a la sentencia if/else de java


• JavaScript permite casi cualquier cosa como
una condición

© Copyright 2019 Edwin Valencia 21
Bucle While (igual a java)

while (condition) { do {
statements; statements;
} }while(condition);

Las palabras claves break y continue también


se usan como en Java

© Copyright 2019 Edwin Valencia 22
Arrays

var name = []; // empty array


var names = [value, value, ..., value]; // pre-filled
names[index] = value; // store element

var types = ["Electric", "Water", "Fire"];


var pokemon = []; //pokemon.length is 0
pokemon[0] = "Pikachu"; //pokemon.length is 1
pokemon[1] = "Squirtle"; //pokemon.length is 2
pokemon[4] = "Magikarp"; //pokemon.length is 5
pokemon[4] = "Gyarados"; //pokemon.length is 5

Hay dos formas de inicializar un array


La propiedad length (crece como sea necesario
cuando se agregan elementos)

© Copyright 2019 Edwin Valencia 23
Metodos de un Array

var a = ["Mario", "Luigi"]; // [Mario, Luigi]


a.push("Koopatroopa"); // [Mario, Luigi, Koopatroopa]
a.unshift("Bowser"); // [Bowser, Mario, Luigi, Koopatroopa]
a.pop(); // [Bowser, Mario, Luigi]
a.shift(); // [Mario, Luigi]
a.sort(); // [Luigi, Mario]

Los Arrays sirven como muchas estructuras de datos: list,


queue, stack, ...
Metodos: concat, join, pop, push, reverse, shift, slice, sort,
splice, toString, unshift
 push y pop agrega/remueve del final
 shift y unshift agrega/remueve desde el inicio
 shift y pop retorna el elemento removido

© Copyright 2019 Edwin Valencia 24
Dividiendo cadenas: split y join

var s = "the quick brown fox";


var a = s.split(" "); // ["the", "quick", "brown", "fox"]
a.reverse(); // ["fox", "brown", "quick", "the"]
s = a.join("!"); // "fox!brown!quick!the"

 split divide en partes una cadena dentro de un


array usando un delimitador
Puede usarse también como una expresión
regular rodeada por /:
var a = s.split(/[ \t]+/);
 join combina un array en una simple String,
colocando un delimitador entre ellos

© Copyright 2019 Edwin Valencia 25
Definiendo funciones

function name() { function myFunction() {


statement; alert("Hello!");
statement; alert("Your browser says hi!");
... }
statement;
}

• La función de ejemplo puede ser el


contenido de un archivo ejemplo.js enlazado
a nuestra pagina HTML, las sentencias
colocadas en las funciones pueden ser
evaluadas en respuesta a eventos del
usuario.
© Copyright 2019 Edwin Valencia 26
Programación dirigida por eventos

A diferencia de programas en java, los programas en JS no tienen main;


ellos responde a acciones del usuario llamados eventos
Event-Driven Programming: escribir programas dirigidos por eventos de
usuario
© Copyright 2019 Edwin Valencia 27
Manejadores de eventos

<element attributes onclick="function();">...

<div onclick="myFunction();">Click me!</div>

Las funciones JavaScript se pueden establecer


como manejadores de eventos
Cuando interactuas con el elemento, la función se
ejecutará
• onclick, es justo uno de los muchos eventos de
los atributos HTML que usaremos

© Copyright 2019 Edwin Valencia 28
Botones: <button>

<button onclick="myFunction();">Click me!</button>

• El texto del boton aparece dentro de la etiqueta;


puede contener tambien imagenes.
• Para hacer un boton responsive u otro control
UI:
– Seleccionar el control (e.g., button) y el evento de
interes (e.g., mouse click)
– Escribir la funcion JavaScript a ejecutar cuanto el
evento ocurra
– Enlazar la function al envento en el control

© Copyright 2019 Edwin Valencia 29
Accesando a un elemento:
document.getElementById

var name = document.getElementById("id");

document.getElementById retorna el objeto


DOM para un elemento con id dado (anotar
que hay que omitir el # cuando se
proporciona el id)

© Copyright 2019 Edwin Valencia 30
document.getElementById: Ejemplo

<img id="icon01" src="images/pokeball.jpg"


alt="a pokeball" />
<button onclick="changeImage();">Click
me!</button>

function changeImage() {
var pokeballImg = document.getElementById("icon01");
pokeballImg.src = "images/mystery.gif";
}

© Copyright 2019 Edwin Valencia 31
Document Object Model – DOM

• Estructura en forma de árbol construida con


todos los elementos de una pagina, y es
accesible via JavaScript

<html>
<head>
<title> ... </title>
</head>
<body>
<h1> ... </h1>
<div>
<p> ... </p>
</div>
</body>
</html>

© Copyright 2019 Edwin Valencia 32
Documento Object Model (DOM)

Un conjunto de objetos JavaScript que representan


cada elemento sobre la página
 Cada tag en una página le corresponde a un objeto
DOM en JavaScript.
 El código JS puede conversar con estos objetos
para examinar el estado de los elementos
 e.g. ver si una casilla de selección es
seleccionada
 Podemos cambiar el estado
e.g. insertar algún nuevo texto en un div
 Podemos cambiar estilos
•e.g. hacer un párrafo rojo

© Copyright 2019 Edwin Valencia 33
Como obtener los elementos DOM en JS

 Preguntarnos por el id:


document.getElementyById(...)
 Consultar por los selectores de estilo CSS:
• document.querySelector(...)
• document.querySelectorAll(...)
 Crear nuevos! document.createElement(...)

© Copyright 2019 Edwin Valencia 34
Obteniendo un elemento DOM en JS

<p id="october"></p>

var pTag = document.getElementById("october");

© Copyright 2019 Edwin Valencia 35
Que hay dentro de un objeto DOM?

• Para empezar, tenemos atributos HTML en este


ejemplo:
<img src="images/puppy.png" alt="A fantastic puppy photo"/>

• Tenemos un objeto DOM (Lo llamamos


puppyImg) con dos propiedades:
– puppyImg.src – configurado por el browser a
images/puppy.png
– puppyImg.alt – configurado por el browser a "A
fantastic puppy photo"

© Copyright 2019 Edwin Valencia 36
Que hay dentro de un objeto DOM?

<p>See our <a href="sale.html" id="saleslink">Sales</a> today!</p>


<img id="icon" src="images/borat.jpg" alt="Borat" />
<caption class="photo user-upload">Beauty.</caption>

var icon = document.getElementById("icon");


var theLink = document.getElementById("saleslink");
var caption = document.querySelector("caption");

Propiedad Descripción Ejemplo


tagName element's HTML tag icon.tagName is "IMG"
caption.className is "photo user‐
className CSS classes of element
upload"

src URL target of an image icon.src is "images/borat.jpg"

href URL target of a link theLink.href is "sale.html"

© Copyright 2019 Edwin Valencia 37
Propiedad inerHTML

• Todos los elementos DOM tienen una


propiedad llamada innerHTML que tiene los
contenidos de una etiqueta HTML como una
cadena:
<ul id="dr-seuss">
<li>Thing 1</li>
<li>Thing 2</li>
</ul>

var elm = document.getElementById("dr-seuss");


// elm.innerHTML : "\n <li>Thing 1</li>\n <li>Thing 2</li>\n"

© Copyright 2019 Edwin Valencia 38
Que podemos hacer con los objetos DOM?

• Configurar sus propiedades, y en respuesta


cambiar la página
• Esto es como dar comportamiento a páginas
web: Usar JavaScript para manipular el DOM
cambiando las propiedades de sus elementos.
• Por ejemplo, veamos el codigo.
<a id="fb‐link“ href="http://www.facebook.com">Facebook</a>

• Al aplicar este codigo, cambiamos el contenido:


var link = document.getElementById("fb-link");
link.innerHTML = "MySpace is back in a really big way."

© Copyright 2019 Edwin Valencia 39
DOM properties for form controls

• <input id="sid" type="text" size="7" maxlength="7" />


• <input id="frosh" type="checkbox" checked="checked" /> Freshman?
HTML
var sid = document.getElementById("sid");
var frosh = document.getElementById("frosh"); JS

output

Property Description Example


value the text/value chosen by the user sid.value could be "1234567"
checked whether a box is checked frosh.checked is true
disabled whether a control is disabled (boolean) frosh.disabled is false
readOnly whether a text box is read‐only sid.readOnly is false

© Copyright 2019 Edwin Valencia 40
Adjusting styles with the DOM
objectName.style.propertyName = "value"; JS
<button onclick="colorIt();">Click me!</button>
<span id="fancytext">Don't forget your homework!</span>
HTML
function colorIt() {
var text = document.getElementById("fancytext");
text.style.color = "#ff5500";
text.style.fontSize = "40pt";
} JS

output

Property Description
style lets you set any CSS style property for an element
• same properties as in CSS, but with camelCasedNames, not names‐with‐
underscores
• examples: backgroundColor, borderLeftWidth, fontFamily

© Copyright 2019 Edwin Valencia 41
Common DOM styling errors

• Olvidamos escribir .style cuando configuramos estilos


var clickMe = document.getElementById("clickme");
clickMe.color = "red";
clickMe.style.color = "red"; JS

• Las propiedades de estilo tienen mayusculas likeThis, not like‐this


clickMe.style.font-size = "14pt";
clickMe.style.fontSize = "14pt"; JS

• Las propiedades de estilo deben establecerse como strings, muchas veces con unidades al final

clickMe.style.width = 200;
clickMe.style.width = "200px";
clickMe.style.padding = "0.5em"; JS
• Escriba exactamente el valor que ha escrito en el CSS, pero entre comillas.

© Copyright 2019 Edwin Valencia 42
JavaScript no intrusivo

• En versions anteriores los eventos JavaScript fueron


intrusivos en el HTML
• Ahora veremos como escribir codigo JavaScript no
intrusivo
– HTML sin codigo JavaScript dentro de las etiquetas
– Usar el JS DOM para enlazar y ejecutar todos los
manejadores de eventos JavaScript
• Permitir la separacion de un web site en 3 categorias
principales:
– Contenido (HTML) – Que es?
– Presentacion (CSS) – Como debe verse?
– Comportamiento (JavaScript) – Como responder a la
interacción con el usuario?
© Copyright 2019 Edwin Valencia 43
Manejadores de eventos intrusivos (mala practica)

<button onclick="okayClick();">OK</button>
// Llamado cuando el boton OK es clicked
function okayClick() {
alert("booyah");

• Este estilo no se recomienda (HTML se


mezcla con codigo JS)
• Meta: eliminar todos los codigos JavaScript
del cuerpo HTML

© Copyright 2019 Edwin Valencia 44
Enlazando un manejador de eventos en código JS

objectName.onevent = function;
<button id="ok">OK</button>

var okButton = document.getElementById("ok");


okButton.onclick = okayClick;

• Es legal enlazar manejadores de eventos a los


objetos DOM de los elementos en su codigo JS
• Observe que no se coloca parentiesis despues
del nombre de la function
• Esto es el mejor estilo que enlazarlos en el
HTML
© Copyright 2019 Edwin Valencia 45
Donde ejecutar mi código?
<html>
<head>
<script src="myfile.js"</script> var x = 3;
</head> function f(n) { return n + 1; }
<body> ... </body> function g(n) { return n - 1; }
</html> x = f(x);

• El codigo JS del archivo se ejecuta al momento que el browser


carga la etiqueta script
• Algunas variables son declaradas inmediatamente
• Algunas funciones son declaradas peron llamadas, a menos que su
codigo global los llame explicitamente
• A este punto en el tiempo, el browser no ha leido aun el body de la
pagina
• Ninguno de los objetos DOM para las etiquetas han sido creadas
todavia

© Copyright 2019 Edwin Valencia 46
Intento fallido por ser no intrusivo
<html>
<head>
<script src="myfile.js"></script>
</head>
<body>
<div><button <em>id="ok"</em>>OK</button>
</div>
var btn = document.getElementById("ok");
(... more html ...)
btn.onclick = okayClick;
// this is bad: btn is null at this point

• Problema: El codigo JS se ejecuta al momento de que el script es


cargado
• script en head es procesado antes que el body de la pagina sea
cargada
• No hay elementos disponibles aun o que puedan ser accesados por
el DOM
• Necesitamos una forma de enlazar el manejador despues que la
pagina ha sido cargada...
© Copyright 2019 Edwin Valencia 47
El evento window.onload

function functionName() {
// colocar codigo para inicializar la pagina
}
// indicar a la ventana para ejecutar la function cuando
la pagina es cargada:
window.onload = functionName;

• Hay un evento global llamado window.onload


que se ejecuta una vez que la pagina ha sido
cargada
• Si enlazas una funcion como un manejador a
window.onload, este se ejecutará en ese
momento
© Copyright 2019 Edwin Valencia 48
Un manejador de eventos no intrusivo

<button id="ok">OK</button> <!-- (1) -->

// called when page loads; sets up event handlers


function pageLoad() {
var ok = document.getElementById("ok"); // (3)
ok.onclick = okayClick;
}
function okayClick() {
alert("booyah"); // (4)
}
window.onload = pageLoad; // (2)

© Copyright 2019 Edwin Valencia 49
Errores comunes en JS no intrusivo
• Los nombres de los eventos son todos en minuscula, no capitalizados
como en la mayoria de las variables
window.onLoad = pageLoad;
window.onload = pageLoad;
• No debes escribir () cuando enlazas el manejador (Si lo haces, éste
llama a la function inmediatamente, en lugar de configurarlo para que
lo llame mas tarde)
ok.onclick = okayClick();
ok.onclick = okayClick;
• Nuestro verificador JSLint lo identificará como error
• Relacionado: no se puede llamar directamente a las funciones como
alert; deben estar encerradas en su propia funcion
ok.onclick = alert("booyah");
ok.onclick = okayClick;
function okayClick() { alert("booyah"); }

© Copyright 2019 Edwin Valencia 50
Funciones anonimas

function(parameters) {
... statements ...;
}
• JavaScript permite declarar funciones
anónimas
• Crea rapidamente una función sin darle un
nombre
• Puede ser almacenada como una variable,
enlazada como un manejador de eventos,
etc.
© Copyright 2019 Edwin Valencia 51
Ejemplo de funciones anonimas
window.onload = function() {
var ok = document.getElementById("ok");
ok.onclick = okayClick;
};
function okayClick() { alert("booyah"); }

O, mas conciso, pero un poco dificil de leer:

window.onload = function() {
document.getElementById("ok").onclick = function() {
alert("booyah");
};
};

© Copyright 2019 Edwin Valencia 52
Estilizado no intrusivo

function okayClick() {
this.style.color = "red"; // <-- bad style
this.className = "highlighted"; // <-- better style
}

.highlighted { color: red; }

• Codigo JavaScript bien escrito debe


contener lo menos possible CSS
• Usar JS para configurar clases CSS/IDs
sobre elementos
• Definir los estilos de las classes/IDs en tu
archivo CSS
© Copyright 2019 Edwin Valencia 53
El daño de las variables globales
var count = 0;
function incr(n) {
count += n;
}
function reset() {
count = 0;
}
incr(4);
incr(2);
console.log(count);

• Variables globales pueden ser malas; otro codigo y


otros archivos JS pueden verlos y modificarlos
• Cuantos simbolos globales son introducidos en el
codigo de ejemplo?
• 3 simbolos globales: count, incr, and reset

© Copyright 2019 Edwin Valencia 54
Encerrar el código en una función
function everything() {
var count = 0;
function incr(n) {
count += n;
}
function reset() {
count = 0;
}
incr(4);
incr(2);
console.log(count);
}
everything(); // call the function to run the code

• En el ejemplo todo el código se ha movido a una función; variables y


funciones son declaradas dentro de otra function local, no se usa variables
globales
• Ahora cuantas variables globales hay?
• 1 simbolo global: everything

© Copyright 2019 Edwin Valencia 55
El “module pattern”

(function() {
statements;
})();

• Envuelve todos codigos de tu archivo en una


funcion anonima que es declarada y llamada
inmediatamente
• Se introducen 0 simbolos globales!
• Las variables y funciones definidas por tu
codigo no podran ser manipuladas
externamente
© Copyright 2019 Edwin Valencia 56
Ejemplo Module Pattern

(function() {
var count = 0;
function incr(n) {
count += n;
}
function reset() {
count = 0;
}
incr(4);
incr(2);
console.log(count);
})();

© Copyright 2019 Edwin Valencia 57
JavaScript modo estricto

"use strict";
...your code...

• Escribir "use strict"; en la parte superior de tu


archivo JS se activa la comprobación de sintaxis
estricta:
– Muestra un error si intentas asignar a una variable no
declarada
– Impide sobrescribir las librerías clave del sistema JS
– Prohíbe algunas características de lenguaje inseguras
o propensas a errores
• ¡Siempre debes activar el modo estricto para tu
código!
© Copyright 2019 Edwin Valencia 58
JS Skeleton

<!-- in the <head> block -->


<script src="path/to/javascript/file.js“ ></script>

(function() {
window.onload = function() {
// Coloca aquí tu código
};
})();

© Copyright 2019 Edwin Valencia 59

También podría gustarte