Pivoting content: arts and crafts, electronics, technology, and a little dose of everything else! Every Monday and Thursday (hopefully)!



Javascript - The Only Introduction

User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active

Javascript has come a long way from being just a server-side language for simple markup on a website; to now possessing the ability to be used as a desktop application, back-end language, and even mobile. This introduction is for javascript.

What is Javascript:

Java and Javascript are not the same language. Java was a language that was meant to be multi-platform across different systems, and Javascript is meant for client-side scripting. However, javascript has an amazing community of developers and the language has evolved so fast over the past years! Now with Typescript (by Microsoft), a super-set language based on top of Javascript, we now of object-oriented programming with strong data-types that developers and engineers normally see in more robust languages.

Would I suggest learning Javascript first?

I would suggest that you learn or more traditional programming language first because Javascript has some unconventional ways of handling things compared to lots of other languages. If you are looking for a language that could be similar to Javascript maybe you can try looking at Typescript or CoffeeScript (which are supersets of Javascript but more enhanced and strict).

What are some ways to try Javascript:

There are many sites and a plethora of tutorials out there that already teach the basics of Javascript. What I'm doing is creating an easier way for you to find the best material and follow material I have so that you can get the most out of learning. These sites have nice features for writing and debugging javascript code:





I personally prefer plnkr because you can add some dependencies or packages, which are libraries from well-known communities, that you can write code and test.

Best Resources Online:

These are some of the best and most comprehensive places online, to learn about Javascript.




For This Tutorial:

For this tutorial I have written some code so that you can read and learn the basics of Javascript:


Or you can just look at this embed:


Now, I will explain each part of the code in brief and easy to understand sentences. I know you don't want to waste time on some idle chat so let's start in the sections below.

Opening Developer Console on Browser:

I'm using Chrome and FireFox, you can right-click with your mouse and open the console by inspect element or through the browser settings in more tools, then developer console.

For the code above that, we will refer to, I will refer to the code as 'the practice code'. In the practice code, let us start off with the index.html file. In there you can see the files that I have included as well as with a portion with inline Javascript. Inline Javascript is denoted with type=, and then the HTML script tag, in which I log a simple message to the console. You do not even have to include or write Javascript near the top of your file. Actually, it's much more efficient to load all your Javascript before the closing body tag at the end of the index.html or HTML page. Why? So that the user gets to see something on the page before having to compile and execute your code.

So if you run the code and have your developer console open, you should see something like this:



I know, I intentionally didn't put it in order so that you can practice how to read which line of code is being executed where. I also left a good amount of comments, which is denoted by two forwards slashes, //, you can also do multi-line comments with /** **/ (I believe that's the way). 

So one special thing about Javascript is that it doesn't have data types (like primitive data types) such as char, int, boolean, string, float, etc. So you declare variables with the var keyword and the compiler will interpret the code properly. You can declare anything to your variable and log it to the console. So you do not have to worry about errors because Javascript tries its very best to run your code no matter what, even if you want an integer to be passed, and you pass a string, Javascript will not return an error and execute it still. That phenomenon compared to other languages is awkward especially when you have logical errors in your code.

One special thing Javascript can do is called hoisting, as you can declare a variable later and still use it at the beginning or before its declaration, that's because Javascript gets scanned and then compiled to run. The code isn't executed line by line but as a whole file. Some other languages would compile line by line, but not Javascript. Moving onto things like conditional expressions, structural, and control statements, we still have the familiar if, for, while, and switch case definitions to use. Along with that, declaring objects and arrays is so much simpler. In the practice code, I declared an object called Anime and populated with some values. You can easily access the values in the object, as such and use logic operations for any test you want. You may also put the objects you made and any other variable into the array and Javascript will not complain at all. However, it is good practice to have similar data of what you expect to be in the array, because you may want to run some logical arithmetic or display it in a useful manner.

Another special thing about Javascript is null, undefined, and NaN (not a number). In the practice code, you can see how they are treated in the file, test.js near the bottom. Isn't it weird how the output of that code is what it is? Well, the way Javascript thinks is different, and it is that way because of the actual definition of null, undefined, and NaN. 

In the practice code, you can also see that we can include mixed variables together and print them out, you will also see the use of precedence, which is certain characters are more important than others, like PEMDAS in math. In the practice code, in the file script.js, within our function call, which is defined by declaring it as a function, naming it, and allowing parameters or not, which is similar to math like f(x), you can see that without the parentheses we output an undesired answer in the console when adding the two numbers together. That's because the string and number get concatenated together instead of doing the math operation for addition.

I forgot to mention and do an example of a while loop, but you can use the resources above for that. 

Javascript is a much more loose programming language with not-so-strict syntax, but it shouldn't be the first language you learn in my opinion if you are looking for be a software engineer, but if you want to be a front-end developer it is a must.

Thank You:

Thank you for reading this brief tutorial on Javascript have a fantastic day!


Comments powered by CComment