Herramientas de usuario

Herramientas del sitio


sp:js

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión
Revisión previa
sp:js [2010/03/07 12:00]
alfred
sp:js [2020/05/09 09:25] (actual)
Línea 1: Línea 1:
-====== JavaScript ======+====== JavaScript ​(en el navegador) ​======
  
 ===== Básico ===== ===== Básico =====
Línea 15: Línea 15:
 </​script>​ </​script>​
 </​code>​ </​code>​
- 
-==== Sintaxis ==== 
-=== Bucles === 
- 
-=== Objetos === 
-Creación: 
-<code javascript>​ 
-var obj = { 
-   name : '​Jeffrey',​ 
-   ​lastName : '​Way'​ 
-} 
-</​code>​ 
-Acceso a sus propiedades:​ 
-<code javascript>​ 
-alert(obj.name);​ 
-</​code>​ 
- 
- 
- 
- 
-==== Strings ==== 
-Propiedades:​ 
-  * ''​length'':​ Devuelve la longitud de la cadena. 
-Métodos: 
-  * ''​charAt(indice)'':​ Devuelve el carácter situado en la posición especificada por '​indice'​. 
-  * ''​lastIndexOf(cadena_buscada,​ indice)'':​ Devuelve la posición de la última ocurrencia de '​cadena_buscada'​ dentro de la cadena actual, a partir de la posición dada por '​indice',​ y buscando hacia atrás. Este último argumento es opcional y, si se omite, la busqueda comienza por el último carácter de la cadena. 
-  * ''​split(separador)'';​ Parte la cadena en un array de caracteres. Si el carácter separador no se encuentra, devuelve un array con un sólo elemento que coincide con la cadena original. 
-  * ''​substring(primer_Indice,​segundo_Indice)'':​ Devuelve la subcadena que comienza en la posición '​primer_Indice + 1' y que finaliza en la posición '​segundo_Indice'​. Si '​primer_Indice'​ es mayor que '​segundo_Indice',​ empieza por '​segundo_Indice + 1' y termina en '​primer_Indice'​. Si hacemos las cuentas a partir de 0, entonces es la cadena que comienza en '​primer_Indice'​ y termina en '​segundo_Indice - 1' (o bien '​segundo_Indice'​ y '​primer_Indice - 1' si el primero es mayor que el segundo). 
-  * ''​toLowerCase()'':​ Devuelve la cadena en minúsculas. 
-  * ''​toUpperCase()'':​ Devuelve la cadena en mayúsculas. 
-=== Parsear a... === 
-  * Int: ''​parseInt''​. 
- 
-==== Arrays ==== 
-Saber si un elemento existe en el array: 
-<code javascript>​ 
-function existsOnArray (value, array) { 
-    return (array.indexOf(value) != -1); 
-} 
-</​code>​ 
- 
  
  
Línea 70: Línea 29:
   * ''​alert'':​ Muestra un mensaje de alerta al usuario.   * ''​alert'':​ Muestra un mensaje de alerta al usuario.
   * ''​confirm'':​ Muestra un mensaje de alerta al usuario con dos opciones: aceptar y cancelar. Si el usuario elige aceptar la función retornará true.   * ''​confirm'':​ Muestra un mensaje de alerta al usuario con dos opciones: aceptar y cancelar. Si el usuario elige aceptar la función retornará true.
- 
-===== Orientado a Objetos ===== 
-Hay que tener en cuenta las dos siguientes frases al programar con JavaScript: 
-  - Los objetos son diccionarios. 
-  - Los métodos son objetos. 
-=== Diccionarios === 
-Los objetos en JavaScript funcionan como pares de clave-valor,​ como si fuesen diccionarios. 
-<code javascript>​ 
-var p = new Object(); 
-p.x = 3; 
-p.y = 5; 
-message.innerHTML = p.x + ","​ + p.y;  
-</​code>​ 
-Es lo mismo que: 
-<code javascript>​ 
-var p = new Object(); 
-p["​x"​] = 3; 
-p["​y"​] = 5; 
-message.innerHTML = p["​x"​] + ","​ + p.y;  
-</​code>​ 
-=== Funciones como variables === 
-El hecho que un método (o sea, una función) sea un objeto significa que puede ser asignada a una variable: 
-<code javascript>​ 
-var p = new Object(); 
-p["​x"​] = 3; 
-p.y = 5; 
-p["​print"​] = function() { 
-  message.innerHTML = p.x + ","​ + p.y; 
-} 
-</​code>​ 
-Otro ejemplo más claro de como asignar una funcion a un objeto: 
-<code javascript>​ 
-function add(point) { 
-      return point.x + point.y; 
-} 
- 
-var myFunc = add 
-var p = { x: 1, y:1 }; 
-var result = myFunc(p); 
-// Devolverá 2 
-alert(result); ​ 
-</​code>​ 
-=== Objetos literales === 
-Existe otra forma de definir objetos en JavaScript (denominada literal), esta es directa y no requiere de declaración:​ 
-<code javascript>​ 
-var p = 
-{ 
-    x : 5, 
-    y : 3, 
-    print : function() { message.innerHTML = p.x + ','​ + p.y; } 
-} 
-p.print(); ​ 
-</​code>​ 
-O... 
-<code javascript>​ 
-var person = 
-{ 
-    name: "Scott Allen", ​    ​createdDate:​ new Date() 
-    website: "​OdeToCode.com",​ 
-    address: { state: "​MD",​ postalCode: "​21044"​ }, 
-}; 
- 
-alert(person.address.state);​ 
-alert(person.createdDate); ​ 
-</​code>​ 
-=== Métodos de un objeto === 
-<code javascript>​ 
-var point1 = 
-{ 
-    x: 3, 
-    y: 5, 
-    add: function(otherPoint) 
-         { 
-             ​this.x = this.x + otherPoint.x;​ 
-             ​this.y = this.y + otherPoint.y;​ 
-         } 
-}; 
-</​code>​ 
-=== Constructores === 
-<code javascript>​ 
-function Point(x,y) 
-{ 
-    this.x = x; 
-    this.y = y; 
-} 
-var p1 = new Point(3,5); 
-alert(p1.x, p1.y); ​ 
-</​code>​ 
-O lo siguiente también sería válido: 
-<code javascript>​ 
-function Point(x,y) 
-{ 
-    this.x = x; 
-    this.y = y; 
-    this.add = function(point2) 
-        { 
-            this.x += point2.x; 
-            this.y += point2.y; 
-        } 
-} 
-var p1 = new Point(3,5); 
-</​code>​ 
  
 ===== Como... ===== ===== Como... =====
Línea 208: Línea 65:
   - Se llama a ''​send''​ que hará una petición a la URL indicada.   - Se llama a ''​send''​ que hará una petición a la URL indicada.
   - Cuando se reciban datos se llamará a la función que se ha indicado, en ese caso ''​handle_json'',​ si el ''​readyState''​ es 4 y el ''​status''​ 200 es que todo ha ido bien y podremos recoger los datos de la propiedad ''​responseText''​.   - Cuando se reciban datos se llamará a la función que se ha indicado, en ese caso ''​handle_json'',​ si el ''​readyState''​ es 4 y el ''​status''​ 200 es que todo ha ido bien y podremos recoger los datos de la propiedad ''​responseText''​.
 +
  
  
Línea 234: Línea 92:
 var ancho = screen.width;​ var ancho = screen.width;​
 var alto = screen.height;​ var alto = screen.height;​
 +</​code>​
 +=== Copiar al portapapeles ===
 +<​code>​
 +window.clipboardData.setData('​Text',​ $('#​divNombre'​).text());​
 </​code>​ </​code>​
  
Línea 250: Línea 112:
 </​script>​ </​script>​
 </​code>​ </​code>​
-  * Utilizar ''<​nowiki>​===</​nowiki>''​ y ''<​nowiki>​!==</​nowiki>''​ en vez de ''<​nowiki>​==</​nowiki>''​ ya que mejora el trabajo con elementos tipados. 
   * No utilizar la función ''​eval''​.   * No utilizar la función ''​eval''​.
   * Utilizar [[http://​www.jslint.com/​|JSLINT]],​ programa que analiza el código js.   * Utilizar [[http://​www.jslint.com/​|JSLINT]],​ programa que analiza el código js.
Línea 303: Línea 164:
     oneMoreItem = 'one more string';​     oneMoreItem = 'one more string';​
 </​code>​ </​code>​
-  * El foreach es... +
-<​code>​ +
-for(key in object) { +
-   ​if(object.hasOwnProperty(key) { +
-      ...then do something... +
-   } +
-+
-</​code>​+
   * Para hacer funciones que se autoejecuten las meteremos entre parentesis:   * Para hacer funciones que se autoejecuten las meteremos entre parentesis:
 <​code>​ <​code>​
Línea 321: Línea 175:
 </​code>​ </​code>​
   * Para parsear JSON utiliza el parser del creador en [[http://​www.json.org/​json2.js|JSON2]]. ​   * Para parsear JSON utiliza el parser del creador en [[http://​www.json.org/​json2.js|JSON2]]. ​
-==== Code Snippets ==== +
-=== String.Format === +
-<code javascript>​ +
-String.format = function() { +
-    var s = arguments[0];​ +
-    for (var i = 0; i < arguments.length - 1; i++) { +
-        var reg = new RegExp("​\\{"​ + i + "​\\}",​ "​gm"​);​ +
-        s = s.replace(reg,​ arguments[i + 1]); +
-    } +
-    return s; +
-+
-</​code>​+
sp/js.1267963215.txt.gz · Última modificación: 2020/05/09 09:24 (editor externo)