JavaScript & css Flashcards
(10 cards)
You want to position an element relative to the parent. You are using position: absolute CSS property. You have following HTML and CSS. To which element your button will be relatively positioned?
<section>
<article>
<p>Click on the button to close the section</p>
<div>
<button>Close</button>
</div>
</article>
</section>
<style>
section {
width: 300px;
height: 100%;
position: relative;
}
article {
position: fixed;
}
.button-holder {
position: static;
}
button {
position: absolute;
top: 0;
right; 0;
}</style>✅ The <button> will be positioned relative to the <article> element.</button>
An element with position: absolute is positioned relative to the nearest positioned ancestor, where “positioned” means that the ancestor has a CSS position of relative, absolute, or fixed.
If no such ancestor exists, it will be positioned relative to the initial containing block (typically the <html> or <body>).
button is absolutely positioned.
It will look for the closest ancestor that is positioned (i.e., not static).
.button-holder is position: static
→ Not considered a positioned ancestor.
article is position: fixed
✅ This is a positioned ancestor, so it qualifies.
section is position: relative, but it’s skipped because article is closer.
What is the correct way to set the text colour to white for all h1 elements on the page using CSS
h1.all{color:#000000;}
h1{color:#FFF;}
h1>*{text-color:white}
all.h1{text-color:#FFFFFFF;}
h1{color:#000}
❌ h1.all{color:#000000;}
Targets <h1> elements with class=”all” Does not affect all <h1>s, only those with the all class.Also sets the color to black, not white
✅ h1{color:#FFF;}
❌h1 > * { text-color: white; }
text-color is not a valid CSS property.Also targets children of <h1>, not <h1> itself
❌all.h1 { text-color: #FFFFFFF; }
Invalid selector (all.h1 means tag all with class h1, but all is not an HTML tag); text-color is invalid;
❌h1 { color: #000; }
valid CSS syntax.Sets the color to black, not white
What is Closure in JavaScript
A closure is a function which is immediately invoked and executed as soon as it is defined
A closure is a function inside another function that has access to the outer function variable
A closure is a function that is passed to another function as a parameter and is invoked or executed inside the other function
✅A closure is a function inside another function that has access to the outer function variable
A closure is created when a function remembers the variables from its outer lexical scope, even after the outer function has finished executing.
What is the difference between closure in javascript and java
JavaScript: A closure is created when a function remembers the variables from its outer lexical scope, even after the outer function has finished executing.
Java: Java doesn’t have “closures” in the same dynamic sense, but starting from Java 8, it supports lambdas and effectively final variables — enabling closure-like behavior.
What is the difference between java and javaScript
JavaScript is a dynamic, functional-first language, while Java is statically typed and object-oriented.
Consider the following website how many HTTP request will the browser have to make until the page is fully loaded
<html>
<head>
<title>Parcel Sandbox</title>
<meta></meta>
<link></link>
<link></link> rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello world</h1>
<img></img>
</body>
</html>
✅ 1 The initial page load
✅ 1 Favicon file from <link></link>
✅ 1 stylesheet
✅ 1 Loaded via <img src=…>
✅ Total number of HTTP requests:4
Where could we place our
tag according to HTML standard
Only inside <head> section
Only inside <body> section
In the <head> and in the <body> sections
no matters
✅ In the <head> and in the <body> sections
If put in <head> scripts block page rendering unless marked with async or defer, so we should put it with defer in <head> . With defer in <head> Loads scripts without blocking and runs after HTML is parsed
At end of <body> Best practice — allows HTML to load before script runs
What will be the console outputs?
var hero = {
_name: ‘John Doe’,
getName: function() {
return this._name;
}
};
var getHeroName = hero.getName;
console.log(getHeroName());
console.log(hero.getName());
✅ Console Output:
undefined
John Doe
- hero.getName():
This is a method call on an object. So this refers to the hero object.
✅ this._name → ‘John Doe’ - getHeroName():
You assigned hero.getName to getHeroName, but then called it without a context (i.e., not as a method of hero).
So this inside getName will not refer to hero.
In non-strict mode, this will default to the global object (window in browsers), and _name is not defined there.
➡️ So this._name is undefined
primitive types in JavaScript
JavaScript Primitive Types:
string
Represents a sequence of characters
Example: “hello”, ‘world’
number
Represents both integers and floating-point numbers Example: 42, 3.14, NaN, Infinity
bigint
Represents integers of arbitrary size
Example:1234567890123456789012345678901234567890n
boolean
Represents logical values
Example: true, false
undefined
Indicates a variable that has been declared but not assigned a value
Example: let x; // x is undefined
null
Represents the intentional absence of any value
Example: let obj = null;
symbol
Represents a unique and immutable identifier (useful as object keys)
Example: const id = Symbol(‘id’);
These types are immutable and not objects.
Everything else in JavaScript (arrays, functions, objects) is a non-primitive (reference) type.
