开始时间：2021-04-08
JavaScript
运行在浏览器上的脚本语言
目标程序以普通文本保存的，就是脚本语言
Java编译会转为.class，所以不是脚本语言
JS嵌入HTML文件
事件驱动型语言，依靠事件去驱动，然后执行对应的程序
方式一
例如执行onClick
当执行onclick时，可以实现弹窗
这个有点类似于之前写的VBA事件编程
可以连续执行多个弹窗，且window.可以不写
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JSTest01</title>
</head>
<body>
<!--执行click操作后，实现操作-->
<input type="button" value="nihao" onclick=
"window.alert('hello js')
alert('这是一个弹窗')
alert('这是第三个弹窗了')"/>
</body>
</html>
方式二：写脚本块
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JSTest01</title>
</head>
<body>
<!--脚本块-->
<!--暴露在脚本块中的程序，在页面打开的时候执行，并且遵守自上而下的顺序，不需要事件触发-->
<script type="text/javascript">
window.alert("hello world")
window.alert("你好呀")
</script>
</body>
</html>
方式三：引入JavaScript文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JSTest01</title>
</head>
<body>
<!--脚本块-->
<!--引入文件-->
<script type="text/javascript" src="MyJavaScript.js">
</script>
</body>
</html>
引入文件后，脚本块里再写代码是不会执行的
// JavaScript Document
window.alert("hello javascript");
JS变量类型
JS是弱类型语言，与Java不同
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JSTest01</title>
</head>
<body>
<!--脚本块-->
<!--引入文件-->
<script type="text/javascript">
var i;//弱类型，var类型可以赋任何类型的值
alert("i="+i)//不赋值时，默认赋值undefined
//如果变量没有声明就用，会报错的
</script>
</body>
</html>
JS函数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JSTest01</title>
</head>
<body>
<!--脚本块-->
<!--引入文件-->
<script type="text/javascript">
sum(10,20);
function sum(a,b){
alert(a+b);
}
</script>
</body>
</html>
弱类型，参数不需要定义类型
也可以把函数名写在前面
SumTest=function(user){
alert("This is a :"+user);
}
SumTest("Bear");
可以直接在button按钮中直接调用函数
<input type="button" value="nihao" onClick="SumTest(' hello');"/>
函数调用时太随便了，个数类型都不限制
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数</title>
</head>
<body>
<script type="text/javascript">
//a,b可以接受字符串和整型，都能用
function sum(a,b){
return a+b;
}
var retValue=sum(1,2);
alert(retValue);
var retValue2=sum("jack","Ma");
alert(retValue2);
</script>
</body>
</html>
在这里面重载行不通
后面定义的同名函数会覆盖掉之前定义的
谁后声明谁做主，哪怕第一个接受一个参数，第二个不接受参数
调用的时候传一个参数，但实际还是调用了第二个函数
但是可以在一个函数中进行重载设置
传参给的数据放入argument数组，实际调用的时候从argument数组里面取值，然后放入函数中进行运算
function fun1(a,b){
if(arguments.length==1){
window.alert(arguments[0]);
}else if(arguments.length==2){
window.alert(arguments[0]+arguments[1]);
}
}
另外我们要知道
JS的函数有两种声明方式
<script type="text/javascript">
//标准形式
function fun1(a,b){
if(arguments.length==1){
window.alert(arguments[0]);
}else if(arguments.length==2){
window.alert(arguments[0]+arguments[1]);
}
}
//匿名形式
var fun1=function (a,b){
window.alert(a+b);
}
</script>
并且，调用的时候要注意顺序
<script type="text/javascript">
fun1();
function fun1() {
window.alert("this is fun1");
}
fun1();
</script>
如果使用标准形式，那么会执行能给两次script，第一次先看有没有标准形式的声明，第二次执行再执行所有函数，所以上述代码的fun1能被执行2次
<script type="text/javascript">
fun1();
function fun1() {
window.alert("this is fun1");
}
fun1();
function fun1() {
window.alert("this is fun2");
}
var fun1 = function () {
window.alert("this is fun3");
}
fun1();
</script>
script执行第一次，先找到了fun1的标准形式，第二个fun1覆盖掉第一个fun1，script执行第二次，输出两个fun2
然后被匿名函数重载掉，输出一个fun3
因此，这段代码执行结果为
this is fun2
this is fun2
this is fun3
全局变量和局部变量
- 全局变量：在函数体之外声明的变量属于全局变量,全局变量的生命周期是:浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间
- 局部变量:在函数体当中声明的变量,包括一个函数的形参都属于局部变量，
局部变量的生命周期是:函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
看一个例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数</title>
</head>
<body>
<script type="text/javascript">
//全局变量
var MyName="Wangwu";
function MyPrint(){
//局部变量
var MyName="Lisi";
//不加var进行声明，那么在这声明了，也属于全局变量
//Myname="Lisi"；
//调用局部变量
alert("name is :"+MyName);
}
//调用局部变量
MyPrint();
//调用全局变量
alert(MyName);
</script>
</body>
</html>
但要注意
如果一个变量没有用var进行声明，那么他的声明不管在哪声明，都是全局变量，前提时该语句要执行，如果放在函数里面，但函数本身没有执行，那也不可以
全局变量一旦声明，就能作为window.的一个属性使用
JavaScript的数据类型
变量弱化数据类型，但是值还是有数据类型的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数</title>
</head>
<body>
<script type="text/javascript">
function sum(a,b){
//可以通过typeof判断是否为需要的数据类型
//判断是否相等，通过双等号就行，不用像Java里面用equal
if(typeof a=="number" && typeof b=="number"){
return a+b;
}
alert(a+","+b+"必须都为数字");
}
alert(sum(false,"abc"));
</script>
</body>
</html>
JS类型
原始类型:Undefined、 Number、String、Boolean
引用类型:Object以及Object的子类
NULL代表的是值，不是数据类型，赋值为Null得到的数据类型是Object
Undefined类型
Number类型包括哪些值?
-1 01 2 2.3 3.14 100 … NaN Infinity
整数、小数、正数、负数、不是数字、无穷大都属于Number类型。
NaN (not a number)
如果定义的是数字a和字符串b，进行除法运算，最后得到的结果是NaN
isNaN，判断是否为一个数字，true表示不是一个数字
parseInt / parseFloat 将字符串转为整型/浮点型数字
Math.ceil 向下取整
boolean类型
Boolean(表达式)
将非布尔转为布尔类型
当然放到if( )里面的，会自动转为布尔进行判断
alert(Boolean( 1)); ll true
alert(Boolean(e));ll false
alert(Boolean(""));ll false
alert(Boolean( “abc”)); ll true
alert(Boolean(nulL));ll false
alert(Boolean( NaN));ll false
alert(Boolean(undefined));l/ false
alert(Boolean(Infinity));ll true
有就是真，没有就是假
String数据类型
单引号双引号都行
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS数据类型测试</title>
</head>
<body>
<script type="text/javascript">
//直接写的是string类型
var i="abc";
alert(typeof(i));
//new String得到的是Object类型
var j=new String("abc");
alert(typeof(j));
</script>
</body>
</html>
常用函数
| length | 获取字符串长度 |
|---|---|
| indexOf | 获取指定字符串在当前字符串中第一次出现处的索引 |
| lastIndexOf | 获取指定字符串在当前字符串中最后一次出现处的索引- |
| replace | 替换(后面直接上正则表达式就行) |
| substr | 截取子字符串 (2,4)，从下标的第二个取四个数 |
| substring | 截取子字符串，从下标的第二个取到第三个，左闭右开 |
| toLowerCase | 转换小写 |
| toUpperCase | 转换大写 |
| split | 拆分字符串 |
Object数据类型
JS中定义类和定义函数是一样的
就看调用的时候怎么调用，加new就是生成类，不加就是调用函数
在Javascript认为所有通过【构造函数】生成对象其数据类型都是object类型
object类型对象在创建完毕后，可以根据实际情况，任意添加属性和方法，也可以移除属性和方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Undefined类型</title>
</head>
<body>
<script type="text/javascript">
function Student(){
alert("Student.");
}
//通过new接受新的函数的是构造函数，没有new是普通函数，构造函数运行后，返回一个Object对象，return实际上是无效的
//普通函数调用
Student();
//当做类创建对象
var stu=new Student();
alert(stu);// object Object
</script>
</body>
</html>
Object属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Object属性</title>
</head>
<body>
<script type="text/javascript">
//充当构造函数
function User(a,b,c){
//三个形参，局部变量
//this指向自身的变量，在Java中是预定义了，在这里就不需要
//我说有这些属性，他就有，想有就有
this.sno=a;
this.sname=b;
this.sage=c;
//定义函数
this.getNo=function(){
return this.sno;
}
}
//通过new
var u1=new User(111,"zhangsan",30);
//访问属性
alert(u1.sno);
alert(u1.sname);
alert(u1.sage);
//类似于调用get方法
var u2=u1.getNo();
alert(u2);
//动态扩展属性以及函数
User.prototype.getName=function(){
return this.sname;
}
alert(u1.getName());
</script>
</body>
</html>
下面的代码，可以自己设置新属性，也可以通过delete移除属性
<script type="text/javascript">
var Obj = new Object();
Obj.name = "nihao";
Obj.age = 13;
window.alert(Obj.name + Obj.age);
delete Obj.age;
window.alert(Obj.name + Obj.age);
</script>
属性维护
添加属性
Object对象.新属性名=值;
Object对象[“新属性名”]=值;
添加函数
Object对象.新函数对象名=function(){};
Object对象[“新函数对象名”]=function(){};
this指向问题
如果是构造函数，赋值给哪一个变量，this就指向该变量
如果是普通函数，this指向window
下面看一个例子
<script type="text/javascript">
//全局变量
var sname = "allen";
function Student() {
this.sid = 100;
this.sname = "mike";
}
Student();
window.alert(window.sname + "--" + sname);
</script>
输出的是 mike–mike
因为Student()以普通函数调用，普通函数调用其实质是window.Student(),此时this指向的就是这个window
那么输出的window.sname 和sname实质都是window指向的sname，即刚刚赋值的mike
下面这种通过构造函数调用，那么this指向的就是 指向构造函数的那个变量，即this->stu
var stu = new Student();
window.alert(window.sname + "--" + stu.sname);
模拟题
HashMap map = new HashMap(;map.put( "key1" ,100)
map.put( "key2" , 200)map. get("key1" ) ==100map.get( "key2" )==200
JavaScript中并不存在HashHap类型，要求在JavaScript模拟出一个HashMap类型对象要求具有上述所有功能
<script type="text/javascript">
//全局变量
function MyMap() {
var obj = new Object();
this.put = function (key, value) {
obj[key] = value;
//obj.key=value也可以，但是可读性没有这么好
};
this.get = function (key) {
return obj[key];
}
}
TestMap=new MyMap();
TestMap.put("key1",100);
TestMap.put("key2",200);
var value=TestMap.get("key2");
window.alert(value);
</script>
我们来分析上述代码
首先是新建一个函数，函数里面定义了obj对象，通过this指向函数本身，创建一个新的方法put和get
传参，然后给obj进行赋值或者取值
几种运算符
| type | typeof |
|---|---|
| null | object |
| NaN | number |
| undefined | undefined |
null==undefined 返回true
JS中
双等号判断值是否相等
三等号除了判断值，还会判断数据类型
1==true true
1 三等号 true 得到false
结束时间：2021-04-15
扫一扫
1518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
