Categoría: CURSO JAVASCRIPT

10.1 El Objeto Fecha

Posted on by Eduardo

E

Este objeto nos permite trabajar con fechas y horas. El constructor de este objeto se identifica por la palabra reservada Date.

A continuación los posibles parámetros para este constructor:

new Date();

Ejemplo:

var FechaActual = new Date();

Es la forma mas compacta y sencilla para saber la fecha y hora actual.

new Date(Cadena_Fecha);

Ejemplo:

var FechaEspecifica =  new Date(2019,4,23,20,23,18,2);

Como parámetro se especifica el formato, en el orden año, mes, dia, hora, minutos, segundos, milisegundos.

new Date(Milisegundos);

var Fecha = new Date(1455398996795);

Se especifica la cantidad de milisegundos que se agregaran a la fecha actual.

10 – Objetos

Inicio del curso

11 – Eventos

Loading

12. El Objeto THIS

Posted on by Eduardo

La estructura en los objetos de JavaScript se define con propiedades y métodos (funciones dentro del objeto), recordemos que todo dentro de esta estructura se definen con notación de dos puntos o pares.

En el objeto global this tiene el valor de la referencia de windows, es decir hace referencia a este objeto directamente.
Dentro de los objetos se interpreta como el valor del mismo objeto, pero no hay que confundir cuando se escriben varios métodos dentro del mismo, ya que dependiendo de donde se defina el this es el valor que se tomara, ya sea especificado por un método o del mismo objeto en general

A continuación un ejemplo:

var datosPersona= {
    nombre: "Laura Teresa",
    apellidos: "Gonzalez Perez",
    edad: "22"
    imprimirDatosPersona: function(){
        console.log("Nombre completo: "this.nombre + " " + this.apellido + ", Edad:" + this.edad + " años");//------>1 hacer referencia al objeto en general
    },
    direccionPersona:{
        pais: "Mexico",
        estado: "Veracruz",
        obtenerResidencia:function(){
            var self = this;//----------->2
            var especificarDireccion = function(){
                console.log(self);
                console.log("El pais donde radica es: " + self.pais +  " 
 en el estado de : " + self.estado);
            }
            especificarDireccion();
        }
    } 
};
persona.imprimirDatosPersona();
persona.direccionPersona.obtenerResidencia:function();

En la cuarta propiedad del obejto datosPersona, this esta dentro de la sección del método imprimirDatosPersona lo cual hace referencia al objeto en general, es por eso que especificamos this.nombre y apunta a la primer propiedad del objeto.

En el siguiente escenario se define una variable como función llamada especificarDireccion () y se llama fuera de la misma, debemos notar que para este caso this tendrá el valor del objeto global (windows) ya que no se define como una propiedad del objeto, por lo cual creamos una variable que apunte al this que necesitamos seria desde el motodo obteneraResidencia la llamamos self aunque el nombre podría ser cualquiera, despues de esto podemos llamar self con la referencia al valor correcto.

11 – Eventos

Inicio del curso

Loading

11. Eventos

Posted on by Eduardo

Los eventos son acciones que hace que se dispare una función. Prácticamente el evento puede ser una acción cualquiera por ejemplo el evento clic, focus, etc. a continuación se aliste los eventos para el uso en Javascript:

Hay varias formas para utilizar estos eventos:

Del lado del HTML:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Eventos en JavaScript</title>
    </head>
    <body>
        <input type="text" onfocus="Evento01()">
        <button onclick="Evento01()">Aceptar</button>
        
    </body>
</html>



<script>
    function Evento01()
    {
        console.log("Accion del evento");
    }
</script>

Utilizando los eventos directamente desde los controles.

Otra forma es asignando un Id al control

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Eventos en JavaScript</title>
    </head>
    <body>
        <input type="text" id="TxtPrueba">        
    </body>
</html>



<script>
    function Evento01()
    {
        console.log("Accion del evento");
    }

     var ObjetoEvento = document.getElementById("TxtPrueba");
     ObjetoEvento.addEventListener("keypress", Evento01);
</script>

No se utiliza la palabra ya que ‘on’ se utiliza del lado del HTML.

10.1 – El Objeto Fecha

Inicio del curso

12 – El Objeto THIS

Loading

10.Objetos

Posted on by Eduardo

Javascript esta diseñado en un paradigma basado en objetos. Un objeto es una colección de propiedades que lo definen como tal.

Los objetos en Javascript se pueden comparar con objetos de la vida real, por ejemplo: una mesa un objeto tangible, tiene propiedades como medidas, color, etc. que la definen. De esta misma forma en Javascript se pueden caracterizar los objetos.

Los objetos tiene propiedades asociadas que son lo mismo que las variables comunes de JavaScript. Las propiedades de un objeto definen las características de un objeto. La sintaxis para identificar cada una de ellas es

Id_NombreDelObjeto.Propiedad

Existen 3 formas para definir un objeto:

<script>
    var Taza =  {Taza.color = "blanca",Taza.peso = "350 gramos",Taza.volumen = "250 cm3"};
</script>

Es la forma básica pero también la mas sencillas, ya que las propiedades del objeto se definen entre corchetes únicamente separados por comas(,)

<script>
    var Taza=  new Objeto();
    Taza.color = "blanca";
    Taza.peso = "350 gramos";
    Taza.volumen = "250 cm3";
</script>

En esta forma utilizamos el operador “new” para crear un instancia de un tipo de objeto a partir de una función

<script>
      function Taza(color, peso, volumen) 
       {
          this.Color= color;
          this.Peso= peso;
          this.Volumen= volumen;
        }
       var clasificar = new Taza("blanca", "350 gramos", "250 cm3"); </script>

Para esta forma se crear un objeto haciendo una función.

9.1 – Funciones de los arreglos

Inicio del curso

10.1 – El Objeto Fecha

Loading

9.1Funciones de los arreglos

Posted on by Eduardo 
var arreglo = [5,4,3,2,1];
console.log(arreglo);
console.log(arreglo[0], arreglo[4], arreglo[5]);

.reverse: invierte el  orden del arreglo

arreglo.reverse();
console.log(arreglo);

.map(): Nos permite ejecutar una función con cada uno de los componentes del arreglo sin necesidad de recorrer con un bucle. En el siguiente ejemplo no solo ejecutamos map, si no regresamos el valor del elemento ya multiplicado al arreglo.

arreglo =  arreglo.map(function(elem){
        elem *=elem;
        return elem;
});
console.log(arreglo);

.join: convierte todas las posiciones del arreglo en una cadena de texto, al no especificar parámetro para la función. El carácter que se especifique como parámetro para la función sera el que separara a los elemento que componen el arreglo, al no especificar ninguno la función separa los elementos con una coma.

arreglo = arreglo.join(";");
console.log(arreglo);

.split: Corta el arreglo con el carácter que se especifica como parámetro, al no especificar ninguno solo regresa una cadena.

arreglo = arreglo.split(";");
console.log(arreglo);

.push: Javascript permite agregar un elemento extra al arreglo son necesidad de definirlo inicialmente como se haría en algún otro lenguaje de programación.

arreglo.push("6");
console.log(arreglo);

09 – Arreglos

Inicio del curso

10 – Objetos

Loading

9. Arreglos

Posted on by Eduardo

Colección de datos similares. Se reconoce como un arreglo por que se presenta con un par de corchetes [ ].

var arreglo =  ["a","b","c","d","e","f","g"];
console.log(arreglo);

Los elementos de un arreglo comienzan desde el numero cero es decir la primera posición del arreglo es cero y así de forma ascendente para cada uno de los elementos:

console.log(arreglo[3]);

Si se especifica una posición que no existe en el arreglo es decir que esta fuera de los limites del mismo o bien conocido como desbordamiento de arreglo, JavaScript a diferencia de otros lenguajes de programación no regresara un error si no el valor undefined:

console.log(arreglo[2] arreglo[4] arreglo[16]);

Una vez declarado el arreglo , al hacer referencia a el en seguida escribimos un punto lo cual nos mostrara un listado de todas las funciones que son prototipos del mismo.

08 – InnerHTML

Inicio del curso

9.1 – Funciones de los arreglos

Loading

8. InnerHTML

Posted on by Eduardo

InnerHTML  es una propiedad que nos permite leer un dato o asignarlo al contenido de un div o bien, del mismo control. Nos facilita la asignación de valores a controles.

Ejemplo 1:

<html> 
<body> 
    <div id="DivContenedor"><p>Texto inicial</p></div> 
    <p>Clic para tomar texto inicial </p> 
    <button onclick="AccionInnerHTML()">Try it</button> 
    <p id="TextoResultante"></p> 
 <script> 

function AccionInnerHTMLn() 
{ 
    var ConseguirDatoInicial = document.getElementById("DivContenedor").innerHTML;//Leer valor 
    document.getElementById("TextoResultante").innerHTML = "El texto inicial es: " + ConseguirDatoInicial;//Asignar valor 
} 
</script> 
</body> 
</html>

La sintaxis es:

Leer valor de control:

HTMLElementObject .innerHTML

Asignar valor a control:

HTMLElementObject .innerHTML = Texto

En el ejemplo  utilizamos la propiedad document.getElementById para tomar la referencia del id del contenedor.

Ejemplo 2:

<html>
<body>

<div id ="DivContenedor"><h1>Texto inicial</h1>

<script>
    var element = document.getElementById("DivContenedor");
    element.innerHTML = "Texto final";
</script>

</body>
</html>

07 – Método getElementById

Inicio del curso

09 – Arreglos

Loading

7.Método getElementById

Posted on by Eduardo

Es un método que permite seleccionar un elemento del documento por medio del valor del atributo id que se le haya asignado.
La sintaxis es importante ya que si hace distinción, tanto en el atributo id del objeto como en el método.
La sintaxis es la siguiente:

document.getElementById('id');

Ejemplo:

<html>
<head>
   <title>Método </title>
</head>
<body>
   <p id="DivBotones">Seccion Ocultar/Mostrar</p>
   <button onclick="Accion('Ocultar');">Ocultar</button>
   <button onclick="Accion('Mostrar');">Mostrar</button>
</body>
</html>
function Accion(Tipo) {
   var elem = document.getElementById('DivBotones');
    if (Tipo == "Ocultar")
       elem.style.display = 'none';
    else 
       elem.style.display = '';
}
Elegido por su atributo id
 Elegido por su atributo name Elegido por el tipo de etiqueta HTML (tag)

document.getElementById(‘valorId’);
document.getElementById (menu1);
document.getElementsByName(‘valorName’);
document.getElementsBy Name(‘peticionDatos’);
document.getElementsByTagName(‘valorTag’);
document.getElementsByTag Name(span);

6.3 – Condicionales

Inicio del curso

08 – Inner HTML

Loading

6.2.Estructura de ciclos

Posted on by Eduardo

Un ciclo es una instrucción muy útil si sabemos como utilizarla y estructurarla, ya que nos permite ejecutar  funciones varias veces; Si bien estos ciclos o también llamados bucles son utilizados para determinar de una forma dinámica en lugar de agregar la función n numero de veces.

Comencemos con el ciclo For, su estructura es

for (
Se inicializar variable que sera el contador, solo pasa por aqui al iniciar el ciclo var a =0;
Se determina el numero de veces que se ejecutara el bloque de código  a< 10;
Se ejecutara cada vez  que termine el bloque de código (por lo regular se utiliza para aumentar o disminuir segun lo que se quiera hacer con el contador del cliclo a++)
)
{
   //Bloque de codigo
}

Ejemplo 1:

for (var a = 0; a< 10; a++)
{
   //Bloque de codigo
   console.log(a + "Hola mundo");
}

Ejemplo 2:

var x = 0, Medida;
var Dias= ["L", "M", "Mi", "J", "V"];
Medida = Dias.length;
 for(; x < Medida; x++)
{
   console.log(Dias[x]);
}

Ciclo For/in

Este tipo de ciclo es determinado por la cantidad de datos, que contiene un objeto por ejemplo un arreglo, una matriz, etc.

var Equipo = {"Karen", "Eduardo", "Ana", "Maria", "Jorge"}; 
var c; 
for (c in Equipo ) 
{
  console.log(Equipo[c]);
}

Ciclo While

Este tipo de Ciclos se ejecutan siempre y cuando una condicion especifica sea verdadero (true)

La estructura es:

while (Condicion) 
{
  // Bloque de codigo
}

Ejemplo:

var i = 0;
while (i < 20) {
  console.log(i);
  i++;
}

Ciclo Do While

Variante del ciclo While, este tipo de ciclo primero ejecuta el bloque de código sin importar si la condición es verdadera, en seguida repetirá siempre y cuando la condición se cumpla.

La estructura es:

do 
{
  // Bloque de codigo
}
while (condicion);

Ejemplo:

var z = 11;
do {
   console.log("Contador en " + z);
  z++;
}
while (z < 10);

El resultado seria:

Contador en 11.

6.1 – Creacion de Funciones

Inicio del curso

6.3 – Estructura de condicionales

Loading

6.3.Estructura de condicionales

Posted on by Eduardo

Es importante recordar que la ejecución de código en JS es lineal, es decir linea a linea en el orden en el que se lee.

Para controlar este flujo se utilizan:

  • Ciclos o bucles,
  • Condicionales,
  • Palabras reservadas para romper el flujo
  • De control de excepciones.

En este caso explicaremos las condicionales.

Las condicionales son palabras reservadas que te ayudan a crear un ambiente para que el código tenga un flujo mas especifico y eficiente, la mas básica es el if, la estructura es la siguiente:

if(Condicion)
{
    //Bloque de codigo
}

Es importante especificar que si para la condición solo se ejecutara una instrucción se pueden omitir las {}, aunque no significa que no se pueda llevar aun si es solo una. Si es un bloque de instrucciones si debe de llevar.

If en ocasiones esta acompañado con la else, ejemplo:

if(Condicion)
{
    //Bloque de codigo que cumple la condicion
}
else
{
    //Bloque de codigo que no cumple con la condicion
}

Pero tengamos en cuenta que if y else representan 2 opciones de ejecución, pero que sucede si se requieren mas condiciones. Otras complemento opcional de if es else- if, ejemplo:

if (Validacion.includes("1 -"))
           direct = "/system?D=5PCuXo4GT2pkgfji1q1se47SnQu8QxM/JRPN";
else if (Validacion.includes("2 -"))
            direct = "/system?D=5PCuXo4Gr8r9T2pkgfji1q7SndjE1RkWiiZv";
else if (Validacion.includes("3 -"))
            direct = "/system?D=FVqQLVdRAMf5r72s0kpWzWkSrOJQ==";
else if (Validacion.includes("4 -"))
            direct = "/system?D=FVqQLVdRAM3gert58a2fUZNMS1DKA=58=";
else 
    direct = "/system?D=a";

Explicando el ejemplo anterior, podemos decir que la estructura de if, incialmente es la

If(Condicion)// Si Condicion se cumple
{
   //Bloque de código
}
else if (Condicion2) //Si Condicion no se cumple, se revisa si Condicion2 se cumple
{
   //Bloque de código
}
else if (Condicion3) //Si Condicion y Condicion2 no se cumple, se revisa si Condicion3 se cumple
{
   //Bloque de código
}
.
.
.
.
else //No se cumple ninguna de las anteriores 
{
   //Bloque de código
}

Condiciones

La sección de la condición es fundamental, para esto hacemos énfasis que se pueden utilizar e interpretar lo que decimos con palabras en una linea de código.

Dato booleano: es decir datos que solo contienen los valores true o false  para utilizarlo en condicion es:

// Si se comprueba que el usuario se autentico muestra una lista de clientes si no devuelve error
function Revisar(Autenticacion)
{
     if (Autenticacion)//true
       { 
          ListadoCliente();
       }
       else //false
       {
          console.log("No se puede Listar");
       }
}

Dato Numérico/Texto:

  • Igual: == ó .equals()
  • Menos que: <
  • Menos o igual que: <=
  • Mayor que: >
  • Mayor o igual que: >=
  • Distinto: !=
if(Dia == "Lunes")
{//Bloque de codigo}
else if (Dia != "Viernes")
{//Bloque de codigo}
//--------------------------------------
if(Conteo < 10)
{//Bloque de codigo}
esle if(Conteo <= 30 )
{//Bloque de codigo}
else if(Conteo > 100)
{//Bloque de codigo}
else if(Conteo >= 50)
{//Bloque de codigo}
  • Disyunción ó: ||
  • Conjunción y: &&

También se utilizan para agregar varias partes una condición y así ser mas específicos para cada acción de código.

if (Dia == "01" && Mes == "Enero")
{
    console.log("Feliz año nuevo");
}
if ((Dia == "24" || Dia == "23")&& Mes == "Diciembre")
{
   Console.log("Se acerca la Navidad");
}

Las condicionales son una forma de organizar la funcionalidad del código, para que según los casos de uso, pueda funcionar y responder de una manera mas eficiente y ordenada.

Utilizando la lógica y según el tipo de dato con el que interactuemos podamos construir condiciones para cada una de las situaciones.

6.2 – Ciclos

Inicio del curso

07 – Método getElementById

Loading