Nociones básicas de JavaScript
JavaScript para gente normal
Índice
1. Las etiquetas de JavaScript
2. Variables
2.1 Funciones y propiedades de las variables – Métodos
2.2 Arrays
2.2.1 añadir elementos a un array con la función push
2.2.2 Calcula el número de elementos de un array con la función length
2.2.3 Borrar elemento de un array con la función delete
2.2.4 Actualizar los elementos de un array
3. Operadores
4. Funciones estructuradas
4.1 La función «IF» y «IF…ELSE»
4.2 La Función For
4.3 La función switch
5. Funciones
6. Bucles
6.1 Sentencia for
Este articulos pertenece a la serie de post de la formación para desarrollador web. Se puede ver el articulo de Nociones básicas de PHP para conocer más sobre este lenguaje y sus diferencias y similitudes con JavaScript
¿Por qué aprender JavaScript?
JavaScript es uno de los lenguajes de programación del que más se va a hablar de él dentro de los próximos 10 años y claro, pertenece a uno de los 4 jinetes del apocalipsis (HTML5, CSS3, PHP, JAVASCRIPT) que hacen falta para poder ser un buen desarrollador en wordpress. El mismísimo Matt Mullenweg lo lleva diciendo hace mucho tiempo y cada más se ve que el motor de este CMS se esta basando en programación en JavaScript.
¿Qué es JavaScript?
Es el único lenguaje de programación orientado a objetos compatible con todos los navegadores y que se ejecuta en el lado del navegador al contrario de PHP que lo hace del lado del servidor. Esto nos crea un lenguaje interpretado (que no requiere ser compilado) con una extensión .js y donde su código puede ir incluido en una página HTML clásica para poder crear páginas webs dinámicas o en un archivo externo que será llamado por una la etiqueta script que se colocara dentro de las etiquetas <head></head>
<p>Esto va a ser ignorado por JavaScript y mostrado por el navegador.</p>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
<p>Esto también será ignorado por JavaScript y mostrado por el navegador.</p>
Tip
Para poder practicar, lo mejor es utilizar un editor de código. Aconsejo ver este video para instalar sublime text y poder hacer pruebas de código.
Código paquete de plugins
Recordar que para que funcione correctamente emmet primero tenemos que crear un proyecto y guardarlo con el un nombre terminado con .html y posteriormente elegir una ruta para grabar el archivo. Es muy cómodo ver los cambio que estamos haciendo en un navegador . Para hacer esto solo tenemos que pulsar en botón derecho pulsar en Open in Browser.
Para poder probar el código PHP usar esta web online.
IMPORTANTE
Para poder visualizar el código HTML mezclado con el JavaScript el archivo tiene que ser guardado con formato .php
1. Las etiquetas de JavaScript
Las etiquetas usadas en JavaScript son <script> </script> y se puede incluye en cualquier parte del documento html. Pero se recomienda incluirlas dentro de la cabecera del documento (dentro de la etiqueta <head>):
Sintaxis
<script type="text/javascript"> //aquí irá el código de JavaScript; </script> //actualmente se puede omitir type <script> //aquí irá el código de JavaScript; </script>
La consola de JavaScript
Una buena práctica para empezar a trabajar con JavaScript es hacerlo a través de la consola del navegador que se puede visualizar pulsando en botón derecho del ratón y pulsamos en inspeccionar y luego en la pestaña consola (En el caso de Chrome). Para poder visualizar la la información que necesitemos ver del código necesitamos conocer un comando console.log(»);
Ejemplo
<script>
console.log('Hola a todos');
</script>
Resultado:
Separador de instrucciones (;)
No es necesario terminar cada sentencia con el carácter de punto y coma (;) como en la mayoría de lenguajes de programación. Aunque JavaScript no obliga a hacerlo, es conveniente hacerlo.
Comentario
Los comentarios en el código sirven para dejar anotaciones del código sin que afecten al funcionamiento de este. JavaScript acepta dos tipos de comentario.
// incluye comentario hasta el final de la linea.
/* comentario*/ para insertar comentarios en varias líneas
Ejemplo:
<?php //este es un comentario que no afecta al código #este es otro comentario igual que el de arriba /*Esye formato tambien sirve como comentario pero lo bueno es que sirve para escribir en varias lienas*/ //Ahora escribimos un saludo y mi nombre con la función echo echo '¡Hola ';//este es el saludo echo 'Joaquín!';//este es mi nombre ?>
Resultado:
¡Hola Joaquín!
2. Variables
Las variable son «elementos» que contiene un valor fijo o dinámico y diferencian entre minusculas y mayusculas. El nombre de una variable debe empezar con una letra o con el carácter de subrayado _ (underscore/barra baja)
Existen muchos tipos de variables pero las más importante son:
- De tipo String. Son variables donde su valor es texto, que siempre debe ir dentro de ‘ ‘ (comillas simples) si dentro de este formato metemos números, PHP los reconocerá como texto, no como un número.
variablestring = ‘Siempre Texto’; - De tipo Integers. Son variables donde su valor son números enteros con los cuales podemos hacer, entre otras cosas, operaciones matemáticas.
variableintegers =38; - De tipo Float: Son variables donde su valor son número decimales y se comportan igual que en anterior tipo.
variablefloat =45,60; - De tipo Booleanos. Es un tipo de dato que indica verdad y solo acepta 2 valores TRUE o FALSE y se usan principalmente cuando necesitamos las condicionales.
variableboolean = true;
Ejemplos
<script> //las variables a diferencia de PHP se pueden declarar poniendo solo el elemento aunque se recomienda declararlas con la palabra reservada var //declaro las variables var nombre; var apellido; //ahora asigno un valor a las variables //variable tipo string = cadena de caracteres "texto" nombre = 'Joaquín'; apellido = 'López'; //variable tipo integers = Numeros enteros edad = 38; //variable tipo float = nuemros deciamles altura = 1.72; //variable tipo boolean = valor 0/1. este valor aunque es una cadena de texto no va entre comillas casado = true; soltero = false; //para comprobar que las variables funcionan usamos el comando de la consola poniendo entre los parentesis la variable console.log(nombre); console.log(edad); console.log(casado); </script>
Resultado en consola
Joaquín
38
true
Ejemplo 2
<script> //definimos las variables para hacer operaciones matemáticas numero1 = 10; numero2 = 20; total = numero1 + numero2; total2 = numero2 / 2; total3 = (numero1+90) / numero2; //usamos el comando de console para poder confirmar que la opración es correcta console.log(total); console.log(total2); console.log(total3); </script>
Resultado en consola
30
10
5
Ejemplo 3
<script> //definimos las variables para hacer operaciones matemáticas nombre = 'Joaquín'; apellido = 'López'; //definimos otras variable en donde concatenaremos las variable de arriba - se concatena con + nombre_completo = nombre + apellido; //repetimos la variable pero dejando un espacio entre las 2 variables. Console.log nos muesra al ultima declaracion nombre_completo = nombre +' '+ apellido; //usamos el comando de console para poder confirmar que la opración es correcta console.log(nombre_completo); </script>
Resultado en consola
Joaquín Lopez
Ejercicio
Modificar el primer script para que:
- Todo el código JavaScript se encuentre en un archivo externo llamado
codigo.jsy el script siga funcionando de la misma manera.- Después del primer mensaje, se debe mostrar otro mensaje que diga «Soy el primer script»
- Añadir algunos comentarios que expliquen el funcionamiento del código
- Añadir en la página XHTML un mensaje de aviso para los navegadores que no tengan activado el soporte de JavaScript
Solución del código html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Practicas en JavaScript</title>
<!--el siguiente codigo llama a la funcion de JS desde una página externa -->
<script type="text/javascript" src="codigo.js"></script>
<!--Ahora declaramos la fución alert desde la misma página de html -->
<script type="text/javascript">
//saldra el primer mensaje
alert("¡Mi primer mensaje en JS!");
//posteriormente saldra este
alert('Otro mensaje?')
</script>
</head>
<body>
<!--este código suele incluirse para avisar a los navegadores que tienen desactivado la opción de JavaScript por lo general se instala al principio del body-->
<noscript>
<p>Bienvenido a Mi Sitio</p>
<p>La página que estás viendo requiere para su funcionamiento el uso de JavaScript.
Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>
</noscript>
<p>Esta página contiene el primer script</p>
</body>
</html>
Solución de la página codigo.js
// Al cargarse el archivo JavaScript, se muestra un mensaje
alert("Hola Mundo!");
// Despues del primer mensaje, se muestra otro mensaje seguido
alert("Soy el primer script");
2.1 Funciones y propiedades de las variables – Metodos
Las variables en JavaScript, a diferencia de otro lenguajes de programación, también son un objeto (veremos el concepto objeto más adelante) y por ello tienen unas propiedades que las convierten en funciones y que nos permiten utilizar esas funciones para realizar operaciones básicas.
Por ejemplo: si necesitamos que una cadena de texto se conviertan todas sus letras a mayúscula usamos la función toUpperCase()
<script type="text/javascript"> texto = "soy una cadena en minúsculas y me van a convertir a mayusculas"; convertir = texto.toUpperCase(); //comprobamos por consola console.log(convertir); </script>
Estas funciones las encontramos en los:
- String (cadenas de texto) Ver todos los métodos
- Arrays Ver todos los métodos
- Números (Floats e Integers) Ver todos los métodos
- Fecha Ver todos los métodos
Pulsar en el enlace para ver las funciones de estas variables más comunes
Funciones y propiedades básicas para el manejo de las variables
2.2 Arrays
Un array es una agrupación de variables que pueden ser del mismo tipo (String, integer, float…) o cada una una de un tipo diferente.
Existen tres formas de definir las variables aunque la más usada es la tercera (Tipo_3), ya que con las anteriores existe un caso que la variable si solo tiene un elemento deja de ser un array. Estos elementos tiene que ir separados con coma (,).
<script> variable_1 = new Array (elemento_1, elemento_2, elemento_3); //Tipo 1 variable_2 = Array(elemento_1, elemento_2, elemento_3); //Tipo 2 variable_3 = [elemento_1, elemento_2, elemento_3]; //Tipo 2 </script>
Ejemplo
<script>
var dias_semana = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
console.log(dias_semana);
</script>
En consola se muestra de esta manera
Para acceder desde una variable a algunos de los elementos del array las debemos definir de esta forma
<script> var dias_semana = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"]; quiero_lunes = dias_semana [0]; quiero_viernes = dias_semana [4]; alert (quiero_lunes); alert (quiero_viernes); </script>
Tengamos en cuenta que los elementos de un array se empiezan a contar desde el cero (0) y no desde el uno (1)
los arrays tienen unas funciones muy útiles que las complementan y que nos ayuda a realizar alguna acciones ya definidas por JavaScript.
Veamos las más usadas.
2.2.1 añadir elementos a un array con la función push
Por ejemplo, si queremos añadir un elemento llamado Juernes a nuestro ejemplo anterior y que tomaría el valor 7 lo haríamos así:
<script>
var dias_semana = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
dias_semana.push("Juernes");//método que añade elementos al array
console.log(dias_semana); //comprobamos que el array tiene elemento "Juernes" añadido
</script>
2.2.2 Calcula el número de elementos de un array con la propiedad length
<script> var dias_semana = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"]; numero_dias = dias_semana.length; console.log(numero_dias); //comprobamos que el array tiene elemento "Juernes" añadido </script>
2.2.3 Borrar elemento de un array con la función delete
Cuando se utiliza este método lo que realmente hace es eliminarlo pero deja el espacio en blanco.
<script>
var dias_semana = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
delete dias_semana [3]; //Borramos el Jueves. Esto genera la ranura 3 vacia
console.log(dias_semana); //comprobamos que el array tiene elemento "Juernes" añadido
</script>
2.2.4 Actualizar los elementos de un array
Nos ayudará o bien a reemplazar un elemento que ya se encuentra en una variable o para completar un espacio vacío como en el caso anterior.
<script> var dias_semana = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"]; //Borramos el Jueves. Esto genera la ranura 3 vacia delete dias_semana [3]; //Actualizamos el espacio vacio 3 nuevamente dias_semana [3] = "Jueves"; // Ahora vamos a actualizar el elemento "Jueves" por "Juernes" dias_semana [3] = "Juernes"; console.log(dias_semana); //comprobamos que el array tiene elemento "Juernes" añadido </script>
Todos los métodos o referencias para las arrays
3. Operadores
Los operadores son elementos que nos permiten cambiar el valor de las variables, comparar diferentes variables y realizar operaciones matemáticas. Los operadores permiten a los programas omar decisiones lógicas en función de comparaciones y otros tipos de condiciones y realizar cálculos complejos.
- Asignación (=)
- Incremento y decremeto (++) | (–)
- Lógicos
– Negación (!)
– AND (&&)
– OR (||) - Matemáticos suma (
+), resta (-), multiplicación (*) y división (/) y el operador «módulo» (%) ver documentación para entender - Relacionales mayor que (
>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que (==) y distinto de (!=)
Ver todos los operadores disponibles
Ejercicio
A partir del siguiente array que se proporciona: var valores = [true, 5, false, "hola", "adios", 2];
- Determinar cual de los dos elementos de texto es mayor
- Utilizando exclusivamente los dos valores booleanos del array, determinar los operadores necesarios para obtener un resultado
truey otro resultadofalse - Determinar el resultado de las cinco operaciones matemáticas realizadas con los dos elementos numéricos
Solución
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejercico</title>
</head>
<body>
<script>
valores = [true, 5, false, "hola", "adiós",2];
//1. Determinar cual de los dos elementos de texto es mayor
// Si el resultado es true el primer texto es mayor
texto_mayor = valores[3] > valores[4];
alert(texto_mayor);
/*2. Utilizando exclusivamente los dos valores booleanos del array, determinar los operadores necesarios para obtener un resultado true y otro resultado false*/
valor_true = valores [0];
valor_false = valores [2];
//Obtener resulatdo true
resultado_true = valor_true || valor_true;
alert(resultado_true)
//Obtener resultado false
resultado_false = valor_true && valor_false;
alert(resultado_false);
/*Determinar el resultado de las cinco operaciones matemáticas realizadas con los dos elementos numéricos*/
numero_1 = valores[1];
numero_2 = valores[5];
// Suma
suma = numero_1 + numero_2;
alert(suma);
// resta
resta = numero_1 - numero_2;
alert(resta);
//división
division = numero_1 / numero_2;
alert(division);
//multiplicacion
multiplicacion = numero_1 * numero_2;
alert(multiplicacion);
</script>
<p>Esta página es para hacer ejercicos de Java Script</p>
</body>
4. Funciones estructuradas
Para poder realizar programas que cumplan condiciones son necesarias las estructuras de control de flujo que son instrucciones tipo «si se cumple esta condición, hazlo; si no, haz esto otro». Existen otras instrucciones del tipo » repite estos mientras se cumpla esta condición» y que convierten estos programas en inteligentes para tomar decisiones en función de las variable.
4.1 La función «IF» y «IF…ELSE»
Esta estructura es la más utilizada en la gran mayoría de los lenguajes de programación y se emplea para tomar decisiones en función de una condición y se define así:
if (condición) {
/*Si la función devuelve un true se cumplirá y ejecutará las instrucciones que van dentro
de los corchetes y si la función devuelve un false no se ejecuta y el programa continua
el resto de instrucciones del script y en este caso parara*/
...
}
if(condicion) { /*Si la función devuelve un true se cumplirá y ejecutara la instrucción de va dentro de los corchetes y si devuelve false ejecutara la instrucción que va después de la función else*/ ... } else { // Esta instrucción se ejecutará siempre y cuando la del "IF" sea false ... }
La estructura if...else se puede encadenar para realizar varias comprobaciones seguidas:
<script>
edad = 38;
if(edad < 12) {
alert("Todavía eres muy pequeño");
}
else if(edad < 19) {
alert("Eres un adolescente");
}
else if(edad < 35) {
alert("Aun sigues siendo joven");
}
else {
alert("Piensa en cuidarte un poco más");
}
//la combinación no es obligatorio que acabe con else puede acabar con un eles if
// En este caso nos mostrará un mensaje diciendo: Piensa en cuidarte un poco mas
</script>
Ejemplo:
//Ejemplo con if
<script>
//definimos variable booleana
Mostrar_mensaje = true
if (Mostrar_mensaje) {
/*como la condición es true muestra en pantalla un mensaje
con el texto Hola Joaquín*/
alert ( "Hola Joaquín")
}
</script>
//Ejemplo con if... else
<script>
edad = 18;
if (edad >=18){
alert (" Eres Mayor de edad")
}else{
alert ("Todavía no eres mayor de edad")
}
</script>
Otros ejemplos
<script>
//Ejemplo 2
//definimos variable string
nombre = "Joaquin";
/*Ahora decimos que si la condición de la variable nombre es igual (==)
a Joaquín lo escribe en consola "El nombre es Jaquin" y si no se escribe
"El nombre no es Joaquín"*/
if (nombre == "Joaquin") {
console.log ("El nombre es Joaquin")
}else{
console.log ("El nombre no es Joaquín")
}
/*En este caso escribirá "El nombre es Jaquin" en consola porque devuel true*/
</script>
<script>
//Ejemplo 3
//definimos variable string
nombre = "Joaquin";
//definomos variable integer
edad = 38;
//definimos variable bolleana
admin = true;
/*Ahora vamos a definir 2 comparaciones donde se tiene que cumplir las 2
para que devuelva un true con el operador "&&" que se traduce como un Y*/
if (edad < 50 && admin) {
console.log ("Este usuario es administrador y tiene menos de 50 años")
}else{
console.log ("Este usuario no es administrador o no tiene menos de 50 años")
}
</script>
<script>
//Ejemplo 4
//definimos variable string
nombre = "Joaquin";
//definomos variable integer
edad = 78;
//definimos variable bolleana
admin = false;
/*Ahora vamos a definir 2 comparaciones donde SOLO se tiene que cumplir las 1 de ellas
para que devuelva un true con el operador "||" que se traduce como un "O"*/
if (nombre == "joaquín" || admin) {
console.log ("Este usuario es administrador o se llama Joaquín")
}else{
console.log ("Este usuario no es administrador ni se llama Joaquín")
}
</script>
<script>
// Ejemplo 5
// defino una variabel boolena falsa
mostrado = false;
// para que la condición se cumpla en negación ponemos el operador de negación "!"
if (!mostrado) {
console.log ("Estoy utilizando un operador de negación")
}else{
console.log ("La variable por lo visto es verdadera")
}
</script>
Ejercicio
Completar las condiciones de los if del siguiente script para que los mensajes de los alert() se muestren siempre de forma correcta:
var numero1 = 5;
var numero2 = 8;
if(...) {
alert("numero1 no es mayor que numero2");
}
if(...) {
alert("numero2 es positivo");
}
if(...) {
alert("numero1 es negativo o distinto de cero");
}
if(...) {
alert("Incrementar en 1 unidad el valor de numero1 no lo hace mayor o igual que numero2");
}
Solución:
<script>
//esta vez se han deficnido las variables con var. Funcionaria igual si no se hace
var numero1 = 5;
var numero2 = 8;
if(numero1<=numero2) {
alert("numero1 no es mayor que numero2");
}
if(numero2 >= 0) {
alert("numero2 es positivo");
}
if(numero1 < 0 || numero1 !=0) {
alert("numero1 es negativo o distinto de cero");
}
if(++numero1 < numero2) {
alert("Incrementar en 1 unidad el valor de numero1 no lo hace mayor o igual que numero2");
}
</script>
Ejercicio 2
Solución
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 6 - Calculo de la letra del DNI</title>
<script>
//Esta es la variable array de las letras ya dadas
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
//estas variable tiene la función prompt que pide al usuario en pantalla el númeor y la letra
var numero = prompt("Introduce tu número de DNI (sin la letra)");
var letra = prompt("Introduce la letra de tu DNI (en mayúsculas)");
/*la variable letra la formateamos con la función toUpperCase para que sea siempre mayuscula y pueda compararlas con la variable letras del array */
letra = letra.toUpperCase();
/*empezamo la fucnión definiendo que el valor debe estar entre estas condiciones*/
if(numero < 0 || numero > 99999999) {
alert("El número proporcionado no es válido");
}
/* Si valores son correctos definimos 2 variable nuevas*/
else {
//El operador módulo en JavaScript se indica mediante el símbolo %, que no debe confundirse con el cálculo del porcentaje
/*Para calcular el operador modulo la instrucción utiliza esta operación matemática: Ejemplo:
Si introducimos el número 21688025 y lo dividimos entre 23 lo que queda después de la , es 609
ahora este valor lo multiplicamos por el divisor de esta forma 0,609 * 23 = 14,007 el 14 es el
número que necesitamos y si vamos al array "letras" vemos que es la Z*/
var letraCalculada = letras[numero % 23];
if(letraCalculada != letra) {
alert("La letra o el número proporcionados no son correctos");
}
else {
alert("El número de DNI y su letra son correctos");
}
}
</script>
</head>
<body>
<p>Esta página calcula la letra del DNI</p>
</body>
</html>
4.2 La Función For
La estructura for nos permite realizar bucles siempre y cuando cumplan una condición y se define como:
for(inicializacion; condicion; actualizacion) {
...
}
//Así se podría defir formalmente el código
for (var i = 0; i < 10; i++) {
...
}
Vemos, que dentro de los paréntesis del for existen tres instrucciones que se deben cumplir para poder crear el bucle.
La inicialización es donde definimos los valores iniciales del bucle. Seguidamente busca la condición (que es una especie de If) donde se decide según la instrucción si sigue o no, o sea, que mientras su valor sea true se repetirá el bucle hasta que ese valor sea false. Y por último llega hasta la actualización que es el nuevo valor que se asigna a la variable de la inicialización después de cada repetición.
Ejemplo 1
//esta es una de las funciones de for mas sencillas
/*Lo que hará esta función es mostrar en la consola la lista de números generada desde 0 hasta 9*/
for (var i = 0; i < 10; i++) {
console.log(i+" Dame tiempo, estoy contando...");
}
Ejemplo 2
Ahora utilicemos la misma función for del ejemplo 1 mezclando la función If…else para pedirle un usuario el número que quiere que cuente y mostrándole unos mensaje dependiendo de una condiciones.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejercicio 2</title>
</head>
<body>
<script>
//Pedimos el número al usuario y lo mostramos en pantalla con la función rpompt
get_num = prompt("Necesito el número con el que quieres que empecemos el bucle.\nRecuerda que el númeor debe estar entre 0 y 9");
/*definimos una variable para crear una condición donde que el número proporcionado por el usuario
estre entre 0 y 9 */
valor_false = get_num < 0 || get_num > 10;
/*Utilizamos la función if para mostrar unos mensajes en pantalla para confirmale al usuario si ha introducido bien el número o no*/
if (valor_false) {
alert("El numero proporcionado no es correcto");
}else{
alert("Enhorabuena, el número proporcionado es correcto y ahora te mostraremos el bucle solicitradio");
}
//Si el númeor es correcto entra en la función bucle for
for(var i = get_num ; i > 0 && i < 10; i++) {
alert(i);
}
/*Ahora declaramos otra función if donde muestra en pantalla 2 mensajes dependiendo de la condición de la variable valor_false*/
if (valor_false) {
alert("Lo sentimos, vuelve a intentarlo pulsando f5");
}else{
alert("Gracias por utilizar el contador de Joaquín");
}
</script>
<h2>Página web que cuenta números</h2>
</body>
</html>
4.3 La función switch
Esta función es una especie de conmutador que utiliza la variable asignada y la compara con distintos casos (case) que habrán dentro del switch.
Definición
<script>
variable = "valor";
switch (variable){
case "valor"://(OJO son dos puntos)
....
break;
case "valor 2":
....
break;
//asi cuantos case necesitemos
/*Si no existe ningún caso de los anteriores se ejecuta la siguiente instrucción*/
default:
alert (esto se muestra porque no se cumplió ningún caso);
}
</script>
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>funcion o estructura switch</title>
</head>
<body>
<script>
variable = "valor";
switch(variable){
/*Esta fucnión empieza aquí y busca un case (caso) que se cumpla la condición de la variable que esta entre corchetes*/
/*En este caso la encuentra aquí y encuentra el break */
case "valor":
alert("Muestro la variable con su valor");
/*Es muy importante poner el break por que si no seguira ejecuntado la función hasta terminar los casos*/
break;
case "valor_2":
alet("esta no es la variable del valor del switch");
break;
//podemos poner los case que necesitemos
/*Si no existe ningún caso de los anteriores se ejecuta la siguiente instrucción*/
default:
alert (esto se muestra porque no se cumplió ningún caso);
}
</script>
</body>
</html>
5. Funciones.
Una función es un código de JavaScript encapsulado (conjunto de instrucciones) bajo una palabra dada por nosotros que además le podemos dar unos parámetros y que se ejecutará tantas veces como se lo hayamos indicado. Sirven principalmente para no repetir varias veces alguna instrucción utilizada en el código y de esta forma reutilizarla fácilmente.
Definición
<script>
function nombre_de_la_función (Puden ir argumentos) {
//Aquí ira el código que necesitemos
}
nombre_de_la_función (van los argumentos de arriba);
</script>
Ejemplo
Vamos a crear una función que sume 2 variables.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Creando funciones</title>
</head>
<body>
<script>
function sumar(num1, num2) {
/*definimos una variable con el prefijo "var" para que sea exclusivas dentro de la función
para que no se ejecute en otro sitio si volvemos a llamarla*/
var suma_total = num1 + num2;
//Mostramos en pantalla los resultados
alert(suma_total);
}
//Ejecutamos la función
sumar(2, 4);
sumar(10, 11);
//y así tantas veces necesitemos.
</script>
<script>
/*Como las funciones siempre tiene que devolver algo tenemos que usar "return"*/
function sumar(num1, num2) {
var suma_total = num1 + num2;
return suma_total;
}
//Ejecutamos la función
resultado = sumar(2, 4);
console.log (resultado);
</script>
</body>
</html>
Vamos a crear a continuación tres funciones que hagan lo mismo, calcular el impuesto de un precio, pero definidas dentro del código de la función de distinta manera.
Ejemplo 2.1
Función con los valores dados en los argumentos de la llamada de la función.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Obtener iva de un producto</title>
</head>
<body>
<h1>Obtener impuestos de productos</h1>
<script>
/*Vamos a crear una función que calcule el iva de un precio*/
/*Declaramos la función y le damos un nombre y entre los corchetes definimos los argumentos*/
function calculo_iva (precio, iva) {
/*ahora declaramos una variable con la palabra "var (para que solo funcione dentro de esta función)
con en cálculo del precio de iva"*/
var precio_con_iva = precio * iva;
//ponemos el return para que nos devuelva el resultado
return precio_con_iva;
}
//Definimos una variabel con la función de los valores que vamos a usar
precio_final = calculo_iva (10, 1.21)
alert (Este es el precio con el impuesto aplicado " + precio_final + "€");
</script>
</body>
</html>
Ejemplo 2.2
Ahora creamos una función exactamente igual pero uno de los valores de los argumentos ya lo definimos en la función, así cuando llamamos a la función no hace falta darle ese valor ya que es fijo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Obtener iva de un producto</title>
</head>
<body>
<h1>Obtener impuestos de productos</h1>
<script>
/*Vamos a crear una función que calcule el iva de un precio*/
/*Declaramos la función y le damos un nombre y entre los corchetes definimos los argumentos y a uno de ellos ya lo declaramos con el valor ya que es fijo*/
function calculo_iva (precio, iva = 1.21) {
/*ahora declaramos una variable con la palabra "var"*/
var precio_con_iva = precio * iva;
//ponemos el return para que nos devuelva el resultado
return precio_con_iva;
}
/*Definimos una variable con la función de los valores que vamos a usar. solo damos un valor ya que el del otro argumento ya se lo hemos dado arriba*/
precio_final = calculo_iva (10)
alert Este es el precio con el impuesto aplicado " + precio_final + "€");
</script>
</body>
</html>
Ejemplo 2.3
Por último, haremos lo mismo qua anteriormente pero vamos a pedirle al usuario los valores que quiere calcular, ya que como sabemos, tenemos varios ivas y el ususario podra definir el suyo.
<script>
/*Vamos a crear una función que calcule el iva de un precio*/
/*Declaramos la función y no ponemos los argumentos ya que los pediremos dentro de la función con la propiedad prompt*/
function calculo_iva () {
/*Declaramos las variable con la palabra "var" que vamos a pedir al usuario*/
var precio = prompt ("Introduzca el precio para calcualr el iva");
var iva = prompt ("Introduzca el iva a calcular");
//creamos una variable que convierta el iva al númeor que necesitamos.
var iva_convertido = (iva / 100) + 1;
// Finalizamos declarando una función con el calculo final
var precio_con_iva = precio * iva_convertido;
//ponemos el return para que nos devuelva el resultado
return precio_con_iva;
}
/*Definimos una variable con la función de los valores que vamos a usar. solo damos un valor ya que el del otro argumento ya se lo hemos dado arriba*/
precio_final = calculo_iva ()
alert (Este es el precio con el impuesto aplicado " + precio_final + "€");
</script>
Ejercicio 1.
Escribir el código de una función a la que se pasa como parámetro un número entero y devuelve como resultado una cadena de texto que indica si el número es par o impar. Mostrar por pantalla el resultado devuelto por la función.
Solución 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Obtener iva de un producto</title>
</head>
<body>
<h1>Obtener si un numero es par o impar</h1>
<script>
function num_par_impar (){
//Pedimos el numero al usuario
var numero = prompt ("Escriba un número entero y yo le diré si es par o impar");
//Calculamos con el operador "modulo" el número dado por el usuario
var numeroparoimpar = numero % 2;
/*Si el resultado de la división en caso de que sea el número PAR del cálculos del operador "modulo" sea 0 (cero) este será interpretado
en los condicionales o en un operador ternario <strong>como un FALSE*/</strong>
if (numeroparoimpar == false){
alert ("El número " + numero + " es par");
}else{
alert ("El número " + numero + " es impar");
}
return numeroparoimpar
}
num_par_impar();
</script>
</body>
</html>
Solución 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 8 - Funciones básicas</title>
<script type="text/javascript">
var numero = prompt("Introduce un número entero");
var resultado = parImpar(numero);
alert("El número "+numero+" es "+resultado);
function parImpar(numero) {
if(numero % 2 == 0) {
return "par";
}
else {
return "impar";
}
}
</script>
</head>
<body>
</body>
</html>
Ejercicio 2.
Definir una función que muestre información sobre una cadena de texto que se le pasa como argumento. A partir de la cadena que se le pasa, la función determina si esa cadena está formada sólo por mayúsculas, sólo por minúsculas o por una mezcla de ambas.
Solución 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Solución por ximo</title>
</head>
<body>
<h1>Obtener si una cadena de texto esta compuesta por mayusculas o minusculas</h1>
<script type="text/javascript">
//pedimos al usuario que nos de el texto
texto = prompt ("Pon un texto");
function info (){
//Comprobamos si es mayuscula o miniscula
if(texto == texto.toUpperCase()){
alert ("El texto "+texto+" esta en mayusculas")
} else if (texto == texto.toLowerCase()){
alert ("El texto "+texto+" esta en minusculas")
}else{
alert ("El texto "+texto+" esta en minusculas y mayusculas")
}
return texto;
}
info();
</script>
<body>
</body>
</html>
Solución 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Obtener iva de un producto</title>
</head>
<body>
<h1>Obtener si una cadena de texto esta compuesta por mayusculas o minisculas</h1>
<script>
texto = prompt ("Pon un texto");
function info (texto){
//var resultado = "El cadena \ ""+texto+"\" ";
var resultado = "El texto \""+texto+"\" ";
//Comprobamos si es mayuscula o miniscula
if(texto == texto.toUpperCase()){
// despues de la variable resulatdo "+=" para concatenar los texto y definir la variable
resultado += " esta formado solo por mayusculas";
} else if (texto == texto.toLowerCase()){
resultado += " esta cadena solo por minusculas";
}else{
resultado += " esta formada por mayusculas y minusculas"
}
return resultado;
}
alert (info(texto));
</script>
</body>
</html>
6. Bucles
Los bucles no es más que una repetición (recorrido) de un código hasta que se cumpla una condición donde se detendrá para no entrar en un «bucle» infinito y crear un crack en la web.
Existen varias sentencia (funciones) diferentes para ejecutar un bucle y se diferencian en donde se determina el punto de inicio y final de dicha sentencia . La cuestión es determinar que tipo de sentencia es la más apropiada para recorrer las variables. Veamos los más usados.
6.1 Sentencia for
Esta función ya la estudiamos en el capítulo de Funciones estructuradas.
6.X Bucles que recorren arrays
6.X.x Sentencia for…in
Es una función muy usada en objetos pero se trabaja también muy bien para recorrer todas las variables de un array devolviendo el índice de las variable.
definición
for(indice in array) {
//función a ejecutar
}
Ejemplo
<script>
var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
for (dato in meses){
console.log(dato);
}
</script>
En consola muestra los índices
6.X.x Sentencia for…of
Es una función muy usada en objetos pero se trabaja también muy bien para recorrer todas las variables de un array devolviendo el elemento de las variable.
definición
for(indice of array) {
//función a ejecutar
}
Ejemplo
<script>
var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
for (dato of meses){
console.log(dato);
}
</script>
En consola muestra los elemento
Deja una respuesta