Lesson 22: Advanced APIs
This lesson will give you an introduction to advanced APIs (and JavaScript).
HTML5 and JavaScript
HTML5 gives you the ability to include some advanced features and interactions that can really add some interesting features to your website.
The challenge is that none of them is pure HTML5 code. They all require a combination of HTML and JavaScript, which is a more advanced coding language. I know, I know, another language!
HTML, CSS, and JavaScript often all work together in coordination to give us some great websites. When you get to the more advanced HTML functionality, you need to start learning more. But we'll make this as painless as possible. Now that you understand HTML, it's much easier to learn JavaScript.
So let's learn some very basic JavaScript! You'll learn more later by taking the JavaScript Tutorial, but for now, all you need is some basics.
Introduction to JavaScript
JavaScript functions are the backbone of JavaScript. They connect your HTML elements with actually doing something. A function looks like this:
function functionName()
A function always has some sort of code following it that defines what action should occur. The code is between curly brackets { } and usually ends with a semicolon.
Functions always occur inside <script> elements. And <script> elements are either put in your <head> or right before the </body> element. If you have a lot of JavaScript running on a page, you should put them as low as you can on the page so they won't affect the speed of loading your page. For now, you can just put them in the <head> element.
A full JavaScript script looks like this:
<head>
<script>
function functionName()
{
some code;
}
</script>
</head>
In your HTML, you "call" your script by adding its name and event to an element, like a button. Events could be, for example, onclick or onhover where somthing happens (the event) when you click or hover the element, respectively. There are a number of other events that you'll learn about in the JavaScript tutorial.
Calling a script
<button onclick="functionName()">Go!</button>
JavaScript can do all sorts of things, but one of the most important is to be able to use some logic that says "If...then...else". So "If you're browser supports geolocation, then show coordinates. Else, show this error message."
If, then, else example
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="Geolocation is not supported by this browser.";
}
That's all you need to know about Javascript for now. In the next lesson we will take a closer look at geolocation.
| Related topics in the | Replies | Views |
|---|---|---|
| No related topics yet | ||