Flashcards
Normas de escritura
Cards in this deck (38)
- 11.2 Normas de escritura Líneas y espaciosAl 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é codígos son más importantes que
otros o si unas instrucciones estan anidadas dentro de otras. - 2Distinció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. - 3comentariosPodemos 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
leidos por el navegador, pueden ser vistos por cualquier usuario desde la
opción ver/codigo - 4separar y agrupar sentencias.ormal 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 - 51.3 Insertar el códigoHay 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. - 6En el propio documentoPara incluir código Javascript en el propio documento lo haremos
mediante la etiqueta . la etiqueta debe escribirse de
la siguiente manera:
... codigo javascript ...
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.
Javascript en la página
alert("Este es mi primer script");
El script ha abierto una ventana de alerta. - 7Código en un archivo apartePodemos 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:
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í:
Javascript en la página - 8Código en los elementos HTMLTambién podemos p�ner 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:
Javascript en el código HTML
Ejemplo de script en el elemento HTML
Para ver el script pulsa en este párrafo
El ejemplo dará como resultado la siguiente página:
Javascript en el código 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) - 91.4 Otros aspectosPuede 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.
ATENCIÓN: Para poder ver bien esta página debes
permitir el uso de Javascript en la misma. Activa el uso de
javascript. - 10Más sobre la etiqueta scriptHemos 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:
...
... - 11Versiones de JavascriptLa 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. - 12Corrección de erroresAl 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. - 132.1 Variables Qué es una variableEn 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. - 14Definir una variableDefinir 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. - 15Nombres de variablesLas variables se crean todas de la misma manera, pero dependiendo
del tipo de elemento que almacenemos esta puede ser de varios tipos: - 16▪ 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) - 17▪ Cadenas:Su valor es una cadena de texto, para escribirla se encierra la
misma entre comillas; ej: var texto = "este será mi texto". - 18▪ Booleanos:: Su valor indica si una condición se cumple: sus dos posibles
valores son las palabras reservadas true (verdadero) o false (falso.) - 19▪ 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. - 20Ámbito de las variablesSe 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áginaLas 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. - 212.2 Cadenas de textoVamos 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:
Ejemplo 3.
Presentación con javascript
var presentacion = "Hola, bienvenido a mi página"
var p - 22Mejorar el scriptLa 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);
Ejemplo 4.
h1 { font-family: verdana; text-align: center; color: purple; }
p { font: 1.2em arial; color: navy; padding:0.3em 3em }
Presentación con 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 + "
")
Encantado de conocerte
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. - 232.3 Caracteres especiales Comillas simples y doblesCuando 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:
Pulsa para ver el
mensaje
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. - 242.3 Caracteres especiales Comillas simples y doblesSin 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. - 25Caracteres de escapeLos 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. - 26Ejemplo de texto con caracteres especialesEn 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: - 27EjemploEjemplo 5.
Texto con caracteres especiales:
Al pulsar en los siguientes elementos de la lista aparecerán
mensajes con caracteres especiales:
Comillas
dobles
Comillas
simples
Saltos
de línea
Tabulador
Retorno de carro
Avance de
página
Retroceder
espacio
Contrabarra - 28EjemploSin duda los caracteres especiales más usados son los de comillas
simples y comillas dobles, y también el de contrabarra.
El carácter 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. - 293.1 Operadores clásicos IntroducciónLos 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. - 30Operador de asignaciónSigno 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. - 31Operaciones clásicasPodemos 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: - 32Ejemplos: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" - 33Cambiar el tipo de datoEn 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 - - 34Ejemplo de utilización de operadoresDaremos 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. - 35La página tendrá el siguiente código:Operadores de asignación compuesta
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}
Operadores aritméticos con javascript
En esta página vamos a ver los distintos operadores
aritméticos con javascript.
Para ello necesito que me des dos números con los que haremos
las operaciones:
var a = prompt("escribe un número");
var b = prompt("escribe otro número");
a = Number(a)
b = Number(b) - 36COperadores clásicos
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 + "
")
document.write ("Resta: " + a +" - " + b + " = " + resta + "
")
document.write ("Multiplicación: " + a + " * " + b + " = " +
multiplicacion + "
")
document.write ("División: " + a + " / " + b + " = " + division +
"
")
document.write ("Módulo: " + a + " mod. " + b + " = " + modulo +
"
") - 37Veamos 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. - 38Veamos cómo está construida la página: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 , 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 "
", 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ó
Information
- Description
- Flashcards on Normas de escritura, created by Carlos Wong on 20/02/2020.
- Created by
- Carlos Wong
- Views
- 8
- Rating