├── .learn ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── index.js └── more_js ├── example_one.js └── example_two.js /.learn: -------------------------------------------------------------------------------- 1 | tags: 2 | - JavaScript 3 | - node 4 | - console 5 | - ide setup 6 | - bcp 7 | languages: 8 | - JavaScript 9 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Learn.co Curriculum 2 | 3 | We're really excited that you're about to contribute to the [open curriculum](https://learn.co/content-license) on [Learn.co](https://learn.co). If this is your first time contributing, please continue reading to learn how to make the most meaningful and useful impact possible. 4 | 5 | ## Raising an Issue to Encourage a Contribution 6 | 7 | If you notice a problem with the curriculum that you believe needs improvement 8 | but you're unable to make the change yourself, you should raise a Github issue 9 | containing a clear description of the problem. Include relevant snippets of 10 | the content and/or screenshots if applicable. Curriculum owners regularly review 11 | issue lists and your issue will be prioritized and addressed as appropriate. 12 | 13 | ## Submitting a Pull Request to Suggest an Improvement 14 | 15 | If you see an opportunity for improvement and can make the change yourself go 16 | ahead and use a typical git workflow to make it happen: 17 | 18 | * Fork this curriculum repository 19 | * Make the change on your fork, with descriptive commits in the standard format 20 | * Open a Pull Request against this repo 21 | 22 | A curriculum owner will review your change and approve or comment on it in due 23 | course. 24 | 25 | # Why Contribute? 26 | 27 | Curriculum on Learn is publicly and freely available under Learn's 28 | [Educational Content License](https://learn.co/content-license). By 29 | embracing an open-source contribution model, our goal is for the curriculum 30 | on Learn to become, in time, the best educational content the world has 31 | ever seen. 32 | 33 | We need help from the community of Learners to maintain and improve the 34 | educational content. Everything from fixing typos, to correcting 35 | out-dated information, to improving exposition, to adding better examples, 36 | to fixing tests—all contributions to making the curriculum more effective are 37 | welcome. 38 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | #Learn.co Educational Content License 2 | 3 | Copyright (c) 2015 Flatiron School, Inc 4 | 5 | The Flatiron School, Inc. owns this Educational Content. However, the Flatiron School supports the development and availability of educational materials in the public domain. Therefore, the Flatiron School grants Users of the Flatiron Educational Content set forth in this repository certain rights to reuse, build upon and share such Educational Content subject to the terms of the Educational Content License set forth [here](http://learn.co/content-license) (http://learn.co/content-license). You must read carefully the terms and conditions contained in the Educational Content License as such terms govern access to and use of the Educational Content. 6 | 7 | Flatiron School is willing to allow you access to and use of the Educational Content only on the condition that you accept all of the terms and conditions contained in the Educational Content License set forth [here](http://learn.co/content-license) (http://learn.co/content-license). By accessing and/or using the Educational Content, you are agreeing to all of the terms and conditions contained in the Educational Content License. If you do not agree to any or all of the terms of the Educational Content License, you are prohibited from accessing, reviewing or using in any way the Educational Content. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Moving Away from the DOM 2 | 3 | Congratulations! You are now able to understand how Javascript interacts with 4 | websites through the DOM. That's a big deal. Take a few seconds, breathe in, 5 | breathe out and realize that you now know something you didn't before. Only a few 6 | lessons ago, you didn't even know what the DOM was. Now you understand how to 7 | manipulate it. 8 | 9 | ![Perspective](https://web-dev-readme-photos.s3.amazonaws.com/js/perspective.gif) 10 | 11 | If you ever want to show your friends something cool, open up the console on any 12 | web page and then find the selector for an element, then modify it using 13 | Javascript in the console. Prepare to enjoy the shock and awe of your friends! 14 | 15 | ## From DOM Manipulation to Programming Logic 16 | 17 | For the rest of this material, we will be moving from the basics of DOM 18 | manipulation to the meat and potatoes of programming. This means we are going to 19 | cover the ideas of conditionals, looping, encapsulation and syntax. I know those 20 | may not be familiar to you, but over the next few lessons they will become 21 | second nature! Remember when DOM was a scary word? Encapsulation will soon go 22 | the way of the DOM. You're going to be encapsulating everything. 23 | 24 | Really the goal of the rest of this course is to introduce you to _programmatic 25 | thinking_. We will be doing that through explaining Javascript, but the goal is 26 | for every student to begin using programmatic thinking as a general way to solve 27 | problems. These problems may be creating the next Facebook, or it may be just 28 | solving the best order to complete your errands. You'll notice programmatic, 29 | logical thinking starting to permeate throughout your decision process. It's 30 | incredibly powerful and something that has aided millions of programmers to 31 | solve some of the hardest problems in the world. 32 | 33 | That is the goal with this class. While we may touch on making pictures of cats 34 | spin, we want you to internalize the thought process required to solve that 35 | silly problem. Hopefully, you'll go off after this class and solve some slightly 36 | more important problems :) 37 | 38 | ## Javascript Outside of the Browser 39 | 40 | You've spent some time in the browser with Javascript. That's great. Now let's 41 | get to where Javascript has been rapidly increasing its programming market 42 | share: outside of the browser. You may have heard of it, but a new tool called 43 | NodeJS was created a few years back to allow developers to write Javascript code 44 | outside of the browser. That is what we are going to use now to be able to go 45 | deep on programmatic thinking, without having to explain complicated browser 46 | interactions. We want to simplify programming down to its most core elements. 47 | 48 | ### Hello World 49 | 50 | Let's write your first code using NodeJS and non-browser Javascript. To do this, 51 | we are going to remove your first set of training wheels. We are no longer going 52 | to be using the CodePens that we've been using before. We are going to use a 53 | real developer environment through the Learn IDE. 54 | 55 | ![Training Wheels](https://web-dev-readme-photos.s3.amazonaws.com/js/training_wheels.gif) 56 | 57 | The Learn IDE is available as both an in-browser development environment as well 58 | as a standalone application. 59 | 60 | To choose which environment you would like to work in, on any learn.co page, 61 | click your user image in the upper right corner of the page, then click 62 | 'Manage Account.' 63 | 64 | ![manage account menu](https://curriculum-content.s3.amazonaws.com/node-js/manage_account.png) 65 | 66 | In Account Management, click 'Learning Environment' and choose either 'IDE In 67 | Browser' or 'IDE Download.' Or, if you are already comfortable using an IDE and 68 | a console and prefer your own set up, you may also choose 'Local.' This 69 | lesson's instructions assume that you are using the Learn IDE in browser. 70 | 71 | If you choose 'IDE In Browser' you are set and can navigate back to this lesson. 72 | If you have chosen 'IDE Download,' you can download and set up the IDE 73 | [here][ide]. 74 | 75 | Now, click "Open IDE" to open your environment. On the left side is your file 76 | tree. In the `js-from-dom-to-node` folder, click `index.js` to open the file up. 77 | IT'S CODING TIME. 78 | 79 | #### Running Code in Chrome's Browser Console 80 | 81 | First thing is first, I want to show you that everything we will do in the IDE, 82 | you can do in the console. In your browser, right click and select Inspect. 83 | Select the Console tab, type `console.log("Hello, World!")`, and press `Enter`. 84 | You should see "Hello, World!" printed right below your line of code. Congrats! 85 | You just wrote your first line of browser-less code. All this does is print out 86 | whatever is in between the parenthesis. 87 | 88 | Let's bring that code over to our `index.js` file on the IDE. Make sure you 89 | are editing the `index.js` file, which is inside a folder, `js`, inside the 90 | `js-from-dom-to-node` folder. Once in there go ahead and paste the following 91 | code in there: 92 | 93 | ```javascript 94 | console.log('Hello, World!'); 95 | ``` 96 | 97 | Now when you hit `Enter`, nothing super interesting will happen. All that occurs 98 | is the cursor moves to a new line. That's because you are in the text editor. 99 | This is pretty much the same as using Word. To get this to actually return 100 | something like we did in the Console in the browser we need to _execute_ the 101 | `index.js` file. It sounds super official, but all we are going to do is tell 102 | the IDE "I'm ready, run this code and show me the result". 103 | 104 | First, we have to **save the file**. Next, look at the pane at the bottom of the 105 | IDE. This is your terminal. Below your code you should see a flashing cursor 106 | like this: 107 | 108 | ![command line in ide](https://web-dev-readme-photos.s3.amazonaws.com/js/ide-command-line.png) 109 | 110 | Alright, let's let the magic happen! First, we need to make sure we are in the 111 | right folder. Our goal is to make it into the "js-from-dom-to-node" folder. If 112 | you look at the text next to the time, you should see `js-from-dom-to-node` or 113 | something very similar. If you see that, you are good and you can skip the next 114 | section. If it says something else, follow these instructions: 115 | 116 | > If you see `code`, we need to go into our `labs` folder first. To do this type 117 | > `cd labs`. Now if should see `labs` next to the clock. We have to go one more 118 | > folder in. I know this by looking at the folder structure on the left. See how 119 | > `labs` is in `code` and `js-from-dom-to-node` is in labs? Ok now we need to `cd` 120 | > into the `js-from-dom-to-node` lab. Take a look at your folder structure on the 121 | > right to get the _exact_ name and then type `cd EXACT-FOLDER-YOU-WANT-TO-ENTER`. 122 | > In my case, I get `js-from-dom-to-node`. If you were successful, you'll see 123 | > `js-from-dom-to-node` next to the clock. 124 | 125 | #### Running Code With Node 126 | 127 | To run your code, in your terminal, you can type `node index.js`. `node` 128 | is the node code runner and `index.js` is the name of your file. You should see: 129 | 130 | ```js 131 | Hello, World! 132 | ``` 133 | 134 | Woot! It worked. You just wrote your first Javascript outside of the browser. 135 | Now let's submit it back to Learn. In your terminal type `learn submit`. This 136 | will send your code up to Learn and you may move on to the next lesson. 137 | 138 | If you would like to try a few more examples, take a look at the two JavaScript 139 | files inside `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. 140 | 141 | #### Possible Errors 142 | 143 | After you type in `node index.js` you get something looks like: 144 | 145 | ```sh 146 | module.js:471 147 | throw err; 148 | ^ 149 | 150 | Error: Cannot find module '/home/jmburges/code/labs/index.js' 151 | at Function.Module._resolveFilename (module.js:469:15) 152 | at Function.Module._load (module.js:417:25) 153 | at Module.runMain (module.js:604:10) 154 | at run (bootstrap_node.js:393:7) 155 | at startup (bootstrap_node.js:150:9) 156 | at bootstrap_node.js:508:3 157 | ``` 158 | 159 | The key there is "Error: Cannot find module". That just means you are in the 160 | wrong folder. Go back and read the earlier paragraph that starts "If you see 161 | `code`...". That should help you out. You need to be seeing 162 | `js-from-dom-to-node` next to the clock. 163 | 164 | [ide]: http://help.learn.co/the-learn-ide/how-to-download-and-use-learn-ide-3 165 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // write your code below! -------------------------------------------------------------------------------- /more_js/example_one.js: -------------------------------------------------------------------------------- 1 | let person1 = "Peter" 2 | let person2 = "Withnail" 3 | 4 | console.log( 'Hi, how are you, ' + person2 + '?' ) 5 | console.log( 'Oh, I am doing just fine, ' + person1 + ', thanks!' ) -------------------------------------------------------------------------------- /more_js/example_two.js: -------------------------------------------------------------------------------- 1 | for ( let n = 0; n < 10; n++ ) { 2 | console.log( n ); 3 | } --------------------------------------------------------------------------------