Menu
I have a question about including a file in javascript. I have a very simple example:
--> index.html --> models --> course.js --> student.js course.js:
function Course() { this.id = ''; this.name = ''; } A student has a course property. like this:
import './course'; function Student() { this.firstName = ''; this.lastName = ''; this.course = new Course(); } and the index.html is like:
<html> <head> <script src="./models/student.js" type="text/javascript"></script> </head> <body> <div id="myDiv"> </div> <script> window.onload= function() { var x = new Student(); x.course.id = 1; document.getElementById('myDiv').innerHTML = x.course.id; } </script> </body> </html> But I am getting an error on the line "var x = new Student();":
Student is not defined
When I remove the import from Student, I don't receive the error anymore. I have tried to use (require, import, include, create a custom function, export) and none has worked for me.
Anybody knows why? and how to fix that?
P.S. the path is correct, it comes from the autocomplete in VS Code
317
Using ECMAScript6 (ES6), you can use the import / export feature. Using this, you can import/export functions, variables, classes. Copy import {calcArea} from './first. js'; document.
Use JavaScript import() to dynamically load a module. The import() returns a Promise that will be fulfilled once the module is loaded completely. Use the async / await to handle the result of the import() .
Calling a function using external JavaScript file Once the JavaScript file is created, we need to create a simple HTML document. To include our JavaScript file in the HTML document, we have to use the script tag <script type = "text/javascript" src = "function.
Answer: Use the export and import Statement Since ECMAScript 6 (or ES6) you can use the export or import statement in a JavaScript file to export or import variables, functions, classes or any other entity to/from other JS files.
The following works for me in Firefox and Chrome. In Firefox it even works from file:///
models/course.js
export function Course() { this.id = ''; this.name = ''; }; models/student.js
import { Course } from './course.js'; export function Student() { this.firstName = ''; this.lastName = ''; this.course = new Course(); }; index.html
<div id="myDiv"> </div> <script type="module"> import { Student } from './models/student.js'; window.onload = function () { var x = new Student(); x.course.id = 1; document.getElementById('myDiv').innerHTML = x.course.id; } </script> You can try as follows:
//------ js/functions.js ------ export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } //------ js/main.js ------ import { square, diag } from './functions.js'; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5 You can also import completely:
//------ js/main.js ------ import * as lib from './functions.js'; console.log(lib.square(11)); // 121 console.log(lib.diag(4, 3)); // 5 Normally we use ./fileName.js for importing own js file/module and fileName.js is used for importing package/library module
When you will include the main.js file to your webpage you must set the type="module" attribute as follows:
<script type="module" src="js/main.js"></script> For more details please check ES6 modules
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
