Category Archives: JavaScript

Programming for non-programmers – JavaScript practically

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:

firebug-img

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.

Why the fuck JavaScript?

I was a PHP programmer and I liked PHP frameworks and MySQL. It was before I knew Node.js and MongoDB. JavaScript is a programming language in which you can program server side applications (Node.js), client side applications, mobile applications (cordova/phonegap), windows 8 applications and maybe more. IMO JavaScript is universal language. I love it.

I will focus on web applications. I’m sure you made some PHP application and tried to write some JavaScript which would load some dynamic data (AJAX maybe). Yeah, now imagine you write some code in PHP for a long time and then switch to JavaScript. Different syntax, right? You are confused with JavaScript syntax because you spent too much time writing PHP code. You don’t know how to concatenate string in JavaScript, because you think you are still in PHP and you try to do things in PHP way. WRONG! What if we could write whole application in JavaScript and beware this context switching? We CAN! Node.js is the way. There is a lot of frameworks based on Node.js (ExpressJS, SailsJS, GeddyJS, MeteorJS,…).

The advantage of pure JavaScript applications is you just need to know ONE language. No more context switching between PHP/JavaScript or whatever/JavaScript. Another advantage is that you can share objects, functions and variables between server and client. Write once, use everywhere.

Nowadays developers can be divided into backend and frontend developers. But with Node.js they can be frontend and backend developers simultaneously. It sounds easy. It is easy. Just use JavaScript on the server and you will be happy.