Functions, Regular expressions and Events JavaScript 4 Functions, Regular expressions and Events

Functions A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). The code inside the function will execute when "something" invokes (calls) the function: When an event occurs (when a user clicks a button) When it is invoked (called) from JavaScript code Automatically (self invoked)

Function Declarations Functions are declared with the following syntax: function functionName(parameters) { code to be executed }

Function Expressions A JavaScript function can also be defined using an expression. A function expression can be stored in a variable: var x = function (a, b) {return a * b}; The function above is actually an anonymous function (a function without a name). Functions stored in variables, do not need function names. They are always invoked (called) using the variable name.

The Function() Constructor Functions can also be defined with a built-in JavaScript function constructor called Function(). var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3);

Self Invoking Functions Function expressions can be made "self-invoking". A self-invoking expression is invoked (started) automatically, without being called. Function expressions will execute automatically if the expression is followed by (). You cannot self-invoke a function declaration. (function () { var x = "Hello!!"; // I will invoke myself })();

Functions are objects The typeof operator in JavaScript returns "function" for functions. But, JavaScript functions can best be described as objects. JavaScript functions have both properties and methods. function myFunction(a, b) { return arguments.length; }

Regular Expressions A regular expression is a sequence of characters that forms a search pattern. When you search for data in a text, you can use this search pattern to describe what you are searching for. A regular expression can be a single character, or a more complicated pattern. Regular expressions can be used to perform all types of text search and text replace operations. Syntax: /pattern/modifiers;

Regular Expression Modifiers i: Perform case-insensitive matching g: Perform a global match (find all matches rather than stopping after the first match) m: Perform multiline matching

Patterns Brackets are used to find a range of characters. Metacharacters are characters with a special meaning. \d: Find a digit \s: Find a whitespace character \b:Find a match at the beginning or at the end of a word Quantifiers define quantities. n+:Matches any string that contains at least one n n*: Matches any string that contains zero or more occurrences of n n?:Matches any string that contains zero or one occurrences of n

Events HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events. Here are some examples of HTML events: An HTML web page has finished loading An HTML input field was changed An HTML button was clicked

Event Handlers Often, when events happen, you may want to do something. JavaScript lets you execute code when events are detected. HTML allows event handler attributes, with JavaScript code, to be added to HTML elements. <some-HTML-element some-event='some JavaScript'>

Common Events onchange: An HTML element has been changed onclick: The user clicks an HTML element onmouseover: The user moves the mouse over an HTML element onmouseout: The user moves the mouse away from an HTML element onkeydown: The user pushes a keyboard key onload: The browser has finished loading the page