If you don’t like theory (like me), you will enjoy JavaScript practically. And you will learn to program faster by doing practical things than reading tons of theory.
If you have Google Chrome, great, just press key F12. If you have Firefox, install Firebug. If you have another browser, download Chrome or Firefox. If you are done, press key F12. Developers console will show up:
Write “Hello” in your console (with quotation marks) and press enter. You can write mathematical operations 5 + 2 – 3, 3 * 4, 6 / 2. Try one longer example: 1 + 2 * 3 / 6 – 4. Order of operations is the same as you learned at elementary school. Also, minus minus gives plus: -1 – -5.
Define a variable named firstname (in console):
var firstname = 'Tom';
To give a value from the variable, type variable name:
firstname // "Tom"
You have probably seen this annoying window:
alert('Hello');
Funny, right? You can write more alerts:
alert('Hello');alert('Welcome to JavaScript world!');
You can write any JavaScript command in developers console. But how to create real script which you can send to your friend? Create a file named index.html with this content:
<script>
alert('Hello, I am Script. JavaScript.');
</script>
Open this file in your browser. If you can’t open this file by double clicking, click right mouse button on this file, choose from context menu “Open with” and choose Firefox or Chrome. Everything between <script> and </script> is considered as a script. Try to write in your script:
console.log('Hello, this will show up in your console');
console.log('2 + 4 = ', 2 + 4);
Press F5 (refresh) and you will see the result in your console. You can turn on/off your console by pressing F12. After every change in your HTML file you need to refresh your browser. If you want to write something in HTML file in JavaScript, use function document.write:
document.write('Hello, this will show up in your HTML document');
document.write('2 + 4 = ', 2 + 4);
Ops, everything is on one line. Add between lines HTML tag <br /> which will add new line:
document.write('Hello, this will show up in your HTML document');
document.write('<br />');
document.write('2 + 4 = ', 2 + 4);
Ok, we have learned to write into HTML document in JavaScript. Now we will write a script which was my first “useful” script:
for (var i = 1; i <= 30; i++) {
document.write('<p style="font-size: ' + i + 'px;">Hello</p>');
}
In example above, there is some HTML and CSS. If you want to build JavaScript applications you will have to learn HTML and CSS. What does the script above do? We simply use for loop and write 30x Hello. We also set font size based on value of i variable (1 – 30). Try to scroll your browser. Nice, right?
Where is JavaScript used?
Everywhere. Really. Facebook uses JavaScript, Google uses JavaScript, everyone uses JavaScript. More info about where and why JavaScript is used would be for another article. In this article, I will show you what we can build with JavaScript, HTML and CSS:
What next?
If you want to learn more about programming web applications, you have to learn JavaScript (properly), HTML and CSS. And you will have to learn to use Google for searching information. You will need it.
You can learn more about JavaScript on w3schools. You will also find learning resources for HTML and CSS there.
The best way to learn to code is by reading and understanding theory and doing exercises. Try it on CoderMania.
You can also try Codecademy.
Learning through play. You can play CodeCombat game, learn to program and algorithmically think. I have finished a few levels and I enjoyed it. The game makes you think and it’s fun at once.