alert
function, which takes a single string parameter%%javascript
alert("HELLO");
confirm
is similar to alert, taking one string parametertrue
or false
depending on the answer%%javascript
var resp = confirm("Please select cancel or ok");
if(resp === true){
alert("Its ok!");
}
else{
alert("Its been cancled");
}
%%javascript
var resp = prompt("Please type your name:","Batman");
alert("Hello " + resp + "!")
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
$()
function¶$()
which is used primarily one of two ways$(function(){
})
$('selector')
%%html
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(function(){
$('#jq1').html("HELLO")
}
);
</script>
</head>
<body>
<p id="jq1"></p>
</body>
</html>
$.ajax({
url: 'myurl.php',
success: function(){},
dataType: 'json',
data: {"key":val},
});
moment
function returns a suped-up date object.format()
allows the date to be formatted in a wide array of strings.subtract()
\ add()
performs calendar math.fromNow()
returns a string representing how long ago\ from now something was\ will be%%html
<!DOCTPYE>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
</head>
<body>
<p id="mo1"></p>
<p id="mo2"></p>
<p id="mo3"></p>
<p id="mo4"></p>
<p id="mo5"></p>
<script>
var now = moment();
document.getElementById("mo1").innerHTML = now.format();
document.getElementById("mo2").innerHTML = now.format("MM/DD/YYYY");
document.getElementById("mo3").innerHTML = now.endOf('hour').fromNow();
document.getElementById("mo4").innerHTML = now.subtract(12,'days').format("DD/MM/YYYY");
document.getElementById("mo5").innerHTML = moment().add(12,'days').calendar();
</script>
</body>
</html>
tileLayer
of the map handles the drawing of the tilesjavscript
my_map.tileLayer(tileURL, {attribution: 'attribution html'})
%%html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css"
integrity="sha256-LcmP8hlMTofQrGU6W2q3tUnDnDZ1QVraxfMkP060ekM="
crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"
integrity="sha256-kdEnCVOWosn3TNsGslxB8ffuKdrZoGQdIdPwh7W1CsE="
crossorigin="anonymous"></script>
<style>
#mapid{height:30em;}
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid');
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(mymap);
</script>
</body>
</html>
setView
function as an array. %%html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css"
integrity="sha256-LcmP8hlMTofQrGU6W2q3tUnDnDZ1QVraxfMkP060ekM="
crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"
integrity="sha256-kdEnCVOWosn3TNsGslxB8ffuKdrZoGQdIdPwh7W1CsE="
crossorigin="anonymous"></script>
<style>
#mapid{height:30em;}
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid');
mymap.setView([0,0],0);
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(mymap);
</script>
</body>
on
function on your map objectmap.on('move',function(){
});
marker([lat,long])
functionL
and then added to the mapbindPopup()
%%html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css"
integrity="sha256-LcmP8hlMTofQrGU6W2q3tUnDnDZ1QVraxfMkP060ekM="
crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"
integrity="sha256-kdEnCVOWosn3TNsGslxB8ffuKdrZoGQdIdPwh7W1CsE="
crossorigin="anonymous"></script>
</head>
<style>
#mapid {height:30em;}
</style>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid');
mymap.setView([0,0],5);
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(mymap);
var m = L.marker([0,0]).addTo(mymap);
m.bindPopup("This is 0,0");
</script>
</body>
</html>
window.navigator
objectwindow.navigator.geolocation
will not existgetCurrentPosition()
watchPosition
%%html
<!DOCTYPE html>
<html>
<head>
<body>
<div id="loc1"></div>
<script>
if('geolocation' in window.navigator)
{
window.navigator.geolocation.getCurrentPosition(
function(position) {
//document.getElementById('loc1').innerHTML =
alert("You are at " +
position.coords.latitude + ", " +
position.coords.longitude + "!");
});
}
else{
document.getElementById("loc1").innerHTML = "Position Not Available";
}
</script>
</body>
</html>
javsascript
Notification.requestPermission();
new Notification("Hello");
%%html
<!DOCTYPE html>
<html>
<head>
<body>
<div id="not1"></div>
<script>
if('Notification' in window)
{
Notification.requestPermission(function(perm){
if(perm == "granted"){
var note = new Notification("Hello from your OS!");
}
});
}
else{
document.getElementById("not1").innerHTML = "Notifications not supported";
}
</script>
</body>
</html>