Diferencia entre revisiones de «Usuario:Juanda/javascript/Sintaxis»
De WikiEducator
(→Ámbito de las variables) |
|||
(15 revisiones intermedias por el mismo usuario no mostrado) | |||
Línea 222: | Línea 222: | ||
<div class="slide"> | <div class="slide"> | ||
− | + | ||
====Operadores de incremento y decremento==== | ====Operadores de incremento y decremento==== | ||
+ | <source lang="javascript"> | ||
var numero = 5; | var numero = 5; | ||
numero=numero +1; | numero=numero +1; | ||
Línea 242: | Línea 243: | ||
</source> | </source> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
Los operadores incremento y decremento se pueden ejecutar como prefijo o sufijo: | Los operadores incremento y decremento se pueden ejecutar como prefijo o sufijo: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Línea 257: | Línea 260: | ||
<div class="slide"> | <div class="slide"> | ||
+ | |||
====Operadores lógicos==== | ====Operadores lógicos==== | ||
*Negación | *Negación | ||
Línea 274: | Línea 278: | ||
resultado = valor1 && valor2; // resultado = true | resultado = valor1 && valor2; // resultado = true | ||
</source> | </source> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
*OR | *OR | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Línea 289: | Línea 295: | ||
<div class="slide"> | <div class="slide"> | ||
+ | |||
====Operadores matemáticos==== | ====Operadores matemáticos==== | ||
<pre> | <pre> | ||
Línea 314: | Línea 321: | ||
+ | <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