- Read Tutorial
- Watch Guide Video
Great job going through that section, if you've never used javascript before, that might have felt like you're trying to drink from a firehose. Javascript is its own programming language and it is one of the most popular but one of the more challenging ones to learn. Don't worry if you feel like you're a little bit unsure on how to take your javascript knowledge and extend into your own applications. I recommend that you go through and review what we built so that it can kind of solidify in your mind. I also recommend that you try to find which javascript framework that you feel like is going to be the best fit for the applications you want to build. Whether it be Angular, React, Typescript or any of these types of languages that sit on top of javascript so that you can integrate those in future apps
In this deep dive, I want to take a deeper look at how the jquery framework works. Jquery is the javascript framework that sits and ships on top of rails. Any time that you create a new rails application using the default settings, jquery is also going to ship with it. Jquery is very powerful and it allows you to do a large number of very complicated types of behavior. As you saw, we were able to create a complete drag and drop interface by just leveraging some of the special jquery functions. I want to take our knowledge and extend it and see some of the other things that jquery can do.
Switching to the browser, we're going to start this deep dive in looking at CoffeScript.org. I know I said we're going to be focusing on jquery and we are, however, we are going to write those functions using the Coffey's script syntax.
As a very short refresher, CoffeeScript is simply a superscript of javascript. Which means that it provides a little bit easier way to write javascript. If you have ever written pure javascript, all you have to do is take a look at that code library that we implemented for the html5 sortable, you can see that javascript is not the easiest language to read or write in. CoffeeScript and languages like it allow you to have a little bit easier interface
On the left-hand side, you can see a number of helpful tutorials
- ways of doing assignments
- conditions
- functions
- objects
- splats
- existence
- array comprehensions
This is more of an introduction to the syntax.
On the right-hand side, this is what each one of these items compiles into. CoffeeScript processes everything and then the browser takes care of the rest. It simply takes in this type of syntax and then it compiles itself down and translates itself so it shows the javascript. Remember javascript by itself is what can be processed inside of browsers. If you try to pass in CoffeeScript by itself, the browser would not know what to do.
The CoffeeScript syntax will be processed by the parser and then it turns into javascript. It's a nice interface that we can use. In Rails applications, the majority of the JavaScript you'll run into is written in CoffeeScript. It ships with it so you're going to see a lot of this. If you look at the syntax for a number of these things it is much closer to Ruby than many of the other languages. Notice is that CoffeeScript does not require semi-colons. In javascript, semicolons are pretty important if you don't use them you are going to run into some parsing errors
I pushed up some starter code that you can clone. I also pushed up everything that we're going to go through into a solution branch. Essentially, the items that we're going to go through. Our app is very basic, we're not going to focus on features as much as the way that you can implement jquery and leverage CoffeeScript. We have a homepage that has a title, a button and then some content. We also have a guide's scaffold and we have some data and a connection to that.
Switch over to Sublime Text. I'm going to go to app/assets/javascript, you can see we have our typical scaffold. I'm going to go to static.coffee (I cleared off the comments so we have a clean file) In our guide we use the document ready syntax, if you remember that gives us the ability to have a process run as soon as the page loads. By leveraging jquery with CoffeeScript we have a little bit of a shortcut syntax we can use. It is just dollar and an arrow, everything that we nest inside will be processed as soon as the page loads.
$ ->
alert("Hey There")
Come back to the browser and hit refresh, you can see that this alert pops up.
You also have the ability to console log items
$ ->
console.log("Hey There")
I'm not calling it except by saying that when the page loads, I want you to run this process. I come to inspect and go to console you'll see nothing has loaded yet because I refreshed the page. If I hit refresh you can see it says hey there.
Let's come views/static/home we have an H1 tag, we have a button id of "mybutton" and then we have a div class of "container." I'm going to show you how we can select this.
I'm going to say
$ ->
$('#myButton').click ->
console.log("Hey there")
What I'm saying here by putting this arrow and then console.log is any time that someone clicks my button I want you to console log "Hey there."
Let's come down, hit refresh, if I press "click me" repeatedly, you can see that it says I pressed it 14 times.
Let's talk how we can call functions. I'm going to write a completely separate function here called some_function and set it equal to a function that's going to store this. I'm just going to put a console log and say "I'm in another function." Inside of this button click event I can call my function.
some_function = ->
console.log("I'm in another function")
$ ->
$('#myButton').click ->
console.log("Hey there")
some_function()
I hit save and hit refresh now. We should get 2 console log statements
You can do things like pressing the button and have something else disappear. I'm going to say
some_function = ->
console.log("I'm in another function")
$ ->
$('#myButton').click ->
$('.container').toggle()
This is going to toggle the visibility of the container. If you come back, refresh, nothing's going to show up in the console but now when I click this button it's going to toggle the visibility of this element. If I keep pressing it this is going to turn this on and off. Now a very cool thing about this, jquery is doing tons of work for us by using the toggle function.
Now lets select this item to see exactly what's happening. I'm going to select this div container.
Notice that it has a style of display block, jquery is doing this for us. If you go back to the code we don't have that style set but jquery sees this toggle function, it knows there's a chance that we're going to have to turn it on and off.
The last thing that we're going to do is we're going to talk about AJAX. We're going to use AJAX to create a request and by pressing a button we are going to create a guide.
Let's start with saying
some_function = ->
console.log("I'm in another function")
$ ->
$('#myButton').click ->
$.ajax
type: 'POST'
url: '/guides'
data: "guide[title]=Hey from coffescript!"
Normally you would be getting data from a form or from some other type of input. We just hardcoded it in because the important thing is actually seen how it works. A guide title (the reason why we have to use this syntax is that we have to pass in data that Rails can actually interpret ie param hash) will be Hey from CoffeeScript. Hit save and come back, hit refresh now if I do this it's going create a guide for us.
I'm going to do this 3 times.
Let's switch to the terminal and let's take a look at what it's actually doing.
You can see where it says processing by GuidesController#create it says the parameters are guide=title and Hey from CoffeeScript. Rails is able to interpret these parameters coming in and then it also redirected us.
I wanted to focus on were the things that you'll probably be using the very most when it comes to using jquery in your applications.
First are selectors, being able to select items on the page that you want to be able to work with. Implementing Ajax so you can have your javascript functions communicate with other applications or your own rails app is a very powerful thing. This is something that you'll find that you'll be doing quite a bit.
Hopefully, this gives you a little bit more insight and some more base knowledge on how jquery and CoffeeScript works. I can't give a comprehensive education on jquery in your 10-20 minutes but hopefully, this gives you a little bit of an introduction on what you can do.