Category: JS

Basic Javascript

Ataur RahmanLeave a comment 
// multiple loop
for(i = 0, j = 10; i<=10, j>=0; i++, j--){
    console.log(i, j);
}


// factorial 1-10
var factorial = 1;
for(n = 1; n <= 10; n++){
    factorial *= n;
    console.log("factorial of ", n , "is ", factorial);
}


// Number series 

// s1 = 2 4 6 8 10 12 14 ...
var series = "";
var n;
for(i = 0; i < 10; i++){
    n = i*2;
    series = series + n + " "; 
}
console.log("Series One = " + series);



// s2 = 1 4 7 10 13 16 ...
var series = "";
var n = 1;
for(i = 0; i < 10; i++){
    n = n + 3;
    series = series + n + " "; 
}
console.log("Series Two = " + series);



// s3 = 0 3 8 15 24 35 45 ...
var series = "";
var n;
for(i = 1; i < 10; i++){
    n = i*i-1;
    series = series + n + " "; 
}
console.log("Series Three = " + series);



// s4 = 1 4 3 8 5 12 7 16 ....
var series = "";
for(i = 1; i < 10; i++){
    n = i;
    if(n%2 == 0){
        n = n*2;
    }
    series = series + n + " ";
}
console.log("Series Four = " + series);



// s5 = 0 1 1 2 3 5 8 13 ... fibonacci
var series = "0 1 ";
var x = 0;
var y = 1;
for(i = 0; i < 10; i++){
    n = x+y;
    x = y;
    y = n; 

    series = series + n + " ";
}
console.log("Series Four = " + series);



// divisors
var n = 148;
var range = Math.ceil(Math.sqrt(n));
var divisors = "";

for(i=0; i<=range; i++){
    if(n%i == 0){
        if(i == n/i){
            divisors += i + " ";
        }else{
            divisors += i + " " + (n/i) + " ";
        }    
    }
}
console.log(divisors);



// Calendar
var monthName = "May";
var days = 31;
var startingday = 2;

console.log("Calendar of ",monthName,"\n");
console.log("Sun   Mon   Tue   Wed   Thu   Fri   Sat");

for(var i=0; i<5; i++){
    var dayRow = "";
    for(var j=1; j<=7; j++){
        var currentDay = 7*i + j - startingday;
        
        if(currentDay>days){
            break;
        }else if(currentDay<1){
            currentDay = " ";
        }

        if(currentDay>9){
            dayRow += currentDay + "    ";
        }else{
            dayRow += currentDay + "     ";
        } 

    }
    console.log(dayRow);
}



//Array
var fruits = ["Apple","Banana","Orange","Date","Grape"];
console.log(fruits[0]);


// last element
var lastIndex = fruits.length-1;
console.log(fruits[lastIndex]);


// slice, splice
var list = [
    "sun", //0 = -7
    "mon", //1 = -6
    "tue", //2 = -5
    "wed", //3 = -4
    "thu", //4 = -3
    "fri", //5 = -2
    "sat"  //6 = -1
];

var chunk = list.slice(1, 4);
console.log(list,chunk);
console.log("\n");

var chunk = list.splice(1, 4);
console.log(list,chunk);



// deep copy
var list = [
    "sun", //0 = -7
    "mon", //1 = -6
    "tue", //2 = -5
    "wed", //3 = -4
    "thu", //4 = -3
    "fri", //5 = -2
    "sat"  //6 = -1
];

var list2 = list;
list2[2] = "No Day";
console.log(list2, list);



// shallow copy
var v1 = 1;
var v2 = v1;
v2 = 2;
console.log(v1,v2);


// array merge
var list1 = ["sun","mon","tue"];
var list2 = ["wed","thu","Fri"];

var list = list1.concat(list2);
console.log(list);

Javascript

Ataur RahmanLeave a comment
  • How to work a Window
  • What is dom
  • What is dom rendering
  • Global scope vs local scope
  • This vs self
  • What is prototype
  • Chrome developer tools
  • Async io and nonblocking io
  • Single thread
  • Function and object
  • Typescript
  • Design pattern
  • jQuery best practice or jQuery best performance
  • Package npm, yarn
  • Task runner gulp, grant
  • Modularizing tools browserify, webpack
  • Todo MVC

Then you can decide angular or react

What is dom?

The Document Object Model (DOM) is a programming API for HTML and XML documents that represent a web page. A web page is made of elements, or nodes, such as the html element, the body element, and paragraph elements. The DOM builds a tree-like structure of these nodes in a hierarchy where some nodes are parents, and other nodes are children, like this:

<html> (root node)
	<head> (child of the root node)
		<title></title> (child of the head)
	</head>
	<body>
	</body>
</html>

The DOM provides an API for querying the tree and accessing objects based on their tag names, id, class names, or their relationship to other nodes in the tree. It also provides methods for adding and removing nodes, moving them to different locations in the tree, or modifying their contents.
The DOM is a bridge of HTML and JavaScript

Document?

The document is just the web page

Objects are elements

Every HTML element in the document is an object

<head></head> is an object
<body></body> is an object
<ul></ul> is an object
<p></p> is an object

When it is created?

When a web page is loaded, the browser creates a DOM structure, that is nothing but object tree structure.

How you can use the document object?

	-> Finding HTML Elements
		document.getElementById(id)
		
	-> Changing HTML Elements
		element.innerHTML =  new html content
	
	-> Adding and Deleting Elements
		document.createElement(element)
		document.removeChild(element)

Primitive data types in javascript

1.numbers
	4, 9.3, -10
2.Strings
	"Hello world", "45"
3.Booleans
	true or false
4.null
5.undefined