JS函数(方法)
js函数是执行特定功能的代码块.也可以称为js方法。与java中的方法的功能是一样的
语法
function 函数名(参数列表){
函数体;
[return 返回值;]
}函数的第一种定义方式
<script type="text/javascript">
//无参无返回值的方法
function demo(){
let a = 3;
let b = 4;
alert(a+b);
}
//方法必须调用，不调用不执行
demo();
//===============================================
//有参无返回值的方法
function demo2(a,b){
alert(a+b);
}
demo2(4,6);
//===============================================
//无参有返回值的方法
function demo3(){
return 4+4;
}
let sum = demo3();
alert(sum);
//===============================================
//有参有返回值的方法
function demo4(a , b , c){
return a+b+c;
}
let d = demo4(2,3,4);
alert(d);
/*
到底什么是方法呢？
就是完成某一个功能的代码块
如何写一个方法？
写方法要考虑参数列表
是否要返回给调用者，如果要返回就必须给一个关键字 return
【1、考虑参数列表，2、考虑返回值】
如何调用一个方法？
确定方法名，以及方法参数列表
如果有return，必须要接受方法返回的结果
【1、考虑参数列表，2、考虑返回值】
*/
</script>函数的第二种定义方式
<script>
/*
比较复杂，只需要了解，开发很少使用
*/
var demo = new Function("a,b", "alert(a+b)");
demo(4,4);
</script>函数的第三种定义方式
<script>
/* 匿名函数: 了解 */
var demo = function(){
alert(77);
}
demo();
</script>如何绑定一个方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function demo(){
alert("我是小面包，你是谁啊？");
}
</script>
</head>
<body>
<input type="button" value="你点我啊小饼干" onclick="demo()" />
</body>
</html>如何获取标签中的内容
<script>
function demo(){
//获取p标签
var pid = document.getElementById("pid");
//获取p标签中的内容
// alert(pid.innerHTML);
//修改标签中的内容
pid.innerHTML = "祝贺中国共产党成立100周年";
/**
* 1、拿到要获取内容的标签
* 2、跟获取的标签，再【获取内容】对象名.innerHTML 【修改内容】对象名.innerHTML = "修改内容"
*/
}
</script>
</head>
<body>
<p id="pid">社会主义核心价值观</p>
<!-- 绑定单击事件（一个动作） -->
<button onclick="demo()">修改内容</button>
</body>JS函数注意事项
- 方法定义时，形参的类型不用写,返回值类型可写可不写
- 如果定义名称相同的方法，会被覆盖，js中没有方法的重载的概念
- 在JS中，方法的调用只与方法的名称有关，和参数列表无关
- 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
- JS函数中也可以有匿名函数
匿名函数经常会跟事件进行结合着使用
function(参数列表){
函数体;
[return 返回值;]
}校验手机号
<script>
function demo(){
var spanid = document.getElementById("spanid")
//获取输入框
var phid = document.getElementById("phid");
//获取输入框中的内容
var p_value = phid.value; //13140008888
//定义手机号规则
var regExp = new RegExp("^1[356789]\\d{9}$");
//拿用户输入手机号和定义手机号规则比较
if(regExp.test(p_value)){
// alert("手机号正确");
spanid.innerHTML="";
}else{
// alert("手机号不正确");
spanid.innerHTML="手机号必须满足11位数字！";
}
}
</script>
</head>
<body>
<form action="#" method="post">
手机号：<input type="text" name="phonenum" id="phid"/><span style="color: red;" id="spanid"></span>
<input type="button" value="测试手机号" onclick="demo()" />
</form>
<!--
编程思想：把你想干的事情，通过代码实现
1、用户页面书写
2、获取用户输入的内容
3、根据用户输入的内容进行判断（是否满足手机的规则）
4、如果满足手机的规则直接提交到后台
5、如果不满足手机的规则，提示用户手机号不正确
-->
</body>正则表达式
RegExp对象，正则对象，正则表达式的书写规则和Java也一致：
. 当前可以是任意字符
? 表示零次或一次
* 表示零次或多次
+ 表示一次或多次
() 对某个存在的正则进行分组 组的使用 \组号 $组号
{} 当前的规则可以出现的次数
{2} 正好 2次 {m,} 最少m次 {m,n} 最少m次 最多n
[] 当前位置上可以是中括号中某个字符
[abc] [^abc] [a-zA-Z][0-9]
\\d 当前位置上可以数字
\\w 当前位置上可以是字母 数字 下划线
\b 单词边界 hello world
^ 行开始
$ 行结尾window.onload
<script>
//页面加载时触发
window.onload = function(){
//获取按钮
var _id = document.getElementById("inputid");
//对象名.事件名
_id.onclick = function(){
//获取标签中的内容
var id2 = document.getElementById("id2");
//弹出
alert(id2.innerHTML);
}
}
</script>
</head>
<body>
<p id="id2">轻轻的你走了，那就走吧！！！</p>
<input id="inputid" type="button" value="你点我啊"/>
</body>
