Link to home
Start Free TrialLog in
Avatar of James Hancock
James HancockFlag for United States of America

asked on

Must I get a special Eclipse IDE for Javascript development?

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
Avatar of Juan Ocasio
Juan Ocasio
Flag of United States of America image

TRy VSCode.  It was designed with Javascript in mind and is light weight.
remember that JAVA and JAVAScript have nothing in common other than the "JAVA" being in the name.
I think he was referring to Javascript and not Java.
Eclipse is primarily known as a JAVA IDE
That is true, but the article beavoid links to is describing how to use JavaScript in Eclipse, hence his question.
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.
Avatar of James Hancock

ASKER

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?
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
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
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
You can't compile Javascript using eclipse. I will reiterate JavaScript is NOT JAVA.
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
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
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
This flappy bird game seems to be also done in atom

https://www.youtube.com/watch?v=L07i4g-zhDA
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++
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
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.
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?
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.
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/
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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?
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.
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
Thanks All

The project is rolling!