coding Tag Archives - General Assembly Blog | Page 2

DOM Manipulation: Changing Your Website in Response To User Actions

By

Looking to create a button to change a web page’s background color, build a form that will allow users to add a comment directly to your page, or remove content when a user clicks an “X” button? You’ll need to know how to manipulate the Document Object Model, or DOM, to do all of these things.

The DOM is the structure a web browser generates from an HTML file. The browser reads the HTML file and generates a version of the elements that is formatted for your JavaScript code to communicate with. We need this “translated” version of the HTML so that we can use JavaScript to talk to the elements on the page. If JavaScript could not talk to the DOM, we wouldn’t be able to use JavaScript to change the appearance of the page.

You can picture the DOM as a kind of hanging mobile sculpture, where each node of the mobile is a different HTML element. You could also imagine it as a family tree, where the “root” is the parent of all the other elements in the tree. That means that the largest containing element, <html>, contains all the other elements in the tree. Here’s an example:

DOMManipulation

Here’s what the above HTML looks like as a DOM tree:

DOMManipulation

We frequently use family terminology in referencing parts of the DOM. In the above example, the <html> tag is the parent of the <head> and the <body> and the ancestor of all of the other elements. The <li> elements are the children of the <ul> element. Similarly, the <li>s are sibling elements.

The HTML file itself provides a good way to visualize the Document Object Model, because it’s the file that helps the browser create it. When you indent each subsequent “layer” of HTML, you give yourself a good visual of the nesting of the DOM. Remember, the DOM is created by the browser when it reads your HTML. Your HTML document is the template which creates the DOM.

When building a website, you might want to build functionality for the DOM to change in response to a user action. Every web framework — from Angular, to React, to jQuery — provides some way to adjust the DOM. The best ways to first encounter DOM manipulation are to use plain JavaScript or, even better, use jQuery.

In each, you must first tell the JavaScript how to find the element on the page (we call this selecting the element) and then manipulate it.

How No-Frills JavaScript Interacts With the DOM

In JavaScript, there are separate methods for selecting elements by element type, class, and id. Below are the plain JavaScript methods for selecting elements.

DOMManipulation

Once you’ve selected the element, you can use a number of methods to change or add to it. For example, if you’d like to add some content to the page, you can append HTML using the .appendChild(element) method, like this:

DOMManipulation

You can append a new child HTML element to any part of your page by first selecting the element you want to be a new parent:

DOMManipulation

If you want to append an HTML element with content inside it, you’ll create a text node using the .createTextNode() function like this:

DOMManipulation

You can see that something as simple as adding a div with some text is already getting quite complex. This is where jQuery comes in to simplify our DOM manipulation.

Simplifying DOM Manipulation With jQuery

jQuery is a JavaScript library that provides tools to make life simpler for web developers. Behind the scenes, the jQuery source code is written in JavaScript. That means that anything we do in jQuery could be accomplished in JavaScript with more code. jQuery is designed to simplify DOM manipulation, and its syntax is easier to grasp. It uses CSS-style selectors to pick DOM elements (elements from the HTML). That is, you can select an element by using its tag, class, or id. For example:

$(‘span’) will select all of the span elements,

$(‘.container’) will select all of the elements with a class of container, and

$(‘#hero-image’) will select the element with the id of “hero-image”.

Because CSS selectors can get complex, you can select very specific elements on your page.

Once you have selected a DOM element, you can change it at will using a large array of jQuery manipulation methods.

Here is an example of using jQuery to manipulate some HTML.

The HTML:

DOMManipulation

DOM’s JavaScript component:

DOMManipulation

The above code will change all of the paragraph elements on the page to have a value of “Boo!”. Go to a webpage with jQuery loaded on it, like css-tricks.com, open the console with `command` + `option` + `j`, and paste that code into the prompt. When you execute that code, you’ll notice all of the paragraphs will have changed to say “Boo!”

As you’re working with jQuery to manipulate DOM elements, you are almost always either getting or setting a value. If you want to find out the current value of some attribute, you are getting. If you want to change the value, you should be setting. This is the pattern:

  • Getting a value: $(“CSS Selector”).someJqueryMethodName()
  • Settings a value: $(“CSS Selector”).someJqueryMethodName(valueToSet)

Notice that getting a value doesn’t require an argument to the jQuery method, but setting a value does.

Following that pattern, we could get the value of the text of an element on the page:

  • Get the text of the readme (it lives inside of an article tag): $(‘p’).text()
  • Set the text of the readme to: “Boo!”: $(‘p’).text(“Boo!”)

Some jQuery methods require an argument in either case. For example, the .css() jQuery method works as follows:

  • Get the background color: $(‘p’).css(“background-color”)
  • Set the background color to blue: $(‘p’).css(“background-color”, “orange”)

Some of the most common jQuery DOM manipulations are:

You can use these manipulation methods, along with event listeners, to change your page in response to user actions.

  • Append HTML content as a child of the current selected element: $(‘.selected-element’).append(htmlContent)
  • Add/remove a new class to/from the selected element: $(‘.selected-element’).addClass(className) / .removeClass(className)
  • Replace all of the current HTML content within the selected element with the inputted htmlContent: $(‘.selected-element’).html(htmlContent)
  • Replace the current text content of the selected element with new text: $(‘.selected-element’).text(newTextString)
  • Change the value within an input element: $(‘.selected-input-element’).val(newValue)
  • Remove the selected element from the page: $(‘.selected-element’).remove()

You can use these manipulation methods, along with event listeners, to change your page in response to user actions.

DOM at General Assembly

In General Assembly’s full-time Web Development Immersive and part-time Front-End Web Development courses, students learn DOM by visiting jQuery-enabled websites like CSS-Tricks and using the console to alter the pages in front of them. Changing all of the titles to some goofy text gives students a sample of the power of this tool.

Students also dive into and read the jQuery documentation to find out about the most useful DOM manipulation methods. We make sure to emphasize .append, .addClass, .html, .text, and .val. Then, we introduce DOM events so that students’ sites can detect clicks, form submissions, scrolling, and keypresses. Much of the time, our response to these events is to manipulate the DOM accordingly. When a user presses a button, it can change the appearance of the web page. We do this by listening for the button press and then manipulating the DOM to impact the page.

Meet Our Expert

Cory Fauver is a Web Development Immersive instructor and former Front-End Web Development instructor at General Assembly’s San Francisco campus. He left his early career in math education to teach himself web development while building a company with two close college friends. While their product didn’t work out, they left that experience with skills that they’re all using today. Cory enjoys sharing the methods and resources he used to learn HTML, CSS, and JavaScript. When he’s not at a computer, he loves playing ultimate frisbee, backpacking, and being outdoors.

Cory Fauver, Web Development Immersive Instructor, GA San Francisco

Using JSON to Serialize Data to Share Between Applications Seamlessly

By

In JavaScript and other programming languages, we represent real-world entities as objects, or collections of key-value pairs. For example, in JavaScript, if we wanted to represent a student who has a name and a favorite color, we can use an object with two keys — name and favoriteColor — and two values associated with each key:

Json graphic 1

When we want to send these objects as data between two systems, such as a website and the server that runs it, we need a way to format these objects so that they can be read by the receiving server.

JavaScript Object Notation, or JSON, is a style of text notation that’s used to format and interchange structured data. JSON describes how to represent and arrange data sets so they can easily be written, transferred, and parsed by the receiver. JSON is easy for humans to read and write. It’s also easy for machines to programmatically dissect and generate.

Imagine that you signed up for a website with your email address and created a profile with your name and age. Your user profile would appear as a JSON object to the site’s back-end application, which is running on the server and receiving your form submission. This JSON format would allow the application to easily work with your data.

By looking at a document that’s structured using JSON, we can visually interpret data, noting the various relationships within the set, such as what is the parent or child of a certain node (object). In the following example, we can see what owns the “profile” and “account” data by looking at how the JSON document is structured:

Json graphic 2

Try writing your own JSON object and test its validity using a validator like this one!

Usability has made JSON one of the most popular means of serializing data. With it, data can easily be translated from objects into formats that can be stored (for example, in a file) or transmitted (for example, across a network). JSON can represent four primitive data types — string, number, Boolean, and null — as well as two structured types, object and array.

JSON is an open standard file format that can be used by anyone. However, whomever is reading and writing JSON must adhere to the standards laid out by the ECMAScript specification (JavaScript is based on ECMAScript as well). This standardization makes JSON a great choice when sending and receiving data between two systems, such as an API and a client, or a web server and a client.

A Brief History of JSON and Its Rise in Popularity

JSON is language independent, meaning that many programming languages besides JavaScript have the ability to create and parse JSON. In fact, its conventions and data structure format maps effortlessly to popular object-oriented languages such as JavaScript, Ruby, Java, and Python.

As a a result, JSON can be written in one programming environment and parsed, or read, in another. For example, we can look at the popular Twitter API and see that a tweet is represented using JSON. But, if we want to parse that JSON data — say we want to get a feed of the most recent tweets from a certain user — we can choose whatever programming language we want that can read the JSON format. Twitter itself provides many libraries for consuming its API, but you can also do so by writing your own program.

JSON was originally created in the early 2000s by computer programmer and entrepreneur Douglas Crockford and his team at State Software as a lightweight serialization alternative to XML (Extensible Markup Language). JSON.org launched in 2002 to describe the format, and Crockford specified the format officially in the RFC-4627 documentation in 2006.

Today, JSON usage and developer interest is on the rise while XML usage is declining. According to the online API news site and directory The Programmable Web, of the top 10 most popular web APIs, only one — the Amazon Product Advertising API — supports XML and not JSON. Many of the most popular web APIs support both, and several support only JSON: the Facebook Graph API, Google Maps API, Twitter API, AccuWeather API, Pinterest API, Reddit API, and Foursquare API.

How JSON is Used

JSON is built on two data structures:

  • A collection of key-value pairs. In JavaScript, this is called an object. In Ruby, this is commonly called a Hash. Other names that refer to this same idea are dictionary, keyed list, and associative array. An example of a key-value pair is a dictionary: To use it, we look up the word (key) and read the definition (value).
  • A list of values. In most languages, this is realized as an array, vector, list, or sequence. An example of a list of values is the different colors of crayons in a box.

When JSON is combined with the AJAX (Asynchronous JavaScript and XML) web development technique, a web browser is able to send and receive data without needing to refresh the web page. Think about submitting a form to update user information on a website: After the user hits the “submit” button, their details are packaged into the JSON format and sent from the client (web browser) to the server. The server can respond with another piece of JSON data, which the web browser can then parse to show feedback to the user. This popular combination of technologies allows for a seamless user experience.

JSON at General Assembly

At General Assembly, students learn various skills that rely on the JSON format. Within the full-time Web Development Immersive course, aspiring developers create web APIs that use JSON to communicate back and forth between a client and a server. In our part-time JavaScript Development course and self-paced online JavaScript offering, students learn how to work with JSON within the object-oriented programming language. Additionally, in our full-time Data Science Immersive and part-time Data Science course, students write application code in Python, which has the ability to parse and generate data using the JSON format.

Meet Our Expert

Danny Kirschner is a lead instructor for General Assembly’s Web Development Immersive course in Providence, where he teaches students how to be job-ready full-stack developers. Danny has been writing web apps using Ruby on Rails and JavaScript for more than eight years. When he’s not coding, he enjoys cooking vegetarian food and biking around Rhode Island.

Danny Kirschner, Web Development Immersive Instructor, General Assembly Providence

JavaScript for Web Development: Building an Interactive Website

By

JavaScript is essential to nearly every action you take online, whether it’s entering credit card information, streaming videos and music, or interacting on social networks, just for starters. It’s the programming language used to make webpages interactive — and it’s perhaps the most widely used language because of it.

Developers use JavaScript to create a wide range of features, from simple user interface (UI) functionality to complex visual effects, including:

  • Interfaces like image carousels.
  • News feeds that continue to load new information as you scroll through them.
  • The ability to submit information entered into a Google Doc, survey form, or online payment system.

Features like these are part of a website’s front-end code, which is responsible for what users see and interact with. Front-end JavaScript code runs in a user’s browser, where it’s integrated with the HTML code that makes up a page’s structure and the CSS code that specifies how each of the page’s elements should be displayed.

But not all JavaScript is written for the front end. Developers can also use it for a website’s back end, which is executed on servers, or specialized computers that run websites behind the scenes.

JavaScript allows developers to perform many basic tasks common to a wide variety of programming languages. For instance, conditional logic allows a developer to specify that a section of code should be executed only if a certain condition is met. Imagine you were creating a webpage that accessed weather information for the user’s current location, and then displayed an icon representing the current temperature. You might use a conditional statement to specify that if the temperature is below freezing, the screen should display an image of an icicle.

Conditional Statement

JavaScript developers can organize their code a couple different ways. One approach, known as functional programming, organizes code into functions, which are sets of JavaScript statements that take values as input and return results. Another technique, known as object-oriented programming, groups values and code together into collections known as objects.

A basic familiarity with JavaScript gives you a strong foundation for building applications with popular frameworks such as React, Angular, and Vue, and libraries like jQuery. Frameworks and libraries are pre-written collections of JavaScript code that make it easier for you to build your own applications. While using a framework or a library can allow you to program without needing to write the code for some tasks yourself, a foundation in JavaScript coding without frameworks or libraries — known as vanilla JavaScript — can be a great asset in customizing your apps and debugging them when things aren’t working exactly as you expect.

JavaScript at General Assembly

At General Assembly, JavaScript is a core part of all of our web development courses. It’s one of the central technologies covered in our full-time Web Development Immersive and Web Development Immersive Remote programs, in which students prepare for a career in full-stack web development. You can focus exclusively on the language in our part-time JavaScript Development course (also available online), or get a basic introduction to how JavaScript fits with HTML and CSS in our part-time Front-End Web Development course.

GA instructors help students build JavaScript skills step by step, sharing knowledge and best practices they’ve accumulated as developers in the field. In addition to in-class exercises and homework, students also apply their new knowledge by building projects that make use of all the tools they’ve learned. Students leave with portfolio-worthy projects that demonstrate their new skills, as well as next steps for building apps with JavaScript and learning more about the language.

Meet Our Expert

Sasha Vodnik is a front-end web developer and author who teaches Front-End Web Development and JavaScript Development at General Assembly’s San Francisco campus. He also writes books on HTML, CSS, and JavaScript and creates video courses through LinkedIn Learning.

“I aim to help students recognize what they already know and connect it to what they’re trying to do. At GA, we teach how to troubleshoot and find answers so you can grow as a developer long after you leave the classroom.”

– Sasha Vodnik, JavaScript Development Instructor, General Assembly San Francisco

Full-Stack Deconstructed

By

Full-Stack-Web-Development

Not long after I changed careers to become a full-stack web developer, I received an odd Facebook message from a family friend. “I visited your website,” he wrote, “and I’m still trying to figure out what pancakes have to do with websites.”

Clever…or clueless? I’m still unsure. But one thing is certain: IHOP needs to move over; the term “full stack” isn’t about pancakes anymore.

Continue reading