Did you know that your web browser has a built-in programming environment, that you can use right now without installing anything at all?
- No, I did not know that.
- Yes, I knew that already, why do you think I need you to tell me that?
- What on earth are you talking about?
It’s true. In most linguistics departments nowadays, there is some kind of class related to programming. That might be a computational linguistics class (often using the Python programming language together with a library like Natural Language Toolkit), or else a sadistics statistics course, using R.
But tools like that are not “part of” the browser, and they’re also not really “part of” the web. Javascript, however, grew up in the web. It’s been there since early days, and we all use it all the time when we’re using our web browsers, even if we’re not aware of it.
I would like to show you how to have a first conversation with Javascript right here, right now, without leaving this website. The way that you do that is to use the developer tools, and specifically, we’ll be looking at the Javascript console which is part of the developer tools. Now, the way that you open the developer tools is going to depend on 1) what operating system you’re using (Windows, Mac, or Linux), and 2) what browser you’re using. I have a summary table below which I believe is up to date (please let me know if it isn’t!). If you want more information for your particular browser/OS combination, you can follow the “More information” link which will take you to the browser documentation’s own intro to the dev tools.
Fair warning: I’m assuming that you’re using a reasonably recent browser. If you never think about updating your browser, you probably are using a reasonably up-to-date browser, because nowadays they update automatically. If something seems weird, try a different browser, or try downloading a newer one, or come here and shake your fist (lovingly) at us.
| Browser | OS | Key combination | Menus | More information |
|---|---|---|---|---|
| Firefox | Mac | ⌘+Option +I | Tools > Web Developer > Toggle Tools | Mozilla.org |
| Firefox | Windows, Linux | Ctrl+Shift+I | Tools > Web Developer > Toggle Tools | Mozilla.org |
| Chrome | Mac | ⌘+Option +J | View > Developer > Developer Tools | Google.com |
| Chrome | Windows, Linux | Ctrl+Shift+J | Google.com | |
| Safari | Mac | ⌘+Option +I | First, Safari > Preferences > Advanced, check “Show Develop in menu bar”. Then, Develop > Show JavaScript Console | Apple.com |
| Edge | Windows | Ctrl+Shift+J | Microsoft.com | |
| Edge | Mac | ⌘+Option +I | Tools > Developer > Developer tools… | Microsoft.com |
Okay, so you opened this weird developer tools thing. Why is this happening? What is your life?
All we’re going to do right now is help you to try to make something happen to your web page. It might weird you out. That would be good.
Before we start lighting things on fire, keep the following in mind:
None of what I’m going to show you how to do is destructive in any way.
It might seem destructive, but it isn’t. Exactly how those two things can be true will require a little more explanation. For now, just live in the now.
Okay, so, you have managed to open your developer tools. I’m a Firefox guy myself, so here’s what I see:
Okay, admittedly, that’s a lot of stuff.. We’re only going to be using a few bits and pieces here
If you are using Firefox, here’s an easy, fun thing you can do in the dev tools: that little camera icon near the right side of the page will create a screenshot of the content of whatever page you are viewing! That can be kind of useful sometimes. Give it a try — it will save the image somewhere on your computer, again, exactly where depends on your browser and OS. Screenshots are also possible on other browsers, but the exact way you do it is different.
Right, so, we want to talk to Javascript. We do that by selecting the Console tab at the top of the dev tools (it’s named the same in all browsers, amazingly enough).
What you’re looking for is a blue “greater than” sign. On Firefox, it’s a double greater than sign, for some reason. You have to click near that arrow in order to be able to type at the console. You can think of that little blue arrow as your chat window with Javascript.
So, let’s say some things to Javascript.
Try this:
As you can see, as soon as you type 1, you see a back-arrow and a gray 1. That’s actually a little confusing, because Javascript script is just predicting what will happen if you press enter. This kind of “predictive response” can be helpful later, but you want to go ahead and press “Enter” after typing 1.
Now, notice that we’ve got a new blue prompt arrow, and the back-arrow is followed by a green 1. That means that Javascript has processed our input, and responded.
Congratulations, you’re a Javascript programmer.
This is a non-trivial accomplishment. Except it is pretty trivial. Let’s do some things that are… well, weirder. Try typing out this beast (better yet, just cut-and-paste it into your console and press enter):
document.body.style.backgroundColor = "fuchsia"
Ouch. Let’s go back to something not so painful:
document.body.style.backgroundColor = "transparent"
So, we have to pause right here for an obligatory security warning:
BE CAREFUL IF SOMEONE TELLS YOU TO CUT-AND-PASTE CODE YOU DON’T UNDERSTAND INTO THE CONSOLE.
For instance, try opening the console when you are on Facebook.com — you will see a gigantic scary warning about scams that export private information via the console:
But you can trust little old me. I just wanted to make your web page fuschia, okay?
Now I will proceed to tell you to cut-and-paste code you don’t understand into the console.
Let’s do something weirder. Try this:
document.body.style.transform = "rotate(180deg)"
This is the Australian version of the site.
Haha, hahaha. Hahaha. Sorry.
You can turn off that madness like this:
document.body.style.transform = 'rotate(0)'
So there, you have done some things with Javascript.
Please be clear that you are not “hacking” by doing these things. In fact, the server where this website lives, https://www.langdoc.net, has no idea that you changed the background color or spun your page upside down. Why is that? Because you’re only modifying your copy of the page. When you go to that URL, your browser downloads the page to your computer, and stores it in some directory you probably never look at. Then, it renders the page into a kind of “representation” of the content — to do this, it uses something called the “Document Object Model” or “The DOM”. (Stop that snickering in the back!)
I think that the DOM is the best thing about the web platform. It’s the basis for turning static, unchanging documents into interactive, dynamic applications. And for us, that means making applications for language documentation. Just about everything that we do in ELAN, Flex, even (to some extent) Praat could be programmed to work within the web platform.
Even better, we can imagine new kinds of applications, that make our work more fun, more reusable, more useful. And we can build them out of web technology.
It’s a little strange to think about, but using the web platform does not necessarily mean that your creations — or, crucially, the data you work with — will be “on” the web. You can use technology as if it were a desktop app. We’re going to look into all this kind of thing in upcoming parts of this series.
The web platform is… well, magic. You can learn a little bit at the time. You can make stuff. You can be a part of the next generation of software for linguistics and language documentation.
You in?