Dónde colocar código JavaScript?

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 …

  1. Entre el & lt; head & gt; … & lt; / head & gt; etiqueta
  2. Entre el & lt; body & gt; … & lt; cuerpo / & gt; etiqueta
  3. 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 :


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *