En JavaScript, se puede acceder a las variables desde otro archivo utilizando las etiquetas <script> o la declaración de importación o exportación . La etiqueta de script se usa principalmente cuando queremos acceder a la variable de un archivo JavaScript en un archivo HTML. Esto funciona bien para secuencias de comandos del lado del cliente, así como para secuencias de comandos del lado del servidor. Sin embargo, la declaración de importación o exportación no se puede utilizar para secuencias de comandos del lado del cliente. La declaración de importación o exportación funciona en Node.js durante la secuencia de comandos del lado del servidor.
Primer Enfoque: Primero se crea el archivo “ module1.js ” y se define un objeto Estudiante con las propiedades “nombre”, “edad”, “depto” y “puntuación”. El archivo JavaScript module1.js se importa utilizando el atributo src de la etiqueta de secuencia de comandos dentro de la sección «head» del archivo HTML. Dado que el archivo JavaScript se importa, se puede acceder al contenido dentro del archivo HTML.
Creamos un botón que, cuando se hace clic, activa la función de JavaScript. Se accede a las propiedades del objeto Student a través de la función f() y todas las propiedades del objeto Student se concatenan en una variable de string. Esta string se coloca dentro de la etiqueta <p> que tiene una identificación de ‘texto’ usando document.getElementById() y la propiedad innerHTML de HTML DOM. Este es un ejemplo de un programa del lado del cliente.
Implementación de código:
acceso_variable.html
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="module1.js">
</script>
</head>
<body>
<button onclick="f()">
Click Me To Get Student Details
</button>
<div>
<p id="text" style="color:purple;
font-weight:bold;font-size:20px;">
</p>
</div>
<script type="text/javascript">
function f() {
var name = Student.name;
var age = Student.age;
var dept = Student.dept;
var score = Student.score;
var str = "Name:" + name + "\nAge: "
+ age + "\nDepartment:" + dept
+ "\nScore: " + score;
document.getElementById(
'text').innerHTML = str;
}
</script>
</body>
</html>
module1.js Este archivo se usa en el código HTML anterior.
Javascript
var Student =
{
name : "ABC",
age : 18,
dept : "CSE",
score : 90
};
Producción:
Segundo enfoque: en este enfoque, creamos un archivo JavaScript » module1.js » y definimos un objeto Student que tiene las propiedades «nombre», «edad», «depto» y «puntuación». El objeto Estudiante se exporta usando module.exports. En otro archivo de módulo de JavaScript » module2.js «, importamos » module1.js » usando la declaración de importación al comienzo del archivo. Los objetos Hostel y Hostel_Allocation se definen en el archivo » module2.js » y se accede al objeto Student en el objeto Hostel_Allocation .
Se crea un servidor HTTP y se aloja en el puerto no. 8080. Las propiedades de Hostel_Allocation se concatenan en una string. Esta string se imprime en la página de destino de la aplicación web cada vez que se ejecuta. Este es un ejemplo de secuencias de comandos del lado del servidor.
Implementación de código:
módulo1.js
Javascript
var Student = {
name : "ABC",
age : 18,
dept : "CSE",
score : 90
};
module.exports = {Student};
módulo2.js
Javascript
var http = require('http');
const {Student} = require('./module1.js');
var Hostel = {
student_count: 500,
no_of_rooms: 250,
hostel_fees: 12000
}
var Hostel_Allocation = {
room_no : 151,
student_name: Student.name,
student_age: Student.age,
student_dept: Student.dept,
total_fees: 12000
}
var str = "Room No: " + Hostel_Allocation.room_no
+ "\nStudent Name: "
+ Hostel_Allocation.student_name
+ "\nTotal Fees: "
+ Hostel_Allocation.total_fees;
http.createServer(function (req, res) {
res.write(str);
res.end();
}).listen(8080);
Producción:
Inicie el servidor
node module2.js
Ejecutar la aplicación en el navegador
localhost:8080
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA