ARRAY – JAVASCRIPT

Array

Los array hacen parte en el examen 70-480 de la sección de Implementación de flujo del programa.

Son utilizados para almacenar muchos valores en diferentes posiciones en una sola variable.

Deberás utilizar la palabra clave new Array  para crearlo

Ejemplo:

var cars = new Array(“Saab”, “Volvo”, “BMW”);

Pero basta sin utilizarla

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

 

Algunas funciones

 

Debemos tener claro la operación de adición de elementos,

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits.push(“Lemon”);

// agrega un nuevo elemento (Lemon) a frutas

 

El método pop

Remueve el ultimo elemento de un array:

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits.pop();

El resultado de fruits sera:

Banana,Orange,Apple

 

El método push

Adición un nuevo item a un array:

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits.push(“Kiwi”);

El resultado de fruits sera:

Banana,Orange,Apple,Mango,Kiwi

 

El metodo concat concatena dos vectores,

Vector.concat(otrovector)

 

El metodo Indexof recibe dos parametros

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

var a = fruits.indexOf(“Apple”);

El resultado sera:

2

 

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”, “Banana”, “Orange”, “Apple”]; var a = fruits.indexOf(“Apple”, 4);

El resultado sera:

6

 

 

El metodo Join

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

var energy = fruits.join();

 

El resultado de energy será:

Banana,Orange,Apple,Mango

El segundo parámetro es el separador, por defecto es “,”

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

var energy = fruits.join(” and “);

El resultado de energy será:

Banana and Orange and Apple and Mango

 

 

El metodo reverse

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits.reverse();

 

El resultado de  fruits será:

Mango,Apple,Orange,Banana

 

 

El metodo slice

var fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];

var citrus = fruits.slice(1, 3);

 

The result of citrus sera:

Orange,Lemon

 

El metodo shift

Elimina el primer elemento

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits.shift();

The result of fruits will be:

Orange,Apple,Mango

 

El metodo unshift

agrega un nuevo items al principio del array:

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits.unshift(“Lemon”,”Pineapple”);

El resultado será  fruits:

Lemon,Pineapple,Banana,Orange,Apple,Mango

 

El método Filter

Devuelve un array de todos los valores en el array ages array que este en 18 o mas:

var ages = [32, 33, 16, 40];

function checkAdult(age) {

return age >= 18; }

function myFunction() {

document.getElementById(“demo”).innerHTML = ages.filter(checkAdult); }

The result will be:

32,33,40

 

El metodo Some

Valida si algún valor en el vector de ages array tiene 18 o mas:

var ages = [3, 10, 18, 20];

function checkAdult(age) {

return age >= 18;

}

function myFunction() {

document.getElementById(“demo”).innerHTML = ages.some(checkAdult);

}

El resultado sera:

true

CAMINO A MCSD

En el camino del año que vamos he puesto como metas la certificación de practicas profesionales. Mi primer acercamiento fue en el 2009 talvez 2010 cuando hice los cursos oficiales de Microsoft para presentar el examen. Nunca programe un examen y esta idea de la certificación se empezó a diluir y quedar como un sueño aplazado. Los libros oficiales adornan mi biblioteca y los certificados que me entregaron engordaron la hoja de vida, pero el curso fue un brochazo muy rápido sobre las tecnologías hoy poco vigentes.

Lo primero que hay que tener en cuenta es que la certificación de debe validar cada dos años.

Este año presente mi primera prueba el día 22-02-2017 a medio día de exame 70-480, pese a estudiar algunas semanas antes, me falto el centavito para el peso. Mi puntaje fue 698 cuando se pasaba con 700.

 

El camino hacia la MSCD ha sido actualizado a partir de septiembre del 2016

El primer examen esta el examen

70-480 Programming en HTML5 with JavaScript and CSS3

o 70-483 Programming in C#

 

luego sigue

486 ASP.NET MVC Web Application

o 357 Developing Mobile Apps

 

Lo mejor en este cambio esta en que el siguiente examen es electivo.

lo que antes era 487 Developing Microsoft Azure lo han abierto a un abanico de posibilidades.

 

Aunque Azure no me he acercado lo suficiente yo no lo descarto pero me inclino por

496: Administering Microsoft Visual Studio Team Foundation

497: Software Testing with Visual Studio

498: Delivering Continuos Value with Visual Studio Application Lifecycle management

Descarto a SharePoint

532: Developing Microsoft Azure Solution

487: Developing Microsoft Azure and Web Services

 

Esta elección dependerá también de cuanta información se encuentra disponible.

Continuare este año con el tema de la certificación, pero no solo de Microsoft porque estoy buscando algo de Scrum y o de SOA

 

 

40

La version 4.0 de uno mismo debería ser mejor, llenarte de animo, de inspiración de alegría y de felicidad. Hoy que cumplo mis 40 mirar atrás no es una opción.

Recoger los saludos de tantos amigos en el mundo, me lleno de alegría. Cada uno de los grupos de WhatsApp me saludaron por mi cumpleaños, mi hermana desde Brasil, primos, amigos de empleos anteriores y de este (en octubre 2016 cumplí 5 en el actual), compañeros de colegio, de todos los que esperaba saludos recibí. Que felicidad me dio.

Google también me tuvo en cuenta puso en mi navegador una imagen para mi sesión.

Mi esposa y mi hija, pero sobre todo mi hija era la mas emocionada de mi cumpleaños.

Cada año he tenido retos y la idea de este blog, que ahora miro con perspectiva, nunca fue clara, pero el año pasado tenia objetivos atléticos y de runnning.

Este año tengo objetivo de certificaciones. Siempre fue un sueño aplazado, pero ahora este año voy a intentar certificarme en Microsoft y en Scrum.

Otro día mirare hacia atrás de lo que es mi vida y lo que me imaginaba que iba ser, otro día hare la retrospección, en otras palabras aplazare deprimirme para después, hoy quiero sentirme bien, sentirme contento y sentirme saludado.

Debo también escribir mas en este blog. No importa que sea tan diversificado. Pero lo voy a intentar.

Usando iFrames

Los iFrame presentan la fragilidad de poder ser atacados. El atributo sandbox debe utilizarse para restringir que datos pueden colocarse en un iFrame.

El atributo sandbox puede tener los siguientes valores posibles:

“” aplica todas las restricciones.

allow-same-origin

allow-top-navigation

allow-forms

allow-script

 

OBJETO XMLHttpRequest

Consideraciones que se deben tener en cuenta para usar el objeto XMLHttpRequest.

JavaScript provee este objeto para el manejo de datos, esto es a través de un webservices , REST API o algún proveedor de servicio de datos.

El formato de este objeto es XML y sus eventos son soportados Sincrónica y Asincrónicamente.

 

Enunciare los eventos:

Onreadystatechange

Ontimeout

 

Enunciare los Métodos:

Abort

getAllResponseHeaders

Send

setRequestHeader

Open

 

Enunciare algunas propiedades, basadas en algunas preguntas que encontré por ahí para el examen 70-480

Status

readyState

Response

responseText

 

Un ejemplo típico de Open es

Var xReq = new XMLHttpRequest();

xReq.Open(“GET”, “myXMLData.xml”, false);

xReq.send(null);

 

para tener en cuenta el método Open no hace ninguna solicitud al servidor. Cuando las credenciales son pasadas al servidor el únicamente responde con un código 401 respuesta de seguridad del servidor.

if (xReq.readyState == 4  ){

 if (xReq.status == “200”){

                $(“#results”).text(xReq.response);

} else {

$(“#results”).text(xReq.response);

}

}

 

Esta puede ser el contenido de una función que devuelva el cambio de estado

El 4 significa que la solicitud está completa, se coloca en el readyState

El 200 que el estado de la solicitud es exitoso y entonces se podrán procesar los datos.

USANDO WEB WORKER API

Los web workers son utilizados para desarrollar aplicaciones multihilos en JavaScripts.

JavaScript es un ambiente mono – hilo, cada ejecución en JavaScript es encolada para ejecutarse sincrónicamente. Esto puede que no se note, pues la mayoría de las aplicaciones requiere una potencia de procesamiento no muy exigente en los equipos clientes.

El API Web Worker permite especificar que parte de trabajo debería ser procesada en su propio hilo. Esto tiene sus ventajas y sus desventajas.

El Api de Web Worker API esta basado en el FrameWork messaging de JavaScript. Esta disponible desde el global namespace y se crea de la siguiente manera.

 

Var webWorker =  new Worker(“workercode.js”)

 

Funcionalidades soportadas

 

Método Descripción
postMessage Inicia el proceso worker. Espera un simple parametron que contiene los datos para pasar al hilo. Se puede suministrar una cadena vacia
terminate Detiene el proceso worker
onmessage Especifica la function para el hilo de worker
onerror Especifica una función para el manejo de respuestas con error.

 

webWorker.postMessage(“ ”);

 

webWorker.terminate();

 

Despues que el Worker complete el proceso y los resultados necesitan ser procesados, la funcion onmessage es llamada desde el Worker.

 

webWorker.onmessage = function(ent){…}

 

En alguna parte donde el resultado debe devolverse a la aplicacion se utiliza el metodo postMessage

 

onmessage = function(e){

self.postMessage(result);

}

 

Note que se utiliza la keyword self esto es debido a que el worker corre en su propio contexto.

Desventajas de los web Workers

Parametros

El método acepta un parámetro para pasar datos al worker, este parámetro es string y puede ser serializable con objetos nativos como Objetos JSON o XML. No puede ser una función.

 

Numero de Workers

Aunque no existe un limite de cuantos workers se pueden utilizar  o crear al mismo tiempo, el numero de trabajadores es algo a lo que hay que prestar atención.

La creación de Worker es pesada, cada Worker crea un hilo al nivel del sistema operativo y esto debería manejarse adecuadamente.

Acceso DOM

Los workers operan en su propio contexto global, significa que no tienen acceso al DOM de la página que los invoca. El DOM no puede ser manipulado desde un proceso Worker.

Tampoco tienen acceso a objetos Windows, document o cualquier objeto padre.

Subworker

Un Worker puede crear otros workers. Sin embargo conocer el total de subworker que deben ser creados se vuelve muy importante.

Configuración de tiempos e intervalos.

Es posible especificar un intervalo en el background usando los métodos setTimeout or setInterval.

 

Var work = new Worker(“workerFile.js”);

setTimeout( function() {

work.postMessage(“ “);

}, 3000);

Este proceso corre despues de 3 segundos

 

Var work = new Worker(“workerFile.js”);

setInterval( function() {

work.postMessage(“ “);

}, 3000);

Este proceso corre cada 3 segundos.

 

IMPLEMENTANDO CALLBACK CON UNA FUNCION ANONIMA

El concepto de Callback es la base de cómo trabajan los eventos. Este es el mecanismo en el que una operación asincrónica retorna a una petición una respuesta. En los lenguajes tradicionales un callback se consigue pasando un puntero a una función a otro proceso para que cuando termine o se encuentre en una etapa especifica del proceso la función advierta al llamador del estado o de algún tipo de ordenamiento.

Los Web Services asincrónicos son ejemplos de operación que se complete devolviendo datos al llamador. El mismo principio se aplica en JavaScript.

En JavaScript, las funciones se consideran objetos y a menudo son vistos como ciudadanos de primera clase. Esto significa que una variable puede ser asignado a una función o una función puede ser pasada a otra como un parámetro. Una función es considerada anónima cuando no tiene un nombre.

$(“#Button1”).click(function () {  … })

 

La sintaxis es la siguiente

function ( n,n,…,n) {body };

Debe comenzar con la palabra clave “function” y unos paréntesis para colocar los parámetros.

Luego sigue el cuerpo de la función.

La única diferencia entre una función nombrada y una anónima es la parte del nombre en la firma de la función, las funciones anónimas son un concepto importante cuando tratan con callbacks.

Cuando se trabajan con un API, ya sea propia o de terceros, la funcionalidad a menudo incluye el uso de Callback. En ejemplos se utiliza JQuery con AJAX.

 

$.ajax({

                url: searchPath,

                cache: false,

                dataType: “xml”,

error: function(hdr, num, txt){…}

success: function(data) { ….}      

});

En este ejemplo las propiedades error y success te permiten especificar que acción tomar si se completo la petición exitosamente o no.

Las funciones Callback también se utilizan en forma de un parámetro de otra función.

XMLHttpRequest (XHR)

Es un DOM API que puede ser utilizado por JavaScript para transmitir xml y otros datos de texto entre un servidor web y un browser.

Este tipo de arquitectura AJAX no debe confundirse con XMLDomainRequest (XDR) diseñado por microsoft

el cual es una forma liviana de usar xmlhttpRequest(XHR) sin utilizar XML-RPC.

Los datos retornados de una llamada a XMLHttpRequest a menudo serán proporcionados por el back-end de una base de datos. Ademas pueden utilizarse para obtener datos en otros formatos como HTML, JSON o texto plano.

 

Methods

abort() Cancela la peticion actual.
getAllResponseHeaders() Devuelve el conjunto completo de  HTTP headers como un  string.
getResponseHeader(headerName) Devuelve el valor especifico HTTP header.
open(method, URL) open(method, URL, async) open(method, URL, async, userName) open(method, URL, async, userName, password) * El method parameter puede tener valores de GET, POST, HEAD, PUT, DELETE, o la variedad de otros HTTP methods listados en la W3C specification.[2] * El URL parameter puede contener relatica o completa URL. * El async parameter especifica si el request debe manejarse como asincronico o no. send(content) Envia el request. El contenido puede ser string o una referencia al documento.
setRequestHeader(label, value) Agrega un label/value pair al HTTP header para se enviado. Properties onreadystatechange Especifies una referencia de un evento manejador para un evento que dispara cada cambio de estado

readyState Devuelve el estado de los objetos de la siguiente manera: * 0 = uninitialized – open() no ha sido llamado. * 1 = open – send() no ha sido llmado. * 2 = sent – send() ha sido llamado, headers y status estan disponibles. * 3 = receiving – Downloading, responseText contiene datos parciales (No implementado en IE [3]) * 4 = loaded – Done. responseText Retorna el response como un string.
responseXML Retorna el response como XML. Esta propiedad retorna un XML document object, el cual puede ser examined y parsed usando W3C DOM node tree methods y propiedades.

responseBody Retorna el response como una cadena binary encoded. Esta propiedad no hace parte del nativo XMLHttpRequest. Para que esta propiedad este disponible, el XHR object debe ser creado con componente de ActiveX. A JScript example: if(typeof ActiveXObject != “undefined”) { xmlhttp = new ActiveXObject(“MSXML2.XMLHTTP”); xmlhttp.open(“GET”, “#”, false); xmlhttp.send(null); alert(xmlhttp.responseBody); } else { alert(“This browser does not support Microsoft ActiveXObjects.”) } status Retorna el HTTP status code como un numero(ejemplo 404 for “Not Found” y 200 para “OK”). Algunos status codes basados en la red (ejemplo 408 for “Request Timeout”) pueden causar errors para ser tratados en Firefox si el campo de estatus es accesado[4]. Si el servidor no responde IE devuelve un Error Code (ejemplo 12029 para “cannot connect”).
statusText devuelve el status como una cadena (ejemplo “Not Found” o “OK”).

IMPLEMENTANDO UN LAYOUT CON UN FLEX BOX MODEL

El Flexbox es un constructor de CSS3 que provee la forma de colocar elementos que fluyen, esto significa que los elementos van de izquierda a derecha o  en Horizontal, de arriba abajo en vertical.

Debes usar un div de la siguiente forma:

<div id=”flexbox”>

</div>

 

#flexbox {

display: flexbox;

border: 1 px solid black;

margin-top: 100px;

min-height: 15px;

box-orient: horizontal;

}

 

Otro ejemplo

<div id=”flexbox”>

<p>child 1</p>

<p>child 2</p>

<p>child 3</p>

</div>

Tiene también la funcionalidad de proveer la capacidad de espacio especifico a cada elemento hijo.

Por ejemplo si se requiere que una caja ocupe el 15% y otra el 25% y el último el espacio que queda debería utilizar la propiedad flex.

 

Tip de examen:

You are developing a web page that will be divided into three vertical sections. The main content of the site will be placed in the center section. The two outer sections will contain advertisements.

You have the following requirements:

-The main content section must be set to two times the width of the advertising sections.

-The layout must be specified by using the CSS3 flexible box model.

 

You need to ensure that the visual layout of the page meets the requirements.

Which CSS3 property should you use?

box-flex

IMPLEMENTACION DE MANEJO DE EXCEPCIONES EN JAVASCRIPT

Que un programa pueda tratar con errores y condiciones desconocidas es critico en el desarrollo de cualquier software. En JavaScript también sucede, vamos a revisar las estructuras para el manejo de errores provistas para estas situaciones.

Los tradicionales Try…Catch….Finally usados también en C# y en otros lenguajes de programación, los encontramos también en JavaScript

Otra parte importante es revisar la presencia de valores nulos.

Otra buena practica es el manejo de error personalizado esto mejora la devuelta de información a los programas o librerías.

Iniciaremos con el análisis de los bloques try…catch….finally, cuando estos no están implementados simplemente el mensaje de error es tratado como una excepción no manejada, provocando que el navegador se rompa o muestre un mensaje extraño al usuario.

Tener en cuenta el ámbito que aplica en cada bloque, es decir si una variable se declara en el bloque Try no será accesible desde el Catch. La recomendación es declarar las variables por fuera de los bloques.

Comúnmente se utiliza la forma de crear excepciones personalizadas o propias, para esto, en las condiciones que se requiera, se utiliza: throw new error(id, message.toString()) esto crea la excepción a partir de los dos parámetros del objeto Error.

/* * Creates a ZipCode object. *

* Accepted formats for a zip code are:

*    12345

*    12345-6789

*    123456789

*    12345 6789

*

* If the argument passed to the ZipCode constructor does not

* conform to one of these patterns, an exception is thrown. */

function ZipCode(zip) {

zip = new String(zip);

pattern = /[0-9]{5}([- ]?[0-9]{4})?/;

if (pattern.test(zip)) {

// zip code value will be the first match in the string

this.value = zip.match(pattern)[0];

this.valueOf = function() {

return this.value      };

this.toString = function() {

return String(this.value)      };

} else {

throw new ExcepcionFormatoCodigoPostal(zip);

}

}

function ExcepcionFormatoCodigoPostal(valor)

{

this.valor = valor;   this.mensaje = “no conforme con el formato esperado de código postal”;

this.toString = function() {

return this.valor + this.mensaje   };

}
Revisar los valor nulos 

Otra forma de prevenir muchos errores es la validación de los valores nulos antes de se utilizados.

Cuando las variables nos numéricas, pero pasaron como parámetro por ejemplo a una función, pero con valor en nulo, el resultado para JavaScript en este caso sera un NaN (not a number) que es un tipo especial de JavaScript.

Tip de examen

Las propiedades del objeto excepción son mensaje, numero y nombre.

« Older Entries