The intention of this guide is to provide a simple introduction to programming with JavaScript to absolute beginners. If you have used the language before and have a reasonable understanding of internet technologies this is probably not for you.
Don't be put off if you don't understand absolutely everything (anything, even), perseverance is rewarded. Most of the terms you read early on will be mentioned frequently, which given the context will help clarification.
The guide focuses on the functional aspect of JavaScript, ignoring (for now) the various Object-Oriented features.
See the resources page for more information on some of the basic principles of JavaScript and the web. It is recommended that you take the JavaScript as well as HTML track on Codecademy.
What we're covering is front-end.
Front-end = the browser (e.g. Chrome, FireFox, Safari etc) do the work. So, if you have something very processor-intensive (e.g. lots of complex calculations) and your host machine is slow, then the processing may take some time, slowing your computer down. When you see an animation on a web page, that is typically the front-end. Like this.
Back-end = the code runs on a server/ collection of servers. E.g. this search for "Spongebob" on Amazon: https://www.amazon.co.uk/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=spongebob
A simple analogy for the distinction between front-end and back-end processing is maths. You are asked to divide 9 by 7 to 5 decimal places.
Front-end processing would be you doing the long division to work out the answer. E.g. you do all the hard work.
Back-end processing would be you using a calculator to do the hard work. Presuming you are OK at maths, you should have the same result, but one will have taken considerably longer than the other and will have prevented you from doing other things.
A technology called Node.js allows you to run JavaScript on a server, meaning that Amazon could have been written using Node.js (but it probably wasn't).
When running JavaScript in a browser, you'll view a page which is in HTML, containing CSS and, of course, JavaScript. Like this:
HTML
|
| What it does | |
|---|---|
| HTML | contains the content of the page you are viewing, including any structures like tables, lists etc. It's not a programming language, it's a markup language |
| CSS | (Cascading Style Sheets) is a set of rules that define how the HTML looks |
| JavaScript | A scripting language and the reason you are here! |
Here's some sample HTML. Note: <!-- and --> are start and end tags for comments.
<html>
<head>
<script type="text/javascript" src="/js/main.js"></script> <!-- this is a link to the JavaScript -->
<link rel="stylesheet" href="/css/main.css" /> <!-- this is a link to the CSS -->
</head>
<body>
<script type="text/javascript"> <!-- this is JavaScript embedded in the page -->
var count = 1;
</script>
<style type="text/css"> <!-- this is CSS embedded in the page -->
P {
font-weight: bold;
}
</style>
<p>This is the main page</p>
</body>
</html>You are currently viewing a web page. Right-click it and select the View Source option. That will show you the HTML, CSS and JavaScript needed to make this page.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent