Welcome to the first Beginner’s JavaScript Tutorial and thank you for joining us! We will be releasing one or two new tutorials each month into this free series of coding lesson. So, let’s get started with the first question of What Is JavaScript?

If there are any topics you would like to see covered in our JS Lesson to help you learn coding better, please feel free to get in touch with us!

What is JavaScript?

JavaScript is what is called a client-side scripting language. It was originally designed to run functionality in the “client” – i.e. the browser or the program which is loading the web page. Originally it had a cousin called JScript but the version known as JavaScript became the primary platform which fuelled future development.

Unlike HTML or CSS, which are mark up languages, JavaScript is a programming language. This means you can build functions and interactive features using this language. For anyone who has done application development in the past, there is another language you can use which is ‘VBScript’. This harks back to a system called ‘Visual Basic’ – one of the early drag-and-drop software design applications which gained popular attention. But again, despite there being multiple options, JavaScript became the most popular due to the flexibility to design objects (things on your page) the way you want to.

JavaScript is mostly Cross-browser Compatible – so most scripts you use should work on most browsers. This should always be tested and there are sometimes differences in browsers. Where these occur in the course materials, we will point these out and also let you know how to ensure your scripts run the way you want regardles of the browser used.

A Non-Compiled Language

Some programming languages require you to compile them. That means turning the code you write into machine code in order for a computer or server to run your application. Commonly creating software for Windows or Mac require compilation to work. And in more modern times SASS (a development stemming from CSS) also requires compiling.

JavaScript does not need this. This can make your scripts take up quite large file sizes, but we will look at how to reduce your file sizes and improve website speed as we go through this course. But for now, just know that once you have written your code (which we will call scripts from now on) you can test it straight away!

JavaScript is not the same as Java!

Earlier in the year we had an enquiry through The Tutorial Centre enquiry form worried that Google Chrome were going to stop supporting JavaScript. The reality is that they were going to stop supporting Java Applets. Java and JavaScript are two completely different programming languages. Java can be used for anything from interactive elements on websites to powering a large proportion of mobile appl development.

Java is also a compiled programming language. And although the two things can ‘talk’ to each other, they exist independent of each other as well. It would be a brave browser to stop supporting JavaScript given that it is used pretty much everywhere from form validation, to dynamic web-based software to on-the-fly rearrangement of pages based on changes to screen size! JavaScript is really powerful.

But don’t get Java and JavaScript confused!

JavaScript Interacts with HTML and CSS Objects

JavaScript can be used to dynamically create page elements on its own, but also how you build your CSS and HTML can feed into how you program your scripts. Just a couple of examples

Grabbing a Page Element by Its ID
If you have a page element <header id="topOfPage"> you can then grab that in JavaScript:

document.getElementById('topOfPage')

For this reason it’s important to ensure IDs are unique and not repeated. You can also get tags which have the same CSS Classes. So always ensure your HTML5 and you CSS3 is structured carefully and consistently. That will help you build your scripts better. You can use multiple IDs but to make things easier on yourself, it’s best not do to.

Changing a CSS Attribute
In the same vein you can dynamically change any setting within your CSS by using JavaScript. So, say our ‘topOfPage’ had this in the CSS

#topOfPage{ background-color:#333333;color:#ffffff; }

You can change these within JavaScript using the style property:

1

This would switch the background colour with the text colour. But it means that although you set a ‘base layout’ and theme in your CSS, nothing is set in stone – which is why JavaScript is so powerful, flexible and dynamic.

JavaScript Can Interact with Server-side Scripts

Although originally designed to be client-side it has evolved to be able to process server-side scripts as well. This is often via AJAX (Asynchonous JavaScript And XML). This is how contact form can work without redirecting to a ‘thank you’ page, for example. It’s also how web apps can update themselves while keeping the same URL. This will be dealt with in the next course. For now, just understand that what you learn here will have an impact in how you build your websites or web-based applications.

JavaScript is genuinely that good!

What Browser Should I Use?

An important thing to realise is that older browsers may not support modern JavaScript. So whatever your preferred browser is make sure you’re always running the latest version. Some browsers such as Google Chrome and Mozilla Firefox sport an ‘auto-update’ function. For other browsers such as Internet Explorer (the browser which preceded Microsoft Edge) you may have to manually update.

So just make sure you’ve run the update before you start to code!

How to include JavaScript Files On Your Webpages

The last section in this introduction to JavaScript is looking at how you an include it on your web pages. As with CSS there are three main ways to include JavaScript:

Inline JavaScript & Event Handlers

The first way, which is for very short code snippets or for calling pre-set functions is inline JavaScript which uses a system called Event Handlers (we will go into more detail about these later). Here’s an example of an event handler:

<input type="button" value="Click Me" onClick="someFunction();">

The onClick waits for the user to click or press the button before something happens. Note that ‘click’ applies to touch-screen events as well as devices that use a mouse or a trackpad.

Adding Code in the <script> Tag

The next way you can put JavaScript into your pages is by using <script> </script> tag pairs. These are often found in the <head> section of web pages. However to speed up page load time, they may also be placed before </body>. We will cover this later because you do want your pages to load fast, but you have to be careful that you don’t accidentally break something in the process!

Using an External .js File

In the same way that you can use the LINK tag to pull in a CSS file, you can also create a .js file. You then update your <script> tag with an src attribute, giving the folder path to your new .js ‘library’:

<script type="text/javascript" src="/path/to/scripts/myscripts.js"></script>

The advantages of doing it this way are

• External files are downloaded and cached, helping the pages to load quicker.
• You only have one (or a few, maybe) files to update when changing your scripts, rather than every page.
• If you have page-specific functionality, you can include a few external files and break down your ‘library’ into smaller, quicker, components.

Initially this course will use the first and second method in order to show all examples on one page. But as your scripts and functions develop, feel free to pull them in via the src element!

TL;DR What Is JavaScript?

JavaScript is a multi-layered programming lanaguage which you can use to create dynamic and interactive features on your website. It can change and modify most things on your page, giving you complete freedom to do what you want to do on your page. It is really powerful and today you have taken the first step in harnessing this power!

Lesson 2:
Event Handlers in JavaScript >>

Recent JavaScript Tutorials

[lptw_recentposts layout=”grid-medium” post_type=”page” link_target=”self” fluid_images=”true” height=”300″ featured_height=”300″ min_height=”0″ space_hor=”10″ space_ver=”10″ columns=”3″ order=”DESC” orderby=”date” posts_per_page=”6″ post_offset=”0″ reverse_post_order=”false” exclude_current_post=”true” color_scheme=”dark” override_colors=”true” background_color=”#212121″ text_color=”#ffffff” excerpt_show=”true” excerpt_lenght=”25″ ignore_more_tag=”false” read_more_show=”true” read_more_inline=”true” read_more_content=”Read more →” show_date_before_title=”false” show_date=”true” show_time=”true” show_time_before=”false” show_subtitle=”false” date_format=”F j, Y” time_format=”g:i a” no_thumbnails=”hide”]

Spread the Word