Skip to main content

JavaScript Basics - Technoob Technology

Javascript is a Simple but very powerful programming language which was built with the evolution of technology. Javascript is used to build web pages, process data and as well as to create various applications. (mobile apps, desktop apps, games etc.) 




Topics we gonna cover


  • basic syntax
  • variables and operators
  • How to build a  simple calculator


.

Basic  Syntax

Javascript's basic syntax is very easy. Technology has driven hard programming languages into easy and simple languages. If you can understand the fundamentals you can keep learning this easily. It starts with the <script>  tag and ends with the </script> tag. All the codes go inside these tags. 

Adding javascript to HTML pages is very easy. There are two different ways you could do that.


      01)Within the head tags

Adding JS within the head tags is easy. What you have to do is simply opening the script tags within the <head></head> tags. Add your code there and the code will execute. 

  <script lanuage="javascript" type="text/javscript"> </script>

is the correct way of adding JS inside the head tags.



      02)External Javascript

Adding the JS code inside the head tags is easy. But when you get familiar with Javascript and you type so many code lines, it will be so difficult to find the code lines and fix errors. In this case, you can use external javascript.


javascript technoob technology


write your JS code in a text editor and save the file in .js extension
Simply add this code line in head tags.

  <script src="filename.js"></script>

NOTE: you have to include the path to the .js file if it is located in another folder. 

TIP: Use various .js files for various functions. This will make it easy to fix bugs and rebuild codes.



Writing in the HTML document


We use ' document.write ' to write something inside the HTML page.

  <script>
  document.write("Hello world");
  </script>


javascript technoob technology

The output of the code

javascript technoob technology
  The symbol ";" is necessary after each code line. This helps the script to understand how to execute the code and if you forget to add this symbol it could lead to so many problems. 


As in every other programming language, you can add comments in Javascript.
For a single line comment, you can use ' // 'at the beginning of the line.

  //This is a single line comment

For a multiline comment use ' /* ' at the beginning of the comment and ' */ ' at the end of the line.

  /* This is a multiline comment */

You can add comments in anywhere you want and JS skips reading comments when executed.


javascript technoob technology






variables and operators


Variables and Operators are used to do different kind of arithmetic solutions and to do changes in HTML document.

Variables can be simply explained as memory packets. When you assign something as a variable, it is stored in the RAM. Assigning values to variables is easy.

  var name = John;

This code simply stores a variable called name and assigns it value as John.

  var name = John;
  var age = 25;
  var height = 125.6;
  var married = true;

All of these are variables and there are different kind of values which can be assigned. String, Boolean, and integers are some of them. You can assign a name or a sentence as a string. A boolean value can be only assigned as true or false. 
       
            The most valuable thing in Javascript is it automatically understands the data type and assigns it. If you assign a name it stores it as a string and if you assign a number, it stores it as an integer.


javascript technoob technology


var string = "Hello! Welcome!";
document.write(string);

The output of the code


javascript technoob technology


This code will print 'Hello! Welcome!' into the HTML page.
NOTE: Javascript is a case-sensitive language which means String and string are two different variables.



Operators

There are some operators which are used to do match calculations in Javascript. 

Math operators

+         Addition
-         Substraction
*   Multiplication
/ Division
++         Imcrement
-- Decrement


Assignment Operators

operator     Example    Equal to
=     x=y     x=y
+=     x+=y     x=x+y
-=     x-=y     x=x-y
/=     x/=y     x=x/y
*=     x*=y     x=x*y

Comparison Operators

Operator   Description


==   equal to
!=   not equal
>   greater than
=>   greater than or equal to
<   less than
=<         less than or equal to



Building a simple calculator using these operators and variables is easy. You can simply do this by using variables, math operators, assignment operators, and document.write command.

<script>

//Addition
var a = 1;
var b = 2;
//enter the numbers you want.
var sum = a + b;
document.write(sum);

//multiplication
var c = 1;
var b = 2;
//enter the numbers you want.
var sum1 = c * b;
document.write(sum1);

//substraction
var e = 1;
var f = 2;
//enter the numbers you want.
var sum2 = e - f;
document.write(sum2);

</script>


javascript technoob technology

The output of the code

javascript technoob technology

HINT: you can use the + symbol with double qoutes to add text with the document.write commands

example: document.write(sum + " ,");
                //if the sum = 20 this code outputs 20 ,


As this, you can build a simple calculator using these codes.

HINT: Try using alert command instead of document.write. This will give the output as an alert window.

example:         sum = 20;
               alert(sum);


javascript technoob technology

Hope this guide could help you in understanding the basics of Javascript. Leave a suggestion or a comment to add or improve the user experience.


Popular Articles

How to speed up computer
Extend mobiles battery life



Comments

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Amazing post and this information is very useful for me. I like this post. I really enjoyed reading your post. Thank you so much for sharing this post. Visit To Know More: Rajendra Geda

    ReplyDelete

Post a Comment

Popular posts from this blog

How to make a first person character controller - Unity

A first-person character controller script is the starting point of any fps shooter game. Even new Unity game developers tend to write their own fps controller script before learning anything else as it is challenging and very exciting. In this article, we gonna create two simple fps controllers from scratch and will guide you step by step on how it works. First, let's understand the basic concept of an fps controller. You should have a rotating camera that rotates in the x-axis to look up and down and the character should rotate on the y-axis to look around. There are two ways to create an fps controller in the Unity Engine.  Using Character controller component Using the RigidBody component Both have different advantages and disadvantages when using them. It depends on your game to select the best fps controller according to your needs.  Character controller based fps controller Pros: Is grounded check is built-in Has its own methods to move the chara

Unity Get Post web requests - Technoob Technology

Web requests in unity are super easy to use. We gonna use the UnityWebRequest class as the WWW class is deprecated now. UnityWebRequest class can be used for both Get and Post methods. The 'UnityEngine.Networking' namespace is required to work with UnityWebRequests.  This tutorial is made with some simple UI elements. First Let's see how the GET method works. 01. UnityWebRequest.GET We use this method to receive data from the server as normal get requests. Using coroutines in web requests is mandatory as we have to wait until the download is complete before showing the results, and the coroutines make this much easier. A simple button calls the method and a text element will show the result. The script contains a reference to the text element and the string URL of your PHP file.  When the button is pressed the button executes the ButtonGetData method and that method simply starts the GetData coroutine. We use the using keyword as this data

How to make an Advanced Audio Manager for Unity - Technoob Technology

Unity engine gives us a good control on audio clips we use, But the problem is when we add several audio sources for several audio clips it's gonna get hard to control them all. And if you want to make some changes to only one audio source you have to find it first.  This will become a mess if you gonna work with more than 10 audio clips. In this case, we can Create an AudioManager and include all the audio clips in it and make some static methods to play, pause the audio from other scripts. This Audio Manager is written in C# and if you use unity-script you have to convert this into unity script first. In this tutorial, we gonna create an audio manager which contains 7 methods. 1.Play 2.Pause 3.Unpause 4.Stop 5.FadeIn 6.FadeOut 7.lower volume for a duration First, we need a Custom class which contains some strings, floats, bools and an audio clip. This class is not derived from unity mono behavior so we should add [System.Serializable] to mak