Must I get a special Eclipse IDE for Javascript development?

beavoid
beavoid used Ask the Experts™
on
HI

I've asked other questions about Javascript,
but I saw that one advice page said that I must get a special eclipse IDE for web development.... but I already have eclipse Kepler. Is that not enough?

...down at Getting Eclipse IDE for JavaScript and Web Developers

here

That's quite a surprise...
Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Juan OcasioApplication Developer

Commented:
TRy VSCode.  It was designed with Javascript in mind and is light weight.
Top Expert 2016

Commented:
remember that JAVA and JAVAScript have nothing in common other than the "JAVA" being in the name.
Juan OcasioApplication Developer

Commented:
I think he was referring to Javascript and not Java.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2016

Commented:
Eclipse is primarily known as a JAVA IDE
Juan OcasioApplication Developer

Commented:
That is true, but the article beavoid links to is describing how to use JavaScript in Eclipse, hence his question.
leakim971Multitechnician
Top Expert 2014

Commented:
what do you call Javascript development?
for basic need, to create a simple HTML page with some javascript scripts, you don't need a specific Eclipse version
for specific Javascript based project (ES6, nodejs, any JS library...) I believe you need a tools able to propose more option to help you develop your application.
beavoidSelf Employed

Author

Commented:
Thanks
I read something today where a dude said to make my project in whatever I was most comfortable in.
That would be Java
I thought web-pages could only launch javascript / applets
Has that changed?
Will most people's browsers be able to launch regular Java? will it support swing or awt graphics?
leakim971Multitechnician
Top Expert 2014

Commented:
java run usually server, applet is now an old techologies, you should go away especially now Oracle change the licence
java generate HTML after processing it server side so it's not about java, it's about the HTML you generate
beavoidSelf Employed

Author

Commented:
My server will be in Java, and my game client in javascript.

Now my eclipse says, while trying to compile the javascript (run it)

"could not find JRE executable,"

this is from an html javascript launch of a simple integer adding code from a site.

Where might the JRE be? how do I specify this?

Thanks
beavoidSelf Employed

Author

Commented:
I think VScode def has some potential. If it is light weight, can it still handle a network game? I'm sure that won't be a problem? Does light weight mean only for small projects?
I just need to create a network game client that sends TCP activity messages to my Java server. and then receives game-state updates and draws, updates a game window screen / region.
I understand the network capabilities can exist in a Threaded object? sweet !

Thanks
Top Expert 2016

Commented:
You can't compile Javascript using eclipse. I will reiterate JavaScript is NOT JAVA.
beavoidSelf Employed

Author

Commented:
Thanks
I know that javascript is not Java. I'm only mentioning Java because I have a TCP server working in Java already. I'm new to JS

At this tutorial below, the guy uses an IDE called atom. Is vscode similar / better than this? atom seems okay.
https://www.youtube.com/watch?v=w-OKdSHRlfA
beavoidSelf Employed

Author

Commented:
Hi
Thanks
But, it looks like from pages I've seen, - the Youtube javascript-expert-examples are all done in an IDE that's dark grey with color coded code text.
After some looking around, that IDE is called Atom

example code instruction - https://www.youtube.com/watch?v=M6sA8fvMCuA

installation - https://www.youtube.com/watch?v=OVzD59Af0m0

This must be my next move? - This is exactly what this question is trying to answer. Are people all using this IDE?
Thanks
beavoidSelf Employed

Author

Commented:
Here. In this YT example,
the dude's IDE is stated to be Atom in the window title

https://www.youtube.com/watch?v=M6sA8fvMCuA
beavoidSelf Employed

Author

Commented:
This flappy bird game seems to be also done in atom

https://www.youtube.com/watch?v=L07i4g-zhDA
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
The key point everybody is to separate the front end (HTML/CSS/Javascript) from the back end (Java/database).

Let's say you are storing data on your server such as usage or points for a global scoreboard.  You may have an endpoint on your server for https://example.com/api/saveScore that excepts data from your users. And another endpoint  https://example.com/api/getTopScores which you use to send data to your users html/javascript so they can view the top scores.

On the front end, you will use HTML, CSS and Javascript to display and perhaps animate the actual scoreboard. While you are doing this, you are only using HTML, CSS and Javascript and not the back end.

What this means is you can have multiple working environments. One for your Java back end which you can use Eclipse. And another for your front end which can be https://atom.io/. Your flappy bird video shows they use http://brackets.io.  I use jetbrains myself https://www.jetbrains.com/ along with Visual Studio, VSCode https://code.visualstudio.com/ and notepad++
beavoidSelf Employed

Author

Commented:
Hi
I think Atom and Javascript are proving a little out there for me. I need to get things going.
I'm going to go back to what I know perfectly well, Java.
If I can make my game JFrame appear in a browser, I'll be set.
Will the game be identical in a browser as to a window?

Thanks
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
I am not a java developer but I am pretty sure you can't run a java applet in a browser anymore https://java.com/en/download/help/enable_browser.xml   I have used third party java applets in the past that had to be transformed to a client that local machine could access and then allow the browser interact with the local client.

When you say, "Atom and Javascript are proving a little out there for me. "  Atom in this case is just referring to the IDE. I think the real issue is the learning curve for html and javascript. If you do want this to work in the browser, perhaps take a week off to immerse yourself in learning javascript and html.  https://www.codecademy.com/learn/learn-javascript is a good start. I like these courses because they are coding along with short articles.  EE also has an extensive video course https://www.experts-exchange.com/courses/2525/Fundamentals-of-Javascript.html.

To make things run smoothly in the browser, html and javascript will be the way to go for the front end and keep java for your back end.
beavoidSelf Employed

Author

Commented:
Thanks

I'm expecting to use Java as the back end. Ive done that before.

I've been wasting days trying to get Javascript to work. It doesn't work in Eclipse, even though there is a Javascript button, next to the Java button. Atom isn't an IDE. It can do code completion, colors, etc, but not compile.
Someone just told me to use commands into a command line to compile / run Javascript. If I can write code in Atom and compile it in a console, that would be fine.

What did you do?
Top Expert 2016

Commented:
Javascript doesn't ever compile. it is a script execution language. These scripts then run in the users web browser  document object module.  
Javascript is closer to basic programming language than it is to to JAVA in that it is an interpreted language not a compiled language.

Users don't want to run the Java runtime, especially in a browser. Pogo was a popular game site and everytime java updated users had to roll back since not all of their games used updatable code. It could take months where a user had to run a vulnerable version of JAVA in order to play certain pogo games. The site has transformed to javascript from java.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
You need to work on the back end separately from the front end.

As example https://www.w3schools.com/graphics/tryit.asp?filename=trygame_default_gravity
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            return;
        } 
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();
    myGamePiece.update();
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function accelerate(n) {
    myGamePiece.gravity = n;
}
</script>
<br>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
<p>Use the ACCELERATE button to stay in the air</p>
<p>How long can you stay alive?</p>
</body>
</html>

Open in new window


This is an example javascript game.  If you want to do things like track users and scores, you would create an api on your server and hit the api with ajax calls.

As example, in the function updateGameArea() at the bottom (lines 117 to 120), you can add a function to hit your api to record the score.

I hope this makes more sense now.

As far as an IDE, I use jetbrains products.  For pure html and JS there is https://www.jetbrains.com/webstorm/
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
The key is, you would need to familiarize yourself with html and javascript to convert your came for a web browser.  Then move on to dive into canvas https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
Juan OcasioApplication Developer

Commented:
David Johnson:
Javascript doesn't ever compile

This isn't exactly true.  It's not compiled in quite the same way a program in C++/Java is compiled.  In true interpreted languages, the code runs line by line with no initial steps before.  JavaScript, on the other hand makes a first pass, where it creates an abstract syntax tree and lexical environment (the compile phase), before actually running the code.  I think a better way to think about it is JavaScript is a language where there is a JIT compile time right before the execution.  This compilation happens every time the program is run.  It is true, however that languages traditionally thought of as compiled languages ship their code in byte code whereas JavaScript is shipped in source code format.
beavoidSelf Employed

Author

Commented:
Thanks Scott

That is the first Javascript that has been set up by me to work. It's been a weird trip. Anyway. . .
So, now, I just edit in Atom?
Can I link Atom to my Godaddy hosting folder - so changes can be run immediately in a browser? How do you suggest I manage my project?

Do you think Javascript might be a future for games?
Juan OcasioApplication Developer

Commented:
beavoid:

If you're interested in JavaScript development, I would suggest you look into VSCode.  It was built with JavaScript in mind.  It is built with Electron (same as Atom), has many features, like Emmet out of the box, and is a really great editor.  You'll be able to step through your JavaScript file, attach a debug session to different processes (like the web browser), and the user experience is phenomenal.  For viewing your project in the browser, there is a Live-Server extension which will allow you to preview in your favorite browser, as well as a newer extension called browser preview that will allow you to view your project directly in the editor.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Can I link Atom to my Godaddy hosting folder
I don't use Atom though I have tried it out.  There are extensions https://atom.io/packages/remote-sync or https://atom.io/packages/remote-ftp
beavoidSelf Employed

Author

Commented:
Thanks All

The project is rolling!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial