IES: JS-deck 6 Flashcards

1
Q

JS Object

A
  • JS significant: avoid for variable/function names
  • collection of key-value pairs, where the keys are strings (or symbols) and the values can be any data type (including other objects or functions)
  • fundamental building blocks in JS used to represent real-world entities, data structures, and more
  • a standalone entity, with properties and type
  • Examples
    // Creating a JavaScript object using an object literal
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  occupation: "Developer",

** // Method within the object**

  greet: function() {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
  }
};

// Accessing object properties

console.log(person.firstName); // Output: John
console.log(person.age); // Output: 30

// Calling the object method
person.greet(); // Output: Hello, my name is John Doe.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

JS prototype

A
  • JS Object
  • JS significant: avoid for variable/function names
  • object from which other objects inherit properties and methods: a fundamental concept in JS’s object-oriented programming model.
  • allow properties and methods to be shared among instances of the function or object
  • Examples
    // Constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Add a method to the prototype

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// Create instances of Person

const john = new Person("John", 30);
const jane = new Person("Jane", 25);

// Call the greet method on the instances

john.greet(); // Output: "Hello, my name is John and I am 30 years old."
jane.greet(); // Output: "Hello, my name is Jane and I am 25 years old."
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

JS String

A
  • JS Primitive data type (numbers, Booleans, etc.)
  • JS significant: avoid for variable/function names
  • are not technically objects but behave like them in many ways.
  • Are primitive without methods or properties whereas objects are complex data types.
  • Example
let str = "Hello World";
// String primitive
console.log(typeof str); // Output: string
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

JS toString

A
  • JS Method
  • JS significant: avoid for variable/function names
  • Converts an object to a string representation: built-in method available on most JS objects-returns a string representation of the object
  • Syntax
    object.toString();
  • Examples
    1. Converting a number to a string:
let num = 10;
let str = num.toString();
console.log(str); // Output: "10"
console.log(typeof str); // Output: "string"
  1. Converting an array to a string:
let fruits = ["Apple", "Banana", "Orange"];
let str = fruits.toString();
console.log(str); // Output: "Apple,Banana,Orange"
  1. Converting an object to a string:
let person = {
  name: "John",
  age: 30
};
let str = person.toString(); 
console.log(str); // Output: "[object Object]"
  1. Customizing the toString() method:
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.toString = function() {
  return `Name: ${this.name}, Age: ${this.age}`;
};
let john = new Person("John", 30);
console.log(john.toString()); // Output: "Name: John, Age: 30"
  1. Using the Radix parameter (for Numbers):
let num = 10;
let binaryStr = num.toString(2); // Convert to binary
let hexStr = num.toString(16); // Convert to hexadecimal
console.log(binaryStr); // Output: "1010"
console.log(hexStr); // Output: "a"
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

JS undefined

A
  • JS primitive data type (numbers, Boolean, etc.)
  • JS significant: avoid for variable/function names
  • It represents the absence of a value: a primitive data type and special value indicating a variable has been declared but hasn’t been assigned a value.
  • Examples
let x; // x is declared but not assigned a value
console.log(x); // Output: undefined
function greet(name) {
  console.log("Hello, " + name);
}
greet(); // Output: Hello, undefined 
// The parameter 'name' is not provided, so it's undefined

```

const obj = {};
console.log(obj.age); // Output: undefined
// The ‘age’ property does not exist on the object
~~~

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

JS valueOf

A
  • JS Method
  • JS significant: avoid for variable/function names
  • Retrieves the primitive value (like a number, string, or Boolean) of an object
  • Available on all JS objects-inherited from Object.prototype
  • often called automatically where a primitive value is expected such as math operations or comparison (rare, otherwise)
  • Examples
    1. String object:
const strObj = new String("Hello World");
console.log(strObj.valueOf()); // Output: "Hello World" 
  1. Number object:
const numObj = new Number(10);
console.log(numObj.valueOf()); // Output: 10
  1. Date Object:
const dateObj = new Date();
console.log(dateObj.valueOf()); // Output: Timestamp in milliseconds 
  1. Custom object:
function MyNumber(value) {
  this.value = value;
}
MyNumber.prototype.valueOf = function() {
  return this.value;
};
const myNum = new MyNumber(5);
console.log(myNum + 3); // Output: 8 
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

HTML alert

A
  • HTML Window Object
  • JS significant: avoid for variable/function names
  • displays alert box with message and OK button
  • used to bring information through to user
  • Syntax:
    alert(message)
  • Return value:
    none
  • Examples:
    1. Alert box with line-breaks:
    alert("Hello\nHow are you?");
    2. Alert the hostname of the current URL:
    alert(location.hostname);
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

off

HTML all

A
  • HTML Property(CSS)
  • JS significant: avoid for variable/function names
  • JS significant: avoid for variable/function names
  • In CSS, the shorthand property setting all tags to initial or inherited values; or in some cases, sets values to another spreadsheet origin
  • Syntax:
    all: initial|inherit|unset|revert|revert-layer;
  • Default value: none
  • Property values:
    1. initial: set all properties to their default values
    2. Inherit: set all properties to their inherited value.
    3. unset: all element’s attributes updated to either original values if inherited by default or initial values if not.
    4. revert: undo/restore previous state/value of property/setting
    5. revert-layer: Reverse modifications made to specific layer, restoring to previous state/config. within software/system
  • Example: all: initial property
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS all property
    </title>
    <!-- CSS all property -->
    <style>
        h1,
        h3 {
            background-color: yellow;
            color: green;
            all: initial;
        }
        body {
            text-align: center;
            all: initial;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>all property</h3>
</body>
</html>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

HTML anchor

A
  • HTML Name
  • JS significant: avoid for variable/function names
  • defines a hyperlink, used to link from one page to another.
  • most important attribute is href indicating link destination
  • Example
    <a href="https://www.w3schools.com">Visit W3Schools.com!</a>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

HTML anchors

A
  • HTML Name
  • JS significant: avoid for variable/function names
  • defines a hyperlink, used to link from one page to another.
  • most important attribute is href indicating link destination
  • Example
    <a href="https://www.w3schools.com">Visit W3Schools.com!</a>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

HTML area

A
  • HTML Name, Window Object, or Property
  • JS significant: avoid for variable/function names
  • defines an area inside an image map (an image map is an image with clickable areas).
  • always nested inside a <map> tag
  • Example
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

HTML assign

A
  • HTML Name, Window Object, or Property
  • JS significant: avoid for variable/function names
  • Assigns a source or source properties to a target
  • Example
    // Assign Source to Target
    Object.assign(person1, person2);
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

HTML blur

A
  • HTML Name, Window Object, or Property
  • JS significant: avoid for variable/function names
  • removes the keyboard focus from the current element: focus with the help of the focus() method
  • apply the blur to any element
  • Syntax
    Object.blur()
  • Example
<html>
<head>
	<title>HTML DOM blur() Method</title>
</head>
<body style="text-align: center;">
	<h1 style="color:green;">
		GeeksforGeeks
	</h1>
	<h2>
		DOM blur Property
	</h2>
	<input type="text" id="txt" placeholder="Enter text here">
	<br>
	<br>
	<button type="button" onclick="inputFocus()">Focus</button>
	<button type="button" onclick="inputBlur()">Blur</button>
	<script>
		function inputFocus() {
			document.getElementById('txt').focus();
		}
		function inputBlur() {
			document.getElementById('txt').blur();
		}
	</script>
</body>
</html> 
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

HTML button

A
  • HTML Name, Window Object, or Property
  • JS significant: avoid for variable/function names
  • Tag defines clickable button
  • Inside <button> put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.): not possible with <input> button
  • always specify <button> type attribute: informs browsers
  • Example
    A clickable button
    <button type="button">Click Me!</button>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

HTML checkbox

A
  • HTML Name, Window Object, or Property
  • JS significant: avoid for variable/function names
  • Allows selection of 1+ options of limited number of choices
  • HTML <input> type attribute
  • a square box that is ticked (checked) when activated
  • For best accessibility practices, always add <label>
  • Syntax
    <input type="checkbox">
  • Example
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

HTML clearInterval

A
  • HTML Name, Window Object, or Property
  • JS significant: avoid for variable/function names
  • Clears a timer set with the setInterval() method
  • Syntax
    clearInterval(intervalId)[Interval ID]
  • Example
const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

(Displays time every second. Uses clearInterval() to stop time)

17
Q

HTML clearTimeout

A
  • HTML Name, Window Object, or Property
  • JS significant: avoid for variable/function names
  • clears a timer set with setTimeout()
  • Syntax
    clearTimeout(id_of_settimeout)
  • Example
const myTimeout = setTimeout(myGreeting, 3000);
function myGreeting() {
  document.getElementById("demo").innerHTML = "Happy Birthday to You !!"
}
function myStopFunction() {
  clearTimeout(myTimeout);
}

(prevents myGreeting() to execute)

18
Q

HTML clientInformation

A
  • HTML Name, Window Object, or Property
  • JS significant: avoid for variable/function names
  • Properties, methods, & events set inherited from Navigator
  • Determines if client runs Java applets or if browser’s userAgent contains Microsoft Internet Explorer line
  • Example
if (window.clientInformation.javaEnabled()) {
  // Java is enabled; applets can run.
}
19
Q

HTML close

A
  • HTML Name, Window Object, or Property
  • JS significant: avoid for variable/function names
  • closes window opened with open()
  • Syntax
    [item or object].close()
    Examples
document.open();
document.write("<h1>Hello World</h1>");
document.write("<p>Open owerwrites original content.</p>");
document.close();

(open a document, write some text to it, and close it)

function openWin() {
  myWindow = window.open("https://www.w3schools.com", "_blank", "width=200, height=100");
}
function closeWin() {
  myWindow.close();
}

(Open “www.w3schools.com” in a new window, and use close() to close it)

20
Q

HTML closed

A
  • HTML Name, Window Object, or Property
  • JS significant: avoid for variable/function names
  • closes window opened with open()
  • Syntax
    [item or object].close()
    Examples
document.open();
document.write("<h1>Hello World</h1>");
document.write("<p>Open owerwrites original content.</p>");
document.close();

(open a document, write some text to it, and close it)

function openWin() {
  myWindow = window.open("https://www.w3schools.com", "_blank", "width=200, height=100");
}
function closeWin() {
  myWindow.close();
}

(Open “www.w3schools.com” in a new window, and use close() to close it)