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
Screen Shot 2557-01-22 at 1.10.42 PM.png

Var
Screen Shot 2557-01-22 at 1.11.28 PM.png

Prompt
Screen Shot 2557-01-22 at 1.32.02 PM.png

Join
Screen Shot 2557-01-22 at 1.22.16 PM.png

Eval1
Screen Shot 2557-01-22 at 1.22.45 PM.png

Eval2
Screen Shot 2557-01-22 at 1.34.56 PM.png

Maths Game
Screen Shot 2557-01-22 at 1.24.14 PM.png

Area of Triangle
Screen Shot 2557-01-22 at 1.25.10 PM.png

Week 1 Challenge

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

Week 2

Name Game

namegame.png

Learn Maths

learn maths.png

Learn If

learnif.png

Learn If Else


learnifelse.png



Learn Nested If


learnnestedif.png

Racer

racer.png

Count by 5
count by 5.png

Back racer

back racer.png


Fortune Teller


Screen Shot 2557-02-25 at 10.02.40 AM.png

Joke Teller


Screen Shot 2557-02-25 at 1.25.42 PM.png


Adding a little animation to your fortune


Document properties

documentproperties.png

Document Methods

document methods.png



Don't click

dont click.png



Don't click function

dontclickfunction.png


Name Grabber

namegrabber.png






Story


<html>

<head>

<title>Mad Lib</title>

<script>

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


</script>

</head>
<body>

<center>

<h1>Mad Lib<hr></h1>

<form name = myForm>

<h3>Please enter the following information</h3>

<table border = 1>
<tr>

<td>A person's name</td>

<td><input type = text name = txtPerson></td>

</tr>
<tr>

<td>A silly sound</td>

<td><input type = text name = txtSound></td>

</tr>
<tr>

<td>A body part</td>

<td><input type = text name = txtPart></td>

</tr>
<tr>

<td>A vehicle</td>

<td><input type = text name = txtVehicle></td>

</tr>
<tr>

<td>A type of animal</td>

<td><input type = text name = txtAnimal></td>

</tr>
<tr>

<td colspan = 2><center>

<input type = button

value = "click for story"

onClick = makeML()>

</td>

</tr>
<tr>

<td colspan = 2><center>

<input type = button

value = "click for ending"

onClick = makeML2()>

</td>

</tr>
</table>
<table>

<textarea name = txtStory

rows = 10

cols = 40

wrap>

</textarea>

<tr>

<td>

<textarea name = txtStory2

rows = 10

cols = 40

wrap>

</textarea>

</td>

</tr>
</table>
</form>

</center>
<hr>

</body>

</html>



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

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

Booleans
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

"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!");
}

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 ( 100 > 2 )
{
console.log("You are good at maths!");
}
console.log("Just letting you know: your program got to line 6");

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");
}