In: Computer Science
3. Every HTML element has innerHTML and outerHTML properties. What is the difference between the two?
4. Suppose a variable x holds “dog”. After the following code gets executed, what does x hold? x += "fish";
5. When the following code executes, what message does the dialog box display? var month = "January"; if (month.toLowerCase() == "january") { alert("It is " + month + "!"); }
6. After the following code executes, what does x hold? var animal = "porcupine"; var x = animal.lastIndexOf("p", 3);
7. What is the purpose of the z-index CSS property?
8. When executed, what does the following code fragment display? var x = 5; var y = x++; alert("x = " + ++x + ", y = " + y);
(3.) Difference between innerHTML & outerHTML:
innerHTML: It is a property of a DOM (DatavObject Model) element that represents the HTML data inside the element in between opening and closing tags.
outerHTML: It is a property of a DOM (DatavObject Model) element that represents the HTML data inside the element in between opening and closing tags as well as HTML data of the selected element.
Example:
<tr id="table_row">
    <td>FIRST</td>
    <td>SECOND</td>
</tr>
In this above example, innerHTML returns only <td> element, whereas outerHTML returns <tr> with <td> elements.
(4.)
var x = "dog";
x += "fish";
document.write(x);
Output:

(5.)
var month = "January";
if (month.toLowerCase() == "january"){
        alert("It is " + month + "!");
}
Output:

(6.)
var animal = "porcupine";
var x = animal.lastIndexOf("p", 3);
document.write(x)
Output:

(7.)
The main purpose of the z-index CSS property to sets the stacking level of an element. There are two types by which we can use z-index property: (1.) auto (2.) integer
Example:
<!DOCTYPE html>
<html>
   <head>
   </head>
   
   <body>
      <div style = "background-color:blue;
         width:200px;
         height:200px;
         position:relative;
         top:10px;
         left:80px;
         z-index:2">
      </div>
      
      <div style = "background-color:green;
         width:200px;
         height:200px;
         position:relative;
         top:-80px;
         left:35px;
         z-index:1;">
      </div>
   </body>
</html> 
Output 1:

<!DOCTYPE html>
<html>
   <head>
   </head>
   
   <body>
      <div style = "background-color:blue;
         width:200px;
         height:200px;
         position:relative;
         top:10px;
         left:80px;
         z-index:0">
      </div>
      
      <div style = "background-color:green;
         width:200px;
         height:200px;
         position:relative;
         top:-80px;
         left:35px;
         z-index:1;">
      </div>
   </body>
</html> 
Output 2:

(8.)
var x = 5;
var y = x++;
alert("x = " + ++x + ", y = " + y);
Output:

Thumbs Up Please !!!