JavaScript functions
A function is an event-driven or reusable block of code that executes when it is invoked.
Instance
<!DOCTYPE HTML><HTML><Head> <Script>functionmyFunction () {alert ("Hello world!"); }</Script></Head><Body> <Buttononclick= "myFunction ()">Click here</Button></Body></HTML>
JavaScript function syntax
A function is a block of code wrapped in curly braces, preceded by a keyword function:
function functionname ()
{
Here is the code to execute
}
When the function is called, the code inside the function is executed.
A function can be called directly when an event occurs (such as when a user taps a button) and can be called from anywhere by JavaScript.
Tips: JavaScript is case sensitive. The keyword function must be lowercase and must be called with the same casing as the function name.
Calling a function with parameters
When you call a function, you can pass a value to it, which is called a parameter.
These parameters can be used in functions.
You can send any number of arguments separated by commas (,):
MyFunction (argument1,argument2)
When you declare a function, declare the argument as a variable:
function MyFunction ( var1
, var2
)
{
Here is the code to execute
}
Variables and parameters must appear in a consistent order. The first variable is the given value of the first parameter passed, and so on.
Instance
<Buttononclick= "MyFunction (' Bill Gates ', ' CEO ')">Click here</Button><Script> functionmyFunction (name, job) {alert ("Welcome" +name+ ", the" +job); }</Script>
The above function prompts "Welcome Bill Gates, the CEO" when the button is clicked.
The function is flexible, and you can call the function with different parameters, giving you a different message:
Instance
<onclick= "myFunction (' Harry Potter ', ' Wizard ')"> click here </ button><onclick= "myFunction (' Bob ', ' Builder ')" > Click here </button>
Depending on the button you clicked, the example above would suggest "Welcome Harry Potter, the wizard" or "Welcome Bob, the Builder".
function with return value
Sometimes, we want the function to return the value to the place where it was called.
This can be achieved by using the return statement.
When you use the return statement, the function stops execution and returns the specified value.
Grammar
function myFunction () {var x=5;return x;}
The above function returns the value 5.
Note: the entire JavaScript does not stop executing, just the function. JavaScript will continue to execute code from where the function is called.
The function call will be replaced by the return value:
var myvar=myfunction ();
The value of the MyVar variable is 5, which is the value returned by the function "MyFunction ()".
You can use the return value even if you do not save it as a variable:
document.getElementById ("Demo"). Innerhtml=myfunction ();
The InnerHTML of the "demo" element will be 5, which is the value returned by the function "MyFunction ()".
You can make the return value based on the arguments passed to the function:
Instance
Calculates the product of two numbers and returns the result:
function myFunction (b) {return a *b;} document.getElementById ("Demo"). innerhtml= MyFunction (4,3);
The InnerHTML of the "demo" element will be:
12
You can also use the return statement when you just want to exit the function. The return value is optional:
function myFunction (A, b) {if (a>b) { return; } X=A+B}
If a is greater than B, the above code exits the function and does not calculate the sum of a and B.
Local JavaScript variables
A variable declared inside a JavaScript function (using Var) is a local variable, so it can only be accessed inside the function. (The scope of the variable is local).
You can use local variables with the same name in different functions, because only the function that declares the variable can recognize the variable.
As soon as the function is complete, the local variable is deleted.
Global JavaScript variables
Variables declared outside of a function are global variables, and all scripts and functions on a Web page can access it.
The lifetime of a JavaScript variable
The lifetime of JavaScript variables begins at the time they are declared.
Local variables are deleted after the function is run.
Global variables are deleted after the page is closed.
Assigning a value to an undeclared JavaScript variable
If you assign a value to a variable that has not been declared, the variable is automatically declared as a global variable.
This statement:
Carname= "Volvo";
A global variable is declared carname, even if it executes within the function.
JavaScript operators
operator = is used to assign a value.
operator + is used to add values.
operator = Used to assign a value to a JavaScript variable.
The arithmetic operator + is used to add up the value.
y=5;
z=2;
After the above statement is executed, the value of X is 7.
JavaScript arithmetic operators
Arithmetic operators are used to perform arithmetic operations between variables and/or values.
Given y=5, these arithmetic operators are explained in the following table:
Operator |
Describe |
Example |
Results |
+ |
Add |
X=y+2 |
X=7 |
- |
Reducing |
X=y-2 |
X=3 |
* |
By |
X=y*2 |
x=10 |
/ |
Except |
X=y/2 |
x=2.5 |
% |
Find remainder (reserved integers) |
x=y%2 |
X=1 |
++ |
Accumulation |
X=++y |
X=6 |
-- |
Decline |
X=--y |
X=4 |
JavaScript Assignment operators
Assignment operators are used to assign values to JavaScript variables.
Given x=10 and y=5, the following table explains the assignment operator:
Operator |
Example |
Equivalent to |
Results |
= |
X=y |
|
X=5 |
+= |
X+=y |
X=x+y |
X=15 |
-= |
X-=y |
X=x-y |
X=5 |
*= |
X*=y |
X=x*y |
X=50 |
/= |
X/=y |
x=x/y |
x=2 |
%= |
X%=y |
X=x%y |
X=0 |
The + operator for strings
The + operator is used to add a literal value or a string variable (to join together).
If you want to concatenate two or more string variables, use the + operator.
Txt1= "What a very";
Txt2= "Nice Day";
TXT3=TXT1+TXT2;
After executing the above statement, the variable TXT3 contains the value "What a Verynice Day".
To add a space between two strings, you need to insert a space into a string:
Txt1= "What a very";
Txt2= "Nice Day";
TXT3=TXT1+TXT2;
or insert a space into an expression:
Txt1= "What a very";
Txt2= "Nice Day";
txt3=txt1+ "" +TXT2;
After the above statement is executed, the variable TXT3 contains the following values:
"What a very"
adding arithmetic to strings and numbers
Take a look at these examples:
x=5+5;
document.write (x);
x= "5" + "5";
document.write (x);
x=5+ "5";
document.write (x);
x= "5" +5;
document.write (x);
The rules are:
If you add a number to a string, the result becomes a string.
JavaScript comparison and logical operators
Comparison and logical operators are used to test for true or false.
Comparison operators
Comparison operators are used in logical statements to determine whether a variable or value is equal.
Given x=5, the following table explains the comparison operators:
Operator |
Describe |
Example |
== |
Equals |
X==8 to False |
=== |
Congruent (value and type) |
X===5 is true;x=== "5" is false |
!= |
Not equal to |
X!=8 is True |
> |
Greater than |
X>8 to False |
< |
Less than |
X<8 is True |
>= |
Greater than or equal to |
X>=8 to False |
<= |
Less than or equal to |
X<=8 is True |
How to use
You can use comparison operators to compare values in a conditional statement and then take action based on the result:
if (age<18) document.write ("Too Young");
You'll learn more about conditional statements in the next section of this tutorial.
logical operators
Logical operators are used to determine the logic between variables or values.
Given X=6 and y=3, the following table explains the logical operators:
Operator |
Describe |
Example |
&& |
and |
(x < ten && y > 1) True |
|| |
Or |
(x==5 | | y==5) is false |
! |
Not |
! (x==y) is true |
Conditional operators
JavaScript also includes conditional operators that assign values to variables based on certain conditions.
Grammar
Example
Greeting= (visitor== "PRES")? " Dear president ":" Dear ";
If the value in the variable visitor is "PRES", assign a value of "Dear president" to the variable greeting, otherwise assign a value of "Dear".
Web Development Technology--javascript Syntax 3 (functions, operators, comparisons, and logical operators)