Tutorial de Javascript
Cargado por
ScribdTranslationsTutorial de Javascript
Cargado por
ScribdTranslationsIntroducción al diseño web utilizando JavaScript
Este es un lenguaje de programación que se utiliza para crear programas que pueden ser incrustados en el Mundo
Red amplia.
JavaScript es un lenguaje orientado a objetos
Todo en JavaScript toma la forma de un objeto. Esto significa que es un paquete, que contiene
varias propiedades (piezas de información) y métodos (listas de instrucciones que puede llevar a cabo).
Términos utilizados en JavaScript
• Propiedades
Estas son características de los objetos en JavaScript.
• Objetos
Estos son controles que se utilizan para diseñar páginas web.
• Métodos
Estas son actividades relacionadas con objetos.
• Eventos
Estas acciones están relacionadas con una actividad realizada en JavaScript.
APLICACIÓN JAVASCRIPT
• Validación de entrada de datos.
• Interactividad dinámica en HTML.
• Prototipado CGI.
• CGIs sin servidor
• Descargando servidor ocupado.
• Añade vida a páginas muertas.
• Para crear páginas web que piensan.
Esenciales de un documento JavaScript
• <script>
Asiste al navegador a reconocer las líneas de código en documentos HTML. El código debe ser
rodeado en <script> como la etiqueta de inicio y </script> como la etiqueta de cierre.
Atributos de la etiqueta script
• Language
Pide al navegador que trate el código como código javascript.
<script language="javascript">
Declaraciones
</script>
• Src= " "
Apunta al archivo que contiene el código del script. El archivo debe terminar con la extensión .js.
1 TUTORÍAS DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
<script language="javascript" src="data..js"></script>
Declaraciones
</script>
• <cabeza>
Un lugar para etiquetas que influyen en la configuración no relacionada con el contenido de la página llamada directiva HTML
elementos.
• title
Enumera los títulos de los documentos.
• <cuerpo>
Donde se colocan los contenidos reales.
Ejemplo 1
<html>
javascript
<cuerpo>
<script language="JavaScript">
[Link]("Hola, ¿bienvenido al mundo del lenguaje javascript?");
<p>
Este es mi primer programa en JavaScript.
</script>
</body>
</html>
Ejemplo 2
<html>
javascript
Body
<script language="JavaScript">
[Link] = "AMARILLO";
</script>
Puedes agregar un poco más de texto y/o etiquetas HTML aquí, por supuesto.
</cuerpo>
</html>
métodos de Javascript
• Abrir()
Se utiliza para crear un nuevo documento.
[Link]()
2 TUTORIALS DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
[Link]("nuevo documento")
• Cerrar()
Se utiliza para cerrar documentos creados con el método open().
• Escribir()
Se utiliza para insertar texto en un navegador web.
• Escribir()
Escribe texto en la siguiente línea en un navegador web.
Eventos de Javascript
• Cargas
Carga una ventana emergente en una página web.
<body onload="alert('bienvenido a cualquier página web')">
• Unonloads
Descarga una ventana emergente de la página web.
<body onload="alert('adiós, que tengas un buen día')">
Instrucciones de Javascript
Estas son instrucciones que se ejecutan para dar resultados.
Declaraciones en javascript:
• Inicializa o define una variable.
• Asigna un valor a un valor, una propiedad o una variable.
• Invoca un objeto.
• Invoca una función.
• Invoca una decisión.
• Cambia el valor de una propiedad o variable.
Fundamentos de programación en Javascript
a) Tipos de datos en JavaScript
También son valores. Muestran el tipo de información que se debe almacenar en variables.
Tipo de dato Ejemplo Descripción
Cadena Howard Una serie de caracteres entre comillas
Número 4.6 Cualquier número sin comillas
Booleano Verdadero Verdadero o falso lógico
Nulo null Desprovisto de contenido
Objeto Un software definido por propiedades y
métodos
función Definición de función
3 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
b) Variables
Una variable representa un trozo de datos almacenados en un programa de computadora. Todas las variables tienen un nombre.
y un valor. Podemos pensar en ellos como si fueran pequeñas cajas, cada una de las cuales puede contener uno
elemento. El nombre de la variable es cómo nos referimos a la caja, y el valor es el artículo almacenado en
la caja.
Las variables en JavaScript deben ser declaradas antes de que puedan ser utilizadas. Se declaran usando el
wordvar seguido del nombre de la variable y un punto y coma.
Var edad;
• Usa palabras significativas
• No uses palabras clave en javascript.
• Las variables no tienen espacios, en su lugar usa guiones bajos.
• Deben comenzar con una letra.
• Los nombres de las variables son sensibles a mayúsculas y minúsculas, lo que significa que los nombres de las variables myName,
MYNAME y Myname se referirían a diferentes variables.
• Las variables se establecen en valores utilizando un signo igual.
Inicializando variables
var edad=38;
c) Expresión y evaluación en javascript
Una expresión es un conjunto de operadores y operandos que se utilizan para realizar algunos cálculos y
produce resultados. Evaluar es encontrar un resultado de una expresión.
d) Operadores
Un conjunto de símbolos que se utilizan para realizar una operación.
Tipos de operadores
• Operadores aritméticos
+
-
*
/
Mod
^
• Operadores de comparación
>
4 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
<
>=
<=
<>
Operadores
Los operadores más comunes son los operadores matemáticos; +, -, /, * (sumar, restar, dividir, multiplicar) para
ejemplo. Los operadores se pueden dividir en dos grupos, operadores de comparación y operadores de asignación o 'acción'
Los operadores. Los operadores de comparación prueban si dos variables se relacionan entre sí de la manera especificada.
por ejemplo, una variable es un número más alto que la otra. Otros operadores realizan una acción sobre un
variable, como aumentarla en uno.
La siguiente tabla muestra los operadores que se utilizan con más frecuencia. Hay muchos operadores de JavaScript 1.3
como el operador de identidad === y otros similares. Estos son compatibles con todos los navegadores actuales, pero
son raramente utilizados. Los navegadores que no los entienden simplemente generarán errores.
Operadores de JavaScript
Usos del operador
suma dos números o concatena dos cadenas - si hay más de un tipo de variable
+ agregado, incluyendo una cadena agregada a un número o viceversa, el resultado será
una cadena
- resta el segundo número del primero
/ divide el primer número por el segundo
* multiplica dos números
% divide el primer número por el segundo y devuelve el residuo
= asigna el valor de la derecha al objeto de la izquierda
el objeto a la izquierda = el objeto a la izquierda + el valor a la derecha - esto también
+=
funciona al agregar cadenas
-= el objeto a la izquierda = el objeto a la izquierda - el valor a la derecha
el número a la izquierda debe ser mayor que el número a la derecha - esto también funciona
>
con cadenas y valores
5 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
Operadores de JavaScript
Usos del operador
el número a la izquierda debe ser menor que el número a la derecha - esto también funciona
<
con cadenas y valores
el número a la izquierda debe ser mayor o igual al número a la derecha - este
>=
también funciona con cadenas y valores
el número a la izquierda debe ser menor o igual que el número a la derecha - esto también
<=
trabaja con cadenas y valores
++ incrementar el número
-- decrecer el número
== los números, objetos o valores deben ser iguales
!= los números u objetos o valores no deben ser iguales
<< desplazamiento a la izquierda a nivel de bits
>> desplazamiento a la derecha bit a bit
& Y
| O
^ XOR
~ NO
! no lógico (la afirmación no debe ser verdadera)
&& y lógico (ambas afirmaciones deben ser verdaderas)
|| o lógico (cualquiera de las afirmaciones debe ser verdadera)
en el objeto o array a la derecha debe tener la propiedad o celda a la izquierda
6 TUTORIALES DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
Precedencia de operadores
Si le pides a JavaScript que realice un cálculo utilizando múltiples operadores, esos operadores serán evaluados.
en un orden específico. Por ejemplo, 3 + 6 * 7 se calcula como (6 * 7) + 3 porque el * se calcula antes.
el +. El orden en el que se evalúan es: * / % + - +(donde el segundo + es la concatenación de cadenas).
Para cambiar el orden en el que se calculan, usa paréntesis ( ) ya que el contenido de los paréntesis es
calculado antes de los contenidos fuera de los paréntesis.
Por ejemplo, 3 + 6 * 7 = 45 pero (3 + 6) * 7 = 63
Ejemplo 1
<html>
<cabeza>
suma de dos números en javascript
<cuerpo>
<script lenguaje="JavaScript">
var primero = 12;
var segundo = 4;
var suma = primero + segundo;
[Link](suma);
</script>
</head>
</cuerpo>
</html>
Variables de cadena
Las variables de cadena son textuales o un conjunto de cadenas de caracteres que son palabras y oraciones. Ellas son
dentro de comillas dobles.
Ej.
Instituto de Tecnología Gusii
[Link](x);
Mezclando cadenas y números
Puedes mezclar números y cadenas juntos para permitir que una expresión se ejecute.
100
Segundo=20;
Respuesta=primero+segundo;
[Link]("la respuesta es:", respuesta);
Funciones de Javascript
7 TUTORÍAS DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
Una función es un grupo de instrucciones que se le ha dado un nombre particular. Se puede llamar en
cualquier punto simplemente citando el nombre de la función (con un par de corchetes). Quizás un ejemplo
puede ser útil:
Una función es un fragmento de código que se hace referencia o se invoca para realizar una operación y devolver un valor.
cuando se llama. Además de la ejecución controlable, las funciones también son un gran ahorro de tiempo para hacer
tareas repetitivas.
En lugar de tener que escribir el código cada vez que quieres hacer algo, simplemente puedes llamar al
función múltiples veces para obtener el mismo efecto. Este beneficio también se conoce como reutilización de código.
Todo lo que tienes que hacer es decirle al navegador que estás creando una función, darle un nombre a la función y luego
escribe el JavaScript.
Las funciones en javascript se han clasificado en dos:
• Funciones integradas.
• Funciones definidas por el usuario.
Funciones incorporadas
• Indicar()
La función del mensaje solicita una caja en la pantalla y pide al usuario que ingrese un valor. Por ejemplo.
Y=prompt("ingresa el valor de y");
X=prompt("introduce el valor de x");
Ejemplo 1
<html>
<cabeza>
funciones html
<script lenguaje="JavaScript">
var primerNumero = prompt("Introduce el primer número", "");
var secondnumber = prompt("Ingresa el segundo número", "");
8 TUTORIALS DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
var respuesta = primernumero + segundonumero;
[Link]("La respuesta es " + respuesta);
</script>
</cabeza>
</html>
Convertir cadenas a números
El problema con la instrucción prompt() es que siempre devuelve una cadena. Si lo usamos para obtener dos
números del usuario y sumarlos, vamos a encontrarnos con problemas:
Si ingresas 3 para el primer número y 3 para el segundo, deberías obtener la respuesta 6, pero de hecho obtienes
la respuesta 33. Bueno, las variables primernumero y segundonumero están establecidas en los valores de cadena 3 y 3
que, aunque parecen números, son en realidad cadenas. El signo + luego las concatena a
forma una cadena más larga.
Convertimos la cadena que prompt() nos da en un número. Hay dos instrucciones que podemos
usar, parseInt() y parseFloat().
La instrucción parseInt() tomará una cadena, ya sea como una constante dentro de comillas o como una variable,
o incluso como una expresión, y la convertirá en un número entero. El 'entero' es importante en que - el
"Int" es la parte de la instrucción que significa "entero", que es el nombre técnico para un número entero.
x = parseInt("7");
0
[Link](4.55)+
parseInt("1" + digit0) + "<p>";
ParseFloat() Bueno, esta es la instrucción que usarías si quieres convertir un número entero a
respuesta decimal (número no entero).
e.j.
500
var y = parseFloat(x);
[Link](y + 100);
Ejemplo 2
9 TUTORIALS DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
<html>
<head>
funciones html
<script language="JavaScript">
var primerNumero = parseFloat(prompt("Ingresa el primer número", " "));
var secondnumber = parseFloat(prompt("Introduce el segundo número", ""));
var respuesta = primernúmero + segundonúmero;
[Link]("La respuesta es " + respuesta);
</script>
</head>
</html>
La instrucción eval()
La función Eval() funciona de manera casi idéntica a parseFloat(), por lo que puede producir números decimales como
bien como números enteros. Sin embargo, también puede evaluar matemáticas simples en cadenas. Echa un vistazo a
esto:
var x = eval("2 * 2");
[Link](x);
La instrucción eval("2 * 2") calcula la respuesta a este cálculo y eso se convierte en el valor de x.
La instrucción [Link](x) muestra el número 4 en la pantalla. También puedes incluir
variables dentro de la expresión matemática y se evaluarán correctamente.
var tempval = 100;
var p = 4.5;
var x = eval("tempval - 3 * p");
[Link](x);
La función alert()
La función TheAlert() es una forma alternativa de mostrar mensajes, variables, números, etc. en la pantalla.
que capta tu atención ligeramente más que [Link](). Se llama de manera similar
[Link](), es decir, el ítem a mostrar está encerrado entre paréntesis:
alert("La respuesta es " + respuesta);
Esto produce una caja gris en la pantalla y un ruido de pitido. La caja no desaparecerá ni te permitirá continuar.
con el programa hasta que hagas clic en el botón ACEPTAR.
10 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
Funciones definidas por el usuario en Javascript
Estas son funciones creadas por los usuarios para satisfacer sus necesidades. La función debe ser definida por:
• Uso de la palabra clave Función.
• Asigna un nombre a la función.
• Encierren las instrucciones/declaraciones entre llaves; { }.
Ejemplo 1
<html>
<head>
funciones html
<SCRIPT LANGUAGE="JavaScript">
función suma () // definición de función //
a + b + c;
}
var a = 10, b = 20, c = 30, respuesta, valorPromedio;
suma(); // llamada a la función //
alert("La suma de los números es " + respuesta);
11 TUTORIAL DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
</SCRIPT>
</head>
</html>
Ejemplo 2
<html>
<head>
funciones html
<SCRIPT LENGUAJE="JavaScript">
función promedio()
(a+b+c)/ 3;
}
var a = 10, b = 20, c = 30, respuesta;
promedio();
alert("El promedio de los números es " + respuesta) programa principal
</SCRIPT>
</cabeza>
</html>
En el primer ejemplo, la función suma tres variables, a, b y c, y almacena la suma en una variable llamada
respuesta. El segundo ejemplo suma las tres variables y divide por 3 y almacena el resultado en el
respuesta variable.
El PROGRAMA PRINCIPAL crea las tres variables con diferentes valores y luego llama a la función suma()
función ypromedio(). Muestra el valor derespuestaen la pantalla. La función realiza cualquier visualización
en la pantalla misma, solo hacen cálculos.
Parámetros
Los parámetros son ubicaciones de memoria que reservan un espacio para su uso durante la ejecución. Los parámetros son
estático.
Ejemplo1
<html>
<cabeza>
funciones html
<script language="JavaScript">
función sumar(primer, segundo, tercero) // nombres de parámetros;
primero + segundo + tercero
12 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
}
var a= 100, b= 200, c= 400;
suma(100, 200, 400); // llamada a la función;
alert("La suma es " + respuesta);
</script>
</head>
</html>
Paso de parámetros
• Pasar por valor
Los parámetros pasados por valor significan que los valores son simplemente copiados y transferidos a la instrucción que hace la llamada.
El hecho de que los valores de los parámetros solo se pasen a las funciones, nunca fuera de ellas, a veces
se refiere a pasar por valor. Decimos que el parámetro tiene un alcance que es local a la función.
<SCRIPT LANGUAGE="JavaScript">
Var x = 40;
Alerta ("El valor de temp es" + x);
Marcas(x);
Alerta ("El valor de x es " + x);
Función marcas(x)
{x *= 10; // esto multiplica temp por 10;
[Link] ("Dentro de la función, temp es" + x);
}
</SCRIPT>
• Paso por referencia
El paso de parámetros por referencias significa que los valores se transfieren en su totalidad y no se copian. Modificación
también se puede hacer a los valores.
Alcance de la variable
El alcance significa la extensión o accesibilidad de las variables en un programa. Son de dos tipos.
• Variables globales
Esto significa que las variables existen a lo largo de todo el programa de JavaScript. Pueden ser
accedido por cualquier declaración, función.
<SCRIPT LENGUAJE="JavaScript">
Función Pagos ()
{ var x = 5000;
13 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
[Link]("x");
}
var a = 10;
[Link] ("a");
Pagos ();
[Link]("Después de la llamada, a es " + a + "<BR>");
</SCRIPT>
La declaración de retorno
La instrucción return solo aparece dentro de funciones. Se utiliza para pasar valores fuera de la función.
y de vuelta al programa principal que lo llamó (o a una función llamadora si se llamó desde otro
La instrucción de retorno es seguida por el valor que se va a devolver, y significa que el
una llamada a función puede ser utilizada en lugar de un número o una cadena.
Ejemplo1
<html>
<head>
funciones html
<SCRIPT LENGUAJE="JavaScript">
función promedio (num1, num2, num3, num4)
num1 + num2 + num3 + num4;
Devuelve la suma / 4;
}
var a = 2, b = 30, c = 78, d = 100;
[Link] ("El promedio es " + average(a, b, c, d) + "<BR>");
</SCRIPT>
</head>
</html>
Ejemplo 2
<html>
<cabeza>
funciones html
<SCRIPT LANGUAGE="JavaScript">
función suma (a,b,c)
{ return a + b + c;
}
función promedio (a,b,c)
{ return suma(a,b,c) / 3; }
}
var a = 34, b = 51, c = 60;
14 TUTORIALS DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
alert("La suma de los números es " + sum(a,b,c));
alert("El promedio de los números es " + average(a,b,c));
</SCRIPT>
</head>
</html>
Funciones Recursivas
Las funciones llaman a otras funciones o procedimientos para devolver valores. Es igualmente posible que una función llame
a sí misma. Tal función se llama una función recursiva.
Los factoriales se escriben usando el símbolo !, y se definen de la siguiente manera:
0!=1 (por definición)
1!=1
2!=2x1=2
3!=3x2x1=6
4!=4x3x2x1=24
5! = 5 x 4 x 3 x 2 x 1 = 120
Para obtener el factorial rápidamente, multiplicamos el número por el factorial anterior, es decir, 5! = 5 x 4!. De manera similar, 9!
= 9 x 8! Y 103! = 103 x 102! Esto significa que si conoces un factorial puedes obtener fácilmente el siguiente
en la serie.
Ejemplo 1
<html>
<cabeza>
funciones html
<SCRIPT LENGUAJE="JavaScript">
Función factorial (n)
si
return 1;
sino
return n * factorial(n-1);
}
Muestra todos los factoriales desde 0! hasta 10!
var contador;
por (contador = 0; contador < 11; contador++)
[Link] ("El factorial de " + count + " es " + factorial(count) + "<BR>");
</SCRIPT>
</head>
</html>
15 TUTORÍAS DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
La función toma un parámetro y calcula el factorial de ese número. Ten en cuenta que lo primero que
lo que hace la función es probar si hemos alcanzado el número más bajo para el cual se define el factorial.
Esta es la condición de parada de la función recursiva y todas las funciones recursivas deben tener una.
Supongamos que se había pasado por alto:
función factorial(n)
n * factorial(n-1);
}
Dicha función, al ser llamada, nunca terminaría ya que se estaría llamando a sí misma de manera interminable.
Estructuras de control de Javascript
a) La declaración if
Esta es la forma más sencilla en la que podemos hacer que un programa en JavaScript tome decisiones. Se utiliza para comparar.
dos o más valores en una expresión y devolver un valor.
Sintaxis de la declaración if:
si (condición)
// Las declaraciones que se ejecutarán van aquí
// Pon tantas afirmaciones como creas conveniente
}
La condición es una afirmación que puede ser verdadera o puede ser falsa. Si es verdadera, las declaraciones dentro de la
{ }are executed. If the condition isfalse, the statements aren't executed.
Ejemplo1
<html>
<cabeza>
funciones html
<script language="JavaScript">
var userinput = prompt("Por favor, introduce un número", "")
si(userinput > 100)
{
¡Ingresaste un número realmente grande!
}
</script>
</head>
</html>
Ejemplo2
<html>
<cabeza>
16 TUTORIALES DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
selección
</head>
<script language="text">
var primerNumero = prompt("Ingrese el primer número", "");
si(edad>=18)
{
eres un adulto
}
si(edad<18)
eres joven
}
</script>
</html>
b) Declaraciones si……entonces
Las declaraciones que siguen al else solo se ejecutan si la condición falla. De esta manera, en
al menos un conjunto de declaraciones se lleva a cabo, ya sea antes del else o después de él.
p. ej.
si (a == 6)
[Link]("El valor de a es 6");
else
si (b > 10)
b es mayor que 10 y a no es 6
Ejemplo3
<html>
<cabeza>
selección
<script language="javascript">
var primerNumero=eval(prompt("Ingrese el primer número", ""));
var secondnumber=eval(prompt("Ingresa el segundo número", ""));
var tercerNumero=eval(prompt("Ingresa el tercer número", ""));
var suma=primernumero+segundonumero+tercernumero;
var promedio=suma/3;
[Link]("promedio"+promedio + "<br>");
si(promedio>=80 && promedio<=100)
{
DISTINCIÓN
}
else
17 TUTORIALES DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
si(promedio>=70 && promedio<=79)
{
[Link]("CRÉDITO");
}
más
si(promedio>=60 && promedio<=69)
{
[Link]("PASS");
}
de lo contrario
si(promedio>=500 && promedio<59)
{
[Link]("REFERIDO");
}
de lo contrario
si(promedio>=40 && promedio<=49)
{
[Link]("FALLAR");
}
otro
si(promedio<=79)
{
[Link]("REPITE LA UNIDAD");
}
</script>
</head>
</html>
b) La declaración switch
Switch es una variación de la declaración if. En lugar de tener una condición que puede ser verdadera y falsa (es decir,
la decisión puede tomar uno de dos caminos), se prueba el valor de una variable. La sentencia switch puede luego
realiza una de varias cosas diferentes, dependiendo del valor de la variable.
Puntos a considerar sobre las declaraciones switch:
• Solo puedes probar el valor de una variable simple, no una expresión. Por esa razón, un switch
declaración que comenzó así:
• cambiar (a)
• { case 25 : // etc.
sería perfectamente legal, pero que comenzó de la siguiente manera:
cambiar (a + b)
18 TUTORIALES DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
{ case -40 : // etc.
no sería. Esto se debe a que a + b no es una variable simple.
• A diferencia de las declaraciones if, donde las declaraciones deben estar agrupadas utilizando llaves de apertura y
llaves de cierre, {y}, las declaraciones que forman las partes de la declaración switch no
necesita ser. El punto de partida para cada bloque de declaraciones es obvio - es el caso del palabra
seguido del valor apropiado - y el punto de detención del bloque es igualmente obvio - es
la palabra break que instruye al programa a saltarse el resto de la declaración switch.
• Toma nota de qué partes de la declaración switch requieren un punto y coma y cuáles no. Al igual que el if.
declaración, no hay punto y coma después de la variable que se está probando. Las declaraciones que componen la
los casos tienen puntos y comas al final como de costumbre.
• El salto de palabra es opcional al final de cada bloque. Sin embargo, si no lo incluyes, el
el programa no saltará al final cuando llegue a ese punto. En cambio, seguirá con el
declaraciones para el siguiente caso.
Estructuras de control iterativas en JavaScript
Un bucle es una instrucción de computadora que permite a un programa repetir una secuencia de declaraciones más de
una vez. Hay un término informático especial para esto - lo llamamos iteración. Hay tres tipos de bucle en
JavaScript, y cada uno tiene sus propios usos específicos: el bucle while, el bucle do-while y el bucle for.
Cada bucle tiene un punto de inicio en el programa y un punto final, e incluye ya sea una instrucción
o un bloque entero de declaraciones.
La notación ++
Aumenta el valor de esta variable en 1 para mantener el bucle en funcionamiento.
por ejemplo.
x = 2;
alert(x); // Esto muestra 2 en la pantalla
x++; // Aumentar x en 1
alert(x); // Esto muestra 3 en la pantalla
Este proceso de aumentar un número en 1 se puede realizar con cualquier variable que contenga un número (es decir, un
número entero o un número decimal, positivo, negativo o cero), pero no se pudo hacer con un
variable que contenía una cadena.
19 TUTORÍA DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
Soy una cadena
x++; // ¡Esto debería causar un error!
Podemos adaptar la instrucción para que sume o reste números diferentes de 1. Esto se hace mediante
poner un signo de más (o menos) justo antes del signo igual en la asignación:
primero += 10;
second -= 23.4;
La primera instrucción aquí agrega 10 al valor de primero, para que su valor aumente en 10. De manera similar, el
la segunda instrucción disminuye el valor de segunda en 23.4. Por favor, nota que no hay espacio entre el +
o-sign y el=sign.
También puedes multiplicar o dividir una variable de manera similar colocando un a*o/signo directamente antes de la variable.
=firma.
x /= 10;
alert(x); // Esto muestra el valor 100;
x *= 4;
alert(x); // Esto muestra el valor 400;
También puedes usar la instrucción %= para establecer una variable al residuo cuando esa misma variable es
dividido por el siguiente número. Quizás un ejemplo lo aclare mejor:
var x = 79;
x %= 5;
• El bucle while
Este bucle especifica una condición al principio y continúa iterando todo el tiempo que la condición
permanece verdadero.
Formato del bucle while
mientras (condición)
{
// Las declaraciones que forman el cuerpo del bucle van aquí
}
Ejemplo1
<html>
20 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
<cabeza>
selección
<script language="javascript">
var x = 2;
mientras (x < 100)
{ [Link](x + "<BR>"); }
x += 1;
¡El bucle ha terminado!
</SCRIPT>
</script>
</cabeza>
</html>
La variable x se inicializa en 2. Cuando se encuentra por primera vez el bucle, la condición (x<1000) es
se evalúa. Tiene éxito, por lo que se ejecuta el bucle. Se muestra el valor de x, y luego x se suma a 1.
Luego, la condición se prueba de nuevo, con x ahora igual a 2. Esto sigue siendo menos que 100, así que el bucle es
se ejecuta de nuevo. El bucle sigue ejecutándose hasta que el valor de x se establece en 101. La condición luego prueba
verificar si es menor que 100, por lo que el bucle no se ejecuta y el programa continúa con el
declaración después del final del bucle, es decir, el programa muestra el mensaje "El bucle ha terminado".
• El bucle do-while
Este bucle es similar al bucle while, pero con una diferencia sutil. Esta vez, la condición se prueba
al final de cada iteración del bucle. Esto significa que el bucle debe iterar al menos una vez. Nunca puede
ser omitido por completo.
Formato del bucle do-while
hacer
{
// Las declaraciones que forman el cuerpo del bucle van aquí
}
mientras (condición);
21 TUTORIALES DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
En el bucle indo-while, las llaves son necesarias para encerrar las declaraciones. Con los otros tipos de
bucles, puedes omitir las llaves si solo tienes una declaración para incluir (así como puedes
con declaraciones if), pero con el bucle do-while, son necesarias. Lo siguiente:
hacer
x += 2;
mientras (x < 2500);
Sería ilegal. Tendría que escribirse como
hacer
{ x += 2;
}
mientras (x < 2500);
Ejemplo1
<html>
<head>
selección
<script language="javascript">
var x = 0;
hacer
[Link](x +"<br>");
x++;
mientras (x<=10);
</script>
</head>
22 TUTORIALS DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
</html>
Declaración de bucle for
El bucle for contiene un encabezado encerrado entre corchetes. Hay tres partes en el encabezado, separadas
por punto y coma;
Sintaxis del bucle for
Por (inicialización; condición de continuación; operador de incremento/decremento)
{
// Declaraciones
}
La parte de inicialización es una declaración que se lleva a cabo antes de que se ejecute el bucle. Normalmente establece un
variable a un cierto valor inicial. La condición de continuación es una condición probada al inicio de cada
iteración. Si la condición es verdadera, entonces el bucle itera - y continúa repitiéndose hasta que la condición
falla. El operador de incremento/decremento es una instrucción que se lleva a cabo al final de cada
iteración.
Ejemplo1
<html>
<cabeza>
selección
<script language="javascript">
para (x = 1; x <= 100; x = x + 1)
[Link](x+"<br>");
</script>
</head>
veintitrésTUTORÍA DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
</html>
Este bucle comienza configurando la variable x en 1. Se realiza la prueba: ¿Es x menor o igual a 100? Sí
es, así que se ejecuta el bucle. La declaración [Link]() se ejecuta. La declaración de fin de bucle
se lleva a cabo (count++) y el valor de count sube a 1. Todo se repite, y el nuevo
se muestra el valor 1.
Bucles anidados en javascript
Es perfectamente posible incluir un bucle completamente dentro de otro. Tales bucles se conocen como anidados.
bucles.
Ejemplo1
Crea un programa en javascript que muestre tablas de multiplicar, desde 1 x 1 = 1 hasta 12 x 12 = 144
la pantalla
<html>
<cabeza>
selección
<script language="javascript">
var tabla = 1;
var índice;
mientras (tabla <= 12)
<P>
para (índice = 1; índice <= 12; índice++)
[Link](index + " x " + table + " = " + (index * table) + "<br>");
tabla++;
</script>
24 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
</head>
</html>
Arreglos de JavaScript
Estas son variables con el mismo nombre y tipo de datos en una memoria de computadora. En lugar de un solo
variable tenemos varias variables en una memoria con el mismo nombre y tipo de retorno.
Declarando arreglos
var numeros = new Array();
numbers[0] = 41;
numbers[1] = -5;
números[2] = 20;
números[3] = 0;
3
números[5] = -11;
numbers[6] = 37;
Hay una forma alternativa de establecer los valores en los elementos de la matriz. Así como se pueden establecer las variables ordinarias.
a valores al mismo tiempo que se declaran, puedes hacer lo mismo con arreglos:
var numeros = new Array(41, -5, 20, 0, 3, -11, 37);
Ejemplo1
<html>
<cabeza>
selección
<script language="javascript">
var numeros = new Array();
numbers[0] = 41;
numbers[1] = -5;
números[2] = 20;
numbers[3] = 0;
números[4] = 3;
numbers[5] = -11;
25 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
numbers[6] = 37;
[Link]([números]);
</script>
</head>
</html>
Arreglos unidimensionales, bidimensionales y multidimensionales
Los arrays que hemos estado mirando hasta ahora son arrays unidimensionales: los valores se extienden en un
línea.
Las matrices bidimensionales contienen tanto columnas como filas.
En este caso, dado que tenemos filas y columnas, necesitamos dos números para especificar un elemento del arreglo.
Declarando dos dimensiones
La declaración y el uso de arreglos bidimensionales se realiza de manera similar a los arreglos unidimensionales, excepto
que cada columna del arreglo debe ser declarada individualmente.
X[0][0] = 34;
x[2][4] = 30;
animación en JavaScript
Una película hecha fotografiando posiciones sucesivas de objetos inanimados (como marionetas o
partes mecánicas). Una película creada a partir de una serie de dibujos que simulan movimiento mediante
cambios progresivos ligeros.
Técnicas de animación
26 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
• Animación basada en fotogramas
La animación basada en fotogramas es la más simple de las técnicas de animación. Implica simular movimiento al
mostrando una secuencia de cuadros estáticos. Una película es un ejemplo perfecto de animación basada en cuadros; cada
el fotograma de la película es un fotograma de animación. Cuando los fotogramas se muestran en rápida sucesión, crean
la ilusión de movimiento. En la animación basada en cuadros, no existe el concepto de un objeto distinguible
del fondo; todo se reproduce en cada cuadro. El número de imágenes utilizadas en el
Contar applets en el último capítulo haría una buena animación basada en fotogramas. Al tratar cada imagen como
un fotograma de animación y mostrar todos a lo largo del tiempo, puedes crear animaciones de conteo.
• Animación basada en el elenco
La animación basada en personajes, que también se llama animación de sprites, es una forma de animación muy popular y ha
se ha visto mucho uso en juegos. La animación basada en casting involucra objetos que se mueven de manera independiente de los
fondo. En este punto, puede que estés un poco confundido por el uso de la palabra "objeto" al referirse a
a partes de una imagen. En este caso, un objeto es algo que lógicamente se puede pensar como un separado
entidad del fondo de una imagen. Cada objeto en una animación basada en el elenco se refiere como un sprite,
y puede tener una posición cambiante. Casi todos los videojuegos utilizan sprites en algún grado. Por ejemplo,
cada objeto en el juego classicAsteroidsgame es un sprite que se mueve de forma independiente de los otros objetos. Los sprites
generalmente se les asigna una posición y una velocidad, que determinan cómo se mueven.
• Animación Basada en el Tiempo
Una mejor técnica de animación para mover elementos en una página es una técnica basada en el tiempo que anima el
elemento a la posición objetivo dentro de un tiempo especificado. Esto también produce una animación más consistente
a través de diferentes navegadores y sistemas operativos.
Controles de entrada de JavaScript ( formularios de JavaScript )
Obtenemos datos en un programa de JavaScript utilizando la función prompt(). Esto se puede lograr fácilmente mediante
incluyendo un formulario en una página web. Un formulario incluye varios elementos, cada uno de los cuales es un botón, una casilla de verificación
o una pequeña ranura para ingresar texto.
Además, podemos vincular cada uno de estos elementos con su propia pieza de código JavaScript, de modo que cuando
se hace clic en el elemento, JavaScript hace algo. Esta vez es el usuario, no el programa, que
decide cuándo se pasan los datos al programa y en qué orden.
La etiqueta <FORM>
27 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
La etiqueta <FORM> se termina por </FORM> y contiene tanto texto en bruto como HTML.
le gusta (tablas, imágenes, hipervínculos, etc.), sin embargo, también contiene etiquetas de entrada, que generalmente toman la forma
de<INPUT>seguido por</INPUT>.
Controles de cuadro de texto en javascript
Ejemplo 1
<html>
formularios
<cabeza>
<FORM NAME=myForm>
var primernumero<INPUT TYPE="text"></INPUT><br>
var segundonúmero<INPUT TYPE="text"></INPUT><br>
var total<INPUT TYPE="text"></INPUT><br>
<INPUT TYPE="button" VALUE="¡Haz clic en mí!" ONCLICK=alert("el total es: " + total);>
<HR><P>
</FORM>
</head>
</html>
Ejemplo2
<html>
formularios
<head>
28 TUTORIALES DE JAVASCRIPT
ELABORADO POR KABA N. DANIEL
<FORM NAME=askName>
Por favor, introduce tu nombre: <INPUT TYPE="text" NAME=persona SIZE=40 </INPUT>
<BR><CENTER>
<INPUT TYPE="button" VALUE="Here it is" ONCLICK="say_hello();">
</CENTRO>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
función decir_hola ()
[Link]
si (usuario == "")
¡Ah ja! ¡Veo que eres el hombre sin nombre!
sino
[Link]("Bienvenido, " + usuario);
<P>
</SCRIPT>
</head>
</html>
Botones de radio en javascript
Son pequeños círculos en los que el usuario puede hacer clic para activarlos o desactivarlos. Cuando están activados, ellos
están llenos de negro. Cuando se limpian, son blancos. Para crear un botón de opción, utiliza el <INPUT
TYPE="radio">etiqueta. La leyenda del botón se muestra como texto normal después.
29 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
Los botones de radio son similares a las casillas de verificación con una diferencia esencial. Puedes agrupar varios botones de radio.
botones juntos en cuyo caso el usuario solo podrá seleccionar uno de ellos a la vez. Si el usuario
si hace clic en cualquiera de los botones, entonces ese se establece y cualquier otro botón que estaba configurado se borra
automáticamente.
<html>
formularios
<head>
<FORM NAME=quiz>
¿En qué país se encuentra la Gran Muralla China?
<INPUT TYPE="radio" NAME="q" ONCLICK="guess(1);"></INPUT> Inglaterra <BR>
<INPUT TYPE="radio" NAME="q" ONCLICK="guess(2);"></INPUT> Rusia <BR>
<INPUT TYPE="radio" NAME="q" ONCLICK="guess(3);"></INPUT> China <BR>
<INPUT TYPE="radio" NAME="q" ONCLICK="guess(4);"></INPUT> Australia
<P>
<INPUT TYPE="button" ONCLICK="markAnswer();" VALUE="Hecho"></INPUT>
</FORM>
<HR><P>
</FORM>
</cabeza>
</html>
Áreas de texto
Un área de texto es similar a un cuadro de texto, excepto que es una gran área rectangular en la pantalla en la que
el usuario puede escribir tanto texto como sea necesario. Cuando se define un área de texto utilizando la etiqueta <TEXTAREA>, tú
debería especificar el número de columnas verticales y filas de texto horizontales.
Ejemplo1
Cualquier texto que incluyas aquí será
aparecer dentro del área de texto. ¡La mayoría de los programadores dejan esta parte en blanco! Por supuesto, el usuario puede cambiar el
¡Texto aquí, de lo contrario no tendría sentido!
30 TUTORIALES DE JAVASCRIPT
PREPARADO POR KABA N. DANIEL
