Lecture 1: JavaScript, Node.js & Websocket - rociorey/cci-2020 GitHub Wiki

Lecture 1: JavaScript, Node.js & Websocket (22.10.20)

Introduction to JavaScript + clarification about how websites are designed/folder structure

In this lecture we were introduced to the programming language JavaScript. JavaScript along with other languages (HTML and CSS), make what we see in the Web. With HTML you can get some basics, like writing a sentence. With CSS you style/give further characteristics to what you created in HTML. So, in case of text, in CSS you can select what typeface, what colour etc the text you wrote is. JavaScript is the one that allows you to make things interactive. For example, when you click on a button and something happens.

When someone designs a website, it usually starts being just a folder in their computer. The basic folder structure usually contains a file for HTML, which is usually called index.html but could be called whateveryouwant.html, a CSS file which is usually called style.css and the JavaScript file which usually is script.js. The files in this folder is what you're seeing usually in the left when in Glitch, P5.js etc projects. Many times you'll see a lot more files than the ones mentioned above, this is just a way of organising more complex code in different files. In the basic folder there's often a README.md file which is just some text to explain what the code does and sometimes who owns the credit to it etc, it's good practice to include a README.md file but not strictly necessary.

What our tutor Indira was showing us today on the screen was the README.md pages of different projects in Glitch. These projects were meant to teach some code, hence why they took advantage of the text capability in the READ.ME file and used it to explain how to use and create the specific code they were trying to teach.

Glitch

Glitch is a platform that allows you to code web applications online using JavaScript. The projects we were going through today in class were in Glitch, and they were just example ones to explain bits of code.

Node.js + clarifications on servers, clients...

The next thing we were taught was Node.js. It's a JavaScript library for creating web servers. To understand it better it's useful to know what a library and a server are. A library is a set of code that's been previously written so you don't have to. You can make use of it in your own code as it was written to be used by others (+ explanation here). A serveris a computer or system that provides resources, data, services, or programs to other computers. This video was very useful to understand what a server, client etc are. So when you include the Node.js library in your code, you are creating a web server. Node.js uses both codes for the front end and the backend. To understand those concepts better, this video is pretty useful! So basically you have different parts of code that interact with each other. In the example Indira showed us there are some front end code (files in the public category like script.js) and backend ones (like server.js and package.json). What we learnt today in class is what bits of code we need to make these different files communicate between themselves and the server.

Websocket + clarifications on protocols

The last thing we learnt in class was an introduction to Websocket. It's a protocol that allows you to create a two way interactive communication between the server and a client, but all the other clients connected to that URL can also receive information without having to do anything else. This video was quite handy to understand it properly.

Homework for next week

  • Go through the projects in Glitch that explained to use the code for JavaScript, Node.js and Websocket and remix (change, tweak) some of the code to get how it works
  • Download the Arduino software that we'll be using to create projects in physical computing. Arduino is a platform that allows you to create electronics projects.
  • Install the library Node.js in your computer in order to use it in your own projects
  • Download visual studio code to start coding in a development environment