Índice

TIPS:

1. Utilizar un editor de código profesional

2. Aprendizaje libre

MÉTODOS:

TIPS:

1. Utilizar un editor de código profesional

Existen editores muy completos que facilitan el desarrollo de software debido a sus funcionalidades extras que incluyen, por ejemplo, una terminal, variedad de plugins para ordenar el código, poner iconos a las extensiones de los archivos, etc. Entre los editores más usados para desarrollo web y móvil se encuentran:

• Visual Studio Code

• Sublime Text

• RJ TextEd

• Light Table

• Netbeans

• Brackets

• Komodo Edit

• Atom

• WebStorm

Subir :point_up:

2. Aprendizaje libre

La academia w3schools ofrece tutoriales gratis en su página web https://www.w3schools.com/js/default.asp que puede incluir una certificación pero ya pagada.

Subir :point_up:

MÉTODOS:

1. Entrada y salida de datos

• console.log()

Imprime mensajes, operaciones, variables, etc. A través de la consola web o interprete de javascript.

Script:

Consola:

Subir :point_up:

• alert()

Despliega una caja de texto en el navegador.

Script:

Navegador:

Subir :point_up:

• document.Write()

Esta funcionalidad modifica directamente el index.html del proyecto. Si index.html ya fue cargado completamente, antes de ejecutarse el script, el document.write borrará todo el index.html y lo sustituirá completamente con su contenido. Si el script se ejecuta antes que se complete la carga del index.html, entonces el contenido del document.write solo se añadirá al contenido del index.html.

• Document.write antes de que se cargue completamente el index.html

Html:

Navegador:

• Document.write ejecutado una vez completada la carga del index.html.

Html:

Script:

Navegador con carga completa del HTML:

Resultado de ejecutar el document.write después de la carga completa del Html:

Subir :point_up:

• confirm()

Muestra una ventana con las opciones de aceptar o cancelar. Estas opciones pueden almacenarse en una variable: si la opción escogida es aceptar, devuelve un valor de true; si la opción escogida es cancelar, devuelve un valor de false.

Html:

Script:

Navegador – Confirmar (Aceptar):

Navegador – Confirmar (Cancelar):

Subir :point_up:

• prompt()

Esta funcionalidad permite capturar texto desde una ventana similar a la del alert y confirm. Siempre devuelve valores tipo string a menos que se cancele la opción solo ahí será tipo object.

Script:

Navegador:

Consola:

Subir :point_up:

2. typeof

Devuelve el tipo de dato de una variable o de una función. Puede devolver los valores: string, number, boolean, undefined, function y object.

Script:

Subir :point_up:

3. Métodos para Strings

• indexOf()

Encuentra la posición de un caracter en un string.

Script:

Consola:

Subir :point_up:

• slice()

Este método devuelve parte de un string.

Script:

Consola:

Subir :point_up:

• replace()

Reemplaza parte de un string con otro string.

Script:

Consola:

Subir :point_up:

• toUpperCase()

Transforma las letras de un string a mayúsculas.

Script:

Consola:

Subir :point_up:

• toLowerCase()

Transforma las letras de un string en minúsculas.

Script:

Consola:

Subir :point_up:

• split()

Transforma un string en un array a partir de un carácter o espacio de división.

Script:

Consola:

• Se puede limitar el tamaño del nuevo array.

Script:

Consola:

Subir :point_up:

1. Métodos para Arrays

• pop()

Elimina el último elemento de un array.

Script:

Consola:

Subir :point_up:

• push()

Agrega un nuevo elemento al Array.

Script:

Consola:

Subir :point_up:

• splice()

Elimina uno o varios elementos de un Array. Splice(posición_del_item,numero_de_elementos_a_borrar).

• Eliminar un elemento.

Script:

Consola:

• Eliminar dos o más elementos.

Script:

Consola:

Subir :point_up:

• sort()

Ordena alfabéticamente un array.

Script:

Consola:

Subir :point_up:

• join()

Transforma un array en string.

Script:

Consola:

• Se puede incluir un string adicional dentro de la transformación.

Script:

Consola:

Subir :point_up:

5. Métodos para objetos

• JSON.parse()

Transforma un string en un objeto javascript. Esta función recibe dos parámetros: el string y una función. La función es opcional y sirve para realizar cálculos u otras operaciones entre los datos del nuevo objeto por ejemplo:

Script:

Consola:

}

Subir :point_up:

• JSON.stringify()

Transforma un objeto javascript en un string. Esta función recibe tres parámetros: el objeto, una función o array y los espacios antes de cada elemento. La función es opcional al igual que los espacios.

• Con función como segundo parámetro.

Script:

Consola:

• Con array como segundo parámetro.

Script:

Consola:

Subir :point_up:

6. Tiempo y fechas

• New Date()

Obtiene la fecha y la hora actual.

Script:

Consola:

Subir :point_up:

• getFullYear()

Obtiene el año actual.

Script:

Consola:

Subir :point_up:

• getMonth()

Devuelve el número del mes, tomando en cuenta que comienza en cero y termina en once.

Script:

Consola:

Subir :point_up:

• setFullYear() - setMonth()

Cambiar los valores de la fecha actual a cualquiera que se elija.

Script:

Consola:

Subir :point_up:

8. Métodos matemáticos

• Math.random()

Te devuelve un número aleatorio entre 0 y 1.

Script:

Consola:

• Función para devolver un número real aleatorio dentro de un rango.

Script:

Consola:

• Función para devolver un numero entero dentro de un rango.

Script:

Consola:

Subir :point_up:

• Math.max()

Devuelve el valor más alto entre un conjunto de valores.

Script:

Consola:

• Para devolver el valor máximo de un array podemos hacerlo de dos formas:

Script:

Consola:

Subir :point_up:

• Math.round()

Devuelve el valor entero más cercano al número real solicitado.

Script:

Consola:

Subir :point_up:

8. Condición Ternaria

Esta operación contiene tres operandos en el cual: el primero es una condición (true o false), el segundo es la sentencia a ejecutar si la condición es verdadera, el tercero es la sentencia a ejecutar si la condición es falsa.

• Condición ternaria simple: Contiene solo una condición.

Script:

Consola:

• Condición ternaria múltiple: Contiene dos o más condiciones.

Script:

Consola:

Subir :point_up:

10. HTML DOM (Document Object Model)

Con el modelo de objetos, JavaScript permite crear HTML dinámico:

• Métodos:

  • getElementById(id): Encuentra un elemento por su id.

  • getElementsByTagName(Tag_name): Encuentra un elemento por su etiqueta.

  • getElementsByClassName(Class_name): Encuentra un elemento por su clase.

Subir :point_up:

• Cambiar elementos HTML:

  • Elemento.innerHTML: Cambia el contenido del elemento HTML buscado.

  • Elemento.attribute: Cambia el atributo del elemento HTML buscado.

  • Elemento.style.property: Cambia el estilo del elemento HTML buscado.

  • Elemento.setAttribute(Atributo,valor): Cambia el valor de un atributo del elemento HTML buscado.

Subir :point_up:

• Agregar y eliminar elementos HTML:

  • Document.createElement(Elemento): Crea un elemento HTML.

  • Document.removeChild(Elemento): Elimina un elemento HTML.

  • Document.appendChild(Elemento): Añade un elemento HTML.

  • Document.replaceChild(nuevo,antiguo): Reemplaza un elemento HTML.

  • Document.write(texto): Escribe directamente en el HTML.

Subir :point_up:

• Algunos ejemplos:

• getElementById() con innerHTML

Script:

Html:

Navegador:

• createElement() y appendChild()

Script:

Navegador:

• removeChild()

Script:

Html:

• replaceChild()

Script:

Html:

Navegador:

Subir :point_up:

1. Eventos

• onchange()

Se ejecuta cuando el valor de una etiqueta HTML cambia.

Script:

Html:

Navegador:

Subir :point_up:

• onclick()

Se ejecuta cuando se da click sobre alguna etiqueta HTML.

Script:

Html:

Navegador:

Subir :point_up:

• onmouseover()

Se ejecuta cuando se pasa el cursor del mouse por la etiqueta HTML seleccionada.

Script:

Html:

Navegador:

Subir :point_up:

• onmouseout()

Se ejecuta cuando el cursor del mouse sale de la etiqueta HTML.

Script:

Html:

Navegador:

Subir :point_up:

• onkeydown()

Se ejecuta al presionarse una tecla dentro de la etiqueta HTML seleccionada.

Script:

Html:

Navegador:

Subir :point_up:

• onload()

Se ejecuta cuando se termina de cargar la etiqueta HTML seleccionada.

Script:

Html:

Navegador:

Subir :point_up: