GUIA DE JAVASCRIPT 3
SEPARAR EL CODIGO JAVASCRIPT DEL CODIGO HTML
Para separa el código javascript del código html utilizamos el atributo SRC del la etiqueta y
además crear una archivo .js.
<SCRIPT> :
<SCRIPT Languaje="javascript" SRC="funciones.js">
</SCRIPT>
funciones.js: es un archivo donde estarán todas funciones que necesitaremos, en otras
palabras, copiamos todo lo que está dentro de la etiqueta <SCRIPT> a este archivo.
El atributo SRC funciona igual que en la etiqueta <IMG>, para el ejemplo el archivo funciones.js
debe estar guardado en la misma carpeta que el código html.
EJEMPLO: hagamos el mismo ejemplo de la guía 1 ejemplo 1 pero ahora separando el código
javascript del código HTML.
1. CREAR EL ARCHIVO HTML
<HTML>
<HEAD>
<TITLE> PRUEBA</TITLE>
<SCRIPT Languaje="javascript" SRC="concatenacion.js">
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM ACTION="OTRAPAGINA.HTML" NAME="CLIENTE" METHOD="POST">
<input type="button" onclick="concatenar();" value="CONCATENA DOS PALABRAS">
</FORM>
</BODY>
<HTML>
1. CREAR EL ARCHIVO concatenacion.js
function concatenar()
{
var res;
var variable1=prompt("DIGITE UNA PALABRA :"," ");
var variable2=prompt("DIGITE UNA PALABRA :"," ");
res= variable1+" "+ variable2;
alert("La palabra concatenada es: "+res);
}
LISTO….. PROBAR CON LOS DEMAS EJEMPLOS Y EJERCICIOS DE LA GUIA 1 Y 2……..
OTRO EJERCICIO: SEPARE EL CODIGO JAVASCRIPT DEL CODIGO HTML DEL SIGUIENTE CODIGO.
<HTML>
<HEAD>
<TITLE>Calculadora</TITLE>
<SCRIPT>
var total = 0
var UltimaOperacion = "+"
var NuevoNumero = true
function IntroduceNumero(Digito) {
var Formu = Digito.form
if (NuevoNumero) {
BorraNumero(Formu)
NuevoNumero = false
}
Formu.display.value = Formu.display.value + Digito.name
}
function Limpiar(Formu) {
total = 0
UltimaOperacion = "+"
Formu.display.value = ""
}
function BorraNumero(Formu) {
Formu.display.value = ""
}
function Calcula(Operacion) {
var Formu = Operacion.form
var Expresion = total + UltimaOperacion +
Formu.display.value
UltimaOperacion = Operacion.value
total = eval(Expresion)
Formu.display.value = total
NuevoNumero = true
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<TABLE BORDER=1>
<TR><TD COLSPAN=4><INPUT TYPE=text NAME=display VALUE=""
onFocus="this.blur();"></TD></TR>
<TR>
<TD><INPUT TYPE=button NAME="7" VALUE=" 7 "
onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button
NAME="8" VALUE=" 8 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="9" VALUE=" 9 "
onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="+" VALUE=" + "
onClick="Calcula(this);"></TD></TR><TR> <TD><INPUT TYPE=button
NAME="4" VALUE=" 4 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="5" VALUE=" 5 "
onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="6" VALUE=" 6 "
onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="-" VALUE=" - "
onClick="Calcula(this);"></TD>
</TR>
<TR>
<TD><INPUT TYPE=button NAME="1" VALUE=" 1 "
onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="2" VALUE=" 2 "
onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="3" VALUE=" 3 "
onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="*" VALUE=" * "
onClick="Calcula(this);"></TD></TR><TR> <TD><INPUT TYPE=button
NAME="0" VALUE=" 0 " onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="C" VALUE=" C "
onClick="Limpiar(this.form);"></TD>
<TD><INPUT TYPE=button NAME="CE" VALUE="CE"
onClick="BorraNumero(this.form);"></TD>
<TD><INPUT TYPE=button NAME="/" VALUE=" / "
onClick="Calcula(this);"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Crear cuenta
Comentarios de: Guía de Javascript 3 - Separar el código Javascript del código HTML (0)
No hay comentarios