20946976
Description
Flashcards by Alexia Martinez, updated more than 1 year ago
|
Created by Alexia Martinez
about 4 years ago
|
|
| Question | Answer |
| Lineas y espacios Al igual que sucede con el lenguaje HTML y CSS, en el código javascript no se tienen en cuenta los espacios en blanco cuando hay mas de uno seguido, ni tampoco las tabulaciones ni los saltos de linea; sin embargo (salvo algunas excepciones) no se debe escribir una misma instrucción o sentencia en dos lineas distintas, ya que el navegador las interpretará como dos instrucciones diferentes. Esta particularidad nos permite añadir tabulaciones y espacios para poner el código de manera más clara. A efectos de tener el código claro y entendible, es conveniente poner cada instrucción o sentencia en una línea, y usando tabulaciones que indiquen qué códigos son más importantes que otros o si unas instrucciones están anidadas dentro de otras. | Distinción entre mayúsculas y minúsculas. A diferencia de HTML y CSS, javascript SI diferencia entre mayúsculas y minúsculas, lo cual hay que tenerlo muy en cuenta, ya que si en una palabra cambiamos una letra a mayúsculas (o minúsculas) es considerada como una palabra distinta |
| Comentarios Podemos añadir comentarios aclaratorios sobre lo que estamos escribiendo. El único valor que tienen estos comentarios son aclaraciones para el programador sobre las instrucciones que se está escribiendo, útiles sobre todo en el caso de que haya que corregir el código o añadir o quitar nuevas instrucciones al código ya escrito. Hay dos formas de insertar un comentario. La primera es un comentario de una sola línea. para añadirlo se escriben dos barras inclinadas ( // ) y todo lo que haya escrito detrás de esas dos barras en la misma línea es un comentario, y será ignorado al ejecutar el programa. //Éste es un comentario de una sola línea. La segunda manera de añadir comentarios es de la misma forma que en el lenguaje CSS, es decir con los signos /* para empezar el comentario, y los signos */ para acabarlo. En este caso el comentario puede tener más de una línea. | /*Este es un comentario más largo, pues puede tener varias líneas. */ Hay que tener en cuenta que los comentarios, aunque no van a ser leídos por el navegador, pueden ser vistos por cualquier usuario desde la opción ver/código fuente, de su navegador. |
| Separar y agrupar sentencias Cada orden o instrucción que se da al programa es una sentencia. Lo normal es acabar cada sentencia con un punto y coma, ( ; ) aunque Javascript permite poner una sentencia detrás de otra sin ningún tipo de separación siempre que se escriban en líneas diferentes. No podemos escribir una misma sentencia en dos líneas diferentes (con un salto de línea de por medio), ya que sería interpretada como dos sentencias diferentes. Para seguir unas buenas costumbres de programación, y tener más claro el código, nosotros en los ejemplos que hagamos, separaremos las sentencias con punto y coma. A veces varias sentencias o elementos deben ir agrupados por formar parte de un bloque, el cual es tratado de una determinada manera. Tres son las formas en que podemos encontrar sentencias o elementos agrupados: ▪ Entre paréntesis: ( ... ... ) ▪ Entre corchetes : [ ... ... ] ▪ Entre llaves : { ... ... } Al estudiar cada tipo concreto se verá cuando hay que usar cada forma de agrupación. | Insertar el código Hay tres maneras de insertar el código javascript en la página, la primera es en el propio documento, la segunda mediante un archivo externo, y la tercera en los propios elementos html. |
| En el propio documento Para incluir código Javascript en el propio documento lo haremos mediante la etiqueta <script .. > </script>. la etiqueta debe escribirse de la siguiente manera: <script type="text/javascript"> ... codigo javascript ... </script> Debemos poner siempre el atributo type="text/javascript" para indicar que lo que vamos a escribir dentro de la etiqueta es código javascript. Al código encerrado dentro de la etiqueta se le llama script. Un script es un fragmento de código que está dentro de una etiqueta, o de un archivo, y que se ejecuta todo seguido. No importa si tiene una sola sentencia o miles de ellas siempre que forme un bloque que se ejecute todo seguido. | A continuación vemos un ejemplo de un script sencillo incorporado en el código HTML mediante la etiqueta script. Puedes seguir los ejemplos que pongamos copiandolos en tu editor de texto y así probarlos tu también. <!DOCTYPE HTML> <html> <head> <title>Javascript en la página</title> <script type="text/javascript"> alert("Este es mi primer script"); </script> </head> <body> <p>El script ha abierto una ventana de alerta.</p> </body> </html> |
| En el siguiente enlace vemos como debe quedar la página del código anterior: Enlace a ejemplo 1: Javascript en la página. En color siena hemos destadado el texto del script. La instrucción alert("texto_a_mostrar"); abre una ventana de alerta que muestra lo que hay dentro del paréntesis. Esta es una sentencia de las más sencillas. La etiqueta script la hemos escrito aquí en la cabacera del documento. (dentro de la etiqueta head, esto suele ser lo habitual, pero también podemos escribirla en cualquier otra parte de la página, es decir en la etiqueta body. Por tanto las etiquetas script pueden colocarse en cualquier parte de la página, aunque siempre que se pueda, es preferible colocarla en la cabecera. | Código en un archivo aparte Podemos colocar el código javascript en un archivo aparte. El sistema es similar al empleado para colocar el código CSS en archivo aparte. es decir, en la cabecera (o también en alguna otra parte del documento) escribimos una etiqueta de enlace al archivo. Luego creamos ese archivo que contendrá el código javascript. Para ello en primer lugar debemos escribir la etiqueta, la cual sera la siguiente: <script type="text/javascript" src="ruta_del_archivo"></script> La etiqueta llevará el atributo y valor: type="text/javascript" y el atributo src= "...", cuyo valor será la ruta del archivo externo donde se encuentre el código javascript. El archivo externo es también un archivo creado con el editor de textos, y contiene el código javascript. debe llevar la extensión .js. El archivo debe contener únicamente el código javascript, sin ningún tipo de código HTML o de otra clase. |
| Si ponemos el script del ejemplo anterior en un archivo aparte, el código de la página quedará así: <!DOCTYPE HTML"> <html> <head> <title>Javascript en la página</title> <script type="text/javascript" src="codigo1.js></script> </head> <body> <p>El script ha abierto una ventana de alerta.</p> </body> </html> Luego deberemos crear un archivo llamado codigo1.js ubicado en la misma carpeta que el anterior, y cuyo contenido será el codigo javascript que queremos aplicar: El archivo tendría el siguiente contenido: alert("Este es mi primer script") El resultado, es el mismo que en el ejemplo anterior, pero aquí tenemos la ventaja de poder aplicar el mismo código a varias páginas, para ello solamente hay que enlazar cada una de las páginas al archivo javascript. | Código en los elementos HTML También podemos poner el código en los elementos HTML a los que va a afectar. Aunque no suele ser lo más habitual, ya que alarga el código HTML y se mezcla con el de javascript. Veamos un ejemplo: <!DOCTYPE HTML"> <html> <head> <title>Javascript en el código HTML</title> </head> <body> <h1>Ejemplo de script en el elemento HTML</h1> <p onclick="alert('este sigue siendo mi primer script')"> Para ver el script pulsa en este párrafo</p> </body> <html> Aquí hemos añadido otro elemento al código, que es el atributo onclick. Este elemento aunque se añade como un atributo de una etiqueta en HTML, forma parte del código de javascript. Como veremos más adelante forma parte de los elementos llamados "eventos" , que sirven para leer un determinado código cuando el usuario provoca una acción concreta. En este caso el código se activa al pulsar con el ratón sobre el sitio indicado (en este caso la propia etiqueta). |
| Etiqueta noscript Puede ser que el usuario no tenga activada la opción de usar Javascript. Muchos navegadores poseen esta opción. En ese caso el código javascript no se ejecutará en la página. Sin embargo podemos advertir al usuario de que debe activar el código mediante el uso de la etiqueta noscript. Esta es una etiqueta de HTML en la cual su texto sólo se hace visible si no se tiene activado el código Javascript. con lo cual los usuarios que ya tienen activado Javascript no la verán, y sí la verán los que no lo tienen. En esta etiqueta podemos poner una advertencia de que se debe activar javascript para poder ver bien la página. un ejemplo sería el siguiente. <noscript>ATENCIÓN: Para poder ver bien esta página debes permitir el uso de Javascript en la misma. Activa el uso de javascript.</noscript> | Más sobre la etiqueta script Hemos dicho que la etiqueta script debe llevar el atributo type="text/javascript", en lugar de este atributo podemos poner también el atributo language="javascript". Las dos etiquetas siguientes serían equivalentes, es decir tendrían el mismo efecto: <script type="text/javascript"> ... </script> <script languaje="javascript"> ... </script> |
| Versiones de Javascript La primera versión de Javascript fue desarrollada por Netscape en su navegador 2.0. Pronto fue incorporado por Internet Explorer de forma que a partir del Internet Explorer 4 todos los navegadores incorporan Javascript, si bien en Internet Explorer hay algunas instrucciones que cambian respecto al resto de navegadores. Actualmente se usa la versión javascript 1.2 que es aceptada por todos los navegadores, si bien hay unas pocas instrucciones que varían en versiones antiguas de Internet Explorer. | Corrección de errores Al escribir el código es fácil cometer errores, En javascript un error tal como dejar un paréntesis sin cerrar, o cambiar una mayúscula por minúscula (con lo cual nos da otro elemento) puede hacer que el código no funcione. Por eso es fundamental que el código esté bien escrito. Como suele ser frecuente tener alguna equivocación al escribir el código, daré aquí un método para localizar los errores. En algunos navegadores podemos consultar la consola de errores que nos dirá el tipo de error que hay y en qué linea está. Para consultarla debemos ir: ▪ En Mozilla-Firefox: herramientas / desarrollador web / consola de errores (o consola del navegador/js/errores). ▪ En Opera: herramientas / avanzado / consola de errores. ▪ En Safari: desarrollo / consola de errores. La consola de errores nos informa no sólo de los errores de Javascript, sino también de errores en los lenguajes HTML y CSS. Podemos utilizar también la extension "Firebug" del navegador MozillaFirefox para localizar todo tipo de errores. |
| Qué es una variable En Javascript se pueden manejar varios tipos de datos: números, textos, etc. Estos pueden ser escritos directamente, o almacenados en variables. Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor o dato. Es decir, al igual que en las matemáticas, si asignamos un valor a un elemento variable, ese elemento tomará ese valor. por ejemplo: dias = 7 La variable dias ha tomado el valor numérico 7 . Si volvemos a definir la misma variable: dias = 10 El valor de la variable habrá cambiado, ahora la variable dias ha tomado el valor numérico 10. | Definir una variable Definir una variable es darle un nombre y asignarle un valor, tal como hemos hecho en el punto anterior. En javascript hay dos formas de definir una variable; la primera es escribiendo el nombre de la misma y asignandole un valor mediante el signo igual, tal como hemos hecho antes: numero = 10 La segunda, es mediante la palabra reservada var, seguida del nombre de la variable, el signo igual y su valor: var numero = 10 Definir una variable y darle un valor es lo que se denomina declarar una variable. Por último, también podemos definir una variable sin asignarle un valor. para ello basta usar la palabra reservada var seguida del nombre de la variable: var nombre La variable nombre está definida, aunque de momento no tiene asignado ningún valor. para definir variables sin asignarles valor sí que debemos emplear la palabra reservada var. Aunque no es necesario utilizar la palabra reservada var para declarar una varable, es recomendable utilizarla. |
| Nombres de variables Podemos usar cualquier palabra para dar nombre a una variable, siempre que sigamos algunas sencillas normas; ▪ Hay una serie de palabras que son reservadas de javascript, (normalmente en inglés) las cuales se usan para realizar diferentes acciones. Estas palabras no pueden usarse como nombres de variables. ▪ Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _ (guión bajo). ▪ El primer carácter no puede ser un número. | Tipos de variables Las variables se crean todas de la misma manera, pero dependiendo del tipo de elemento que almacenemos esta puede ser de varios tipos: ▪ Numéricas: su valor es un número. Podemos escribir todo tipo de números: enteros, decimales o en notación científica (ej: 245e8). También permite escribir números en sistema octal (base 8, cifras del 0 al 7 - para ello se antepone un 0 delante; ej: 045); y en sistema hexadecimal (base 16, cifras del o al 9 y letras de la a a la f : se antepone un 0x delante; ej: 0x23da4) ▪ Cadenas: Su valor es una cadena de texto, para escribirla se encierra la misma entre comillas; ej: var texto = "este será mi texto". ▪ Booleanos: Su valor indica si una condición se cumple: sus dos posibles valores son las palabras reservadas true (verdadero) o false (falso.) ▪ Objetos: Una variable puede guardar también cosas más complejas como listas de datos, funciones, etc. Esto lo iremos viendo a lo largo del manual. Cualquier variable puede cambiar de un tipo a otro sólo con cambiarle su valor. |
| Ámbito de las variables Se llama ámbito de las variables al lugar donde tienen efecto. Las hay de dos clases, globales y locales. Las variables locales están disponibles sólamente en una parte de la página, la cual suele estar delimitada entre llaves { ... } (por ejemplo una función, un bucle, etc), son creadas dentro de su propio elemento que lo delimita mediante la palabra reservada var Ejemplo: function unaFuncion() { var unaVariable = "texto" } Una variable local no tiene ningún valor fuera del elemento que lo delimita, es decir en el resto de la página. Las variables globales suelen ser la mayoría y están disponibles en toda la página. Se pueden declarar en cualquier parte de la página, siempre que no esté delimitada por llaves, incluso en las zonas delimitadas por llaves podemos crear variables globales si no usamos la palabra reservada var. | Script con textos Vamos a realizar un pequeño script, el cual modificaremos a lo largo de la página para ver el comportamiento de las cadenas de texto. En el tema anterior vimos el comportamiento de la instruccion alert, la cual abre una ventana de alerta en el navegador. En el siguiente script veremos tambien la instrucción prompt, la cual también abre una ventana, pero con un cuadro donde el usuario puede introducir información. Esa información puede ser guardada en una variable para utilizarla luego. |
| Veremos también la instrucción document.write() esta instrucción permite escribir información en la página, pero para ello debemos colocar el script en el lugar de la página donde queremos que se vea esa información (dentro del body). Si quieres realizar tú también el script, copia el siguiente código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ejemplo 3.</title> </head> <body> <h1>Presentación con javascript</h1> <script language="javascript"> var presentacion = "Hola, bienvenido a mi página" var pregunta = "¿Cómo te llamas?" alert(presentacion) var nombre = prompt(pregunta) document.write("Hola " + nombre) </script> <p>Encantado de conocerte</p> </body> </html> | Para realizar el script anterior hemos realizado los siguientes pasos: ▪ Declaramos las variables que vamos a utilizar: presentacion y pregunta. Como estas variables son cadenas de texto, definimos su valor escribiendo el texto entre comillas. ▪ mediante la instrucción alert mandamos un primer mensaje al usuario en una ventana. El mensaje consiste en el texto de la variable presentación. ▪ Mediante la instrucción prompt abrimos otra ventana en la que en primer lugar mostramos el contenido de la variable pregunta y en segundo lugar, mediante el cuadro de diálogo, el usuario le da un valor a la variable nombre. ▪ Mediante la instrucción document.write insertamos en la página el texto de saludo. Este consiste en una cadena de texto ("hola "), a la que se le añade la variable donde se ha guardado el nombre del usuario (nombre); fíjate que para unir dos cadenas de texto (o una cadena de texto y una variable), utilizamos el signo " + ". |
| La instrucción prompt debe llevar siempre delante una variable en la que almacenar el dato que nos pase el usuario. La instrucción prompt admite un segundo elemento dentro del paréntesis, separado por una coma del primero, el cual será lo que aparecerá dentro del cuadro de diálogo que rellena el usuario. Veamos un ejemplo: el siguiente código javascript: var a = prompt("como te llamas","escribe tu nombre") lo veremos así: pulsa aquí para verlo El lugar de la página donde hemos puesto el script no es aleatorio, ya que si te fijas, la página se ha cargado hasta el punto donde hemos puesto el script, el resto de la página se carga después de que el script se haya ejecutado. | Fíjate también que la cadena de texto "Hola " lleva un espacio en blanco en último lugar, esto es porque debe unirse a otra cadena de texto que empieza por otra palabra, y entre esas dos palabras debe haber un espacio en blanco. Para incluir un texto (o variable) en cualquiera de las instrucciones anteriores debemos pasarlo entre paréntesis después de escribir la instrucción ( alert("texto") ). Los paréntesis, en cualquiera de estas instrucciones, son obligatorios, incluso si no queremos poner ningún valor. |
| Mejorar el script La instrucción document.write lo que hace en realidad no es añadir texto, sino código HTML, por lo que podemos mejorar el aspecto de la página si en lugar de sólo texto añadimos código HTML y además le aplicamos código CSS. El código podría ser el siguiente (en verde el código CSS y en siena el Javascript); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ejemplo 4.</title> <style type="text/css"> h1 { font-family: verdana; text-align: center; color: purple; } p { font: 1.2em arial; color: navy; padding:0.3em 3em } </style> </head> <body> <h1>Presentación con javascript</h1> <script language="javascript"> var presentacion = "Hola, bienvenido a mi página" var pregunta = "¿Cómo te llamas?" alert(presentacion) var a = prompt(pregunta) document.write("<p>hola " + a + "</p>") </script> <p>Encantado de conocerte</p> </body> </html> | Aparte de añadir el código CSS, en la instrucción document.write hemos añadido el código HTML que faltaba para tratar este texto como a un parrafo. para ello hemos puesto la etiqueta <p> como si fuera un texto más, ya que la instrucción document.write trata el texto que se le pasa como código en HTML. |
| Comillas simples y dobles Cuando escribimos el código muchas veces necesitamos poner un elemento con comillas dentro de otro elemento con comillas (por ejemplo definir un variable de texto con comillas en el texto), En ese caso no podemos utilizar el mismo tipo de comillas en los dos elementos, ya que al tener unas comillas abiertas, el segundo elemento interpretará que hay que cerrar comillas, (y no que se abren otras), por lo tanto debemos poner comillas simples para uno de ellos y dobles para el otro. un ejemplo típico es cuando se inserta código javascript en una etiqueta de html: <p onclick="alert('hola amigos')">Pulsa para ver el mensaje</p> En este caso el texto de la instrucción alert está entre comillas simples, mientras que el valor del atributo onclick está entre comillas dobles. Si escribes el código anterior en una página, éste se verá así: Pulsa para ver el mensaje Al escribir una cadena de texto en la que queramos poner comillas, también podemos utilizar el mismo sistema, teniendo en cuenta que las comillas de dentro del texto son las que se verán. | Sin embargo en el ejemplo anterior ya no podemos cambiar el tipo de comillas para que el mensaje que recibimos tenga escritas comillas, ya que los dos tipos disponibles de comillas ya están usados. En este caso debemos recurrir a los caracteres especiales o caracteres de escape. |
| Caracteres de escape Los caracteres de escape permiten escribir dentro de una cadena de texto elementos que resultarían problemáticos por pertenecer a la sintaxis de javascript. Todos ellos empiezan por una contrabarra ( \ barra inclinada al revés de la normal, en el teclado se encuentra pulsando la tecla AltGr + � -esquina superior izquierda- ). Normalmente se escribe la contrabarra seguida del carácter a mostrar, así para mostrar unas comillas dobles escribiremos \" y las comillas simples serán \' otro caracter bastante usado es \n el cual provoca un salto de línea. La lista completa de los caracteres de escape es la siguiente: ▪ \n : Salto de línea. ▪ \" : Comillas dobles. ▪ \' : Comillas simples. ▪ \t : Tabulador. ▪ \r : Retorno del carro. ▪ \f : Avance de página. ▪ \b : Retroceder espacio. ▪ \\ : Contrabarra. | Ejemplo de texto con caracteres especiales En la siguiente página de ejemplo se muestran mediante mensajes de alerta los efectos de los distintos caracteres especiales: éste es el código de la página: |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ejemplo 5.</title> </head> <body> <h1>Texto con caracteres especiales: </h1> <p>Al pulsar en los siguientes elementos de la lista aparecerán mensajes con caracteres especiales:</p> <ul> <li onclick='alert("texto con \"comillas dobles\"")'>Comillas dobles</li> <li onclick="alert('texto con \'comillas simples\'')">Comillas simples</li> <li onclick="alert('texto \n con \n saltos \n de \n línea')">Saltos de línea</li> <li onclick="alert('texto con \t Tabulador')">Tabulador</li> <li onclick="alert('texto con \r \r \r tres Retorno de carro')">Retorno de carro</li> <li onclick="alert('texto con \f tres Avance de página')">Avance de página</li> <li onclick="alert('texto con \b Retroceso de espacio')">Retroceder espacio</li> <li onclick="alert('Caracter especial \\ contrabarra \\')">Contrabarra</li> </ul> </body> </html> | Sin duda los carcteres especiales más usados son los de comillas simples y comillas dobles, y también el de contrabarra. El caracter Retorno del carro \r pone un espacio en blanco adicional. los caracteres avance de página \f y retroceder espacio \r no se suelen emplear casi nunca, y su función no está muy clara. |
| Introducción Los operadores son elementos que permiten hacer operaciones entre los distintos datos almacenados con javascript. En las operaciones los datos pueden ser escritos directamente o mediante variables. En esta página veremos fundamentalmente las operaciones más comunes que suelen hacerse entre los datos numéricos. | Operador de asignación Signo igual = : ya lo hemos utilizado en páginas anteriores. Sirve para dar un valor a una variable, ya sea esta nueva o antigua, si la variable es nueva estaremos declarándola, si es antigua, le estaremos cambiando el valor. Ejemplos: var numero = 5 La variable numero es declarada con el valor numérico 5 El operador de asignación sirve no solo para dar un valor numerico a una variable, sino que se le puede dar cualquier tipo de valor. Por ejemplo, si ahora escribimos: numero = "cinco" Hemos cambiado no sólo el valor de la variable, sino también el tipo de variable, la variable ahora tiene el valor de cadena de texto "cinco". También podemos asignar a la variable un valor booleano: numero = true La variable ahora será del tipo booleano, y su valor será true (verdadero) El signo igual ( = ) es el operador de asignación. con el se da un nuevo valor a las variables. La variable debe ponerse en el lado izquierdo del signo igual, mientras que el nuevo valor que se le asigna se debe poner al lado derecho. |
| Operaciones clásicas Podemos hacer las operaciones aritmeticas normales , suma, resta, multiplicación y división, sin más que poner los signos de las operaciones entre los números (o las variables que los contienen). ▪ Suma: var suma = 3 + 2;//suma vale 5 ▪ Resta: var resta = 3 - 2;//resta vale 1 ▪ Multiplicación: var multiplicacion = 3 * 2;//multiplicacion vale 6 ▪ División: var division = 3 / 2;//division vale 1.5 | A estas cuatro operaciones podemos añadirle la operacion "modulo"; el módulo es el resultado del resto de la división entre dos números enteros. su signo es % (tanto por ciento). ▪ Módulo de 5 entre 3: var modulo = 5 % 3;//modulo vale 2 , ya que el resto de la división de 5 entre 3 es 2. El signo menos ( - ) también podemos emplearlo para cambiar de signo a un número o un conjunto de operaciones. Al igual que en el álgebra matemática, podemos emplear paréntesis para agrupar expresiones: Ejemplos: numero = -numero;//cambia de signo el valor de numero var expresion1 = 3 + (2 * 5);//expresion1 = 13, la operación del paréntesis va primero. var expresion2 = 3 + 2 * 5;//expresion2 = 25, Las operaciones se ejecutan en orden de aparición. Además como ya hemos visto, el operador suma + sirve también para unir cadenas de texto. var texto = "hola " + "amigos"//texto es ahora "hola amigos" |
| Cambiar el tipo de dato En ocasiones, el dato que tenemos es una cadena de texto con el número en lugar del número. por ejemplo: a = "57"; a es una cadena de texto con los caracteres 5 y 7, y no el número 57, para cambiar el tipo de dato de cadena de texto a numérico usaremos la expresión Number(), de la siguiente manera: var a = "57";/El valor de - a - es una cadena de texto a = Number(a); // ahora el valor de - a - es numérico. Si el valor de la cadena que convertimos no es un número, la variable tendrá el valor NaN, este es un valor especial de javascript que indica que no es un número (Not a Number). De forma análoga la expresion toString() convierte cualquier otro elemento que no lo sea en una cadena de texto, así para convertir un número en cadena de texto haremos lo siguiente: var a = 43;/El valor es un número a = toString(a); // ahora el valor es una cadena de texto - "43" -. | Ejemplo de utilización de operadores Daremos ahora un sencillo ejemplo de una página en la que usamos los operadores vistos anteriormente. Guardaremos la página, pues según vayamos viendo más operadores, los iremos añadiendo a esta misma página de ejemplo. La página tendrá el siguiente código: |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Operadores de asignación compuesta</title> <style type="text/css"> h1 { text-align: center; font: bold 1.5em arial; padding: 0.5em; margin: 0;} h2 { text-align: center; font: bold 1.2em arial; padding: 0.2em; margin: 0;} p { text-align: left; font: 1em arial; padding: 0.1em; margin: 0; } div { border: 1px solid black; width: 45%; margin: 1%; padding: 1%; float: left} </style> </head> <body> <h1>Operadores aritméticos con javascript </h1> <p>En esta página vamos a ver los distintos operadores aritméticos con javascript.</p> | <p>Para ello necesito que me des dos números con los que haremos las operaciones: </p> <script type="text/javascript"> var a = prompt("escribe un número"); var b = prompt("escribe otro número"); a = Number(a) b = Number(b) </script> <div> <h2>Operadores clásicos</h2> <script type="text/javascript"> var suma = a + b ; var resta = a - b; var multiplicacion = a * b; var division = a / b; var modulo = a % b document.write ("Suma: " + a +" + " + b + " = " + suma + "<br/>") document.write ("Resta: " + a +" - " + b + " = " + resta + "<br/>") document.write ("Multiplicación: " + a + " * " + b + " = " + multiplicacion + "<br/>") document.write ("División: " + a + " / " + b + " = " + division + "<br/>") document.write ("Módulo: " + a + " mod. " + b + " = " + modulo + "<br/>") </script> </div> </body> </html |
| Veamos cómo está construida la página: En la cabecera, aparte del título, hemos puesto (destacado en verde) el estilo CSS que vamos a dar a los principales tipos de texto.En el cuerpo del documento, después del título (etiqueta h1) y de la presentación(Párrafos), hay un primer script, que mediante la instrucción prompt, obliga al usuario a definir los dos números con los que haremos después las operaciones, los cuales los guardamos en las variables a y b.Los datos obtenidos mediante la instrucción prompt puede que no sean numericos, (de hecho aunque insertemos números son interpretados como cadena de texto), por lo que mediante la espresión Number() transformamos los datos obtenidos en numéricos.En un segundo script, dentro de una etiqueta <div>, realizamos las operaciones, y les asignamos un valor. (variables: suma, resta, multiplicacion, division, modulo. | Mediante la instrucción document.write escribimos el mensaje que queremos que reciba el usuario. En el mensaje estarán incluidos los valores de los dos elementos con los que operamos, su resultado y el tipo de operación que hemos hecho. Esto debemos escribirlo todo de forma que en la página quede de una manera comprensible. Además al final debemos escribir la cadena "<br/>", para que el siguiente elemento que escribamos ocupe la línea inferior. Esto hace que tengamos que escribir varias variables y varias cadenas de texto dentro de cada instrucción document.write(), las cuales irán unidas por el signo + , de ahí la complejidad de lo escrito dentro del paréntesis de esta instrucción. |
Want to create your own Flashcards for free with GoConqr? Learn more.