├── .gitignore ├── README.md ├── book ├── 1 - Getting Started.md ├── 2 - Numbers, Variables, & Strings.md ├── TOC.md └── images │ ├── 1-30-days-dev-folder.png │ ├── 1-chrome-js-console.png │ ├── 1-hello-world.png │ ├── 1-ls-terminal.png │ ├── 1-my-node-version.png │ ├── 1-npm-init.png │ ├── 1-select-nodejs-lts-version.png │ ├── 1-terminal-default-screenshot.png │ ├── 1-vscode-explorer.png │ ├── 1-vscode-terminal.png │ ├── 1-vscode.png │ └── 2-final-files.png └── code ├── Day 1 ├── hello.js └── package.json └── Day 2 ├── package.json ├── someMath.js ├── someStrings.js └── someVars.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode/ 3 | *.code-workspace 4 | 5 | 6 | # Logs 7 | logs 8 | *.log` 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | *.lcov 29 | 30 | # nyc test coverage 31 | .nyc_output 32 | 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 34 | .grunt 35 | 36 | # Bower dependency directory (https://bower.io/) 37 | bower_components 38 | 39 | # node-waf configuration 40 | .lock-wscript 41 | 42 | # Compiled binary addons (https://nodejs.org/api/addons.html) 43 | build/Release 44 | 45 | # Dependency directories 46 | node_modules/ 47 | jspm_packages/ 48 | 49 | # TypeScript v1 declaration files 50 | typings/ 51 | 52 | # TypeScript cache 53 | *.tsbuildinfo 54 | 55 | # Optional npm cache directory 56 | .npm 57 | 58 | # Optional eslint cache 59 | .eslintcache 60 | 61 | # Microbundle cache 62 | .rpt2_cache/ 63 | .rts2_cache_cjs/ 64 | .rts2_cache_es/ 65 | .rts2_cache_umd/ 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variables file 77 | .env 78 | .env.test 79 | 80 | # parcel-bundler cache (https://parceljs.org/) 81 | .cache 82 | 83 | # Next.js build output 84 | .next 85 | 86 | # Nuxt.js build / generate output 87 | .nuxt 88 | dist 89 | 90 | # Gatsby files 91 | .cache/ 92 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 93 | # https://nextjs.org/blog/next-9-1#public-directory-support 94 | # public 95 | 96 | # vuepress build output 97 | .vuepress/dist 98 | 99 | # Serverless directories 100 | .serverless/ 101 | 102 | # FuseBox cache 103 | .fusebox/ 104 | 105 | # DynamoDB Local files 106 | .dynamodb/ 107 | 108 | # TernJS port file 109 | .tern-port 110 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of JavaScript 2 | For this tutorial, I'll have an accompanying eBook along with videos for each day. The whole series is: 3 | 4 | **Coming Soon** 5 | 6 | 7 | ## The Book. 8 | The book is mostly an outline for me to follow while I record the video lessons. I will add additional information overtime to make the book even better. 9 | 10 | 11 | ## The Videos. 12 | The videos that end up corresponding to the book will differ in some varying degrees but will overall the videos will cover the same concepts listed in the book. 13 | -------------------------------------------------------------------------------- /book/1 - Getting Started.md: -------------------------------------------------------------------------------- 1 | # Day 1. Getting Started with JavaScript 2 | 3 | If you system has a web browser, then you system can already run JavaScript. This is pretty cool. So let's check it out. 4 | 5 | 6 | 7 | ## 1. Using Chrome 8 | I'll be using chrome for this but many of you can absolutely use Firefox, Safari, Opera, and Edge to accomplish the same thing. 9 | 10 | We'll be using the web browser as a basic introduction to JavaScript but later we'll be installing `Node.js` to allow for more powerful local JavaScript development. 11 | 12 | #### Open the JavaScript Console: 13 | - Mac (Command + Option + J) 14 | - Windows (Control + Shift + J) 15 | 16 | What you should see is something like this: 17 | 18 | ![Chrome JavaScript Console Screenshot](./images/1-chrome-js-console.png) 19 | 20 | The term `console` refers to the `JavaScript` console. As you can likely tell, you can actually type commands in here. 21 | 22 | Copy and paste the following code into the console: 23 | 24 | ``` 25 | console.log("Hello world") 26 | ``` 27 | 28 | Press `enter`/`return` 29 | 30 | What happens? 31 | 32 | You will likely see: 33 | 34 | ``` 35 | hello world 36 | undefined 37 | ``` 38 | Simple enough. Let's keep going. 39 | 40 | Now, let's do something a bit more drastic. Copy and paste this command: 41 | 42 | ``` 43 | document.getElementsByTagName("body")[0].style.backgroundColor = "red" 44 | ``` 45 | > Be sure to press `enter`/`return`. 46 | 47 | Uh oh??! Did you just hack this website?? 48 | 49 | Well no. It might be a ~~fun~~ nerdy party trick but as you may know, you can change how any website renders on your own browser but that doesn't affect anyone else in the least. Refresh any page and you'll see what I mean. 50 | 51 | 52 | I'm telling you about a Browser console is for a few reasons: 53 | 54 | - You can often test your JavaScript in there; especially JavaScript that doesn't depend on SEC (someone else's code). 55 | - You can test loaded scripts on pages 56 | - You can rapid prototype new features for a website 57 | 58 | 59 | This is cool but it doesn't give us the full feature set that JavaScript provides. For that, we need to install `node.js`. 60 | 61 | `Node.js` is a package you can install on nearly any system and it's incredibly easy to setup. 62 | 63 | ## 2. Install Node.js 64 | 65 | Go to [nodejs.org](https://nodejs.org/en/download/), find the system you want to use, and download the latest LTS version of node.js 66 | 67 | ![Select LTS Version](./images/1-select-nodejs-lts-version.png) 68 | 69 | 70 | > **LTS** is a common term in software; it means Long Term Support. LTS versions receive updates (or patches) to the code much longer than non-LTS versions. I think every beginner should go LTS all the time. 71 | 72 | As of September 2020, the current LTS version of Node.js is `12.18.3` The main number, as it relates to `node.js` you need to consider is `12` and pay less attention to `18.3` since `version 12` is the LTS regardless of the proceeding numbers. 73 | 74 | Okay. Have you downloaded `Node.js` yet? I think the install is pretty straightforward. If you're having trouble feel free to submit an issue [here](https://github.com/codingforentrepreneurs/30-Days-of-JavaScript/issues). 75 | 76 | So what is `Node.js` exactly? 77 | 78 | Put simply, it allows us to run JavaScript on our local machine and with it we can: 79 | 80 | - Build web application backends 81 | - Build web application front ends 82 | - Build native mobile apps 83 | - Build & run machine learning 84 | - Build native desktop apps 85 | - Build apps that control robots 86 | - Build apps that control rockets 87 | - Build apps that create animations 88 | - Build apps that build apps that create animations 89 | 90 | In other words, `Node.js` allows us to unlock the potential of writing code with `JavaScript`. 91 | 92 | 93 | ## 3. Our first project 94 | 95 | In `JavaScript`, we call projects `packages` and you'll soon come to learn to love looking at `package.json` for all the nitty gritty details of a project. 96 | 97 | It's true, you don't have to create a package to use JavaScript (like I showed you above in a browser's console) but it is simply the downright best way to build projects in `JavaScript`. 98 | 99 | With packages comes the dreaded `node_modules` directory. You'll see why once we get there but remember this: using SEC (someone else's code) comes with baggage sometimes a lot and sometimes a little. This baggage is stored into a directory (aka folder) called `node_modules` inside your project's primary folder. 100 | 101 | So let's build a incredibly simple project. 102 | 103 | ### 1. Open up your Command Line App 104 | - Mac/ Linux users open the app `Terminal` 105 | - Windows users open the app `PowerShell` 106 | 107 | `Terminal` (or `PowerShell`) is one of the many ways to write commands for your computer to do things. In our case, we need it to do things related to `Node.js`. If you haven't ever used a command line, this will be pretty uncomfortable at first but over time you'll get the hang of it. 108 | 109 | Here's a screen shot of my terminal: 110 | 111 | ![Terminal Default Screenshot](./images/1-terminal-default-screenshot.png) 112 | *My terminal has been customized a lot. You can do this too but it's outside the scope of what we have here.* 113 | 114 | First command, let's verify that node.js was installed correctly. What you see below is what you should type and press enter in your command line (ie `Terminal` for mac/linux users and `PowerShell` for windows users). 115 | 116 | ```shell 117 | % node -v 118 | v12.18.3 119 | ``` 120 | > Notice the `%` before our command? That's because I'm using `Terminal` on Mac. If you're on linux you'll see `$` and if you're on windows you'll see `>`. There might be a lot of text prior to these characters and that's 100% ok. 121 | 122 | > If you get an error with the above command, that means you didn't install node.js correctly or you need to restart `Terminal`/`PowerShell` 123 | 124 | Also note that, in the above case, `node -v` is the command and after you hit `enter`/`return` - `v12.18.3` is the response from that command. 125 | 126 | Here's a screenshot of my results actual results: 127 | 128 | ![My Node.js Version Screenshot](./images/1-my-node-version.png) 129 | *Notice that my version is actually `12.14.1`? Yeah I can probably upgrade but it is the same LTS I told you to download earlier so I should be good to continue (in fact I will).* 130 | 131 | 132 | ### 2. Navigation & Making Directories 133 | 134 | Every time you open up `Terminal` or `PowerShell` you are in the root of your users' primary system folder. You can the exact location of where you are by the following commands: 135 | 136 | 137 | #### Listing Items in a Directory 138 | **Mac/Linux** 139 | ``` 140 | % pwd 141 | % ls 142 | ``` 143 | - `pwd` -- gives you the path to the current location 144 | - `ls` -- list out all files and folders in current location (try `ls -al` for more details) 145 | 146 | ![Console ls Screenshot](./images/1-ls-terminal.png) 147 | *Windows looks only slightly different but overall the results are the same* 148 | 149 | **PowerShell** 150 | ``` 151 | > dir 152 | ``` 153 | *This command in windows does 2 things: lists everything in the current directory and shows the path to the current directory* 154 | 155 | > From here on out, most of the commands will be 100% indentical between Mac, Linux, and Windows. That's because we'll be using `node.js` for so much of the work. 156 | 157 | #### Changing Directories 158 | 159 | ``` 160 | % cd Desktop 161 | ``` 162 | Now you're in the desktop folder. 163 | 164 | ``` 165 | % cd ../ 166 | ``` 167 | Now you're back to the root of your project. 168 | 169 | #### Make a `Dev` Directory for your projects 170 | 171 | **Change to users' root** 172 | ``` 173 | % cd ~/ 174 | ``` 175 | This should move you back to your root user folder (ie the location where your `Terminal` / `PowerShell` opens by default) 176 | 177 | **Make a directory with the name `Dev`** 178 | ``` 179 | % mkdir Dev 180 | ``` 181 | Easy enough right? Let's move into that directory now: 182 | 183 | ``` 184 | % cd Dev 185 | ``` 186 | 187 | Let's make another: 188 | ``` 189 | % mkdir 30DaysOfJS 190 | % cd 30DaysOfJS 191 | % ls 192 | ``` 193 | > Reminder, use `dir` instead of `ls` on Windows. 194 | 195 | ![Creation Screenshot](./images/1-30-days-dev-folder.png) 196 | *Windows looks only slightly different but overall the results are the same.* 197 | 198 | 199 | ### 3. Start our project 200 | 201 | After you install `node.js` you get two new commands for your command line. They are: 202 | 203 | - `node` -- We'll use this to run our `JavaScript` files much like we run `JavaScript` code in the browser above. 204 | - `npm` -- This is the "node package manager" command. It's great for installing third-party packages (aka `SEC`) as well as creating new projects. 205 | 206 | Let's verify verions here: 207 | 208 | ``` 209 | % node -v 210 | v12.14.1 211 | % npm -v 212 | 6.14.8 213 | ``` 214 | 215 | No errors? Cool. Now let's create our project: 216 | 217 | Change into our project path: 218 | ``` 219 | % cd ~/Dev/30DaysOfJS 220 | ``` 221 | > The command `~/Dev/30DaysOfJS` is the relative path to our project folder from our users' root. The absolute path is different for all systems which is why `~/` is so handy. The aboslute path on my system is `/Users/jmitch/Dev/30DaysOfJS`. 222 | 223 | > Windows users, your paths are more like `~\Dev\30DaysOfJS` and `C:\Users\jmitch\Dev\30DaysOfJS` 224 | 225 | 226 | #### Run `npm init`: 227 | ``` 228 | npm init 229 | ``` 230 | This command creates your first project. You can accept all defaults (just hit `enter` / `return` a few times) like the following: 231 | 232 | ![Npm Init Screenshot](./images/1-npm-init.png) 233 | 234 | 235 | 236 | ### 4. Hello World 237 | 238 | Let's navigate to our project 239 | ``` 240 | % cd ~/Dev/30DaysOfJS 241 | ``` 242 | 243 | Let's use the `echo` command to add code into a file for us: 244 | ``` 245 | echo "console.log(\"hello world\")" > "hello.js" 246 | ``` 247 | > This is just a quick & easy way to add the code `console.log("hello world")` to a file named `hello.js`. Writing code using `echo` is not ideal. We'll setup something called a `Text Editor` later in this book. 248 | 249 | Now, let's run it: 250 | 251 | ``` 252 | % node hello.js 253 | hello world 254 | ```` 255 | 256 | ![Hello World Screenshot](./images/1-hello-world.png) 257 | 258 | That's it. Congratulations. You've created your first `JavaScript` app. It's not much but it's something. 259 | 260 | Now let's pick an editor for writing our code. 261 | 262 | 263 | ## 4. Selecting an Code Editor 264 | 265 | *[vim](https://www.vim.org/) is better than that garbage editor you use.* 266 | 267 | *Have you ever heard this line?* Well, if you're new to software development, you will eventually. 268 | 269 | Many hardcore programmers love [vim](https://www.vim.org/) but personally, I do not. It's fine but it's just not for me. Hardcore programmers also love to challenge the editor you use. I do not. Use whatever you like and switch until you find what you like. 270 | 271 | Personally, I like my editor as much as my current laptop -- it's great for now but I'm always ready for the next performance bump. 272 | 273 | ### 1. Overview 274 | 275 | In 2020, I think the hands-down best option is [VSCode](https://code.visualstudio.com/). 276 | 277 | In 2020, you can write serious JavaScript use TextEdit or Notepad in Mac or Windows respectively. 278 | 279 | The reason you'd use something like [VSCode](https://code.visualstudio.com/) is to improve the speed at which you can create programs in the language of your choice. 280 | 281 | Here's a few options for cross-platform code editors that come to mind: 282 | 283 | - [VSCode](https://code.visualstudio.com/) -- my current default 284 | - [Sublime Text](https://www.sublimetext.com/) -- my old default 285 | - [Atom](https://atom.io/) -- A bit like VSCode just less features by default 286 | - [PyCharm](https://www.jetbrains.com/pycharm/) -- a not-free editor that some people love 287 | - [Komodo Edit](https://www.activestate.com/products/komodo-ide/downloads/) -- my default choice back in 2013 288 | - [XCode](https://developer.apple.com/xcode/) -- if you're on a mac and you want something that's not really for JavaScript. 289 | 290 | > Do you want to add to this list? Please submit a pull request. 291 | 292 | So there you have it, download a code editor because it's going to help you a lot in this book. 293 | 294 | ### 2. Setting up your project in VSCode 295 | 296 | 1. Download VSCode [here](https://code.visualstudio.com/Download) 297 | 298 | 2. Open [VSCode], it will look something like: 299 | 300 | ![VSCode workspace screenshot](./images/1-vscode.png) 301 | 302 | 3. Go to `File` > `Add folder to workspace` -- select your project we created in step 3 (above). 303 | 304 | 4. Go to `File` > `Save workspace` -- save your VSCode workspace file in the same folder as your project created in step 4. 305 | 306 | 5. In the sidebar, toggle the file icon (seen below). If you see the word `Explorer` that means you have access to each one of your workspace project files. Play around with this a bit as it's the primary way you'll navigate. 307 | 308 | ![VSCode Explorer](./images/1-vscode-explorer.png) 309 | 310 | 311 | 6. Now open up the terminal within VSCode. There's two ways to do it: 312 | 313 | - Press `~` & `control` (mac/windows) 314 | - Top menu -> `Terminal` > `New Terminal` 315 | 316 | This opens the terminal within VSCode. This is nice because then we don't have to switch between programs. It looks like this: 317 | 318 | ![VSCode Terminal Screenshot](./images/1-vscode-terminal.png) 319 | 320 | > I can write a whole book on how to use and optimize VSCode but these few features are the main things you'll be using in this book. If you're struggling to really get going with VSCode there are a *lot* of great YouTube videos going through it all. 321 | 322 | -------------------------------------------------------------------------------- /book/2 - Numbers, Variables, & Strings.md: -------------------------------------------------------------------------------- 1 | # Day 2 - Numbers, Variables, & Strings 2 | 3 | Computers are great at doing math... or, ahem, computation. So that's where we'll start. 4 | 5 | > ~Fun~ Nerd fact: computers was originally a term for a human computer or "one who computes" performing mathematical calculations prior to electronic computers ever existing. Katherine Johnson, a famous mathematician, who did difficult math problems on paper to help safely launch John Glenn into orbit during the space race. Katherine is probably now the most famous human computer ever that's to the fantastic movie (and book) called *Hidden Figures*. 6 | 7 | ## 0. Optional Package configuration 8 | For each chapter, I'll be creating a brand new package -- this is to make each chapter's code as self-contained as possible. You do not have to do this. 9 | 10 | A quick reminder on how this is done: 11 | 12 | ```shell 13 | % cd local/path/to/30daysofjs 14 | % mkdir "Day 2" 15 | % cd "Day 2" 16 | % npm init # accept the defaults 17 | % ls 18 | package.json 19 | ``` 20 | Here's what the `Day 2` folder will look like after you finish this chapter. 21 | 22 | ![Day 2 Final Files screenshot](./images/2-final-files.png) 23 | 24 | 25 | ## 1. Numbers 26 | Create a new file called `someMath.js` and enter in the following: 27 | 28 | ```javascript 29 | console.log(4 + 1) 30 | ``` 31 | Save that file, open up terminal (either in VSCode or on your system) and run: 32 | 33 | ```shell 34 | node someMath 35 | ``` 36 | What do you see? It's my hope that the result did not surprise you in the least bit. So let's try some multiplication: 37 | 38 | Now add in: 39 | ```javascript 40 | console.log(500 x 12) 41 | ``` 42 | You should see `SyntaxError: missing ) after argument list`. This is because we used the letter `x` instead of the correct operator for multiplying in JavaScript (and many other languages as well). 43 | 44 | Let's fix that: 45 | 46 | ```javascript 47 | console.log(500 * 12) 48 | ``` 49 | Now, after running `node someMath` again, the result should read: 50 | ```shell 51 | 5 52 | 6000 53 | ``` 54 | 55 | Here's the reference for performing some math: 56 | 57 | ### Adding (`+`) 58 | ```javascript 59 | 5 + 10 60 | ``` 61 | 62 | ### Subtracting (`-`) 63 | ```javascript 64 | 9 - 3 65 | ``` 66 | 67 | ### Multiplying (`*`) 68 | ```javascript 69 | 3 * 10 70 | ``` 71 | 72 | ### Dividing (`/`) 73 | ```javascript 74 | 5 / 10 75 | ``` 76 | 77 | ### Order of Operations 78 | 79 | ```javascript 80 | 5 - (5 * -2) 81 | ``` 82 | 83 | ### Exponents (x `**` n) 84 | ```javascript 85 | 5 ** 2 86 | ``` 87 | 88 | ### Root (x `**` (1/n)) 89 | ```javascript 90 | 25 ** (1/2) 91 | ``` 92 | 93 | Neat huh? 94 | 95 | There's also a few built-in features to JavaScript for math. 96 | 97 | ### Modulo (x `%` y) 98 | Modulo `%` is a remainder operator which means it finds the left over bits of a division. 99 | 100 | ```javascript 101 | 5 % 4 102 | ``` 103 | 4 goes into 5 1 time with 1 leftover. 104 | 105 | or 106 | 107 | ```javascript 108 | 11 % 3 109 | ``` 110 | 3 goes into 11, 3 times with 2 left over. 111 | 112 | ```javascript 113 | 100 % 100 114 | ``` 115 | 5 goes into 100 20 times with 0 left over. 116 | 117 | ```javascript 118 | 98 % 99 119 | ``` 120 | 98 goes into 99 0 times with 98 left over. 121 | 122 | Modulo gives us the remainder from dividing two numbers. 123 | 124 | ### `Math.ceil` 125 | This rounds up decimal number to the nearest whole number. 126 | ```javascript 127 | console.log(Math.ceil(12.12312)) 128 | ``` 129 | 130 | ### `Math.floor` 131 | This rounds down a decimal number to the nearest whole number. 132 | ```javascript 133 | console.log(Math.floor(23.99)) 134 | ``` 135 | 136 | Here's my final code for `someMath.js`: 137 | 138 | ```javascript 139 | console.log(4 + 1) 140 | 141 | console.log(500 * 12) 142 | 143 | console.log("Adding", 5 + 10) 144 | 145 | console.log("Subtracting", 9 - 3) 146 | 147 | console.log("Multiplying", 3 * 30) 148 | 149 | console.log("Dividing", 5 / 10) 150 | 151 | console.log("Order of Operations", 5 - (5 * -2)) 152 | 153 | console.log("Exponents", 5 ** 2) 154 | 155 | console.log("Root", 25.0 ** (1/2)) 156 | 157 | console.log("Modulo", (5 % 4)) 158 | 159 | console.log("Modulo", (11 % 3)) 160 | 161 | console.log("Modulo", (100 % 5)) 162 | 163 | console.log("Modulo", (98 % 99)) 164 | 165 | console.log("Math.ceil", Math.ceil(12.12312)) 166 | 167 | console.log("Math.floor", Math.floor(23.99)) 168 | 169 | ``` 170 | 171 | > Notice that `Math` just works. That's because it's built into JavaScript much like `*` is built-in to JavaScript for multiplying. We'll look at built-ins a lot more going forward but the ones above are pretty common. 172 | 173 | 174 | ## 2. Variables 175 | 176 | Variables allow us to move values around much more easily; this makes doing our math problems that much easier as well. 177 | 178 | There's 3 ways to create a variable in JavaScript; we call it `declare` a variable: 179 | 180 | - `const` 181 | - `let` 182 | - `var` 183 | 184 | Each one of these has their own benefit but we'll stick with the longest known convention to date for now: `var`. 185 | 186 | You simply write `var` then some string of characters like `var myDog` or `var notAHotDog` or `var arentYouGladThisIsntLinearAlegebra` 187 | 188 | So let's see a more practical example. Create a new file called `someVars.js` and add the following: 189 | 190 | ```javascript 191 | var productPrice = 29.99 192 | var taxRate = 0.25 193 | var shippingRate = 2.99 194 | var total = (productPrice * taxRate) + shippingRate 195 | console.log(total) 196 | ``` 197 | 198 | Run this with: 199 | ```shell 200 | node someVars 201 | ``` 202 | 203 | What did you get? I got `10.4875`. If we were using dollars, we'd probably want to adjust our total: 204 | 205 | ```javascript 206 | var totalRounded = Math.ceil(total) 207 | ``` 208 | Hang on, that rounds up to `11`. Remember how I said `Math.ceil` round up to the nearest whole number? 209 | 210 | `Math.round` will round to the nearest whole number (in general) so we can multiply our decimal number by 100, run `Math.round` on it, and then divide by 100 to get our desired 2 digit decimal places. 211 | ```javascript 212 | var totalRounded = Math.round(total * 100) / 100 213 | ``` 214 | > As you can see, the doing math in JavaScript can get a bit wonky from time to time because of the nature of multiplying decimal numbers and what our intuition might want the answer to be (ie I'm calculating costs in dollars so I should only get 2 decimal places back right??) 215 | 216 | 217 | The purpose of this section was not to solve all the math challenges you might face dealing with JavaScript apps but rather introduce to a powerful feature of programming: variables. 218 | 219 | Variables make it easy to temporarily store data and move that data around to do other things with. Variables can be nearly any data type such as: 220 | 221 | - Strings 222 | - Arrays 223 | - Dictionaries 224 | - Functions 225 | - JavaScript Objects 226 | 227 | So how about that `let` and `const` I mentioned above? 228 | 229 | In many programming languages, including JavaScript, you can change the value of any given variable. For example: 230 | 231 | ```javascript 232 | var x = 10 233 | x = 32 234 | x = 1 235 | console.log(x) 236 | ``` 237 | What is the value of `x`? Hopefully you answered `32`... kidding `1` is the correct answer. 238 | 239 | `let` is almost identical to `var` being that it can be re-assigned 240 | 241 | ```javascript 242 | let y = 10 243 | y = 32 244 | y = 1 245 | console.log( y ) 246 | ``` 247 | 248 | `const` is cannot be reassigned. Once it has a value, that's the value. 249 | 250 | ```javascript 251 | const z = 323 252 | z = 99 253 | console.log(z) 254 | ``` 255 | In this, `z` runs the error `TypeError: Assignment to constant variable.` - this means that this operation simply cannot be done. Let's modify it for our code: 256 | 257 | ```javascript 258 | const z = 323 259 | // z = 99 260 | console.log(z) 261 | ``` 262 | > Do you see the `//` before `z = 99` this is how you turn any line of code into a comment. just add `//` before the code and it will not be run. 263 | 264 | 265 | `const` cannot be reassigned but it can be re-used. This becomes more clear as we learn more about JavaScript but go ahead and copy and paste the following code: 266 | 267 | ```javascript 268 | const xyz = 10 269 | console.log('const xyz', xyz) 270 | function myFunc() { 271 | const xyz = 3 272 | console.log('const xyz', xyz ** 2) 273 | } 274 | myFunc() 275 | ``` 276 | 277 | As you see, `const xyz` is declared twice (once within a function) but it's never actually reassigned a value. 278 | 279 | 280 | ## 3. Strings 281 | 282 | Let's create a new file called `someStrings.js`. 283 | 284 | Strings are a data type that you're already incredibly familiar with. Here's an example: 285 | 286 | ```javascript 287 | console.log("The speed of light is 186,282 miles per second.") 288 | ``` 289 | 290 | Strings are created anytime you wrap quotes (double `"`, single `'`) or ticks (\`) around words, letters, numbers and special characters (`!@#$5^&*()_-+=;:`). 291 | 292 | Strings are great for moving messages around. Something like this: 293 | 294 | ``` 295 | "Hello there John Doe, how are you today?" 296 | ``` 297 | Let's replace `John Doe` above with another name. 298 | 299 | ```javascript 300 | const myName = "Justin" 301 | const myMsg = "Hello there " + myName + ", how are you today?" 302 | console.log(myMsg) 303 | ``` 304 | How cool is that? You can *add strings* together to make a new message. 305 | 306 | Can you multiply strings? 307 | 308 | ```javascript 309 | console.log("this is awesome" * 3) 310 | ``` 311 | 312 | Unfortunately not. But you can repeat a string like this: 313 | 314 | ```javascript 315 | let letsRepeat = "this is awesome" 316 | console.log(letsRepeat.repeat(3)) 317 | ``` 318 | `repeat()` is an example of built-in methods that all strings have. Here are a few others: 319 | 320 | 321 | #### `replace(replaceWhat, replaceWith)` 322 | Replacing items in a string is pretty common. This is a simple way to do it. 323 | ```javascript 324 | let letsReplace = "this is awesome".replace("awesome", "amazing") 325 | console.log(letsReplace) 326 | ``` 327 | 328 | #### `split()` 329 | Splitting up a string is also something you'll do from time to time. This turns your string into an `array` which we'll cover later. 330 | 331 | ```javascript 332 | let splitUpAString = "Hello world".split(" ") 333 | console.log(splitUpAString) 334 | ``` 335 | 336 | 337 | ### Long Strings & Escaping 338 | 339 | The examples above do not account for strings that are much longer. Like paragraphs or sets of paragraphs. 340 | 341 | There's a few ways to do this but first let's talk about the concept of `escaping`. 342 | 343 | What happens if you want a double quote in a string that's wrapped in a double quote? 344 | 345 | Here's an example: 346 | 347 | ``` 348 | "The office manager said, "I have a need, a need for tweed." The staff looked on without much regard for the manager's antics." 349 | ``` 350 | 351 | How do we turn this into a valid string in JavaScript? 352 | 353 | You might be tempted to say, put a single quote on the outside of this string so it becomes: 354 | 355 | ``` 356 | 'The office manager said, "I have a need, a need for tweed." The staff looked on without much regard for the manager's antics.' 357 | ``` 358 | 359 | Well, now we have another problem -- the single quote after in `manager's`. 360 | 361 | You overcome this issue with the concept of **escape notation**. 362 | 363 | #### Escape Notation 364 | There are all kinds of values that need to be escaped inside a string. What we saw above was the most common: single quotes (`'`) and double quotes (`"`). 365 | 366 | To escape any value, you just need to add `\` in front of it. It's that simple. 367 | 368 | ```javascript 369 | console.log('manager\'s') 370 | ``` 371 | 372 | ```javascript 373 | console.log("The manager said, \"Everything is awesome.\"") 374 | ``` 375 | 376 | It's not pretty but it's an effective way to still write normal English. Escaping works for a few other elements as well: 377 | 378 | - newline (`\n`). Simply add a new line for your string when it renders. Example: `console.log("hello there\nwhen do you start\nfor the day?\n\n\n")` 379 | 380 | - tabs (`\t`). Tab your content in: `console.log("\tDoes this work\n\tYes, I believe it does.\nThanks.")` 381 | 382 | - backlash (`\\`). Naturally, you might need to use a backlash from time to time so you need to escape it as well: `console.log("The website is http:\\\\www.cfe.sh")` 383 | 384 | 385 | This just scratches the surface of what's possible with strings. There is something far more powerful called **string substitution** that we'll talk about in later chapters. 386 | 387 | You now understand the basics of how strings work. Remember, strings can be assigned to variables and passed around just like numbers. 388 | 389 | Here's the relevant code for this section on strings: 390 | 391 | ```javascript 392 | console.log("The speed of light is 186,282 miles per second.") 393 | 394 | const myName = "Justin" 395 | const myMsg = "Hello there " + myName + ", how are you today?" 396 | console.log(myMsg) 397 | 398 | let letsRepeat = "this is awesome" 399 | console.log(letsRepeat.repeat(3)) 400 | 401 | let letsReplace = "this is awesome".replace("awesome", "amazing") 402 | console.log(letsReplace) 403 | 404 | let splitUpAString = "Hello world".split(" ") 405 | console.log(splitUpAString) 406 | 407 | 408 | console.log('manager\'s') 409 | 410 | console.log("The manager said, \"Everything is awesome.\"") 411 | 412 | console.log("newline (`\\n`)", "hello there\nwhen do you start\nfor the day?\n\n\n") 413 | 414 | console.log("tabs (`\\t`)", "\tDoes this work\n\tYes, I believe it does.\nThanks.") 415 | 416 | console.log("backlash (`\\\\`)", "The website is http:\\\\www.cfe.sh") 417 | ``` 418 | -------------------------------------------------------------------------------- /book/TOC.md: -------------------------------------------------------------------------------- 1 | # Table of Contents 2 | 3 | ## Day 1. Getting Started 4 | 1. Using Chrome 5 | 2. Install Node.js 6 | 3. Our first project 7 | 1. Open up your Command Line App 8 | 2. Navigation & Making Directories 9 | 3. Start our project 10 | 4. Hello World -------------------------------------------------------------------------------- /book/images/1-30-days-dev-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-30-days-dev-folder.png -------------------------------------------------------------------------------- /book/images/1-chrome-js-console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-chrome-js-console.png -------------------------------------------------------------------------------- /book/images/1-hello-world.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-hello-world.png -------------------------------------------------------------------------------- /book/images/1-ls-terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-ls-terminal.png -------------------------------------------------------------------------------- /book/images/1-my-node-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-my-node-version.png -------------------------------------------------------------------------------- /book/images/1-npm-init.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-npm-init.png -------------------------------------------------------------------------------- /book/images/1-select-nodejs-lts-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-select-nodejs-lts-version.png -------------------------------------------------------------------------------- /book/images/1-terminal-default-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-terminal-default-screenshot.png -------------------------------------------------------------------------------- /book/images/1-vscode-explorer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-vscode-explorer.png -------------------------------------------------------------------------------- /book/images/1-vscode-terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-vscode-terminal.png -------------------------------------------------------------------------------- /book/images/1-vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/1-vscode.png -------------------------------------------------------------------------------- /book/images/2-final-files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingforentrepreneurs/30-Days-of-JavaScript/63fb5864bee49ba8950f44bb57a4f2356566775e/book/images/2-final-files.png -------------------------------------------------------------------------------- /code/Day 1/hello.js: -------------------------------------------------------------------------------- 1 | console.log("hello world") 2 | -------------------------------------------------------------------------------- /code/Day 1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30daysofjs-day-1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC" 11 | } 12 | -------------------------------------------------------------------------------- /code/Day 2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30daysofjs-day-2", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "someMath.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC" 11 | } 12 | -------------------------------------------------------------------------------- /code/Day 2/someMath.js: -------------------------------------------------------------------------------- 1 | console.log(4 + 1) 2 | 3 | console.log(500 * 12) 4 | 5 | console.log("Adding", 5 + 10) 6 | 7 | console.log("Subtracting", 9 - 3) 8 | 9 | console.log("Multiplying", 3 * 30) 10 | 11 | console.log("Dividing", 5 / 10) 12 | 13 | console.log("Order of Operations", 5 - (5 * -2)) 14 | 15 | console.log("Exponents", 5 ** 2) 16 | 17 | console.log("Root", 25.0 ** (1/2)) 18 | 19 | console.log("Modulo", (5 % 4)) 20 | 21 | console.log("Modulo", (11 % 3)) 22 | 23 | console.log("Modulo", (100 % 5)) 24 | 25 | console.log("Modulo", (98 % 99)) 26 | 27 | console.log("Math.ceil", Math.ceil(12.12312)) 28 | 29 | console.log("Math.floor", Math.floor(23.99)) -------------------------------------------------------------------------------- /code/Day 2/someStrings.js: -------------------------------------------------------------------------------- 1 | console.log("The speed of light is 186,282 miles per second.") 2 | 3 | const myName = "Justin" 4 | const myMsg = "Hello there " + myName + ", how are you today?" 5 | console.log(myMsg) 6 | 7 | let letsRepeat = "this is awesome" 8 | console.log(letsRepeat.repeat(3)) 9 | 10 | let letsReplace = "this is awesome".replace("awesome", "amazing") 11 | console.log(letsReplace) 12 | 13 | let splitUpAString = "Hello world".split(" ") 14 | console.log(splitUpAString) 15 | 16 | console.log('manager\'s') 17 | 18 | console.log("The manager said, \"Everything is awesome.\"") 19 | 20 | console.log("newline (`\\n`)", "hello there\nwhen do you start\nfor the day?\n\n\n") 21 | 22 | console.log("tabs (`\\t`)", "\tDoes this work\n\tYes, I believe it does.\nThanks.") 23 | 24 | console.log("backlash (`\\\\`)", "The website is http:\\\\www.cfe.sh") -------------------------------------------------------------------------------- /code/Day 2/someVars.js: -------------------------------------------------------------------------------- 1 | var productPrice = 29.99 2 | var taxRate = 0.25 3 | var shippingRate = 2.99 4 | var total = (productPrice * taxRate) + shippingRate 5 | console.log('total', total) 6 | var totalRounded = Math.ceil(total) 7 | console.log('totalRounded (with Math.ceil)', totalRounded) 8 | 9 | var totalRounded = Math.round(total * 100) / 100 10 | console.log('totalRounded', totalRounded) 11 | 12 | 13 | var x = 10 14 | x = 32 15 | x = 1 16 | console.log('var x', x) 17 | 18 | let y = 849223 19 | y = 3 20 | y = 23 21 | console.log('let y', y) 22 | 23 | const z = 323 24 | // z = 99 25 | console.log('const z', z) 26 | 27 | 28 | const xyz = 10 29 | console.log('const xyz', xyz) 30 | function myFunc() { 31 | const xyz = 3 32 | console.log('const xyz', xyz ** 2) 33 | } 34 | myFunc() --------------------------------------------------------------------------------