JavaScript is the programming language of the web, designed for the web to add behavior and interactivity to web pages. In this episode we’ll take a look at the very basics of the language. We’ll look at the core syntax of the language, where to place your JavaScript, what you can do with JavaScript, and what tools you will want to make use of in your JavaScript learning and programming. JavaScript used to be the frowned upon toy language of the world, but things have changed! Today with modern JavaScript frameworks and best practices, JavaScript is a bona fide enterprise level tool being put to use by the very most humble websites on up to super complex applications from the likes of the Google and Yahoo engineering teams.
Platform Agnostic
Any time we work with a programming language, we have a sense of the development environment in use. For example if your application is an iOS app, your development environment probably consists of the Objective C language, being written on an Apple Computer, using the Xcode IDE. Contrast this with .NET application that would be aligned with the C# language, on a Windows PC, using the Visual Studio IDE. JavaScript on the other hand is not really tied to a platform environment. If you want notepad.exe to be your IDE of choice, you can do that!
What Should I Write JavaScript With?
Since JavaScript is so platform independent, you can use any of the wonderful IDE’s available to you today. Some favorites include Eclipse, VIM, Aptana, Dreamweaver, Brackets, Sublime Text, and more. Like we mentioned earlier, if you are more of the no frills type of developer, you can keep it as simple as using something like notepad to create your JavaScript files. Whatever feels comfortable to you. Personally, I do enjoy some amount of syntax highlighting and code beautification from my IDE, so I will usually use one of the more advanced tools to provide this function.
Powerful Browser Tools
There are a large number of browsers, but for all intents and purposes, Microsoft Explorer, Mozilla Firefox, Google Chrome, and Apple’s Safari are the main ones to focus on. To focus this even further, most web developers make use of Google Chrome and it’s developer tools, or Mozilla Firefox and the excellent Firebug extension for writing and testing the JavaScript they will make use of. For this tutorial we’ll be making heavy use of Mozilla Firefox and the Firebug extension, so if you’d like to follow along, by all means get yourself a copy of each at those links if you do not already have them installed!
Benefits of Firebug
The benefits of Firebug are many, here are some of the key features that are really helpful.
Easy to Launch and Use
Firebug maintains a simple icon in the browser once it is installed. You can easily enable or disable the service, arrange the console to your liking, and configure which websites you want it to run for.
HTML Inspection and Editing
Firebug makes it easy to inspect the HTML source of a webpage, or even edit it live and on the fly. The DOM and webpage will update in the browser in real time as you make changes. This is a super slick and valuable testing feature.
Debug CSS Designs
It’s easy to see exactly what CSS is affecting which elements on the webpage with Firebug. Being able to isolate CSS in this way will save you hours of time and frustration.
JavaScript Debug and Profiling
In firebug you can set breakpoints and step through the JavaScript code in real time. It makes debugging and troubleshooting much easier, as it allows you a window into the actual workings of the code. The profiler will narrow down any spots in the script that might be slowing your app down.
Simple JavaScript Testing
This is my favorite feature of Firebug. If you’re used to programming in PHP or another language, you’ll know that many times in testing, it is a tiring process of edit file, save file, refresh browser, observe result. Wash, rinse, repeat. With the Firebug command line, we can simply type some lines of JavaScript and then click, Run. Poof! The JavaScript executes, and we smile 🙂
Here is our first line of JavaScript and we can run it right in the Firebug console with ease!
alert('Getting Started With Javascript Programming!');
Web Concepts
JavaScript is often referred to as one of the 3 core components of web pages.
- HTML The HTML is the markup language of the web page which envelopes our content. HTML files may be hand written, or dynamically created via a server side programming language such as PHP. Worth noting is that JavaScript can work on the server as well in the form of node.js, however that will be for another tutorial.
- CSS CSS is the design language of our web pages. When we have the markup in place, there needs to be a way to add some style to that markup, lest we have a majorly bland design. Cascading Style Sheets are what do this for us.
- JavaScript JavaScript is what we’ll be focusing on here. It is what gives the ability to add interactivity and behavior to a web page. The beginning concepts of JavaScript are very easy to understand, but as we get into the more advanced features of the language such as Object Prototypes and such, we’ll see the mind bending abilities of JavaScript.
JavaScript is not a General Purpose Language
Other languages like C++, Java, C, or C#, are more general purpose programming languages that allow full access to memory and file systems. JavaScript is also not Java, in fact it’s about as opposite from Java as it could be! At the time of ECMAScripts creation, Java had a lot of momentum, so it is theorized that JavaScript borrowed its name from this craze for Java. JavaScript is designed and used inside the Web Browser. That is where it works best and excels.
In Coming lessons we’ll start digging into the syntax of the language and begin creating some simple programs. We’ll take a look at operators, structure, loops, functions, variables, conditionals, comments, and more.
