JavaScript & css 2

Question 1

What is NPM used for

Answer 1

Managing various packages needed for our web application

Question 2

What will be the result of the next code?
var x = 1;
function f() {
console.log(x);
var x = 2;
}
f();

Answer 2

✅ undefined
In JavaScript, variable declarations using var are hoisted to the top of their function scope, but their initializations are not.

So the function f() behaves internally like this due to hoisting:
function f() {
var x; // Declaration is hoisted
console.log(x); // x is undefined here
x = 2; // Initialization happens after the log
}
Even though there’s a var x = 1 in the outer scope, the local var x inside f shadows it.

Question 2

What will be the clolor of the hello world text

<style>

  #foo .bar {
    color: blue;
  }
  #foo p {
    color: yellow;
  }
  .bar#foo {
    color: red;
  }
  p#foo {
    color: green;
  }

</style>

<p>Hello World</p>

Answer 2

foo.bar { color: blue; }

Matches: ✅ Yes (id=”foo” and class=”bar”)

Specificity: #id.class → (1,1,0)`

Matches: ❌ No — This targets a <p> inside an element with id=”foo”

Our element is a <p> with id foo, not a child of an element with id foo.

.bar#foo { color: red; }

Matches: ✅ Yes (class=”bar” and id=”foo”)

Specificity: .class#id → (1,1,0)` — same as the first rule.

p#foo { color: green; }

Matches: ✅ Yes (<p> with id=”foo”)

Specificity: tag#id → (1,0,1)`

Both #foo.bar and .bar#foo have equal specificity, and they both match the element.

👉 In this case, the one that comes later in the CSS takes precedence — that’s the .bar#foo { color: red; } rule.

Question 3

What will be the console output if you click on first <a> tag</a>

<ul>
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>

<script>
var as = document.getElementsByTagName("a");
  for(var i = 0; i < as.length; i++) {
    as[i].onclick = function() {
      console.log(as[i].innerText)
    }
  }
</script>

Answer 3

clicking any link causes an error or undefined logged (due to closure problem).

var is function-scoped, not block-scoped.

So all the functions created in the loop share the same i variable.

When the loop completes, i is no longer changing — it is now as.length (which is 3, because there are 3 <a> elements).</a>

Now all event handlers (for as[0], as[1], as[2]) reference the same i = 3.

Therefore, when you click any link, the event handler tries to run: console.log(as[3].innerText);

Question 4

what will be the output of this code
function changeStuff(arg1, arg2) {
arg1.item = “bar”;
arg2 = {item: “bar”};
}

var obj1 = {item: “foo”},
obj2 = {item: “foo”};

changeStuff(obj1, obj2);

console.log(obj1.item);
console.log(obj2.item);

Answer 4

✅ Output:
bar
foo

obj1 and obj2 are two separate objects with the same initial value: {item: “foo”}.

When you pass them to the function changeStuff, both arg1 and arg2 receive references to those objects.

Now, inside changeStuff:

arg1.item = “bar”; → modifies the object that arg1 points to, which is obj1. So obj1.item becomes “bar”.

arg2 = {item: “bar”}; → reassigns arg2 to point to a new object, but this does not affect obj2 outside the function. JavaScript function arguments are passed by value—but for objects, the value is a reference. Reassigning arg2 inside the function doesn’t change the original reference obj2.

Question 5

What is not a type of mobile application
Native application
Adaptive Application
Web Application

Answer 5

❌ Adaptive Application – Not a standard type of mobile application
Common Types of Mobile Applications:
Native Application
Web Application
Hybrid Application