Leslie - Javascript DOM

I chose teaching about javascript because I've managed to avoid it for a ridiculously long time and that's got to stop. I've seen the syntax sprinkled in the frameworks I've been messing around with, like react, I 've made react apps using create-react-app and you have a development server already installed, and it's a 'server.js' file, which means they are using some express.js or Node backend. This is different from the 'server.rb' file I needed to use when I was working with sinatra, which is a ruby library or a domain specific language.

I guess I've never been sure where other coding languages started and javascript began. So I want to talk about javascripts most distinguishing feature and the thing that makes it so powerful.

Javascript is about manipulating the browser. If you open up your console, you see html and css, sure- but these aren't coding languages. Actually the only other thing you see in your console is javascript, and javascript is the only language you can use to directly manipulate the DOM and that's what makes it special. Here's an example because it was hard for me to visualize initially;

Open up your developers console and copy and paste the following;

let body = document.getElementsByTagName('body')[0]
body.innerHTML = 'LOOK AT ME using javascript and manipulating this DOM'

isi't it cool that you can change what you see instantly? you're defining the body as anything with the tag 'body' and replacing it with this statement!

next if I want to like, do more than just put a sentence, I can do something like this;

let body = document.getElementsByTagName('body')[0]
body.innerHTML = 'Hello from JavaScript and DOM Manipulation'

let paragraph = document.createElement('p')
let text = document.createTextNode('Oh hey, I\'m learning JavaScript and its sooooo confusing LOLLLL!')
paragraph.appendChild(text)

body = document.getElementsByTagName('body')[0]
body.appendChild(paragraph)

...to dynamically add content to the page I'm making a paragraph element called 'p' then creating a 'textnode', appending the text node to the paragraph and appending the paragraph to another location in the page. here I added it to the bottom of the element on the page.

But to make it so I don't need to rewrite it every time I want to add something to the page, I can save this whole thing in a function;

let appendElement = (target, tag, text) => {
  let element = document.createElement(tag)
  let textNode = document.createTextNode(text)
  element.appendChild(textNode)
  target.appendChild(element)
}

let body = document.getElementsByTagName("body")[0]
appendElement(body, "p", "BLAHHHHHHHHHKJHLKJHL hahahah...")

and so you can add this to the bottom this way!

I want to return back to what exactly javascript is, though. I remembered using sinatra when I made ruby applications and then theres this express.js thing, theres this thing called 'node' constantly being mentioned. What really is all of this nonsense?

Node, first of all, is what allows javascript to run on a server. since the javascript is already running on a browser. Node is the environment that lets the code execute not in a browser window.

if you enter 'node' in terminal this is what allows you to run javascript code.

the difference between sinatra and express.js is simply that express lets you write your server up in javascript if that's your preferred language. Sinatra does the same thing but it's written in ruby.