# Javascript Basics ## The Browser Behaviour Layer --- ### Review ## The Browser Triad --- ## HTML ### Content The markup language that we use to structure and give meaning to our web content, for example: - defining page elements (nav, headings, etc) - embedding media (images, videos, audio, etc). - managing connected files (`.css`, `.js`, `.png`, etc) --- ## CSS ### Presentation A language of style rules that we use to apply styling to our HTML content, such as - colour - typography - layout - animation (when used for presentation) --- ## Javascript ### Behaviour The official programming language of the browser. It does the things HTML and CSS can't, such as: - dynamically update content - control media such as video - animation of images, svgs, etc - math, if you're into that kind of thing --- ### Where can you use Javascript?  Source: [Learn JavaScript in 1 Hour](https://youtu.be/W6NZfCO5SIk?t=56) --- ## Javascript outside the browser - [Build a web server](https://www.digitalocean.com/community/tutorials/how-to-create-a-web-server-in-node-js-with-the-http-module) - [Building games](https://medium.com/the-node-js-collection/fun-and-games-with-node-js-359cee687173) - [Home automation](https://levelup.gitconnected.com/make-your-own-smarthome-server-with-nodejs-86e7aa0f63f4) - [Controlling drones](https://medium.com/maestral-solutions/programming-the-ar-drone-2-0-using-javascript-and-node-js-part-1-10bb946c60e5) --- ## A Quick History - 1995: JavaScript invented by Brendan Eich - 1996: Netscape 2 released with JavaScript 1.0 - 1997: JavaScript became an ECMA standard - 1997: ECMAScript 1 (**ES1**) released - 1998: **ES2** released - 1999: **ES3** released - 2009: **ES5** released (ES4 abandoned) - 2015: **ES6** released - 2018: Full support for ES6 in all browsers (except IE) Source: [W3Schools](https://www.w3schools.com/js/js_history.asp) --- ### What is ECMAScript?  Source: [Learn JavaScript in 1 Hour](https://youtu.be/W6NZfCO5SIk?t=154) --- ## Adding JS to HTML ### Recommended for this course ```html
Hello World!
Hello world!
``` - `` closing tag is required, because reasons - `type="module"` turns on modern features --- ## Other ways to add JS to a page You will often see these in examples/documentation online. - You will lose marks if you use these methods for assignments in this course (unless you're installing a third-party library or plugin). --- ### Alternative 1 ## Embedded Javascript ```html
Hello world!
Hello world!
``` - `