Calling function definitions and
function
function is a piece of code can be repeated.
Function definition and implementation
<script type="text/javascript">
// 函数定义
function aa(){
alert('hello!');
}
// 函数执行
aa();
</script>
Definitions and examples of function calls
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//函数的定义
function fnMyalert()
{
alert('hello world!');
}
//函数调用执行
// fnMyalert();
function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
</script>
</head>
<body>
<!-- 标签内调用 -->
<div id="div1" onclick="fnMyalert()">这是一个div元素</div>
<input type="button" name="" value="改变div" onclick="fnChange()">
</body>
</html>
函数的定义和调用示例
Pre-analytical variables and functions
JavaScript parsing process is divided into two phases, the first phase of compilation and execution phase, functions are compiled in advance stage will function definitions and variable declarations var defined in advance, assign it to undefined.
<script type="text/javascript">
aa(); // 弹出 hello！
alert(bb); // 弹出 undefined
function aa(){
alert('hello!');
}
var bb = 123;
</script>
Example variables and functions preresolved
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 预解析会让变量的声明提前
alert(iNum); //弹出undefined
// 使用一个未声明的变量，出错！
//alert(iNum02);
var iNum = 12;
// 预解析会让函数的声明和定义提前
myalert();
function myalert(){
alert('hello world!');
}
</script>
</head>
<body>
</body>
</html>
变量和函数预解析示例
Extract the line between events
events between html line calls can be extracted to call javascript in order to achieve separation of structure and behavior.
Why do you want to extract event between the lines?
We are the original function of the event will be placed directly inside html code, so, in the maintenance function easily lead to accidental deletion can not be executed properly; there is js should be related together to achieve the separation of code for easy viewing and maintenance;
<!--行间事件调用函数 -->
<script type="text/javascript">
function myalert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="myalert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">
Examples of events between the extraction line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn01');
// 将事件属性和一个函数关联，函数不能写小括号，写了会马上执行
oBtn.onclick = fnChange;
function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<input type="button" name="" value="改变div" id="btn01">
</body>
</html>
提取行间事件示例
Anonymous function
defined functions can not give the name, this is called anonymous functions, anonymous functions can be assigned directly to the event element bound to complete the call anonymous function.
Anonymous function for the case to be an element of do one thing, if you want to do things for multiple elements, you need a function name, you can not use the anonymous function.
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
In fact achieve the extraction line between the wording of the final event not function, we use more anonymous function is written as follows.
js anonymous function example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn01');
/* 提取行间事件写法
oBtn.onclick = fnChange;
function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
*/
// 最终写法-转化成匿名函数的写法：
oBtn.onclick = function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
};
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<input type="button" name="" value="改变div" id="btn01">
</body>
</html>
js匿名函数示例
Example for anonymous functions - page peels
skin01.css
body{
background-color:green;
}
input{
width:200px;
height:50px;
background-color:gold;
border:0;
}
skin02.css
body{
background-color:#ddd;
}
input{
width:200px;
height:50px;
border-radius:25px;
background-color:pink;
border:0;
}
网页换肤.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01">
<script type="text/javascript">
window.onload = function(){
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
var oLink = document.getElementById('link01');
oBtn01.onclick = function(){
oLink.href = "css/skin01.css";
};
oBtn02.onclick = function(){
oLink.href = "css/skin02.css";
}
}
</script>
</head>
<body>
<input type="button" name="" value="皮肤一" id="btn01">
<input type="button" name="" value="皮肤二" id="btn02">
</body>
</html>
匿名函数综合示例-网页换肤
Function parameter passing
<script type="text/javascript">
function myalert(a){
alert(a);
}
myalert(12345);
</script>
Exemplary function parameter passing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
function fnMyalert(a){
alert(a);
}
//fnMyalert('hello world!');
function fnChangestyle(mystyle,val){
var oDiv = document.getElementById('div1');
oDiv.style[mystyle] = val;
}
fnChangestyle('fontSize','30px');
fnChangestyle('color','red');
fnChangestyle('backgroundColor','pink');
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
函数传参示例
Function 'return' key
function in the 'return' key role in:
Function that returns the result of execution of
the function ends the operation
to prevent the default behavior
return keywords example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function fnAdd(a,b) {
var c = a + b;
// 返回c的值，然后结束函数的运行
return c;
alert("函数内部的c="+c);
}
var iResult = fnAdd(2,5);
alert(iResult);
</script>
</head>
<body>
</body>
</html>
return关键字使用示例
Finally, I recommend a push in the front-end learning exchange group 685 910 553 Advanced ( front-end information-sharing ), no matter which direction you are on Earth,
whether you are welcome to work in a few years you settled in! (Within the group regularly offer free collection of some of the main group of free learning materials and books tidied face questions and answers document!)
If you have any objection to this article, then please write your comments in the article comments at.
If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles.
Wish everyone in the programming this road, farther and farther.