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)

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

Viewers also liked (8)

Css color and background properties
Css color and background propertiesCss color and background properties
Css color and background properties
Jesus Obenita Jr.
 
Html web designing linking pages
Html web designing linking pagesHtml web designing linking pages
Html web designing linking pages
Jesus Obenita Jr.
 
Chapter iv computer virus
Chapter iv  computer virusChapter iv  computer virus
Chapter iv computer virus
Jesus Obenita Jr.
 
Form validation client side
Form validation client side Form validation client side
Form validation client side
Mudasir Syed
 
Javascript validation karan chanana
Javascript validation karan chananaJavascript validation karan chanana
Javascript validation karan chanana
karanchanan
 
Javascript validating form
Javascript validating formJavascript validating form
Javascript validating form
Jesus Obenita Jr.
 
Form Validation
Form ValidationForm Validation
Form Validation
Graeme Smith
 
Form Validation in JavaScript
Form Validation in JavaScriptForm Validation in JavaScript
Form Validation in JavaScript
Ravi Bhadauria
 
Css color and background properties
Css color and background propertiesCss color and background properties
Css color and background properties
Jesus Obenita Jr.
 
Html web designing linking pages
Html web designing linking pagesHtml web designing linking pages
Html web designing linking pages
Jesus Obenita Jr.
 
Form validation client side
Form validation client side Form validation client side
Form validation client side
Mudasir Syed
 
Javascript validation karan chanana
Javascript validation karan chananaJavascript validation karan chanana
Javascript validation karan chanana
karanchanan
 
Form Validation in JavaScript
Form Validation in JavaScriptForm Validation in JavaScript
Form Validation in JavaScript
Ravi Bhadauria
 
Ad

Similar to Java scriptfunction (20)

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

More from Jesus Obenita Jr. (20)

Organization and management 3 a Evolution of Management Theory
Organization and management 3 a Evolution of Management TheoryOrganization and management 3 a Evolution of Management Theory
Organization and management 3 a Evolution of Management Theory
Jesus Obenita Jr.
 
Organization and management 2 Management Function
Organization and management 2 Management FunctionOrganization and management 2 Management Function
Organization and management 2 Management Function
Jesus Obenita Jr.
 
Organization and management 1
Organization and management 1Organization and management 1
Organization and management 1
Jesus Obenita Jr.
 
Designing web page marquee and img tag
Designing web page  marquee and img tagDesigning web page  marquee and img tag
Designing web page marquee and img tag
Jesus Obenita Jr.
 
Ms excel 2013 formatting worksheets
Ms excel 2013 formatting worksheetsMs excel 2013 formatting worksheets
Ms excel 2013 formatting worksheets
Jesus Obenita Jr.
 
Ms excel 2013 data management
Ms excel 2013 data managementMs excel 2013 data management
Ms excel 2013 data management
Jesus Obenita Jr.
 
Microsoft Excel introduction
Microsoft Excel introductionMicrosoft Excel introduction
Microsoft Excel introduction
Jesus Obenita Jr.
 
Word 2013 working with pictures
Word 2013 working with picturesWord 2013 working with pictures
Word 2013 working with pictures
Jesus Obenita Jr.
 
Word 2013 Formatting Page
Word 2013 Formatting PageWord 2013 Formatting Page
Word 2013 Formatting Page
Jesus Obenita Jr.
 
Word 2013 8
Word 2013 8Word 2013 8
Word 2013 8
Jesus Obenita Jr.
 
Ms word 2013 7
Ms word 2013 7Ms word 2013 7
Ms word 2013 7
Jesus Obenita Jr.
 
Ms word 2013 6
Ms word 2013 6Ms word 2013 6
Ms word 2013 6
Jesus Obenita Jr.
 
Ms word 2013 4
Ms word 2013 4Ms word 2013 4
Ms word 2013 4
Jesus Obenita Jr.
 
Ms word 2013 2
Ms word 2013 2Ms word 2013 2
Ms word 2013 2
Jesus Obenita Jr.
 
Ms word 2013
Ms word 2013Ms word 2013
Ms word 2013
Jesus Obenita Jr.
 
Parts of the ms word 2013 screen and
Parts of the ms word 2013 screen andParts of the ms word 2013 screen and
Parts of the ms word 2013 screen and
Jesus Obenita Jr.
 
Word processor
Word processorWord processor
Word processor
Jesus Obenita Jr.
 
Session 2 test construction.mt's
Session 2   test construction.mt'sSession 2   test construction.mt's
Session 2 test construction.mt's
Jesus Obenita Jr.
 
Cooking ingredients
Cooking ingredientsCooking ingredients
Cooking ingredients
Jesus Obenita Jr.
 
Color theory
Color theoryColor theory
Color theory
Jesus Obenita Jr.
 

Recently uploaded (20)

Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.
jmansha170
 
Gibson "Secrets to Changing Behaviour in Scholarly Communication: A 2025 NISO...
Gibson "Secrets to Changing Behaviour in Scholarly Communication: A 2025 NISO...Gibson "Secrets to Changing Behaviour in Scholarly Communication: A 2025 NISO...
Gibson "Secrets to Changing Behaviour in Scholarly Communication: A 2025 NISO...
National Information Standards Organization (NISO)
 
How to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time OffHow to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time Off
Celine George
 
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptxRai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Dr. Ravi Shankar Arya Mahila P. G. College, Banaras Hindu University, Varanasi, India.
 
Search Engine Optimization (SEO) for Website Success
Search Engine Optimization (SEO) for Website SuccessSearch Engine Optimization (SEO) for Website Success
Search Engine Optimization (SEO) for Website Success
Muneeb Rana
 
june 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptxjune 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptx
roger malina
 
How to Create a Rainbow Man Effect in Odoo 18
How to Create a Rainbow Man Effect in Odoo 18How to Create a Rainbow Man Effect in Odoo 18
How to Create a Rainbow Man Effect in Odoo 18
Celine George
 
Pfeiffer "Secrets to Changing Behavior in Scholarly Communication: A 2025 NIS...
Pfeiffer "Secrets to Changing Behavior in Scholarly Communication: A 2025 NIS...Pfeiffer "Secrets to Changing Behavior in Scholarly Communication: A 2025 NIS...
Pfeiffer "Secrets to Changing Behavior in Scholarly Communication: A 2025 NIS...
National Information Standards Organization (NISO)
 
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptxDiptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Arshad Shaikh
 
How to Manage Maintenance Request in Odoo 18
How to Manage Maintenance Request in Odoo 18How to Manage Maintenance Request in Odoo 18
How to Manage Maintenance Request in Odoo 18
Celine George
 
Adam Grant: Transforming Work Culture Through Organizational Psychology
Adam Grant: Transforming Work Culture Through Organizational PsychologyAdam Grant: Transforming Work Culture Through Organizational Psychology
Adam Grant: Transforming Work Culture Through Organizational Psychology
Prachi Shah
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKANMATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
aditya23173
 
EUPHORIA GENERAL QUIZ FINALS | QUIZ CLUB OF PSGCAS | 21 MARCH 2025
EUPHORIA GENERAL QUIZ FINALS | QUIZ CLUB OF PSGCAS | 21 MARCH 2025EUPHORIA GENERAL QUIZ FINALS | QUIZ CLUB OF PSGCAS | 21 MARCH 2025
EUPHORIA GENERAL QUIZ FINALS | QUIZ CLUB OF PSGCAS | 21 MARCH 2025
Quiz Club of PSG College of Arts & Science
 
LDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad UpdatesLDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad Updates
LDM & Mia eStudios
 
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition IILDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDM & Mia eStudios
 
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_HyderabadWebcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Veera Pallapu
 
Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..
faizanaltaf231
 
Optimization technique in pharmaceutical product development.pptx
Optimization technique in pharmaceutical product development.pptxOptimization technique in pharmaceutical product development.pptx
Optimization technique in pharmaceutical product development.pptx
UrmiPrajapati3
 
How to Manage Allocations in Odoo 18 Time Off
How to Manage Allocations in Odoo 18 Time OffHow to Manage Allocations in Odoo 18 Time Off
How to Manage Allocations in Odoo 18 Time Off
Celine George
 
Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.
jmansha170
 
How to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time OffHow to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time Off
Celine George
 
Search Engine Optimization (SEO) for Website Success
Search Engine Optimization (SEO) for Website SuccessSearch Engine Optimization (SEO) for Website Success
Search Engine Optimization (SEO) for Website Success
Muneeb Rana
 
june 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptxjune 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptx
roger malina
 
How to Create a Rainbow Man Effect in Odoo 18
How to Create a Rainbow Man Effect in Odoo 18How to Create a Rainbow Man Effect in Odoo 18
How to Create a Rainbow Man Effect in Odoo 18
Celine George
 
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptxDiptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Arshad Shaikh
 
How to Manage Maintenance Request in Odoo 18
How to Manage Maintenance Request in Odoo 18How to Manage Maintenance Request in Odoo 18
How to Manage Maintenance Request in Odoo 18
Celine George
 
Adam Grant: Transforming Work Culture Through Organizational Psychology
Adam Grant: Transforming Work Culture Through Organizational PsychologyAdam Grant: Transforming Work Culture Through Organizational Psychology
Adam Grant: Transforming Work Culture Through Organizational Psychology
Prachi Shah
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKANMATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
aditya23173
 
LDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad UpdatesLDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad Updates
LDM & Mia eStudios
 
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition IILDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDM & Mia eStudios
 
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_HyderabadWebcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Veera Pallapu
 
Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..Cloud Computing ..PPT ( Faizan ALTAF )..
Cloud Computing ..PPT ( Faizan ALTAF )..
faizanaltaf231
 
Optimization technique in pharmaceutical product development.pptx
Optimization technique in pharmaceutical product development.pptxOptimization technique in pharmaceutical product development.pptx
Optimization technique in pharmaceutical product development.pptx
UrmiPrajapati3
 
How to Manage Allocations in Odoo 18 Time Off
How to Manage Allocations in Odoo 18 Time OffHow to Manage Allocations in Odoo 18 Time Off
How to Manage Allocations in Odoo 18 Time Off
Celine George
 

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