MENU

An introduction to JavaScript

This is where my #BreakingJS journey begins and I’m equally excited and scared. So without further ado, blog post number 1 is an introduction to JS for those (including myself), who don’t really know what it’s role is in the development world.

If you are wandering what #BreakingJS is all about, check out the debut post here which explains what it is I’m doing.

JavaScript (JS for short) is a programming language that pops a little interactivity into your website. So you know all of those buttons you press when you submit a form? Those forms use JavaScript to gather and send information (data). Obviously it does heaps more than a functional button click. With JS you can do so much. From carousels and image galleries, all the way up to developing games and apps. It appears that the developer world is your oyster when you Break JS!

One thing before we continue:

In order to learn JS, you should already have knowledge of HTML, and if you have CSS too then that’s great. These three languages are important when developing websites and all work together to make your website look and work correctly. If you don’t have a working knowledge of HTML and CSS, then put JS on hold for now and tick those two languages off first.

Here is my analogy of how the three work together using the human face:

Introduction to JavaScript | PIXEL BOUTIQUE | Brekaing JS | #BreakingJS

HTML (The Face)

The content and structure of your face (website) and how it is laid out. It creates the position of your eyes, nose and lips (sections within your website that you can create using DIV’s etc).

Introduction to JavaScript | PIXEL BOUTIQUE | Brekaing JS | #BreakingJS

CSS (The Makeup)

This adds makeup (style) to your face (HTML) structure and generally makes it look pretty (or not), depending on how good you are at applying makeup.

Introduction to JavaScript | PIXEL BOUTIQUE | Brekaing JS | #BreakingJS

JavaScript (Facial Movements)

JS programs your face (website) so that you can speak, see + hear (submit forms, display interactive galleries, play games).

I hope this makes sense and you enjoyed my artwork 🙂

Including JS in your HTML

For HTML and JS to run side by side, we need to link the pair together. Just as you would need to do with your HTML and CSS. We insert the JS into our HTML document using the <script> tag. This can be done in two ways:

Internal script:

This is placed directly inside your HTML document between the opening <head> tag and the closing </head> tag.

<html>
  <head>
    <title>My Website Title</title>
    <link rel="stylesheet" type="text/css" href=".../style.css"> <!-- CSS External Link -->
    <script> <!-- Internal JS Script Code -->
      alert("Hello, world.");
    </script>
  </head>
  <body>
    <!-- HTML Content -->
    <!-- HTML Content -->
    <!-- HTML Content -->
  </body>
</html>

Adding a small snippet of JS script to your <head> tag in this way is ok but anything more would cause a lot of code bulk and course your website to slow down your page loading time, so just be careful how much you use this method.

External link:

This means that you create one document for all of your JS and link it the same way that you would an external .css file. Simply create a file and name it what you wish, and end it with the .js format. This then needs to be linked inside your HTML document, BEFORE the closing </body> tag at the bottom.

<html>
  <head>
    <title>My Website Title</title
    <link rel="stylesheet" type="text/css" href="=".../style.css"> <!-- CSS External Link -->
  </head>
  <body> 
    <!-- HTML Content -->
    <!-- HTML Content -->
    <!-- HTML Content -->
    <script type="text/javascript" src=".../myscript.js"></script> <!-- JS External Link -->
  </body>
</html>

We want our JS to load AFTER our HTML, so by placing our Script at the bottom of our document, we are allowing our HTML to load before our JS. This means that our page structure, content and CSS will load first giving our viewers something to look at whilst our script is invisibly loading afterwards.

If we place the script at the top of the page, the JS will load first, slowing down the loading of your HTML and CSS and resulting in what appears to be a slow loading page to the user.

Conclusion:

Tidy code and faster loading time has to be the clear winner here right? External linking JS files it is for me.

The JS Console

Most modern browsers these days have something called developer tools built in. Inside these “dev tools” should be something called the Console. My favourite browser for dev tools is Chrome, but which browser you choose is up to you. Have a look around at the various ones available and go with the one you find easiest to navigate or the most useful to use.

Accessing your dev tools via keyboard shortcuts:

  • Windows: F12 or Ctrl + Shift + I
  • Mac: Cmd + Option + I

An Introduction to JavaScript | Breaking JS | PIXEL BOUTIQUE | #BreakingJS

To enter the console, simply find the Console tab within your dev tools, or you can use the following shortcuts:

  • Windows: Ctrl + Shift + J
  • Mac: Cmd + Option + J

An Introduction to JavaScript | Breaking JS | PIXEL BOUTIQUE | #BreakingJS

The Console will help you with all of your testing and debugging needs when working with JS. It will flag up any errors that arise during the running of your code. It will tell you which file the incorrect code is in and what line number it sits on. Clicking that message will jump you straight to the error in question so that you can easily identify the source of your problem. Much quicker than scanning your code with bare eyes.

The console also responds to commands that you give it using the console.log method which will run and print any value that you give it to the Console panel. For example, if I write console.log(Hello World); this will print the following:

An Introduction to JavaScript | Breaking JS | PIXEL BOUTIQUE | #BreakingJS

So that’s JS, in a very small nutshell. If this has gone over your head at all, have another read. Print it off and make some notes for yourself. Writing things down in your own words is a brilliant way of taking knowledge in. I’m not very good at learning by reading, so I find that very useful.

Also, feel free to ask some questions, and a good practice if you don’t quite understand something is to just go ahead and “Google It”! I guarantee that someone else has asked the very same thing you are asking, so the answer will be there for sure.

What next?


Also published on Medium.

COMMENTS: 2

Leave a Comment!

You must be logged in to post a comment.