2d:null 2e:["$","title",null,{"children":"JavaScript Is Not a Toy | Columbia University Libraries Studio | Observable"}] 33:T5a8,## JavaScript’s First 15 Years: Maybe a Toy? Famously, JavaScript was [written in ten days](https://thehistoryoftheweb.com/the-10-day-programming-language-is-a-myth/) by Brendan Eich so that it would be possible to create interactive web pages with a scripting language built into the browser. In a marketing ploy, Netscape gave the language the confusing name “JavaScript,” leading to who knows how many years of people convinced that it is a toy language compared to the “serious” language, Java. In fact, it’s unrelated to Java (except in how it borrows Java syntax). And while the language wasn’t _actually_ written in only ten days, it was rushed, and the language has a lot of funny peculiarities such that modern JavaScript developers tend to only use a portion of the language as a whole. This portion is roughly identical to the parts of the language Douglas Crockford highlights in his skinny book [_JavaScript: The Good Parts_](https://www.oreilly.com/library/view/javascript-the-good/9780596517748/). Incidentally, Crockford has a great [lecture series on the history of computer programming and JavaScript](https://www.youtube.com/watch?v=JxAXlJEmNMg&list=PL7664379246A246CB). Starting with the second episode (which is about JavaScript specifically), it gets very detailed regarding JS, but the first episode should be on interest to anyone interested in how we have arrived to the world we are in, programming-wise. 34:Tae6,### JavaScript in HTML Of course, we can also run JavaScript in an HTML document using the ` ``` Though convention is to have all your `` in it, which loaded the [ubiquitous JQuery library](https://jquery.com/) and exposed the famous JQuery object, `$`. JavaScript tutorials of a certain vintage, including many by me, are overflowing with code relying on the JQuery object. Loading JavaScript files into your HTML pages (instead of simply writing the code inline) also allows for separating your JavaScript from your HTML, and, hence, writing far more complex JavaScript. We won’t do that here, but I will show you what the `index.html` page looks like if the JavaScript is moved to a separate file. First, we have `index.html`: ```html JavaScript Is not a Toy

JavaScript Is not a Toy

``` And, next, we have `script.js`: ```js alert("JavaScript Is not a Toy!!!"); ``` In fact, today, many websites effectively do little more than load a handful of JavaScript pages and, based on what’s coded in them, build out all of the HTML of the page you see in the browser. This is a profound change, at least for me, in how we think about how webpages are built. Instead of writing HTML and inserting JavaScript, we write JavaScript with some parts in HTML, wrap it all in the thinnest of HTML shells, and let our JavaScript do all the work.35:T45e,## JavaScript Stops Being a Toy This is a joke. JavaScript was never a toy. But its non-toyness became unavoidable when people started being able to use it _outside_ of the browser, to build various applications. Perhaps the best known tool to enable this transformation is [Node.js](https://nodejs.org), which appeared in 2009. With Node, JavaScript programmers could now write command line programs or web servers. JavaScript had been a language that produced dynamism on the web. With Node, it was now possible to write a complete web application—front-end and back-end—entirely in JavaScript. That means, additionally, that JavaScript began attracting the kind of tooling that could help developers maintain complex codebases. Package managers, task runners, module bundlers—these typical components of large applications now have JavaScript analogs for those writing Node applications. Finally, “stand-alone” apps you use today, such as Slack, VS Code, Whatsapp, or Discord, are written in [Electron](https://www.electronjs.org/), a framework for creating desktop applications that runs atop Node. 36:T5bd,### Using Node It’s funny; Node by itself doesn’t seem to do much. You can install it using [Volta](https://volta.sh/), a JavaScript tool manager, or you can install it [directly from Node](https://nodejs.org/en/). This gives you the executable, `node`, which behaves much like the executable `python` does in your terminal. If you type `node` by itself and enter, you get dropped into a [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop), where you can execute JavaScript much like how you can in the browser’s console. Type `.exit` (yes, with the period) to exit the REPL and return to your shell. But you can also write a file and execute it with Node. Here’s an example, called `node-script.js`: ```js const { stdout } = require("node:process"); stdout.write("JavaScript REALLY Isn’t a Toy!\n"); ``` Now execute `node node-script.js` in your terminal, and the script will run. From here, the possibilities become much broader than ever before. JavaScript outside of the browser! Who will stop us? Ultimately, as JavaScript’s utility has grown in the past dozen years, so has the language’s own expressivity and the opportunities it provides programmers to get more and more adventurous with their projects, which leads us to the very website on which you’re reading this. Just like `node` behaves like the `python` executable, now we have Observable notebooks, which behave like Jupyter notebooks, but for JavaScript.37:T4d9,## JavaScript Is Not a Toy, but We Can Still Have Fun Welcome to Observable Notebook! Observable notebooks are similar to Jupyter notebooks, but they run entirely in the browser (no separate kernel needed) and rely on a superset of JavaScript as opposed to one of the Jupyter kernel languages (Python, Julia, R, etc.). They are sharable and editable (like Google Colab notebooks), and they present an alternative data science environment for intrepid data researchers. Some immediate resources (Observable notebooks): * [Observable for Jupyter users](https://observablehq.com/@observablehq/observable-for-jupyter-users) * [JS replacements for Python data science tools](https://observablehq.com/@observablehq/javascript-replacements-for-python-data-science-tools) * [Arquero, a pandas/dplyr-like library for Observable](https://observablehq.com/@uwdata/introducing-arquero) * [Illustrated guide to Arquero verbs](https://observablehq.com/@uwdata/an-illustrated-guide-to-arquero-verbs) * [Plot](https://observablehq.com/@observablehq/plot), Observable’s built-in plotting library Since Observable notebooks don’t require cells to be run in order, library and data importing can be done at the bottom of the notebook, in the Appendix.38:[{"id":"6949ee5980ab4abec94beea6b90d8845b3635e8004996cd7563faf50767cc2f37a72f1ee1a1aa0530d996ee1069e9dc330be953e1422548eb8770544ba8f346e","href":"https://static.observableusercontent.com/files/6949ee5980ab4abec94beea6b90d8845b3635e8004996cd7563faf50767cc2f37a72f1ee1a1aa0530d996ee1069e9dc330be953e1422548eb8770544ba8f346e","name":"javascript-is-not-a-toy.PNG","type":"image/png","lastModified":1676618450747.836,"size":1741422}] 31:{"id":"d5180815fdbefed4","slug":"javascript-is-not-a-toy","title":"JavaScript Is Not a Toy","thumbnail":"44255642b4968c1b649b476a9d247d556822346b5391e9d7568a43a4b5e8962d","access_level":"public","create_time":"$D2023-02-17T02:56:59.999Z","update_time":"$D2023-02-18T09:00:29.927Z","view_time":null,"first_public_time":"$D2023-02-17T02:56:59.999Z","has_unpublished_edits":null,"fork":{"id":"0e13571ac39edab0","slug":"columbia-data-club-and-observable","title":"Columbia Data Club and Observable","owner":{"id":"f3f52b173ba201f8","login":"columbia-data-club","name":"Columbia Data Club"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0ca4cdd3468fc3de","login":"cul-studio","name":"Columbia University Libraries Studio","avatar_url":"https://avatars-next.observableusercontent.com/a7b9c57c7147b80d50eb555c7cc67a9719a15a9ced55a50098fa1b45a09c8c33","tier":"starter_2024"},"version":204,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"63a5ffaa3676a673","login":"muziejus","name":"Moacir P. de Sá Pereira","avatar_url":"https://avatars-next.observableusercontent.com/cc3c8fd655f4dbc8aa79039971f79a8d1ff772444ef95b0d01e1969963bb7ef6","tier":null}],"members":[{"type":"team","id":"0ca4cdd3468fc3de","login":"cul-studio","name":"Columbia University Libraries Studio","avatar_url":"https://avatars-next.observableusercontent.com/a7b9c57c7147b80d50eb555c7cc67a9719a15a9ced55a50098fa1b45a09c8c33","tier":"starter_2024","role":"editor"},{"type":"individual","id":"63a5ffaa3676a673","login":"muziejus","name":"Moacir P. de Sá Pereira","avatar_url":"https://avatars-next.observableusercontent.com/cc3c8fd655f4dbc8aa79039971f79a8d1ff772444ef95b0d01e1969963bb7ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"JavaScript Is Not a Toy","cells":[{"id":133,"value":"# JavaScript Is Not a Toy\n\n${await FileAttachment(\"javascript-is-not-a-toy.PNG\").image({\n width: 400\n })}\n\nFebruary 17, 2023\n\nThis is not a workshop. This is a little bit of background and then some hacking within this Observable Notebook, about which more below. The goal is to try and imagine how JavaScript can play a role in doing what the [Studio does](https://studio.cul.columbia.edu/about.html): supporting emerging practices in pedagogy and data scholarship.\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"### JavaScript Console\n\nBut the point has always been that JavaScript runs _in the browser_. In fact, this remains one of the strongest cases for learning JavaScript; a JavaScript runtime is installed in every browser in existence, and you can easily access it by opening the developer tools in your browser:\n\n* Chrome: Cmd + Option + J (Mac) / Ctrl + Shift + J (PC)\n* Firefox: Cmd + Option + K (Mac) / Ctrl + Shift + K (PC)\n* Safari: Cmd + Option + C\n\nYou can open up the console and just use simple JavaScript to change the page in your browser, do math, or do whatever you like. In fact, it’s easier to pop open the console in your browser than load the calculator program!\n\nAlternatively, try typing `alert(\"JavaScript Is not a Toy!!!\");` in the console.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"## Reproducing the Data Club’s Intro to Pandas Notebook\n\nThis is kind of a goofy plan, and we’ll see how far we get, but the idea is to take the Columbia Data Club’s [“Intro to Pandas” Jupyter notebook](https://github.com/columbia-data-club/meetings/blob/main/2023/february_09_Intro_to_Pandas.ipynb) used in last week’s Data Club workshop and rewrite it as an Observable notebook.\n\nFollow the progress [here](https://observablehq.com/@cul-studio/intro-to-pandas-but-like-in-javascript)…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"## Appendix\n\nHere we would load libraries and data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"