Java scriptfunction


Published on

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Java scriptfunction

  1. 1. Introduction to Function
  2. 2. 1. What are the type of HTML input elements?2. Identify and what type of input elements are shown below.a.<form> First name: <input type="text" name="firstname" /><br /> </form>b. <form> <input type=“button" value=“Click" /><br /> </form>c.<form> Password: <input type="password" name="pwd" /> </form>d. <form> <input type="radio" name="sex" value="male" /> Male<br /> </form>e. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> </form>
  3. 3.  A function is a block of code that will be executed when "someone" calls it: Functions are the heart of JavaScript Functions are way of organizing and controlling different sequences of code which work together with other functions, page elements and input from the user. Functions contains a set of commands for specific purpose which you want to run at a certain time.
  4. 4.  A function is written as a code block (inside curly { } braces), preceded by the function keyword: function functionName() { some code to be executed } The code inside the function will be executed when "someone" calls the function. The function can be called directly when an event occurs (like when a user clicks a button), and it can be called from "anywhere" by JavaScript code. JavaScript is case sensitive. The function keyword must be written in lowercase letters, and the function must be called with the same capitals as used in the function name.
  5. 5. 1. function………keyword 2. myFunction……functionname 3. ()……..parenthesis (which may or may not be containing a value…called an arguments.<html> 4. { ……Curly braces or bracket <head> 5. Alert(“statement”); …. the code to <script> be executed. function myFunction() 6. }……..Curly braces or bracket { alert("Hello World!"); } NAMING A FUNCTION </script> </head> 1. when naming a function, be explicit, give names that can <body> identify what mission the function <button is carrying. onclick="myFunction()" 2. If the name of the function is a >Try it</button> combination, you can type an </body> underscore between them. </html> 3. Start the first letter of the first word in lowercase and the first letter of each of the other parts in uppercase. Event
  6. 6.  When you call a function, you can pass along some values to it, these values are called arguments or parameters. These arguments can be used inside the function. You can send as many arguments as you like, separated by commas (,) myFunction(argument1,argument2) Declare the argument, as variables, when you declare the function: function myFunction(var1,var2) { some code } The variables and the arguments must be in the expected order. The first variable is given the value of the first passed argument etc.
  7. 7. <head> <script> function myFunction(name,job) { alert("Welcome " + name + ", the " + job); } </script></head><body><button onclick="myFunction(Harry Potter,Wizard)">Try it</button</body>The function above will alert "Welcome Harry Potter, theWizard" when the button is clicked.The function is flexible, you can call the function usingdifferent arguments, and different welcome messageswill be given:
  8. 8.  Functions do not run automatically. When the page loads, each function waits quietly until it is told to run. To run a function you must call it. This means sending an instruction to the function telling it to run. There are two common ways to call a function: From an event handler and from another function.
  9. 9.  An event handler is a command which calls a function when an event happens, such as the user clicking a button. The command is written in the format onEvent, where Event is the name for a specific action
  10. 10.  Its not that hard to write a function in JavaScript. Heres an example of a JavaScript function. Write the function The first thing you need to do is write the function: <script>function displayMessage(firstName) { alert("Hello " + firstName + ", hope you like JavaScript functions!")}</script>
  11. 11.  Call the function Once you have written your function, you can "call" that function from within your HTML code. Here, when the user clicks the button, it runs the function. In this case, we use the onclick event handler to call the function. <form>First name:<input type="input" name="yourName" /><input type="button" onclick="displayMessage(form.yourName.value)" value="Display Message" /></form>
  12. 12. <script>function displayMessage(firstName) { alert("Hello " + firstName + ", hope you like JavaScript functions!")}</script><form>First name:<input type="input" name="yourName" /><input type="button" onclick="displayMessage(form .yourName.value)" value="Display Message" /></form>
  13. 13.  Writing the function: We started by using the function keyword. This tells the browser that a function is about to be defined Then we gave the function a name, so we made up our own name called "displayMessage". We specified the name of an argument ("firstName") that will be passed into this function. After the function name came a curly bracket {. This opens the function. There is also a closing bracket later, to close the function. In between the curly brackets we write all our code for the function. In this case, we use JavaScripts built in alert() function to pop up a message for the user.
  14. 14.  Calling the function: We created an HTML form with an input field and submit button We assigned a name ("yourName") to the input field We added the onclick event handler to the button. This event handler is called when the user clicks on the button (more about event handlers later). This is where we call our JavaScript function from. We pass it the value from the forms input field. We can reference this value by using "form.yourName.value".
  15. 15. Write the JavaScript source code using function and switch statements.Favorite movie Statementcase 1 = Titanic Not a bad choicecase 2= Water World No commentcase 3= Scream 2 It has its momentsdefault statement I’m sure it was great