Desarrollo Web 2 PDF - Funciones, Objetos y Métodos

```markdown ## Etapa 2 ### Funciones, Objetos y Métodos The image shows a diagram with the following elements. * Object with attribute a equals 1: `Object {a: 1}` * Another object: `Object() {..}` * A function: `function() {}` * An object: `object {}` * Null value for something * The hierarchy of prototypes between the given objects and functions. ## Funciones Una función en JavaScript es un bloque de código o un conjunto de instrucciones que realiza una tarea específica y que puede reutilizarse a voluntad. Por lo tanto, una función es uno de los building blocks fundamentales de JavaScript. Las funciones son bloques de código reutilizables que permiten dividir un programa en tareas más pequeñas y modularizadas. En JavaScript, las funciones pueden definirse de diversas maneras, incluyendo funciones tradicionales. Estas funciones desempeñan un papel fundamental en la estructuración y organización del código. ### Tipos de funciones Hay varias formas de crear funciones en Javascript: por declaración (la más usada por principiantes), por expresión (la más habitual en programadores con experiencia) o mediante constructor de objeto (no recomendada) | Constructor | Descripción | | :-------------------------------------------- | :-------------------------------------------------------- | | `FUNCTION function nombre(p1, p2...) { }` | Crea una función mediante declaración. | | `FUNCTION var nombre = function(p1, p2...) {}` | Crea una función mediante expresión. | | `FUNCTION new Function(p1, p2..., code);` | Crea una función mediante un constructor de objeto. | ### Funciones por Declaración Esta forma permite declarar una función que existirá a lo largo de todo el código: ```javascript function saludar() { return "Hola"; } saludar(); // 'Hola' typeof saludar; // 'function' ``` De hecho, podríamos ejecutar la función `saludar()` incluso antes de haberla creado y funcionaría correctamente, ya que JavaScript primero busca las declaraciones de funciones y luego procesa el resto del código. ### Funciones por expresión Sin embargo, en Javascript es habitual encontrarse códigos donde los programadores «guardan funciones>>> dentro de variables, para posteriormente «ejecutar dichas variables». Se trata de un enfoque diferente, creación de funciones por expresión, que fundamentalmente, hacen lo mismo con algunas diferencias: ```javascript // El segundo "saludar" (nombre de la función) se suele omitir: es redundante const saludo = function saludar() { return "Hola"; }; saludo(); // 'Hola' ``` Con este nuevo enfoque, estamos creando una función en el interior de una variable, lo que nos permitirá posteriormente ejecutar la variable (como si fuera una función). Observa que el nombre de la función (en este ejemplo: saludar) pasa a ser inútil, ya que si intentamos ejecutar `saludar()` nos dirá que no existe y si intentamos ejecutar `saludo()` funciona correctamente. ¿Qué ha pasado? Ahora el nombre de la función pasa a ser el nombre de la variable, mientras que el nombre de la función desaparece y se omite, dando paso a lo que se llaman las funciones anónimas (o funciones lambda). ### Funciones como Objetos Se pueden declarar funciones como si fueran objetos. Sin embargo, es un enfoque que no se suele utilizar en producción. Simplemente es interesante saberlo para darse cuenta que en Javascript todo pueden ser objetos: ```javascript const saludar = new Function("return 'Hola';"); saludar(); // 'Hola' ``` ### Funciones Flecha Las Arrow functions, funciones flecha o «fat arrow>>> son una forma corta de escribir funciones que aparece en Javascript a partir de ECMAScript 6. Básicamente, se trata de reemplazar eliminar la palabra function y añadir => antes de abrir las llaves: ```javascript const func = function () { return "Función tradicional."; }; const func = () => { return "Función flecha."; }; ``` Sin embargo, las funciones flechas tienen algunas ventajas a la hora de simplificar códigos bastante interesantes: * Si el cuerpo de la función sólo tiene una línea, podemos omitir las llaves ({}). * Además, en ese caso, automáticamente se hace un return de esa única línea, por lo que podemos omitir también el return. * En el caso de que la función no tenga parámetros, se indica como en el ejemplo anterior: `() =>`. * En el caso de que la función tenga un solo parámetro, se puede indicar simplemente el nombre del mismo: `e =>`. * En el caso de que la función tenga 2 ó más parámetros, se indican entre paréntesis: `(a, b) =>`. * Si queremos devolver un objeto, que coincide con la sintaxis de las llaves, se puede englobar con paréntesis: (`{name: 'Manz'}`). Por lo tanto, el ejemplo anterior se puede simplificar aún más: ```javascript const func = () => "Función flecha."; // 0 parámetros: Devuelve "Función flecha" const func = (e) => e + 1; // 1 parámetro: Devuelve el valor de e + 1 const func = (a, b) => a + b; // 2 parámetros: Devuelve el valor de a + b ``` Las funciones flecha hacen que el código sea mucho más legible y claro de escribir, mejorando la productividad y la claridad a la hora de escribir código. ### Funciones tradicionales JS: Las funciones tradicionales en JavaScript ofrecen una forma eficaz de estructurar y modularizar el código. Permiten la reutilización de lógica, la organización de tareas y la creación de código más mantenible. Las funciones pueden tener parámetros, valores de retorno predeterminados, y pueden incluso ser anidadas o recursivas, brindando flexibilidad y versatilidad al desarrollador. Su comprensión y uso adecuado son esenciales para escribir código claro y eficiente en JavaScript. #### Funciones con Parámetros Predeterminados: * Sintaxis: ```javascript function funcionConPredeterminado(parametro1 = valorPredeterminado) { // Bloque de código return resultado; } ``` * Ejemplo: ```javascript function potencia(base, exponente = 2) { return Math.pow(base, exponente); } let resultadoPotencia = potencia(3); console.log('3 elevado al cuadrado es:', resultadoPotencia); // Salida: 9 ``` #### Funciones Anidadas: * Ejemplo: ```javascript function exterior() { function interior() { return 'Función anidada'; } return interior(); } console.log(exterior()); // Salida: Función anidada ``` #### Funcione Recursivas: * Ejemplo: ```javascript function factorial(n) { if (n === 0 || n === 1) { return 1; } else { return n * factorial(n - 1); } } console.log('Factorial de 5:', factorial(5)); // Salida: 120 ``` ### Algunos ejemplos de las Funciones más relevantes de JS Estas son solo algunas de las funciones de JavaScript más usuales en el camino de la programación. 1. **String.split():** Divide una cadena en un arreglo de subcadenas de la cadena original a partir de un carácter separador: ```javascript let cadena = "Hola, mundo, JavaScript";cadena.split(","); ``` 2. **String.substring():** Extrae caracteres desde un índice A hasta un índice B sin incluirlo: ```javascript let cadena = "Hola";cadena.substring(0,3); ``` 3. **String.trim():** Elimina espacios en blanco al inicio y al final de una cadena: ```javascript let cadena = " Hola ";cadena.trim(); ``` 4. **Array.map():** Crea un arreglo nuevo con los resultados de la función enviada como parámetro: ```javascript let numbers = [2, 4, 8, 16]; let halves= numbers.map(function(x) { return x / 2;}); ``` 5. **Array.push():** Agrega elementos al final de un arreglo y regresa la longitud del arreglo con los nuevos elementos: ```javascript const things = ['dish', 'computer', 'dog']; const count = things.push('bed'); ``` 6. **Array.pop():** Remueve el último elemento de un arreglo y lo devuelve: ```javascript const things = ['dish', 'computer', 'dog']; const last = things.pop(); ``` 7. **String.slice():** Regresa una porción de una cadena y devuelve una cadena nueva: ```javascript let string1 = "Bienvenido a JavaScript.";let slice = cadenal.slice(5, -1); ``` 8. **Array.slice():** Regresa una porción de un arreglo y devuelve un arreglo nuevo: ```javascript var names = ['Zita', 'Pepe', 'Mario', 'Cielo', 'Azul'];var slice = names.slice(1, 3); ``` 9. **Object.toString():** Todos los objetos en JavaScript tienen este método y se usa para representarlos er forma de cadena de texto: ```javascript let objeto = new Object();objeto.toString(); ``` 10. **Number.toFixed():** Establece la cantidad de decimales que queremos definir en un número: ```javascript var num= 12345.6789;num.toFixed(); // Returns '12346'num.toFixed(1); // Returns '12345.7’num.toFixed(6); // Returns '12345.678900' ``` 11. **ParseInt():** Convierte una cadena a un entero de la base especificada: ```javascript parseInt("15", 10); parseInt("15.99”, 10); ``` 12. **Math.random():** Devuelve un número flotante aleatorio entre 0 y 1 (sin incluir el 1): ```javascript const rnd = Math.random(); ``` 13. **console.log():** Escribe un mensaje en la consola web o en el intérprete de JavaScript: ```javascript console.log("Este es un mensaje en la consola"); ``` ### Clases y Objetos Las clases y objetos son conceptos fundamentales en la programación orientada a objetos (POO). JavaScript, a partir de ECMAScript 6, se introdujo la capacidad de definir clases y trabajar con objetos de una manera más clara y orientada a objetos. Una clase sólo es una forma de organizar el código de manera entendible con el objetivo de simplificar el funcionamiento de nuestro programa. Además, hay que tener en cuenta que las clases son <<conceptos abstractos>> de los que se pueden crear objetos de programación cada uno con sus características concretas. The image visually represents Clases y Objetos. It shows a cookie cutter (la clase) and the cookies as objects. ### Instanciar una clase Se le llama instanciar una clase, crear un objeto o crear una instancia a la acción de crear un nuevo objeto basado en una clase particular. Esta acción la realizamos a través de la palabra clave new, seguida del nombre de la clase, misma que puede tener parámetros, en cuyo caso se controlarían desde un constructor. En Javascript, para instanciar una clase, se utiliza una sintaxis muy similar a otros lenguajes como, por ejemplo, Java. Es tan sencillo como escribir lo siguiente: ```javascript // Declaración de una clase (de momento, vacía) class Animales {} // Crear (instanciar) un objeto basado en una clase Const Gato = new Animales(); ``` El nombre elegido debería hacer referencia a la información que va a contener dicha clase. Piensa que el objetivo de las clases es almacenar en ella todo lo que tenga relación con Animales. Creamos una variable donde hacemos un `new Animales()`. En este caso el objeto pato que es de tipo Animales, y que contendrá todas las características definidas dentro de la clase Animales. ```javascript Sintaxis class Nombre Clase { constructor(parametrol, parametro2) { this.propiedad1 = parametrol; this.propiedad2 = parametro2; } metodol() { // Código del método } } ``` ```javascript Ejemplo: class Persona { constructor(nombre, edad) { this.nombre= nombre; this.edad edad; } saludar() { console.log('Hola, soy ${this.nombre) y tengo ${this.edad} años.'); } } const personal = new Persona('Juan', 25); personal.saludar(); // Salida: Hola, soy Juan y tengo 25 años. ``` ```javascript Creación de Objetos const objeto = { propiedad1: valor1, propiedad2: valor2, metodo() { // Código del método } }; ``` ```javascript Ejemplo: const libro = { titulo: 'JavaScript 101', autor: 'Juan Pérez', obtenerInformacion() { console.log('Libro: ${this.titulo}, Autor: ${this.autor}'); } }; libro.obtenerInformacion(); // Salida: Libro: JavaScript 101, Autor: Juan Pérez ``` ```javascript Herencia Sintaxis: class SubClase extends ClasePadre { constructor(parametrol, parametro2, parametro3) { super(parametrol, parametro2); this.propiedad3 = parametro3; } nuevoMetodo() { // Código del nuevo método } } ``` ```javascript Ejemplo: class Estudiante extends Persona { constructor(nombre, edad, curso) { super(nombre, edad); this.curso = curso; } presentarse() { console.log('Hola, soy ${this.nombre}, tengo ${this.edad} años y estoy en el curso ${this.curso}.`); } } const estudiantel = new Estudiante ('Ana', 20, 'Programación'); estudiantel.presentarse(); // Salida: Hola, soy Ana, tengo 20 años y estoy en el curso Programación. ``` Las clases y objetos en JavaScript proporcionan una forma más estructurada y modular de organizar y representar la lógica del programa. La introducción de clases en ECMAScript 6 facilita la implementación de conceptos de POO en JavaScript, permitiendo la creación de instancias de objetos y la herencia entre clases. El uso de clases y objetos mejora la legibilidad del código, facilita la reutilización y mantenimiento del mismo y contribuye a una programación más orientada a objetos en el ecosistema JavaScript. #### Miembros de una clase Las clases y objetos en JavaScript proporcionan una forma más estructurada y modular de organizar y representar la lógica del programa. La introducción de clases en ECMAScript 6 facilita la implementación de conceptos de POO en JavaScript, permitiendo la creación de instancias de objetos y la herencia entre clases. El uso de clases y objetos mejora la legibilidad del código, facilita la reutilización y mantenimiento del mismo, y contribuye a una programación más orientada a objetos en el ecosistema JavaScript. * Las propiedades: a grandes rasgos, variables dentro de clases * Los métodos: a grandes rasgos, funciones dentro de clases | Elemento | Descripción | Más información | | :---------------------- | :----------------------------------------------------------------------------------------- | :-------------- | | Propiedad | Variable que existe dentro de una clase. Puede ser pública o privada. | | | Propiedad pública | Propiedad a la que se puede acceder desde fuera de la clase. | | | Propiedad privada | Propiedad a la que no se puede acceder desde fuera de la clase. | | | Propiedad computada | Función para acceder a una propiedad con modificaciones (getter/setter). | | | Método | Función que existe dentro de una clase. Puede ser pública o privada. | | | Método público | Método que se puede ejecutar desde dentro y fuera de la clase. | | | Método privado | Método que sólo se puede ejecutar desde dentro de la clase. | | | Constructor | Método especial que se ejecuta automáticamente cuando se crea una instancia. | | | Método estático | Método que se ejecuta directamente desde la clase, no desde la instancia. | | | Inicializador estático | Bloque de código que se ejecuta al definir la clase, sin necesidad de instancia. | | Un ejemplo sencillo de cada uno: ```javascript class Animal { // Propiedades name = "Garfield"; type = "cat"; // Métodos hablar() { return "Odio los lunes." } } ``` #### La palabra clave this. Esta es una palabra clave que se utiliza dentro de las clases para hacer referencia al objeto instanciado. Que hace referencia al objeto instanciado y no a la clase: ```javascript class Animal { name; // Propiedad (variable de clase sin valor definido) constructor(name) { this.name = name; // Hacemos referencia a la propiedad name del objeto instanciado } } ``` Observa que la palabra clave this no se refiere a la clase Animal exactamente, sino a la variable que utilizamos al instanciarla. Es decir, si hacemos un `const pato = new Animal()`, se ejecutaría el constructor y la palabra clave this haría referencia a pato, por lo que this.name estaría haciendo referencia a pato.name. Es importante tener mucho cuidado con la palabra clave this, ya que en muchas situaciones creemos que devuelve una referencia al elemento padre que la contiene, pero en su lugar, devolverá el objeto Window, ya que se encuentra fuera de una clase o dentro de una función con otro contexto: ```javascript function hello() { return this; } hello(); // Window const object = { hello } // Metemos la función dentro del objeto object.hello() === object; // true ``` En este caso, podemos ver que si ejecutamos la función hello() en un contexto global, nos devuelve el padre, es decir, el objeto Window. Sin embargo, si metemos la función hello() dentro de un objeto, al ejecutar `object.hello()` nos devuelve el padre, es decir, el propio objeto object. #### Propiedades de la Clase Las propiedades de objetos en JavaScript son elementos clave para almacenar y acceder a datos. Pueden contener diversos tipos de valores, incluyendo funciones y otros objetos. La flexibilidad en la manipulación de propiedades, ya sea para agregar, modificar o eliminar, proporciona a los desarrolladores un control completo sobre la estructura y contenido de los objetos. La notación de punto y corchetes brinda opciones para acceder a las propiedades de manera conveniente, y las propiedades computadas permiten dinamismo en la creación y manipulación de propiedades. El conocimiento sólido de estas operaciones es esencial para trabajar eficientemente con objetos en JavaScript. #### Principio del formulario Las clases, siendo estructuras para guardar y almacenar información, tienen unas variables dentro de la clase. Esta información (también llamada estado) se denomina propiedad o propiedad de clase, para crearlas se hace de la siguiente forma: ```javascript class Personaje { name; // Propiedad sin definir (undefined) type = "Player"; // Propiedad definida lifes = 5; // Propiedad definida con 5 vidas restantes energy = 10; // Propiedad definida con 10 puntos de energía } ``` Tradicionalmente en Javascript, las propiedades acostumbraban a definirse a través del constructor, mediante la palabra clave this, por lo que es muy probable que también te las encuentres declaradas de esta forma, sin necesidad de declararlas fuera del constructor: ```javascript class Personaje { constructor() { this.name; // Propiedad sin definir (undefined) this.type = "Player"; // Propiedad definida this.lifes = 5; // Propiedad definida con 5 vidas restantes this.energy = 10; // Propiedad definida con 10 puntos de energía } } ``` Puesto que se trata de propiedades de clase y el `constructor()` es un método que se ejecuta cuando se crea el objeto (instancia de clase), ambas son equivalentes, ya que al crear un objeto se ejecutará el constructor y se crearán esas propiedades. A la hora de utilizarlas, simplemente accedemos a ellas de la misma forma que vimos en el último ejemplo, haciendo uso de la palabra clave this. Veamos un ejemplo un poco más elaborado, utilizando propiedades y métodos: ```javascript class Personaje { name; // Propiedad sin definir (undefined) type = "Player"; // Propiedad definida lifes = 5; // Propiedad definida con 5 vidas restantes energy = 10; // Propiedad definida con 10 puntos de energía constructor(name) { this.name = name; // Modificamos el valor de la propiedad name console.log('¡Bienvenido/a, ${this.name}!'); // Accedemos al valor actual de la propiedad name } } const mario = new Personaje("Mario"); // '¡Bienvenido/a, Mario!' ``` ```javascript class Personaje { name; energy = 10; constructor(name) { this.name = name; } } ``` ```javascript const mario = new Personaje("Mario"); // name: "Mario", energy: 10 ``` ```javascript // Es incorrecto, el nombre correcto de la propiedad es #name mario.name; // undefined ``` ```javascript // Los dos siguientes dan el mismo error (no se puede acceder a la propiedad privada) // Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class mario.#name; mario.#name = "Evil Mario"; ``` ```javascript // Lo siguiente funcionará, pero ha creado otra propiedad 'name' que no es la misma que '#name' mario.name = "Evil Mario"; ``` Como se puede ver, las propiedades precedidas del carácter # son automáticamente privadas y sólo se podrá acceder a ellas desde un método de clase, ya que si se hace desde fuera obtendremos un error. Sin embargo, si se llama a un método público, que a su vez accede a la propiedad privada mediante `this.#name` todo funcionará correctamente, ya que ese método público si es accesible desde fuera de la clase y la propiedad privada si es accesible desde dentro de la clase. #### Ámbito de la Propiedad Dentro de una clase hay dos tipos de ámbitos: ámbito de método y ámbito de clase. En primer lugar, veamos el ámbito dentro de un método. Si declaramos propiedades dentro de un método con let o const, estos elementos existirán sólo en el método en cuestión. Además, no serán accesibles desde fuera del método: ```javascript class Personaje { constructor() { const name = "Manz"; console.log("Constructor: " + name); } method() { console.log("Método: " + name); } } const c = new Personaje(); // 'Constructor: Manz' ``` ```javascript c.name; // undefined c.method(); // 'Método:' ``` Observa que la variable name solo se muestra cuando se hace referencia a ella dentro del constructor() que es donde se creó y el ámbito donde existe. En segundo lugar, tenemos el ámbito de clase. Si creamos propiedades de las dos formas que vimos al principio del artículo: * Precedidas por this. desde dentro del constructor * Al inicio de la clase, fuera del constructor En cualquiera de estos dos casos, las propiedades tendrán alcance en toda la clase, por lo que podremos acceder a ellas tanto desde el constructor, como desde otros métodos de la clase: ```javascript class Personaje { name = "Thor"; // ES2020+ constructor() { this.name = "Thor"; // ES2015+ console.log("Constructor: " + this.name); } metodo() { console.log("Método: " + this.name); } } const c = new Personaje(); // 'Constructor: Thor' c.name; // 'Thor' c.metodo(); // 'Método: Thor' ``` #### Los Métodos En JavaScript, los métodos son funciones asociadas a objetos y pueden ser utilizados para realizar acciones específicas sobre los datos del objeto o para interactuar con el entorno circundante. Los métodos son una parte esencial de la programación orientada a objetos en JavaScript. Definición de Métodos: ```javascript Sintaxis: const objeto = { propiedad: valor, metodol: function(parametro) { // Código del método }, metodo2(parametro) { // Sintaxis más corta para definir métodos // Código del método } }; ``` ```javascript Ejemplo: const persona = { nombre: 'Juan', edad: 30, saludar: function() { console.log('Hola, soy ${this.nombre} y tengo ${this.edad} años.'); }, envejecer() { this.edad++; console.log('Un año más...'); } } persona.saludar(); // Salida: Hola, soy Juan y tengo 30 años. persona.envejecer(); // Salida: Un año más... console.log('Nueva edad:', persona.edad); // Salida: Nueva edad: 31 ``` * Llamada de Métodos * Notación de Punto: `objeto.metodo();` * Notación de Corchetes: `objeto['metodo']();` * Ejemplo: ```javascript persona.saludar(); // Salida: Hola, soy Juan y tengo 30 años, persona['envejecer'](); // Salida: Un año más... ``` * Métodos con Parámetros ```javascript Sintaxis: const objeto = { metodo ConParametros: function(parametro1, parametro2) { // Código del método con parámetros } }; ``` ```javascript Ejemplo: const calculadora = { sumar: function(a, b) { return a + b; } }; console.log(calculadora. sumar(3, 5)); // Salida: 8 ``` * Métodos de Acceso * a) Getter: ```javascript const objeto = { get propiedad() { // Código del getter } }; ``` ```javascript const objeto = { set propiedad(valor) { // Código del setter } }; ``` ```javascript Ejemplo: const persona = { _edad: 25, get edad() { return this._edad; }, set edad(nuevaEdad) { if (nueva Edad > 0) { this._edad = nuevaEdad; } } }; console.log(persona.edad); // Salida: 25 persona.edad = 30; console.log(persona.edad); // Salida: 30 ``` ### Algunos métodos importantes para arrays en JS: #### Métodos de Modificación: 1. **push() y pop():** * `push(elemento):` Agrega un elemento al final del array. * `pop():` Elimina el último elemento del array. 2. **unshift() y shift():** * `unshift(elemento):` Agrega un elemento al principio del array. * `shift():` Elimina el primer elemento del array. 3. **splice(start, deleteCount, elemento1, ..., elementoN):** Modifica el contenido de un array eliminando o reemplazando elementos existentes y/o agregando nuevos elementos en una posición específica. #### Métodos de Acceso: 4. **concat(array1, array2, ..., arrayN):** Combina dos o más arrays creando uno nuevo sin modificar los originales, 5. **slice(start, end):** Retorna una porción del array desde la posición start hasta end (no incluido), sin modificar el array original, #### Métodos de Iteración: 6. **forEach(callback(elemento, index, array)):** Ejecuta una función proporcionada una vez por cada elemento del array. 7. **map(callback(elemento, index, array)):** Crea un nuevo array con los resultados de llamar a una función proporcionada para cada elemento del array. 8. **filter(callback(elemento, index, array)):** Crea un nuevo array con todos los elementos que cumplan una condición proporcionada por la función callback. 9. **reduce(callback(acumulador, elemento, index, array), valorinicial):** Aplica una función a cada elemento del array para reducirlo a un único valor. 10. **find(callback(elemento, index, array)):** Retorna el primer elemento del array que cumple con la condición proporcionada por la función callback. 11. **indexOf(elemento, desde):** Retorna el índice de la primera ocurrencia del elemento especificado, o -1 si el elemento no está presente. Estos métodos ofrecen herramientas poderosas para manipular y trabajar con arrays en JavaScript, permitiendo realizar operaciones de modificación, acceso e iteración de manera eficiente. ```html Código JS. Juego del ahorcado <HTML> <HEAD> <TITLE>Ejemplo de juego</TITLE> <SCRIPT LANGUAGE=JavaScript> var hombre = new Array("\n", " |\n", " O\n", " /", "|", "\\\n", " /", " \\\n", " ") var palabra var libreriaPalabras = new Array( "multimedia", "internauta", "servidor", "protocolo", "cortafuegos", "navegador", "nodo", "marco", "pagina", "telaraña", "descargar", "virtual", "memoria", "disco", "local", "conectar", "desconectar", "encaminador", "internet", "dominio", "dinamico", "hipervinculo", "enlace", "marcador", "ordenador", "lapiz", "ofimatica", "informe" ) var partes = 0 var colNueva = 0 var jugando function ObtienePalabra() { //obtiene la palabra para jugar de forma pseudoaleatoria var indice = Math.round(Math.random() * 27) var cadena = new String(libreriaPalabras[indice]) palabra = cadena.split(" ") } function DibujaHombre(visor, partes) { //dibuja el hombre ahorcado //partes indica el número de partes a dibujar var dibujo = "" if (partes < 10) for (var x = 0; x < partes; x++) { dibujo += hombre[x] } visor.displayHombre.value = dibujo } function DibujaLetra(visor, letra) { //dibuja una letra de la palabra //posicion indica donde debe dibujar la letra var flag = false //indica si se encontro la letra //obtiene cadena actual var cadena = new String(visor.displayPalabra.value) //la separa en sus espacios var letrasCadena = cadena.split(" ") cadena = "" for (var x = 0; x < palabra.length; x++) { if (palabra[x] == letra) { cadena += letra + " " flag = true } else cadena += letrasCadena[x] + " " } visor.displayPalabra.value = cadena return flag } function NuevaLetra(visor, letra) { //añade letra lista de letras visor.displayLetras.value += letra + " " //comprueba si ha de pasar a la siguiente fila if (colNueva == 3) { visor.displayLetras.value += "\n" colNueva = 0 } else colNueva++ } function Juega(visor, letra) { //comprueba si está jugando if (jugando) { //ciclo de jugada //1. añade letra a la lista NuevaLetra(visor, letra) //2. dibuja la letra y comprueba si acierto var acierto = DibujaLetra(visor, letra) //3. si no acierto, dibuja hombre if (!acierto) DibujaHombre(visor, ++partes) //4. comprueba si fin if (partes == 9) FinJuego(false) else if (CompruebaPalabra(visor)) FinJuego(true) } else alert("Pulsa Juego nuevo para comenzar\nuna partida nueva.") } function IniciaJuego(visor) { //inicializa visor y variables globales jugando = true partes = 0 { colNueva = 0 ObtienePalabra() DibujaHombre(visor, partes) visor.displayPalabra.value = "" for (var x = 0; x < palabra.length; x++) visor.displayPalabra.value += "_ " visor.displayLetras.value = "" } } function CompruebaPalabra(visor) { //comprueba si se completo toda la palabra var fin = true //obtiene cadena actual var cadena = new String(visor.displayPalabra.value) //la separa en sus espacios var letrasCadena = cadena.split(" ") for (var x = 0; x < letrasCadena.length; x++) if (letrasCadena[x] == "_") fin = false return fin } function FinJuego(resultado) { //indica que si se ha perdido o ganado var solucion = "" jugando = false if (resultado) { document.visor.ganadas.value++ alert("Acertaste!") } else { document.visor.perdidas.value++ //construye la palabra solucion for (var x = 0; x < palabra.length; x++) solucion += palabra[x] alert("Has muerto !\n La palabra era: " + solucion) } } </SCRIPT> </HEAD> <BODY> <H2>Juego del ahorcado</H2> <FORM NAME=visor> <CENTER> <TABLE width=547> <TR> <TD colspan=3 width=150 ALIGN=center><textarea name=displayHombre cols=15 rows=6></textarea> <TD colspan=3 WIDTH=150 ALIGN=center><textarea name=displayLetras cols=15 rows=6></textarea> <TD width=200></table> <TR> <TD colspan=6 width=300 ALIGN=center><INPUT NAME=displayPalabra SIZE=42> <TD ALIGN=center>  <TR> <td align=center width=50><input type=button name=botA value=" A " onClick="Juega(this.form, 'a')"> <td align=center width=50><input type=button name=botB value=" B " onClick="J

Desarrollo Web 2 PDF - Funciones, Objetos y Métodos

Document Details

Tags

Related

Summary

Full Transcript