En este artículo, vamos a aprender acerca de la colocación del código JavaScript , donde podemos colocar el código JavaScript en un archivo HTML?
En un código HTML, JavaScript se puede colocar en tres lugares …
- Entre el & lt; head & gt; … & lt; / head & gt; etiqueta
- Entre el & lt; body & gt; … & lt; cuerpo / & gt; etiqueta
- En el archivo externo con una extensión “.js”
Entre el & lt; head & gt; … & lt; / head & gt; y & lt; body & gt; … & lt; cuerpo / & gt; etiquetas
Si queremos colocar un código JavaScript en un archivo HTML, se puede colocar ya sea en & lt; head & gt; … & lt; / head & gt; etiqueta o & lt; body & gt; … & lt; cuerpo / & gt; etiqueta.
Sintaxis:
<script type="text/javascript">
//js code
</script>
Ejemplo:
<html>
<head>
<title>JavaScipt Example</title>
<script type="text/javascript">
//function to add two numbers
function sum(a, b){
return (a+b);
}
</script>
</head>
<body>
<script type="text/javascript">
//function to subtract two numbers
function sub(a, b){
return (a-b);
}
</script>
<p>Here, we are printing sum & sum...</p>
<p id="result1"></p>
<p id="result2"></p>
<script type="text/javascript">
//calling functions & printing the values
document.getElementById("result1").innerHTML = "sum = " + sum(10,20);
document.getElementById("result2").innerHTML = "sub = " + sub(10,20);
</script>
</body>
</html>
Salida:
En el archivo externo con la extensión “.js”
Podemos también escribir código JavaScript en una archivo externo y class el archivo en un archivo HTML.
Sintaxis de archivo JavaScript class en un archivo HTML:
<script src="file_name.js"></script>
Ejemplo:
archivo JavaScript (functions.js)
//function to add two numbers
function sum(a, b){
return (a+b);
}
//function to subtract two numbers
function sub(a, b){
return (a-b);
}
archivo HTML
<html>
<head>
<title>JavaScipt Example</title>
<script src="functions.js"></script>
</head>
<body>
<p>Here, we are printing sum & sum...</p>
<p id="result1"></p>
<p id="result2"></p>
<script type="text/javascript">
//calling functions & printing the values
document.getElementById("result1").innerHTML = "sum = " + sum(10,20);
document.getElementById("result2").innerHTML = "sub = " + sub(10,20);
</script>
</body>
</html>
salida :