Aprende Javascript, HTML5 y CSS3
4.2 (63 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
794 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende Javascript, HTML5 y CSS3 to your Wishlist.

Add to Wishlist

Aprende Javascript, HTML5 y CSS3

Aprende los principales lenguajes que dominan internet: JavaScript, HTML5 y CSS3
4.2 (63 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
794 students enrolled
Last updated 5/2017
Spanish
Current price: $10 Original price: $30 Discount: 67% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 38 hours on-demand video
  • 6 Articles
  • 12 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Desarrollar páginas dinámicas con JavaScript, HTML5 y CSS3
  • Crear variables de tipo cadena, numérico y booleanos.
  • Crear estructuras condicionales y ciclos como for, while o do... while
  • Modificarar las cadenas y subcadenas, así como leerá los caracteres de una subcadena, así como crear funciones propias.
  • Crear, poblar y recorrer objetos y arreglos, así como el manejo de fechas.
  • Uso del HTML5 para crear páginas, crear formularios y utilizar los APIS con JavaScript.
  • Manejo del CANVAS, desde dibujar hasta hacer una sencilla aplicación.
View Curriculum
Requirements
  • Conocimientos generales de páginas web y computación
Description

Obtén un libro de más de cien páginas con el curso!!!

Este curso tiene como objetivo que usted aprenda JavaScript sin que sea programador. Revisaremos desde sus inicios la sintaxis del lenguaje, el manejo de sus variables, lo que es una sentencia condicional, los ciclos, las funciones, los arreglos y otros objetos, asi como la estructura DOM, que es fundamental para el manejo avanzado de las páginas, como es HTML5 y jQuerys. También revisaremos el manejo de los eventos con este potente lenguaje.

Who is the target audience?
  • Diseñadores y desarrolladores web
Students Who Viewed This Course Also Viewed
Curriculum For This Course
318 Lectures
41:35:28
+
Bienvenido al curso
1 Lecture 02:47

 Este curso tiene como objeto que usted aprenda JavaScript sin ser programador.

Preview 02:47
+
JavaScript: Sintaxis del lenguaje
3 Lectures 15:24


 El alumno conocerá la primer sintaxis de JavaScript realizando un programa muy sencillo

Preview 06:14

Las páginas de internet modernas deben estar divididas por archivo: el archivo html guardará los contenidos, el archivo CSS los estilos y formato, y toda la lógica de programación deberá estar almacenada en archivos con extensión js. Así, si desea modificar la lógica, no afectará a las otras dos, y visceversa.

JavaScript en un archivo js
05:55

Para introducir comentarios en JavaScript podemos utilizar dos técnicasdiferentes:

  1. Los comentarios en una sola línea irán precedidos de //;
  2. Los comentarios de varias líneas irán encerrados en /* y */
Ejemplo de un fragmento de código en el que se utilizan los sistemas
vistos anteriormente

<SCRIPT>

//Comentario de una sola linea, la siguiente se ejecuta

document.write("Bienvenidos a JavaScript")

//Nuevamente un comentario de una sola linea

//*****************************

//Comentarios, Comentarios

//*****************************

/*Esta es otra forma de introducir comentarios

pero utilizando muchas lineas, incluso cosas como document.write("hola"),

son vistas como comentarios

*/

</SCRIPT>


Comentarios al código en JS
03:15
+
JavaScript: Variables y tipos de datos
8 Lectures 55:38

JavaScript admite prácticamente cualquier tipo de nombre para definir una variable, no obstante, hay una serie de consideraciones que se deben tener presentes:

  • El primer carácter debe ser siempr una letra o el guión de subrayado ( _ ).  Los restantes caracteres pueden ser letras, números o el guión de subrayado, teniendo como precaución no dejar espacios entre ellos.
  • El nombre de la variable no debe coincidir las palabras reservadas de JavaScript.
  • JavaScript diferencia entre mayúsculas y minúsculas.

Para declarar variables se utiliza la palabra clave var seguida del nombre de la variable.  Las siguientes variables serán reconocidas como tales por JavaScript.

var nombre;

var dirección;

var entrada_valor_concreto;

var variable_numero_12;

Preview 08:00

JavaScript puede manejar tres tipos de datos distintos decidiendo por nosotros el tipo de variable que deberá emplear durante la ejecución del script.

  Los tres tipos de variables son:

  • Variables de cadena
  • Variables numéricas
  • Variables booleanas

Un cuarto tipo podrían se los datos Nulos (null).  Estos se utilizan para comprobar si a una variable se le ha asignado un valor o no.  Null representa un valor nulo para cualquier tipo de variable; por el contrario, una variable que no ha sido inicializada tiene un valor undefined.

Tipos de datos en JavaScript
02:26

Las variables numéricas son aquellas que contienen números enteros o de coma flotante.

Enteros

  JavaScript puede utilizar tres bases distintas para números enteros: la decimal (base 10), la hexadecimal (base 16) y la octal (base 8).  Por defecto el sistema es el decimal.

var numero;

numero = 100;

numero = -1000;

  Si queremos especificar un número en base octal deberemos anteponer un cero 0 al número.  Recordemos que los números en base octal solo pueden contener los dígitos del 0 al 7.

var numero_octal;

numero_octal = 03254;

numero_octal = 02;

 

  Para un valor hexadecimal deberemos anteponer al número el prefijo 0x.  Los números en hexadecimal incluyen los dígitos del 0 al 9 y las letras comprendidas entre la A y la F ambas inclusive.

var numero_hex;

numero_hex = 0xff;

numero_hex = 0x12f;

Tipos Numericos en JavaScript
09:00

Una variable de cadena es aquella que contiene texto.  Las cadenas de texto en JavaScript se delimitan mediante comillas dobles o simples y pueden contener cualquier tipo de carácter.  También pueden tener un valor nulo.

Ejemplo:

var pais=”México”;

var entrada_codigo;

entrada_codigo=”1234567”;

var valor=” ”;

  Las comillas simples serán utilizadas dentro de fragmentos de código delimitados por comillas dobles o viceversa. 

Ejemplo:

document.write(“Que quiere decir la palabra ‘nuncupatorio’ “)

alert(‘Pulsa la tecla “amigo” ‘)

  Hay una serie de caracteres que permiten representar funciones especiales, como podría ser un salto de línea en un texto o, por ejemplo, las comillas.  A continuación se presenta una lista:

  • b  carácter anterior
  • f  salto de página
  • n  salto de línea
  • r  retorno de carro
  • t  tabulador
  • \  carácter
  •   comilla simple
  •   comilla doble
Cadenas en JavaScript
08:07

Las variables booleanas o lógicas se especifican mediante los valores verdadero (true) o falso (false).

var contento;

contento=false;

contento=true;

Variables Booleanas
04:19

Los operadores aritméticos son los encargados de realizar las operaciones básicas como sumar, restar, multiplicar y dividir. 

  • Suma (+)
  • Resta (-)
  • Multiplicación (*)
  • División (/)
  • Módulo (%).  Resto de la división.
  • Incremento, Preincremento, Posincremento (++)
  • Decremento, Predecremento, Posdecremento (--)
  • Negación (!)
Operadores matemáticos, lógicos y condicionales
12:38

 El alumno comprenderá cuando las líneas y los espacios crean problema en el código y cuando no

Los espacios en el código
11:08

JavaScript: Variables y Tipo de datos (apuntes)
39 pages
+
JavaScript: Sentencias condicionales
7 Lectures 59:34

En determinados momentos es necesario controlar el desarrollo del programa para que éste tome decisiones por nosotros.  JavaScript dispone de los siguientes comandos:

  • if
  • for
  • while
  • do while
Preview 11:51

La estructura if…else tiene la siguiente sintaxis:

if (condición){

  Código de programa en caso de que la condición sea verdadera

}else{

  Código de programa en caso de que no se cumpla la condición

}

  Así podemos diferenciar dos bloques: el bloque if que ejecuta un código si la condición es verdadera y el bloque else que hace lo propio pero en caso de que la condición no sea cierta.

El condicional Else
04:13

 El alumno realizará estrucutras condionales anidadas

Estructuras condionales anidadas
06:54

 Operadores lógicos en las estructuras condicionales

Operadores lógicos en las estructuras condicionales
14:32

 El alumno aplicará la sentencia condicional múltiple Switch

La sentencia condicional Switch
11:40

La sentencia break dentro de un condicional switch
03:07

 El alumno aprenderá a realizar el operador condicional

El operador condicional
07:17

¿Listo para probar tus conocimientos sobre JavaScript? ¡¡¡Adelante!!!

Quiz para JavaScript
27 questions
+
JavaScript: Ciclos
4 Lectures 38:02

La instrucción while ejecuta de manera constante una determinada secuencia de código siempre que se cumpla una condición.  Este tipo de bucles puede generar secuencias infinitas, por lo que se debe tener cuidado cuando se definen los bucles.

Estructura básica de un bucle while:

while (condición)

{

  Instrucciones a ejecutar con el bucle

}

Ejemplo de programa que imprime en pantalla los números del 0 al 10:

Preview 18:56

Este tipo de bucle no estaba implementado en las versiones de JavaScript anteriores, hay que tenerlo presente a la hora de especificar el tipo de versión de JavaScript.

  La misión de un bucle de este tipo es la de colocar una expresión condicional después de las instrucciones que deben ejecutarse, de esta manera seguro que las instrucciones del bucle son ejecutadas por lo menos una vez.

Ciclo Do... While
04:27

Las estructuras if permiten que un programa tome decisiones.  Los bucles for se tienen que establecer cuatro valores.

  • Valor inicial.  Determine el valor inicial del contador.
  • Condición.  Comprueba si la condición es verdadera o falsa.
  • La ejecución.  Se ejecutan las instrucciones deseadas.
  • Actualización.  Se actualiza el valor del contador para volver a ejecutar el paso número 2.

La estructura básica de un bucle for, es la siguiente:

for (valor inicial; condición; actualización)

{

  Instrucciones a ejecutar en el bucle

}

El ciclo for
07:35

La instrucción break permite interrumpir la ejecución de un bucle for o while aunque éste no haya sido ejecutado totalmente.  Así pues, podemos cancelar la ejecución de un bucle cuando se cumpla una determinada condición.


La instrucción continue no termina la ejecución del bucle sino que puede dejar una repetición determinada y pasar a la siguiente.

Los comandos break y continue en los ciclos
07:04

Realiza el quiz de la sección

Examen JavaScript - Ciclos
10 questions
+
JavaScript: Funciones
4 Lectures 27:46

Las funciones son uno de los pilares en los que se basa JavaScript.  Una función es un conjunto de sentencias JavaScript que realizan alguna tarea específica.  Las partes que definen una función son:

  • El nombre de la función.
  • La lista de argumentos de la función, encerrados entre paréntesis y separados por comas(“,”)
  • Las sentencias en JavaScript que definen la función, encerradas entre llaves({,});

Una función puede incluir llamadas a otras funciones definidas en la aplicación, pero únicamente de la página actual.  Una opción interesante es definir las funciones en el encabezado del documento de manera que, cuando se inicialice la página, las funciones se definan antes de cualquier acción del usuario.

Preview 08:48

Los parámetros o argumentos de una función permiten que el resultado varíe según el valor indicado de la misma.  Estos pueden ser variables, números u objetos.

  Los parámetros funcionan como variables temporales, es decir, desaparecerán cuando la función haya terminado. Tenemos que pasar sus valores separados por comas.

Parámetros en las funciones
05:25

Para que una función devuelva el resultado de una serie de operaciones procedentes de la misma función, utilizaremos la instrucción return.

Regreso de valores en una función con la sentencia return
05:52

Las variables locales y globales dependen del lenguaje de programación. Una variable que es definida fuera de las funciones se le llama una variable global porque podrá ser vista dentro de todas las funciones, pero las variables que son definidas dentro de una función, únicamente podrá ser “vista” o utilizada dentro de la función. A esto se le llama una variable local.

Las variables locales sólo podrán ser “vista” dentro de la función, y cuando la función termine, estas variables desaparecerán de memoria. Las variables globales pueden ser modificadas dentro de una función, pero se considera una muy mala práctica de programación. Hay evitar modificar variables globales dentro de funciones, y únicamente regresar valores con la sentencia return.

Variables locales y globales en las funciones
07:41

Realizarás un sencillo quiz sobre las funciones en JavaScript

Funciones en JavaScript
6 questions
+
JavaScript: Manejo de cadenas
5 Lectures 41:19

El proceso de “juntar” cadenas la conoceremos como “concatenación”. En JavaScript, para juntar subcadenas en una cadena la realizaremos con el operado más (+). En HTML todos los campos son una cadena.  Realmente no hay valores numéricos, ni fechas, solo cadenas.

Al proceso de cambiar una variable de a otro tipo de variable, por ejemplo, de una cadena a un número, o de un número a una cadena, la conoceremos como “conversión”. Si JavaScript falla al tratar de convertir una cadena a su valor numérico, por ejemplo la palabra “seis” no puede convertirse al valor “6”, el sistema nos regresará un valor del tipo “NaN” o “not a number”.

Si JavaScript encuentra una cadena con el parámetro más (+) lo convertirá a cadena, por ejemplo:

var edad = 24;

var cumple = “Tengo “+edad+” años”;

El resultado será una cadena.

Preview 08:36

El objeto String ofrece distintas formas de manejar cadenas de texto. Siempre que se asigne un String una variable o propiedad, se crea un objeto de tipo String.

  En este caso, al definir una variable con una cadena de texto ya estamos utilizando un objeto String, es decir, no será necesaria si declaración.

var cadenaTexto;

cadenaTexto=”Aquí esta la cadena de texto”;

Métodos para convertir las cadenas a mayúsculas y minúsculas
06:42

Por medio del método indexOf() podremos encontrar una “subcadena” (que no es otra cosa que una cadena más pequeña que donde buscamos) dentro de una cadena. Esto es muy usado en JavaScript, ya que nos ayuda a cambiar los valores de entrada, buscar en textos, validar campos de entrada, por ejemplo si un correo electrónico está bien escrito, entre otras muchas funciones.

El valor que nos regresará esta función es la posición de la subcadena dentro de la cadena. El primer carácter siempre tiene el valor de cero. Si la búsqueda no es exitosa, esta función nos regresará un valor -1.

Buscar subcadenas con el método indexOf
08:44

Otros de los métodos para poder manejar las cadenas será poder cortar una cadena dependiendo su longitud, de su ubicación, etcétera. Para ello contaremos con los métodos substring(), substr() y slice().

El método substring () extrae los caracteres de una cadena, entre los dos índices especificados, y devuelve la nueva subcadena.

Este método extrae los caracteres de una cadena entre "de" y "a", no como "a" sí mismo.

El método substr () extrae partes de una cadena, comenzando en el carácter en la posición especificada y devuelve el número de caracteres especificado.

Consejo: Para extraer caracteres desde el final de la cadena, use un número de salida negativa (Esto no funciona en Internet Explorer 8 y versiones anteriores).

Nota: El método substr () no cambia la cadena original.

El slice() parte de extracto de método de una cadena y devuelve las piezas extraídas de una nueva cadena.

Utilice los parámetros de inicio y fin para especificar la parte de la cadena que desea extraer.

El primer carácter tiene la posición 0, el segundo tiene la posición 1, y así sucesivamente.

Consejo: Utilice un número negativo para seleccionar entre el final de la cadena.

Manejo de subcadenas con subString subStr y slice
08:09

El método charAt () devuelve el carácter en el índice especificado de una cadena.

El índice del primer carácter es 0, el segundo carácter es 1, y así sucesivamente.

Leer los caracteres de una cadena
09:08

Contesta las siguientes preguntas sobre el manejo de cadenas con JavaScript

Manejo de cadenas
8 questions
+
JavaScript: Colecciones
7 Lectures 01:09:48

Una técnica importante de programación es el uso de los “arrays”, arreglos o vectores. Un arreglo es un conjunto de datos de un mismo tipo identificados por un índice.

  Desarrollaremos un arreglo de ejemplo.  Primero deberemos definir el arreglo, para ello utilizaremos el objeto Array().  Después se deberán ir incluyendo los elementos de este arreglo, los cuales estarán identificados mediante un número al que llamaremos índice.

Preview 09:51

Al hecho de recorrer el arreglo desde principio a fin, se le conoce, dentro de la jerga de sistemas, se le conoce como “barrer” el arreglo. También se le aplica a otros objetos como los archivos o tablas de una base de datos.

Al proceso de introducir valores aun objeto, como puede ser un arreglo, se le conocerá como “poblar”, que proviene de la palabra en inglés “populate”.

Poblar y barrer un arreglo
09:04

Un punto muy importante cuando iniciamos en un lenguaje de programación es tener una buena referencia del lenguaje. Una excelente guía para JavaScirpt es:

https://developer.mozilla.org/es/docs/JavaScript

Entre los métodos con los que cuenta el objeto Array encontramos los siguientes:

  • join()  Método encargado de agrupar todos los elementos en una cadena de caracteres, separados por comas.
  • reverse()  Este método invierte el orden de colocación de los elementos.  El primero pasa a ser el último y viceversa.
  • sort()  Este método devuelve de manera ordenada los elementos de la matriz.
Métodos para manipular arreglos
16:02

Un objeto es una agrupación de variables denominadas propiedades que realizan operaciones con las variables propias del mismo, es decir, un conjunto de datos definidos por el usuario junto con las operaciones que actúan sobre ellos.  Por ejemplo, las propiedades de una computadora, serían su procesador, el disco duro, memoria, etc., y además con él podemos jugar, estudiar, dibujar, por ejemplo.

Un objeto en JavaScript tiene una serie de propiedades asociadas a él.  Para acceder a dichas propiedades utilizaremos la notación punto.

Objeto.propiedad

Para poblar un objeto también utilizaremos la notación punto:

var alumno = new Object()

alumno.nombre = “Pepito”;

alumno.grado = “3o C”;

  Un método es una función asociada a un objeto y particular a los objetos del tipo que las define.  Así pues, un método es una acción que ejecutamos sobre los datos de un objeto.

  Los métodos se definen en el mismo sitio que las funciones y de la misma manera, asociándolas posteriormente a un objeto ya existente.

Sintaxis para definir un método:

Objeto.nombreMetodo=nombreFuncion

Y para hacer llamada a método:

Objeto.nombreMetodo(parametro1,parametro2..)

Creación de objetos en JavaScript
08:54

El objeto Date permite trabajar con horas y fechas.  JavaScript maneja las fechas en milisegundos desde 1/1/1970 a las 00:00:00 horas.  Por lo que no se puede trabajar con fechas anteriores.

  En la representación de los meses para valores enteros JavaScript comienza a contar desde 0, por lo tanto, enero será el mes 0 y diciembre el mes11.  Los días de la semana se cuentan empezando por 0 para el domingo, 1 el lunes y así sucesivamente.

  Para crear una variable de fecha se debe establecer un nombre para la instancia del objeto y sus respectivos parámetros.

El objeto Date
12:31

El objeto Math tiene propiedades y métodos que representan constantes y funciones matemáticas.

  Las propiedades de este objeto son las siguientes:

  • E Constante de Euler o número e.
  • LN2 Logaritmo de 2.
  • LN10  Logaritmo de 10.
  • LOG2E  Logaritmo de e en base 2.
  • LOG10E Logaritmo de e en base 10.
  • PI  Número PI.
  • SQRT1_2 Raíz cuadrada de 0.5.
  • SQRT2  Raíz cuadrada de 2.
El objeto Math
13:26

JavaScript: Arreglos y Objetos (apuntes)
26 pages

Contesta las siguientes preguntas sobre los arreglos y objetos

Colecciones: arreglos y objetos
25 questions
+
JavaScript: Document Object Model (DOM)
11 Lectures 01:18:41

El alumno reconocerá las principales características del DOM

Preview 03:42

 El alumo aprenderá la forma de seleccionar los nodos de un documento DOM

DOM Seleccionar Nodos
09:27

Contamos con la instrucción:

getElementsByClassName()

La cual nos reporta un arreglo o “nodeList” con los elementos que tienen esta clase.

Esta instrucción es soportada por el IE9+

Seleccionar nodos por clase: getElementsByClassName()
09:11

Contamos con las instrucciones:

querySelector()

querySelectorAll()

El primero reporta sólo un elemento y el segundo un arreglo o ‘nodeList’

Esta instrucción es soportada por el IE8+

Podemos seleccionar por clase, identificador, atributo o pseudoclase.

Seleccionar nodos con querySelector() y querySelectorAll()
11:37

 El alumno comprendrá el proceso de modificar los nodos de una página en la estructura DOM

Modificar Nodos de un documento bajo la estructura DOM
04:34

Los métodos para modificar los nodos:

  • getAttribute()
  • setAttribute()
  • removeAttribute()
  • hasAttribute()
Modificar los atributos de un nodo con hasAttribute y removeAttribute
07:23

Por medio del siguiente método, podemos modificar, tomar y remover texto con o sin etiquetas:

  • innerHTML
  • Modificar, recuperar y eliminar texto de un nodo
    06:49

    Los métodos para moverse a través del árbol DOM son:

    • parentNode
    • previousSibling
    • nextSibling
    • firstChild
    • lastChild
    Navegar en la estructura DOM
    09:43

    Con los métodos lastChild y firstChild, podrmos revisar el primer y último de los hijos de un nodeList, pero llega a cambiar en diferentes navegadores, por lo que hay que utilizarla con cuidado.

    Navegar en el DOM: firstChild y lastChild
    06:39

     El alumno aprendera a crear nodos bajo la estrucutra DOM

    Crear nodos bajo la estrucutra DOM
    09:36

    JavaScript: DOM (apuntes)
    17 pages

    Prueba tus conocimientos sobre Document Object Model (DOM)

    Document Object Model (DOM)
    3 questions
    +
    JavaScript: Hacer una galería con instrucciones DOM
    6 Lectures 50:33

    En este video veremos el ejercicio terminado, la lógica del mismo y los recursos para realizar nuestra galería con JavaScript con las instrucciones del DOM

    Preview 05:55

    En este video crearemos las etiquetas para la página, desplegar las imágenes de la mini galería y su archivo javaScript.

    Escribir el HTML y el CSS de la galería y su archivo JS
    07:43

    En este video veremos cómo detectar el evento click sobre la división, y por tanto, sobre las imágenes de la galería.

    Detectar el evento "click" sobre las imágenes
    07:00

    Una vez seleccionada la imagen, desplegaremos una división que abarque toda la ventana del navegador con una trasparencia del 50%.

    Crear la pantalla negra o "blackout" al pulsar una imagen
    09:01

    Una vez que tengamos el fondo negro, leeremos la imagen grande y la desplegaremos sobre nuestro fondo.

    Cargar la imagen grande en el fondo negro con instrucciones DOM
    11:27

    Finalmente centraremos la imagen y crearemos un detector de eventos para remover toda la división, cuando el usuario pulse sobre la imagen.

    Centrar la imagen y eliminarla al pulsarla
    09:27
    41 More Sections
    About the Instructor
    Francisco Javier Arce Anguiano
    4.3 Average rating
    978 Reviews
    13,169 Students
    37 Courses
    Lic. Matemáticas Aplicadas y Computación

    Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.