Difference between for..in and for..of loop in javascript

There is an difference b/w the two javascript loop for..in and for..of

Ø  for..in:

The for..in loop works with array and objects. It iterates with the property name.

1.1    When working with array it returns the indexes of the array element and user defined properties.

eg.

var arr=[12,13,14,15];

arr.foo='abc';

for (index in arr)

console.log(index);  // use arr[index] to access the element

Result:

0

1

2

3

foo

1.2    When working with object it returns the ‘key name’ of the object.

Eg.

var obj={key1:12,key2:13,key3:14,key4:15};

for (key in obj)

console.log(key); // use obj[key] to access the element

Result:

key1

key2

key3

key4

Ø  for..of: It works only with iterable objects. Iterable objects are those object that use Iterable protocol.

Inbuilt iterable objects are Array, String, Map, Set, TypedArray. Iterable object have the @@iterator method (i.e Symbol.iterator key). It iterates with the property value.

Eg.

var arr=[12,13,14,15];

arr.foo='abc';

for (index of arr)

console.log(index);  

Result:

12

13

14

15

getting css property value in jquery and applying css to an element in jquery

In jquery we can get the css value in following ways:

“.css” function is used to get css property of any element in jquery.

Example :

    <p style="font-size:20px" id="para1">

        Put content here.

    </p>

    <input type="submit" name="btnSubmit" value="Submit" onclick="return getBackColor();"        id="btnSubmit" />

function getBackColor() {

var color=$("p").css("font-size");

       alert(color);      

}  

We can set css to an element as following:

1.       Applying Single CSS

     $("p").css("font-size","30px");

2.       Applying Multiple CSS

     $("p").css({ "font-size": "30px", "color": "red" });

Note: We can use ID of the element also for applying css or getting value of css like $("#para1").css

Scope of a variable in javascript

Global scope of a variable:

When we declare a variable outside of a function then that variable has the global scope.

This type of variable can be accessed anywhere in the program or file.

Example:

var str = "test value";

It can be used anywhere in the program.

Local scope of a variable:

When we create a variable inside a function body then that variable has the local scope.

This type of variable cannot be accessed outside the function.

Example:

function getResult() {

    var result = 10;

    alert(result);

}

Note 1: When we do not declare a variable with “var” inside a function then

that variable can also be accessible outside of the function. Hence it has global scope.

Example:

<asp:Button ID="btn" runat="server" Text="submit" OnClientClick="getResult();" />

function getResult() {

    result = 10;   

    test();

    return false;

}

function test() {

    alert(result);//result will return 10 which is declared in getResult()

    return false;

} 

Note 2: When we define nested function then inner function has access to the variable defined in outer function but outer function cannot access to the variable defined in inner function.

Example:

function getResult() {

    var result = 10;

    function test() {

        var str = "Test";

        alert(result); //output will be 10

        return false;

    }

    alert("str" + str);// str will not be accessible

    return false;

}

Redirect to another page using jquery

We can redirect to another page following way

var url = "about.aspx" //url for redirect

$(location).attr("href", url);

Redirect to another page using javascript

We can redirect to another page using javascript in following ways:

1.  window.location.href = "default.html";//url of the page
2.  window.location.replace("default.html");//url of the page

Redirect to the parent page:

1.  window.parent.location.replace("default.html");//url of the page
2.  window.parent.location.href="default.html"; //url of the page

get element by id javascript

Suppose we have a textbox in html and we want to know the value of the textbox then

in javascript we can get the element by two ways:

1.  document.getElementById
2.  document.getElementsByName

<input type="text" id="txtName" name="txtName" value="Mathew" />

function getName() {

    var Name = document.getElementById("txtName").value;

    var Name1 = document.getElementsByName("txtName").value;

    alert(Name);

    //alert(Name1);

}

It will display value in textbox by using “.value” attribute.