<form> </form>
<input type="text" name="something" id="inputfield" />
<script type="text/javascript">
document.getElementById('inputfield').addEventListener('keypress', function() {
alert('you pressed a key');
});
</script>>
a good one to use is typically 'change'
<input type="text" name="something" id="ainputfield" />
<script type="text/javascript">
document.getElementById('ainputfield').addEventListener('change', function() {
console.log(document.getElementById('ainputfield').value);
});
</script>>
for buttons and the like, you probably want to use a 'click'
<html>
<head>
<title>Button Function</title>
<script type="text/javascript">
function buttonPushed()
{
document.write("Why did you do that?");
}
function init() {
document.getElementById('abutton').addEventListener('click', buttonPushed);
}
window.addEventListener('load', init);
</script>
</head>
<body>
<form>
<input type="button" name="abutton" id="abutton" value="Do NOT Push Me" />
</form>
</body>
</html>
Something...The HTML (named ajax_example.html):
<html>
<head>
<title>AJAX Example</title>
<!-- Load up the AJAX External JavaScript file -->
<script type="text/javascript" src="p5.js"></script>
<!-- Local Javascript Functions and so on -->
<script type="text/javascript">
// A variable to hold the interval id
var interval = null;
// A function to call our AJAX PHP script
function call_ajax()
{
loadStrings('ajax_example.txt?rand='+Math.random(),ajax_return);
}
// A function that gets called when ajax returns
function ajax_return(response)
{
document.getElementById("messages").innerHTML = response;
}
// Setup AJAX function, creates a timeout so that we run something periodically
function setup_ajax()
{
// Set interval of 5000 milliseconds
// Keeps going...
interval = setInterval(call_ajax,5000);
// Only happens once..
//interval = setTimeout(call_ajax,5000);
}
// Register setup_ajax with the onload event of the window (when it is done loading)..
window.addEventListener('load', setup_ajax);
</script>
</head>
<body>
<b>Looky here!</b>
<div id="messages" style="overflow: auto; width: 500px; height: 400px;">
Something should pop up here..
</div>
</body>
</html>
The above example is very simplistic but a illustrates many points. First of all, the browser loads the HTML and executes the JavaScript contained within ajax_example.html. At the bottom of the JavaScript there is an "window.addEventListener" for the "load" event which is assigned to run a function called "setup_ajax". This ensures that the "setup_ajax" function will run after the HTML page is rendered and the JavaScript functions are all defined.
JSON stands for JavaScript Object Notation. It has become a standard way to provide machine readable data to and from web services. Despite the fact that JavaScript is part of it's title, it is generally useful in all programming languages.
(XML - Extensible Markup Language is another popular means for providing machine readable data to and from web services.)
As stated on the json.org site: An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).
A simple JSON object
{
fist_name: "Shawn",
last_name: "Van Every
}
An array of JSON objects
[
{
fist_name: "Shawn",
last_name: "Van Every"
},
{
fist_name: "Joe",
last_name: "Frank"
}
]
values can be string, number, null or boolean (true/false)
One JSON data feed that might be interesting is from OpenWeatherMap. Their API is documented here.
This is the feed for New York City's data: http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial which yields the following:
{"coord":{"lon":-74.005966,"lat":40.714272},"sys":{"country":"US","sunrise":1380106043,"sunset":1380149242},"weather":[{"id":800,"main":"Clear","description":"Sky is Clear","icon":"01n"}],"base":"gdps stations","main":{"temp":60.44,"pressure":1013,"temp_min":54,"temp_max":66.2,"humidity":88},"wind":{"speed":2.22,"gust":3.08,"deg":285},"rain":{"3h":0},"clouds":{"all":0},"dt":1380076310,"id":5128581,"name":"New York","cod":200}
We can make this JSON easier to read by doing some formatting: http://jsonformatter.curiousconcept.com/
After formatting we get the following:
{
"coord":{
"lon":-74.005966,
"lat":40.714272
},
"sys":{
"country":"US",
"sunrise":1380106043,
"sunset":1380149242
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"Sky is Clear",
"icon":"01n"
}
],
"base":"gdps stations",
"main":{
"temp":60.44,
"pressure":1013,
"temp_min":54,
"temp_max":66.2,
"humidity":88
},
"wind":{
"speed":2.22,
"gust":3.08,
"deg":285
},
"rain":{
"3h":0
},
"clouds":{
"all":0
},
"dt":1380076310,
"id":5128581,
"name":"New York",
"cod":200
}
We see a lot of what we might expect, temp, pressure, humidity and so on. Also of interest is the sunrise and sunset time. These are particularly interesting because they are represented in standard "unix timestamp" which is the number of seconds from January 1, 1970. http://www.epochconverter.com/ - Command line: date "+%s"
To pull a value out of this JSON structure, we simply treat it like it is a javascript object and use dot syntax to traverse through the structure. To get the current temperature, we use the top level object and keep going down, theObject.main.temp should contain the current temperature.
var theObject = {
"coord":{
"lon":-74.005966,
"lat":40.714272
},
"sys":{
"country":"US",
"sunrise":1380106043,
"sunset":1380149242
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"Sky is Clear",
"icon":"01n"
}
],
"base":"gdps stations",
"main":{
"temp":60.44,
"pressure":1013,
"temp_min":54,
"temp_max":66.2,
"humidity":88
},
"wind":{
"speed":2.22,
"gust":3.08,
"deg":285
},
"rain":{
"3h":0
},
"clouds":{
"all":0
},
"dt":1380076310,
"id":5128581,
"name":"New York",
"cod":200
};
console.log("Temperature is: " + theObject.main.temp);
Unfortunately, there are quite a few security restrictions on making AJAX requests across domains. If you are interested in investigating those and how to overcome them, checkout this: http://www.html5rocks.com/en/tutorials/cors/.
Fortunately, since we are using libraries such as p5.js we don't have to worry so much. (I hope)
function setup() {
loadJSON("http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial",jsonLoaded);
}
function jsonLoaded(theObject) {
console.log("Temperature is: " + theObject.main.temp);
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial",
dataType: 'json',
success: function(data) {
alert("Temperature is: " + data.main.temp );
},
error: function() {
alert("error");
}
});
});
</script>