CSEE Ph.D. student Omar Shehab received a travel grant to present his research, UNKNOTTING as a k-local Hamiltonian problem, at the 2014 Quantum Information Processing conference, which will be held early in February in Barcelona, Spain. Later in February he will also attend the Workshop on Quantum Games and Protocols at the Simons Institute for the Theory of Computing, UC Berkeley.

Omar’s research include adiabatic quantum Hamiltonian complexity, quantum computational simulation of topology and use of quantum optics to understand device independent cryptography. His work on quantum computing is done in collaboration with his mentor, CSEE Professor Samuel Lomonaco.

Maryland Governor Martin O’Malley is sending his final budget to the General Assembly this week. Political science professor Roy Meyers was a guest on WYPR’s Maryland Morning on January 13th and analyzed what the budget will look like and what Gov. O’Malley’s priorities will be.

“I think he’s probably going to stay the course. He’s going to claim credit for the innovations he’s made over the previous years and also try to promote additional job creation,” Meyers said.

He described potential ways Gov. O’Malley could create jobs with the budget including investments in infrastructure and education.

“The long term strategy of the administration is to try to build human capital and make investments in infrastructure. So for example, the increase in the gas tax last year has been creating jobs and it will continue to create jobs over the next couple of years,” Meyers added.

You can listen to the interview on Maryland Morning in its entirety here.

Asian studies program director Constantine Vaporis was recently interviewed in Education About Asia as part of an interview series with recipients of the AAS Franklin Buchanan Prize. Vaporis was the 2013 award winner for his book Voices of Early Modern Japan: Contemporary Accounts of Daily Life During the Age of Shoguns.

Education About Asia praised Vaporis for “producing a superb pedagogical tool” and interviewed him about his extensive scholarship on Tokugawa Japan and research methods for his book.

In addition to the interview, the magazine published a review of Voices of Early Modern Japan.  The reviewer, Kathleen Krauth, writes:

[The book] is a remarkable work in that it not only offers educators many topics and themes from the early modern era of Japan but also emphasizes how to read and understand a primary document. Because Vaporis’s text successfully presents content and skills, it serves as a model of how to meet the many demands of our jobs. High school and postsecondary teachers of Japan and Asia will find this book valuable for their teaching.

The interview and book review appeared in Volume 18, Number 3 winter edition of the magazine.

What’s the Absurd Creature of the Week in WIRED science? Why it’s none other than one of biologist Tom Cronin’s favorite sea critters, the mantis shrimp. And the eyes of these creatures are Cronin’s specialty and that’s where he comes into the article.

“As with bees or flies or crabs, they are compound eyes, but unlike those creatures, mantis shrimp “have a very unusual adaptation in that multiple parts of the same eye view the same point in space,” said biologist Tom Cronin of the University of Maryland, Baltimore County, “which is sort of like having multiple eyes in one, in a way.” Whereas we use two eyes to judge distance, mantis shrimp can do that with a single eye.”

“On top of that, some mantis shrimp can see a variety of colors in ultraviolet, so “they’re seeing colors that no other animal can see, in a sense,” said Cronin. “Basically color is a property of the nervous system so it’s not really present in the real world, but they can see aspects of the ultraviolet that nothing else can see.”

There are some neat photos with the article and some videos. Well worth a read.

Congratulations to UMBC’s Department of Information Systems for being ranked a top online graduate program in information technology by U.S. News & World Report. The UMBC program was ranked #19 in the nation, and is one of just two programs in Maryland to appear on the list.

See the rankings.

Learn how U.S. News & World Report calculated the rankings.

Something that comes up often when building front-end web applications is the need to change the classes applied to an element. For some time elements have had a className attribute which allows you to retrieve a string containing the class names separated by spaces. This is useful, but it doesn’t provide a simple way of managing the classes on an element.

Many JavaScript libraries have implemented their own helper methods for managing classes. For example, jQuery has addClass(), removeClass(), hasClass(), and toggleClass() methods.

In this post you’re going to learn how to manage classes using the classList API. This is part of the native JavaScript implementation in modern web browsers. The main advantage of using this native API is that it doesn’t require that you include a library like jQuery in your project.

The classList Object

Every HTML element has an object called classList that contains a list of the classes applied to the element, as well as methods for managing those classes.

myEle.classList;

First and foremost, classList is a DOMTokenList which contains the classes applied to an element and a property called length that represents the total number of classes.

{
        0: "column-half",
        1: "wiki-column",
        2: "text-content",
        length: 3
    }

The classList object also has five methods that can be used for managing classes. These are:

• add (class)
• contains (class)
• item (index)
• remove (class)
• toggle (class)

Each of these methods should be called directly on the classList object.

Lets take a look at each of these methods in a little more detail.

Adding Classes

The add() method is used to apply a new class to an element.

myEle.classList.add('treehouse');

To avoid duplication, the class will only be added if it doesn’t already exist.

Removing Classes

The remove() method is used to drop a class from an element.

myEle.classList.remove('treehouse');

Toggle Classes

The toggle() method will add a class to an element if it’s not already present, or remove the class if it is.

myEle.classList.toggle('treehouse');

Checking if a Class Exists

You can check to see if a certain class is applied to an element using the contains() method. This method will return true if the specified class is present, and false if it’s not.

var present = myEle.classList.contains('treehouse');

You could use this method as the condition for an if/else statement, as shown in the example below.

if (myEle.classList.contains('treehouse')) {
        // Class exists!
    } else {
        // Class not found.
    }

Finding a Class by its Index in classList

The item() method is used to retrieve a class name using the index of the class in the classList. If nothing exists at the specified index the method will return null.

var index = myEle.classList.item(0);

This method can come in handy if you need to loop through each of the classes applied to an element.

for (var i = 0; i < myEle.classList.length; i++) {
        var class = myEle.classList.item(i);
    }

Browser Support

Browser support for the classList API is good. Keep in mind that this feature was only added to Internet Explorer in version 10, so you may need to use an alternative if you need to support older versions of IE.

Support on mobile browsers is also very good.

Source: http://caniuse.com/#feat=classlist

BONUS: Finding Elements By Class

Whilst we’re on the topic of classes, lets take a look at a couple of methods that can be used to find elements using class names.

getElementsByClassName

The getElementsByClassName method will return a list of elements that have the specified class.

var elements = document.getElementsByClassName('treehouse');

You can also specify multiple class names by separating them with a space. In which case, all of the classes will need to be present on an element for it to be returned.

var elements = document.getElementsByClassName('treehouse mike frog');

Browser support for getElementsByClassName

querySelectorAll

The querySelectorAll method uses CSS selector syntax to find elements. You can match classes by preceding the class name with a dot, and IDs by using a pound-sign (#). Elements can be matched by just using the name of the tag.

var classEle = document.querySelectorAll('.treehouse');
    var idEle = document.querySelectorAll('#treehouse');
    var tagEle = document.querySelectorAll('div');

You can combine multiple selectors to create more complex queries just as you would in CSS.

var element = document.querySelectorAll('#main.treehouse');

The querySelectorAll method will return a list of all the elements that match your query. If you just wish to return a single element you can use the querySelector method. This will return the first element that matches the query.

Browser support for querySelectorAll

Summary

In this post you’ve learned how to use native JavaScript methods to manage the classes applied to HTML elements. A big advantage to using these methods over those provided by a JavaScript library like jQuery is that you don’t have the additional overhead of having to load an external library.

We’re starting to see more and more of the best features from jQuery (and other libraries) find their way into web browsers. Many of these libraries were initially developed to patch-up the basic JavaScript implementations in older browsers, so it’s nice to see this process coming full-circle.

Further Reading

• MDN: classList Documentation
• MDN: DOMTokenList Documentation
• Can I use… classList

The post Manipulating Classes Using The classList API appeared first on Treehouse Blog.