preparation analytics

                                                Preparation Test   

 date : 28/09/2020 

  CSS : 

    1:Explain the CSS “box model” and the layout components that it consists of.           Provide some usage examples.

    

The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:

• Content - The content of the box, where text and images appear
• Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)
• Border - A border surrounding the padding (if any) and content
• Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)

Each of these properties can be specified independently for each side of the element (i.e., top, right, bottom, left) or fewer values can be specified to apply to multiple sides. For example:

/*       top   right  bottom left  */
padding: 25px  50px   75px   100px;

/* same padding on all 4 sides: */
padding: 25px;

/* top/bottom padding 25px; right/left padding 50px */
padding: 25px 50px;

/* top padding 25px; right/left padding 50px; bottom padding 75px */
padding: 25px 50px 75px; 

 2: Explain what elements will match each of the following CSS selectors:

1. div, p
2. div p
3. div > p
4. div + p
5. div ~ p

1. div, p - Selects all <div> elements and all <p> elements
2. div p - Selects all <p> elements that are anywhere inside a <div> element
3. div > p - Selects all <p> elements where the immediate parent is a <div> element
4. div + p - Selects all <p> elements that are placed immediately after a <div> element
5. div ~ p - Selects all <p> elements that are anywhere preceded by a <div> element

 

 3: Explain the meaning of each of these CSS units for expressing length:

• cm
• em
• in
• mm
• pc
• pt
• px
• rem
  

• cm - centimeters
• em - elements (i.e., relative to the font-size of the element; e.g., 2 em means 2 times the current font size)
• in - inches
• mm - millimeters
• pc - picas (1 pc = 12 pt = 1/6th of an inch)
• pt - points (1 pt = 1/72nd of an inch)
• px - pixels (1 px = 1/96th of an inch)
• rem - 1rem =10px
  

 

JS :

1:What is a potential pitfall with using typeof bar === "object" to determine if bar is an object? How can this pitfall be avoided?

 

Although typeof bar === "object" is a reliable way of checking if bar is an object, the surprising gotcha in JavaScript is that null is also considered an object!

Therefore, the following code will, to the surprise of most developers, log true (not false) to the console:

var bar = null;
console.log(typeof bar === "object");  // logs true!

As long as one is aware of this, the problem can easily be avoided by also checking if bar is null:

console.log((bar !== null) && (typeof bar === "object"));  // logs false

To be entirely thorough in our answer, there are two other things worth noting:

First, the above solution will return false if bar is a function. In most cases, this is the desired behavior, but in situations where you want to also return true for functions, you could amend the above solution to be:

console.log((bar !== null) && ((typeof bar === "object") || (typeof bar === "function")));

Second, the above solution will return true if bar is an array (e.g., if var bar = [];). In most cases, this is the desired behavior, since arrays are indeed objects, but in situations where you want to also false for arrays, you could amend the above solution to be:

console.log((bar !== null) && (typeof bar === "object") && (toString.call(bar) !== "[object Array]"));

However, there’s one other alternative that returns false for nulls, arrays, and functions, but true for objects:

console.log((bar !== null) && (bar.constructor === Object));

Or, if you’re using jQuery:

console.log((bar !== null) && (typeof bar === "object") && (! $.isArray(bar)));

ES5 makes the array case quite simple, including its own null check:

console.log(Array.isArray(bar));

2:

(function(){
  var a = b = 3;
})();

console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));

Since both a and b are defined within the enclosing scope of the function, and since the line they are on begins with the var keyword, most JavaScript developers would expect typeof a and typeof b to both be undefined in the above example.

However, that is not the case. The issue here is that most developers incorrectly understand the statement var a = b = 3; to be shorthand for:

var b = 3;
var a = b;

But in fact, var a = b = 3; is actually shorthand for:

b = 3;
var a = b;

As a result (if you are not using strict mode), the output of the code snippet would be:

a defined? false
b defined? true

But how can b be defined outside of the scope of the enclosing function? Well, since the statement var a = b = 3; is shorthand for the statements b = 3; and var a = b;, b ends up being a global variable (since it is not preceded by the var keyword) and is therefore still in scope even outside of the enclosing function.

Note that, in strict mode (i.e., with use strict), the statement var a = b = 3; will generate a runtime error of ReferenceError: b is not defined, thereby avoiding any headfakes/bugs that might othewise result. (Yet another prime example of why you should use use strict as a matter of course in your code!)

3:

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
            console.log("inner func:  this.foo = " + this.foo);
            console.log("inner func:  self.foo = " + self.foo);
        }());
    }
};
myObject.func();

The above code will output the following to the console:

outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

In the outer function, both this and self refer to myObject and therefore both can properly reference and access foo.

In the inner function, though, this no longer refers to myObject. As a result, this.foo is undefined in the inner function, whereas the reference to the local variable self remains in scope and is accessible there.

 PHP :

1: 

Consider the following code:

$str1 = 'yabadabadoo';
$str2 = 'yaba';
if (strpos($str1,$str2)) {
    echo "\"" . $str1 . "\" contains \"" . $str2 . "\"";
} else {
    echo "\"" . $str1 . "\" does not contain \"" . $str2 . "\"";
}

The output will be:

"yabadabadoo" does not contain "yaba"

Why? How can this code be fixed to work correctly?

 

The problem here is that strpos() returns the starting position index of $str2 in $str1 (if found), otherwise it returns false. So in this example, strpos() returns 0 (which is then coerced to false when referenced in the if statement). That’s why the code doesn’t work properly.

The correct solution would be to explicitly compare the value returned by strpos() to false as follows:

$str1 = 'yabadabadoo';
$str2 = 'yaba';
if (strpos($str1,$str2) !== false) {
    echo "\"" . $str1 . "\" contains \"" . $str2 . "\"";
} else {
    echo "\"" . $str1 . "\" does not contain \"" . $str2 . "\"";
}

Note that we used the !== operator, not just the != operator. If we use !=, we’ll be back to the problem that 0 is coerced to false when referenced in a boolean expression, so 0 != false will evaluate to false.

 

2:

What will be the output of the code below and why?

$x = 5;
echo $x;
echo "<br />";
echo $x+++$x++;
echo "<br />";
echo $x;
echo "<br />";
echo $x---$x--;
echo "<br />";
echo $x;

 

The output will be as follows:

5
11
7
1
5

Here’s are the two key facts that explain why:

1. The term $x++ says to use the current value of $x and then increment it. Similarly, the term $x-- says to use the current value of $x and then decrement it.
2. The increment operator (++) has higher precedence then the sum operator (+) in order of operations.

With these points in mind, we can understand that $x+++$x++ is evaluated as follows: The first reference to $x is when its value is still 5 (i.e., before it is incremented) and the second reference to $x is then when its value is 6 (i.e., before it is again incremented), so the operation is 5 + 6 which yields 11. After this operation, the value of $x is 7 since it has been incremented twice.

Similarly, we can understand that $x---$x-- is evaluated as follows: The first reference to $x is when its value is still 7 (i.e., before it is decremented) and the second reference to $x is then when its value is 6 (i.e., before it is again decremented), so the operation is 7 - 6 which yields 1. After this operation, the value of $x is back to its original value of 5, since it has been incremented twice and then decremented twice

 3:

What will be the values of $a and $b after the code below is executed? Explain your answer.

$a = '1';
$b = &$a;
$b = "2$b";

Both $a and $b will be equal to the string "21" after the above code is executed.

Here’s why:

The statement $b = &$a; sets $b equal to a reference to $a (as opposed to setting $b to the then-current value of $a). Thereafter, as long as $b remains a reference to $a, anything done to $a will affect $b and vice versa.

So when we subsequently execute the statement $b = "2$b", $b is set equal to the string "2" followed by the then-current value of $b (which is the same as $a) which is 1, so this results in $b being set equal to the string "21" (i.e., the concatenation of "2" and "1"). And, since $b is a reference to $a, this has the same affect on the value of $a, so both end up equal to "21".