Javascript
Apuntes de guerrilla
Index
Introducción en html______________________________________3-4
Variables________________________________________________4-6
Operadores______________________________________________6-7
Vectores_________________________________________________7-9
Matrices________________________________________________9-10
Sentencias y estructuras__________________________________10-12
Vectores________________________________________________10
Matrices________________________________________________10
Códigos útiles cortos_____________________________________11-13
Códigos de ejemplo______________________________________14-21
Introducir en html
Introducción en el mismo archivo html
Se puede definir en cualquier parte del archivo html, entre las etiquetas html, pero
se especifica que se introduzca entre las etiquetas head.
<html>
<head>
<script type=”text/javascript”>
//Código javascript
</script>
</head>
<body>
</body>
</html>
Introducción en archivo .js
Se puede especificar los scripts en un archivo a parte.
<html>
<head>
<script type=”text/javascript” src=”scripts.js />
</head>
<body>
</body>
</html>
Comentar código javascript
Para que versiones antiguas de navegadores que no son compatibles con javascript
es recomendable comentar nuestro código con las etiquetas de comentarios de
html.
<head>
<script type=”text/javascript”>
<!--
-->
</script>
</head>
//aquí el código javascript
3
Etiqueta noscript
En caso de que el usuario tenga desactivado javascript podremos definir un
mensaje para mostrar añadiéndolo entre las etiquetas body.
<head>
<script type=”text/javascript”>
//Código javascript
</script>
</head>
<body>
<noscript>
</noscript>
</body>
<p> Esta página contiene javascript, habilítalo </p>
Comentarios
Los comentarios pueden ser de una línea con dos barras ( // ) o de varias líneas con
una barra y asterisco (/*).
<script type=”text/javascript”>
//Comentario de una linea
/* Comentario enjaulado */
</script>
Variables
Tipos de variables
Tipo de datos
Información
representada
numérico
cadenas
Datos enteros y decimales
Cadenas de texto de 1 a
muchos carácteres.
Acepta true-false 0-1
booleano
Variable nulo
nulo
indefinidas
Simplemente no tienen valor
No numéricos Cuando se hacen operaciones
con valores incompatibles. Da
el valor NaN (Not a number)
Asignación
var variable = 1 ;
var variable = “a”;
var variable = “cadena”;
var variable = true;
var variable = null;
var variable;
var variable = 'cadena'-234;
4
Definir variable
Las variables se definen con var y su tipo se acopla al introducir un dato en ella, las
variables son sensibles a minúsculas y mayúsculas.
<script type=”text/javascript”>
var variable;
var variable_numerica = 1;
var variable_cadena_texto = “texto”;
</script>
Calculos con variables
Las variables numéricas se pueden usar en cálculos matemáticos.
<script type=”text/javascript”>
var variable1 = 1, var variable2 = 2;
variable1 = variable1 + variable2;
</script>
Carácteres especiales en cadenas
Los caracteres especiales que se encuentran dentro de las comillas dobles de una
cadena se deben especificar con una contra barra.
<script type=”text/javascript”>
var variable = “Cadena mas \* otra cadena \* ”;
</script>
Carácteres especiales en cadenas
Representación
\n
\t
\r
\b
\f
\0nnn
\xnn
\unnnn
\a
\f
Función
Salto de línea
Tabulación
Retorno de carro (CR intro)
Retroceder un carácter/espacio
Salto de página
Carácter representado en octal, n es un valor entre 0 y 7
“ “ hexadecimal, n es un valor entre 0 y F
“ “ unicode, n es un valor entre 0 y F
Alarma
Nueva página de impresora
5
Concatenar cadenas de texto
Se pueden concatenar las cadenas con comilals dobles y variables con strings fuera
de las comillas dobles.
<script type=”text/javascript”>
var variable = “Cadena numero 1”;
var variable2 = “Cadena numero 2”;
var variable3 = variable + variable2 + “Cadena numero 3”;
</script>
Propiedad length
Para saber cuantos carácteres hay en un string para poder recorrerlas usaremos su
atributo length.
string.length;
Operadores
Operadores numéricos
Operador
Uso
Operación
+
-
*
/
%
++
–
+=
-=
A+B
A-B
A*B
A/B
A%B
A++
A--
A+=B
A-=B
Suma
Resta
Multiplicación
División
Módulo o Resto
Incremento
Decremento
A = A + B
A = A - B
Operadores lógicos
Operador
Uso
Operación
&& o &
|| o |
!
A&& B o A&B A AND B.El resultado será true si ambos son true sino false
A || B o A | B
A OR B.EL resultado será false si ambos son false sino true
Not A.Se invierte el resultado del operando. True es false.
!A
6
Operadores racionales
Operador
Uso
Operación
A<B
A>B
A<=B
A>=B
A!=B
A == B
A menor que B
A mayor que B
A mayor o igual que B
A mayor que o igual que B
A distinto que B
A igual que B
<
>
<=
>=
!=
==
Vectores
Definir vectores
Definiremos el objeto array para definir un vector.
<script type=”text/javascript”>
var vector = new Array();
</script>
Introducción de datos al definir
Introduciremos los valores entre comillas y todos dentro de un paréntesis. Los
vectores son multitipos (pueden contener tanto strings como numeros).
<script type=”text/javascript”>
var vector = new Array(“valor1”,”valor2”,156);
</script>
Introducción después de definir
Introduciremos los valores en sus indices correspondientes.
<script type=”text/javascript”>
var vector = new Array();
vector[0] = "valor1";
vector[1] = "valor2";
vector[2] = "valor2";
vientos[3] = "valor4";
vector[4] = 5;
</script>
7
Propiedad length
Para saber cuantas entradas hay en un vector para poder recorrerlas usaremos su
atributo length.
vector.length;
Propiedad prototype
Puedes definir variables y métodos a un vector. Por ejemplo para pasar todo el
vector a mayusculas.
<script type=”text/javascript”>
var vector = new Array();
vector.prototype.cambiarMayusculas=function(){
for (i=0;i<this.length;i++) {
this[i]=this[i].toUpperCase();
</script>
}
}
vector.cambiarMayusculas();
Funciones predefinidas de vectores
Funcion
Explicación
concat()
Concatena 2 o mas vectores
indexOf()
Devuelve el index dentro del vector
del valor
lastIndexOf() Devuelve el index empezando por el
join()
pop()
shift()
unshift()
final del vector
Convierte el vector string, separado
los valores por el valor asignado en el
paréntesis
Elimina la última entrada del vector y
devuelve su contenido
Elimina la primera entrada del vector
y devuelve su contenido
Añade los valores asignados entre los
paréntesis al principio del vector y
devuelve el valor de length
Uso
vector_con_vector1_vector2 =
vector1.concat(vector2);
vector.indexOf(“valor5”);
vector.lastIndexOf(“valor3”);
vector.join(“,”);
vector.pop();
vector.shift();
Vector.unshift();
8
push()
slice()
splice()
sort()
toString()
reverse()
valueOf()
Introduce el valor asignado entre los
paréntesis al final del vector
Devuelve los valores comprendidos
entre los index asignados entre los
paréntesis devolviendo un vector
Lo mismo que hace slice pero elimina
el contenido del primer vector
Ordena alfabéticamente o por valor
numérico el contenido del vector
Convierte el vector en un string
separado por comas
Invierte el orden de los valores
Devuelve el mismo vector en forma
de vector, copia el vector
vector.push(“valor_ultimo”);
vector1 = vector2(4,23);
vector1 = vector2(4,23);
vector.sort();
vector.toString();
vector.reverse();
vector1 = vector2.valueOf();
Matrices
Definir matriz
Javascript no directamente las matrices pero se puede asignar un vector dentro de
una posición de un vector.
<script type=”text/javascript”>
var matriz = new Array();
matriz[0] = new Array(“valor1”,”valor2”);
</script>
9
Estructuras de control
Estructura if
Para poder comparar dos variables o valores usaremos la sentencia if.
<script type=”text/javascript”>
if(variable1 == variable 2){
//sentencias a ejecutar
}
</script>
Estructura if...else
Para usar un if...else lo escribimos de la siguiente forma.
<script type=”text/javascript”>
if(variable){
}else{
}
</script>
//sentencias a ejecutar
//sentencias a ejecutar si no...
Estructura if...else if
Lo intruduciremos de la siguiente forma.
<script type=”text/javascript”>
if(variable1 != variable 2){
//sentencias a ejecutar
}else if (variable1 <= 0){
//sentencias a ejecutar sí si...
}
</script>
Condiciones anidadas
Para anaidar en un if diferentes opciones usaremos los caracteres especiales.
<script type=”text/javascript”>
if( (variable1 != variable 2) && (variable1 == variable3) ){
//sentencias a ejecutar
}
</script>
10
Estructura switch case
La estructura switch la formaremos así.
<script type=”text/javascript”>
switch (variable){
case “valor1“:
//sentencias a ejecutar
//sentencias a ejecutar
break;
case 1:
break;
Default:
//sentencias a ejecutar si no se produce
ninguna de las anteriores
}
</script>
Bucle while
El bucle while lo hacemos de la siguiente forma.
<script type=”text/javascript”>
while(variable1 == 0){
//sentencias a ejecutar
}
</script>
Bucle do...while
El bucle while lo hacemos de la siguiente forma.
<script type=”text/javascript”>
do{
//sentencias a ejecutar
} while(variable1 == 0)
</script>
Bucle for
El bucle for lo hacemos de la siguiente forma.
<script type=”text/javascript”>
for ( i=0 ; i < 5 ; i++ ){
//sentencias a ejecutar
}
</script>
11
Bucle for in
Cone este bucle podremos acceder a los valores de un vector.
<script type=”text/javascript”>
for ( i in vector){
vector[i];
}
</script>
Funciones de entrada
y salida
Función prompt
Para la
Crear cuenta
Comentarios de: apuntes de guerrilla - Javascript (1)