Diferencia entre revisiones de «Usuario:Juanda/javascript/Sintaxis»
De WikiEducator
(→Variables) |
(→Ámbito de las variables) |
||
(27 revisiones intermedias por el mismo usuario no mostrado) | |||
Línea 5: | Línea 5: | ||
<div class="slide"> | <div class="slide"> | ||
− | + | =Elementos del lenguaje= | |
+ | |||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
Línea 60: | Línea 61: | ||
</source> | </source> | ||
Las variables se pueden declarar e inicializar a la vez. Si es texto, ¡entre comillas! | Las variables se pueden declarar e inicializar a la vez. Si es texto, ¡entre comillas! | ||
− | + | </div> | |
+ | <div class="slide"> | ||
*Se pueden utilizar variables sin haber sido declaradas: | *Se pueden utilizar variables sin haber sido declaradas: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Línea 91: | Línea 93: | ||
var texto2 = 'Una frase con "comillas dobles" dentro'; | var texto2 = 'Una frase con "comillas dobles" dentro'; | ||
</source> | </source> | ||
− | + | </div> | |
+ | <div class="slide"> | ||
*Caracteres especiales: | *Caracteres especiales: | ||
<pre> | <pre> | ||
Línea 110: | Línea 113: | ||
Title=Ejercicio 3| | Title=Ejercicio 3| | ||
Crea una página que guarde un texto en una variable y lo muestre luego por pantalla: | Crea una página que guarde un texto en una variable y lo muestre luego por pantalla: | ||
+ | [[Archivo:ejercicio3.png|300px|thumb|left|Pantallazo ejercicio]] | ||
+ | }} | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | * Solución ejercicio 3: | ||
+ | <source lang="html4strict"> | ||
+ | <!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=utf-8" /> | ||
+ | <title>Ejercicio 2 - Mostrar mensajes complejos</title> | ||
+ | <script type="text/javascript"> | ||
+ | var msg = "Hola Mundo! \n Qué facil es incluir \'comillas simples\' \n y \"comillas dobles\" "; | ||
+ | alert(msg); | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <p>Esta página muestra un mensaje complejo</p> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | |||
+ | ===Arrays=== | ||
+ | Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente. | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | //variables para los días de la semana: | ||
+ | var dia1 = "Lunes"; | ||
+ | var dia2 = "Martes"; | ||
+ | ... | ||
+ | var dia7 = "Domingo"; | ||
+ | //usando un array: | ||
+ | var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"]; | ||
+ | //el array empieza en 0 | ||
+ | var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes" | ||
+ | var otroDia = dias[5]; // otroDia = "Sábado" | ||
+ | </source> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | {{DGA tarea| | ||
+ | Title=Ejercicio 4| | ||
+ | Crear un array llamado meses y que almacene el nombre de los doce meses del año. Mostrar por pantalla los doce nombres utilizando la función alert(). | ||
}} | }} | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | * Solución ejercicio 4: | ||
+ | <source lang="html4strict"> | ||
+ | <!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=utf-8" /> | ||
+ | <title>Ejercicio 3 - Arrays simples</title> | ||
+ | <script type="text/javascript"> | ||
+ | var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", “Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]; | ||
+ | alert(meses[0]); alert(meses[1]);alert(meses[2]);alert(meses[3]); | ||
+ | alert(meses[4]); alert(meses[5]);alert(meses[6]);alert(meses[7]); | ||
+ | alert(meses[8]); alert(meses[9]);alert(meses[10]);alert(meses[11]); | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <p>Esta página muestra los 12 meses del año</p> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
</div> | </div> | ||
+ | <div class="slide"> | ||
+ | ===Booleanos=== | ||
+ | Puede tener 2 valores: false o true. | ||
+ | Trabajaremos con ellos en programación más avanzada de JavaScript. | ||
+ | Ejemplos: | ||
+ | <source lang="javascript"> | ||
+ | var clienteRegistrado = false; | ||
+ | var ivaIncluido = true; | ||
+ | </source> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ===Operadores=== | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ====Operadores de asignación==== | ||
+ | <pre> | ||
+ | = += -= *= /= %= | ||
+ | </pre> | ||
+ | <source lang="javascript"> | ||
+ | var numero1 = 3; | ||
+ | var numero2 = 4; | ||
+ | |||
+ | 5 = numero1; | ||
+ | /* Error, la asignación siempre se realiza a una variable, | ||
+ | por lo que en la izquierda no se puede indicar un número */ | ||
+ | // Ahora, la variable numero1 vale 5 | ||
+ | numero1 = 5; | ||
+ | // Ahora, la variable numero1 vale 4 | ||
+ | numero1 = numero2; | ||
+ | </source> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | |||
+ | ====Operadores de incremento y decremento==== | ||
+ | <source lang="javascript"> | ||
+ | var numero = 5; | ||
+ | numero=numero +1; | ||
+ | alert(numero); // numero = 6 | ||
+ | |||
+ | var numero = 5; | ||
+ | ++numero; | ||
+ | alert(numero); // numero = 6 | ||
+ | |||
+ | |||
+ | var numero = 5; | ||
+ | numero=numero - 1; | ||
+ | alert(numero); // numero = 4 | ||
+ | |||
+ | var numero = 5; | ||
+ | --numero; | ||
+ | alert(numero); // numero = 4 | ||
+ | |||
+ | </source> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | Los operadores incremento y decremento se pueden ejecutar como prefijo o sufijo: | ||
+ | <source lang="javascript"> | ||
+ | var numero1 = 5; | ||
+ | var numero2 = 2; | ||
+ | numero3 = numero1++ + numero2; | ||
+ | // numero3 = 7, numero1 = 6 | ||
+ | |||
+ | var numero1 = 5; | ||
+ | var numero2 = 2; | ||
+ | numero3 = ++numero1 + numero2; | ||
+ | // numero3 = 8, numero1 = 6 | ||
+ | </source> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | |||
+ | ====Operadores lógicos==== | ||
+ | *Negación | ||
+ | <source lang="javascript"> | ||
+ | var visible = true; | ||
+ | alert(!visible); // Muestra "false" y no "true" | ||
+ | </source> | ||
+ | |||
+ | *AND | ||
+ | <source lang="javascript"> | ||
+ | var valor1 = true; | ||
+ | var valor2 = false; | ||
+ | resultado = valor1 && valor2; // resultado = false | ||
+ | |||
+ | valor1 = true; | ||
+ | valor2 = true; | ||
+ | resultado = valor1 && valor2; // resultado = true | ||
+ | </source> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | *OR | ||
+ | <source lang="javascript"> | ||
+ | var valor1 = true; | ||
+ | var valor2 = false; | ||
+ | resultado = valor1 || valor2; // resultado = true | ||
+ | |||
+ | valor1 = false; | ||
+ | valor2 = false; | ||
+ | resultado = valor1 || valor2; // resultado = false | ||
+ | </source> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | |||
+ | ====Operadores matemáticos==== | ||
+ | <pre> | ||
+ | + - * / % | ||
+ | </pre> | ||
+ | *Ejemplos: | ||
+ | <source lang="javascript"> | ||
+ | var numero1 = 10; | ||
+ | var numero2 = 5; | ||
+ | resultado = numero1 / numero2; // resultado = 2 | ||
+ | resultado = numero1 % numero2; // resultado = 0 | ||
+ | |||
+ | numero1 = 9; | ||
+ | numero2 = 5; | ||
+ | resultado = numero1 % numero2; // resultado = 4 | ||
+ | |||
+ | var numero1 = 5; | ||
+ | numero1 += 3; // numero1 = numero1 + 3 = 8 | ||
+ | numero1 -= 1; // numero1 = numero1 - 1 = 4 | ||
+ | numero1 *= 2; // numero1 = numero1 * 2 = 10 | ||
+ | numero1 /= 5; // numero1 = numero1 / 5 = 1 | ||
+ | numero1 %= 4; // numero1 = numero1 % 4 = 1 | ||
+ | </source> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="slide"> | ||
+ | ====Operadores relacionales==== | ||
+ | Son: mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que (==) y distinto de (!=) | ||
+ | <source lang="javascript"> | ||
+ | |||
+ | |||
+ | var numero1 = 3; | ||
+ | var numero2 = 5; | ||
+ | resultado = numero1 > numero2; // resultado = false | ||
+ | resultado = numero1 < numero2; // resultado = true | ||
+ | |||
+ | numero1 = 5; | ||
+ | numero2 = 5; | ||
+ | resultado = numero1 >= numero2; // resultado = true | ||
+ | resultado = numero1 <= numero2; // resultado = true | ||
+ | resultado = numero1 == numero2; // resultado = true | ||
+ | resultado = numero1 != numero2; // resultado = false | ||
+ | |||
+ | </source> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | |||
+ | ===Sentencias condicionales=== | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ====if-else==== | ||
+ | *Ejemplo de uso de if en una sentencia condicional | ||
+ | <source lang="javascript"> | ||
+ | <script type="text/javascript"> | ||
+ | //Escribe “A desayunar” si son las 9 | ||
+ | var d=new Date(); | ||
+ | var time=d.getHours(); | ||
+ | if (time==9) | ||
+ | { | ||
+ | document.write("<b>¡A desayunar!</b>"); | ||
+ | } | ||
+ | </script> | ||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ====if-else if - else==== | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | <script type="text/javascript"> | ||
+ | var d = new Date() | ||
+ | var time = d.getHours() | ||
+ | if (time>6 && time<=14) | ||
+ | { | ||
+ | document.write("<b>Buenos días</b>"); | ||
+ | } | ||
+ | else if (time>14 && time<22) | ||
+ | { | ||
+ | document.write("<b>Buenas tardes</b>"); | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | document.write("<b>Buenas noches</b>"); | ||
+ | } | ||
+ | </script> | ||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ====switch==== | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | <script type="text/javascript"> | ||
+ | //Recibes diferente saludo en función del día de la semana en que estemos | ||
+ | //Domingo=0, Lunes=1 etc. | ||
+ | var d=new Date(); | ||
+ | dia=d.getDay(); | ||
+ | switch (dia) | ||
+ | { | ||
+ | case 5: | ||
+ | document.write("Por fin viernes"); | ||
+ | break; | ||
+ | case 6: | ||
+ | document.write("Sábado fiestuqui"); | ||
+ | break; | ||
+ | case 0: | ||
+ | document.write("A dormir que es domingo"); | ||
+ | break; | ||
+ | default: | ||
+ | document.write("¡A ver si llega el fin de semana!"); | ||
+ | } | ||
+ | </script> | ||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ===Ventanas popup=== | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ====Alert Box==== | ||
+ | Presentan un botón de ok. Simplemente muestran información. | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <script type="text/javascript"> | ||
+ | function mostrar_alerta() | ||
+ | { | ||
+ | alert("¡Hola!" + '\n' + "Me has pulsado!"); | ||
+ | } | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <input type="button" onclick="mostrar_alerta()" value="Mostrar ventana de alerta" /> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ====Prompt Box==== | ||
+ | Se utilizan para que el usuario introduzca un valor antes de entrar a la página. | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <script type="text/javascript"> | ||
+ | function disp_prompt() | ||
+ | { | ||
+ | var nombre=prompt("Por favor escribe aquí tu nombre","Pepito piscinas"); | ||
+ | if (nombre!=null && nombre!="") | ||
+ | { | ||
+ | document.write("Hola " + nombre + "¿Qué tal estás?"); | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <input type="button" onclick="disp_prompt()" value="Mostrar un prompt box" /> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ====Confirm Box==== | ||
+ | Presentan un botón de ok y otro de cancelar. Devuelven verdadero (ok) o falso (cancel). | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <script type="text/javascript"> | ||
+ | function disp_confirm() | ||
+ | { | ||
+ | var r=confirm("Pulsa un botón"); | ||
+ | if (r==true) | ||
+ | { | ||
+ | document.write("¡Has pulsado el botón de OK!"); | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | document.write("¡Has pulsado el botón de cancelar!"); | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <input type="button" onclick="disp_confirm()" value="Mostrar un confirm box" /> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="slide"> | ||
+ | ===Bucle for=== | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <body> | ||
+ | <script type="text/javascript"> | ||
+ | var i=0; | ||
+ | for (i=0;i<=10;i++) | ||
+ | { | ||
+ | document.write("El número es " + i); | ||
+ | document.write("<br />"); | ||
+ | } | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | <pre> | ||
+ | Resultado: | ||
+ | El número es 0 | ||
+ | El número es 1 | ||
+ | El número es 2 | ||
+ | .... | ||
+ | El número es 10 | ||
+ | </pre> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="slide"> | ||
+ | ===Bucle while=== | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <body> | ||
+ | <script type="text/javascript"> | ||
+ | var i=0; | ||
+ | while (i<=10) | ||
+ | { | ||
+ | document.write("El número es " + i); | ||
+ | document.write("<br />"); | ||
+ | i=i+1; | ||
+ | } | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | <pre> | ||
+ | Resultado: | ||
+ | El número es 0 | ||
+ | El número es 1 | ||
+ | El número es 2 | ||
+ | .... | ||
+ | El número es 10 | ||
+ | </pre> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="slide"> | ||
+ | ===Bucle do ... while=== | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <body> | ||
+ | <script type="text/javascript"> | ||
+ | var i=0; | ||
+ | do | ||
+ | { | ||
+ | document.write("El número es " + i); | ||
+ | document.write("<br />"); | ||
+ | i=i+1; | ||
+ | } | ||
+ | while (i<0); | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | <pre> | ||
+ | Resultado: | ||
+ | El número es 0 | ||
+ | </pre> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ===break=== | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <body> | ||
+ | <script type="text/javascript"> | ||
+ | var i=0; | ||
+ | for (i=0;i<=10;i++) | ||
+ | { | ||
+ | if (i==3) | ||
+ | { | ||
+ | break; | ||
+ | } | ||
+ | document.write("El número es " + i); | ||
+ | document.write("<br />"); | ||
+ | } | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | </source> | ||
+ | <pre> | ||
+ | Resultado: | ||
+ | El número es 0 | ||
+ | El número es 1 | ||
+ | El número es 2 | ||
+ | </pre> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="slide"> | ||
+ | ===continue=== | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <body> | ||
+ | <script type="text/javascript"> | ||
+ | var i=0 | ||
+ | for (i=0;i<=4;i++) | ||
+ | { | ||
+ | if (i==3) | ||
+ | { | ||
+ | continue; | ||
+ | } | ||
+ | document.write(“El número es " + i); | ||
+ | document.write("<br />"); | ||
+ | } | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | |||
+ | </source> | ||
+ | <pre> | ||
+ | Resultado: | ||
+ | El número es 0 | ||
+ | El número es 1 | ||
+ | El número es 2 | ||
+ | El número es 4 | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="slide"> | ||
+ | ===for (variable in object)=== | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <body> | ||
+ | <script type="text/javascript"> | ||
+ | var x; | ||
+ | var mis_coches = new Array(); | ||
+ | mis_coches[0] = "Saab"; | ||
+ | mis_coches[1] = "Volvo"; | ||
+ | mis_coches[2] = "BMW"; | ||
+ | for (x in mis_coches) | ||
+ | { | ||
+ | document.write(mis_coches[x] + "<br />"); | ||
+ | } | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="slide"> | ||
+ | ===Funciones=== | ||
+ | ====Funciones de usuario==== | ||
+ | <source lang="javascript"> | ||
+ | function nombre_función (var1,var2,...,varX) | ||
+ | { | ||
+ | //aquí iría el código de la función | ||
+ | } | ||
+ | //Ejemplo: | ||
+ | function multiplicar(a,b) | ||
+ | { | ||
+ | x=a*b; | ||
+ | return x; | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | Llamada a la función (se guarda en la variable resultado, declarada previamente): | ||
+ | <source lang="javascript"> | ||
+ | resultado=prod(2,3); | ||
+ | </source> | ||
+ | Las variables son locales a las funciones donde son declaradas. | ||
+ | Las variables definidas fuera de las funciones, pueden ser accedidas desde todas. | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ====Funciones útiles para cadenas de texto==== | ||
+ | <source lang="javascript"> | ||
+ | //length, calcula la longitud de una cadena de texto | ||
+ | var mensaje = "Hola Mundo"; | ||
+ | var numeroLetras = mensaje.length; // numeroLetras = 10 | ||
+ | |||
+ | //+, se emplea para concatenar varias cadenas de texto | ||
+ | var mensaje1 = "Hola"; | ||
+ | var mensaje2 = " Mundo"; | ||
+ | var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo" | ||
+ | |||
+ | //la función concat se utiliza de modo similar al operador + | ||
+ | var mensaje1 = "Hola"; | ||
+ | var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo" | ||
+ | |||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | <source lang="javascript"> | ||
+ | //toUpperCase(), transforma a mayúsculas | ||
+ | |||
+ | var mensaje1 = "Hola"; | ||
+ | var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA" | ||
+ | |||
+ | //toLowerCase(), transforma a minúsculas: | ||
+ | var mensaje1 = "HolA"; | ||
+ | var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola" | ||
+ | |||
+ | //charAt(posicion), obtiene el carácter que se encuentra en la posición indicada: | ||
+ | |||
+ | var mensaje = "Hola"; | ||
+ | var letra = mensaje.charAt(0); // letra = H | ||
+ | letra = mensaje.charAt(2); // letra = l | ||
+ | |||
+ | //indexOf(caracter), calcula la primera ocurrencia del carácter indicado | ||
+ | |||
+ | var mensaje = "Hola"; | ||
+ | var posicion = mensaje.indexOf('a'); // posicion = 3 | ||
+ | posicion = mensaje.indexOf('b'); // posicion = -1 | ||
+ | |||
+ | //lastIndexOf(caracter), empieza a buscar por detrás en la cadena | ||
+ | |||
+ | var mensaje = "Hola"; | ||
+ | var posicion = mensaje.lastIndexOf('a'); // posicion = 3 | ||
+ | |||
+ | //función substring(número), extraer parte de la cadena: | ||
+ | var mensaje = "Hola Mundo"; | ||
+ | porcion = mensaje.substring(5); // porcion = "Mundo" | ||
+ | var porcion = mensaje.substring(1, 8); // porcion = "ola Mun" | ||
+ | |||
+ | //función split para obtener arrays de texto: | ||
+ | var mensaje = "Hola Mundo, soy una cadena de texto!"; | ||
+ | var palabras = mensaje.split(" "); | ||
+ | // palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"]; | ||
+ | |||
+ | //Con esta función se pueden extraer fácilmente las letras que forman una palabra: | ||
+ | var palabra = "Hola"; | ||
+ | var letras = palabra.split(""); // letras = ["H", "o", "l", "a"] | ||
+ | |||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | ====Funciones útiles para arrays==== | ||
+ | <source lang="javascript"> | ||
+ | //length, calcula el número de elementos de un array | ||
+ | var vocales = ["a", "e", "i", "o", "u"]; | ||
+ | var numeroVocales = vocales.length; // numeroVocales = 5 | ||
+ | |||
+ | //concat(), se emplea para concatenar los elementos de varios arrays | ||
+ | var array1 = [1, 2, 3]; | ||
+ | array2 = array1.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6] | ||
+ | |||
+ | //join(separador), es la función contraria a split(). Une los elementos de un array para formar una cadena de texto. | ||
+ | var array = ["hola", "mundo"]; | ||
+ | var mensaje = array.join(""); // mensaje = "holamundo" | ||
+ | //Para unir los elementos se utiliza el carácter separador indicado: | ||
+ | mensaje = array.join(" "); // mensaje = "hola mundo" | ||
+ | |||
+ | //pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento. | ||
+ | var array = [1, 2, 3]; | ||
+ | var ultimo = array.pop(); | ||
+ | // ahora array = [1, 2], ultimo = 3 | ||
+ | |||
+ | push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento. | ||
+ | var array = [1, 2, 3]; | ||
+ | array.push(4); | ||
+ | // ahora array = [1, 2, 3, 4] | ||
+ | |||
+ | //shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuida en 1 elemento. | ||
+ | var array = [1, 2, 3]; | ||
+ | var primero = array.shift(); | ||
+ | // ahora array = [2, 3], primero = 1 | ||
+ | |||
+ | //unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez) | ||
+ | var array = [1, 2, 3]; | ||
+ | array.unshift(0); | ||
+ | // ahora array = [0, 1, 2, 3] | ||
+ | |||
+ | reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original: | ||
+ | var array = [1, 2, 3]; | ||
+ | array.reverse(); | ||
+ | // ahora array = [3, 2, 1] | ||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | |||
+ | ====Funciones útiles para números==== | ||
+ | <source lang="javascript"> | ||
+ | //función isNaN para comprobar si es un número: | ||
+ | var numero1 = 0; | ||
+ | var numero2 = 0; | ||
+ | alert(numero1/numero2); // se muestra el valor NaN | ||
+ | |||
+ | var numero1 = 0; | ||
+ | var numero2 = 0; | ||
+ | if(isNaN(numero1/numero2)) { | ||
+ | alert("La división no está definida para los números indicados"); | ||
+ | } | ||
+ | else { | ||
+ | alert("La división es igual a => " + numero1/numero2); | ||
+ | } | ||
+ | |||
+ | //función toFixed(digitos), devuelve el número con los decimales indicados y los redondeos necesarios: | ||
+ | var numero1 = 4564.34567; | ||
+ | numero1.toFixed(2); // 4564.35 | ||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | ====Ámbito de las variables==== | ||
+ | *'''Variables locales:''' Declaradas dentro de una función. Visibles solo desde la función. | ||
+ | *'''Variables globales:''' Declaradas fuera de las funciones. ¡O sin declarar! | ||
+ | <source lang="javascript"> | ||
+ | function creaMensaje() { | ||
+ | var mensaje = “Mensaje de prueba”; | ||
+ | alert(mensaje); | ||
+ | } | ||
+ | CreaMensaje(); | ||
+ | //variable local, el alert tiene mensaje | ||
+ | |||
+ | function creaMensaje() { | ||
+ | var mensaje = “Mensaje de prueba”; | ||
+ | } | ||
+ | creaMensaje(); | ||
+ | alert(mensaje); | ||
+ | //variable local, el alert vacío | ||
+ | </source> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | <source lang="javascript"> | ||
+ | var mensaje = “Mensaje de prueba”; | ||
+ | |||
+ | function muestraMensaje() { | ||
+ | alert(mensaje); | ||
+ | } | ||
+ | //variable global, el alert tiene mensaje | ||
+ | |||
+ | |||
+ | function creaMensaje() { | ||
+ | mensaje = "Mensaje de prueba"; | ||
+ | } | ||
+ | creaMensaje(); | ||
+ | alert(mensaje); | ||
+ | //variable global, el alert tiene mensaje | ||
+ | </source> | ||
+ | </div> | ||
</div> | </div> |
Última revisión de 11:56 28 sep 2012