JavaScript, jQuery, TypeScript: Introduction

Background

I write for a number of reasons:

1. Solidify the things I am learning
2. Force myself to look at things more closely / question the knowledge I am gaining
3. Create a historical record of what I am learning
4. Share information I've gathered with others in an attempt to create community through learning tech

I recently had a need to learn TypeScript and it pushed me backwards toward learning/remembering JavaScript so I thought it might be nice to pull the three technologies of JavaScript, jQuery and TypeScript together into one place.

If this sounds interesting to you, I hope you'll continue reading my posts/chapters as I attempt to create an Engineer's Notebook of sorts.

JavaScript, JQuery, TypeScript

This book is a quick introduction to pure JavaScript, jQuery and TypeScript.

It will be a type of “engineer’s notebook” focusing on the three languages from the standpoint of the practicing developer who needs to learn the foundational parts of the languages that she will use most often. This book will not cover every topic in complete detail. Instead, it will serve as a place to start for many topics while other more interesting topics (author’s opinion) will be covered more thoroughly.

There are a few good reasons to learn all three of these languages. And yes, many of those reasons are simply related to the fact that you can’t really escape JavaScript. But I’m not just a JavaScript Fanboy. I don’t think JavaScript should be used everywhere. But, I don’t believe it shouldn’t be used anywhere either. I like to use it as I might use a hammer. The perfect tool to hammer some nails into board. But a hammer is not the right tool for those times when I have nuts and bolts which will be used to connect two pieces of metal. Hammers do not work everywhere. Neither does JavaScript.

I think you should learn all three of these languages because:

1. they are all related and
2. they are surging in use and popularity
3. they are used as inherent parts of many JavaScript frameworks

For example, TypeScript and jQuery are used in AngularJS. jQuery is used in Bootstrap and too many other places to count.

You should learn pure JavaScript because understanding it will help you:

1. Understand what is really going on inside jQuery and TypeScript:
   1. jQuery is written in pure JavaScript. jQuery solves a number of challenges more elegantly than code you will encounter in pure JavaScript so understanding pure JavaScript will help you understand what jQuery is really doing.
   2. TypeScript compiles (transpiles) to pure JavaScript and again solves some problems for you that are more easily understood when you understand the challenges that pure JavaScript creates.

You should learn jQuery because it simplifies a lot of the work you will do in pure JavaScript. The jQuery API is far easier to use than the JavaScript library when manipulating the DOM (Document Object Model of HTML). The jQuery API “just works” in every major browser so you won’t have the worries that you’ll do something that works in only one or two browsers. This is not always true for pure JavaScript because various browser versions do implement JavaScript in some subtle and different ways.

For example, Microsoft Edge uses the Chakra (JScript engine) to run JavaScript. JScript is Microsoft’s name for the script language the rest of us refer to as JavaScript. Both JavaScript and JScript are actually versions of ECMAScript.

While Google Chrome uses the V8 (JavaScript engine) to run JavaScript.

You should learn TypeScript because it makes creating classes in JavaScript a lot easier. Your code will be cleaner and more organized. Plus, TypeScript is beginning to take over. It may well be that in five years, developers look at pure JavaScript developers the same way we now look at Assembly language developers. How do we look at Assembly language developers? Very critically. :)

What Will This Book Cover

• Browsers (Google Chrome, Microsoft Edge, Mozilla FireFox, OSF Opera, Apple Safari)... that’s right, I didn’t even mention Internet Explorer.
• Text Editors (Possible choices - Notepad++ or Atom). I’m ignoring many possibilities here
• JavaScript types
• JavaScript functions, classes and scope
• JavaScript DOM manipulation
• Challenges of pure JavaScript
• Installing / Referencing jQuery (CDN)
• jQuery selectors
• TypeScript Compiler (Installation and Running)

What You Need

A computer running one (or more) of the following browsers:

• Mozilla FireFox
• Google Chrome
• Microsoft Edge
• Apple Safari
• Opera Software Opera
• Text Editor

I’ve examined a couple of text editors and I’ll talk a bit more about this in the next chapter. I also tried the Visual Studio Code editor and wasn’t really impressed. I’d rather just use the Atom editor because it is a bit more intuitive to use. Much of my work will be done in Notepad++.

If you already have a favorite text editor, you can use it with no problem.

Debugging JavaScript

One of the major problems/challenges with JavaScript is that there isn’t a great IDE (Integrated Development Environment (Editor which includes tools to do all your work, including debugging).

Since the browser is the run-time environment for JavaScript code (notwithstanding Node.js), it is also the place to debug JavaScript. Browsers offer much better debugging functionality than they did in the past, but they’re still not nearly as nice as debugging C# code in Visual Studio. Much of our debugging will be done via writing logs to the browser’s console (much more later).

What Do You Need To Know To Use This Book?

You don’t have to have previous programming experience to use this book, but it will help.

A basic understanding of HTML will help but it isn’t completely necessary either since I will explain some of it as it relates to JavaScript. I will move quickly over much of the HTML details but I am sure you can learn what you need as you go. Resources like w3schools.com will be really helpful.

There are some basic things that you should know though. You should know how to use web browser, download software and install it. You must know how to move around in the file system using file explorer. You’ll need to know how to do those things because I won’t explain those as we go and if you don’t know how to move around in the file system, it is going to be difficult for you to find the JavaScript files we create and edit.

What Will This Book Do For You?

It will provide a foundation of JavaScript, jQuery and TypeScript fundamentals so you can go further with JavaScript technologies. For example, after you complete this book, you will find it far easier to learn Node.js.

That’s all you need so let’s jump in and start learning some pure JavaScript.

CodeProject