It covers how to create a valid HTML structure and some more stuffs.
Learn more about the HTML in the second video of the tutorial series. It covers how to create a valid HTML structure and some more stuffs.
0 Comments
This tutorial series I have created basically for people who belong to non-coding/background and wish to learn web development. This is the very first tutorial of this series which targets at making people understand what is the use of HTML. Dedicated to my loving sister who comes from a non-coding background, yet is interested in learning about web development.
Last year I read the book "javascript- The Good Parts" by Douglas Crockford.
In this book Crockford considers void as the bad parts of Javascript. He mentions in his book that-
In many languages, void is a type that has no values. In JavaScript, void is an operator that takes an operand and returns undefined. This is not useful, and it is very confusing. Avoid void.
But if you've been doing web development, you would have probably seen links that look something like this:
<a href="javascript:void 0;" onclick="doSomething()">Do something</a>
What does an anchor tag with an href attribute having a value like href="JavaScript:void(0);",
actually mean? To understand the meaning or purpose of such a hyperlink, we should first understand the void operator. What does void 0 mean? The void operator evaluates the given expression and then returns undefined.
void 0
void (0) void "abc" void (new Date()) //all will return undefined
The void operator is often used merely to obtain the undefined primitive value, usually using "void(0)" (which is equivalent to "void 0").
OK... got it... But still it seems useless, isn't it!!! I mean "What's the point of that?" More straightforward question is what's wrong with just using "undefined" itself? Now to understand why people use void(x) instead of undefined, let us run the below code in IE8.
console.log(undefined); //outputs"undefined"
var undefined = "no longer undefined"; console.log(undefined) // outputs "no longer undefined"
The problem with using undefined was that undefined is not a reserved word (it is actually a property of the global object). That is, undefined is a permissible variable name, so you could assign a new value to it.
However any environment that supports ECMAScript 5 or newer will have the undefined property of the global object as read-only, therefore this will not be a problem. Now that we know what is the point of using void operator, let us move forward and understand the usability of this void with respect to the hyperlinks. Sometimes, we may need to call some JavaScript from within a link. Normally, when we click a link, the browser loads a new page or refreshes the same page (depending on the URL specified). But we probably don't want this to happen if we've attached some JavaScript to that link. When a browser follows a javascript: URI, it evaluates the code in the URI and then replaces the contents of the page with the returned value, unless the returned value is undefined. The void operator can be used to return undefined. If the result is undefined, then the browser stays on the same page. To prevent the page from refreshing, we could use JavaScript:void(0).
Since unlike Java, in javascript we have two different things "undefined" and "null" which actually represent the absence of some value, therefore many beginners in javascript get confused. But we need to know that there are some interesting differences between the two.
Let us talk about "undefined" first and gradually understand the difference between the two. There are two things about "undefined" that we should always remember -
1.)The value "undefined".
2.)The type "undefined".
To understand undefined as "value" , take a look at the below code-
var iAmNotDefined;
console.log("the value of iAmNotDefined is :", iAmNotDefined);
When you run this code what does this gives you on the console?
It is showing that the value of the variable "iAmNotDefined" is "undefined".
To make it more clear, understand that the any variable which is not assigned any value will implicitly get the value as "undefined". Now understand the type of the variable "iAmNotDefined"
var iAmNotDefined;
console.log("the typeof iAmNotDefined is :", typeof(iAmNotDefined));
JavaScript has a global variable undefined whose value is "undefined" and typeof undefined is also "undefined".
Now understand how "undefined" is different from "null" Unlike "undefined", "null" is actually an assigned value. The value null represents the intentional absence of any object value. It is one of JavaScript's primitive values.
That means undefined means it hasn't been assigned yet, and null means it has been assigned to be nothing.
When do we actually get "undefined" in javascript:
1.)A declared variable without assigning any value to it. The example is given above 2.)Implicit returns of functions due to missing return statements. To understand this run the below code in the console.
function test(){
var hello = "hello"; } console.log("Test return value : ", test());
When run in console we get this -
3.)Return statements that do not explicitly return anything.
function test(){
var hello = "hello"; return; } console.log("Test return value : ", test());
When run the code we get the below output on console -
4.) Lookups of nonexistent properties in an object
var person = {firstName :'John', lastName : 'Doe'};
console.log("firstName: ",person.firstName); console.log("middleName:", person.middleName );
When run the code we get the below output on console -
5.)Function parameters that have not passed.
function test(param1, param2){
console.log(param1); console.log(param2); } test("hello");//call the function with single parameter.
When run the code we get the below output on console -
6.)Any expression in the form of void(expression)
console.log(void "test"); // outputs "undefined"
When run the code we get the below output on console -
I hope you understand the undefined better now.
It is often confusing to use "this" keyword in JavaScript, if we don't exactly know how it works. I think the confusion comes because people expect "this" keyword in JavaScript to work like âthisâ in Java. There is also some differences in the behavior of "this" in strict and non-strict mode.
What does "this" refer to when used in a function in JavaScript? In JavaScript "this" always refers to the âownerâ of the function we're executing, or rather, to the object that a function is a method of. The value of "this" depends on two things:
1.) The type of code being executed (i.e., global, function, or eval)
2.) The caller of that code.
Before going ahead and exploring "this" we need to understand the JavaScript runtime environments which will hopefully help us in understanding "this" better.
Well, JavaScript code is run in execution context.
We can think of the term execution context as the environment or scope in which the current code is being evaluated.
When code is run in JavaScript, the environment in which it is executed is very important, and is evaluated as one of the following:
The JavaScript runtime environment maintains a stack of these contexts, and the top execution context on this stack is the one thatâs actively running. Every time control enters a new execution context , the object that "this" refers to is redetermined. Remember following rules regarding to whom will "this" refer:
RULE 1. - GLOBAL CONTEXT
"this" refers to the global object in all global code. And Since all programs start by executing global code, therefore by default, "this" refers to the global object. A global object is an intrinsic object whose purpose is to collect global functions and constants into one object. In browsers, the global object is the window object.
Let us take the following function as an example:
//window object is the global object in the web browsers console.log(this === window) // prints "true"
this.someProp = "test" console.log(window.someProp)//prints "test"
RULE 2. - FUNCTION CONTEXT
Inside a function there are certain factors which will decide the value of this, e.g - how a function is called, also the strict and non-strict mode have an affect.
Let us take the example of below function called "testFunction", its owner is the page, or rather, the window object (or global object) of JavaScript.
function testFunction() {
this.color = 'green'; } testFunction(); console.log(window.color);//prints green
function testFunction() {
"use strict"; //see strict mode this.color = 'green'; /*throws exception because "this" will not refer to the global object, instead it will remain as "undefined" */ } testFunction(); console.log(window.color);//prints undefined, because "window" does not have the color property.
In strict mode the value of "this" remains to whatever set to when when entering an execution context. e.g if we would have called the testFunction like window.testFunction(), then inside this function "this" would have referred to "window" object.
There are other things as well which decide the value of "this" inside any function. 1.)"this" in function code invoked using the new operator refers to the newly created object. Let us take the following example:
function testFunction(myVal) {
this.val= myVal; } var obj1 = new doSomething(âdoes not refer to global objectâ); console.log(obj1.val); //will be - does not refer to global object console.log(val); //will be - ReferenceError/
But when the same function is called without using a "new" operator then "this" will refer to the global object , as no new object is created since the new operator isnât used :
var obj2 = testFunction(ârefers to global objectâ);
console.log(obj2.val); //will be - undefined console.log(val); //will be - refers to global object
2.) call and apply : Every JavaScript functions have two methods, "call" and "apply". When a function is called using "call" or "apply", "this" refers to the first argument passed to "call" or "apply". If the first argument is null or not an object," this" refers to the global object.
Let us see the following example:
var name = "Mark";
var fun = function (txt){ alert(txt + this.name ); }; var obj = { name: "Tom" }; fun.call(obj, "Hello, ");// return Hello Tom coz this is obj fun.call(null, "Hello, ");// return Hello Mark coz this is the global object
NOTE - with "call" and "apply", if the value passed as "this" is not an object, an attempt will be made to convert it to object using the internal toObject operator.
RULE 3. - EVENT HANDLERS
Look at the below two different ways of event handler bindings:
In the first example, when the event handler is executed then "this" will refer to the HTML element. While in the second one (right one) "this" keyword again refers to the global window object.
WHY???? Let us understand this difference in the value of "this" in the two cases. "this" refers to the parent object inside function code. If we call a function as a property of an object using either dot or bracket notation, "this" will refer to the parent object in the body of the function. Therefore when we do "element.onclick = testFunction;", then we actually copied the function to our onclick property. So if the event handler is executed "this" refers to the HTML element So this is clear why in this case "this" refers to the HTML element. Now the question is "what happens in inline event registration?"
function onclick()
{ testFunction(); }
In the inline event registration case we do not copy the function and hence the onclick property does not contain the actual function, but merely a function call as follows:
The above event registration actuallty means -Go to testFunction() and execute it.
The "this" keyword is not present in the onclick method, rather onclick method has merely a reference to function doSomething(). Therefore "this" keyword again refers to the global window object. Following are the ways in which "this" will refer to the HTML element itself:
element.onclick = doSomething;
element.addEventListener('click',doSomething,false); element.onclick = function () {this.style.color = '#cc0000';}
Following are the ways in which the "this" will refer to the window object/global object :
element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething);
Rules for determining what this refers to inside of eval code are a little more complex. Explore them on the link : http://perfectionkills.com/global-eval-what-are-the-options/
Summary:
|
Raksha Singh
Software Developer Categories
All
Archives
February 2017
|