Diferencias

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

--- sp:js [2009/09/07 16:18]
alfred
+++ sp:js [2020/05/09 09:25] (actual)
@@ Línea 1: / Línea 1: @@
-====== JavaScript ======
+====== JavaScript (en el navegador) ======
 ===== Básico =====
   * [[fw:others:jquery|jQuery]], una librería para facilitar, mejorar y ampliar el uso de este lenguaje.
+==== Usar en HTML ====
+Para agregar un script externo a una página html hacemos:
+<code html>
+<script src="scripts/jquery.js" type="text/javascript"></script>
-==== Sintaxis ====
-=== Bucles ===
-=== Objetos ===
-Creación:
-<code javascript>
-var obj = {
-   name : 'Jeffrey',
-   lastName : 'Way'
-}
 </code>
-Acceso a sus propiedades:
+Para introducir código directamente en la página:
-<code javascript>
+<code html>
-alert(obj.name);
+<script type="text/javascript">
+[[ CODIGO ]]
+</script>
 </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.
-==== Arrays ====
-Saber si un elemento existe en el array:
-<code javascript>
-function existsOnArray (value, array) {
-    return (array.indexOf(value) != -1);
-}
-</code>
 ==== Ventana ====
 :?:
-  * ''window.location.reload();'': Se ejecuta la accion reload de la barra de direcciones del navegador. Exactamente como hacer click en el boton reload.
+  * ''window.location.reload()'': Se ejecuta la accion reload de la barra de direcciones del navegador. Exactamente como hacer click en el boton reload.
-  * ''history.go(0);'': Se carga la ultima pagina del historico del navegador. Claro que esa entrada coincide con la pagina que estamos viendo actualmente.
+  * ''history.go(0)'': Se carga la ultima pagina del historico del navegador. Claro que esa entrada coincide con la pagina que estamos viendo actualmente.
-  * ''window.location.href=window.location.href;'': Se ingresa una nueva direccion web, que casualmente es la misma de la pagina que estamos viendo actualmente.
+  * ''history.back()'': Redirige el navegador a la última página.
+  * ''window.location.href=window.location.href'': Se ingresa una nueva direccion web, que casualmente es la misma de la pagina que estamos viendo actualmente.
+  * ''window.location = path'': Cambia la ruta de la página actual.
-===== Orientado a Objetos =====
+==== Funciones ====
-Hay que tener en cuenta las dos siguientes frases al programar con JavaScript:
+  * ''alert'': Muestra un mensaje de alerta al usuario.
-  - Los objetos son diccionarios.
+  * ''confirm'': Muestra un mensaje de alerta al usuario con dos opciones: aceptar y cancelar. Si el usuario elige aceptar la función retornará true.
-  - 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... =====
@@ Línea 188: / Línea 65: @@
   - 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''.
 ==== Pequeños "code snippets" ====
@@ Línea 208: / Línea 87: @@
 <code javascript>
 parent.funcion(id);
+</code>
+=== Saber la resolución de la pantalla ===
+<code javascript>
+var ancho = screen.width;
+var alto = screen.height;
+</code>
+=== Copiar al portapapeles ===
+<code>
+window.clipboardData.setData('Text', $('#divNombre').text());
 </code>
@@ Línea 224: / Línea 112: @@
 </script>
 </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''.
   * Utilizar [[http://www.jslint.com/|JSLINT]], programa que analiza el código js.
@@ Línea 277: / Línea 164: @@
     oneMoreItem = 'one more string';
 </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:
 <code>
@@ Línea 295: / Línea 175: @@
 </code>
   * Para parsear JSON utiliza el parser del creador en [[http://www.json.org/json2.js|JSON2]].

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página