Aprende JavaScript sin dolor

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.

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.

JavaScript fue creado por Brendan Eich en 1995 para Netscape bajo el nombre de “Mocha”.

• El código de programa de JavaScript, llamado script, se introduce directamente en el documento HTML y no necesita ser compilado. El navegador se encarga de traducir dicho código. JavaScript fue creado por Brendan Eich en 1995 para Netscape bajo el nombre de “Mocha”.

• Posteriormente cambió de nombre a “LiveScript” y más tarde a JavaScript.

• En 1997 adoptó el estándar ECMAScript 1 (ES1).

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

Las llaves se utilizan para definir fragmentos de código de manera que éstos no se junten con el resto del programa. Todo el código que ejecuta una función debe ir bien diferenciado del resto mediante corchetes. Francisco Javier Arce Anguiano 6 1.6. El punto y coma (*) El punto y coma sirve para separar sentencias que se encuentran en una misma línea. También puede indicar el final de una sentencia que ocupa varias líneas.

Apuntes de la sección 1

¿Algo para mejorar en esta sección?

¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

Contesta las siguientes preguntas para reforzar sus conocimientos.

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.

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

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;

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 variables booleanas o lógicas se especifican mediante los valores verdadero (true) o falso (false).

var contento;

contento=false;

contento=true;

Los mapas (Map) son una estructura de datos que almacenan pares de llave (key) y valor (value), los conjuntos (Set) tienen la característica de no aceptar duplicados, y ambos permiten búsquedas eficientes cuando se tiene un gran volumen de información porque no guardan sus elementos ordenados por un índice, como ocurre con los arreglos.

Son un tipo especial de cadena con formato, similares a la interpolación en otros lenguajes como Ruby, se definen con un par de caracteres back-tick (`) o acentos agudos del francés, a diferencia de las cadenas normales que usan comillas sencillas o dobles.

Hay ocasiones en que el contexto de nuestros datos requiere que trabajemos con cifras no decimales, por ejemplo en base 2 (binario) o base 8 (octal), ahora es sencillo crear este tipo de literales con los prefijos (0b) y (0o) respectivamente.

• Los “símbolos” son un nuevo tipo de dato primitivo.

• Los símbolos son únicos e inmutables y son utilizados como identificadores para propiedades de objetos.

• Los símbolos pueden tener una descripción opcional, pero sólo es utilizada para fines del depurador.

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 (!)

Los operadores de comparación son similares a los lógicos, solo que estos no tiene porque ser booleanos. Son los clásicos mayor que, menor que.

Los operadores lógicos o booleanos se emplean para que un programa tome una decisión en función de un cálculo lógico. Los valores que se obtienen son true o false. Los operadores son los siguientes:

Otro tipo de operadores aritméticos son los incrementales o decrementales, que se aplican antes o después del operando.

En la gran mayoría de los lenguajes de programación contamos con ciertas palabras que no las podemos utilizar para crear variables o funciones, las cuales las llamamos como palabras reservadas para el lenguaje. En el caso de JavaScript no podemos utilizar las siguientes palabras como variables, funciones u objetos:

• Podemos colocar espacios en blanco entre los operadores y los operandos para mayor legibilidad del código.

• Los espacios entre líneas no afectan, pero no son recomendables.

• Un operador bit a bit trata a sus operandos como un conjunto de 32 bits (ceros y unos), en lugar de números decimales, hexadecimales u octales.

• Por ejemplo, el número decimal nueve tiene una representación binaria de 1001.

• Los operadores bit a bit realizan sus operaciones en tales representaciones binarias, pero devuelven valores numéricos estándar de JavaScript.

El operador typeof devuelve una cadena que indica el tipo del operando sin evaluarlo.

• El operador de exponenciación (**) eleva el primer operando a la potencia del segundo operando.

• Es equivalente a la función Math.pow();

• Una excelente herramienta para el desarrollo con JavaScript es la consola del navegador.

Apuntes de la sección 2.

¿Algo para mejorar en esta sección?

¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

Contesta las siguientes preguntas para reforzar sus conocimientos.

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

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

}

• Podemos “anidar” sentencias condicionales. Meter una condicional dentro de otra, sin límites. No se recomienda más de tres anidaciones.

• Una estructura de tipo “else if” podemos hacer después de una pregunta falsa, otra pregunta. Si todas son falsas, se ejecuta el “else” Si una pregunta es verdadera, las demás preguntas no se realizan.

Podemos hacer varias preguntas dentro de un mismo “if” por medio de los operadores lógicos, AND y OR (&& y ||)

Switch, podemos preguntar pero solo de una variable.

La sentencia “break” rompe la estructura “switch” para continuar con el script.

Un operador condicional devuelve un valor determinado en función del resultado obtenido al evaluar una condición.

Apuntes de la sección 3

Contesta las siguientes preguntas para reforzar sus conocimientos.

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:

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.

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

}

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.

Apuntes a la sección 4: ciclos

Contesta las siguientes preguntas para reforzar sus conocimientos.

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.

• 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.

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

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.

• Una función se puede llamar a sí misma.

• A ese proceso lo conocemos como recursividad.

• Es muy importante crear una sentencia condicional para detener la recursividad.

• Crearemos la entrada de datos.

• Validaremos la entrada.

• Formatearemos la salida.

• Podemos escribir una función dentro de otra función.

• Las funciones internas, sólo podrán ser accedidas desde la función contenedora, pero no fuera de ésta.

• Las variables, constantes y demás elementos de la función contenedora (padre) pueden ser accedidos desde las funciones internas (hijos), pero no al revés.

• El objeto arguments de una función se mantiene en un objeto similar a un arreglo.

• Dentro de una función, puedes abordar los argumentos que se le pasan de la siguiente manera:

• arguments[i]

Podemos crear parámetros por omisión, antes y después de ECMA2015.

• Conocidas en otros lenguajes (C#, Java) como “expresiones lambda”, arrows o flechas son abreviaciones de funciones utilizando el operador =>

• Una forma más compacta para hacer funciones en JS.

• “this” se maneja diferente.

• Funciones de una sola línea.

En EcmaScript 6 podemos recibir valor por omisión o default en los parámetros de las funciones. Pueden ser definidos como variables primitivas, funciones, expresiones o arreglos.

Las funciones y su uso en la consola de JavaScript.

Un ejemplo clásico de las funciones recursivas es hacer la cadena inversa de una cadena original.

Apuntes de la sección 5: Funciones en JavaScript

• ¿Algo para mejorar en esta sección?

• ¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

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”.

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”;

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.

• 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.

ES8: Rellenar una cadena con caracteres al inicio o al final de una cadena padStart y padEnd

• Por medio del método replace() podemos reemplazar una subcadena, generando una nueva cadena, no modifica la cadena original.

• Por omisión sólo se reemplaza la primer ocurrencia.

• El método es sensible a mayúsculas y minúsculas.

• El método trim limpia los caracteres en blanco de una cadena.

• El método concat es equivalente a la concatenación del símbolo más.

• El método split() convierte una cadena en un arreglo o vector.

• Para utilizar los templates de cadena utilizamos los acentos graves del francés o back-ticks (``).

• Podemos utilizar libremente las comillas sencillas (‘’) o cadenas dobles (“”).

• Podemos utilizar cadenas de de múltiples líneas.

Podemos utilizar los templates, conjunto con las otras sintaxis de ES6.

Apuntes de la sección 6: Manejo de cadenas

Contesta las siguientes preguntas para reforzar sus conocimientos.