Since this can compromise privacy, the position is not available unless the user approves it. Note: geolocation is most accurate for devices with GPS, like smartphones.
The getCurrentPosition() method is used to return the user's position.
example: getCurrentPostion() method()
Click the button to get your coordinates.
code:
<div>
<button style="margin-left: 3vw" onclick="getLocation()">Try It</button>
<p class="examples" id="demo"></p>
</div>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
</script>
Handling errors and rejections：the second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:
<div>
<button style="margin-left: 3vw" onclick="getLocation1()">Try It</button>
<p class="examples" id="demo1"></p>
</div>
<script>
var xx = document.getElementById("demo1");
function getLocation1() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition1, showError);
} else {
xx.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition1(position) {
xx.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
xx.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
xx.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
xx.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
xx.innerHTML = "An unknown error occurred."
break;
}
}
</script>
To Display the result in a map, you need access to a map service, like Google Maps.
The getCurrentPosition() method returns an object on success. The latitude, longitude and accuracy properties are always returned. The other properties are returned if available.
The geolocation object also has other interesting methods: 1/ watchPosition() - returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car); 2/clearWatch() - stops the watchPosition() method.
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.
example: drag and drop
Drag the W3Schools image into the rectangle:
code:
<div>
<p class="examples">Drag the W3Schools image into the rectangle:</p>
<div style="margin-left: 3vw"; id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
To make an element draggable, set the draggable attribute to true: <img draggable="true">. Then, specify what should happen when the element is dragged. In the example above, the "ondragstart" attribute calls a function, drag(event), that specifies what data to be dragged. The dataTransfer.setData() method sets the data type and the value of the dragged data:
code:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In this case, the data type is "text" and the value is the id of the draggable element ("drag1").
The ondragover event specifies where the dragged data can be dropped. By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover event: event.preventDefault()
When the dragged data is dropped, a drop event occurs.In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
What is HTML web storage?：With web storage, web applications can store data locally within the user's browser. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
HTML web storage objects：HTML web storage provides two objects for storing data on the client:1/ window.localStorage - stores data with no expiration date, 2/ window.sessionStorage - stores data for one session (data is lost when the browser tab is closed). Before using web storage, check browser support for localStorage and sessionStorage:
The localStorage objectThe localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
The sessionStorage object：The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.
What is a web worker?：when executing scripts in an HTML page, the page becomes unresponsive until the script is finished. A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
