You are welcome to use this site without registering, but other users may see, change and destroy your work.
If you are a school pupil we suggest you use the same login as for your school system, but a different password
If you really don't want to give us an email address then a whole class could give a teacher's email address, so reset request go to them.
var myText;
myText = "Hello World";
document.write(myText);
Explanation
Line 002 creates a variable - a temporary piece of memory.
We have called this variable "myText".
Line 003 stores the words 'Hello World' in the variable we just created.
Line 004 Writes out whatever is in the variable
Exercises
Change the text from 'Hello' to 'Goodbye' and press run. What happens? {I1}
Repeat line 004 (just type it out again underneath). What happens? {I2}
What happens if you miss out the quote marks in line 003? {I3}
Cipher
function doConvert() {
var t = jQuery('#codeInput').val();
var newStr = "";
for (var i = 0; i < t.length; i++) {
var thisLetter = t.charAt(i);
if (thisLetter === "a") {
newStr += "e";
continue;
}
if (thisLetter === "e") {
newStr += "i";
continue;
}
if (thisLetter === "i") {
newStr += "o";
continue;
}
if (thisLetter === "o") {
newStr += "u";
continue;
}
if (thisLetter === "u") {
newStr += "a";
continue;
}
newStr += t.charAt(i);
}
jQuery('#codeOutput').val(newStr);
}
jQuery(document).ready(function () {
jQuery('#convert').button();
jQuery('#convert').click(
function() {
doConvert();
}
);
});
Explanation
This make a way of changing a piece of text into a code
Run it and see what you get
At the start the word is still easy to guess
Exercises
How could you make the code more complex? Add some more lines of code to do this{I1}
How could we make this code simpler but still work better? {I2}
Loops
for (var i = 0; i < 3; i++) {
document.write("Variable i is now "+i);
}
document.write("This is outside the loop so only happens once");
Explanation
A loop is a way of doing something many times
This one loops through 3 times, because of the part that says 'i < 3'
Each time it goes through the loop variable i is increased by one, becuase of the line that says i++
Run it and see what happens
Exercises
Make it loop six times {S1}
Change the text that goes with it{S2}
Chat
var answer = "";
var num = 0;
function chat() {
answer = theirBox.val();
switch (num) {
case 0:
reply("Who are you?");
break;
case 1:
reply("Hello, "+ answer);
ask("Where do you live?");
break;
case 2:
if (answer === "Croydon") {
reply("Croydon is a lovely town. Everyone is so well behaved.");
}
else {
reply(answer + " is OK, I suppose");
}
ask("What did you have for breakfast?");
break;
case 3:
reply("Wish I'd had "+answer+ ". I had porridge");
ask("You'll have to change my code if you want to chat any more");
break;
}
}
function reply(what) {
myBox.val(what);
num = num +1;
}
function ask(what) {
var oldText = myBox.val();
myBox.val(oldText+ ". " +what);
theirBox.val("");
}
var myBox;
var theirBox;
jQuery(document).ready(function () {
myBox = jQuery("#myBox");
theirBox = jQuery("#theirBox");
jQuery("#go").button();
jQuery("#go").click(chat);
chat();
});
Explanation
This example creates a simple chat bot.
The lines from 6 to 32 are the bit to concentrate on. See if you can figure out how it works?
When you've done so, make a few changes and add more questions.
The key things to understand is what a switch statement is (making choices), but it also use if and else, which is a different way of making choices.
When you've got some good questions and answers of your own get someone else to chat with it
Exercises
Make changes to add extra questions. {S1}
Twitter
function getTweets() {
jQuery("#tweetSpot").tweet(tweetObj);
}
var tweetObj = {
username: "zachbraff",
join_text: "auto",
avatar_size: 32,
count: 3,
auto_join_text_default: "she said,",
auto_join_text_ed: "she",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
};
jQuery('h2').click(getTweets);
Explanation
<script language="javascript" src="http://www.tutorbase.co.uk/abtide/js/tweets/seaofclouds/tweet/jquery.tweet.js" type="text/javascript"></script>
Lines 2-4 are a function which finds part of your web page which has an id called tweetSpot - that's the bit that says jQuery("#tweetSpot").
The part saying .tweet(tweetObj) is a call to a function which will fill this with whatever is sent back by the request for information.
The actual information we request is in a variable called tweetObj.
Line 005 starts off this variable, which carries on down to line 16
Line 018 finds all h2 headings on the page. It changes them so that if you click one, the function called getTweets (which we set up on line 002) is run.
Exercises
Try changing the person we get tweets for.
Try changing the text that appears - the parts in quotes, lines 10 - 15
On line 018 change click to mouseover - what happens? {I1}
What problems are there with using mouseover instead of click? {I2}
A Variable
var response;
response = prompt("Who are you","Enter your name");
document.write("Hello " + response + "! How are you today?");
Explanation
Line 002 creates a variable - a temporary piece of memory.
We have called this variable "response".
Line 003 asks the user to input their name. The answer is stored in the variable we just created.
Line 004 Writes out the word "Hello " then adds whatever is in the variable, then asks how they are.
A Calculator
var newNum = true;
var totalSoFar = 0;
function calculate(what) {
if (what === '+') {
add();
return;
}
if (what === 'C') {
alert("Clear - your job to make this happen");
newNum = true;
return;
}
if (newNum === true) {
putNumberInDisplay(what);
}
else {
var t = getNumberInDisplay();
t += what;
putNumberInDisplay(t);
}
newNum = false;
}
function add() {
totalSoFar += getNumberInDisplay();
putNumberInDisplay(totalSoFar);
newNum = true;
}
function getNumberInDisplay() {
var txt = jQuery('#display').text(); /* get what's in the box */
return parseInt(txt, 10); /* turn into a num and send back */
}
function putNumberInDisplay(what) {
jQuery('#display').text(what);
}
$(document).ready(function () {
$('.btn').button();
$('.btn').click(
function () {
var t = $(this).text();
calculate(t);
});
});
Explanation
This is a calcuator, but only the add button works properly
Your task is to finish it off!
Draw one circle
var paper = Raphael(10, 50, 320, 200);
/* Creates circle at x = 50, y = 40, radius = 10 */
var circle = paper.circle(50, 40, 10);
Explanation
Line 001 creates a variable, called paper
Raphael is a special set of functions which help us to draw things
Line 002 is just a comment - explaining what happens on line 3
Line 003 uses the cirlce method of the variable paper, to draw a circle x = 50, y = 40, radius = 10
Exercies
Change the radius of the circle {S1}
Change how far down the page the circle appears {S2}
Draw some circles
var paper = Raphael(10, 50, 320, 200);
/* A for loop, below does something a number of times - in this one, 5 times*/
for (var i = 0; i < 5; i++) {
/* Creates circles, each one bigger. First number is distance from left, second is from top, third is radius */
var circle = paper.circle(50, 40, 3 * i);
}
Explanation
The example sets up a loop (line 004) which will do everything between the curly brackets (lines 5,6 and 7) 5 times
(It's 5 times because of the opart that says i < 5, on line 4.)
Exercises
See how this works, then change:
The number of circles (look at the i < 5 part) {S1}
The gap between the circles (the circle's radius) {S2}
Where they start across the page {S3}
Where they start down the page {S4}
Make each circle start to the right of the previous one {S5}
Make each circle start below the previous one {S6}
Play video
$('a.media').media();
Explanation
Not much, is there?
Look at the HTML page and find the link which adds the video
The only line of code here adds just makes the video play
Exercises
Change the video to another address on the internet and see what happens
How could you use this to give the user a choice of videos to play? {I1}
How could you design a help system using this? {I2}
var paper = Raphael(10, 50, 320, 200); /* Creates circle at x = 50, y = 40, radius = 10 */ var circle = paper.circle(50, 40, 10);Draw some circles
var paper = Raphael(10, 50, 320, 200);
for (var i = 0; i < 5; i++) {
/* Creates circles , each one bigger*/
/* First number is distance from left, seconmd is from top, third is radius */
var circle = paper.circle(50, 40, 3 * i);
}
/* After seeing how this works, change */
/* (a) The number of circles */
/* (b) The gap between the circles */
/* (c) Where they start across the page */
/* (d) Where they start down the page */
/* (e) Make each circle start to the right of the previous one */
/* (f) Make each circle start below the previous one */
Draw a rectangle
var paper = Raphael(10, 50, 320, 200);
for (var i = 0; i < 5; i++) {
/* Creates rectangles , each one bigger*/
/* First number is distance from left, seconmd is from top, third is height, fourth is width, fifth is how rounded teh corneres are */
var shape = paper.rect(50, 40, 3 * i, 6);
}
/* After seeing how this works, change */
/* (a) The number of rectangles */
/* (c) Their width */
/* (a) Their height */
/* (b) The gap between them */
/* (c) Where they start across the page */
/* (d) Where they start down the page */
/* (e) Make each rectangle start to the right of the previous one */
/* (f) Make each rectangle start below the previous one */
A basic loop
for (var i = 0; i < 5; i++) {
document.write(i);
}
for (var j = 0; j < 5; j++) {
document.write("<br>Hello " +j );
}
/* After seeing how this works, change */
/* (a) The word that appears */
/* (b) The number of lines that appear - make it go from 3 to 11 */
/* (c) The numbers that appear - make it go from 3 to 11 */
/* (d) What happens is you put the i in quotes - like this: document.write('i') ? */
<h>Some Stuff to appear</h>
A basic function Blah Blah Blah
This is to help your learn to program, using JavaScript. To get started, click on one of the examples on the left, and follow the instructions.
This is to help your learn to program, using JavaScript. To get started, click on one of the examples on the left, and follow the instructions.