Beginner Best Practices for JQuery / Javascript

Beginner tips when coding within Jquery

With every programming language, there are a set of rules that separate “good” code from “bad.” In reality, even the ugliest correct code will work, but there are these rules or best practices that help you write good code. Here, we will discuss the most important rules for coding in top form.

Equality ComparisonComparisons of Jquery

In JavaScript or JQuery there are two ways to express the idea of “equals” when comparing two things. They are

 “===!|==” 

and

 “==!|=” 

While both of these equality operators are technically correct, the former is the newer and preferred method of checking to see if one value is equal to another. As code and browsers change often we have multiple methods of doing the same thing. While not all are wrong, some are outdated and in this case the newer version is easier to read. This leads to cleaner syntax.

Don’t use the Eval () function

While powerful, the eval () function in JQuery has too many pitfalls. It allows you to pass a string, or group of characters, to the compiler.

The first problem is that using the compiler requires extra resources and depending on the input can make your code highly inefficient. The second problem is security. Since you don’t always have control over what the contents of the string are, you create a risk that malicious code may be executed by sending a command to the compiler using a seemingly innocuous text field. Therefore, avoid using eval () unless absolutely necessary. Other options exist that do not require the compiler and open you up to malicious code.

Script after HTMLhow to properly script javascript within an html document

JQuery script cannot be run until after the page has loaded and the script has become completely available. Due to this, if you put your script at the top and the page has a long load time, it may look as though nothing is happening. For this reason, we put our script after our HTML code so that the page will begin to load and then the script will run, showing the user that the page is loading. The other reason to put your script after the HTML code is to keep everything in one place and nice and neat at the bottom, making both your HTML body and your JQuery code more legible.

Use a Jquery DebuggerHow to properly diagnose a beginner jquery debugger

Most programming languages have a tool that show the problems within code, point out warnings such as old functions or incorrect syntax.

JavaScript has its own debuggers, the most popular being JSLint which, by name, removes the “lint” from your code and shows you the errors within.

JSLint is an online debugger, and the most popular amongst the JavaScript/JQuery community. You should develop the habit of testing your code with JSLint for errors prior to deploying it for testing and production. You simply copy and paste your script into the tool and it finds and reports on what the errors are, if any, and points them out.

Comments!Jquery comment code writing

Any coder in any language needs to use comments. Comments are simply non-compiling bits of code that are used to tell what each section of code is, does, who wrote it, etc. Comments are useful to help break up long sections of code into smaller sections, telling what each part does so that it can be modified more easily later. Also, you can tag your code with name and date so that you know who was responsible for the changes and when they occurred in case something breaks.

Having good comments gives you a head start on having good code documentation. Plus, once you have a good set of code with good commenting, it is easy to reuse that section of code or create a library with sections of your reusable code. Your comments act as title and description blocks and help other users to utilize the code more easily as well.

Semicolons

Because more than one command may appear on a line, and a carriage return does not necessarily end a command, many programming languages use semicolons to end a line. JavaScript uses them to end commands. Occasionally, a browser will let you get away without using them, but you may run into errors if you do not end your commands that way. Get in the habit of ending each command with a semicolon.

White Space

This is the nothing that should get talked about a lot more. White space is simply the spaces in between your commands. While you can put multiple commands on one line and run everything together, it is good practice to put one command per line, and indent the code inside a function a few spaces past the original code like this:

<script>
Function(){
	Code
	Code
	Function(){
		Code
	}

}

This neat use of white space makes your code more legible, and helps you identify which code is part of a function or subroutine and which is part of the original code. HTML can be free-flowing but it is often wise to follow the same example for certain tags as well so that both your static HTML document and your JQuery code look nice.

Next, we will talk about resources and training available for JQuery. Thank you for following our tutorial series, and we wish you luck pursuing your coding to the next level. We have links to some online options after the  recommended resources for JQuery on the next page.

FOLLOW US ON: