JavaScript

=Javascript=
 * What can Javascript do?**
 * Make websites respond to user interaction
 * Build apps and games
 * Access information on the internet (find topics on Twitter)
 * Organise and present data (automate spreadsheet work etc)

We will make use of the following website to help develop your understanding of JavaScript; www.codeacademy.com


 * Sign up (using your school email) if you have not already done so. **
 * This website will often be used for homework - you need to log in so your progress can be tracked. **


 * Alert**


 * Var**


 * Prompt**


 * Join**


 * Eval1**


 * Eval2**


 * Maths Game**


 * Area of Triangle**


 * Week 1 Challenge **


 * Recreate the webpage your teacher displays (remember to use both HTML and JavaScript) **


 * Week 2 **

Racer


**Count by 5**

Joke Teller


Adding a little animation to your fortune

Story
Mad Lib

//this program follows the same structure//

the javascript is in the head with a function

//the body is all html with a button that activates the function//

This function just takes information from a whole lot of

//text boxes and stores it in vars//

it then makes a very long String called story using the vars and

//other text, it then puts the story into a text area which is like//

a text box but is bigger, can wrap text and can have scroll bars function makeML{

//Mad Lib//

Andy Harris modified by Richard H

//make a silly story from a bunch of input terms// get variables from form

var person = window.document.myForm.txtPerson.value;

var sound = document.myForm.txtSound.value;

var part = document.myForm.txtPart.value;

var vehicle = document.myForm.txtVehicle.value;

var animal = document.myForm.txtAnimal.value;

var story = "";

story = "One day, a person named " ;

story += person;

story += " was walking down the street. Suddenly, ";

story += person;

story += " heard an awful ";

story += sound;

story += " sound. ";

story += person;

story += " looked around and saw that the ";

story += sound;

story += " sound was coming from a ";

story += vehicle;

story += " careening madly down the street. ";

story += person;

story += "'s fear turned to terror as "

story += person;

story += " realized that the ";

story += vehicle;

story += " was driven by none other than the evil Super-";

story += animal;

story += ". Once an ordinary ";

story += animal;

story += ", it had befallen a strange transformation after ";

story += "being dropped in a vat of nuclear waste. ";

story += "Super-"

story += animal;

story += " continued to taunt ";

story += person

story += " with the horrible ";

story += sound;

story += " noise, but ";

story += person;

story += " was undeterred. \"You can't bother me, Super-";

story += animal;

story += "! I know how to turn the other ";

story += part;

story += "!\" \nThe End." document.myForm.txtStory.value = story; } //end makeML//

//function makeML2{//

Mad Lib

//Andy Harris modified by Richard H//

make a silly story from a bunch of input terms //get variables from form//

//var person = window.document.myForm.txtPerson.value;//

//var sound = document.myForm.txtSound.value;//

//var part = document.myForm.txtPart.value;//

//var vehicle = document.myForm.txtVehicle.value;//

//var animal = document.myForm.txtAnimal.value;//

//var story = "";// //story += person;//

//story += " Died by being crushed by the horrible ";//

//story += animal;//

//story += " Oh No";// //document.myForm.txtStory2.value = story;// //}// end makeML2

Mad Lib



Please enter the following information

Glossary
 * "name" || must be inside quotes ||
 * "yourname".length || calculates length of a name ||
 * 4 + 4 || addition ||
 * 12 / 4 || division ||
 * 3 * 4 || multiplication ||
 * //comment || ignored by computer - helpful for writing comments ||
 * confirm("today is Friday"); || confirm can be used on websites to confirm details with users ||
 * prompt("What day is today?"); || Can ask for user input using a prompt ||

a) Numbers eg 12345678910 b) Strings eg happy, "4"
 * Data Types**

Can only have 2 values **True** or **False** eg 20>2 will equal true, 20<2 will equal false Booleans are useful to ascertain whether if statements are true. For example, (the amount in your bank account) > 0
 * Booleans**


 * "today is monday".length>5 || the text has more than 5 characters - true ||
 * console.log (2 * 5) || Will take anything inside the and log it to the console below your code (eg printing output) ||
 * Comparison Operators**
 * > || Greater than ||
 * < || Less than ||
 * <= || Less than or equal to ||
 * >= || Greater than or equal to ||
 * || Equal to = = = ||
 * !== || Not equal to ||

Some examples of using comparison operators with console logs to give true/false outputs
 * console.log(15 > 4); || the output will be true as 15 is larger than 4 ||
 * console.log("xiao Hui".length !==122); || the output will be true as xiao hui does not have 122 characters ||
 * console.log ("goody donaldson".length !==8); || the output will be true as goody donaldson does not have 8 characters ||
 * console.log(8 * 2 ===16); || the output will be true as 8 * 2 equals 16 ||
 * console.log (10*10 ===120); || the output will be false as 10* 10 equals 100 ||
 * If statement / conditional statements**

You can use comparisons plus booleans to decide whether a block of code should run. This is an **if statement** or **conditional statement** If the condition below is true then it will execute the code inside the { }

if (10>5) { console.log("you have the correct answer!"); }

if ( 100 > 2 ) { console.log("You are good at maths!"); } console.log("Just letting you know: your program got to line 6");
 * In the code below, the first condition is true, so the program will execute all of the code. If the first condition was false, it would not have executed the first** **line of code, but moved onto the second**


 * If the condition is true on the first line of code, it will execute the code in the first set of { }. But, if the condition is false (see below), the program will skip the the first block and execute the block after else**

if (10 < 5 ) { alert("incorrect answer"); } else { console.log ("correct answer"); }