Skip to content

jask05/JavascriptCourse

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Javascriptcourse

Curso de Javascript desde 0 - Píldoras informáticas

Vistos

Apuntes

Vídeo 01 - Presentación.

  • Solo la presentación.

Video 02 - Introducción.

  • Java NO ES Javascript.
  • Java: lenguaje de programación de propósito general. Se pueden crear aplicaciones "para todo". Se puede crear una aplicación que se ejecute en una web (applets), o que se ejecute en un servidor, también una de escritorio (local). También se pueden ejecutar en dispositivos móviles.
  • Javascript: lenguaje de programación de propósito concreto. Tiene un objetivo concreto, ejecutarse en un navegador. No es posible aplicar apps JS que se ejecuten en un servidor o de escritorio (aunque esto último tiene matices). Siempre se ejecutará en un navegador.
    • Se ejecuta en local.
    • Es interpretado (no compilado).
    • Es de respuesta inmediata.
    • Agrega interactividad a los sitios webs. HTML + CSS + JS.
    • Proporciona efectos visuales dinámicos.
  • Historia
    • Inventado por Netscape en 1995.
    • Al comienzo había incompatibilidades entre navegadores.
  • jQuery
    • Librería de código Javascript ya elaborado, libre, de código abierto, disponible para que cualquier programador la utilice en sus proyectos.
    • Simplifica los dos principales inconvenientes de Javascript:
      1. Dificultad a la hora de programar.
      2. Incompatibilidad entre navegadores.
    • Permite agregar funcionalidades avanzadas en nuestros sitios webs.
    • Se utiliza en millones de sitios web, algunos tan conocidos como los CMS Drupal, Wordpress, Joomla, Prestashop, etc.
  • ¿Dónde va el código?
    • Dentro de la página web entre etiquetas <script> y </script>
      • En el head.
      • En cualquier otra parte.
    • En archivos externos con extensión .js.

Video 03 - Sintaxis Básica I. Ubicación del código.

  • El código JS se puede colocar dentro del body o detrás de este.
  • El navegador interpreta la página web de arriba hacia abajo. Antes del body se encuentra con el código JS, por lo que implica que este código se ejecuta antes que el contenido web.
  • Ventanas alert:
    • Son modales, se abren en primer plano.
    • Detienen el flujo de ejecución del programa.

Video 04 - Sintaxis Básica II. Estructuras Básicas.

  • Sentencia Javascript. Terminan en ;
  • Funciones predefinidas: vienen con el propio lenguaje para ser usadas cuando se necesite.
    • alert();
    • documentwrite();
    • isNaN();
    • etc.
  • Se pueden crear funciones propias.
  • Tipos de datos:
    • String: textos, entrecomillados.
    • Booleans: True o False.
    • Numbers
  • Variables
    • Espacio en la memoria del ordenador (RAM) donde se almacena un valor que podrá cambiar durante la ejecución del programa.
    • Sintaxis (declaración): var puntuacion;
    • Reglas para dar nombre:
      • Han de comenzar por letra, símbolo $ o _.
      • Han de contener solo letras, números, $ y _.
      • Son case sensitive.
      • No deben ser palabras reservadas.
      • Se recomiendan que sean descriptivas.
      • Ejemplos: puntuacion, $puntuacion y _puntuacion
    • Inicializar una variable:
     var puntuacion;
     puntuacion = 5;
    • Declaración de variables en la misma línea:
     var puntuacion, record, jugador
     var puntuacion = 5, record = 5000, jugador = "Juan"

Video 05 - Sintaxis Básica III. Operadores Básicos.

  • Operadores básicos:
    • Suma: +
    • Resta: -
    • Multiplicar: *
    • Dividir: /
  • El operador + concatena (une) dos valores (string + numérico).
  • Comentarios
// Comentario de una línea
/* Comentario
de varias
líneas */

Video 06 - Sintaxis Básica IV. Operadores y prompt.

  • Prompt: función de entrada de datos (de fuera del programa a dentro).
  • Alert: función de salida de datos. Devuvelve la información almacenada.
  • Incremento y decremento:
    • +=: incrementa en X el valor de una variable: record+=10
    • -=: decrementa en X el valor de una variable: record-=7.
    • *=: multiplica en X el valor de una variable: record=3*.
    • /=: divide en X el valor de una variable: record/=3.
    • ++: incrementa en 1 el valor de una variable: record++.
    • --: decrementa en 1 el valor de una variable: record--.

Video 07 - Sintaxis Básica V. Arrays, Matrices, Arreglos.

  • Arrays: "gran variable que puede tener almacenado un grupo de valores".
  • Cómo declarar un array (dos formas):
var articulos = ["zapatillas", "pantalones", "camisetas"];
var articulos = new Array("zapatillas", "pantalones", "camisetas");
  • Cómo acceder a un array:
    • El primer índice es el 0.
alert(articulos[0]);
  • Propiedades y métodos del array
    • Length: nº de elementos de un array.
    • Push: agrega elemento o elementos a continuacuión del array.
    • Unshift: agrega elemento o elementos a comienzo del array.
    • Pop: elimina elementos al final del array.
    • Shift: elimina elementos al comienzo del array.
alert(articulos.length);
articulos.push("balón", "raqueta", "bolsa");
articulos.unshift("balón", "raqueta", "bolsa");
articulos.pop();
articulos.shift();

Video 08 - Sintaxis Básica V. Arrays, Matrices, Arreglos II.

  • Utilizando push y unshift

Video 09 - POO I.

  • Lenguajes orientados a procedimientos.
  • Lenguajes orientados a objetos.
    • Objeto: coche, lavadora, mesa, etc.
    • Características (propiedades): alto, ancho, color, peso, etc.
    • Capacidades (función/método): lavar ropa, soportar objetos, arrancar, girar, parar, etc.
  • Nomenclatura del punto
    • Se utiliza la jerarquía y el operador punto:
      • document.write();
      • window.alert();
      • boton.style.width="500px";
      • boton.style.backgroundColor="red";
      • boton.focus();

Video 10 - POO II.

  • Cambios con style y uso de getElementById

Video 11 - Control de flujo. Condicional If I.

  • Permite alterar el flujo de ejecución del script/programa.
  • Operadores de comparación
    • ==: Igual que...
    • !=: diferente que...
    • >: mayor que...
    • <: menor que...
    • >=: mayor o igual que...
    • <=: menor o igual que...
    • ===: estrictamente igual que... (comprueba también el tipo)
    • !==: estrictamente diferente que... (comprueba tipos)

Video 12 - Control de flujo. Condicional If II.

  • If/else/else if
  • AND y OR
    • Operadores lógicos
      • &&: Y lógico.
      • ||: O lógico.
  • Métodos
    • toLowerCase(): transforma el string en minúsculas.
    • toUppderCase(): transforma el string en mayúsculas.
    • typeOf(): devuelve el tipo de variable la cual se le pasa por parámetro.
    • parseInt(): transforma un string en número entero.

Video 13 - Control de flujo. Condicional If III.

  • Anidamiento de If.
if(condicion){
	// código
}
// A partir de aquí es opcional.
else{
	// código 2
}

Video 14 - Control flujo. Condicional If IV.

  • Calculadora mediante prompts + casos en el que se introducen valores no controlados.
  • isNaN(): comprueba si NO es un número. Falso si es un número.

Video 15 - Control de flujo. Bucle While I.

  • Bucles
    • Determinados: for.
      • Sin llegar a ejecutar el programa se sabe cuántas veces se va a repetir los elementos dentro de este.
    • Indeterminados: while, do while.
      • Sin ejecutar el programa no se sabe cuántas veces se va a repetir los elementos dentro de este.
  • Sintáxis
while(condicion){
	// código a repetir
}
// continúa el programa

Video 16 - Control de flujo. Bucle While II.

  • While repetitivos hasta que se cumpla la condición.
edad = prompt("Introduce tu edad");
while(edad <= 0 || edad > 100 || isNaN(edad)){
    edad = prompt("Introduce tu edad");
}

Vídeo 17 - Control de flujo. Do While I.

  • Utilidad exacta que a un While (con algún matiz).
  • En el bucle While (normal), si la condición es falsa, nunca se ejecuta el programa. En Do-While el código que está dentro se ejecuta una vez (aunque sea falsa).
do {
	// código a repetir mientras la condición del bucle sea cierta.
}while(condición);

// continúa el programa

Vídeo 18 - Control de flujo. Do While II.

  • No hay notas

Vídeo 19 - Control de flujo. Bucle For I.

  • Tipo de bucle: determinado
for(inicio;condicion;incremento/decremento){
	// código a repetir
}
// continúa el programa

Video 20 - Control de flujo. Bucle For II.

  • No hay notas

Video 21 - Funciones I.

  • Forma de repetir trozos de código sin tener que re-escribirlos cada vez que se necesitan utilizar.
  • Dentro de una función puede haber llamadas a otras funciones.
function nombre_de_la_funcion(){
	// contenido
}

// Llamada a la función
nombre_de_la_funcion();

Video 22 - Funciones II. Paso de parámetros.

  • Parámetros y argumentos: elemento adicional (opcional) que se le pasa a la función para añadir contenido a la acción a realizar.
    • NO se deben definir las variables que se pasan por argumento (var num1, var num2) en la función.
    • Se deben pasar los parámetros que se solicitan, nunca más, pero pueden ser menos.
function suma(num1, num2){
	var resultado = num1 + num2;
}

// Llamada a la función
suma(5,7);

Video 23 - Funciones III. Calculadora arcáica.

  • Realizando calculadora mediante prompts y Do-while.

Video 24 - Funciones y eventos. Introducción a eventos.

  • Eventos: desencadenantes de acciones
    • Pasar por encima de una imagen, click con el botón izquierdo, seleccionar URL, etc.
    • Permite interactuar con la página web.
  • Tres niveles marcados por W3C:
    • DOM Nivel 1: modelo básico de eventos.
    • DOM Nivel 2: modelo de eventos estándar.
    • Modelo de eventos de Internet Explorer.
  • Eventos mas importantes
    • onBlur => Deseleccionar el elemento => button, input, label, select, textarea, body.
    • onChange => Deseleccioanr un elemento que se ha modificado => input, select, textarea.
    • onClick => Pinchar y soltar el ratón => Todos los elementos.
    • ondbclick => Pinchar dos veces seguidas con el ratón => Todos los elementos.
    • onfocus => Seleccioanr un elemento => button, input, label, select, textarea, body.
    • onkeydown => Pulsar una tecla (sin soltar) => Elementos de formulario y body.
    • onkeypress => Pulsar una tecla => Elementos de formulario y body.
    • onkeyup => Soltar una tecla pulsada => Elementos de formulario y body.

Video 25 - Funciones. Práctica guiada I.

  • Se añade función onClick a los botones para que aparezcan los números en el visor.
  • Se añade el comportamiento de concatenación de números al ser pulsados.

Video 26 - Funciones. Práctica guiada II.

  • Añadida funcionalidad al botón de sumar, acumulando el valor si se pulsa más de una vez dicho botón.

Video 27 - Funciones. Práctica guiada III.

  • Añadiendo funcionalidad al botón igual (=).

Video 28 - Funciones. Práctica guiada IV.

  • Terminando la calculadora (solo suma y restra).

Video 29 - jQuery I.

  • Librería de Javascript que ayuda en la creación de tareas frecuentes a la hora de programar en Javascript. Ejemplo:
    • Seleccionar elementos.
    • Agregar nuevo contenido.
    • Ocultar y mostrar elementos de una web.
    • Validación de formularios.
    • Efectos visuales vistosos.
  • Características
    • Pequeña y ligera. Menos de 100kb.
    • CSS "friendly".
    • Ampliamente testeada.
    • Gratis.
    • Gran comunidad de soporte.
    • Numerosos plugins que realizan tareas más frecuentes.
  • Agregar librería
    • Link: Microsoft/Jquery/Google.
    • De manera local descargando la librearía.
    • Forma reducida
      • $(function() {código});
    • IMPORTANTE: El código debe ir dentro del head pero siempre después del código CSS.
    • Estructura dentro del head:
<script src="js/jquery-x.xx.x.js"></script>
<script>$(document).ready(function(){código});</script>

Video 30 - jQuery II. El DOM.

  • DOM: Document Object Model (Modelos de Objetos del Documento).
    • Cuando se cargue una página en el navegador, no interpreta solo las etiquetas, si no que crea y memoriza un modelo de esa web: etiquetas HTML, atributos y órden en el cual aparecen en el archivo (gerarquía). (DOM)
  • Seleccionando elementos con jQuery
    • document.getElementById()
    • document.getElementByTagName()
    • Utilizando selectores CSS y su sintaxis:
<p class="contacto">C/ Gran Vía 55</p>
<p id="contacto">C/ Gran Vía 55</p>
<p>C/ Gran Vía 55</p>
$(".contacto");
$("#contacto");
$("p");

Video 31 - jQuery III. Diferencias con el DOM.

  • Características diferenciadoras
    • Loops automáticos
    • Funciones encadenadas

Video 32 - jQuery IV. Agregando contenido.

  • Añadir contenido usando funciones jQuery
  • Funciones
    • .html()
    • .text()
    • .after()
    • .append()
    • .prepend()
    • .before()

Video 33 - jQuery V. Eliminando y reemplazando contenido.

  • Funciones
    • .remove(): elimina un contenido en la web.
    • .replaceWith(): reemplaza un elemento por otro.

Video 34 - jQuery VI. Eliminando y reemplazando contenido II.

  • Terminando ejemplo del vídeo 33.
  • Función
    • querySelectorAll: selecciona todos los elementos de una página web basándose en su etiqueta.
  • Cuando se produce un evento (click), se crea un objeto nuevo. Ese objeto es el del evento identificado con la letra "e" (tipo evento). Si en una función se pasa como parámetro este elemento, se está capturando la información.
// Se le "dice" qué objeto desencadena el evento (target)
if(e.target == imagen1){
	// código
}

Video 35 - jQuery VII. Cambiando atributos CSS I.

  • Funciones
    • addClass(): añade un estilo de clase.
    • removeClass(): elimina un estilo de clase a una etiqueta o elemento web.
    • toggleClass(): se puede cambiar de estilo o se utilizado como un "botón on/off".

Video 36 - jQuery VIII. Cambiando atributos CSS II.

  • Continuación del ejemplo anterior. Usando la función toggleClass().

Video 37 - jQuery IX. Leyendo y cambiando atributos CSS I.

  • Función
    • css(): permite captura/guardar la propiedad CSS y modificarlo si se desea.
.css("propiedad");
.css("propiedad_css", valor);
.css("propiedad_css": "valor", "propiedad_2_css":"valor2");

Video 38 - jQuery X. Leyendo y cambiado atributos CSS II.

  • Continuando ejemplo vídeo anterior.

Video 39 - jQuery XI. Leyendo y cambiando atributos HTML I.

  • Funciones
    • attr("atributo", "valor")
    • removeAttr("atributo")

Video 40 - jQuery XII. Leyendo y cambiando atributos HTML II.

  • Viendo función removeAttr("atributo")

Video 41 - Función each() y funciones anónimas.

  • Funciones
    • each(): "cada". Se podría aplicar una función a todas las imágenes de una página de varias formas diferentes. Se genera un "bucle" por cada elemento.
      • $(this): "este/esta". Aplica X funciones al objeto que se está iterando.
    • Anónimas function()
      • Actúa como una función normal pero sin nombre.
      • No se las puede "invocar".
      • Se ejecutan en cuanto aparece el código.
      • Se suelen usar como argumentos de otras funciones.
    • ¿Por qué no usar siempre la nomenclatura del punto (primera opción)? Hay veces que no queda más remedio que ejecutar la función anónima, sobre todo cuando se quiere aplicar varias tareas a un mismo objeto, o cuando estas tareas implica la definición de variables, bucles, condicionales, etc. Si es una tarea sensilla si se recomienda utilizar la primera opción (notación del punto).
// Primera forma
$("img").fadeOut("1000").fadeIn("1000").width("120");

// Each
// "Por cada imagen que hay en la página web
// se va a ejecutar la siguiente función"
$("img").each(function(){
	$(this).fadeOut(1000).fadeIn(1000).width("120");
});

Video 42 - Eventos en jQuery I.

  • ¿Qué son? Desencadenantes de una acción.
  • Eventos de ratón
    • click
    • dbclick
    • mousedown
    • mouseup
    • mouseover
    • mouseout
    • mousemove
  • Eventos de teclado
    • keypress
    • keydown
  • Eventos de documento o ventana
    • load
    • resize
    • scroll
    • unload
  • Eventos de formulario
    • submit
    • reset
    • change
    • focus
    • blur
  • Gestión de eventos
    • $("img").click(función a ejecutar);
    • Varias formas de realizarlo
// Onclick
$("img").click(aviso);
function aviso(){ 
	alert("Has pulsado una imagen");
}

// Funciones anónimas
$("img").click(function(){
	alert("Has pulsado una imagen");
});

Video 43 - Eventos en jQuery II. Funciones hover() y toggle().

  • Explicación de la función hover().

Video 44 - Eventos en jQuery III. Funciones toggle().

  • Explicación de la función toggle().
  • Toggle() no funciona como antes, tener en cuenta ejemplos .

Video 45 - Eventos con jQuery IV - next().

  • Explicación de la función next().
  • next() hace referencia al siguiente elemento al cual se está "apuntando".

Video 46 - Eventos con jQuery V - bind().

  • Permite pasar un segundo argumento como datos adicionales para enviarle a la función, y luego asignarle que función ejecutar.
  • Se puede utilizar dos o más eventos a la vez en una misma llamada, separados por un espacio.
  • Objeto: JS considera a todo como un objeto. El objeto evento tiene propiedades y métodos. Cuando se hace click en una imagen se genera el objeto evento click. Tiene propiedades y métodos.
    • Propiedades
      • target
      • clientX
      • clientY
      • data
    • Métodos
      • stopPropagation: cuando se hace click en un objeto (web, imagen, enlace, etc.), se le dice que el evento no se propague a otros objetos que contengan en el que se está (una img está dentro de un documento, por ej.).
      • preventDefault
// Funciones "normales"
$("#eleme1").click(abrir);
$("#eleme1").mouseover(abrir);

// Funciones con bind
$("#eleme1").bind("click", datos, abrir);
$("#eleme1").bind("click mouseover", datos, abrir);

Video 47 - Efectos y animaciones I.

  • Funciones
    • Mostrar/ocultar
      • show()
      • hide()
      • toggle()
    • Aparecer / desvancer
      • fadeIn()
      • fadeOut()
      • fadeToggle()
      • fadeTo()
    • Deslizar
      • slideDown()
      • slideUp()
      • slideToggle()

Video 48 - Efectos y animaciones II.

  • Funciones
    • Animate(): permite animar cualquier propiedad CSS que admita valores numéricos.
      • margin-left: marginLeft
      • width
      • height
      • opacity

Video 49 - Animate y funciones anidadas.

  • Función anónima utilizada para que realice una acción al terminar la función animate.

Video 50 - Plugins jQuery.

  • Librearía usada easing.
  • Se puee utilizar la función "stop" para que no se repita el proceso si se ha realizado muchos "hover".

Video 51 - Preloader de imágenes rollover.

  • Preloader: no muestra la imagen original hasta que las imágenes estén cargadas (en la caché del navegador).
  • Depende de varios factores que, al pedir la segunda imagen, no se cargue o se cargue de manera lenta.
  • El preloader se basa en que antes de la línea de sustitución crear una variable de tipo image.
// Variable de tipo image.
// De esta forma se cargá en la variable la ruta y antes de que se ejecute
// la imagen ya se habrá cargado/enviado por lo que se podrá mostrar.
var foto_nueva = new Image();
foto_nueva.src = "images/foto.jpg";

Video 52 - Imágenes con FancyBox.

  • Instalación de librearía y prueba con galería de imágenes.

Video 53 - Ventanas emergentes e iframes I.

  • Para quitar el comportamiento normal del link se puede utilizar e.preventDefault(); o return false;.
  • open() se utiliza para abrir ventanas emergentes.

Video 54 - Ventanas emergentes e iframes II.

  • Cargando iFrames dentro del navegador.

Video 55 - Ventanas emergentes e iframes III.

  • Iframe con Fancybox

Video 56 - Menús animados.

  • Utilizando librearías externas

Video 57 - Formularios I.

  • Trabajo con formularios.
  • En vez de crear variables, una por cada elemento, se puede utilizar $(":text") (es el type) del formulario.
  • Para acceder a los inputs del formulario se utiliza $(":input").

Video 58 - Formularios II. Eventos I.

  • Eventos
    • Al enviar: submit()
    • Al coger el foco (seleccionado): focus()
    • Al perder el foco (deseleccionar): blur()
    • Al escribir
    • Al pasar el ratón por encima
    • Etc.

Video 59 - Formularios III. Eventos II.

  • Se continúa avanzando con la práctica del vídeo 58, utilizando el evento focus().

Video 60 - Formularios IV. Eventos III.

  • Utilización de eventos onClick y change en formularios.

Video 61 - Formularios V. Mostrando y ocultando elementos I.

  • Activando y desactivando campos "disabled" en función del radiobutton que se seleccione.

Video 62 - Formularios VI. Mostrando y ocultando elementos II.

  • Mostrando y ocultando elementos con la propiedad visibility de CSS.

Video 63 - Formularios VII - Validación I.

  • Validación de varios campos: nombres, email, edad, etc.

Video 64 - Formularios VIII - Validación II.

  • Validaciones varias: añadiendo varias formas de validación.

Video 65 - Formularios IX - Validación III.

  • Validaciones: añadiendo mensajes personalizados y varios tipos de validaciones para un mismo campo.

Video 66 - Formularios X - Validación IV.

  • Validaciones: colores y cambios de letras.

Video 67 - Formarios XI - Validación V.

  • Terminando práctica de una validación de formularios completa. Contraseña y confirma contraseña.

Video 68 - Ajax I.

  • Asynchronous JAvascript Xml
  • Dota a las páginas webs de un comportamiento típico de una aplicación de escritorio.
  • Cuando se hace una petición a un servidor web, la respuesta del servidor no necesita cargar la página completa si no que se añade a la página ya cargada. Se puede utilizar con secciones, por ej.

Ventajas

  • Mostrar nuevo contenido HTML sin recargar la página.
  • Enviar un formulario y mostrar una respuesta inmediatamente.
  • Hacer login en una página web sin abandonar la misma.
  • Mostar resultados automáticos de encuestas.
  • Buscar información en una BBDD y mostrar los resultados inmediatamente. Por ej. con un carro de la compra.

No Ajax vs Ajax

Elementos fundamentales

  • Navegador web
  • Javascript
  • Servidor web
  • Objeto XMLHttpRequest(XHR): permite hacer peticiones a un servidor y que esas peticiones vuelvan como respuesta. Pertenece a los navegadores webs.
    • Es el núcleo/parte importante del core de Ajax.

Pasos para enviar petición al servidor y procesar la respuesta

Video 69 - Ajax II.

  • Simplicación con jQuery: función load().
  • Con load() se le puede pasar un añadido a al URL a cargar para que solo tenga en cuenta el ID de un elemento y no cargue toda la página.

Video 70 - Ajax III. Get() y Post() I.

  • Cuando el servidor (respuesta) envía información la puede hacer en xml, json, texto u otros.
    • La función load() no sirven para procesar estos elementos, por eso se utilizan las funciones Get() y Post().
// Sintáxis
// El último argumento es opcional.
$.get(url, datos_enviar, función_procesa_respuesta);
$.post(url, datos_enviar, función_procesa_respuesta);

Video 71 - Ajax IV. Get() y Post() II.

  • Continuación de la práctica anterior.
  • Función serialize(): recorre todos los campos de $(this).
  • get(): se suele utilizar para acciones de consulta.
  • post(): utilizado cuando se realizan modificaciones (actualizar, eliminar o insertar registros). No tiene límites en cuanto a información que se envía al servidor (caracteres).
var datosFormulario = $(this).serialize();

Video 72 - Ajax V. Control de errores del servidor.

  • Se utiliza la función fail(nombre_funcion) para trabajar con estos elementos.
    • La función error() ya NO se utiliza en las últimas versiones de jQuery (probado con la 3.4.1).

Video 73 - Ajax VI - Objetos Json I.

  • ¿Qué es un Json?: (acrónimo de JavaScript Object Notation, «notación de objeto de JavaScript») es un formato de texto sencillo para el intercambio de datos. Se trata de un subconjunto de la notación literal de objetos de JavaScript, aunque, debido a su amplia adopción como alternativa a XML, se considera (año 2019) un formato independiente del lenguaje.
    • Está formado por elementos clave:valor.

Video 74 - Ajax VII - Objetos Json II.

  • Siguiendo con la práctica anterior para que devuelva todos los parámetros de Json y no solo uno.

Video 75 - Ajax VIII - Trabajando con Google Maps.

  • Se trabajará con el API de Google Maps para poder realizar diferentes funciones con este servicio.
  • Más información: jQuery Google Map

Video 76 - Errores y depuración I.

  • Localizar errores de sintáxis y subsanarlos.
  • Las últimas versiones de los navegadores, abren una consola de depuración pulsando la tecla F12.
  • Si se pulsa sobre el error, remarcará la línea que lo tiene.

Video 77 - Errores y depuración II.

  • Para utilizar la consola para ver diferentes valores se tiene que utilizar la función console.log().
  • Puntos de detención: la última línea que se va a leer es la anterior a la del punto establecido.
    • Ejecutar el código paso a paso: botón de flecha como una U invertida.

Video 78 - Enlaces de interés

  • Mozilla Developer Javascript
  • Devguru
  • Librosweb Javascript
  • MSDN Javascript
  • W3 Schools
  • JQuery español
  • Librojquery.com
  • Librosweb Ajax

Notas

  • Se puede ver errores de código en Google Chrome pulsando la tecla F12 > Consola.
  • Prompt: el segundo parámetro que se le pasa es el mensaje de ayuda que aparecería en el cuadro de texto (como un placeholder).

About

Curso de Javascript de Píldorasinformaticas

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published