For the rest of this material, we will be moving from the basics of DOM manipulation to the meat and potatoes of programming. This means we are going to cover the ideas of conditionals, looping, encapsulation and syntax. I know those may not be familiar to you, but over the next few lessons they will become second nature! Remember when DOM was a scary word? Encapsulation will soon go the way of the DOM. You're going to be encapsulating everything.
That is the goal with this class. While we may touch on making pictures of cats spin, we want you to internalize the thought process required to solve that silly problem. Hopefully, you'll go off after this class and solve some slightly more important problems :)
The Learn IDE is available as both an in-browser development environment as well as a standalone application.
To choose which environment you would like to work in, on any learn.co page, click your user image in the upper right corner of the page, then click 'Manage Account.'
In Account Management, click 'Learning Environment' and choose either 'IDE In Browser' or 'IDE Download.' Or, if you are already comfortable using an IDE and a console and prefer your own set up, you may also choose 'Local.' This lesson's instructions assume that you are using the Learn IDE in browser.
If you choose 'IDE In Browser' you are set and can navigate back to this lesson. If you have chosen 'IDE Download,' you can download and set up the IDE here.
Now, click "Open IDE" to open your environment. On the left side is your file
tree. In the
js-from-dom-to-node folder, click
index.js to open the file up.
IT'S CODING TIME.
First thing is first, I want to show you that everything we will do in the IDE,
you can do in the console. In your browser, right click and select Inspect.
Select the Console tab, type
console.log("Hello, World!"), and press
You should see "Hello, World!" printed right below your line of code. Congrats!
You just wrote your first line of browser-less code. All this does is print out
whatever is in between the parenthesis.
Let's bring that code over to our
index.js file on the IDE. Make sure you
are editing the
index.js file, which is inside a folder,
js, inside the
js-from-dom-to-node folder. Once in there go ahead and paste the following
code in there:
Now when you hit
Enter, nothing super interesting will happen. All that occurs
is the cursor moves to a new line. That's because you are in the text editor.
This is pretty much the same as using Word. To get this to actually return
something like we did in the Console in the browser we need to execute the
index.js file. It sounds super official, but all we are going to do is tell
the IDE "I'm ready, run this code and show me the result".
First, we have to save the file. Next, look at the pane at the bottom of the IDE. This is your terminal. Below your code you should see a flashing cursor like this:
Alright, let's let the magic happen! First, we need to make sure we are in the
right folder. Our goal is to make it into the "js-from-dom-to-node" folder. If
you look at the text next to the time, you should see
something very similar. If you see that, you are good and you can skip the next
section. If it says something else, follow these instructions:
If you see
code, we need to go into our
labsfolder first. To do this type
cd labs. Now if should see
labsnext to the clock. We have to go one more folder in. I know this by looking at the folder structure on the left. See how
js-from-dom-to-nodeis in labs? Ok now we need to
js-from-dom-to-nodelab. Take a look at your folder structure on the right to get the exact name and then type
cd EXACT-FOLDER-YOU-WANT-TO-ENTER. In my case, I get
js-from-dom-to-node. If you were successful, you'll see
js-from-dom-to-nodenext to the clock.
To run your code, in your terminal, you can type
is the node code runner and
index.js is the name of your file. You should see:
Now let's submit it back to Learn. In your terminal type
learn submit. This
will send your code up to Learn and you may move on to the next lesson.
more_js. From your current directory, run
node more_js/example_one.js and
node more_js/example_two.js to see them in action.
After you type in
node index.js you get something looks like:
module.js:471 throw err; ^ Error: Cannot find module '/home/jmburges/code/labs/index.js' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.runMain (module.js:604:10) at run (bootstrap_node.js:393:7) at startup (bootstrap_node.js:150:9) at bootstrap_node.js:508:3
The key there is "Error: Cannot find module". That just means you are in the
wrong folder. Go back and read the earlier paragraph that starts "If you see
code...". That should help you out. You need to be seeing
js-from-dom-to-node next to the clock.
View From DOM To Node and the IDE on Learn.co and start learning to code for free.