Home > Article > Web Front-end > Organize Javascript function study notes_javascript skills

Organize Javascript function study notes_javascript skills

WBOYOriginal: 2016-05-16 15:28:321271browse

1. What is a function
If you need to use the same piece of code multiple times, you can encapsulate them into a function. A function is a set of statements that can be called at any time in your code. Each function is actually a short script.
For example: To complete the function of multiple sets of sums.

var sum;
sum = 3+2;
alear(sum);
 
sum = 7+8;
alear(sum);
......//不停的重复两行代码

If you want to implement the sum of 8 groups of numbers, you will need 16 lines of code. The more you implement, the more lines of code you will need. Therefore, we can put the code block that performs a specific function into a function and call this function directly, saving the trouble of repeatedly entering a large amount of code. Complete using functions:

function add(a,b){
  sum = a+b;//只需要写一次就可以
 };
 add2(3,2);
 add2(7,8);
 ......//只需要调用函数就可以

2. Define function
Define function syntax

 function 函数名(参数argument){
　　函数体statements;
 }
 //function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。

function shout(){
   var beatles = Array("John","Paul","George","Ringo");
   for (var count = 0; count < beatles.length; count++){
     alert(beatles[count]);
   }
 }
 //这个函数里面的循环语句将依次弹出对话框来显示beatles里面内容。 
 shout();调用函数，执行脚本里的动作

Complete the function of summing two numbers and displaying the result:

<script type="text/javascript">
  function add2(){
    sum = 3+2;
    alert()sum;
   }
   add2();
 </script>

3. Function call
After the function is defined, it cannot be executed automatically. You need to call it and write the function name directly in the required position.
The first case: called within the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag.

<script type="text/javascript">
   function add(){
     sum = 1+1;
     alert(sum);
  }
   add();//调用函数，直接写函数名。
</script>

Second case: Called in an HTML file, such as calling a defined function after clicking a button.

<html>
 <head>
 <script type="text/javascript">
   function add2(){
     sum = 5 + 6;
     alert(sum);
   }  
 </script>
 </head>
 <body>
 <form>
  <input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件，直接写函数名
 </form>
 </body>
 </html>

4. Functions with parameters
In fact, the function definition can also be in the following format:
function function name (parameter 1, parameter 2) {
Function code
}
When defining a function, you can declare as many arguments to it as long as they are separated by commas. Inside a function, you can use any of its parameters like an ordinary variable.
According to this format, the function to implement the sum of any two numbers should be written as:

function add2(x,y){
   sum = x + y;
   document.write(sum);
 }
 //x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。

implements the following functions:
Define a function to implement the sum of three numbers. The function name is add3.
Calculate the sum of two sets of three numbers: 5, 8, 3/7, 1, and 4.

 <script type="text/JavaScript">
   function add3(x,y,z) {
   sum = x + y +z;
     document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");
   }
   add3(5,8,3);
   add3(7,1,4); 
 </script>

5. Functions that return values 
Functions can not only receive data (in the form of parameters) but also return data. We can create a function and have it return a value, a string, an array, or a boolean. This requires the use of a return statement.

 function multiply(num1,num2){
   var total = num1*num2;
   return total;
 }

The result was output through "document.write" before, now it is output using function
We only need to change the "document.write(sum)" line to the following code:

 function add2(x,y){
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
 }
 //还可以通过变量存储调用函数的返回值：
 result = add2(3,4);//语句执行后，result变量中的值为7。

Example: The following function has only one parameter (a Fahrenheit temperature value), and it will return a numerical value (the Celsius temperature value of the same temperature):

 <script type="text/javascript">
   function convertToCelsius (temp) {
     var result = temp - 32;
     result = result / 1.8;
     return result;
   }
   //函数的真正价值体现在，我们还可以把它们当做一种数据类型来使用，这意味着可以把一个函数的调用结果赋给一个变量：
   var temp_fahrenheit = 95;
   var temp_celsius = convertToCelsius(temp_fahrenheit);
   alert(temp_celsius);
 </script>

In this example, the value of variable temp_celsius will be 35, which is returned by the convertToCelsius function.
When naming variables, I use underscores to separate words; when naming functions, I capitalize the first letter of each word starting with the second word (that is, camelCase).
1), scope of variables
Variables can be either global or local.
Global variable can be referenced anywhere in the script. Once you declare a global variable in a script, you can reference it from anywhere in the script—including inside functions. The scope of global variables is the entire script.
Local variable only exists inside the function in which it is declared, and cannot be referenced outside that function. The scope of local variables is limited to a specific function.
Function variables can be explicitly scoped using the var keyword.
If var is used in a function, that variable will be regarded as a local variable, which only exists in the context of this function; conversely, if var is not used, that variable will be regarded as a global variable. If There is already a global variable with the same name in the script, and this function will change the value of that global variable.
Example:

function square(num){
   total = num*num;
   return total;
 }
 var total = 50;
 var number = square(20);
alert(total);

这是错误的，number的值为400，但是这里alert弹出的是total的值，应该是50.

这些代码将不可避免地导致全局变量total的值发生变化。

全局变量total的值变成了400.我的本意是让square()函数只把它计算出来的平方值返回给变量number，但因为未把这个函数内部total变量明确地声明为局部变量，这个函数把名字同样是total的那个全局变量的值也改变了。

把这个函数写成如下的样子才是正确的：

 function square(num){
   var total = num*num;
   return total;
 }
 var total = 50;
 var number = square(20);
 alert(total);
 </script>

正确结果：

以上就是关于Javascript函数的学习笔记，还涉及到了一些变量的知识点，希望对大家的学习有所帮助。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：3 common methods for js cross-domain request data_javascript skillsNext article：3 common methods for js cross-domain request data_javascript skills

See more

Organize Javascript function study notes_javascript skills

Related articles