JS Mobile Menu

JavaScript Basics

There are 2 main objects that we are concerned about when writing JS in the browser, the window and document object. The window object is the chrome window, the document object is a an object that mirrors your html file. These 2 things are what we interact with with our code.

If I want to get at either a details (properties) or abilities (function or method) of the object, we use dot notation. So for example

document.write('hi');

This will perform the write ability that the document has, and will write hi to the screen.

So if i write document and dot, then after the dot I can access all its details (properties) and abilities (functions/methods).

Changing the documents background

If we want to do something to the document, change it in some way, we can by changing a detail (property) of the document object. So for example:

document.body.bgColor = 'blue';

This selects the body object on the document object. So like a dog has a leg, the document has a body. We then access the bgColor property and tell it to be blue. This will change your website background color to blue.

So this is an example of DOING things TO your website with JavaScript.

Changing the text of an element

The great thing about the document object is that it has all of our individual elements we created as objects. So we can select one of our elements, like say an anchor tag, and change it. The document has an ability (method) called querySelector, which is a great way to select one of your elements in the page. Once we have it selected, we can do things to it. So for example:

document.querySelector('a').innerHTML = 'hi';

This is selecting the a tag and look at the innerHTML part of it. We get that and set it to hi, so now the text will be hi inside of it instead of what it was previously.

Variables

Typing document.querySelector can get tiring, so what we can do is name that piece of code, and use the name instead of the whole line.