BOM Elements
1. Window : The root of all BOM objects, it represents the browser window/tab. Window sabse bada object hai aur BOM ke har element ka base hai. Iske andar saare objects aur methods hote hain.
// Alert box
Window.alert ( "Welcome to BOM!" );
// Check window size
Console.log (window.innerWidth, window.innerHeight);;
2. Document Object : Document HTML ke saath kaam karta hai (DOM ka part, but linked with BOM). Isse web page ka content select aur modify karte hain. Iska kaam hai, page ke content aur structure ko control karna.
// Change the page title
document.title = "New Title";
// Modify an HTML element
document.getElementById ( "myDiv" ).innerText = "Hello, World!";
3. Location (For URL Management) : Location current page ke URL ke saath kaam karta hai. Iska main usage hai page ko redirect karna, URL fetch karna, ya page ko reload karna.
// Redirect to another page
window.location.href = "https://www.example.com";
// Reload the current page
window.location.reload();
4. History (For Navigation) : History browser ki back aur forward navigation ko control karta hai. Iska usage hai back jaana, forward jaana, ya history ki length check karna.
// Go back to the previous page
window.history.back();
// Go forward to the next page
window.history.forward();
5. Navigator (Browser Information) : Navigator browser aur user device ke details provide karta hai. Iska usage hai browser info fetch karna, user online/offline status check karna, ya cookies enabled hai ya nahi.
// Get the browser name
console.log(navigator.appName);
// Check if the user is online
console.log(navigator.onLine);
// Get the user's operating system
console.log(navigator.platform);
6. Alert, Confirm, Prompt (For User Interaction) : Pop-ups dikhane ke liye use hoti hain. Alert dena, user se confirmation lena, ya input retrieve karna iska kaam hai.
// Show an alert box
alert( "Hello, Welcome to BOM!" );
// Ask for confirmation (Yes/No)
let isConfirmed = confirm( "Are you sure?" );
console.log(isConfirmed);
// Prompt the user for input
let userName = prompt( "What is your name?" );
console.log(userName);
7. LocalStorage and SessionStorage (For Storing Data) : Browser ke andar data store karne ke liye. LocalStorage me data permanently store hota hai aur SessionStorage tab tak rehta hai jab tak browser close na ho.
// Save data to LocalStorage
localStorage.setItem( "username", "JohnDoe" );
// Retrieve data from LocalStorage
let username = localStorage.getItem( "username" );
console.log(username);
// Save data to SessionStorage
sessionStorage.setItem( "sessionID", "12345" );
// Retrieve data from SessionStorage
let sessionID = sessionStorage.getItem( "sessionID" );
console.log(sessionID);
8. Screen (Screen Size and Resolution) : Screen object user ke screen ke width aur height ke details provide karta hai. Responsive design aur screen resolution check karne ke liye useful hai.
// Get the screen width
console.log(screen.width);
// Get the screen height
console.log(screen.height);
// Get the screen's color depth
console.log(screen.colorDepth);
9. Timers (setTimeout and setInterval) : Timed actions perform karne ke liye. Delay ke saath action karna ya repeatedly action perform karna iska kaam hai.
// Set a timer to execute code after a delay
setTimeout( function() { console.log( "This message is delayed!" ); }, 2000 );
// Set an interval to repeat code at a fixed interval
setInterval( function() { console.log( "This message repeats every 3 seconds" ); }, 3000 );
10. Fetch (For HTTP Requests) : API se data fetch karne ya HTTP requests send karne ke liye modern and efficient method hai.
// Fetch data from a URL (GET request)
fetch( "https://api.example.com/data" ).then( response => response.json() ).then( data => console.log( data ) );
// Send data to a URL (POST request)
fetch( "https://api.example.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify( { "name": "John", "age": 30 } )
}).then( response => response.json() ).then( data => console.log( data ) );
11. Geolocation (For User Location) : User ki current geographical location fetch karne ke liye use hota hai. Iska kaam hai latitude aur longitude retrieve karna.
// Get the user's current location (latitude and longitude)
.geolocation.getCurrentPosition( function(position) {
console.log( "Latitude: " + position.coords.latitude );
console.log( "Longitude: " + position.coords.longitude );
},
function(error) { console.log( error ); }
);
// Get continuous location updates
navigator.geolocation.watchPosition( function(position) {
console.log( "Updated Latitude: " + position.coords.latitude );
console.log( "Updated Longitude: " + position.coords.longitude );
},
function(error) { console.log( error ); }
);
12. Window.open and Window.close (For Tabs) : Browser ke naye tabs ya windows ko kholne aur band karne ke liye use hota hai.
// Open a new browser tab or window
let newWindow = window.open( "https://www.example.com", "_blank" );
console.log( "New window opened: ", newWindow );
// Close the newly opened window
newWindow.close();