JavaScript Drives Engaging Web Content—and eLearning

Most web content, including eLearning content, is builtusing three basic layers:

• HTML, a markup language that gives structure to webcontent
• CSS, a catalog of style rules that determine howthe content looks
• JavaScript, a programming language that enablesthe creation of dynamic content

Learning a bit about JavaScript is an important step inunderstanding how eLearning content works and how to make that content moreengaging. It’s easy to learn, and developers can quickly begin to create simpleapplications and games, according to Mark Lassoff, founder and president of Punk Learning and a Guild Master.

“JavaScript is the most important programming language tolearn right now,” Lassoff said. “Because JavaScript can run in every layerof a software system—front end, back end, and mobile—it is the language thatgives you, as a developer, the most flexibility. In learning,understanding JavaScript allows you to build games, simulations, and mobileapps 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 coursejust sits on the page. All the text looks the same; there’s no way to know whatis a section title, what is body text, or what should be in a table. HTML tagsidentify a structure: headings, new paragraphs, tables; they also let webdesigners embed images and videos in a web page.

Adding a CSS layer makes that text look nicer and gives itsome structure—possibly creating a hierarchy, with headings and subheadings, ora table. With CSS, it’s possible to make big, bold headings, add backgroundcolors and borders, or create columns. But it all still just sits there.

Then JavaScript gets involved. If the designer wants textthat scrolls, animations on the page, or content that updates dynamically, thendevelopers need to add some JavaScript code. JavaScript can use triggers, likea mouse click, to perform certain actions, such as requesting data (askinglearners to enter their name in a field, for example), updating text, orlaunching 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 ArticulateStoryline 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 theuse of variables and triggers in programming can help developers create richereLearning, Batt wrote.

Learning JavaScript can also enable developers to movebeyond the barriers and limitations of standard tools and templates. A basiccommand of JavaScript gives developers access to thousands of JavaScriptlibraries that can help them bring their eLearning content to life.

Developers can add simple games; create dynamic text, suchas updatable charts and forms; and create designs where background colors,images, and text change and update using various triggers. That’s just thebeginning. With JavaScript, developers can add animation, automate some tasks,and do much more.

As with nearly everything, there is a downside: JavaScriptcan raise some security issues, so developers must familiarize themselves withthe risks and build in protections. Also, it’s a tool that can be used toenhance eLearning—or add unnecessary bells and whistles that are distracting orannoying to learners. Judicious use of effects and animations is a plus, butdevelopers should be careful not to go overboard.

It’s easy to get started with JavaScript, and severaltutorials 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-conferenceworkshop, JavaScript Development for Digital Learning, on October 24 prior to DevLearn 2017 Conference & Expo, October 25 – 27 in Las Vegas.