Botones en Javascript
Podemos introducir botones que realicen alguna cosa, pero OJO, los botones tenemos que ponerlos en el código de nuestra web en html y en el sitio que queramos que aparezcan. Luego podremos decir qué hacen desde el archivo JavaScript.
Un botón se crea de la siguiente manera:
<input type="button" value="texto dentro del boton" name="boton1" onclick="lo que hace al hacer click sobre el boton" />
Desglosemos cada parte:
input type="button" Nos crea un botón
value="texto dentro del boton" Para el texto que aparecerá dentro del botón
name="boton1" el nombre que identifica a nuestro botón. Si tenemos más de una podemos llamarles boton1, boton2, etc.
onclick="lo que hace al hacer click sobre el boton" Pues eso, lo que hará cuando lo pulsemos.
Borra todo lo que tengas en los archivos javascript.js y web.html. Abre el archivo web.html y escribe dentro del <body> (cuerpo)
<input type="button" value="Click Aquí" name="boton1" onclick="alert('Hola ¿Que tal?')"" />
Tiene que quedarte algo parecido a esto
<html>
<head>
<title>Esta es mi página web con Javascript enterno</title>
<input type="button" value="Click Aquí" name="boton1" onclick="alert('Hola ¿Que tal?')"" />
</head>
<body>
</body>
</html>
Ahora guarda y piensa qué ocurrirá. Abre la página y comprueba si funciona como pensabas.
Si queremos que un botón realice alguna parte del programa que tengamos en el archivo JavaScript, lo que queremos que haga debemos escribirlo en JavaScript dentro de una función. Tranquilo, no te asustes, es muy fácil.
En el onclick de un botón se suele poner o hacer referencia para que vaya a una función del archivo javascript, por eso el siguiente paso es aprender las funciones.
Funciones en JavaScript
Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.
Hay veces que dentro de un programa varias instrucciones se repiten muchas veces, sobre en todo en programas muy largos. Para no tener que repetirlas una y otra vez las agrupamos dentro de una función y cada vez que queramos activarlas solo tendremos que "llamar" o "invocar" a la función donde estén.
Resumiendo, una función es un trozo de código que hace algo concreto y que podemos utilizarlo en cualquier parte de nuestro programa y las veces que queramos.
Veamos cómo se crea una función:
function nombre_funcion() {
instrucciones de la función
}
El nombre de la función se utiliza para llamar o invocar a esa función cuando queramos que se ejecute. El concepto es el mismo que con las variables, a las que se les asigna un nombre único para poder utilizarlas dentro del código. Después del nombre de la función, se incluyen dos paréntesis cuyo significado se detalla más adelante. Por último, los símbolos { } se utilizan para encerrar todas las instrucciones que pertenecen a la función (de forma similar a como se encierran las instrucciones en las estructuras if ).
Veamos un ejemplo:
var numero1 = 5;
var numero2= 9;
function suma_y_muestra() {
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}
Para "llamar" o "invocar" a la función dentro del programa solo tendremos que escribir su nombre de la siguiente forma:
suma_y_muestra();
Fíjate que hemos declarado las variables que usará la función antes de la función. También podríamos ponerlas después de la función, pero siempre antes de llamarla.
Cada vez que el programa lea suma_y_muestra(); realizará la función. Normalmente las funciones que vamos a utilizar en el programa se definen al principio del programa, para eso debemos tener muy claro qué funciones necesitaremos.
¿Recuerdas los botones que decíamos que dentro de onclick se especificaba la función que queríamos que realizara al apretarlo? Vamos hacerlo.
Abre el archivo nuestrojavascript.js y escribe la función siguiente:
function mifuncion() {document.write("¡¡¡Estupendo el Boton Hace lo que Queremos!!" )}
Ahora vamos a decirle al botón, en la web en html, que lea esa función cuando apretemos el boton (onclick). Escribe lo siguiente en el archivo web.html:
<input type="button" value="Click Aquí" name="boton1" onclick="mifuncion()"" />
La web debería quedar parecida a esto:
<html>
<head>
<title>Esta es mi página web con Javascript enterno</title>
http://nuestrojavascript.js
<input type="button" value="Click Aquí" name="boton1" onclick="mifuncion()" />
</head>
<body>
</body>
</html>
Abre el archivo web.html y aprieta el botón creado. Está chulo, ¿no?
Ahora tenemos controlado lo que queremos que haga un botón, dentro del html, mediante JavaScript. Solo tenemos que escribir lo que queremos que haga el botón dentro de nuestra función en JavaScript.
Tutorial de JavaScript (XII)
Podemos introducir botones que realicen alguna cosa, pero OJO, los botones tenemos que ponerlos en el código de nuestra web en html y en el sitio que queramos que aparezcan. Luego podremos decir qué hacen desde el archivo JavaScript.
Un botón se crea de la siguiente manera:
<input type="button" value="texto dentro del boton" name="boton1" onclick="lo que hace al hacer click sobre el boton" />
Desglosemos cada parte:
input type="button" Nos crea un botón
value="texto dentro del boton" Para el texto que aparecerá dentro del botón
name="boton1" el nombre que identifica a nuestro botón. Si tenemos más de una podemos llamarles boton1, boton2, etc.
onclick="lo que hace al hacer click sobre el boton" Pues eso, lo que hará cuando lo pulsemos.
Borra todo lo que tengas en los archivos javascript.js y web.html. Abre el archivo web.html y escribe dentro del <body> (cuerpo)
<input type="button" value="Click Aquí" name="boton1" onclick="alert('Hola ¿Que tal?')"" />
Tiene que quedarte algo parecido a esto
<html>
<head>
<title>Esta es mi página web con Javascript enterno</title>
<input type="button" value="Click Aquí" name="boton1" onclick="alert('Hola ¿Que tal?')"" />
</head>
<body>
</body>
</html>
Ahora guarda y piensa qué ocurrirá. Abre la página y comprueba si funciona como pensabas.
Si queremos que un botón realice alguna parte del programa que tengamos en el archivo JavaScript, lo que queremos que haga debemos escribirlo en JavaScript dentro de una función. Tranquilo, no te asustes, es muy fácil.
En el onclick de un botón se suele poner o hacer referencia para que vaya a una función del archivo javascript, por eso el siguiente paso es aprender las funciones.
Funciones en JavaScript
Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.
Hay veces que dentro de un programa varias instrucciones se repiten muchas veces, sobre en todo en programas muy largos. Para no tener que repetirlas una y otra vez las agrupamos dentro de una función y cada vez que queramos activarlas solo tendremos que "llamar" o "invocar" a la función donde estén.
Resumiendo, una función es un trozo de código que hace algo concreto y que podemos utilizarlo en cualquier parte de nuestro programa y las veces que queramos.
Veamos cómo se crea una función:
function nombre_funcion() {
instrucciones de la función
}
El nombre de la función se utiliza para llamar o invocar a esa función cuando queramos que se ejecute. El concepto es el mismo que con las variables, a las que se les asigna un nombre único para poder utilizarlas dentro del código. Después del nombre de la función, se incluyen dos paréntesis cuyo significado se detalla más adelante. Por último, los símbolos { } se utilizan para encerrar todas las instrucciones que pertenecen a la función (de forma similar a como se encierran las instrucciones en las estructuras if ).
Veamos un ejemplo:
var numero1 = 5;
var numero2= 9;
function suma_y_muestra() {
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}
Para "llamar" o "invocar" a la función dentro del programa solo tendremos que escribir su nombre de la siguiente forma:
suma_y_muestra();
Fíjate que hemos declarado las variables que usará la función antes de la función. También podríamos ponerlas después de la función, pero siempre antes de llamarla.
Cada vez que el programa lea suma_y_muestra(); realizará la función. Normalmente las funciones que vamos a utilizar en el programa se definen al principio del programa, para eso debemos tener muy claro qué funciones necesitaremos.
¿Recuerdas los botones que decíamos que dentro de onclick se especificaba la función que queríamos que realizara al apretarlo? Vamos hacerlo.
Abre el archivo nuestrojavascript.js y escribe la función siguiente:
function mifuncion() {document.write("¡¡¡Estupendo el Boton Hace lo que Queremos!!" )}
Ahora vamos a decirle al botón, en la web en html, que lea esa función cuando apretemos el boton (onclick). Escribe lo siguiente en el archivo web.html:
<input type="button" value="Click Aquí" name="boton1" onclick="mifuncion()"" />
La web debería quedar parecida a esto:
<html>
<head>
<title>Esta es mi página web con Javascript enterno</title>
http://nuestrojavascript.js
<input type="button" value="Click Aquí" name="boton1" onclick="mifuncion()" />
</head>
<body>
</body>
</html>
Abre el archivo web.html y aprieta el botón creado. Está chulo, ¿no?
Ahora tenemos controlado lo que queremos que haga un botón, dentro del html, mediante JavaScript. Solo tenemos que escribir lo que queremos que haga el botón dentro de nuestra función en JavaScript.
Tutorial de JavaScript (XII)
[…] Tutorial de JavaScript (XI) […]
ResponderEliminar[…] Tutorial de JavaScript (XI) […]
ResponderEliminar