Intro to Javascript and JQuery: hello world!

Ok, so by now you have a pretty solid grasp of HTML and CSS, using them to define how a web site looks. However, there is another aspect we didn’t touch on so far: specifying how a web site should behave.

For this we introduce a language to tell our browser what to do and when to do it: JavaScript.

Here are some of the things the language Javascript is capable of:

  • Detecting when a user clicks something, or hovers his mouse over something.
  • Changing how things look with CSS, after the page has already loaded (for example, when the user clicks something!)
  • Moving HTML elements around on the page, showing and hiding them.
  • Show those little message boxes with an ‘ok’ and ‘cancel’ on them. Such a box is called an alert.
  • Make the browser load new content online and show it in the page after it is already fully loaded (this is called ‘AJAX’).

Cool huh? Javascript is amazingly powerful, and used all over the place. Actually, it’s the most used language in the world.

So what is jQuery (which you’ll often encounter in the context of javascript)? jQuery is a Javascript libraryi.e. a set of javascript code that makes it easier for developers to build something in Javascript. And, well, many have! There are zillions of so called ‘jQuery plugins’ out there, that you can just download for free, include in your site to make it do something cool.

Javascript can be specified within the page or in a separate file

… So it’s very analogous to CSS! Javascript within the HTML can be specified within <script> tags. So let’s have a ‘hello world’ in Javascript, by inserting this somewhere in your HTML page:

<script>
//this is a JS comment which will be ignored by the browser
alert('Hello world! This alert is triggered using JavaScript within the HTML code!');
</script>

Or you can write it in a separate .js file and link to that.

First, write the following one line in a text editor, and save it as script.js in the same folder as your html file:

alert('Hello world! This is some code in a separate .js file!');

(no <script> tags in the external file, that’s right!). Now link to that file putting the following line between the <head></head> tags:

<script src="script.js"></script>

Now, if you save all that, and did things well, opening your page in the browser should have it show something like this dialog:

Screen Shot 2014-01-26 at 17.53.46

 

I’m sure you already noticed some things about JavaScript just from that code, for example that Javascript lines end with semicolons (;). Good on you!

Use jQuery to add cool new functionality to your page

In this phase, we will not spend time learning how to write lots of Javascript ourselves. That’s because your energy in learning ‘real programming’ is better spent in learning PHP, which will be introduced shortly.

But you need to understand a bit about Javascript and what it is, enough to take advantage of the thousands of cool jQuery plugins to boost your page, and to not feel completely powerless if something is going wrong with your page that may be related to JS.

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s