HelloJQ
The first step in any new programming language is to output Hello, World.
Dumb convention from the history of software development? Sure! Will you be forever cursed if you don’t start with Hello, World? Definitely!
So we’d better take care of that, here goes.
I0: Plain Old HTML
Our project is to create some plain old HTML then, on the fly, have jQuery inject the "Hello, World". Let’s start with this basic HTML in a file named index.html:
1 2 3 4 5 6 7 8 | |
Open that in your browser and you should just see a simple H1 with the text you entered.
I1: Incorporating jQuery
Let’s first load the jQuery library. We’ll pull it straight from Google’s superfast servers for now by adding this line inside your head tags:
1
| |
Refresh your page and…well…it’ll look the same. Did the library load?
In Chrome you can open the developer console by opening the developer tools. It can be found in the application menu VIEW > DEVELOPER > DEVELOPER TOOLS. Go to the RESOURCES tab, enable resource tracking, then look to see if it loads the jQuery library. If there’s an error you’ll see a red X in the bottom right corner of the developer pane. If there’s no error then you’re ready to move on.
I3: An Inline Script
The simplest way to write Javascript is to do so right in the markup. Below the script tags which load jQuery, add this second set of script tags:
1 2 3 4 5 | |
Refresh your browser and your H1 text should switch up. You’re now a jQuery programmer, kinda.
What is all that? Let’s look at it line by line:
1
| |
Tell the browser we’re about to give it some Javascript, then…
1
| |
The $ is an alias for the jQuery library itself. jQuery is made to work on the DOM, the content of the HTML document, but the Javascript is usually loaded in the HEAD of the document. By default most browsers are going to start executing Javascript as soon as they receive it. If our script runs before the content of the page loads, however, it won’t find the object we’re looking to replace.
Almost all jQuery scripts start out with this line. $ calls jQuery, and the jQuery function takes a function to run on the start of the page. This has become such a common paradigm that it is the default behavior of $() when a function is passed as the first argument. Then the open parenthesis wraps the parameter to ready and the function keyword starts declaring a new function. The empty parentheses mean that this anonymous function won’t have any parameters, then the { starts the body of the function. A lot for one line, right?
Why do we need to pass a function instead of just some instructions? If we just put in instructions they will be executed when the script is first read by the browser. If we want the browser to wait until some event happens before running the code, we need to put it into a function.
Next we have…
1
| |
Again $ is the jQuery library and we pass it the parameter 'h1.target'. This is a css selector which finds all h1 objects in the DOM that have the class name target. Then for each one of them it executes the .text method. The .text method when given a parameter will change the object to have that text. Calling the method without the parameter will return the current text in the object.
So to read this line in English we might say "Hey jQuery, find all H1 elements with the class name target and set their containing text to the string ‘Hello, World! jQuery Rocks!’."
Then, finally, we have these two lines:
1 2 | |
The first line has a } which closes the function, then a ) which closes the parameters to the $() method and a semicolon marking the end of the line. The second line closes the @script@ tag.
I4: Moving to an External Script
If we’re just writing a few lines it’s fine to leave it in the head of our document, but for serious use we’ll want to pull our jQuery code out into it’s own file. Create a file named application.js in the project directory and move all these lines over there:
1 2 3 | |
Then, in your HTML file, change the second set of script tags to this:
1
| |
Refresh your browser and it should work the same as before.
Complete HelloJQ
Here are my complete files at the end:
application.js
1 2 3 | |
index.html
1 2 3 4 5 6 7 8 9 10 | |
I5: Order and Placement of <script> Tags
We showed you two options for placing script tags. Inline, right in the html, which works for very small sites and testing, but won’t scale well. And then we also showed you how to pull your javascript into external files and call those files in the html, which is the better practice.
Within the html itself, you also have choice in whether you place the script tags at the top (in the head) or at the bottom of the page, just above the closing </body>tag. As the page loads, it is being read by the browser from top to bottom. When a <script> tag is reached, the reading stops until all of that javascript is loaded. This means that no other elements below that tag will appear until the scripts are loaded. For instances where the load time is fast, this is no problem, but in other instances, your users might find themselves staring at a blank page on the web as they wait for the javascript to load before the browser renders page elements/content.
Because of this, many developers will choose to place their script tags at the bottom of the page, effectively telling the browser to load all the visual stuff first, and then load the action stuff - the javascript. The downside of this approach is that you could have instances where a user is trying to interact with an element that has appeared on the page, but because the javascript hasn’t loaded, it’s expected action on click for example, doesn’t work.
