Diferencia entre revisiones de «Usuario:Juanda/javascript/Sintaxis»
De WikiEducator
(→Ámbito de las variables) |
|||
| (12 revisiones intermedias por el mismo usuario no mostrado) | |||
| Línea 243: | 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 258: | Línea 260: | ||
<div class="slide"> | <div class="slide"> | ||
| + | |||
====Operadores lógicos==== | ====Operadores lógicos==== | ||
*Negación | *Negación | ||
| Línea 275: | 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 290: | Línea 295: | ||
<div class="slide"> | <div class="slide"> | ||
| + | |||
====Operadores matemáticos==== | ====Operadores matemáticos==== | ||
<pre> | <pre> | ||
| Línea 317: | Línea 323: | ||
<div class="slide"> | <div class="slide"> | ||
====Operadores relacionales==== | ====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> | ||
<div class="slide"> | <div class="slide"> | ||
| + | |||
===Sentencias condicionales=== | ===Sentencias condicionales=== | ||
| Línea 400: | Línea 423: | ||
<div class="slide"> | <div class="slide"> | ||
====Alert Box==== | ====Alert Box==== | ||
| − | + | Presentan un botón de ok. Simplemente muestran información. | |
<source lang="html4strict"> | <source lang="html4strict"> | ||
<html> | <html> | ||
| Línea 422: | Línea 445: | ||
<div class="slide"> | <div class="slide"> | ||
====Prompt Box==== | ====Prompt Box==== | ||
| − | + | Se utilizan para que el usuario introduzca un valor antes de entrar a la página. | |
<source lang="html4strict"> | <source lang="html4strict"> | ||
<html> | <html> | ||
| Línea 448: | Línea 471: | ||
<div class="slide"> | <div class="slide"> | ||
====Confirm Box==== | ====Confirm Box==== | ||
| − | + | Presentan un botón de ok y otro de cancelar. Devuelven verdadero (ok) o falso (cancel). | |
<source lang="html4strict"> | <source lang="html4strict"> | ||
<html> | <html> | ||
| Línea 477: | Línea 500: | ||
| + | <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 22:56 27 sep 2012