JavaScript `this` keyword

Each time the function is called, this refers to the HTML element that is currently handling the event.

In JavaScript this always refers to the “owner” of the function we are executing, or rather, to the object that a function is a method of. When we define our  function doSomething() in a page, its owner is the page, or rather, the window object (or global object) of JavaScript. An onclick property, though, is owned by the HTML element it belongs to.

Advertisements

Google +1 Button using Javascript

The easiest method for including google +1 button on your web page is to include the necessary JavaScript resource and to add a +1 button tag.

Just add below tag into your HTML where you want to put google +1 button.

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone"></div>

Add below java script into your head section.

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

That’s it.
You can find all other parameters at https://developers.google.com/+/plugins/+1button/

Facebook login using javascript

<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>

    <body>
        <div id="fb-root"></div>
        <script type="text/javascript">
            var button;
            var userInfo;

            window.fbAsyncInit = function () {
                FB.init({
                    appId: 'YOUR_APP_ID', //change your app id
                    status: true,
                    cookie: true,
                    xfbml: true,
                    oauth: true
                });

                function updateButton(response) {
                    button = document.getElementById('fb-auth');
                    userInfo = document.getElementById('user-info');

                    if (response.authResponse) {
                        //user is already logged in and connected
                        FB.api('/me', function (info) {
                            login(response, info);
                        });

                        button.onclick = function () {
                            FB.logout(function (response) {
                                logout(response);
                            });
                        };
                    } else {
                        //user is not connected to your app or logged out
                        button.innerHTML = 'Login';
                        button.onclick = function () {

                            FB.login(function (response) {
                                if (response.authResponse) {
                                    FB.api('/me', function (info) {
                                        login(response, info);
                                    });
                                } else {
                                    //user cancelled login or did not grant authorization

                                }
                            }, {
                                scope: 'email,user_birthday,status_update,publish_stream,user_about_me'
                            });
                        }
                    }
                }

                // run once with current status and whenever the status changes
                FB.getLoginStatus(updateButton);
                FB.Event.subscribe('auth.statusChange', updateButton);
            };
            (function () {
                var e = document.createElement('script');
                e.async = true;
                e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
                document.getElementById('fb-root').appendChild(e);
            }());

            function login(response, info) {
                console.log(info);
                if (response.authResponse) {
                    var accessToken = response.authResponse.accessToken;

                    userInfo.innerHTML = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + "<br /> Access Token: " + accessToken + "<br /> Your Birthday:" + info.birthday + "<br /> Your Email:" + info.email + "<br /> Your First Name:" + info.first_name + "<br /> Your Last Name:" + info.last_name + "<br /> Your Gender:" + info.gender + "<br /> Profile Link:" + info.link + "<br /> Username:" + info.username;

                    button.innerHTML = 'Logout';

                    document.getElementById('other').style.display = "block";
                }
            }

            function logout(response) {
                userInfo.innerHTML = "";
                document.getElementById('debug').innerHTML = "";
                document.getElementById('other').style.display = "none";

            }

            //stream publish method
            function streamPublish(name, description, hrefTitle, hrefLink, userPrompt) {

                FB.ui({
                    method: 'stream.publish',
                    message: '',
                    attachment: {
                        name: name,
                        caption: '',
                        description: (description),
                        href: hrefLink
                    },
                    action_links: [{
                        text: hrefTitle,
                        href: hrefLink
                    }],
                    user_prompt_message: userPrompt
                },

                function (response) {

                });

            }
        </script>
        <button id="fb-auth">Login</button>
        <br />
        <div id="user-info"></div>
        <br />
        <div id="debug"></div>
        <div id="other"></div>
    </body>

</html>

Create an array : Javascript

You can create your own JavaScript array as shown below.


<script type="text/javascript">

var i;
 var languageArray = new Array();
 languageArray[0]    =    "English";
 languageArray[1]    =    "Gujrati";
 languageArray[2]    =    "Hindi";
 languageArray[3]    =    "Punjabi";

for(i=0; i<languageArray.length; i++) {
 document.write(languageArray[i] + "<br>");
 }
 </script>
Output : -

English
Gujrati
Hindi
Punjabi

Create Your Own Objects : JavaScript

You can create your own JavaScript object given by below.


<script type="text/javascript">
 objPerson    =    new Object();
 objPerson.fname    =    "Milap";
 objPerson.lname    =    "Patel";
 objPerson.age    =    "24";
 document.write(objPerson.age);
 </script>

objectname = new Object();
 will create JavaScript object named "objectname".

fname and lname are methods and we can assign values to object,
 objPerson.age    =    "24";