In JavaScript we can write our own Functions (methods), that allow us to do pretty much everything.
<script>
function
myFunction()
{
do something here....
;
}
</script>
A function is a block of code that is executed after each other.
We put all functions between <script> ....</script> tags
We can call the function from an event attribute, like 'onclick'.
Script tags and Functions ......... .... "TryoutPanel1"
<script>
myFunction = function(){
alert("Hello, what are you doing?");
}
</script>
<button onclick=" myFunction()" >nosey button
</button><ul><li>Write a new function in the script tag</li>
<li>put the new function in the <b>onclick</b> handler</li></ul>
Functions often use Variables (var) to store values.
Variables can store all kinds of values: Number, text(String), Objects like Elements.
Variables......... .... "TryoutPanel2"
<script>
foodFunction=function ()
{
var answer=prompt('What is your favourite food?:');
document.getElementById('myH1_1').innerHTML='This person likes:' +answer;
}
</script>
<h1 id='myH1_1' onclick=" foodFunction() " >
click here....
</h1>
<ul><li>Make another <b>variable</b></li><li>Add it to myH1 innerHTML</li></ul>
A parameter is a variable that is passed to the function;it passes a value.
function
reSize(
size
)
{
document.
getElementById('par')
.
style.fontSize
=
size
+ 'px'
;
}
The reSize (size) function takes a parameter : size, that is then used to give the element a new font-size.
Parameters ......... .... "TryoutPanel3"
<script>
function reSize(size)
{
document.getElementById('par').style.fontSize=size+'px';
}
</script>
<button onclick=" reSize(40) ">click to resize</button>
<p id='par' >give resize() a new parameter(number) to change the fontsize </p>
A Function can pass a value back with the keyword return.
function
countFunction()
{
var
name
=
prompt(
"type name"
)
;
var
count
=
name
.
length
;
return
count
;
}
The countLetters function gets the amount of letter of the name (count) and
passes it back :return count;
A function stops after the keyword return, so always make sure to put return at the end
Variable names have to start with a letter, _ or $: idName, _text, $number_1
GLOBAL and LOCAL variables
The lifetime of a variable starts when it is first declared (made)
declare: var x;
initialize var y=0;
LOCAL variables:
are declared inside a function.
The variable is deleted when the function is finished.
Local variable names can be reused by different functions.
GLOBAL variables:
are declared within a script tag, but outside a function.
They can be accessed by all functions and scripts on the page.
So be careful not to use the same name twice on one page.
They are deleted when you close the page.
FUNCTIONS: blocks of code that are executed as a whole.
2 syntaxes to create a function
myFunction= function(){
some statements that end with ;
}
function myFunction(){
some statements that end with ;
}
parameters: a function can have as many parameters as needed
function myCookieBaker(amountSugar ,amountFlour,amountButter){}
return value: a function can have 0 or 1 return values
function getNewNumber(){
var number= Math.random() * 10; return number;
}
function setNewNumber(number){
myNumber= number;
}
comments are not executed
// anything on the line behind // is a comment.
/* for longer comments
use these at the start
and end of your comment
*/
Return Value ......... .... "TryoutPanel4"
<script>
function countLetters() {
var name= prompt('enter your name');
var count= name.length;
return count;
}
</script>
<button onclick="this.innerHTML=countLetters()" >click to count letters of your name </button>
<ul><li>Write a function that can <b>add 4</b>
to any number(if you have trouble look at example 4)</li>
<li>Make a new button and put the new function in its <b>onclick</b> handler</li></ul>
