JS-02-JS变量与函数
JS-02-JS变量与函数
1.JS标识符命名规则与规范
JS标识符的命名规则和规范按java的方式就可以了。
标识符命名规则：
- 由字母、数字、下划线(_)、美元符号($)组成。
- 不能由数字开头。
- 严格区分大小写。
- 不可使用关键字命名。
- 理论上长度不限。
标识符命名规范：
- 按照驼峰命名法：
- 类名和接口名首字母大写，后面每一个单词的首字母也大写。
- 方法名和变量名首字母小写，后面每一个单词的首字母大写。
- 常量所有字母都要大写，且单词与单词之间用下划线衔接。
- 命名要尽量用英语单词写，见名知意。
2.JS的变量
2.1怎么声明变量？
var 变量名;
2.2如何赋值？
变量名 = 值;
2.3JS变量可以随意赋值
javascript是一种弱类型编程语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都可以。
var i = 10;
i = 3.14;
i = true;
i = 'a';
i = "abc";
i = new Object();
2.4变量默认值为undefined
在JS中，当一个变量没有手动赋值的时候，系统默认赋值undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量</title>
</head>
<body>
<script type="text/javascript">
var j;
// undefined在JS中是一个具体存在的值
alert("j =" + j);
</script>
</body>
</html>
2.5访问没有声明的变量
如果一个变量没有声明就直接访问，会报语法错误。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量</title>
</head>
<body>
<script type="text/javascript">
var j;
// 默认赋值undefined
alert("j =" + j);
//访问未声明的变量k
alert(k)
</script>
</body>
</html>
打开页面，点击F12，查看控制台，可见，当访问未声明的变量时会报错：
k is not defined
2.6演示给同一个变量设置不同的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量</title>
</head>
<body>
<script type="text/javascript">
var a,b,c = 100;
alert("a = " + a);
alert("b = " + b);
alert("c = " + c);
a = false;
alert(a);
a = "abc";
alert(a);
a = 3.14;
alert(a);
</script>
</body>
</html>
3.JS的函数
3.1JS函数有什么用？
JS中的函数等同与java中的方法，函数也是一段可以被重复利用的代码片段。
函数一般可以完成某个特定功能。
3.2回顾java方法
格式：
[修饰符列表] 返回值类型 方法名(形式参数列表) {
方法体;
}
例如：
public static boolean doSome(String name,int age) {
...
return false;
}
public static void main(String[] args) {
boolean isflag = doSome("张三",25);
}
3.3JS函数的定义和调用
3.3.1JS函数定义的语法格式
第一种：
function 函数名(形式参数列表) {
函数体;
}
第二种：
函数名 = function(形式参数列表) {
函数体;
}
JS中的函数不需要指定返回值类型，返回什么类型都可以。
3.3.2定义JS函数并调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数</title>
</head>
<body>
<script type="text/javascript">
// 第一种方式
//a和b都是局部变量，都是形参
function sum(a,b) {
alert("a + b =" + (a + b));
}
//函数必须调用才会执行
//调用sum函数
sum(10,20);
// 第二种方式
show = function(name) {
alert("Hello " + name);
}
//调用show函数
show("Tom");
</script>
</body>
</html>
3.3.3将JS函数的调用放到事件句柄里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数</title>
</head>
<body>
<script type="text/javascript">
// 第一种方式
function sum(a,b) {
alert("a + b =" + (a + b));
}
// 第二种方式
show = function(name) {
alert("Hello " + name);
}
</script>
<!-- 将函数的调用放到事件句柄里 -->
<input type="button" value="10和20的和" onclick="sum(10,20)"/>
<input type="button" value="Hello" onclick="show('Jerry')"/>
</body>
</html>
3.4JS函数的灵活性
3.4.1JS函数在调用时，参数类型和个数没有限制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数的灵活性</title>
</head>
<body>
<script type="text/javascript">
//调用函数时，参数不受限制
function doSome(a,b) {
return a + b;
}
//不传参数
var value1 = doSome();//NaN,(Not a Number)，表示不是一个数字。
alert(value1);
//传一个字符串参数
var value2 = doSome("abc + ");//abc + undefined
alert(value2);
//传一个数字参数
var value3 = doSome(10);//NaN
alert(value3);
//传两个数字参数
var value4 = doSome(10,20);//30
alert(value4);
//传三个数字参数
var value5 = doSome(10,20,40);//30
alert(value5);
</script>
</body>
</html>
3.4.2在JS函数不能重名
如果两个函数重名，那么后面声明的函数会将前面声明的同名函数覆盖。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在JS函数不能重名</title>
</head>
<body>
<script type="text/javascript">
//前面的函数
function doOther(name) {
alert(name);
}
//后面的重名函数
function doOther() {
alert("Hello Hello");
}
//调用函数
doOther("zhangsan");
</script>
</body>
</html>
4.JS的全局变量和局部变量
4.1JS中全局变量和局部变量的概念
全局变量：
- 在函数体外声明的变量都属于全局变量。
- 全局变量的生命周期是：
- 浏览器打开时声明。
- 浏览器关闭时销毁。
- 尽量少用全局变量，因为全局变量一直会在浏览器的内存里，耗费内存空间。
- 能用局部变量尽量用局部变量。
局部变量：
- 在函数体中声明的变量属于局部变量。包括函数的形参。
- 局部变量的生命周期是：
- 函数开始执行时局部变量的内存开辟。
- 函数执行结束后，局部变量的内存空间释放。
- 局部变量的生命周期较短。
4.2全局变量和局部变量的访问
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的全局变量和局部变量</title>
</head>
<body>
<script type="text/javascript">
var a = 10;//全局变量
function fun1() {
alert(a);//访问全局变量
}
fun1();
var username = "张三";//全局变量
function fun2() {
var username = "李四";//局部变量
alert(username)//就近原则，这里访问的是局部变量
}
fun2();//函数执行结束后局部变量的内存被释放
alert("username = " + username);//这里调用的是全局变量
</script>
</body>
</html>
4.3在函数外面能否访问局部变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的全局变量和局部变量</title>
</head>
<body>
<script type="text/javascript">
function fun3() {
var num = 50;
alert(num);
}
fun3();//在此处局部变量已被释放
alert(num);//在此处访问的是一个没有被定义的变量，语法错误。num is not defined
</script>
</body>
</html>
4.4当声明变量时不使用var关键字
当一个变量声明时未使用var关键字，那么无论这个变量在哪声明的，都会声明成全局变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的全局变量和局部变量</title>
</head>
<body>
<script type="text/javascript">
function fun4() {
num2 = 50;
alert(num2);
}
fun4();
alert(num2);
</script>
</body>
</html>
