One weeks learning summary of JavaScript

Md Piash
9 min readMay 3, 2020

My 1st day learning topics are

String is very interesting part of my learning the topics of string which I learn :

charAt, concat, includes, endsWith, indexOf, lastIndexOf, replace, slice, split, startsWith, substr, toLowercase, toUppercase, trim, trimStart, trimEnd

By those topics analysis we do all things which we want with string:

we can add two or more string by using string concatenation use concat() method

we can select any word form a string and show it in new string by using string slice() method

we can broke a string into word and convert into an array by using string split() method

we can repeat any string as we want by using string repeat() method

we can check the position of the string char by using cahrAt() method

Some interesting topics of JavaScript number

isNaN, parseFloat, parseInt

we use isNaN() method to determine whether a value is an illegal number (Not a Number).This function returns true if the value equals to NaN other wise it returns false

we use parseFloat() method to parses string and returns a floating point number

we use parseInt() method to parse a string and returns an integer

Topics I learn from javaScript array:
concat, every, filter, find, findIndex, forEach, indexOf, join, map, lastaIndexOf, pop, push, reduce, reverse, shift, slice, sort, splice, unshift

By using concat() method in array we can join two or more elements of arrays in a new array

By filter() method we can filter the elements of the array with matching our default condition that means by this method we creates a new array with all elements that pass the test implemented by the provided function.

By using map() method array is become easier to us.By using map we don’t need to use for loop to show the result of all elements of an array by using map we can use multiply or other operation in array elements

By using push() method we can insert one or more elements to the end of an array and returns the new length of the array.

Java script Object:

Create, assign, freeze, keys, seal, values

we can creates a new object, using an existing object as the prototype of the newly created object by using create() method.

we can copy ones property to others or by this method copies all own properties from one or more source objects to a target object by assign() method. It returns the target object.

Topics JavaScript math:
Abs, sin, cos, exp, floor, log, min, max, random, round, sqrt

abs() method returns the absolute value of a number

exp() method returns ex, where x is the argument, and e is Euler's number (also known as Napier's constant), the base of the natural logarithms.

In 2nd day learning topics are:
Re-intro of JavaScript,Numbers,Strings,Variables,Operators,Control structures,Objects,Arrays,Functions,Custom objects,Closures

above those topics are the revision of the day 1 topics

From those topics:

closure is the combination of a function bundled together (enclosed) with references to its surrounding state.In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. To use a closure, define a function inside another function and expose it.

Custom Object
An object in Javascript is an “unordered collection of properties each of which contains a primitive value, object, or function.” In classic Object Oriented Programming, objects are collections of data and methods that operate on that data. JavaScript is a prototype-based language that contains no class statement, as you’d find in C++ or. Instead, JavaScript uses functions as classes. Let’s consider a person object with first and last name fields. There are two ways in which the name might be displayed: as “first last” or as “last, first”.

JavaScript class
GETTER AND SETTER:This methods are special methods that bind to a class property and are called when that property is accessed or set. Use the get and set syntax to declare a public instance getter or setter.

Public fields

Public static fields,Public instance fields

Public methods

Public static methods,Public static methods

Public Static Methods: The static keyword defines a static method for a class. Static methods aren’t called on instances of the class. Instead, they’re called on the class itself. These are often utility functions, such as functions to create or clone objects.

Public Instance Methods: As the name implies, public instance methods are methods available on class instances. Public instance methods are added to the class prototype at the time of class evaluation using Object.defineProperty(). They are writable, non-enumerable, and configurable.

Private fields

Private instance fields

Private Methods

Private static methods,Private instance methods

Private Static Method: Like their public equivalent, private static methods are called on the class itself, not instances of the class. Like private static fields, they are only accessible from inside the class declaration.
Private static methods may be generator, async, and async generator functions.

Private Instance Method: Private instance methods are methods available on class instances whose access is restricted in the same manner as private instance fields.

Learn about webform
<form> element,<fieldset> and <legend> elements,<label> element

Cross browser testing
What is cross browser testing?
Cross Browser Testing means as web developer you develop your browser but your developed webapp is not only for you its developed for all of your users. Definitely your users used different type of device and also used different types of browsers not only different browser but also different version of browsers. So your developed webapp must be familiar for every device and every browser. So it’s clear that cross browser testing is the practice of making sure that the web sites and web apps you create work across an acceptable number of web browsers.

Client-side storage
Client-side storage” means data is passed to the browser’s storage API, which saves it on the local device in the same area as it stores other user-specific information. Client-side storage works on similar principles, but has different uses. It consists of JavaScript APIs that allow you to store data on the client that means on the user’s machine and then retrieve it when needed.

In 3rd day learning topics are:

In this day I learn about

codding styles
It is very essential for every serious developer.codding style, is a set of rules or guidelines used when writing the source code for a computer program. It is often claimed that following a particular codding style will help programmers read and understand source code conforming to the style, and help to avoid introducing errors.

Comments
It is also essential for make a program readable for another developer and also the developer of the program when he reads his code a few time or month later.

Error Handling

try….catch,throw operator
The try statement lets you test a block of code for errors and the catch statement lets you handle the error.The try statement allows you to define a block of code to be tested for errors while it is being executed and the catch statement allows you to define a block of code to be executed, if an error occurs in the try block.The JavaScript statements try and catch come in pairs.

DOM tree
The Document Object Model is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

Children: childNodes, firstChild, lastChild

More topics in this day I learn:
Siblings and the parent,Node properties: type, tag and contents,DOM node classes,The nodeType property,innerHTML: the contents,outerHTML: full,HTML of the element,textContent: pure text,The hidden property

Dom nodeType Property:
The nodeType property returns the node type, as a number, of the specified node this property provides one more, “old-fashioned” way to get the “type” of a DOM node.

InnerHTML:
The innerHTML property sets or returns the HTML content of an element it’s allows to get the HTML inside the element as a string. We can also modify it. So it’s one of the most powerful ways to change the page.

Styles and classes Topics

className,classList,Element style

In 4th day learning topics are:

JavaScript types

comparision, typeOf, instanceOf, type casting

Type Casting:
Type Casting is that converting one type of data value into another type.We know about two type of type casting they are:
Implicit type casting: If required javaScript engine automatically convert one type of data value to another it is called Implicit type casting.
Explicit type casting: If required the programmer can convert one type of data value to another it is called Explicit type casting.

typeOf():
The typeof operator is used to get the data type of the operand which we use in program and the operand can be a variable, a function, or an object.

instanceOf():
This keyword checks whether an object is an instance of a specific class or an interface and the instanceof keyword compares the instance with type.It’s check whether an object is an instance of a specific class if it is the instance of the class it’s return true other wise false.

Eval

As a name itself indicating, eval function tries to evaluate the given value and returns a number otherwise returns an error.in where value can be a number, expression, string, or JavaScript statement.

More topics are
DeleteKeyword,setTimeout,setIntervals,Scopes ,Namespaces

In 5th day learning topics are:

Today’s topics are:
Block Bindings,Var Declarations and Hoisting,Block-Level Declarations, Block Binding in Loops, Global Block Bindings, Emerging Best Practices for Block Bindings

Block Bindings:
The variables which we use in our program they are more formally known as binding. When we declare or initialize a variable, we actually bind a value to a name inside a scope. Scope means a specific part of a program.

Hoisting:
ECMAScript6 brings a new feature called hoisting. In general, hoisting is a mechanism which handles execution contexts in JavaScript. This means the variable and function are put into the memory during the compile phases before going for any execution.

Destructuring
Object Destructuring,Array Destructuring

JavaScript Class:
ECMAScript 5, Class Declarations, Class Expressions, Classes as First-Class Citizens, Accessor Properties, Computed Member Names, Inheritance with Derived Classes

Class Expressions:
Classes and functions are similar in that they have two forms like declarations and expressions. Function and class declarations begin with an appropriate keyword followed by an identifier. Functions have an expression form that doesn’t require an identifier after function, and similarly, classes have an expression form that doesn’t require an identifier after class. These class expressions are designed to be used in variable declarations or passed into functions as arguments.

Accessor Properties:
The accessor properties mention a name with one or two accessor functionsand these accessor functions are used to store or retrieve a value that is associated with the property. Which means that you restrict the access to a certain value behind a get and set accessor property
There are two kinds of properties:
The first kind is data properties.All properties that we have been using until now were data properties.
The second type of properties is something new. It is called accessor properties. They are essentially functions that work on getting and setting a value, but look like regular properties to an external code.
The accessor properties are represented by “getter” and “setter” methods. In an object they are used by get and set.

In 6th day learning topics are:

Object-Oriented Paradigm

Core concepts of oop:
Inheritance,Encapsulation,Polymorphism,Inheritance

OOP(Object Oriented Programming):
It is like a type of program that in which programmers define the data type of a data structure and also the types of functions that can be applied to the data structure.In this way, the data structure becomes an object that includes both data and functions. In addition, programmers can create relationships between one object and another. For example, objects can inherit characteristics from other objects.

Polymorphism:
Poly means many and morph means forms so the full meaning is many forms.So it is the ability to crate a variable, a function or an object that has more than one form.

Inheritance:
It is a process where one class acquire properties from another class.

Encapsulation:
It is a mechanism of restricting direct access to some of the objects components and also bunding data with methods that oerate on that data.

Abstraction:
It is a way of hiding the implementation details and showing only the functionality to the users.So its basic thing is hide details show essantials.

Useful keywords: Get, Set, This

Get:
This keyword will able to bind an object property to a function.When we need to use this keyword the getter function is called. The return value of the getter function determines which property is returned.

Set:
This keyword is able to binds an object property to a function to be called when there is an attempt to set that property in the function.

This:
this keyword refers to an object so that you can access the properties within an object. It can also be used to set the value of a property within an object.

Today’s more topics:
Functions as objects,Constructor functions,Prototype objects,functional programming,Pure functions,Immutability,Recursion

This topics are which I learn about JavaScript and I discuss some of this topics very shortly.I hope if anyone understand this topics JavaScript is become so easier for him/her.

--

--