Hassle with Javascript imports - javascript

Most of the things I read online are either outdated or not precise enough.
I'm gonna try to expose my problem.
I was writing a d3 project comprise of 2 files, whose structure is like following
main.html :
<!DOCTYPE html>
<html>
<head>
<script src="./d3/d3.js"></script>
<script src="./KMeans.js"></script>
</head>
<body>
<script type="text/javascript">
<!--Some code -->
var kmeans = new KMeans();
</script>
</body>
</html>
KMeans.js :
class KMeans {
//class related stuff
}
Everything was working super fine, until I decided to add a new class named "Clustering" in a new file to be inherited by KMeans. The code became like this one :
main.html :
<!DOCTYPE html>
<html>
<head>
<script src="./d3/d3.js"></script>
<script type="module" src="./KMeans.js"></script>
</head>
<body>
<script type="text/javascript">
<!--Some code -->
var kmeans = new KMeans();
</script>
</body>
</html>
KMeans.js :
import {Clustering} from './Clustering.js';
export class KMeans extends Clustering {
//class related stuff
}
Clustering.js :
export class Clustering {
}
And I keep getting this error :
ReferenceError: KMeans is not defined
For info, I'm not using Babel or any transpiler.
For the life of me, I can't understand a thing concerning the module management in JS. Could someone help me shed the light on what's wrong, please ?

After a script is defined as a module the variables defined in it are no longer made public. So, you have two options.
Option 1
You can make both Clustering and KMeans regular, non-module files, and remove all import and export statements. This will solve your issue.
Option 2
You can move the final script tag to its own file and make it a module itself (maybe you can keep in inline and still make it a module but I'm not sure about this), and remember to import KMeans if you want to use it.

Related

Import classes into one main file shows error

I create many js classes and wanna import all of them to one main.js file where I want to invoke all of methods from these classes I need. Then, I want to use this main.js script in my index.html website file.
But shows me error like this: Failed to load resource: the server responded with a status of 404 (Not Found) in console for every method I want to use. I do not think that it's a problem with paths but I do not have any idea how to solve this.
main.js class
import NavigationAnimation from "./dom/navigation";
NavigationAnimation.stickyNav();
NavigationAnimation class
export default class NavigationAnimation {
//code
}
files structure is like this:
and my index.html is like that
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
</header>
<main>
</main>
</body>
<script type="module" src="js/main.js"></script>
</html>
Can anybody explain what is wrong?
The import statement isn't being transpiled so needs to be the full filename, including the extension, just like the call for main.js:
import NavigationAnimation from './dom/navigation.js' // <- add '.js' here
Also consider using the .mjs extension.

ES6 modules in Chrome

I'm trying to use ES6 modules in Chrome. From all the examples I've looked at the following seems to be the right way to do it, but when I run it in Chrome's developer tools I get this error message...
uncaught SyntaxError: Unexpected token {
...highlighting the import statement in the module (script1.js, below) that's trying to import the module. I've seen a lot of references to problems like this but none of the suggestions to remedy the situation have worked for me. If you could see what I'm doing wrong, I'd sure appreciate your help...
here's the html...
<html>
<head>
<script src="lib1.js" type="module"></script>
<script src="script1.js"></script>
</head>
<body>
</body>
</html>
here's the module (lib1.js)...
export function doSomething() {
alert("in module lib1");
}
here's the script (script1.js) that tries to import the module...
import { doSomething } from "lib1.js";
doSomething();
EDIT:
After about an hour of head scratching and finding out that my answer (pre-edit) was downvoted I got to this:
lib.js:
function doSomething() {
console.log('in module lib');
}
export {doSomething};
script.js:
import { doSomething } from './lib.js';
doSomething();
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="module" src="script.js"></script>
</body>
</html>
lib.js, script.js, and index.html are on the same directory.
I added .js to import { doSomething } from './lib.js'; because it didn't work otherwise. According to Mozilla certain bundlers may permit or require the use of the extension for the module-name.
But this only worked on Firefox Quantum (ver. 62.0.3).
I enabled Experimental JavaScript on Chrome (ver. 70.0.3538.77) on:
chrome://flags/#enable-javascript-harmony
with no signs of success, but considering this worked on Firefox and that
this compatibility table shows both Chrome and Firefox being on the same level of compatibility is making me more confused so I'll probably end up asking a question regarding this whole thing.
Your code won't work in any browser. This is the right way to do it:
index.html
<html>
<head>
<script src="script.js" type="module"></script>
</head>
<body>
</body>
</html>
lib.js
export function doSomething() {
alert("in module lib1");
}
script.js
import { doSomething } from "./lib.js";
doSomething();
<script src="script.js" type="module"></script> is the key ... shame on error message in Chrome
Thanks, it finally works for me, though this was really confusing to me at first!
In case anybody's interested, there are two confusing things that finally made it for me after walking around in circles for a while:
You add type="module" to the <script> into which you import the module, not the module itself. In fact, there is only one <script> in the index.html file. The modules are then only imported from within the index.js file.
you need to import the file in the index.js with extension, such as:
import search from "./search.js";
I tried this on Firefox.

javascript including math.js

I am trying to call the Math.matrix() function, and I am quite certain I am not importing the file correctly into my javascript code. I have read through the StackOverflow question "how to include and use math.js": and given that advice, I have the following :
<HTML >
<!DOCTYPE html>
<head>
<script src=https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.1.1/math.js>
</script>
<script type="text/javascript" >
function rotate_clockwise(){
/* code skipped */
matrix = Math.matrix(matrix, rotationmatrix);
}
</script>
</head>
<body>
</body>
</HTML>
where the cdns reference I have taken from this link
But on run when rotate_clockwise is called via slider the chrome 68 debugger states Uncaught type error : Math.matrix is not a function, so I do believe I am not including this file correctly.
My base assumption is that including a file once, in one set of script tags, is enough for any javascript function to use this library, which resides within a different set of script tags.
Thanks so much for any assistance you can provide.
I think you need math.matrix(...)--lower case math since Math is a standard JS library.

Support for script type="text/babel" in Visual Studio Code

When I'm editing the below example HTML page in Visual Studio Code (borrowed from Facebook's React tutorial and slightly edited), if I write any Javascript code in the script block, it is not syntax highlighted. But if I change the script block type to "text/javascript" then the syntax highlighting works. But then any React-y/JSX code doesn't work as it is wired to work through Babel.
Is there any way to have the script tag "type" attribute set to "text/babel" and at the same time have proper syntax highlighting in Visual Studio Code?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
ReactDOM.render(
<div>Hello world!</div>,
document.getElementById('content')
);
</script>
</body>
</html>
I found a solution to this now.
Open up: (VS code home dir)\resources\app\extensions\html\syntaxes\html.json, and edit the regex for the script tag. That fixed the issue for me.
Well this is a workaround, probably will be better to change this in a post build process, but I found an easy way to do it with this new feature TagHelpers which will help to replace the javascript value by babel
So add a file TagHelpers/ScriptTagHelper.cs
[HtmlTargetElement("script", Attributes = "to_babel")]
public class ScriptTagHelper : TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.Attributes.SetAttribute("type", "text/babel");
}
}
In your page Index.cshtml
<script type="text/javascript" to_babel>
And dont forget to import TagHelpers in _ViewImports.cshtml or in your Index.cshtml
#using app1
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#addTagHelper *, app1
And voila! this render as babel.

How to specify, different JS file for different view page in play framework?

How do we define different javascript files for different view pages in play framework??
One way is to=>
#main(title, """
#*JS CODE*#
"""{
//Template Codes
}
And in main template, use it like=>
#(title,stringJS){
<script>
#Html(stringJS)
</script>
}
But what if the JS code is to be used in not all pages but selected few, the dev can't copy the JS code in every relative view page.In my case all the javascripts are loaded on the footer, which is a seperate template.
How do we solve this problem??
Any help is appreciated, thank you!
It's described in the Common templates use cases doc , section : 'moreScripts and moreStyles equivalents'
In very short it works like this (view)
#moreScripts = {
<script type="text/javascript">alert("hello !");</script>
}
#moreStyles = {
<style>background: pink;</style>
}
#main("Title", moreScripts, moreStyles){
Html content here ...
}
and in main.scala.html start with:
#(title: String, moreScripts: Html = Html(""), moreStyles: Html = Html(""))(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
#moreStyles
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
#moreScripts
</head>
<body>
#content
</body>
</html>
I came up with my solution,thanks to this Helpful SO post, what I did was:
#main(title, """
#*NO JS CODE, but declaration itself*#
<script src="/assets/javascripts/libs/main.js" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/libs/main.js")" type="text/javascript"></script>//Doing this gives out errors, so I had to hardcode the "src" location
"""{
//Template Codes
}
If there is more efficient way to solve this issue, ideas are welcome, because hard-coding src isn't an efficient way of dealing with this issue, imo.

Categories

Resources