Login | Register | FAQ
Anonymous


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 RepliesViews
No related topics yet

+ Post a new topic


<< Lesson 21: Video and Audio

Lesson 23: Geolocation: You Are Here >>