Part 1 - Javascript For Completely Beginners
Programming for Dummies | Introduction To Terminologies
Table of contents
- What is Programming?
- What is JavaScript?
- What is JavaScript Engine & how it works?
- What is a Code Editor and which one is the best to use?
- What does Developer Tool mean?
- Javascript Basic Structure
- How to attach files, external files, inside <script> tag?
- How to put comments in Java Script?
- How to write code?
- Is "use strict" that important you should care about?
- What is a Variable?
- What is a Constant?
- What are Data-Types?
- What do alert and confirm mean?
- Summary
What is Programming?
Programming is a process of writing instructions in a sequence so that the computer can fetch and execute them. We use programming languages to design and build software. In a web application, designing and building webpages can be done with a combination of different languages like CSS, Javascript, and HTML. In this blog, I will specifically talk about Javascript.
In the context of a webpage, HTML represents the skeleton whereas CSS represents Skin/Muscles and Javascript puts life in it.
What is JavaScript?
JavaScript is a programming language that gives a soul to a webpage which makes our webpages alive. for eg:-A dead the body is a webpage when we add JS in it a dead body will be alive & starts walking and talking.
What is JavaScript Engine & how it works?
A JavaScript engine is a program that runs JS code. The engine reads the script then converts the script to the machine language because the computer only understands machine code. The V8 engine is supported in Chrome and Opera likewise, SpiderMonkey for Firefox whereas, SquirrelFish for Safari, etc.
What is a Code Editor and which one is the best to use?
In my opinion, a code editor is a supporting tool for every programming language where we can write our codes for building software. There are different code editors but we(programmers) use them as per our taste. I mean to say that someone finds 'Sublime Text' so easy to use whereas some say 'Visual Studio Code' is the best though the purpose of using a text editor is the same. If we are beginners, I suggest Visual Studio Code
because I find some extra features than other editors but it depends upon your preference.
What does Developer Tool mean?
The developer tool is a set of tools that is available in a browser where we can test our codes, see errors, and also examine variables. We can inspect and debug the pages HTML, CSS, and JavaScript of any website that is currently open.
An example of a developer tool is Console
. If you are learning JavaScript means you must be familiar with Console.
Javascript Basic Structure
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
// We can use a <script> tag to add JavaScript code to a page.
<script>
alert( 'Hello, world!' );
</script
<p>...After the script.</p
</body>
</html>
How to attach files, external files, inside <script> tag?
Script files are attached to HTML with the src attribute:
<script src="file.js"></script>
External Script files are attached to HTML with the src attribute:
<script src="/path/to/script.js"></script>
We can give a full URL as well. For instance:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js"></script>
A single <script> tag can’t have both the src attribute and code inside.
<script src="file.js">
alert(1); // the content is ignored, because src is set
</script>
How to put comments in Java Script?
Comments are ignored by the engine. If we want to make clear about our codes to users we do comments. We can comment in two ways. If we have to comment in one line we give two forward slashes i.e // whereas If we have to give comments in multiline we start with a forward slash and an asterisk /*
and end with an asterisk and a forward slash */
.
For example,
//This is single line comment.//
/*
This is multiline comment.
This is second line.
*/
How to write code?
Codes are written in many statements separated by semicolons.
For example,
/* Two alerts Hello and world. Firstly,
computer will alert Hello and then will alert world.*/
alert('Hello'); alert('World');
Usually, statements are written on separate lines to make the code more readable:
// In Js semicolon can be omitted but I want always to insert semicolon at line breaks.
alert('Hello');
alert('World');
Is "use strict" that important you should care about?
"use strict"
is the modern way of using JavaScript code and it is placed at the top of a script file. Modern js supports advanced language Structure, which enables the use strict
automatically.
What is a Variable?
The variable is a pointer where we store data and assign value to it. We declare Variable to store data by using the var, let, or const keywords. Always declare a let for a variable declaration to run your codes at the local scope. let is a modern way of declaring variables whereas var is an old way. Variable names must contain only numbers, only letters, or the symbols $ and _. Variable naming must be meaningful. In the above diagram, the variable is pointing to data 1 and data 2.
Simple Example:
let message; //declaring a variable with the name "message"
message = 'Hello'; // store the
alert(message); // shows the variable content
We can also declare multiple variables in one line as in the example below:
let user = 'John', age = 25, message = 'Hello';
What is a Constant?
The constant is also like a variable but the difference is, a constant cannot be assigned another value once defined. This is why the same constant name cannot point to Data 2
once it's pointed to Data 1
. Some constants are named using capital letters and underscore to make a difference.
For instance:
To declare a constant (unchanging) variable, use const
instead of let
:
const myBirthday = '19.03.1980'; //declaring constant variable
myBirthday = '01.02.2000'; // error, can't reassign the constant value!
const COLOR_RED = "#F00"; //uppercase constant
let color = COLOR_RED;
alert(color); //#F00 will be the output
What are Data-Types?
In simple concept, Data types are Number
, String
, Boolean
, Null
, Undefined
, BigInt
.
For example:
Numbers
mean123
or14.34;
Eg:let n = 123;
String
means quotes: double quotes, single quotes, backticks;let name = "John";
Boolean
means two values: true and false;let isGreater = 3 > 1;
result comes trueNull
represents "empty" or "unknown value"let age = null;
means age is unknown.Undefined
is likenull
but it's not mean empty. It means variable is declared but not assigned, then it's value isundefined
.let age;
shows undefined on alert.Bigint
means big integer value. Example10n
. The "n" at the end means it's a BigInt.const bigInt = 1234567892345567788n;
What do alert
and confirm
mean?
Alert
shows a message. Confirm
shows a message and waits for the user to press "OK" or "Cancel". It returns true
for OK and false
for Cancel.
Summary
In my experience, it's not that hard to understand the basic terminologies in Javascript. See you in the next chapter.