The fancy side of VIEWS
By: Jonathan Bleibdrey
Tags: JavaScript, Ruby, Dom, Rails, Coding

Ok, welcome back!

Today we are talking about JavaScript, hooray hooray! This month we went into JavaScript and to be honest I thought it would be a lot harder than it was. I learned that setting up the backend with Rails is super easy, so we can have a wonderful API waiting for us to snatch data from. The most work we did was switch ERB tags to render JSON’s tags and pretty much everything else stayed the same.

Now we pop to the front end where we're we use only use JavaScript. That’s when we built our first single page application; which pretty much means you won’t have to refresh or go to another page to add your information or see the information you just posted (like when you heart on Instagram or thumbs up on Facebook).

To get started we use something called an “event” and to be more specific, we use an event called “DOMContentLoaded” that renders whatever you call under it to the page. I forgot to mention the basic/standard index.html folder where we put our “head” , and “body” and other HTML magic! In the head, we put meta-information(just keyboard language computer stuff), stylesheets to make it look nice, and also where you put in the title of your website. Lastly, we put some very basic DIV with id’s to have something to grab onto when we use javascript to render our page.

Now after we have the DOM loaded we make a “fetch” call to a specific URL on the backend which has all your data. Fetch’s are complicated but I will try to explain the best I can. The first line of code is the URL where you are going to get that data. Second-line is getting the response or data and turning it into JSON (JavaScript Object Notation), basically turns it into information so we can grab it. The third line is what we are going to do with that information so it usually comes back to us in an array of objects. We have to iterate over it most likely and then do whatever you want from there.

Once we have that information, the fun isn’t over, we now have to put that information into the Dom(document object module). We do that by grabbing the DIV’S we created in the HTML folder and inserting the information in multiple different ways from our fetch with some createElement, getElemntById and appending children(no that’s not a child’s name, think of it like boxes, you just put one box into another box with “append child”).

Lastly, it renders onto our webpage and everything shows up and we are making webpages. Some other useful tips is something called a debugger. The debugger allows you to walk through your lines of code seeing what information it is “pooping out” on each line of code. There’s also console.log I used that a lot in my project because I was able to see what information it was outputting in the console in real-time( a place only coders go).

So I hope this has been helpful and I'll see you at the next one, thank you for your time!

Jonathan

check out some more….

Javascript 1 (link to: variables and data types)

Javascript 2 (link to: numbers and strings)

Javascript 3 (link to: bracket notation and 20 diff string methods)

Javascript 4 (link to: functions and how they work)

Javascript 5 (link to: hoisting, comparison operators, and if-else statements)

Javascript 6 (link to: diff. Equal signs, null, and undefined)

Javascript 7 (link to: logical operator, &&, || and ternary operators)

Javascript 8 (link to: switch statements and arrays)

Javascript 9 (link to: commonly used arrays in javascript)

Javascript 10 (link to: Math. And parseInt Usage)