Before you even think to put your fingers on JavaScript you should learn HTML and CSS basics. To do that you will have to invest around 20-30 hours and once you made at least 3-5 complex HTML pages and style it with CSS you will be ready to think on JavaScript. There are many courses on JavaScript these days, online and in person, interactive or not. You can go old school and read a JavaScript book(s) or better yet read few short tutorials. But how to choose the right one. What if you want to do it fast and easy? Sounds like impossible, except it’s not. Lets see.
Now you have many different JavaScript frameworks on the market and for professional developer you will probably need to learn some of them. As a wanna be developer you should stop thinking on the whole a bunch of things JavaScript developer need to know because you will get desperate and quit before you even begin.
It’s best to focus on easy things and to get your hands dirty as soon as possible. That way you will actually “develop” something almost immediately which will help you to keep yourself motivated, nothing is better than quick and easy win.
In the old days JavaScript was the almost exclusively used as a language for user interface (UI), so it’s main use case was to make web pages interactive. At that time there were no front end developer but there were web designers who wrote code in JavaScript to support their designs (HTML + CSS). There was jQuery as the most dominant JavaScript library which made things easier for web designers. Today, however, jQuery almost lost it’s usability because modern JavaScript took the best solutions from jQuery and built it directly into JavaScript specification.
So, it’s now even easier to learn basic use cases of JavaScript in the context of UI patterns. UI patterns are the most common parts of user interface that exists on the almost any website, like menu, accordion, sign up/in form, overlay, etc. These UI patterns usually require some kind of interactivity with user. Basic example is click handling, for example you want to show some message to the user when he clicks on a button. Let see how to do that. First you need basic HTML (and CSS) web page with a button.
<html>
<body>
<div><button>Click me!</button></div>
</body>
</html>This button is quite useless, you can click it but nothing happens. Actually, something is going on behind the scene, when you click the button a click event has been produced by the browser and you can write little JavaScript code to respond to such event.
<html>
<body>
<div><button id="btn">Click me!</button></div>
<script>
document.getElementById('btn').addEventListener('click', function () {
alert('You clicked the button');
});
</script>
</body>
</html>The browser(Chrome, Firefox, Edge..) is tracking many events on a web page, clicking, typing, scrolling, cursor hovering and many others. At the moment when such an event happens browser calls functions registered as “event listeners” that may do something with the web page making it interactive. However, if there is no JavaScript code, there are no “event listener” functions as well, so nothing happens, event goes into oblivion. It’s up to you, developer, to write a function and register it as event listener function for an event such as click event. Subsequently it will be called when click event occurs. That’s why JavaScript is event driven programming language, meaning the most of the developer’s job is writing event listeners, reacting to user’s input.
Moreover an event such as click can be “listened” from the context of an element such as button or any other element on web page (div, img, a, span, etc). This means event listener function will be called only if the click happens when the mouse cursor is over that element. In contrast if you add event listener function to the whole document with document.addEventListener(‘click’, function () { alert(‘CLICKED’); }) then the listener function will be called for any click anywhere on the web page since the document represents <html> element that includes all other elements in document so basically everything you see on the web page.
JavaScript is language with C-syntax which means it’s almost same like known programming language C, today not that popular developer’s choice but still system developers favorite. Basically, JavaScript language defined variables, functions, conditionals, loops same as C, PHP, Java languages and many more. Lets see some of them from our previous example:
document.getElementById('btn').addEventListener('click', function () {
alert('You clicked the button');
});The part of the above expression, document represent variable, getElementById(‘btn’) is function and finally addEventListener(…) is also function. These are built in language functions you can find documentation about on MDN. JavaScript specification defines special set of built in objects(variables) and functions like getElementById for working with DOM (Document Object Model). DOM is in essence your HTML, CSS and JavaScript code translated to browser context. Changing DOM changes content on your screen immediately so for web JavaScript DOM functions you will use most of the times. In contrast when working in server context like NodeJS, you won’t need DOM functions at all.
We could write above code in more obvious fashion:
function myClkBtnFunction () {
alert('You clicked the button');
}
var myButton = document.getElementById('btn');
mybutton.addEventListener('click', myClkBtnFunction);Now we can see few more things like explicit definition of custom variable myButton where we store(assign) direct reference to the button element inside DOM. When we want to do something with that button you can do this using this myButton variable.
There is also custom function definition, myClkBtnFunction which is actually our custom event listener function.
But as you can see JavaScript has nice feature called chaining that enables writing same code shorter which can complicate understanding for beginners, but is of great time saver for more experienced developer.
Now lets expand our “web page” with another useful UI pattern.
<html>
<body>
<div><button id="btn">Click me!</button></div>
<script>
document.getElementById('btn').addEventListener('click', function () {
var myHiddenLayer = document.getElementById('hidden-layer');
myHiddenLayer.style.display = 'block';
});
</script>
<div id="hidden-layer" style="display:none;position:fixed;top:0;right:0;bottom:0;left:0;color:red;background-color:rgba(0,0,0,0.5);">THIS IS HIDDEN MESSAGE</div>
</body>
</html>In this short code we have hidden div element. What does mean hidden? It means element is in DOM but it’s not rendered on the screen because we have set display property(object variable) to ‘none’. But we can make it visible by changing display style to ‘block’ which is default display style for all elements. We added that function to click event of our button and now we have popup layer which you can observe on many websites in form of different “offers”, subscriptions, etc. Finally, to hide popup layer we could add another function and pass it to addEventListener but this time for overlay div element. The function would change style display property of the overlay div to ‘none’ and the div disappears from the screen again.
Well, you are JavaScript web developer now. Congratulations!