一.标识符
标识符的命名规范与java的命名规范一样。
二.变量
相比于java(java是一种强类型语言),JavaScript是一种弱类型语言。java的变量类型在编译后就不会发生改变,比如 int a ;以后a 的类型不再发生改变。JavaScript 在没有编译阶段,一个变量可以随意赋值,赋任何类型的值都可以。
语法:
声明:var 变量
赋值:变量 = 值
当一个变量在没有赋值的时候,变量会有一个初始的默认值 undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
var s1;
alert(s1);
</script>
</body>
</html>
注意,变量在没有声明的时候不能直接访问。
错误如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
alert(s1);
</script>
</body>
</html>
我们在控制台能看到如下的错误
三.函数
第一种方式:
function 函数名(参数列表){
函数体
}
第二种方式:
函数名 = function(参数列表){
函数体
}
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
function sayHello(username){
alert(username + "sayHello");
}
sayWorld = function(username){
alert(username + "asyWorld");
}
sayHello("张三");
sayWorld("李四");
</script>
<input type = "button" onclick = "sayHello('张三')"/>
</body>
</html>
其中,最后一个要点击按钮才可以实现。
四.函数(二)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
function aSunB(a, b){
return a + b;
}
var ab = aSunB(12, 34);
alert(ab);
var cde = aSunB(1, 2, 4);
alert(cde);
var f = aSunB(9);
alert(f);
</script>
</body>
</html>
我们可以看出,js在调用函数的时候,参数的类型没有限制,参数的个数也没有限制。
再来看一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
function aSum(a){
alert("有参数");
}
function aSum(){
alert("无参数");
}
aSum(3);
</script>
</body>
</html>
从结果中,我们得出一个结论,js中的同名函数,后面一个会覆盖前一个。
五.全局变量和局部变量
全局变量:全局变量是在函数体外声明的变量,声明周期是,在浏览器打开的时候声明,在浏览器关闭的时候销毁,因为一直在浏览器的内存中,所以会占用较大的内存,建议少用。
局部变量:在函数体内声明的变量,包括函数的形参,函数开始的时候变量声明开辟内存空间,函数结束之后销毁。
注意:当一个变量的声明没有用var关键字声明的时候,该变量都是局部变量。
六.js的数据类型
js虽然在声明变量的时候不用指定数据类型,但是在给变量赋值的时候,每一个数据还是有数据类型的。
基本数据类型:Undefined,Number,String,Boolean,Null
引用数据类型:Object以及Object的子集
在ES6(ECMAScript)规范以后,又有一种新的数据类型Symble。
数据类型的判断: typeof 变量
判断结果为:“undefined”,“number”,“string”,“boolean”,“object”,“function”。(注意是小写字符串)
判断两种数据类型是否相等,用 == 号。
Undefined
Undefined类型只有一个值,就是undefined。当一个变量没有手动赋值的时候,这个变量默认的值为undefined。
一个实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
var x;
y = undefined;
alert(x == y);//true
z = "undefine";
alert(x == z);//false
</script>
</body>
</html>
Number
Number类型的值:整数(1, 2,3,…),小数(1.1, 2.33, 4.55,…),正数(1, 2, 3…),负数(-1, -2, -3…),不是数字(NaN),无穷大(Infinity)。
提供如下的测试程序:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
var s1 = 1;
var s2 = 1.2;
var s3 = 3;
var s4 = -4;
var s5 = NaN;
var s6 = Infinity;
alert(typeof s1);
alert(typeof s2);
alert(typeof s3);
alert(typeof s4);
alert(typeof s5);
alert(typeof s6);
</script>
</body>
</html>
对于NaN:Not a Number,表示不是一个数字,但是Number类型的,那么什么时候是NaN呢?
表示运算的结果本来是一个数字,但结果却不是一个数字。
测试程序如下,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
var s1 = 12;
var s2 = "Hello";
alert(s1 / s2);//运算符/的结果本应该是数字
</script>
</body>
</html>
补充:
函数 isNaN(数据):结果为true表示不是一个数字,结果为false表示是一个数字。
函数 parseInt (数据):可以将字符串自动转换成数字,并且结果为整数。
函数 parseFloat (数据):可以将字符串自动转换成数字。
函数Math.ceil(数据):向上取整。
Boolean
布尔类型的值只有两个:true 和 false
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
var s = "";
if(s){ //它会自动转换成if(Boolean(s)){...}
alert("welcome" + s)
}
else{
alert("用户名不能为空")
}
</script>
</body>
</html>
各种数据的测试程序:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
alert(Boolean(1));//true
alert(Boolean(0));//false
alert(Boolean(""));//false
alert(Boolean("abc"));//true
alert(Boolean(null));//false
alert(Boolean(NaN));//false
alert(Boolean(undefined));//false
alert(Boolean(Infinity));//true
</script>
</body>
</html>
String
创建字符对象:
方式一:var s = "abc";
方式二:var s2 = new String("abc");
注意:String 是一个内置的类,它的父类是Object。
测试程序:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
//小String,属于String类型
var s1 = "Hello World";
alert(typeof s1);//string
//大String,属于Object类型
var s2 = new String("Hello World");
alert(typeof s2);//object
</script>
</body>
</html>
属性:
constructer
length
prototype
方法:
indefOf()//获得指定字符串在当前串出现的第一个索引
lastIndefOf()//获得指定字符串在当前串出现的最后一个索引
replace()//替换
substr()//截取子字符串
substring()//截取子字符串
toLowerCase()//转换大写
toUpperCase()//传换小写
split()//拆分字符串
substr(startIndex, length)//截取子字符串
substring(startIndex, lastIndex)//截取子字符串
Object
Object类型是所有类型的超类,自定义的任何类型,默认继承Object。
属性:
prototype //给类动态的扩展属性和函数
constructer
方法:
toLocaleString();
toString();
valueOf();
在Js当中自定义的类默认继承Object,会继承Object类中所有的属性和方法。
定义类的语法:
第一种方式:
function 类名(形参){
}
第二种方式:
类名 = function(形参){
}
创建对象:
new 构造方法名(实参){
}
//构造方法名和类名相同。
在Js当中类的定义,同时又是一个构造函数的定义,类的定义和构造函数的定义在js当中是放在一起完成的。
对象的两种访问方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
function User(sId, sName, sAge){
this.sId = sId;
this.sName = sName;
this.sAge = sAge;
this.getSid = function(){
return sId;
}
}
var s = new User(1111, "张三", 21)
alert(s.sId + s.sName + s.sAge); //第一种访问方式
alert(s["sId"] + s["sName"] + s["sAge"]);//第二种访问方式
alert(s.getSid());//访问函数
</script>
</body>
</html>
可以通过prototype这个属性来动态地扩展属性和函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
function User(sId, sName, sAge){
this.sId = sId;
this.sName = sName;
this.sAge = sAge;
this.getSid = function(){
return sId;
}
}
var s = new User(1111, "张三", 21)
alert(s.sId + s.sName + s.sAge);
alert(s["sId"] + s["sName"] + s["sAge"]);
alert(s.getSid());
User.prototype.getSAge = function(){
return this.sAge;
}
alert("1" + s.getSAge());
</script>
</body>
</html>
七. == 和 ===
==:等同运算符,只判断值是否相等
===:全等运算符,不仅值相等,而且类型也相等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert(typeof null);//object
alert(typeof undefined);//undefined
alert(typeof NaN);//number
alert(null == undefined);//true
alert(null == NaN);//false
alert(undefined == NaN );//false
alert(null === undefined);//false
alert(null === NaN);//false
alert(undefined === NaN );//false
</script>
</body>
</html>