Js的知识

引入方式

在html文件中引入js只需要输入

1
2
3


<script>
    
</script>

即可，这个script标签在任意格子内即可，可以在head标签内，可以在body标签内，也可以在html标签的外面

输出

一共有三种输出方式

弹窗

1
2
3


<script>
    alert("Hello")
</script>

输出到屏幕中

1
2
3


<script>
	document.write("Hello")
</script>

控制台输出

1
2
3


<script>
	console.write("Hello")
</script>

变量

js是弱语言类型，其不在乎变量的类型。可以使用var和let关键字声明一个变量，唯一的区别就是，var声明的关键字是全局关键变量，而let是局部变量。

全局变量可以多次赋值，而局部变量不能多次赋值。

1
2


var a = 10; // 局部变量
let b = 10; // 全局变量

除此之外还可以使用const声明常量，常量不可进行修改

数据类型

可以使用typeof来查看一个变量或者值的类型，例如

1
2


typeof 10 // number
typeof "10" // string

运算符

js的运算符与其它语言不同的有===和!===这两个。由于js是静态语言，所以当将不同的类型相比较时，如果使用==，例如

1

1 == "1"

输出结果为true

如果想要比较这两个类型时，可以使用强相等

1

1 === "1"

输出结果为false

函数

直接声明一个函数，function关键字

1
2
3


function add(a, b) {
    return a + b;
}

使用var声明关键字

1
2
3


var add = function(a, b) {
    return a + b;
}

json

json是一种键值对形式的输入，其k值是string类型

1
2
3
4
5
6
7


//定义json
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);

//json字符串--js对象
var obj = JSON.parse(jsonstr);
alert(obj.name);

Bom对象

统称为浏览器对象

弹窗类的消息都是windows下的消息

1
2


window.alert("Hello BOM");
alert("Hello BOM Window");

1
2
3
4
5
6
7
8
9


alert('提示信息')

confirm("确认信息")

prompt("弹出输入框")

open("url地址"，“_black或_self”，“新窗口的大小”）

close()  关闭当前的网页

1
2
3
4
5
6
7


setTimeout(函数，时间) 只执行一次

clearTimeout(定时器名称) 清除定时器，用于停止执行setTimeout()方法的函数代码。

setInterval(函数，时间) 无限执行

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

location 对象

对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location对象在编写时可不使用 window 这个前缀。一些例子：

location.herf = ‘url地址’

location.hostname 返回 web 主机的域名

Dom操作

通过document来进行一系列操作，可以通过类，标签，id，name这些操作来获取html的元素，这也体现了为什么js可以对前端进行一些交互的原因，下面是一些例子

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


    //1. 点亮灯泡 : src 属性值
    var img = document.getElementById('h1');
    img.src = "img/on.gif";


    //2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'>very good</font>"; 
    }


    //3. 使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//选中
    }

事件绑定

大多数交互的事件由鼠标产生，例如点击、移动、缩放等这些操作，我们可以写两个按钮，点击这两个按钮的时候会弹出两个通知

1
2
3
4


<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2" onclick="off()">
</body>

这里添加的监听时间是onclick，我们来实现一下这两个js函数

1
2
3


function on() {
    alert("开启")
}

off函数

1
2
3


function off() {
    alert("关闭")
}

值得注意的是，在html样式里面，需要以函数调用的形式来指定，如果只写上函数名是不会调用的。