Kids

Can

JavaScript

<-----Back        Next --->

Flexible Functions

Functions

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'.

example1:

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>




Variables

In this example the var answer, stores the text that the user has typed in the prompt box.
Var answer is then added to the innerHTML of the h1-tag.

example2 :


 function  
 myFunction() 
 { 


 answer 
 = 
 prompt( 
 "favourite food" 
 ) 
 ; 
 } 

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>




Parameters

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>





Return Value

This Function passes back the amount of letters the name contains:return count;

example3 :

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>





See a function in action

This is myFunction,
pass him a name Parameter,
create a new halfString variable
and return wholeString.




example4 :

Click to practice 7xtable: 7 * something =...


I don't know?

<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email