Programming Languages Guide

Home C# JavaScript Next Step Help and Tips Feedback ☰

Getting started with JavaScript

JavaScript is the programming language of HTML and the web. It is used to program the behavior of web pages.

First make sure you have downloaded and installed Visual Studio Code.

Now let's write some JavaScript code.

Hello World in Scratch

In Scratch, you have learned to output dialogs like this:

But how do you do this in JavaScript?

1. Create a folder called HelloWorld on your desktop.

2. Open Visual Studio Code and go to File - Open Folder and select the HelloWorld folder you set up in step 1.

3. Click on the new file icon in the Explorer to add a new file.

4. Name the file helloWorld.html

5. Add the below code.

<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" />
	<title>JavaScript - Hello World</title>

</head>
<body>


	<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>

	<script type="text/javascript">

		
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");

		context.beginPath();
		context.arc(95,50,40,0,2*Math.PI);
	
		context.strokeStyle ='#ff0000';
		context.stroke();

		canvas.addEventListener("mousedown", canvasClick, false);

		

		function canvasClick() 
		{
			canvas_X = event.pageX;
			canvas_Y = event.pageY;
			context.font = "30px Arial";
			context.fillText("Hello World",200,100);
		}

	</script>

</body>
</html>

6. Save the file.

7. Open the helloWorld.html file in a browser and it should display like below.

8. Click inside the canvas and the "Hello World!" text should display.

A copy of this project can be downloaded here.

Getting started with Phaser

Phaser is an open source game framework for making desktop and mobile browser HTML5 games.

Before you begin this tutorial, make sure you are NOT using Google Chrome.

Reopen this website in web browsers such as Firefox, Safari or Edge.

If you are using Chrome please see To display images properly on Google Chrome in Phaser Help and Tips.

Creating a simple Phaser Project

Let's create a simple Phaser project.

1. Create a folder called MyFirstPhaserProject on your desktop.

2. Inside the MyFirstPhaserProject folder create another folder called js.

3. Download phaser.js file from phaser.io.

4. Cut and paste the file into the js folder.

5. Open Visual Studio Code and go to File - Open Folder and select the MyFirstPhaserProject folder you set up in step 1.

6. Click on the new file icon in the Explorer.

7. Name the file index.html

Your folder should look like this

You are now ready to start!

Game Stage in Scratch

In Scratch, you start with a stage like this

But how do you do this in JavaScript?

Creating a game stage using Phaser

1. Open the index.html you created in the previous part.

2. Add the below code.

<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" />
	<title>Phaser - First Project</title>
	<script type="text/javascript" src="./js/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

//code to create a canvas
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'First Project', 
			{ preload: preload, create: create,update:update });
				
function preload() 
{

}

function create() 
{

}

function update() 
{
	
}

</script>
</body>
</html>

3. Save the file

4. Open the index file in a browser and it should display like below.

1. Download the star png icon and save it inside your project folder.

You folder should now look like this

2. Go back to Visual Studio Code and add the following code.

	
	var player;
	
	//code to load image
	function preload() 
	{
		game.load.image('star', 'star.png');
	}
	
	//code to display image
	function create() 
	{
		player = game.add.sprite(50, 50,'star');
	}

3. Save the file.

4. Open the index file in a browser and your image should display something similar like below.

Challenge

How about adding a different image to the canvas?

Can you move the star in a different location?

Now we are going to add some text!

1. Go back to the index.html file.

2. Add the following code inside the function create().

	
	//code to add text
	var text = "Hello World!";
	var style = { font: "30px Arial", fill: "#4488AA", align: "center" };
	
	//code to display text
	var display = game.add.text(game.world.centerX, game.world.centerY, text, style).anchor.set(0.5);

3. Save the file.

4. Go the project folder and double click on the index.html to open the file in a browser.

The browser should display the text "Hello World!" and the star image like below

Challenge

How about changing the "Hello World!" text to "Ennis CoderDojo!"?

Let make the star move!

In Scratch a basic movement code looks like this.

How do we do this in JavaScript?

1. Go back to the index.html file.

2. Add the following code after the function create().

	
function update() 
{
	if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) 
	{
		player.y -= 10; // Move up
	}
  
	if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) 
	{
		player.y += 10; // Move down
	}
  
	if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) 
	{
		player.x -= 10; // Move left
	}
  
	if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) 
	{
		player.x += 10; // Move right
	}
}

3. Save the file.

4. Go the project folder and double click on the index.html to open the file in a browser.

You should be able to move the star image using the arrow keys.

Well done! You have just created your first Phaser project!!

A copy of this project can be downloaded here.

This is what your index.html file should look like.

<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" />
	<title>Phaser - First Project</title>
	<script type="text/javascript" src="./js/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'First Project', { preload: preload, create: create,update:update });

var player;

function preload() 
{
	game.load.image('star', 'star.png');
}

function create() 
{
	player = game.add.sprite(50,50,'star');
  
	var text = "Hello World!";
	var style = { font: "30px Arial", fill: "#4488AA", align: "center" };

	var display = game.add.text(game.world.centerX, game.world.centerY, text, style).anchor.set(0.5);
}

function update() 
{
	if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) 
	{
		player.x -= 10; // Move left
	}
	
	if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) 
	{
		player.x += 10; // Move right
	}
	
	if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) 
	{
		player.y -= 10; // Move up
	}
	
	if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) 
	{
		player.y += 10; // Move down
	}
}

</script>
</body>
</html>

Now that you have created your first JavaScript project, you can choose to

Read about some of the JavaScript fundamentals.
Start Creating your first Phaser game.

Getting started with JavaScript

Hello World in Scratch

A copy of this project can be downloaded here.

Getting started with Phaser

Before you begin this tutorial, make sure you are NOT using Google Chrome.

Reopen this website in web browsers such as Firefox, Safari or Edge.

If you are using Chrome please see To display images properly on Google Chrome in Phaser Help and Tips.

Creating a simple Phaser Project

You are now ready to start!

Game Stage in Scratch

Creating a game stage using Phaser

Challenge

Challenge

Well done! You have just created your first Phaser project!!

A copy of this project can be downloaded here.

Now that you have created your first JavaScript project, you can choose to

Read about some of the JavaScript fundamentals.

Start Creating your first Phaser game.