Difference between revisions of "JavaScript:jQuery"

From Progzoo
Jump to: navigation, search
(Programming some content)
(Programming some content)
 
Line 64: Line 64:
 
[[Image:q3_jQuery.png|400px]]
 
[[Image:q3_jQuery.png|400px]]
 
</td></tr></table>
 
</td></tr></table>
 +
 +
<table><tr><td>
 
You can add style to the elements (see question 4 for how to do this).
 
You can add style to the elements (see question 4 for how to do this).
 
The name of each country has been put in a div. The div has the fontSize set to 200%
 
The name of each country has been put in a div. The div has the fontSize set to 200%
The div has topMargin set to 2em
+
The div has marginTop set to 2em
 
+
 
The images have an 8px gray border.
 
The images have an 8px gray border.
+
</td><td>
 +
[[Image:q3_2_jQuery.png|400px]]
 +
</td></tr></table>
  
 +
<table><tr><td>
 
In this example each country has a div that floats left.
 
In this example each country has a div that floats left.
 
Inside each div is another div with the country name and an image for the flag.
 
Inside each div is another div with the country name and an image for the flag.
 
The flag height has been set to 100px
 
The flag height has been set to 100px
 
The outer div has a margin of 1em a background color of #BBB and a fixed with of 220px.
 
The outer div has a margin of 1em a background color of #BBB and a fixed with of 220px.
 +
</td><td>
 +
[[Image:q3_3_jQuery.png|400px]]
 +
</td></tr></table>
  
 
Note that the flags.zip file contains cl.json – you can use this to show hundreds of flags.
 
Note that the flags.zip file contains cl.json – you can use this to show hundreds of flags.

Latest revision as of 10:54, 2 January 2013

Introduction to jQuery and JavaScript

Hello World

Create two files yourself; q1.html and q1.js – these have the following content:

q1.htmlq1.js
<!doctype html>
<script src="jquery.min.js"></script>
<script src="q1.js"></script>
<body>
</body>
$(function(){
  alert('Hello World');
});

Hello jQuery.png

Download the jQuery file from http://jquery.com and save it in the same directory. Load q1.html into a web browser:

Adding Content

The $ function is called once the main page elements are loaded. You can build content in the ready function or you can examine the existing page when ready:

$(function(){
  $('body').append("Here is a button:");
  $('body').append($('<button/>',{text:'Click me'}));
});

You can make your button do something:

$(function(){
  $('body').append("Here is a button:");
  $('body').append($('<button/>',{text:'Click me',
    click:function(){
      alert('Hello World');
    }}));
});


Programming some content

The following example creates some words and images. You can get the gif images from http://progzoo.net/flags.zip

var cl = [
   {name:'Brazil',src:'br.gif'},
   {name:'France',src:'fr.gif'},
   {name:'Greece',src:'gr.gif'},
   {name:'Italy', src:'it.gif'},
   {name:'South Africa',src:'za.gif'}
   ];
$(function(){
  for(var i=0;i<cl.length;i++){
    $('body').append(cl[i].name);
    $('body').append($('<img/>',{src:cl[i].src}));
  }
});	 

Q3 jQuery.png

You can add style to the elements (see question 4 for how to do this). The name of each country has been put in a div. The div has the fontSize set to 200% The div has marginTop set to 2em The images have an 8px gray border.

Q3 2 jQuery.png

In this example each country has a div that floats left. Inside each div is another div with the country name and an image for the flag. The flag height has been set to 100px The outer div has a margin of 1em a background color of #BBB and a fixed with of 220px.

Q3 3 jQuery.png

Note that the flags.zip file contains cl.json – you can use this to show hundreds of flags.