ისწავლე

Location

location ობიექტი გამოიყენება ვებ-გვერდის მისამართის (URL) მანიპულაციისთვის. ობიექტის გამოყენება შესაძლებელია, როგორც window-დან, ასევე document-დანაც.

Location-ის ანატომია

გადაატარეთ (ან დააკლიკეთ) მაუსი მისამართზე ან თვისებაზე, რომ გაფერადდეს შესაბამისი ნაწილი.

თვისებები

მოცემული მაგალითების ფარგლებში, ლოკალი გულისხმობს შემდეგ მისამართს: http://localhost:4200/doc/guides/javascript/window/location

href

href თვისება განსაზღვრავს, სრულ URL-ს და გვაძლევს შესაძლებლობას, რომ განვაახლოთ ვებ-გვერდის მისამართი.

JS
const currentHref = location.href; // window.location.href-ც სწორია
console.log(currentHref); // 'https://iswavle.com/doc/guides/javascript/window/location'

location.href = 'https://everrest.educata.dev'; // გადაგვამისამართებს https://everrest.educata.dev მისამართზე

protocol

protocol თვისება განსაზღვრავს URL-ის პროტოკოლს ':'-ის ჩათვლით.

JS
console.log(location.protocol); // 'https:'

host

host თვისება განსაზღვრავს ჰოსტის სახელს პორტის ჩათვლით.

JS
console.log(location.host); // 'iswavle.com'
console.log(location.host); // 'localhost:4200' თუ ლოკალზე გავხსნით

hostname

hostname თვისება განსაზღვრავს ჰოსტის სახელს პორტის გარეშე.

JS
console.log(location.hostname); // 'iswavle.com'
console.log(location.hostname); // 'localhost' თუ ლოკალზე გავხსნით

port

port თვისება განსაზღვრავს პორტის მნიშვნელობას. თუ პორტი არ არის URL-ში, მაშინ დააბრუნებს undefined.

JS
console.log(location.port); // undefined
console.log(location.port); // '4200' თუ ლოკალზე გავხსნით

pathname

pathname თვისება განსაზღვრავს URL-ში არსებული path-ის მნიშვნელობას.

JS
console.log(location.pathname); // '/doc/guides/javascript/window/location'

search თვისება განსაზრავს URL-ში ცვლადების ნაწილს. თუ '?' არ არის გამოყენებული, მაშინ მნიშვნელობა undefined იქნება.

JS
location.href += '?search=ანატომია'; // ვებ-გვერდზე დავუმატოთ ცვლადი
console.log(location.search); // '?search=ანატომია'

hash

hash თვისება განსაზღვრავს URL-ში არსებული ფრაგმენტის მნიშვნელობას. თუ '#' არ არის გამოყენებული, მაშინ მნიშვნელობა undefined იქნება.

JS
location.href += '#Location_ანატომიაა'; // ვებ-გვერდზე დავუმატოთ ფრაგმენტის მნიშვნელობა
console.log(location.hash); // '#Location_ანატომია'
თითოეული თვისების განახლება ისე შეიძლება, როგორც href თვისების.

მეთოდები

assign

assign მეთოდი ღებულობს ერთ პარამეტრს და აბრუნებს არაფერს. გადაცემული პარამეტრის მიხედვით მოხდება შესაბამის URL-ზე ნავიგაცია. პარამეტრი შეიძლება იყოს როგორც absolute (მაგალითად https://iswavle.com/guides/javascript), ასევე relative (მაგალითად /guides/javascript). ამასთანავე, შესაძლებელია მიმდინარე მისამართის ფრაგმენტზე ნავიგაციაც.

JS
location.assign('https://iswavle.com/guides/javascript'); // გადაგვიყვანს 'https://iswavle.com/guides/javascript'
location.assign('home'); // გადაგვიყვანს მიმდინარე მისამართს + /home-ზე
location.assign('#ისწავლე'); // გადაგვიყვანს მიმდინარე მისამართს + #ისწავლე-ზე

reload

reload მეთოდი თავიდან ჩატვირთავს ამჟამინდელ მისამართს.

JS
location.reload();

replace

replace მეთოდი ჰგავს assign მეთოდს. განსხვავება მდგომარეობს history სესიის ჩაწერაზე. replace ისტორიაში არ შეინახავს ცვლილებას, ხოლო assign - პირიქით.

JS
location.replace('#ისწავლე'); // გადაგვამისამართებს 'https://iswavle.com/#ისწავლე'

შეჯამება

ამ სტატიაში განვიხილეთ location ობიექტის თვისებები და მეთოდები.