js_method.md - brainchildservices/curriculum GitHub Wiki

Slide 1

JAVASCRIPT METHODS

  • Functions and methods are the same in JavaScript, but a method is a function, which is a property of an object.

  • JavaScript methods are actions that can be performed on objects.

  • Methods are functions stored as object properties.

  • The method is a function associated with an object.

  • The following is an example of a method in JavaScript −

     <html>
 <head>
 <script>
 var employee = {
 empname: "Alan",
 department : "Economics",
 id : 002,
 details : function() {
 return this.empname + " with Department " + this.department;
 }
 };

 document.write(employee.details());
 </script>
 </head>
 </html>
    • output --> Alan with Department Economics

Slide 2

  • JAVASCRIPT FUNCTIONS

  • A function is a subprogram designed to perform a particular task.

  • Functions are executed when they are called. This is known as invoking a function.

  • Values can be passed into functions and used within the function.

  • Functions always return a value. In JavaScript, if no return value is specified, the function will return undefined.

  • Functions are objects.

  • Define a Function.

  • There are a few different ways to define a function in JavaScript:

A Function Declaration defines a named function. To create a function declaration you use the function keyword followed by the name of the function.

Slide 3

When using function declarations, the function definition is hoisted, thus allowing the function to be used before it is defined.

  function name(parameters)
  {
  statements
  }

A Function Expressions defines a named or anonymous function. An anonymous function is a function that has no name.

Function Expressions are not hoisted, and therefore cannot be used before they are defined.

  let name = function(parameters)
  {
  statements
  }

Slide 4

  • An Arrow Function Expression is a shorter syntax for writing function expressions. An Arrow Function Expression is a shorter syntax for writing function expressions.

    let name = (parameters) =>
{
statements
}

  • JAVASCRIPT DOM DOCUMENT

  • The HTML DOM document object is the owner of all other objects in your web page.

  • The document object represents your web page.

  • If you want to access any element in an HTML page, you always start with accessing the document object.

Slide 5

  • Finding HTML Elements

    Method Description

    document.getElementById(id) Find an element by element id

    • Changing HTML Elements

            Property                               Description

  element.innerHTML =  new html content 	Change the inner HTML of an element
  element.attribute = new value 	        Change the attribute value of an HTML element
  element.style.property = new style 	    Change the style of an HTML element

          Method                                        Description
  element.setAttribute(attribute, value) 	  Change the attribute value of an HTML element

Slide 5 DownWards

- Adding and Deleting Elements

                Method 	                                 Description
        document.createElement(element) 	        Create an HTML element
        document.removeChild(element) 	        Remove an HTML element
        document.appendChild(element) 	        Add an HTML element
        document.replaceChild(new, old) 	        Replace an HTML element
        document.write(text) 	                Write into the HTML output stream
⚠️ **GitHub.com Fallback** ⚠️