SlideShare a Scribd company logo
Introduction to Function
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>
   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.              Reference:MediaCollege.com
   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.
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
   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.
<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, the
Wizard" when the button is clicked.
The function is flexible, you can call the function using
different arguments, and different welcome messages
will be given:
   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.
   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
   It's not that hard to write a function in JavaScript.
    Here's 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>
   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>
<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>
   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
    JavaScript's built in alert() function to pop up a
    message for the user.
   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 form's input field. We can reference
    this value by using "form.yourName.value".
Write the JavaScript source code using function
 and switch statements.



Favorite movie         Statement

case 1 = Titanic        Not a bad choice
case 2= Water World     No comment
case 3= Scream 2       It has its moments
default statement      I’m sure it was great

More Related Content

What's hot (20)

PDF
Notes for GNU Octave - Numerical Programming - for Students - 02 of 02 by aru...
ssuserd6b1fd
 
PDF
JavaScript Basics and Best Practices - CC FE & UX
JWORKS powered by Ordina
 
PPTX
Lab#1 - Front End Development
Walid Ashraf
 
PPSX
Javascript variables and datatypes
Varun C M
 
PDF
MVC Design Pattern in JavaScript by ADMEC Multimedia Institute
Ravi Bhadauria
 
PDF
Unison Language - Contact
Philip Schwarz
 
PDF
Javascript essentials
Bedis ElAchèche
 
PPT
ExtJs Basic Part-1
Mindfire Solutions
 
RTF
Html basics 11 form validation
H K
 
RTF
AutoComplete
Patrick Slagle
 
PDF
Protocol-Oriented MVVM
Natasha Murashev
 
DOC
Java Script Language Tutorial
vikram singh
 
PPTX
Java Script Promise
Alok Guha
 
PPTX
Javascript conditional statements
nobel mujuji
 
PPT
Jquery 1
Manish Kumar Singh
 
PPTX
Clean code slide
Anh Huan Miu
 
PDF
JavaScript Best Pratices
ChengHui Weng
 
PDF
Protocol-Oriented MVVM (extended edition)
Natasha Murashev
 
PDF
Javascript part1
Raghu nath
 
Notes for GNU Octave - Numerical Programming - for Students - 02 of 02 by aru...
ssuserd6b1fd
 
JavaScript Basics and Best Practices - CC FE & UX
JWORKS powered by Ordina
 
Lab#1 - Front End Development
Walid Ashraf
 
Javascript variables and datatypes
Varun C M
 
MVC Design Pattern in JavaScript by ADMEC Multimedia Institute
Ravi Bhadauria
 
Unison Language - Contact
Philip Schwarz
 
Javascript essentials
Bedis ElAchèche
 
ExtJs Basic Part-1
Mindfire Solutions
 
Html basics 11 form validation
H K
 
AutoComplete
Patrick Slagle
 
Protocol-Oriented MVVM
Natasha Murashev
 
Java Script Language Tutorial
vikram singh
 
Java Script Promise
Alok Guha
 
Javascript conditional statements
nobel mujuji
 
Clean code slide
Anh Huan Miu
 
JavaScript Best Pratices
ChengHui Weng
 
Protocol-Oriented MVVM (extended edition)
Natasha Murashev
 
Javascript part1
Raghu nath
 

Viewers also liked (8)

PPTX
Css color and background properties
Jesus Obenita Jr.
 
PPTX
Html web designing linking pages
Jesus Obenita Jr.
 
PPT
Chapter iv computer virus
Jesus Obenita Jr.
 
PPT
Form validation client side
Mudasir Syed
 
DOCX
Javascript validation karan chanana
karanchanan
 
PPTX
Javascript validating form
Jesus Obenita Jr.
 
PPTX
Form Validation
Graeme Smith
 
PPTX
Form Validation in JavaScript
Ravi Bhadauria
 
Css color and background properties
Jesus Obenita Jr.
 
Html web designing linking pages
Jesus Obenita Jr.
 
Chapter iv computer virus
Jesus Obenita Jr.
 
Form validation client side
Mudasir Syed
 
Javascript validation karan chanana
karanchanan
 
Javascript validating form
Jesus Obenita Jr.
 
Form Validation
Graeme Smith
 
Form Validation in JavaScript
Ravi Bhadauria
 
Ad

Similar to Java scriptfunction (20)

PPTX
Java script functions
chauhankapil
 
PPTX
JAVASCRIPT and JQUERY For Beginner
ROHIT SHARMA
 
PPT
Event Programming JavaScript
MuhammadRehan856177
 
PPT
javascript Event Handling and introduction to event.ppt
Lalith86
 
PPS
CS101- Introduction to Computing- Lecture 32
Bilal Ahmed
 
PPTX
11_Functions_Introduction.pptx javascript notes
tayyabbiswas2025
 
PDF
JavaScript
tutorialsruby
 
PDF
JavaScript
tutorialsruby
 
PPTX
JavaScript lesson 1.pptx
MuqaddarNiazi1
 
PPTX
Wt unit 5
team11vgnt
 
PPTX
Javascript
D V BHASKAR REDDY
 
DOCX
WD programs descriptions.docx
anjani pavan kumar
 
PPTX
unit4 wp.pptxjvlbpuvghuigv8ytg2ugvugvuygv
utsavsd11
 
PPTX
Lab #2: Introduction to Javascript
Walid Ashraf
 
PPTX
Java Script basics and DOM
Sukrit Gupta
 
PPT
Javascript1
anas Mohtaseb
 
PDF
Lecture 10.pdf
ssuser0890d1
 
PPTX
Javascript note for engineering notes.pptx
engineeradda55
 
PPTX
Java Script
Kalidass Balasubramaniam
 
PPTX
Lecture 4- Javascript Function presentation
GomathiUdai
 
Java script functions
chauhankapil
 
JAVASCRIPT and JQUERY For Beginner
ROHIT SHARMA
 
Event Programming JavaScript
MuhammadRehan856177
 
javascript Event Handling and introduction to event.ppt
Lalith86
 
CS101- Introduction to Computing- Lecture 32
Bilal Ahmed
 
11_Functions_Introduction.pptx javascript notes
tayyabbiswas2025
 
JavaScript
tutorialsruby
 
JavaScript
tutorialsruby
 
JavaScript lesson 1.pptx
MuqaddarNiazi1
 
Wt unit 5
team11vgnt
 
Javascript
D V BHASKAR REDDY
 
WD programs descriptions.docx
anjani pavan kumar
 
unit4 wp.pptxjvlbpuvghuigv8ytg2ugvugvuygv
utsavsd11
 
Lab #2: Introduction to Javascript
Walid Ashraf
 
Java Script basics and DOM
Sukrit Gupta
 
Javascript1
anas Mohtaseb
 
Lecture 10.pdf
ssuser0890d1
 
Javascript note for engineering notes.pptx
engineeradda55
 
Lecture 4- Javascript Function presentation
GomathiUdai
 
Ad

More from Jesus Obenita Jr. (20)

PPTX
Organization and management 3 a Evolution of Management Theory
Jesus Obenita Jr.
 
PPTX
Organization and management 2 Management Function
Jesus Obenita Jr.
 
PPTX
Organization and management 1
Jesus Obenita Jr.
 
PPTX
Designing web page marquee and img tag
Jesus Obenita Jr.
 
PPTX
Ms excel 2013 formatting worksheets
Jesus Obenita Jr.
 
PPTX
Ms excel 2013 data management
Jesus Obenita Jr.
 
PPTX
Microsoft Excel introduction
Jesus Obenita Jr.
 
PPTX
Word 2013 working with pictures
Jesus Obenita Jr.
 
PPTX
Word 2013 Formatting Page
Jesus Obenita Jr.
 
PPTX
Word 2013 8
Jesus Obenita Jr.
 
PPTX
Ms word 2013 7
Jesus Obenita Jr.
 
PPTX
Ms word 2013 6
Jesus Obenita Jr.
 
PPTX
Ms word 2013 4
Jesus Obenita Jr.
 
PPTX
Ms word 2013 2
Jesus Obenita Jr.
 
PPTX
Ms word 2013
Jesus Obenita Jr.
 
PPTX
Parts of the ms word 2013 screen and
Jesus Obenita Jr.
 
PPTX
Word processor
Jesus Obenita Jr.
 
PPT
Session 2 test construction.mt's
Jesus Obenita Jr.
 
PPTX
Cooking ingredients
Jesus Obenita Jr.
 
PPTX
Color theory
Jesus Obenita Jr.
 
Organization and management 3 a Evolution of Management Theory
Jesus Obenita Jr.
 
Organization and management 2 Management Function
Jesus Obenita Jr.
 
Organization and management 1
Jesus Obenita Jr.
 
Designing web page marquee and img tag
Jesus Obenita Jr.
 
Ms excel 2013 formatting worksheets
Jesus Obenita Jr.
 
Ms excel 2013 data management
Jesus Obenita Jr.
 
Microsoft Excel introduction
Jesus Obenita Jr.
 
Word 2013 working with pictures
Jesus Obenita Jr.
 
Word 2013 Formatting Page
Jesus Obenita Jr.
 
Word 2013 8
Jesus Obenita Jr.
 
Ms word 2013 7
Jesus Obenita Jr.
 
Ms word 2013 6
Jesus Obenita Jr.
 
Ms word 2013 4
Jesus Obenita Jr.
 
Ms word 2013 2
Jesus Obenita Jr.
 
Ms word 2013
Jesus Obenita Jr.
 
Parts of the ms word 2013 screen and
Jesus Obenita Jr.
 
Word processor
Jesus Obenita Jr.
 
Session 2 test construction.mt's
Jesus Obenita Jr.
 
Cooking ingredients
Jesus Obenita Jr.
 
Color theory
Jesus Obenita Jr.
 

Recently uploaded (20)

PPTX
BANDHA (BANDAGES) PPT.pptx ayurveda shalya tantra
rakhan78619
 
PPTX
Views on Education of Indian Thinkers J.Krishnamurthy..pptx
ShrutiMahanta1
 
PPSX
Health Planning in india - Unit 03 - CHN 2 - GNM 3RD YEAR.ppsx
Priyanshu Anand
 
PPTX
How to Convert an Opportunity into a Quotation in Odoo 18 CRM
Celine George
 
PDF
The dynastic history of the Chahmana.pdf
PrachiSontakke5
 
PPTX
Stereochemistry-Optical Isomerism in organic compoundsptx
Tarannum Nadaf-Mansuri
 
PPSX
HEALTH ASSESSMENT (Community Health Nursing) - GNM 1st Year
Priyanshu Anand
 
PDF
The Constitution Review Committee (CRC) has released an updated schedule for ...
nservice241
 
PDF
The Different Types of Non-Experimental Research
Thelma Villaflores
 
PDF
community health nursing question paper 2.pdf
Prince kumar
 
PPTX
Views on Education of Indian Thinkers Mahatma Gandhi.pptx
ShrutiMahanta1
 
PPTX
Soil and agriculture microbiology .pptx
Keerthana Ramesh
 
PPTX
STAFF DEVELOPMENT AND WELFARE: MANAGEMENT
PRADEEP ABOTHU
 
PDF
DIGESTION OF CARBOHYDRATES,PROTEINS,LIPIDS
raviralanaresh2
 
PDF
SSHS-2025-PKLP_Quarter-1-Dr.-Kerby-Alvarez.pdf
AishahSangcopan1
 
PDF
Generative AI: it's STILL not a robot (CIJ Summer 2025)
Paul Bradshaw
 
PPTX
How to Set Maximum Difference Odoo 18 POS
Celine George
 
PPTX
THE TAME BIRD AND THE FREE BIRD.pptxxxxx
MarcChristianNicolas
 
PDF
ARAL-Orientation_Morning-Session_Day-11.pdf
JoelVilloso1
 
PPT
Talk on Critical Theory, Part II, Philosophy of Social Sciences
Soraj Hongladarom
 
BANDHA (BANDAGES) PPT.pptx ayurveda shalya tantra
rakhan78619
 
Views on Education of Indian Thinkers J.Krishnamurthy..pptx
ShrutiMahanta1
 
Health Planning in india - Unit 03 - CHN 2 - GNM 3RD YEAR.ppsx
Priyanshu Anand
 
How to Convert an Opportunity into a Quotation in Odoo 18 CRM
Celine George
 
The dynastic history of the Chahmana.pdf
PrachiSontakke5
 
Stereochemistry-Optical Isomerism in organic compoundsptx
Tarannum Nadaf-Mansuri
 
HEALTH ASSESSMENT (Community Health Nursing) - GNM 1st Year
Priyanshu Anand
 
The Constitution Review Committee (CRC) has released an updated schedule for ...
nservice241
 
The Different Types of Non-Experimental Research
Thelma Villaflores
 
community health nursing question paper 2.pdf
Prince kumar
 
Views on Education of Indian Thinkers Mahatma Gandhi.pptx
ShrutiMahanta1
 
Soil and agriculture microbiology .pptx
Keerthana Ramesh
 
STAFF DEVELOPMENT AND WELFARE: MANAGEMENT
PRADEEP ABOTHU
 
DIGESTION OF CARBOHYDRATES,PROTEINS,LIPIDS
raviralanaresh2
 
SSHS-2025-PKLP_Quarter-1-Dr.-Kerby-Alvarez.pdf
AishahSangcopan1
 
Generative AI: it's STILL not a robot (CIJ Summer 2025)
Paul Bradshaw
 
How to Set Maximum Difference Odoo 18 POS
Celine George
 
THE TAME BIRD AND THE FREE BIRD.pptxxxxx
MarcChristianNicolas
 
ARAL-Orientation_Morning-Session_Day-11.pdf
JoelVilloso1
 
Talk on Critical Theory, Part II, Philosophy of Social Sciences
Soraj Hongladarom
 

Java scriptfunction

  • 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. 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. Reference:MediaCollege.com
  • 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. 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. 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. <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, the Wizard" when the button is clicked. The function is flexible, you can call the function using different arguments, and different welcome messages will be given:
  • 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. 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. It's not that hard to write a function in JavaScript. Here's 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. 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. <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. 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 JavaScript's built in alert() function to pop up a message for the user.
  • 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 form's input field. We can reference this value by using "form.yourName.value".
  • 15. Write the JavaScript source code using function and switch statements. Favorite movie Statement case 1 = Titanic Not a bad choice case 2= Water World No comment case 3= Scream 2 It has its moments default statement I’m sure it was great