diff --git a/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.html b/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.html deleted file mode 100644 index db0d3d0caf8e4a..00000000000000 --- a/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.html +++ /dev/null @@ -1,308 +0,0 @@ ---- -title: JavaScript orientado a objetos para principiantes -slug: conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript -tags: - - Aprender - - Artículo - - Constructor - - Crear - - Create - - JSOO - - JavaScript - - OOJS - - OOP - - Object - - Objeto - - Orientado a Objeto - - Principiante - - Programación orientada a objetos - - instance - - instanciar - - l10n:priority -translation_of: Learn/JavaScript/Objects/Object-oriented_JS -original_slug: Learn/JavaScript/Objects/Object-oriented_JS ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

Con lo básico fuera del camino, nos enfocaremos en Javascript Orientado a Objetos (JSOO) — este artículo presenta una descripción básica de la teoría de la Programación Orientada a Objetos (POO), luego explora cómo Javascript emula classes de objetos via funciones constructoras, y cómo crea instancias de objetos.

- - - - - - - - - - - - -
Prerequisitos:Conocimientos básicos de computación, entendimiento básico de HTML y CSS, familiaridad con las bases de Javascript (ver Primeros pasos con JavaScript y Bloques de construcción JavaScript) y las bases de JSOO (ver Introducción a objetos).
Objetivo: -

Entender la teoría base de la programación orientada a objetos, como se relaciona esta con JavaScript ("todo es un objeto"), y como crear constructores e instacias de objetos.

-
- -

Programacion Orientada a Objetos— lo básico

- -

Para empezar, daremos una descripción simple y de alto nivel acerca de lo que es la Programación Orientada a Objetos (POO). Decimos simple, porque la POO puede volverse complicada rápidamente, y darte un tratamiento completo ahora, probablemente podría confundirte más que ayudar. La idea básica de la POO es que usamos objetos para modelar cosas del mundo real que queremos representar en nuestros programas, y/o proveemos una simple manera para acceder a la funcionalidad que, de otra manera, sería difícil o imposible de usar.

- -

Los objetos pueden contener información y código relacionados, los cuales representan información acerca de lo que estás tratando de modelar, y la funcionalidad o comportamiento que deseas que tenga. Los datos de un Objeto (y frecuentemente, también las funciones) se pueden almacenar ordenadamente (la palabra oficial es encapsular) dentro del paquete de un objeto (al que se puede asignar un nombre específico, llamado a veces espacio de nombres), haciéndolo fácil de estructurar y acceder; los objetos también se usan comúnmente como almacenes de datos que se pueden enviar fácilmente a través de la red.

- -

Definiendo una plantilla de objeto

- -

Vamos a considerar un sencillo programa que muestra información sobre estudiantes y profesores en una escuela. Aquí daremos un vistazo a la POO (Programación Orientada a Objetos) en general, no en el contexto de algún lenguaje de programación específico.

- -

Para empezar, podríamos volver a ver al objeto Persona de nuestro artículo de primeros objetos, que define los datos generales y funcionalidades de una persona. Hay muchas cosas que podrías saber acerca de una persona (su dirección, estatura, tamaño de calzado, perfil de ADN, número de pasaporte, rasgos significativos de su personalidad...), pero, en este caso, solo estamos interesados en mostrar su nombre, edad, género e intereses, además de una pequeña introducción sobre este individuo basada en los datos anteriores. También queremos que sea capaz de saludar.

- -

Esto es conocido como abstracción — crear un modelo simple de algo complejo que represente sus aspectos más importantes y que sea fácil de manipular para el propósito de nuestro programa.

- -

- -

En algunos lenguajes de POO, esta definición de tipo de objeto se la llama class (JavaScript utiliza diferentes mecanismos y terminologías, como verás a continuación) — esto no es en realidad un objeto, en vez de esto es un modelo que define las características que un objeto debería tener.

- -

Creando objetos

- -

Partiendo de nuestra clase, podemos crear instancias de objetos — objetos que contienen los datos y funcionalidades definidas en la clase original. Teniendo a nuestra clase Persona, ahora podemos crear gente con características más específicas:

- -

- -

Cuando una instancia del objeto es creada a partir de una clase, se ejecuta la función constructora (constructor en inglés) de la clase para crearla. El proceso de crear una instancia del objeto desde una clase se llama instanciación.

- -

Clases especializadas

- -

En este caso nosotros no queremos personas genericas — queremos docentes y estudiantes, que son los dos tipos más específicos de personas. En POO, podemos crear nuevas clases basadas en otras clases, estas nuevas clases secundarias se pueden hacer para heredar los datos y código de su clase primaria, de modo que pueden reutilizar la funcionalidad común a todos los tipos de objetos en lugar de tener que duplicarla. Cuando la funcionalidad difiere entre clases, puedes definir funciones especializadas directamente en ellas según sea necesario.

- -

- -

Esto es realmente útil, los profesores y los estudiantes comparten muchas características comunes como el nombre, el género y la edad, por lo que es conveniente tener que definir esas características solo una vez. También puedes definir la misma característica por separado en diferentes clases, ya que cada definición de esa característica estará en un espacio de nombres diferente. Por ejemplo, el saludo de un estudiante puede tener la forma "Yo, soy [Nombre]" (por ejemplo, Yo, soy Sam), mientras que un profesor puede usar algo más formal, como "Hola, mi nombre es [Prefix] [lastName], y enseño [Asunto] ". (Por ejemplo, Hola, mi nombre es Sr. Griffiths, y yo enseño Química).

- -
-

Nota: la palabra elegante para la capacidad de múltiples tipos de objetos de implementar la misma funcionalidad es polimorfismo. Por si acaso te preguntabas.

-
- -

Ahora puedes crear instancias de objetos de las clases "hijo". Por ejemplo:

- -

- -

En el resto del articulo, comenzaremos a ver como podemos practicar la teoría de POO en JavaScript.

- -

Constructores e instancias de objetos

- -

Algunas personas sostienen que JavaScript no es un verdadero lenguaje orientado a objetos — por ejemplo, su enunciado class es sólo azúcar sintáctica sobre la herencia prototípica existente y no es una class en el sentido tradicional. JavaScript, utiliza funciones especiales llamadas funciones constructoras para definir objetos y sus características. Son útiles porque a menudo te encontrarás con situaciones en las que no sabes cuántos objetos crearás; los constructores proporcionan los medios para crear tantos objetos como necesites de una manera efectiva, adjuntando datos y funciones a ellos según sea necesario.

- -

Cuando se crea una nueva instancia del objeto a partir de una función constructora, su funcionalidad central (tal como se define en su prototipo, que exploraremos en el artículo Prototipos de objetos) no se copia en el nuevo objeto como lenguajes OO "clásicos", sino que la funcionalidad está vinculada a través de una cadena de referencia llamada cadena prototipo. Así que esto no es una verdadera instanciación, estrictamente hablando, JavaScript usa un mecanismo diferente para compartir funcionalidad entre objetos.

- -
-

Nota: no ser "POO clásica" no es necesariamente algo malo; Como se mencionó anteriormente, la POO puede ser muy compleja muy rápidamente, y JavaScript tiene algunas agradables formas de aprovechar las características de la OO sin tener que profundizar demasiado en ello.

-
- -

Exploremos la creación de clases a través de constructores y la creación de instancias de objetos a partir de ellas en JavaScript. En primer lugar, nos gustaría que hicieras una nueva copia local del archivo oojs.html que vimos en nuestro primer artículo de Objetos.

- -

Un ejemplo simple

- -
    -
  1. Comencemos por ver cómo puedes definir una persona con una funcion normal. Agrega esta funcion dentro del elemento script: - - 
    function createNewPerson(name) {
-  var obj = {};
-  obj.name = name;
-  obj.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-  return obj;
-}
    -
    2. -
  2. Ahora puedes crear una nueva persona llamando a esta funcion — prueba con las siguientes lineas en la consola Javascript de tu navegador: - 
    var salva = createNewPerson('Salva');
-salva.name;
-salva.greeting();
    - Esto funciona bastante bien, pero es un poco largo; si sabemos que queremos crear un objeto, ¿por qué necesitamos crear explícitamente un nuevo objeto vacío y devolverlo? Afortunadamente, JavaScript nos proporciona un práctico acceso directo, en forma de funciones constructoras — ¡hagamos una ahora!
    3. -
  3. Reemplaza tu función anterior por la siguiente: - 
    function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
    -
    4. -
- -

La función constructora es la versión de JavaScript de una clase. Notarás que tiene todas las características que esperas en una función, aunque no devuelve nada o crea explícitamente un objeto — básicamente sólo define propiedades y métodos. Verás que la palabra clave this se está usando aquí también — es básicamente decir que cuando se crea una de estas instancias de objeto, la propiedad name del objeto será igual al valor del nombre pasado a la llamada del constructor, y el método greeting() usará también el valor del nombre pasado a la llamada del constructor.

- -
-

Nota: Un nombre de función constructora generalmente comienza con una letra mayúscula — esta convención se utiliza para hacer que las funciones constructoras sean más fáciles de reconocer en el código.

-
- -

Entonces, ¿cómo llamamos a un constructor para crear algunos objetos?

- -
    -
  1. Agrega las siguientes líneas debajo de tu código anterior: - 
    var person1 = new Person('Bob');
-var person2 = new Person('Sarah');
    -
    2. -
  2. Guarda el código y vuelve a cargarlo en el navegador, e intenta ingresar las siguientes líneas en la consola Javascript : - 
    person1.name
-person1.greeting()
-person2.name
-person2.greeting()
    -
    3. -
- -

¡Guaw! Ahora veras que tenemos dos nuevos objetos, cada uno de los cuales está almacenado en un espacio de nombres diferente: para acceder a sus propiedades y métodos, debes llamarlos como person1 o person2; están cuidadosamente empaquetados para que no entren en conflicto con otras funciones. Sin embargo, tienen disponible la misma propiedad name y el método greeting(). Ten en cuenta que están utilizando su propio name que se les asignó cuando se crearon; esta es una razón por la cual es muy importante usar this, para que usen sus propios valores, y no algún otro valor.

- -

Veamos nuevamente las llamadas del constructor:

- -
var person1 = new Person('Bob');
-var person2 = new Person('Sarah');
- -

En cada caso, la palabra clave new se usa para indicarle al navegador que queremos crear una nueva instancia del objeto, seguida del nombre de la función con sus parámetros requeridos entre paréntesis, y el resultado se almacena en una variable — muy similar a cómo se llama a una función estándar. Cada instancia se crea de acuerdo con esta definición:

- -
function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
- -

Una vez creados los nuevos objetos, las variables person1 y person2 contienen los siguientes objetos:

- -
{
-  name: 'Bob',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-{
-  name: 'Sarah',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

Ten en cuenta que cuando llamamos a nuestra función constructora, estamos definiendo greeting() cada vez, lo cual no es lo ideal. Para evitar esto, podemos definir funciones en el prototipo, que veremos más adelante.

- -

Creando nuestro constructor final

- -

El ejercicio que vimos anteriormente fue solo un ejemplo simple para comenzar. Ahora crearemos nuestra función constructor Person() final.

- -
    -
  1. Elimina el código que insertaste hasta ahora y agrega este constructor de reemplazo; este es exactamente el mismo que el ejemplo simple del principio, con un poco más de complejidad: - 
    function Person(first, last, age, gender, interests) {
-  this.name = {
-    'first': first,
-    'last' : last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  this.bio = function() {
-    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  };
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name.first + '.');
-  };
-}
    -
    2. -
  2. Ahora, agrega la siguiente línea para crear una instancia del objeto: - 
    var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    -
    3. -
- -

Ahora verás que puedes acceder a las propiedades y métodos justo como lo hiciste anteriormente — intenta esto en tu consola JS:

- -
person1['age']
-person1.interests[1]
-person1.bio()
-// etc.
- -
-

Nota: Si tienes problemas para lograr que funcione, puedes comparar tu código con nuestra versión — ve oojs-class-finished.html (también lo puedes ver corriendo en vivo).

-
- -

Ejercicios adicionales

- -

Para empezar, intenta añadir un par de líneas de creación de objetos propias, y trata de obtener y asignar valores a los miembros de las instancias del objeto.

- -

Además, hay un par de problemas con nuestro método bio() — la salida siempre incluye el pronombre "He", incluso para personas de otros géneros. Y bio solamente incluye dos intereses, sin importar la cantidad que hay en el arreglo interests. ¿Podrías corregir esto en la definición de la clase (constructor)? Puedes poner cualquier código dentro de un constructor (probablemente necesites algunos condicionales y un bucle). Piensa como se deben estructurar las declaraciones dependiendo del género, y de la cantidad de intereses.

- -
-

Note: Si estás atascado, hay una respuesta en nuestro repositorio de GitHub (see it live) — igualmente ¡intentea resolverla primero!

-
- -

Otras formas de crear instancias de objetos

- -

Hasta ahora hemos visto dos diferentes formas de crear una instancia de objeto — declarando un objeto literal, y usando una función constructora (ver arriba).

- -

Esto tiene sentido, pero hay otras formas — se muestran aquí para que te vayas familiarizando en caso de encontrarte con ellas.

- -

El constructor Object()

- -

Antes que nada, puedes usar el constructor Object() para crear un nuevo objeto. Si, incluso objetos genéricos tienen un constructor que genera un objeto vacío.

- -
    -
  1. Intenta ingresar este código en la consola JavaScript de tu navegador: - 
    var person1 = new Object();
    -
    2. -
  2. Esto guarda un objeto vacío en la variable person1. Luego pueded agregar propiedades y métodos a este objeto usando la notación de punto (.) o de corchetes (['']); prueba estos ejemplos en tu consola: - 
    person1.name = 'Chris';
-person1['age'] = 38;
-person1.greeting = function() {
-  alert('Hi! I\'m ' + this.name + '.');
-};
    -
    3. -
  3. También puedes pasar un objeto literal como parámetro al constructor Object(), para precargarlo con propiedades/métodos. Prueba esto en tu consola: - 
    var person1 = new Object({
-  name: 'Chris',
-  age: 38,
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-});
    -
    4. -
- -

Usando el método create()

- -

Los constructores te pueden ayudar a ordenar tu código — puedes crear constructores en un lugar, y luego crear instancias cuando sean necesarias.

- -

Sin embargo, algunas personas prefieren crear instancias de objetos sin crear antes constructores, especialmente si van a crear solamente pocas instancias de un objeto.

- -

JavaScript tiene un método llamado create() que permite hacer esto. Con este método puedes crear un nuevo objeto basado en cualquier otro objeto existente.

- -
    -
  1. Con tu ejercicio de la sección anterior cargado en el navegador, prueba esto en tu consola JavaScript - 
    var person2 = Object.create(person1);
    -
    2. -
  2. Y ahora prueba esto: - 
    person2.name
-person2.greeting()
    -
    3. -
- -

Verás que person2 fue creado basado en person1 — tiene las mismas propiedades y métodos.

- -

Una limitación del método create() es que no está soportado por el navegador IE8. Por lo que los constructores serán más efectivos sin necesitas soportar navegadores antiguos.

- -

Más tarde, exploraremos en detalle los efectos de create().

- -

Resumen

- -

Este artículo provee una visión simplificada de la teoría de la orientación a objetos — esta no es toda la historia, pero te da una idea de con que estamos lidiando aquí. Adicionalmente, empezamos a ver como JavaScript está relacionado y difiere de la orientación a objetos "clásica", cómo usamos funciones constructoras para implementar clases en JavaScript, y diferentes formas de generar instancias de objetos.

- -

En el próximo artículo, exploraremos los prototipos de objeto JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

- -

En este modulo

- - diff --git a/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.md b/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.md new file mode 100644 index 00000000000000..b761262d7e79ec --- /dev/null +++ b/files/es/conflicting/learn/javascript/objects/classes_in_javascript/index.md @@ -0,0 +1,313 @@ +--- +title: JavaScript orientado a objetos para principiantes +slug: conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript +tags: + - Aprender + - Artículo + - Constructor + - Crear + - Create + - JSOO + - JavaScript + - OOJS + - OOP + - Object + - Objeto + - Orientado a Objeto + - Principiante + - Programación orientada a objetos + - instance + - instanciar + - l10n:priority +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +original_slug: Learn/JavaScript/Objects/Object-oriented_JS +--- +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}} + +Con lo básico fuera del camino, nos enfocaremos en Javascript Orientado a Objetos (JSOO) — este artículo presenta una descripción básica de la teoría de la Programación Orientada a Objetos (POO), luego explora cómo Javascript emula classes de objetos via funciones constructoras, y cómo crea instancias de objetos. + +| Prerequisitos: | Conocimientos básicos de computación, entendimiento básico de HTML y CSS, familiaridad con las bases de Javascript (ver [Primeros pasos con JavaScript](/es/docs/Learn/JavaScript/First_steps) y [Bloques de construcción JavaScript](/es/docs/Learn/JavaScript/Building_blocks)) y las bases de JSOO (ver [Introducción a objetos](/es/docs/Learn/JavaScript/Objects/Basics)). | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Objetivo: | Entender la teoría base de la programación orientada a objetos, como se relaciona esta con JavaScript ("todo es un objeto"), y como crear constructores e instacias de objetos. | + +## Programacion Orientada a Objetos— lo básico + +Para empezar, daremos una descripción simple y de alto nivel acerca de lo que es la Programación Orientada a Objetos (POO). Decimos simple, porque la POO puede volverse complicada rápidamente, y darte un tratamiento completo ahora, probablemente podría confundirte más que ayudar. La idea básica de la POO es que usamos objetos para modelar cosas del mundo real que queremos representar en nuestros programas, y/o proveemos una simple manera para acceder a la funcionalidad que, de otra manera, sería difícil o imposible de usar. + +Los objetos pueden contener información y código relacionados, los cuales representan información acerca de lo que estás tratando de modelar, y la funcionalidad o comportamiento que deseas que tenga. Los datos de un Objeto (y frecuentemente, también las funciones) se pueden almacenar ordenadamente (la palabra oficial es **encapsular**) dentro del paquete de un objeto (al que se puede asignar un nombre específico, llamado a veces **espacio de nombres**), haciéndolo fácil de estructurar y acceder; los objetos también se usan comúnmente como almacenes de datos que se pueden enviar fácilmente a través de la red. + +### Definiendo una plantilla de objeto + +Vamos a considerar un sencillo programa que muestra información sobre estudiantes y profesores en una escuela. Aquí daremos un vistazo a la POO (Programación Orientada a Objetos) en general, no en el contexto de algún lenguaje de programación específico. + +Para empezar, podríamos volver a ver al objeto `Persona` de nuestro [artículo de primeros objetos](/es/docs/Learn/JavaScript/Objects/Basics), que define los datos generales y funcionalidades de una persona. Hay muchas cosas que podrías saber acerca de una persona (su dirección, estatura, tamaño de calzado, perfil de ADN, número de pasaporte, rasgos significativos de su personalidad...), pero, en este caso, solo estamos interesados en mostrar su nombre, edad, género e intereses, además de una pequeña introducción sobre este individuo basada en los datos anteriores. También queremos que sea capaz de saludar. + +Esto es conocido como **abstracción** — crear un modelo simple de algo complejo que represente sus aspectos más importantes y que sea fácil de manipular para el propósito de nuestro programa. + +![](https://mdn.mozillademos.org/files/13889/person-diagram.png) + +En algunos lenguajes de POO, esta definición de tipo de objeto se la llama **class** (JavaScript utiliza diferentes mecanismos y terminologías, como verás a continuación) — esto no es en realidad un objeto, en vez de esto es un modelo que define las características que un objeto debería tener. + +### Creando objetos + +Partiendo de nuestra clase, podemos crear **instancias de objetos** — objetos que contienen los datos y funcionalidades definidas en la clase original. Teniendo a nuestra clase `Persona`, ahora podemos crear gente con características más específicas: + +![](https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png) + +Cuando una instancia del objeto es creada a partir de una clase, se ejecuta **la función constructora** (constructor en inglés) de la clase para crearla. El proceso de crear una instancia del objeto desde una clase se llama **instanciación**. + +### Clases especializadas + +En este caso nosotros no queremos personas genericas — queremos docentes y estudiantes, que son los dos tipos más específicos de personas. En POO, podemos crear nuevas clases basadas en otras clases, estas nuevas **clases secundarias** se pueden hacer para **heredar** los datos y código de su **clase primaria**, de modo que pueden reutilizar la funcionalidad común a todos los tipos de objetos en lugar de tener que duplicarla. Cuando la funcionalidad difiere entre clases, puedes definir funciones especializadas directamente en ellas según sea necesario. + +![](https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png) + +Esto es realmente útil, los profesores y los estudiantes comparten muchas características comunes como el nombre, el género y la edad, por lo que es conveniente tener que definir esas características solo una vez. También puedes definir la misma característica por separado en diferentes clases, ya que cada definición de esa característica estará en un espacio de nombres diferente. Por ejemplo, el saludo de un estudiante puede tener la forma "Yo, soy \[Nombre]" (por ejemplo, Yo, soy Sam), mientras que un profesor puede usar algo más formal, como "Hola, mi nombre es \[Prefix] \[lastName], y enseño \[Asunto] ". (Por ejemplo, Hola, mi nombre es Sr. Griffiths, y yo enseño Química). + +> **Nota:** la palabra elegante para la capacidad de múltiples tipos de objetos de implementar la misma funcionalidad es **polimorfismo.** Por si acaso te preguntabas. + +Ahora puedes crear instancias de objetos de las clases "hijo". Por ejemplo: + +![](https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png) + +En el resto del articulo, comenzaremos a ver como podemos practicar la teoría de POO en JavaScript. + +## Constructores e instancias de objetos + +Algunas personas sostienen que JavaScript no es un verdadero lenguaje orientado a objetos — por ejemplo, su enunciado [`class`](/es/docs/Web/JavaScript/Reference/Statements/class) es sólo azúcar sintáctica sobre la herencia prototípica existente y no es una `class` en el sentido tradicional. JavaScript, utiliza funciones especiales llamadas funciones constructoras para definir objetos y sus características. Son útiles porque a menudo te encontrarás con situaciones en las que no sabes cuántos objetos crearás; los constructores proporcionan los medios para crear tantos objetos como necesites de una manera efectiva, adjuntando datos y funciones a ellos según sea necesario. + +Cuando se crea una nueva instancia del objeto a partir de una función constructora, su funcionalidad central (tal como se define en su prototipo, que exploraremos en el [artículo Prototipos](/es/docs/Learn/JavaScript/Objects/Object_prototypes) de objetos) no se copia en el nuevo objeto como lenguajes OO "clásicos", sino que la funcionalidad está vinculada a través de una cadena de referencia llamada cadena prototipo. Así que esto no es una verdadera instanciación, estrictamente hablando, JavaScript usa un mecanismo diferente para compartir funcionalidad entre objetos. + +> **Nota:** no ser "POO clásica" no es necesariamente algo malo; Como se mencionó anteriormente, la POO puede ser muy compleja muy rápidamente, y JavaScript tiene algunas agradables formas de aprovechar las características de la OO sin tener que profundizar demasiado en ello. + +Exploremos la creación de clases a través de constructores y la creación de instancias de objetos a partir de ellas en JavaScript. En primer lugar, nos gustaría que hicieras una nueva copia local del archivo `oojs.html` que vimos en nuestro primer artículo de Objetos. + +### Un ejemplo simple + +1. Comencemos por ver cómo puedes definir una persona con una funcion normal. Agrega esta funcion dentro del elemento `script`: + + ```js + function createNewPerson(name) { + var obj = {}; + obj.name = name; + obj.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; + return obj; + } + ``` + +2. Ahora puedes crear una nueva persona llamando a esta funcion — prueba con las siguientes lineas en la consola Javascript de tu navegador: + + ```js + var salva = createNewPerson('Salva'); + salva.name; + salva.greeting(); + ``` + + Esto funciona bastante bien, pero es un poco largo; si sabemos que queremos crear un objeto, ¿por qué necesitamos crear explícitamente un nuevo objeto vacío y devolverlo? Afortunadamente, JavaScript nos proporciona un práctico acceso directo, en forma de funciones constructoras — ¡hagamos una ahora! + +3. Reemplaza tu función anterior por la siguiente: + + ```js + function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; + } + ``` + +La función constructora es la versión de JavaScript de una clase. Notarás que tiene todas las características que esperas en una función, aunque no devuelve nada o crea explícitamente un objeto — básicamente sólo define propiedades y métodos. Verás que la palabra clave `this` se está usando aquí también — es básicamente decir que cuando se crea una de estas instancias de objeto, la propiedad `name` del objeto será igual al valor del nombre pasado a la llamada del constructor, y el método `greeting()` usará también el valor del nombre pasado a la llamada del constructor. + +> **Nota:** Un nombre de función constructora generalmente comienza con una letra mayúscula — esta convención se utiliza para hacer que las funciones constructoras sean más fáciles de reconocer en el código. + +Entonces, ¿cómo llamamos a un constructor para crear algunos objetos? + +1. Agrega las siguientes líneas debajo de tu código anterior: + + ```js + var person1 = new Person('Bob'); + var person2 = new Person('Sarah'); + ``` + +2. Guarda el código y vuelve a cargarlo en el navegador, e intenta ingresar las siguientes líneas en la consola Javascript : + + ```js + person1.name + person1.greeting() + person2.name + person2.greeting() + ``` + +¡Guaw! Ahora veras que tenemos dos nuevos objetos, cada uno de los cuales está almacenado en un espacio de nombres diferente: para acceder a sus propiedades y métodos, debes llamarlos como `person1` o `person2`; están cuidadosamente empaquetados para que no entren en conflicto con otras funciones. Sin embargo, tienen disponible la misma propiedad name y el método `greeting()`. Ten en cuenta que están utilizando su propio `name` que se les asignó cuando se crearon; esta es una razón por la cual es muy importante usar `this`, para que usen sus propios valores, y no algún otro valor. + +Veamos nuevamente las llamadas del constructor: + +```js +var person1 = new Person('Bob'); +var person2 = new Person('Sarah'); +``` + +En cada caso, la palabra clave `new` se usa para indicarle al navegador que queremos crear una nueva instancia del objeto, seguida del nombre de la función con sus parámetros requeridos entre paréntesis, y el resultado se almacena en una variable — muy similar a cómo se llama a una función estándar. Cada instancia se crea de acuerdo con esta definición: + +```js +function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +} +``` + +Una vez creados los nuevos objetos, las variables `person1` y `person2` contienen los siguientes objetos: + +```js +{ + name: 'Bob', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +{ + name: 'Sarah', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} +``` + +Ten en cuenta que cuando llamamos a nuestra función constructora, estamos definiendo `greeting()` cada vez, lo cual no es lo ideal. Para evitar esto, podemos definir funciones en el prototipo, que veremos más adelante. + +### Creando nuestro constructor final + +El ejercicio que vimos anteriormente fue solo un ejemplo simple para comenzar. Ahora crearemos nuestra función `constructor Person()` final. + +1. Elimina el código que insertaste hasta ahora y agrega este constructor de reemplazo; este es exactamente el mismo que el ejemplo simple del principio, con un poco más de complejidad: + + ```js + function Person(first, last, age, gender, interests) { + this.name = { + 'first': first, + 'last' : last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.bio = function() { + alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }; + this.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); + }; + } + ``` + +2. Ahora, agrega la siguiente línea para crear una instancia del objeto: + + ```js + var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']); + ``` + +Ahora verás que puedes acceder a las propiedades y métodos justo como lo hiciste anteriormente — intenta esto en tu consola JS: + +```js +person1['age'] +person1.interests[1] +person1.bio() +// etc. +``` + +> **Nota:** Si tienes problemas para lograr que funcione, puedes comparar tu código con nuestra versión — ve [oojs-class-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html) (también lo puedes ver [corriendo en vivo](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html)). + +### Ejercicios adicionales + +Para empezar, intenta añadir un par de líneas de creación de objetos propias, y trata de obtener y asignar valores a los miembros de las instancias del objeto. + +Además, hay un par de problemas con nuestro método `bio()` — la salida siempre incluye el pronombre "He", incluso para personas de otros géneros. Y `bio` solamente incluye dos intereses, sin importar la cantidad que hay en el arreglo `interests`. ¿Podrías corregir esto en la definición de la clase (constructor)? Puedes poner cualquier código dentro de un constructor (probablemente necesites algunos condicionales y un bucle). Piensa como se deben estructurar las declaraciones dependiendo del género, y de la cantidad de intereses. + +> **Nota:** Si estás atascado, hay una [respuesta en nuestro repositorio de GitHub](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html) ([see it live](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html)) — igualmente ¡intentea resolverla primero! + +## Otras formas de crear instancias de objetos + +Hasta ahora hemos visto dos diferentes formas de crear una instancia de objeto — [declarando un objeto literal](/es/docs/Learn/JavaScript/Objects/Basics#Object_basics), y usando una función constructora (ver arriba). + +Esto tiene sentido, pero hay otras formas — se muestran aquí para que te vayas familiarizando en caso de encontrarte con ellas. + +### El constructor Object() + +Antes que nada, puedes usar el constructor [`Object()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) para crear un nuevo objeto. Si, incluso objetos genéricos tienen un constructor que genera un objeto vacío. + +1. Intenta ingresar este código en la consola JavaScript de tu navegador: + + ```js + var person1 = new Object(); + ``` + +2. Esto guarda un objeto vacío en la variable `person1`. Luego pueded agregar propiedades y métodos a este objeto usando la notación de punto (.) o de corchetes (\['']); prueba estos ejemplos en tu consola: + + ```js + person1.name = 'Chris'; + person1['age'] = 38; + person1.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; + ``` + +3. También puedes pasar un objeto literal como parámetro al constructor `Object()`, para precargarlo con propiedades/métodos. Prueba esto en tu consola: + + ```js + var person1 = new Object({ + name: 'Chris', + age: 38, + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } + }); + ``` + +### Usando el método create() + +Los constructores te pueden ayudar a ordenar tu código — puedes crear constructores en un lugar, y luego crear instancias cuando sean necesarias. + +Sin embargo, algunas personas prefieren crear instancias de objetos sin crear antes constructores, especialmente si van a crear solamente pocas instancias de un objeto. + +JavaScript tiene un método llamado [`create()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create) que permite hacer esto. Con este método puedes crear un nuevo objeto basado en cualquier otro objeto existente. + +1. Con tu ejercicio de la sección anterior cargado en el navegador, prueba esto en tu consola JavaScript + + ```js + var person2 = Object.create(person1); + ``` + +2. Y ahora prueba esto: + + ```js + person2.name + person2.greeting() + ``` + +Verás que `person2` fue creado basado en `person1 `— tiene las mismas propiedades y métodos. + +Una limitación del método `create()` es que no está soportado por el navegador IE8. Por lo que los constructores serán más efectivos sin necesitas soportar navegadores antiguos. + +Más tarde, exploraremos en detalle los efectos de `create()`. + +## Resumen + +Este artículo provee una visión simplificada de la teoría de la orientación a objetos — esta no es toda la historia, pero te da una idea de con que estamos lidiando aquí. Adicionalmente, empezamos a ver como JavaScript está relacionado y difiere de la orientación a objetos "clásica", cómo usamos funciones constructoras para implementar clases en JavaScript, y diferentes formas de generar instancias de objetos. + +En el próximo artículo, exploraremos los prototipos de objeto JavaScript. + +{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}} + +## En este modulo + +- [Objetos básicos](/es/docs/Learn/JavaScript/Objects/Basics) +- [JavaScript orientedo a objetos para principiantes](/es/docs/Learn/JavaScript/Objects/Object-oriented_JS) +- [Prototipos de Objetos](/es/docs/Learn/JavaScript/Objects/Object_prototypes) +- [Herencia en JavaScript](/es/docs/Learn/JavaScript/Objects/Inheritance) +- [Trabajando con datos JSON](/es/docs/Learn/JavaScript/Objects/JSON) +- [Práctica de construcción de objetos](/es/docs/Learn/JavaScript/Objects/Object_building_practice) +- [Agregar funciones a nuestro demo de pelotas que rebotan](/es/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features) diff --git a/files/es/conflicting/mdn/writing_guidelines/page_structures_479b8c93d0b37a3f2a020112ae60e692/index.html b/files/es/conflicting/mdn/writing_guidelines/page_structures_479b8c93d0b37a3f2a020112ae60e692/index.html deleted file mode 100644 index 5085ae18b4c62e..00000000000000 --- a/files/es/conflicting/mdn/writing_guidelines/page_structures_479b8c93d0b37a3f2a020112ae60e692/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Ejemplos ejecutables -slug: >- - conflicting/MDN/Writing_guidelines/Page_structures_479b8c93d0b37a3f2a020112ae60e692 -translation_of: MDN/Structures/Live_samples -original_slug: MDN/Structures/Live_samples ---- -
{{MDNSidebar}}

MDN puede convertir ejemplos de código de los artículos a ejemplos ejecutables que el lector puede ver en acción. Estos ejemplos ejecutables pueden contener HTML, CSS, y JavaScript en cualquier combinación. Ten en cuenta que los ejemplos "ejecutables" no son interactivos; sin embargo, aseguran que el output coincida exactamente con el código de ejemplo, porque es generado por este.

- -

Como funciona el sistema de ejemplos ejecutables

- -

El sistema de ejemplos ejecutables agrupa el código, lo une en un archivo HTML, procesa el HTML y entonces despliega el output en un {{HTMLElement("iframe")}}. Por lo tanto un ejemplo ejecutable consiste de dos partes:

- - - -

Un "grupo" de bloques de código, en este contexto, es identificado por el ID de un header o de un bloque de contenido (tal como un {{HTMLElement("div")}}).

- - - -

La macro usa un URL especial para extraer el código de ejemplo: http://url-de-la-pagina$ejemplos/grupo-id, donde grupo-id es el ID del header o del bloque de contenido donde se localiza el código. El frame resultante (o página) es sandboxed (entorno de pruebas), seguro, y técnicamente puede hacer cualquier cosa que funcione en la Web. Por supuesto, desde el punto de vista práctico, el código debe contribuir al tema de la página que lo contiene; cosas al azar ejecutándose en MDN serán removidas por la comunidad de editores.

- -
-

Nota: Debes usar el macro para presentar el output del ejemplo ejecutable. El editor de MDN quitará cualquier uso directo del elemento <iframe> por motivos de seguridad.

-
- -

Cada bloque {{HTMLElement("pre")}} que contiene código para el ejemplo tiene una clase que indica si es código HTML, CSS, o JavaScript; estas son "brush: html", "brush: css", y "brush: js". Las clases deben estar en los bloques de código correspondientes para que el wiki pueda usarlos correctamente; afortunadamente, son agregadas automáticamente cuando usas la herramienta Syntax Highlighter de la barra de herramientas del editor.

- -

El sistema de ejemplos ejecutables tiene muchas opciones disponibles, trataremos de ponerlas en terminos simples analizándolas de a poco.

- -

Macro de ejemplos ejecutables

- -

Hay dos macros que puedes usar para desplegar ejemplos ejecutables:

- - - -

En muchos casos, tienes la posibilidad de agregar la macro EmbedLiveSample o la LiveSampleLink con ¡poco o nada de trabajo adicional! Mientras el ejemplo pueda ser identificado por un ID de un header o esté en un bloque de contenido con un ID que puedas usar, simplemente agregar la macro será suficiente.

- -

Macro EmbedLiveSample

- -
 \{{EmbedLiveSample(ID_del_bloque, longitud, altura, URL_de_captura_de_pantalla, pagina_slug)}}
- -
-
ID_del_bloque
-
Requerido: El ID del header o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.
-
longitud
-
La longitud del {{HTMLElement("iframe")}} que se creará, especificada en px. Esto es opcional; una longitud razonable se usará si omites esto. Ten en cuenta que si quieres usar una longitud específica, debes especificar el parámetro de altura también.
-
altura
-
La altura del {{HTMLElement("iframe")}} que se creará, especificada en px. Esto es opcional; una altura razonable se usará si omites esto. Ten en cuenta que si quieres usar una altura específica, debes especificar el parámetro de longitud también.
-
URL_de_captura_de_pantalla
-
La URL de una captura de pantalla que muestre como se debe ver el ejemplo ejecutable. Esto es opcional, pero puede ser útil para nuevas tecnologías que pueden no funcionar en el navegador del usuario, para que puedan ver como se vería el ejemplo si fuera soportado por su navegador. Si incluyes este parámetro, la captura de pantalla se muestra junto al ejemplo ejectutable, con encabezados apropiados.
-
pagina_slug
-
El slug (nombre con "_" reemplazando los espacios) de la página que contiene el ejemplo; esto es opcional, y si se omite, el ejemplo es extraido de la misma página donde se usa la macro.
-
- -
    -
- - - -
 \{{LiveSampleLink(ID_del_bloque, texto_del_enlace)}}
- -
-
ID_del_bloque
-
Requerido: El ID del encabezado o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.
-
texto_de_enlace
-
Una cadena de texto para mostrar en el enlace.
-
- -

Usando el sistema de ejemplos ejecutables

- -

La sección de abajo describe algunos de los casos de uso más comunes para el sistema de ejemplos ejecutables.

- -

En todos estos casos, para ver los resultados del ejemplo ejecutable, debes hacer clic en Guardar Cambios en el editor (lo que te saca del modo edición). Debido a la reflexiba, naturaleza tipo Inception de los ejemplos ejecutables, la funcionalidad de Previsualizar Cambios no permite desplegar los ejemplos ejecutables.

- -

Convirtiendo snippets (trozos de código) en ejemplos ejecutables

- -

Un uso común es tomar snippets existentes que ya se muestran en MDN y convertirlos ejemplos ejecutables.

- -

Preparar el código

- -

El primer paso es agregar snippets o asegurarse que los existentes están listos para ser usados como ejemplos ejecutables, en términos de contenido y marcadores. Los snippets, juntos, deben comprender un ejemplo completo y ejecutable. Por ejemplo, si el snippet existente solo muestra CSS, debes agregar el snippet de HTML para que el CSS funcione.

- -

Cada pieza de código debe estar en un bloque {{HTMLElement("pre")}}, con un bloque separado para cada lenguaje, propiamente marcado con el lenguaje correspondiente. La mayoría de las veces, esto ya se hizo, pero vale la pena volver revisar para asegurarse que cada pieza de código está estructurado con la sintaxis correcta. A la derecha del ícono PRE en la barra de tareas hay un menú desplegable (herramienta: Syntax Highlighter) con varios lenguajes para los que MDN hace distinción de sintaxis. Establecer el lenguaje para la distinción de sintaxis del bloque también lo correlaciona con un lenguaje para los propósitos del sistema de ejemplos ejecutables.

- -
-

Nota: Puedes tener más de un bloque para cada lenguaje; todos son concatenados juntos. Esto te permite tener una parte de código, seguida de una explicación de como funciona, luego otra parte de código, etc. Esto hace aun más fácil producir tutoriales y utilizar ejemplo ejecutables intercalados con texto que los explique.

-
- -

Así que asegurate que la distinción de sintaxis de los bloques {{HTMLElement("pre")}} para tu código HTML, CSS, y/o JavaScript estén cada uno configurado para el lenguaje correcto, y estarás bien.

- -
-

Nota: Al pegar contenido en MDN, se conciente que si pegas contenido formateado (incluyendo, por ejemplo, distinción de sintaxis en código copeado de otro sitio) puedes estar trayendo formatos o clases que no quieres y no necesitas. Ten cuidado de no hacer esto; si es necesario, revisa tu edición en modo fuente y elimina estos formatos y clases innecesarios (o revísalo antes de pegarlo, o usa la opción "Pegar como texto plano").

-
- -

Insertar la macro de ejemplo ejecutable

- -

Una vez que el código está en su lugar y propiamente configurado para identificar cada bloque de lenguaje, necesitas insertar la macro que crea el frame.

- -
    -
  1. Haz clic en el botón Insert Live Code Sample iFrame en la barra de herramientas; luce así: . Esto abre un cuadro de diálogo para configurar el frame de tu ejemplo ejecutable:
    2. -
  2. Bajo Document, ingresa el título del artículo que contiene el ejemplo que deseas desplegar. Por default, es el artículo que estás editando, pero puedes escoger un artículo en otra parte de MDN. Esto hace posible reusar ejemplos en múltiples páginas si es necesario. (Si escribes un texto nuevo en este campo, aparecerá un menú de coincidencias parciales; selecciona el título de la página que desees.)
    3. -
  3. En el menú Sections in Document, selecciona la sección en el artículo que contiene los bloques de código del ejemplo que quieres desplegar.
    4. -
  4. Haz clic en el botón OK para generar e insertar la macro que crea el frame del ejemplo. La macro luce algo así:
    - \{{ EmbedLiveSample('Live_sample_demo') }}
    5. -
- -

Agregando un nuevo ejemplo ejecutable

- -

Si estás escribiendo una página nueva, y quieres insertar código que deseas mostrar como ejemplo ejecutable, ¡aun más del trabajo puede ser realizado por el editor para ti!

- -
    -
  1. Haz clic el botón Insert Code Sample Template en la barra de herramientas, luce así: . Esto presenta un simple cuadro de diálogo pidiéndote que nombres a tu ejemplo ejecutable:
    -
    2. -
  2. Ingresa el nombre del ejemplo; esto es usado como el header para el ejemplo. Asegúrate que tu título sea coherente con la pagína que escribes.
    3. -
  3. Haz clic en OK. Se creó un header nuevo con el título que elegiste, con sub-headers y bloques de código vacios para HTML, CSS y JavaScript.
    4. -
  4. Elimina cualquier sub-header y bloque de código que no necesites.
    5. -
  5. Ingresa el código que compone tu ejemplo en los bloques de código apropiados.
    6. -
  6. Revisar convenciones
    7. -
- -

Usando el Buscador de Ejemplos

- -

Como se mencionó arriba, el buscador de Ejemplos se activa haciendo clic en el ícono Insert Live Code Sample iFrame. Desafortunadamente el Buscador de Ejemplos puede producir un macro que NO es usable sin editarse antes. Hay dos áreas problemáticas que deben revisarse con cuidado y editarse si es necesario.

- -
    -
  1. Campo Document. Este campo buscará mientras escribes y presentará una lista de documentos que encajan con tu búsqueda. Pero la lista presentada NO incluirá sub-páginas. Por ejemplo, digamos que estás trabajando en la sub-página Negative de la página principal @counter-style. El Buscador de Ejemplos no encontrará Negative pero si la página principal @counter-style. Cuando se selecciona @counter-style el fondo cambia a color verde. Lee debajo el problema que esto crea.
    2. -
  2. Sections in Document. El menú desplegable Sections in Document puede no mostrar la sección que necesitas. Selecciona cualquiera, digamos Examples, y puede arreglarse con una simple edición.
    3. -
- -

Esto es lo que el Buscador de Ejemplos produce:

- -
\{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/@counter-style') }}
- -

Esta macro no funcionará. El ID_de_bloque es Examples y debería ser Example en este caso (revisa la fuente del ID de esta sección para verificar cual ID_de_bloque necesitas usar). Igualmente pagina_slug es @counter-style y debería ser @counter-style/negative. Estas correcciones puede hacerse directamente en la página activando la edición.

- -

Después de editar la macro ahora luce así:

- -
\{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/negative') }}
- -

Esta macro editada funcionará correctamente. Si la macro funciona correctamente verás el botón Open in CodePen. Una miniatura del ejemplo deberá aparecer encima del botón Open in CodePen. Si el botón está ahí pero no hay miniatura, espera unos minutos. Puede tormar un tiempo para que el servidor la genere.

- -

Encontrando ejemplos que necesitan actualización

- -

Al buscar ejemplos existentes que actualizar, hay tres tipos principales de actualización que deseas hacer:

- - - -
-

Nota: Si encuentras artículos que necesitan ser actualizados para usar el sistema de ejemplos ejecutables, por favor agrega a la página la etiqueta "NeedsLiveSample".

-
- -

Encontrando ejemplos que necesitan convertirse a ejemplos ejecutables

- -

MDN tiene montontes de ejemplos viejos que aun no usan el sistema de ejemplos ejecutables. Nuestra meta es actualizar la mayoría o todos para que sean ejemplos ejecutables.Esto aumentará la consistencia y la usabilidad. Es casi seguro que te encontrarás muchos de estos mientras usas MDN en el día a día; sin embargo, ¿cómo puedes encontrarlos si los buscas específicamente para actualizarlos? Desafortunadamente, no hay un modo fácil de hacer eso. Pero hay algunos consejos que te ayudarán a rastrearlos:

- - - -

Demo de ejemplo ejecutable

- -

Esta sección es el resultado de usar la plantilla de ejemplo ejecutable no solo para crear el encabezado principal ("Live sample demo"), sino los sub-encabezador para nuestro contenido HTML, CSS y JavaScript. No estás limitado a un bloque para cada uno; además, no necesitan estar en algún orden partícular. ¡Mix and match!

- -

Puedes eliminar cualquiera de estos que desees; si no necesitas scripts, elimina el encabezado y su bloque {{HTMLElement("pre")}}. También puedes eliminar el encabezado de un bloque de código ("HTML", "CSS", o "JavaScript"), ya que estos no son usados por la macro de ejemplo ejecutable.

- -

Ahora que se ha insertado la plantilla, podemos agregar algo de código, e incluso algún texto explicativo.

- -

HTML

- -

Este HTML crea un parágrafo y algunos bloques para ayudarnos a posicionar y formatear un mensaje.

- -
<p>Un simple ejemplo de sistema de ejemplo ejecutable en accion.</p>
-<div class="box">
-  <div id="item">¡Hola mundo!</div>
-</div>
-
- -

CSS

- -

El código CSS formatea el contenedor así como el mensaje.

- -
.box {
-  width: 200px;
-  height: 100 px;
-  border-radius: 6px;
-  background-color: #ffaabb;
-}
-
-#item {
-  width: 100%;
-  font-weight: bold;
-  text-align: center;
-  font-size: 2em;
-}
-
- -

JavaScript

- -

Este código es muy simple. Todo lo que hace es agregar un manejador de evento al texto "¡Hola mundo!" que hace aparecer una alerta cuando se le hace clic.

- -
var el = document.getElementById('item');
-el.onclick = function() {
-  alert('¡Owww, deja de picarme!');
-}
-
- -

Resultado

- -

Aquí el resultado de ejecutar los bloques de código de arriba vía \{{EmbedLiveSample('Live_sample_demo')}}:

- -

{{EmbedLiveSample('Live_sample_demo')}}

- -

Aquí un enlace que resulta de llamar los bloques de código vía \{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}:

- -

{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}

- -

Convenciones acerca de los ejemplos ejecutables

- -
-

Nota: Esto es actual (Feb. 2016) en discusión en la lista de emails dev-mdc (ver this thread). Cualquier entrada es bienvenida. Si esta nota persiste después de unos meses (Apr. 2016), por favor contactar al autor del primer email en este hilo para actualizar esta página.

-
- -
-
Orden de los bloques de código
-
Al agregar un ejemplo ejecutable, los bloques de código deben ser organizados para que el primero corresponda al lenguaje principal (si hay uno). Por ejemplo, al agregar un ejemplo ejecutable para una referencia HTML, el primer bloque debe ser HTML, al agregar un ejemplo ejecutable para una referencia CSS, debe ser el de CSS y así.
-
Nombrando los encabezados
-
Cuando no hay ambigüedad (p.ej. el ejemplo está bajo una sección "Ejemplos"), los encabezados deben ser directos con el único nombre del lenguaje correspondiente: HTML, CSS, JavaScript, SVG, etc. (ver arriba). No deben usarse encabezados como "contenido HTML" o "contenido JavaScript". Sin embargo si un encabezado tan corto hace que el contenido no sea claro, uno puede usar un título más elaborado.
-
Usando un bloque "Result"
-
Después de los diferentes bloques de código, favor de usar un último bloque "Result" antes de usar macro EmbedLiveSample (ver arriba). De este modo, se hace más clara la semántica del ejemplo tanto para el lector como para cualquier herramienta que analice la página (p.ej. screen reader, web crawler).
-
diff --git a/files/es/conflicting/mdn/writing_guidelines/page_structures_479b8c93d0b37a3f2a020112ae60e692/index.md b/files/es/conflicting/mdn/writing_guidelines/page_structures_479b8c93d0b37a3f2a020112ae60e692/index.md new file mode 100644 index 00000000000000..6b8cf87e5a3060 --- /dev/null +++ b/files/es/conflicting/mdn/writing_guidelines/page_structures_479b8c93d0b37a3f2a020112ae60e692/index.md @@ -0,0 +1,223 @@ +--- +title: Ejemplos ejecutables +slug: >- + conflicting/MDN/Writing_guidelines/Page_structures_479b8c93d0b37a3f2a020112ae60e692 +translation_of: MDN/Structures/Live_samples +original_slug: MDN/Structures/Live_samples +--- +{{MDNSidebar}} + +MDN puede convertir ejemplos de código de los artículos a ejemplos ejecutables que el lector puede ver en acción. Estos ejemplos ejecutables pueden contener HTML, CSS, y JavaScript en cualquier combinación. Ten en cuenta que los ejemplos "ejecutables" _no son interactivos_; sin embargo, aseguran que el output coincida exactamente con el código de ejemplo, porque es generado por este. + +## Como funciona el sistema de ejemplos ejecutables + +El sistema de ejemplos ejecutables agrupa el código, lo une en un archivo HTML, procesa el HTML y entonces despliega el output en un {{HTMLElement("iframe")}}. Por lo tanto un ejemplo ejecutable consiste de dos partes: + +- Un grupo de bloques de código +- La macro que (crea el frame o el link que) despliega el resultado de los bloques de código + +Un "grupo" de bloques de código, en este contexto, es identificado por el ID de un header o de un bloque de contenido (tal como un {{HTMLElement("div")}}). + +- Si el ID pertenece a un bloque de contenido, el grupo incluye todos los bloques de código que se encuentren entre las etiquetas de apertura y cierre del bloque de contenido de cuyo ID se usa. +- Si el ID pertenece a un header, el grupo incluye todos los bloques de código que estén bajo el header y antes del siguiente header en el mismo nivel. Ten en cuenta que se usan todos los códigos de bloque bajo sub-headers del header especificado; si este no es el efecto que deseas, mejor usa un ID de un bloque de contenido. + +La macro usa un URL especial para extraer el código de ejemplo: `http://url-de-la-pagina$ejemplos/grupo-id`, donde grupo-id es el ID del header o del bloque de contenido donde se localiza el código. El frame resultante (o página) es sandboxed (entorno de pruebas), seguro, y técnicamente puede hacer cualquier cosa que funcione en la Web. Por supuesto, desde el punto de vista práctico, el código debe contribuir al tema de la página que lo contiene; cosas al azar ejecutándose en MDN serán removidas por la comunidad de editores. + +> **Nota:** **Debes** usar el macro para presentar el output del ejemplo ejecutable. El editor de MDN quitará cualquier uso directo del elemento `