JS Questions: What is jQuery?

This is the sixth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is jQuery?

JQuery is a widely-used JavaScript library that makes it easier to access and manipulate DOM elements with JavaScript.

Developing with pure JavaScript is relatively tedious and time consuming, because it takes a lot of work to access DOM elements and assign any changes I may want to make to them. With vanilla JS, I’d have to grab an array of elements by class name, for example, and then iterate through those elements and remove a class. With jQuery, though, I can find elements by class and update them in one step.

 

JQuery can also be used to simplify tasks such as making animations, handling client-side events (such as a click), and making AJAX requests. Another benefit of using jQuery in contrast in vanilla JS is that the library has cross-browser compatibility built-in, meaning webpages built with jQuery generally should work the same across all browsers.

 

In recent years, many new JavaScript libraries and frameworks have emerged. JQuery has fallen from popularity as new techniques and approaches have moved to the forefront, but for small webapps, such as a single page JavaScript game, jQuery may still the the right choice.

Sources

JS Questions: What is a First-Class Function?

This is the fifth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is a First-Class Function?

In JavaScript, functions can be assigned to variables, passed as arguments to other functions, returned by functions, and stored in data structures. Basically, functions are instances of JavaScript’s Object type, just like strings or arrays.

Below is an example of a JavaScript arrow function being assigned a variable name, exclaim. JavaScript’s map function is called on an array of words, and passes in the exclaim function as an argument. These are two ways first-class functions can be used.

When a function takes in another function as an argument and/or returns a function as its value, it is known as a higher-order function. The map example above is a higher-order function.

A function passed as an argument to another function is known as a callback function.

Not all programming languages have first-class functions. With Ruby, for example, methods cannot be assigned to variables or be passed to other methods.

Sources

JS Questions: What is JSON?

This is the fourth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is JSON?

JSON, or JavaScript Object Notation, is a syntax that is useful for sending and receiving server data. Since a server can only send and receive data as text, JSON is used to convert data into text, as well as transform text received from a server into an easily readable format for developers. These transformations are made using the JSON.stringify() and JSON.parse() methods, respectively.

Modern webpages frequently make requests using the AJAX request and response cycle. Once a response has been received, it can be parsed to JSON. From there, a developer can access data in the JSON object.

JSON is compatible with many programming languages (not just JavaScript). A ruby developer can treat the JSON object like a ruby hash, for example, using dot or bracket notation to access nested key-value pairs. A JavaScript programmer would treat the JSON object like a JavaScript object.

The data types that can be converted with JSON are:

  • number
  • string
  • boolean
  • array
  • object
  • null

Sources

 

 

JS Questions: What is AJAX?

This is the third in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc. 

What is AJAX?

Websites used to be composed of static HTML pages. Each time a user interacted with the DOM, the entire page reloaded. AJAX, short for Asynchronous JavaScript and XML, is a bundle of technologies that allow web pages to be updated without completely reloading.

AJAX uses a functionality built into modern browsers called the XMLHttpRequest object, which has certain methods and properties that let web pages get data from a server.

The flow of an AJAX request and response cycle begins with an XMLHttpRequest object being created. Then the .open method is called on the object, which takes in three parameters:

  1. the type of request, GET or POST
  2. a URL to the requested data
  3. a boolean value of whether to send the request asynchronously. An asynchronous request means that other JavaScript functions can run while the response is being prepared and sent back from the server.

The .send method is then called on the XMLHttpRequest object, sending it to the server. The server processes the request and creates a response, returning data to the browser.

The data can be returned as XML (hence the XML part of the acronym), though it’s now more common to convert the data to JSON format, which simply allows developers to interact with data as if it’s a JavaScript object.

Using that JSON data, a portion of a web page’s HTML could be updated. For example, a JavaScript function could use HTML to create an unordered list, and append list items with text from the data.

Sources

JS Questions: What is the DOM?

This is the second in a series of posts I’m writing that aims to provide concise, understandable answers to Javascript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc. 

What is the DOM?

The DOM, or Document Object Model, is the structure of HTML elements that make up a web page. It’s often described as a tree, with the document object (or whole HTML document) being the root, and the head, body, div, etc nodes as branches.

The DOM is not a Javascript-specific interface, but Javascript is the language most commonly used to access and modify DOM elements. With scripts, web pages can be made to react to user inputs, such as mouse clicks, for example, by–let’s say–removing or adding elements or modifying the css. We call these interactions client-side events.

Originally, short scripts were added to otherwise static HTML pages, but now Javascript can be used as the main source code for entire web sites.

Sources:

 

 

JS Questions: What is a Dynamic Programming Language?

This is the first in a series of posts I’m writing that aims to provide concise, understandable answers to Javascript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc. 

I’m starting with the basics: what is a dynamic programming language?

A dynamic programming language is a high-level language that compiles at run time. Run time is the moment when a program is executed. Compiling means translating the higher-level code (such as the js code written by a programmer) into a lower-level code–machine code–that the computer can run.

Dynamic languages lend themselves to certain types of behaviors, such as metaprogramming–code that can manipulate code. In dynamic languages, variables can be reassigned, and values can even be coerced into different types (such as using parseInt() on the string “1”).

In general, programs written in dynamic languages can be developed more quickly, but won’t run as quickly as those written in static languages.

Some examples of dynamic languages are:

 

  • Javascript
  • Python
  • Ruby
  • Perl
  • PHP

Sources