If you ever want to show your friends something cool, open up the console on any web page and then find the selector for an element, then modify it using
From DOM Manipulation to Programming Logic
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 :)
To launch the Learn IDE, click the blue Open button at the top of this page. This should download the lesson to your IDE and open the IDE. If you need to re-download the IDE, you can do so here.
Now open the "js-from-dom-to-node" folder on the left folder viewer pane and then select the file
index.js. 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. First, return to your browser, right click and select Inspect. Then make sure the Console is selected and type
console.log("Hello, World!") and press Enter. 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 in the
index.js file in 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
js-from-dom-to-node or 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
labs folder first. To do this type
cd labs. Now if should see
labs next 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
labs is in
js-from-dom-to-node is in labs? Ok now we need to
cd into the
js-from-dom-to-node lab. 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-node next to the clock.
To run your code, you can type
nodejs is the node code runner and
index.js is the name of your file. You should see:
learn submit. This will send your code up to Learn and you may move on to the next lesson.
After you type in
nodejs index.js you get something looks like:
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)
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.