IES: JS-deck 6 Flashcards
JS Object
- 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 methodperson.greet(); // Output: Hello, my name is John Doe.
JS prototype
- 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."
JS String
- 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
JS toString
- 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"
- Converting an array to a string:
let fruits = ["Apple", "Banana", "Orange"]; let str = fruits.toString(); console.log(str); // Output: "Apple,Banana,Orange"
- Converting an object to a string:
let person = { name: "John", age: 30 }; let str = person.toString(); console.log(str); // Output: "[object Object]"
- 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"
- 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"
JS undefined
- 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
~~~
JS valueOf
- 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"
- Number object:
const numObj = new Number(10); console.log(numObj.valueOf()); // Output: 10
- Date Object:
const dateObj = new Date(); console.log(dateObj.valueOf()); // Output: Timestamp in milliseconds
- 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
HTML alert
- 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);
off
HTML all
- 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>
HTML anchor
- 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>
HTML anchors
- 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>
HTML area
- 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>
HTML assign
- 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 TargetObject.assign(person1, person2);
HTML blur
- 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>
HTML button
- 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>
HTML checkbox
- 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>
HTML clearInterval
- 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)
HTML clearTimeout
- 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)
HTML clientInformation
- 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. }
HTML close
- 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)
HTML closed
- 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)