JavaScript core concepts And Browers friendly You must to Know
We know javascript (JS for short)is the most powerful programming/development language. If we would like to become a web developer we have to understand this clearly. Today we discuss basic and must need 10 core concepts or things in JS.
1. Identify
We have written lots of things in JS. Sometimes we need to identify elements with a name. It can identify with three things that are var, let, and const.
var means variable. you can let a name through this, such as
var name = “Mr. Shere Bangla”
As like can use let and const but in that case behave thought that if you use to let, you can change this value in next time like var.
let name = “Mr. Shere Bangla”
name = “Mr. A K Fajrul khak”
but you can’t change identity name if you use const,
const name = let name = “Mr. Shere Bangla”
name = “Mr. A K Fajrul khak” (it will show error!)
2. Case-Sensitive
JavaScript is a case-sensitive language. If you use a name with small or capital letters to identify or others and you want to use this next time anywhere, then you have to use the same letter. Such as
const flower = “Rose”
console.log(flower)
const floWeR = “Rose”
console.log(floWeR) ////you can’t use on console.log(flower or different letter.)
You have to use just the same word with the same letter(capital and small)
camelFormate
Generally in uses of identity name, have been using camelFormate, that means in writing time, use the first word with the full small letter and next to every word with first letter capital and others small. such as
const flowerQueenName = “Rose”
3. Comment
In JS, comment means if you comment you ant data or sentences it will not work with other's active code. This/These sentences will not show in the browser. In two ways, you can comment.
For single sentence, use two forward slashes (//)
// this is single-line comment
For more than one sentences, use the first /* then in last */
/* These are multiline line sentences
These are multiline line sentences */
4. Type of Data
Basically there have two types of data. a) Primitive Data b) Non-Primitive/Reference Data
a) Primitive Data: In primitive data have stored directly values. Without these types of data, all are objects in JS. Such as,
- Number: Very simple number means all types od numbers even with decimal.
var oneNumber = 80; var oneNumber = 80.80
2. String: When we write something with identity, have been using string. all string content write in a single quotation ‘’ or double quotation “”.
var myName = ‘Sayem’
myName = “Momin”
3. Boolean: true or false. All are small letters. don’t use any quotation.
const isRight = true;
const isWrong = false;
4. Undefined: This means there are not declare with any value
const doSomething;
undefined
5. null: null is nothing with value but on the other hand this not undefined.
const doSomething = null;
null
b) Non-primitive data/Reference data: There have not directly saved value in Non-primitive. but have saved reference value. There has property.
- Array;
- Object;
- Function;
5.Operator
There are have some types of operator, such as,
- Arithmetic Operator
- Comparison Operator
- Logical operator
- Assignment operator
- Conditional Operator
1. Arithmetic Operator:
Addition, subtraction, multiplication, division, and some more are all included in arithmetic Operator.
a)Addition:
10 + 10
30
var a = 20
var b = 10
a + b
30
b)Subtraction:
var a = 20
var b = 10
a-b
10
c)Multiplication
var a = 20
var b = 10
a*b
200
d)Division
var a = 20
var b = 10
a*b
2
e)Modulus
var a = 55
var b = 10
a % b
5
F) Increment:
var a = 100
a++
101
g) Decrement
var a = 100
a- -
99
2.Comparison Operator:
This name says what work of it. Compare two values with some specific signs.
There == means both are equal and != means both are not equal.
3. Logical operator:
&&(and) and ||(or)
4. Assignment operator
Plus equal (+=), Minus equal (-+), Multiple equal (*=), Modulus equal (%=), etc included in Assignment operator.
var a = 30, means here declared a’s value is 30.
As well as a+= 10 means a’s value addition with a’s value and asaign with self. Full form of a+=10 is a = a + 10
As like
var b = 20
b-= 10
10
5. Conditional Operator
This operator if this then something else other things.
6. Coding Style
We should write code like that to be as clean and easy to read as possible.
1.No need give space between the function name and parameter
function power(x, n) {….something…..}
2.Need to a space between parameters
function power(x, n) {……….}
3. Give Curly brace { on the same line, after a space
function power(x. n) {
….something……….
}
4. Need to Indentation 2 spaces
function power(x, n) {
const data = 1;
}
5. A space after for/while/if…
for (let i = 0; i < n; i++) {
data *= x;
}
6. We should also give an empty line between logical blocks
const Red = “The red public is dangerous”
const Green = “The green public is good”
if(Red.length
> 0) {
alert(`${Red} so,
be careful`)
}.
7. Else keyword should be write without line break
if(Red.length > 0) {
alert(`${Red} so,
be careful`)
} else {
alert(something)
}
7. Error handling
How big we are a programmer, No matter. Sometimes we are doing some mistakes and it comes back as an error. We can handle these errors smoothly.
try……….catch
If try {…..} is Okay means the code is ok, the program will work finely. or code has any mistake try works stopped and we have to handle by catch. We can show the errors in our display.
try {
alert(‘All code are ok’)
// no errors here and it show this function
} catch(err) {
alert(‘As if there are no errors, so, Catch is ignored’)
}
Alternatively,
try {
alert(‘The code has some errors’)
// As if here has error so, try stopped to work.
} catch(err) {
alert(‘As if here has errors, so, Catch is show the errors)
}
8. Cross Browser Testing
Cross Browser Testing is a non-functional testing system where you can check your site work properly.
You will check through the most popular browsers like Chrome, Firefox, Edge, Safari, etc from the different operating systems like Windows, macOS, iOS, and Android.
It is most important cause you just imagine that you enter a website and see the site doesn’t friendly such as you gave to scroll horizontally. image are some broken or not show like mores. so That time what you’ll do. you come back from the site and find out alternative a topical friendly site.
As if you have a site you have to check all browser testing so that visitors don’t leave your site badly. It’s called Cross Browser Testing
9. Browser Caching
Caching is the system of storing copies of data. so that any user can visit the site quickly. Every time a user loads a webpage, the following access the browser’s cache most of the content and saving a copy of the content on the devices’ hard drive. As a result, the user loads the page in the next much more quickly.
If you anyone cleared the browser’s cache then the webpage will take time for the load as the first time.
10. Dev Tool Debugging
All web browsers have some form of Dev Tools so that any developer can debugging. If you are using Chrome, click-right of your mouse and select Inspect. This comes to you a ‘panel’ right or bottom of your browser. These are all Dev tools for you. From here, you can know information about this page’s HTML, CSS, and javascript that build up the page.
