why do we need javascript?

In the starter project, you can click on the sphere in the back left corner of the gallery and the sky changes to a different photosphere while the rest of the gallery disappears. Here's me doing it with VR controllers, but you can also click on it with the mouse on desktop or tap on it on mobile to try it out.

How did I do this? Well, first I looked in A-Frame documentation for an existing component or entity that would have this effect. I also did a search on Github and Google but didn't find a component that did what I wanted. So, I wrote my own!

To write a component, I had to use a coding language called JavaScript. While HTML lets you set up the overall structure and elements of your website, JavaScript lets you add interactive effects to it. You can do all sorts of fun things with JavaScript - you can make your WebXR experience DO stuff.

You could use JavaScript to dynamically update your HTML, make your WebXR site do things automatically or based on user behavior, create user interfaces, build sweet features, update other A-Frame components, and interact with other services.

In Projects 1, 2, and 3, we were able to do a lot just with HTML, but the experiences were mostly static and visual. There were things to explore, but we couldn't click on stuff or do too much besides look around. We were able to do animations, but only because we were using a component that someone else had already written with JavaScript!

Long story short? It's time to dive into JavaScript.

create a javascript file with glitch

You could write JavaScript right in your index.html file, but that's not a great way to write JavaScript for a few reasons. For one, your index.html file will get too long and difficult to understand.

So, you're going to write your first JavaScript in a separate JavaScript file. To make a JavaScript file with Glitch, just create the "New File" button in the Glitch sidebar and give the file a title of public/js/whateveryouwant.js

You can put any name you want where I put whateveryouwant, but make sure the file name ends with .js so that you create it as a JavaScript file.

register your A-Frame component

We've made our JavaScript file - now we can code our A-Frame component inside of it. To make a component, the first thing to do is name and register it. I'm going to name this first component disappear because eventually, this component will cause things to disappear when they are clicked.

Here's the code to register, name, and set up a component. Go ahead and copy it in your new .js file, and don't worry if it looks like gibberish - we'll understand it all in good time:
‍
‍AFRAME.registerComponent('disappear', {    
   
   init: function () {      

   }  
‍
});

You can also find this code inside the componentstarter.js file that's inside the starter project. In the first line, we register the component and give it a name. To tidy things up, I'm also going to rename my JavaScript file so that it's name is public/js/disappear.js You can rename a JavaScript file in Glitch by selecting the file in the Glitch sidebar, pressing the arrow dropdown, and clicking the "Rename" button like this:‍‍

Look again at the code we have so far. What's up with the init thing on line 3? Initialize is a fancy word for load, and this init function is where you can put any code that you want to run as soon as the component loads. For our disappear component, this is just what we want.

I put the closing curly braces for init two lines below to leave some space for your code. You're going to write your first JavaScript inside of init's curly braces‍

code your first javascript variables: Numbers and Strings

The first thing we're going to have our component do is define a variable.

Variables are a key part of JavaScript. Variables are containers for different kinds of data. You can store all kinds of things inside variables, but we're going to start by making a variable that stores a number. If you have any familiarity with algebra, the idea of a variable will be familiar. When you solve equations like X+6 = 11, X is a variable. There are a few ways to create a variable in JavaScript, but we're going to start with the let keyword.

Here's how you can use the let keyword to create a variable named mynumber and assign it a value of 5.

let mynumber = 5

You could have given it a different name than mynumber if you wanted - the name of the variable is up to you. All in all, the code inside your new JavaScript file should now look something like this:

AFRAME.registerComponent('disappear', {    

 init: function () {      
     let mynumber = 5      
   }  
‍
});

You can stick with the 5 value or you can make the value of the mynumber variable any whole number you want.

You can also store text inside a variable. Text and other characters stored inside a variable is called a string. To give a string value to a variable, the string needs to be in quotation marks. Here's how you can define a variable called mystring and give it a string value:

let mystring = "My component is going to be awesome."

If you put your variables on the same line in your JavaScript file, you would have to separate them with a semi-colon. If you put them on separate lines, though, the semi-colon isn't necessary. Still, many people think that putting semi-colons after defining variables (and other things) helps to make your code more understandable when others read it. I use semi-colons after defining variables and other things, so that's why you'll see them in my code. My JavaScript file now looks like this:

AFRAME.registerComponent('disappear', {    

  init: function () {      
      let mynumber = 5;    
      let mystring = "My component is going to be awesome.";      
    }  
});‍

log your variables to the console

In Frame Academy Project 1, we learned a bit about the browser console, and we saw how you can use it to view errors or warnings that your code might be causing in the browser. You can pull up the browser console by loading your WebXR site (or any site) and pressing control-shift-i on the keyboard.

You can also use JavaScript to write messages, or logs, to the console, and this is a handy way to test out your code to see if you've set things up the right way. To test that our variables are set up the right way, we're going to start by writing our variables to the console. The message in the console that appears is called a console log. You can make a console log by using console.log(). Whatever you want to log to the console goes inside the parentheses. You can log the value of our variables by simply using their variable names. I named my variables mynumber and mystring. Return to your JavaScript file and put this code in the lines below your new variables:

console.log(mynumber);
console.log(mystring);

If you load your project now and bring up the console, you still won't see your logs show up. What gives? Well, even though we've made a new JavaScript file and written some JavaScript in our component, we haven't yet attached the component to an entity in our HTML file! Think about components like animation or scale: they need to be attached to an entity in order to do something.

To do this, it takes a few more steps. Don't worry though, we've actually done these things in previous projects!

1. Head back to your index.html file. First we need to import our new JavaScript file, just as we've done with other components that aren't included with A-Frame. We can do this with a script element inside the head element in our index.html. Because my JavaScript file is called public/js/disappear.js, I can put this script element inside my head element in my HTML to import the new JavaScript file:

<script src="public/js/disappear.js"></script>

2. Now, we just need to actually add the component to an entity in my scene, or to the scene entity itself, just as we would any other component (for example animation, position, or scale). In this example, I'll add it to the scene entity. If you remember, the way to attach a component to an entity is to use the name of the component as an HTML attribute on the entity. I named my component disappear, so that's what I can use for my HTML attribute.

Here I am both importing my JavaScript file and then attaching my disappear component to the scene entity.

You can now check your console logs by loading up your page and using control-shift-i to open the console. Somewhere in there you should see your logs, and the console will even let you know where in your code the log comes from. Take a look at the values for my variables showing up in the console:

I know we haven't actually done any disappearing yet with our disappear component (we will soon, I promise), but you've learned or reviewed some really fundamental stuff, such as:

- how to make a new JavaScript file
- how to register and name an A-Frame component
- how to define some simple JavaScript variables
-how to log your variables to the console.
- how to import JavaScript files into HTML document.
- how to add your custom A-Frame component to an entity in your scene.

Here's the updated code for the project with all of the above code in it.