fictizia / curso-js-para-desarrolladores-web_ed8 Goto Github PK

View Code? Open in Web Editor NEW

18.0 4.0 10.0 361 KB

FICTIZIA » Curso de JavaScript para desarrolladores web — 8ª Edición

Home Page: https://fictizia.com/formacion/curso-javascript

License: GNU General Public License v3.0

Papyrus 13.39% JavaScript 71.85% HTML 10.20% CSS 4.57%

pseudocode fictizia-course fictizia javascript js learning course course-materials

curso-js-para-desarrolladores-web_ed8's Introduction

JavaScript para desarrolladores web

Programación con JavaScript, Manejo del DOM, Aplicaciones interactivas con AJAX, vanilla JS.

El Curso de JavaScript para desarrolladores web está pensado para que sus alumnos descubran el desarrollo con JavaScript nativo y adquieran las capacidades necesarias para crear profesionalmente sitios web dinámicos a medida de las necesidades de cada proyecto.

El objetivo principal de este curso de JS es que los alumnos aprendan la bases y fundamentos del lenguaje de programación más utilizado en el mundo del desarrollo interactivo. Aprenderán todo sobre los conceptos fundamentales y la lógica de la programación, la manipulación dinámica del DOM y el desarrollo de aplicaciones interactivas usando AJAX.

En el Curso de JavaScript para desarrolladores web conocerán en profundidad además todo lo necesario para desenvolverse con soltura en un entorno de desarrollo web moderno y con un flujo de trabajo eficiente: control de versiones con Git/GitHub, depuración, fundamentos de testing...

Como metodología de trabajo durante el curso, los alumnos desarrollarán como prácticas troncales diversas aplicaciones web que servirán además de repositorio de todo lo aprendido.

Con este curso de JavaScript aprenderás a...

Desarrollar aplicaciones web a medida, eficientes y sin necesidad de librerías.
Enriquecer fácilmente cualquier proyecto web manipulando dinámicamente el DOM.
Conocer cómo trabajar con un control de versiones como Git.
Tener la capacidad de contribuir a proyectos de código abierto usando GitHub.
Serás capaz de integrarte en entornos donde se requiera el uso de frameworks de testing.
Aprender cómo crear proyectos interactivos que requieran de AJAX.

JavaScript para desarrolladores web

Sobre el Curso

Horario: Martes y Jueves de 19h a 22h
Fechas: 25/05/2017 - 18/07/2017
Observaciones:
- 1 de Junio no lectivo. Open Expo

Teoría y Recursos

Teoría	Recursos
Clase 1	Clase 1
Clase 2	Clase 2
Clase 3	Clase 3
Clase 4	Clase 4
Clase 5	Clase 5
Clase 6	Clase 6
Clase 7	Clase 7
Clase 8	Clase 8
Clase 9	Clase 9
Clase 10	Clase 10
Clase 11	Clase 11
Clase 12	Clase 12
Clase 13	Clase 13
Clase 14	Clase 14
Clase 15	Clase 15

Extras

Temario

JavaScript en la actualidad

Carga eficiente de scripts

Lógica y abstracción aplicada a la programación

Pseudocódigo

Variables

Operadores aritméticos

Funciones

Funciones con parámetros
Funciones callback
Funciones con retorno

Condicionales

Operadores lógicos
Condicionales múltiples (Switch)

Bucles

Tipos de dato

Datos numéricos
Cadenas de texto
Booleanos
Null
Undefined
Objetos

Objetos nativos del DOM

Document
Window
Navigator

Gestión del DOM con JavaScript

Getters y Setters
Agregar elementos
Eliminar elementos
Modificar Atributos y contenido
Modificación de CSS

Eventos

Arrays

AJAX

Fundamentos de la gestión asíncrona de información dinámica
Envío de datos con POST
Recepción y manipulación de datos dinámicos
JSON

Flujo de trabajo eficiente

Control de versiones con Git y GitHub
Consola y Chrome DevTools
Depuración de código
Fundamentos esenciales de testing

Herramientas

curso-js-para-desarrolladores-web_ed8's People

Contributors

Stargazers

Watchers

Forkers

vickysolo juancano88 carlosdiazgirol dhelgue jmsenior josheriff terrasa andresalbertoramos gianlucastrazzeri

curso-js-para-desarrolladores-web_ed8's Issues

Tablero Ajedrez

Original

Análisis

Código

/*
 tablero vacio
*/


var tablero = new Array(8)

for (var i = 0; i < tablero.length; i++) {
	tablero[i] = new Array(8);
}




/*
 tablero lleno

Notas:
- Torre (0 o 7)
- Caballo (1 o 6)
- Alfil (2 o 5)
- Reina (3)
- Rey (4)


*/

var tablero = new Array(8)

function morfologia (posicionEnColumna) {


	var fichas = ["torre", "caballo", "alfil", "reina", "rey", "alfil", "caballo", "torre"];
	return fichas[posicionEnColumna];
}


for (var i = 0; i < tablero.length; i++) {

	var fila = [];

	fila[0] = morfologia(i) + " blanca";
	fila[1] = "peon blanco";
	fila[6] = "peon negro";
	fila[7] = morfologia(i) + " negra";
	
	tablero[i] = fila;

}


/*
Consultar fichas
*/

function consultarFicha (posicion) {
	var columna = posicion.charAt(0); // D
	var fila = posicion.charAt(1); // 1,2,4...

	var esquemaColumna = ["A", "B", "C", "D", "E", "F", "G", "H"];
	columna = esquemaColumna.indexOf(columna);

	return tablero[columna][fila-1];
}

Presentaciones

Hola!

Usemos este espacio para conocernos un poco más... :-)

Recordad que estos issues nos permiten abrir y participar en debates, compartir recursos, plantear preguntas y muchas cosas más!

Podemos usar Markdown para salirnos del texto plano y enriquecer nuestras aportaciones.

AireMAD + Bootstrap

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <meta name="description" content="">
      <meta name="author" content="">
      <title>Calidad del Aire!!</title>
      <!-- Bootstrap core CSS -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
      <style type="text/css">
         body {
         padding-top: 50px;
         }
         .starter-template {
         padding: 40px 15px;
         text-align: center;
         }
         #contenido{}

         #lista-estaciones{
            display:none;
         }
      </style>
   </head>
   <body>
      <nav class="navbar navbar-inverse navbar-fixed-top">
         <div class="container">
            <div class="navbar-header">
               <a class="navbar-brand" href="#">Calidad del Aire!</a>
            </div>
         </div>
      </nav>
      <div class="container">

            <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                  </div>
                  <div class="modal-body">
                    <p>One fine body&hellip;</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->

            <div id="cargando-cosas">
                            <h1>Cargando...</h1>
            <img src="https://s-media-cache-ak0.pinimg.com/originals/81/6f/90/816f9071481c41c322894cd4e580a81c.jpg">

            </div>
         <div id="contenido" class="starter-template">
            <ul id="lista-estaciones" class="list-group"></ul>
         </div>
      </div>
      <!-- /.container -->
      <!-- Bootstrap core JavaScript
         ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

      <script type="text/javascript">
 

            var endpoints = ["weather", "pollen", "acustic", "pollution"];

         function AJAX (url, success){
           var xmlHttp = new XMLHttpRequest();
         
           xmlHttp.onreadystatechange = function () {
               // Chrome terminó de gestionar internamente la llamada
               if (xmlHttp.readyState === 4){ 
                 // Tengo resultados!
                 if( xmlHttp.status === 200) { // éxito!
                     success(JSON.parse(xmlHttp.responseText));                       
                 } else { // Error!
                     console.error("ERROR! 404");
                     console.error(JSON.parse(xmlHttp.responseText));
                 }
               } 
         
         
           };
         
           xmlHttp.open( "GET", url, true );
           xmlHttp.send();                
         }

        function pintarEstaciones (estaciones){
         
         /* --- menos semantico
                    for (var i = 0; i < estaciones.length; i++) {
                        console.log("estacion:", estaciones[i].nombre_estacion)
                        console.log("id:", estaciones[i].id)
                    }
         */

            var stationContent = "";

            estaciones.forEach(function(estacion){
                var buttons = ""

                endpoints.forEach(function(puntoDeEntrada){
                    console.log("estacion.datos_disponibles[puntoDeEntrada]", puntoDeEntrada, estacion.datos_disponibles[puntoDeEntrada])
                    if(estacion.datos_disponibles[puntoDeEntrada] || puntoDeEntrada === "weather" ){
                       buttons += '<a type="button" data-id="'+estacion.id+'" id="meteo-'+estacion.id+'" class="btn btn-primary pull-right button-'+puntoDeEntrada+'">'+puntoDeEntrada+'</a>'
                    }

                })

                
                var dataHTML = '<li data-lng="'+estacion.longitud_decimal+'" data-id="'+estacion.id+'" class="list-group-item">'+ estacion.nombre_estacion +' (' + estacion.id + ') '+buttons+'</li>';
  
                stationContent += dataHTML;
            })

            //DATA
            document.getElementById("lista-estaciones").innerHTML = stationContent

            //ESTILOS:
            document.getElementById("cargando-cosas").style.display = "none";
            document.getElementById("lista-estaciones").style.display = "block";

            // Eventos!
            document.getElementById("lista-estaciones").onclick = function(evento){
                console.log("evento", evento);
                console.log("evento.target", evento.target);
                //meteoModal(evento);




                if(evento.target.classList.contains('button-acustic')) {
                    acusticModal(evento)
                };
                if(evento.target.classList.contains('button-pollen')){
                    pollenModal(evento)
                };

                if(evento.target.classList.contains('button-weather')) {
                    weatherModal(evento)
                };
                if(evento.target.classList.contains('button-pollution')){
                    pollutionModal(evento)
                };


            };


            console.log("datos", estaciones)
        }

        function acusticModal (evento) {
            console.log("acusticModal yaayyyyy!!")
        }

        function pollenModal (evento) {
            console.log("pollenModal yaayyyyy!!")
        }

        function pollutionModal (evento) {
             console.log("Pidiendo pollution para", evento.target.getAttribute("data-id") , "...")
            AJAX("http://airemad.com/api/v1/pollution/" + evento.target.getAttribute("data-id"), function(pollution){
                console.log("Respuesta para", evento.target.id, ":", pollution);

                // Preparar contenido del modal
                var pollutionDetails = ""

                for(var contaminante in pollution){
                    if(contaminante !== "id" && contaminante !== "name") {
                        console.log(contaminante)
                        pollutionDetails += "<p>"+pollution[contaminante]["parameter"]+" ("+contaminante+"): "+pollution[contaminante]["values"][0]["valor"]+"</p>"
                    }
                }
                
                // Rellenar modal
                document.querySelector("#myModal .modal-title").innerHTML = pollution.id;
                document.querySelector("#myModal .modal-body").innerHTML = pollutionDetails;

                // Lnazar modal
                $('#myModal').modal('show');
            })
        }


        function weatherModal (evento) {
            //console.log(evento)

            console.log("Pidiendo meteo para", evento.target.getAttribute("data-id") , "...")
            AJAX("http://airemad.com/api/v1/weather/" + evento.target.getAttribute("data-id"), function(meteo){
                console.log("Respuesta para", evento.target.id, ":", meteo);

                // Preparar contenido del modal
                var meteoDetails = ""
                meteoDetails += "<p>descripción: "+meteo.list[0].weather[0].description+"</p>";
                meteoDetails += "<p>Max: "+meteo.list[0].main.temp_max+"ºC</p>";
                meteoDetails += "<p>Min: "+meteo.list[0].main.temp_min+"ºC</p>";
                meteoDetails += "<p>Humedad: "+meteo.list[0].main.humidity+"%</p>";
                meteoDetails += "<p>Viento: "+meteo.list[0].wind.speed+" km/h ("+meteo.list[0].wind.deg+"º)</p>";

                // Rellenar modal
                document.querySelector("#myModal .modal-title").innerHTML = meteo.id;
                document.querySelector("#myModal .modal-body").innerHTML = meteoDetails;

                // Lnazar modal
                $('#myModal').modal('show');
            })
            
        }

         
         //Inicialización del programa
        AJAX("http://airemad.com/api/v1/station", pintarEstaciones);

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

Tarea facturas

Mejora el siguiente script para poder personalizar:

Longitud total
Caracter de relleno (0, *, etc...)

function factura (numero){
	var resultado = false;
	if(numero && typeof numero === "number" && numero > 0 && numero <= 9999999){
		var numLong = numero.toFixed().length;
		var diferencia = 7 - numLong;

		resultado = "";

		while( diferencia <= 6 && diferencia > 0){
			resultado += "0";
			diferencia--;
		}

		resultado += numero;
	}
	
	return resultado;
}

console.assert(factura(1) === "0000001", "Número valido: 1");
console.assert(factura(12) === "0000012", "Número valido: 12"); 
console.assert(factura(123) === "0000123", "Número valido: 123"); 
console.assert(factura(1234) === "0001234", "Número valido: 1234"); 
console.assert(factura(12345) === "0012345", "Número valido: 12345"); 
console.assert(factura(123456) === "0123456", "Número valido: 123456"); 
console.assert(factura(1234567) === "1234567", "Número valido: 1234567"); 
console.assert(!factura(-524), "Número no valido: -524");
console.assert(!factura("-524"), "Número no valido: \"-524\"");
console.assert(!factura(99999999), "Número no valido: 99999999 (8)");

Simulación

Características:

Cada asistente recibirá el identificador de su posición en el Array.
El identificador no puede cambiar una vez reservado el asiento.
Los asistentes pueden darse de baja, y el asiento que ocupaban queda libre.
Los nuevos asistentes seran asigandos primero a asientos desocupados.
Necesitamos incluir un escenario con parámetros nulos en la función!
Necesitamos incluir un retorno boleano.

Opcional:

Verifica antes de asignar un asistente que no se registro previamente.

Testeando que es gerundio...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.20.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="https://code.jquery.com/qunit/qunit-1.20.0.js"></script>
  <script type="text/javascript">
  	//--------- CODIGO PARA TESTEAR
  	var list = ["Bob", undefined, "Louis"];

	/**
	 * Add people in the list
	 * @param {string} name Somebody's name
	 * @return {boolean} success or not 
	 */

	function add(name) {
	    if (name && typeof(name) === "string" && list.indexOf(name) === -1) {
	        var emptyPosition = list.indexOf(undefined);
	        emptyPosition === -1 ? list.push(name) : list[emptyPosition] = name;
	        return true;
	    } else {
	        return false;
	    }


	}

	/**
	 * Remove people in the list
	 * @param {string} name Somebody's name
	 * @return {boolean} success or not 
	 */

	function remove(name) {
	    // validacion por undefined??
	    var namePosition = list.indexOf(name);
	    if (name && typeof(name) === "string" && namePosition !== -1) {
	        list[namePosition] = undefined;
	        return true;
	    } else {
	        return false;
	    }
	}
  </script>
  <script>
  	// ASSERTS!!
  	
// PRE PRUEBA!
// list = ["Bob", undefined, "Louis"];

  	QUnit.module( "Funcionalidad de añadir usuarios", function(){
 		QUnit.test( "Sin Argumentos", function( assert ) {
 			list = ["Bob", undefined, "Louis"];
 			assert.notOk(add(), "Retorno erroneo");
 			assert.strictEqual(list.length, 3, "longitud de la list erronea");
 		  //assert.ok( true, "Espero true..." );
 		});
 		QUnit.test( "Remplazar un hueco vacio", function( assert ) {
 			list = ["Bob", undefined, "Louis"];
 			assert.ok(add("me"), "Retorno erroneo");
 			assert.strictEqual(list.length, 3, "Longitud de la list erronea");
			assert.strictEqual(list[1], "me", "Sustitución erronea");
 		});
 	 	QUnit.test( "Añadir un usuario al final de la list", function( assert ) {
 	 		list = ["Bob", "Louis"];
 	 		assert.ok(add("me2"), "Retorno erroneo");
 			assert.strictEqual(list.length, 3, "Longitud de la list erronea");
			assert.strictEqual(list[2], "me2", "Sustitución erronea");
 		});
  	 	QUnit.test( "Nombre existente", function( assert ) {
  	 		list = ["Bob", undefined, "Louis"];
  	 		assert.notOk(add("Bob"), "Retorno erroneo");
 			assert.strictEqual(list.length, 3, "Longitud de la list erronea");
			assert.strictEqual(list[0], "Bob", "Sustitución No deseada");
 		});
 	});
 	
 	/*
		----- RELLENA LAS PRUEBAS QUE FALTAN Y SACA TODO A FICHEROS!!! ------
 	*/
  </script>
</body>
</html>

Ejemplo Doodles!

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <meta name="description" content="">
      <meta name="author" content="">
      <title>Molan los Doodles!</title>
      <!-- Bootstrap core CSS -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
      <style type="text/css">
         body {
         padding-top: 50px;
         }
         .starter-template {
         padding: 40px 15px;
         text-align: center;
         }
         #contenido img {
         max-height: 300px;
         max-width: 300px;
         }
      </style>
   </head>
   <body>
      <nav class="navbar navbar-inverse navbar-fixed-top">
         <div class="container">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand" href="#">Doodles</a>
            </div>
         </div>
      </nav>
      <div class="container">
         <div id="contenido" class="starter-template">
            <h1>Cargando...</h1>
            <img src="https://s-media-cache-ak0.pinimg.com/originals/81/6f/90/816f9071481c41c322894cd4e580a81c.jpg">
         </div>
      </div>
      <!-- /.container -->
      <!-- Bootstrap core JavaScript
         ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
      <!--
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
      -->
      <script type="text/javascript">
 
         function AJAX (year, month, firstTime){
           var xmlHttp = new XMLHttpRequest();
         
           xmlHttp.onreadystatechange = function () {
               
               // Chrome terminó de gestionar internamente la llamada
               if (xmlHttp.readyState === 4){ 
                 // Tengo resultados!
                 if( xmlHttp.status === 200) { // éxito!
                     pintarHTML(JSON.parse(xmlHttp.responseText), {year: year, month: month}, firstTime); // Convertir JSON a Objeto                        
                 } else { // Error!
                     console.error("ERROR! 404");
                     console.info(JSON.parse(xmlHttp.responseText));
                 }
               } 
         
         
           };
         
           xmlHttp.open( "GET", "https://crossorigin.me/http://www.google.com/doodles/json/"+year+"/"+month+"?hl=es", true );
           xmlHttp.send();                
         }
         
         
         
         function validarURL (imgUrl){
           if(imgUrl.charAt(0) === "/" ){
             imgUrl = "https:"+imgUrl;
           }
           return imgUrl
         }
         function pintarHTML (datos, currentDate, firstTime){
           var prevDate = {year: currentDate.year, month: currentDate.month};
           var nextDate = {year: currentDate.year, month: currentDate.month};
         
           prevDate.year = prevDate.month <= 1 ? prevDate.year - 1 : prevDate.year;
           prevDate.month = prevDate.month <= 1 ? 12 : prevDate.month -1;   
         
           if(!firstTime){
             nextDate.year = nextDate.month >= 12 ? nextDate.year + 1 : nextDate.year;
             nextDate.month = nextDate.month >= 12 ? 1 : nextDate.month + 1;

           }
          
          var contenidoHTML =`<h1>Hello, Doodles!</h1>
          <h2>June 2017</h2>
          `;

        
         
           for (var i = 0; i < datos.length; i++) {
             contenidoHTML += `
             <div class='panel panel-default'>
                <div class='panel-body'>
                  <img src='${validarURL(datos[i].hires_url)}'>
                  <h3>${datos[i].title}</h3>
             `;

         
             for(var idioma in datos[i].translations){
               var trad = datos[i]["translations"][idioma]["share_text"];
                 if(trad) {
                   contenidoHTML += `<p>${trad}</p>`;
                 }
             }
         
             contenidoHTML += "</div></div>";
           }
         
           // Viajar en el tiempo 
           contenidoHTML += `
           <button onclick="AJAX(${prevDate.year},${prevDate.month},false)" type="button" class="btn btn-default" aria-label="Left Align">
              <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>Anterior
            </button>`;
         
         
           if(!firstTime){
             contenidoHTML += `
             <button onclick="AJAX(${nextDate.year},${nextDate.month},false)" type="button" class="btn btn-default" aria-label="Right Align">
                <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Siguiente
              </button>`;                
           }
         
           //console.log(document.getElementById("contenido").innerHTML)
           document.getElementById("contenido").innerHTML = contenidoHTML;                
         }
         
         //Inicialización del programa
          AJAX(new Date().getFullYear(), new Date().getMonth()+1, true);
      </script>
   </body>
</html>

Reto para fin de curso

Objetivo

Encuentra el error en el siguiente código:

El error se dispara en Chrome
Refactoriza todo el código
Busca la solución al recargado constante

<!DOCTYPE HTML>
<html style="display:none !important;"><head><script src="/static/111213/js/perf/stub.js" type="text/javascript"></script><link class="user" href="/resource/1492881866000/ResourcesSupportPortal/dist/css/main.css" rel="stylesheet" type="text/css" /><script src="/jslibrary/1496945620000/sfdc/NetworkTracking.js" type="text/javascript"></script><script>try{ NetworkTracking.init('/_ui/networks/tracking/NetworkTrackingServlet', 'network', '06631000004Zpz3'); }catch(x){}try{ NetworkTracking.logPageView();}catch(x){}</script><script type="text/javascript">
//<![CDATA[
try{(function(){var w=self,l,p,o;if(w&&top){for(;w!==top&&(p=w.parent)&&p!==w&&(o=p.location)&&o.protocol===(l=w.location).protocol&&(o.host===l.host||(p.document&&p.document.domain===w.document.domain));w=p);if(w!==top)throw "";}({f:function(){document.documentElement?document.documentElement.style.display="":(!this.a&&(this.a=10),this.a<1E5&&(window.sfdcRetryShowWindow=this)&&setTimeout("sfdcRetryShowWindow.f()",this.a),this.a*=2)}}.f())})();}catch(e){if(top!==self)top.location=location;else throw e;}//]]></script></head><body>
    <head>

        <meta charset="utf-8" />
        <meta content="IE=edge" http-equiv="X-UA-Compatible" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <title>Asistencia de Logitech</title>
        <link href="https://secure.logitech.com/images/favicon.ico" rel="icon" type="image/x-icon" />
        <link href="https://secure.logitech.com/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script>
            var cookieLang = '';
            var browserLang = '';  

     /*below method commented by vinod  for EADS-16829
            function checkLangOnUrl() {
                var re = /[a-z]{2,2}[_][a-z]{2,4}/gi;
                var str = window.location;
                //console.log('Base URL : ' + str);
                while ((m = re.exec(str)) !== null) {
                    return false;
                }
                return true;
            };
   */
            function buildUrl() {
                var res = '';
                var urlStr = window.location.href;
                var pathToken = '';
                if (pathToken == '') {
                    res = urlStr.split(window.location.origin, 2);
                    //console.log('window.location.origin : ' + window.location.origin);
                } else {
                    res = urlStr.split(pathToken, 2);
                }
                //console.log('pathToken : ' + pathToken );
                //console.log('RedirectPath : ' + urlStr );

                //console.log('RedirectPath0 : ' + res);
                //console.log('RedirectPath : ' + res[1]);
                if (res[1] === undefined || res[1] == '/' || res[1] == '') {
                    return '/home';
                } else {
                    return res[1];
                }
            };

            function getBrowserLanguage() {
                var lang = '';
                lang = window.navigator.userLanaguage || window.navigator.language || window.navigator.browserLanguage || '';


                //console.log('lang** :' + lang);

                browserLang = lang.replace("-", "_");

                //console.log('BrowerLanguage : '+ browserLang);
            };

            function getCookieForPage(cookieStr) {
                cookieLang = '';
                var cname = cookieStr + "=";

                if (document.cookie.indexOf("apex__LanguageCode") != -1) {

                    var ca = document.cookie.split(';');
                    for (var i = 0; i < ca.length; i++) {
                        var c = ca[i];
                        while (c.charAt(0) == '') c = c.substring(1);
                        if (c.indexOf(cname) != -1) {
                            cookieLang = c.substring(cname.length + 1, c.length);
                            //console.log(cookieStr + ' : '+cookieLang);                        
                        }
                    }
                }
            };
  // Modified by Vinod for EADS-16829
            window.onload = function() {
                  var redirectLang = 'en_us';
                getCookieForPage('apex__LanguageCode');
                getBrowserLanguage();
                
                 var isocodestatus = 'invalidcode';              
                //alert('--isocodestatus---'+isocodestatus);
                
                if (cookieLang) {
                    //console.log('Using Cookie Lang');
                    redirectLang = cookieLang;
                } else if (browserLang) {
                    //console.log('Using Browser Lang');
                    redirectLang = browserLang;
                } else {
                    //console.log('Using Default Lang');
                }
                //alert('--redirectLangupdatedBefore--'+redirectLang);
                if(redirectLang=='null' || redirectLang=='' || redirectLang==null){ redirectLang='en_us';}           
                //alert('--redirectLangupdatedAfter--'+redirectLang);
                var redirectPath = buildUrl();
                // alert('--1redirectPath1 --'+redirectPath );
                if (isocodestatus=='noisocode' || isocodestatus=='' || isocodestatus==null || isocodestatus==undefined || isocodestatus=='undefined') {
                    //alert('--entered if part--');  
     //console.log('Redirect URL :: ' + window.location.origin.replace('https://','http://') + '' + '/' + redirectLang.toLowerCase() + redirectPath);
                    //window.location.href = window.location.origin.replace('https://','http://') + '' + '/' + redirectLang.toLowerCase() + redirectPath; 
                    //console.log('Redirect URL :: ' + window.location.origin + '' + '/' + redirectLang.toLowerCase() + redirectPath);
                    if (redirectPath == '/apex/SSupportDefaultPage') {
                        //window.location.href = window.location.origin + '' + '/' + redirectLang.toLowerCase() + '/home';
                        window.location.href = window.location.protocol + "//" + window.location.hostname + '' + '/' + redirectLang.toLowerCase() + '/home';
                    } else {
                        //window.location.href = window.location.origin + '' + '/' + redirectLang.toLowerCase() + redirectPath;
                        window.location.href = window.location.protocol + "//" + window.location.hostname + '' + '/' + redirectLang.toLowerCase() + redirectPath;
                    }
                }                 
                else {
                    //alert('----three---');                   
                var langtoremove = redirectPath.split('/')[1];
                    //alert('----langtoremove---'+langtoremove);
                var finalPath= redirectPath.split(langtoremove+'/')[1];
                    //alert('----finalPath---'+finalPath);
                    if(finalPath != undefined && finalPath != 'undefined' && finalPath != null && finalPath != 'null')
                    { //alert('----three-1---');    
                            window.location.href = window.location.protocol + "//" + window.location.hostname + '' + '/' + redirectLang.toLowerCase() + '/'+finalPath;
                        } else
                        {
                            //alert('----three-2---');    
                           window.location.href = window.location.protocol + "//" + window.location.hostname + '' + '/' + redirectLang.toLowerCase() +redirectPath;
                      
                        }
                        
                        
                  
                }
            };
        </script>
        <style>
            .overlayDfPage {
                background: grey;
                opacity: 0.5;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
            }           
            .loadingDfPage {
                width: 30px;
                height: 30px;
                position: absolute;
                top: 30%;
                left: 50%;
                right: 50%;
                bottom: 70%;
            }
        </style>
    </head>
    <body>
        <div style="margin-bottom: 90%">
            <img class="loadingDfPage" src="/resource/1492881866000/ResourcesSupportPortal/dist/img/loading.gif" />  
        </div>
    </body></body></html>,

fictizia / curso-js-para-desarrolladores-web_ed8 Goto Github PK

curso-js-para-desarrolladores-web_ed8's Introduction

JavaScript para desarrolladores web

Programación con JavaScript, Manejo del DOM, Aplicaciones interactivas con AJAX, vanilla JS.

Sobre el Curso

Teoría y Recursos

Temario

curso-js-para-desarrolladores-web_ed8's People

Contributors

Stargazers

Watchers

Forkers

curso-js-para-desarrolladores-web_ed8's Issues

Original

Análisis

Código

Objetivo

Recommend Projects

Recommend Topics

Recommend Org