Learn JavaScript in Construct, part 1: getting started

52

Index

Features on these Courses

Attached Files

The following files have been attached to this tutorial:

.c3p

learn-js-part-1.c3p

Download now 47.67 KB

Stats

23,450 visits, 57,089 views

Tools

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

This tutorial is recommended by the Construct team! This means it contains useful, high quality information that will help grow you as a game developer.
Published on 24 Sep, 2021. Last updated 1 Apr, 2022

JavaScript is one of the most popular programming languages in the world, with a wide range of applications from browsers to servers, many companies looking to hire JavaScript developers, and many other advantages such as outstanding performance. That all makes it a great choice for starting to learn how to code. This tutorial series will help teach you the beginnings of the JavaScript programming language in Construct!

This tutorial is aimed at beginners. If you already know JavaScript, check out the Construct for JavaScript developers quick start guide.

JavaScript is not Java

One common point of confusion to clear up right away is that Java and JavaScript are two completely different programming languages! The naming is indeed somewhat confusing, but try not to get the two mixed up. For example if you search the web for help on JavaScript, be sure to specifically search for JavaScript and not Java, otherwise you will get results for the wrong programming language!

About this guide

This guide will help you learn the JavaScript programming language using Construct's JavaScript coding feature. This is a good way to get started as you can just start writing code right away without having to set up a development environment (such as a local HTTP server). The entire tutorial series is designed to work within the limits of the free edition, so you can learn JavaScript with this guide without having to purchase anything. Construct's JavaScript coding feature also provides lots of ways to do more in your projects, so is a useful thing for more advanced Construct users to learn as well.

Construct uses the standard JavaScript programming language so you're learning exactly the same thing as is used everywhere else in the industry. Construct does not alter the language in any way - in fact the browser runs your code directly.

Construct's block-based system in event sheets is designed to be easier for beginners to get started with. If you want to try getting started with blocks, or just gain some familiarity with Construct first, consider trying the Beginner's guide to Construct.

You don't have to have used Construct before to follow this guide. However some familiarity will be useful. If you are also familiar with variables, loops and functions in event sheets, this will also be helpful. These features of event sheets are intentionally designed to be similar to how the equivalent programming language features work. So if you know how they work in event sheets, this will help give you a head start in understanding how they work in JavaScript. This guide will note where event sheets have similar concepts to JavaScript. These references won't be essential to following the guide though, it's just extra context for Construct users who are already familiar with event sheets.

What you'll learn

This guide will cover the basic features of the JavaScript programming languages, covering topics like variables, 'if' statements, loops and functions. JavaScript is a mature language with a huge range of features, and this guide does not attempt to cover it in its entirety. The goal is to teach you enough JavaScript that you can learn from other guides across the web and know how to apply it in Construct. (Some additional guides will be linked at the end of the series.)

JavaScript was invented in 1995, and like most old programming languages, JavaScript has its fair share of quirks and legacy features. However this guide will focus on the most useful parts using a modern style with best practices, and avoid going in to detail about quirks or old features that are no longer widely used. In other words, this is a practical guide focused on writing real-world code.

Ready to get started? Head to the next page to write your first line of code!

  • 14 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • How do I draw a line with Javascript in Construct3?

  • Wonder why Construct 3 writes certain words like "log" in red. Doesn't red mean an error? Confusing.

    Otherwise, how do I define an error in code?

  • I am using Google Chrome, and after entering the script, pressing f12 will display unnecessary scam errors. How can I solve this problem? "Stop!

    main.js:3009 This is a browser feature intended for developers. If someone told you to copy and paste something here to enable a feature or "hack"..."

      • [-] [+]
      • 1
      • Ashley's avatar
      • Ashley
      • Construct Team Founder
      • 1 points
      • (0 children)

      That means you opened dev tools for the editor, not preview. The message includes the text: "Note: this is the developer tools console for the Construct editor. If you're looking for developer tools for preview, be sure to open developer tools for the preview window instead."

      Make sure the preview window is focused when you press F12.

  • I wrote a javascript file in files folder - how do I import that?

  • I'm using the Vivaldi browser. And if I install Construct as a web app--a stand-alone window. When I hit F12, the whole browser quit, not just the stand-alone window but Vivaldi force quit on me. I have to use editor.construct.net inside the browser to use F12 successfully.

  • Load more comments (6 replies)