Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Lessons Learned from Teaching JavaScript, Pt.1

DZone's Guide to

Lessons Learned from Teaching JavaScript, Pt.1

If you're looking to learn JavaScript, or simply want a nice refresher course, this article offers good advice on basic JavaScript techniques and principles.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Recently I was assigned to a training task where I needed to train one of my colleagues who is totally new to the programming field. After the training, I got the idea to create a series of articles related to JavaScript, out of what I had covered in my training sessions. As this is the first part of the series, we are going to cover some basics of JavaScript which you may have forgotten, or you may not be aware of it. You can always see my other posts related to JavaScript here. We will be using Visual Studio for our development. I hope you will like this. Now let’s begin.

Download Source Code

  • Do you know JavaScript – Part 1
  • Introduction to KnockoutJS

    Basically, JavaScript is a programming language used in conjunction with HTML and the web. Nowadays, we can create any kind of application using JavaScript. If you are totally new to JavaScript, I strongly recommend you to read some basics here.

    Create an HTML page

    As we already said, JavaScript is a programming language that works with HTML and the web, so, we need a page that allows us to work with JavaScript. Let’s create it first.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
    </body>
    </html>

    Now create a JS file and include it in your page.

    <script src="JavaScript.js"></script>

    Let’s Begin our Tutorial

    Any idea as to what will be the output of the following lines of code?

    console.log(2 + 2);
    console.log(2 + "2");
    console.log(2 + "2" + 2);
    console.log(2 + 2 + "2" + 2);
    console.log(2 + 2 + "2" + 2 + 2);
    console.log(2 + "2" + 2 + "2" + 2 + 2);
    console.log("2" + 2 + "2" + 2 + 2 + 2 + 2);

    Once you run your application, press CTRL+SHIFT+J if you are opening your application in Google chrome; CTRL+SHIFT+K if it is Mozilla; or press F12 if you're using IE. This will open the browser console. Now check the output, is it the same as you thought?

    Javascript_tutorial_output_1

    Javascript_tutorial_output_1

    In the above example, console.log(2 + 2 + “2” + 2 + 2); returned 4222. First, twos are added, and when it comes to the third digit, the result is changed to a string (a process which is called string concatenation). This is because of the dynamic nature of JavaScript.

    You can always add different types of values to the same variable in JavaScript. The following codes will always work perfectly:

    var a = 1;
    a= = "Sibeesh";

    Now, a simple test. What will be the output of the following code?

    var b;
    console.log(b);

    It will return undefined as we have not assigned any values to the variable b. Have you ever checked the type of an undefined variable?

    console.log(typeof(b));

    The result will be undefined. Now, what about the following codes?

    console.log(typeof(undefined));
    console.log(typeof(typeof(b))); 
    console.log(typeof(String(b)));
    console.log(typeof({a:b}));
    console.log(typeof(null));

    It will give you the output shown below:

    undefined
    string
    string
    object
    object

    Here we have to note that, typeof(typeof()) will always return a string. And {a:b}, null is actually an object, so the typeof will return this type as an object. Let’s write a simple program now.

    var a=1;
    var b=a;
    a=2;
     
    console.log(b);
    console.log(a);

    See how simple it was? Any idea what would be the output of that? If your answer is 1 and 2, then you are right! Have you ever wondered why that is? It's because the variables we just created are primitive types. In primitive data types, the values are saved directly in the variable. If you are coming from a C# background, you can understand the value typed variable.

    Now we have one more data type which is a referenced variable where values are stored as a reference, not as direct values. An example of a referenced type variable is an Object.

    JavaScript Objects

    Do you know how to create a JavaScript object?

    var myName = {firstName: "Sibeesh", lastName: "Venu"};
    console.log(myName);
    console.log(JSON.stringify(myName));
    console.log(myName.firstName);
    console.log(myName.lastName);

    Here, myName is an object. You can always use JSON.stringify() to make your object a string format and JSON.parse() to make your string an object. So the above code will give you an output as follows:

    Javascript_tutorial_output_2

    Javascript_tutorial_output_2

    An object is a collection of key-value pairs. Like we see in the above object, firstName is the key and “Sibeesh” is the value. How can we take any values from an object? We can always access a property from an object using dot(.) operator as follows:

    console.log(myName.firstName);
    console.log(myName.lastName);

    The above code will give you an output of “Sibeesh” “Venu”, right? We just accessed a property from an object. Now, we have given a string value to our object as a key. Is there any way we can give a key in number format? Let’s have a look.

    var myName = {1: "Sibeesh", 2: "Venu"};

    The question is, how can we access values of keys 1 and 2. How about like this? 

    console.log(myName.1);
    console.log(myName.2);

    Unfortunately, this won't work. If you try to access the values, as shown above, it will throw an “Uncaught SyntaxError” error. So how can we access it?

    console.log(myName["1"]);
    console.log(myName["2"]);

    So when the key value is a number, we must use [] for accessing the values. Now, let's go back to the previous object:

    var myName = {firstName: "Sibeesh", lastName: "Venu"};
    var myNameCopy= myName;
    myName.firstName = "Sibi";
     
    console.log(myName.firstName);
    console.log(myNameCopy.firstName);

    Any idea what the output will be for the above code? The output should be Sibi Sibi. As we said earlier, an object is an example of a referenced type variable where the values are stored as a reference to it. So even if we change the value of our first object, that will be reflected in our second one too.

    In the above examples we have created objects like the one shown below:

    var myName = {firstName: "Sibeesh", lastName: "Venu"};

    This way of creating an object is called Object literals. Now the question is, is this the only way of creating the object? There is one more way, which is known as Object Constructor. Now we can create the same objects using an Object constructor.

    var myName = new Object();
    myName.firstName = "Sibeesh"
    myName.lastName = "Venu";
    console.log(myName.firstName);
    console.log(myName.lastName);

    Is there any way we can add only variables to an object? Absolutely not. But, an object can hold a function. Let’s create an object with a function inside.

    var myName = {
    firstName: "Sibeesh", 
    lastName: "Venu",
    myFullName: function(){
    console.log(myName.firstName+" "+myName.lastName);
    }
    };

    So the code myName.myFullName(); will return my full name “Sibeesh Venu” as the output. Right? So from the above code, we can create a function in JavaScript as follows:

    var myFullName =  function(firstName, lastName){
    return firstName + " " + lastName;
    }

    If you call the above function as shown below, you will get an output as “Sibeesh Venu.”

    console.log(myFullName("Sibeesh","Venu"));

    The question is, what if we are passing only one value? Let’s try that out:

    console.log(myFullName("Sibeesh"));

    If you are working in any server side languages, this will actually give an error like “function with one parameter couldn’t find.” But JavaScript is not like that, even if you are wrong, it will try to make your code correct. So in this case, it actually treats the second parameter as undefined and gives you the output, “Sibeesh undefined.”

    That’s all for today. You can always download the source code attached to see the complete code and application. Happy coding!.

    References 

  • JS
  • See also

  • Articles related to JavaScript
  • Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

    Topics:
    javascript ,webdev ,tutorial

    Published at DZone with permission of

    Opinions expressed by DZone contributors are their own.

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}