What is Javascript ? Learn the easy way to create interactive websites
Javascript is the brains behind the interactive websites. Whether it is the animation or the changing HTML elements, javascript is there. Javascript is the programming language for the web. It can hide or show HTML elements. It can also calculate, manipulate and validate data on your website.
1. Why should we learn it ?
Javascript is one of the core languages for website development. We have already seen how HTML is used to structure the website, and CSS to style the webpages. Javascript or JS is used to create interactive webpages, from form validation, to animation can be done in JS.
Javascript is very popular programming language these days. It can be used to create front-end of the websites ( using react.js), but it can also be used to develop back-ends for the websites, using Node.js or other backend Javascript runtime environments.
Another reason to learn Javascript is that it comes built-in with many browers, so you don’t really need to install any additional libraries, for it to work.
2. What is Javascript used for ?
Javascript is a client scripting language used to create dynamic / interactive websites. Using JS, we can create beautiful animations, using only js or we can use animation libraries, such as GSAP, which makes it really easy to add animation in our websites, using only 2-3 lines of code.
3. What are the top 3 Javascript frameworks in 2022 ?
The top 3 Javascript frameworks that will continue to dominate are :
- React
- Angular
- Vue
React
React is a framework to create UI using Js. It is a component based framework, where you define a component once, and use it anywhere you want. There is also no restriction on how many times you want to use it.
If you are interested in developing android apps or IOS apps using react, well worry not, because using react native, you can create mobile apps, without having to choose any other programming language.
Angular
Angular is another javascript framework that is loved by many. Using angular, you can have a single code base to built apps for different platforms, such as, web, mobile web, native mobile and native desktop.
Vue
Vue is a progressive framework, meaning you can start with the core vue library, and then add components that you would like in your website, such as, Vue Router, State management and so on.
Looking at the Google trends for Javascript frameworks, React continues to dominate in the 2022, so it is the best time to learn Javascript and react framework along with it.
4. Javascript Syntax
Script Tag
Javascript can be written inide HTML, but within separate <script> tags. You can place your script tags anywhere on your webpage, but it is recommended to use within the <head> tag.
<script type = "text/javascript">
Some Javascript Code
</script>First Javascript Code
To print out ” Hello World! ” using Javascript, we do the following :
<html>
<body>
<script language = "javascript" type = "text/javascript">
document.write("Hello World!")
</script>
</body>
</html>This will write Hello World! on your webpage.
Variables
Variable are used for storing values. Think of them as a container for each of your values. You can name them and use them as you wish.
Variables are defined :
- Using
var
Variables are defines using var before the variable name, e.g.
var age = 15;- Using
let
let is another way to define a variable. You can change your values defined using let
let marks_obtained = 98;- Using
const
Const is also used to define a variable. But as the name suggests, you cannot change the values in the const variables, once it is defined. You can, however, delete that declaration and define a new one, if you need to.
const price_of_bag = 65;What are the different Primitive Data Types?
Think of datatypes as containers to hold data. There are different datatypes for different needs, and javascript is no different. Javascript constitutes of following primitive datatypes :
- The String : The string datatype is used to represent sequence of characters. To create a string variable you only need to wrap the ‘sequence of characters’ into either ‘single quote’ or a “double quote”.
var name = 'xyz'
var tallest = "False"- Numbers : As the name suggests, the number datatype is used to represent numbers. The numbers can be both positive or negative.
var myage = 27
var number_of_books = 4- Boolean : Boolean datatypes can only hold true / false, Yes / No. These are mostly used to check state of something. Like they can be used in logging-in to website. Once a person log-in to the website, the Boolean variable, is-login can then be set to true, so then if he accidently closed down his tab, and open the website again, he won’t have to log-in again, just because that Boolean variable was set to true.
- The Undefined : The undefined datatype only contains a special ‘undefined ‘ value. If you define a variable, but a value is not assigned to it yet, it becomes an Undefined Variable.
5. How to do animations in Javascript ?
Who doesn’t want animations on its webpages ? We all want animations, but writing animation code does takes a lot of time to write, and there are few tweaks here and there, and it’s just too tiring.
We can create some basic animations within CSS (Cascading Style sheet), such as ‘Toggling’ effect, but if you need complex animations, such as bounce, fade, etc., it’s better to use Javascript animation libraries. There are multiple Javascript libraries out there, but I am going to use a simple, yet powerful javascript library, named as GSAP.
What is GSAP ?
GSAP allows you to make your animation workflow faster and easier. It consists of small sized Javascript files that helps to create wonderful looking animations, that are compatible across all major browsers, such as Chrome, Edge, and Opera to name the few.
How to use GSAP ?
Using GSAP is straight forward. You just name the item you want to animation, give it some properties, such that when we load the webpage, our logo comes from left side to the middle of the webpage. To do that, you simple need to do the following :
gsap.to("#logo",{duration:1, x:800px});When we will refresh our page, the logo will come from far left hand side to 800pixels towards the middle of the webpage.
Similarly, if you need to add multiple animations, we can accomplish that using GSAP’s timeline. Timeline allows you to animate different parts of your logo, so that it looking appealing. For that, you can write as :
const t1 = gsap.timeline();
t1.to(".circles",{rotation:180,opacity:1, stagger:0.2});
t1.to(".text",{duration:1,scale:1,opacity:1}The above code will have rotation in the logo’s circles, and after there animation cycle is executed, it will activate the text component, and it will render itself.
How to import GSAP ?
In order to use GSAP in your project, you need to import it. The best and the easiest method is to use a CDN (Content Delivery Network). All you need to do, is to copy the below script, paste at the end of the body tag and you are good to go.
** Note : The GSAP version maybe different that than mentioned one.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>If you need to know more about the GSAP animations, you can go over to GSAP website, and there you will find lots of examples. Don’t worry if you are a beginner, you will find their examples really easy and straight forward for your own projects.
6. Conclusion
Javascript is a fun language, with huge job market, for its front-end frameworks, such as React and Vue. But that doesn’t mean one should be overwhelmed. Get your Basics cleared first before moving on to complex frameworks.
One thought on “What is Javascript ? Learn the easy way to create interactive websites”