Most web content, including eLearning content, is built using three basic layers:
- HTML, a markup language that gives structure to web content
- CSS, a catalog of style rules that determine how the content looks
- JavaScript, a programming language that enables the creation of dynamic content
Learning a bit about JavaScript is an important step in understanding how eLearning content works and how to make that content more engaging. It’s easy to learn, and developers can quickly begin to create simple applications and games, according to Mark Lassoff, founder and president of Punk Learning and a Guild Master.
“JavaScript is the most important programming language to learn right now,” Lassoff said. “Because JavaScript can run in every layer of a software system—front end, back end, and mobile—it is the language that gives you, as a developer, the most flexibility. In learning, understanding JavaScript allows you to build games, simulations, and mobile apps and get out of the ‘slide and share’ paradigm in which we still seem stuck.”
Three layers
Without HTML, text on a web page or in an eLearning course just sits on the page. All the text looks the same; there’s no way to know what is a section title, what is body text, or what should be in a table. HTML tags identify a structure: headings, new paragraphs, tables; they also let web designers embed images and videos in a web page.
Adding a CSS layer makes that text look nicer and gives it some structure—possibly creating a hierarchy, with headings and subheadings, or a table. With CSS, it’s possible to make big, bold headings, add background colors and borders, or create columns. But it all still just sits there.
Then JavaScript gets involved. If the designer wants text that scrolls, animations on the page, or content that updates dynamically, then developers need to add some JavaScript code. JavaScript can use triggers, like a mouse click, to perform certain actions, such as requesting data (asking learners to enter their name in a field, for example), updating text, or launching a video.
W3Schools.com offers a JavaScript introduction with examples of simple JavaScript codes.
Using JavaScript in eLearning
Any eLearning developer who uses an authoring tool like Articulate Storyline or Adobe Captivate already uses some elements of programming, according to Jeff Batt in “5 Benefits of Learning to Code for an eLearning Developer.” Understanding the use of variables and triggers in programming can help developers create richer eLearning, Batt wrote.
Learning JavaScript can also enable developers to move beyond the barriers and limitations of standard tools and templates. A basic command of JavaScript gives developers access to thousands of JavaScript libraries that can help them bring their eLearning content to life.
Developers can add simple games; create dynamic text, such as updatable charts and forms; and create designs where background colors, images, and text change and update using various triggers. That’s just the beginning. With JavaScript, developers can add animation, automate some tasks, and do much more.
As with nearly everything, there is a downside: JavaScript can raise some security issues, so developers must familiarize themselves with the risks and build in protections. Also, it’s a tool that can be used to enhance eLearning—or add unnecessary bells and whistles that are distracting or annoying to learners. Judicious use of effects and animations is a plus, but developers should be careful not to go overboard.
It’s easy to get started with JavaScript, and several tutorials are available online. Developers need only a web browser.
Want to learn more? Register now for Mark Lassoff’s one-day BYOL (Bring Your Own Laptop®) pre-conference workshop, JavaScript Development for Digital Learning, on October 24 prior to DevLearn 2017 Conference & Expo, October 25 – 27 in Las Vegas.