Lesson 1 - Getting started with Javascript

Lesson 1.
Ok here we go, this course is aimed at those who have not yet delved into the wonderful world of Javascript but want to learn how to get started. A basic knowledge of HTML would be advantageous, but not mandatory.

If you have ever tried to read a Javascript book, and I've read nearly all of them, they do tend to get bogged down in trying to teach you how to run before you can crawl, never mind walk. In this series I aim to teach you right from lesson 1,  how to use Javascript without necessarily given you all the background, that can come later as you progress and see how brilliant and easy Javascript can be to use and solve every day problems in web development.

I believe we learn best by doing, getting your hands dirty, so each lesson will be hands on, and will help you use Javascript in a real world kind of way.

We will start with the browser console to enter our Javascript, this way we can learn without having to setup an environment, & without the need of downloading a text editor. However later in the series, we will do just that, there are some great free editors available, such as Atom.io and Visual Studio Code but for now, we can use my JS playground.

In a new window open my JS Playground  by right clicking on the link (blue text) and choosing open in a new tab or window, depending on your browser.

The playground will load, and you will see a page with the title "Learn Javascript 2017 Playground" in nice green text. Next we need to get to the console, to do this we can right click anywhere on the playground and choose  "inspect" or "Inspect Element",  or "web developer tools" again depending on which browser your using and then click the console tab.

We can now enter Javascript commands into the console and interact with the page.

Apart from the heading, the page also has a container that we can target, this container is in the HTML markup and has some default text as follows:-

<div id="output">Your Out Will Appear Here .. ..</div>

Lets put your name into this element, before we can change the text we need to first get a reference to the container (output), we can do this by using the getElementById command as follows:-

type or copy into the console the following command, then press enter.

var el = document.getElementById('output');

Don't worry to much about what this does for now, all will be explained after we have changed the elements contents.

now enter the following into the console, not forgetting to substitute your name, unless you happen to be called Paul too ;)

el.innerHTML = '<p>Hello, My Name is Paul</p>';

After you press enter, you will see the magic happen, the default text will now change before your eyes, to what we have just entered into the console, also note we added <p><p> tags, so not only did we change the text, we also updated the HTML to put the text inside a paragraph block, lets make it an <h2> element.

press the up arrow, and you should see the last command pop up again, now change the <p> tags to <h2> tags

el.innerHTML = '<h2>Hello, My Name is Paul</h2>';

and press enter again, the paragraph will now be replaced with heading 2, this can be seen by right clicking on the element in the page and selecting "inspect".

How does it work?

If we look at the first code block again, remember I said we needed to get a reference to the element we want to change.

var el = document.getElementById('output');

Like all programming languages, Javascript uses variables to store data, you can think of a variable in its simplest form as a box that contains information, for example, you may have a box labeled MyAge, and inside that box is a card with your age written on it. To retrieve that information, you look into the box, read the card and store that in your memory, well guess what, thats exactly how variables work inside computers.

So var el says create a box, write on the label el, and write on the card the area in the computers memory that points to the element that has an id of output (in this case our output container div, in the HTML).

Variable examples;

var age = 44;

var firstName = 'Paul'

var lastname = 'Brown'

In the next lesson, we will look at variables in much more depth, as you may or may not have noticed that the first variable example above does not include quotes around the number 44, why is that? why didnt we write it as var age = "44" and what happens if we did write it like that? would it be wrong?

Tune in again for lesson 2 to find out.

Thanks for reading, and don't be afraid to ask any questions, if you need more clarification on todays lesson.

Paul Brown