JavaWeb之js

W3C 标准

W3C 标准：网页主要由三部分组成

HTML：用来制作网页基础内容和基本结构

CSS：用于网页样式美化效果

JavaScript：用来制作数据验证、和用户交互

JavaScript

JavaScript概念

JavaScript 是一门跨平台、面向对象的脚本语言，运行在浏览器端。

JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。

JavaScript作用

表单数据校验

页面元素标签动态增删改查操作等

输出语句

window.alert() 写入警告框

document.write() 写入HTML 输出

console.log() 写入浏览器控制台

JavaScript 编写位置

1.行内，直接写在标签的属性里面

2.内部，本网页有效(经常使用)
2.1.同一个HTML中可以有多个script标签，每个标签都会执行(从上往下运行)
2.2.可以出现在网页中任何的位置

3.外部，使用script标签引入外部的JS文件

注意:
如果引入了外部JS文件,这个标签中的JS代码是无效的
< script>不能提前结束,不能写成这样: < script src=“js/out.js”/>, 影响后面的JS执行

定义变量

ES5 定义变量

var

ES6 定义变量

let

区别:

ES5 方式语法不严谨，使用范围不受代码块限制，代码块外依然可以使用，造成内存浪费

ES6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明

ES6 新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

<script>
    // ES5定义变量 能重复定义
    var a = 6;
    document.write(a+"
");
    var a = 10;
    document.write(a+"
");

    // ES6定义变量 不能重复定义
    // JS是弱类型语言
    let b = 6;
    document.write(b+"
");
    //let b = 10;
    //document.write(b+"
")
    // 常量 (常量不能修改)
    const c = 100;
    document.write(c);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

五种数据类型

number:小数整数都是number

string:小写的s(字符串)

boolean:布尔类型

undefined:未定义的类型

object：对象类型

<script>

    // number: 数值型, 整数和小数都行
    let a = 10;
    document.write(a+"的类型是："+typeof(a)+"
")
    let b = 6.6;
    document.write(b+"的类型是："+typeof(b)+"
")

    // boolean: true/false
    let c = true;
    document.write(c+"的类型是："+typeof(c)+"
")

    // string(小写的s): 字符串 在js中""包裹的内容和''包裹的内容都是字符串.
    let s = "HelloWorld";
    document.write(s+"的类型是："+typeof(s)+"
")
    s = '666';
    document.write(s+"的类型是："+typeof(s)+"
")

    // object: 对象类型
    // 自定义JS对象: {键1:值1, 键2:值2}
    let obj={name:"张三",sex:"男"};
    document.write(obj+"的类型是："+typeof(obj)+"
")

    // null表示对象类型, null是对象类型的默认值.
    let obj2 = null;
    document.write(obj2+"的类型是："+typeof(obj2)+"
")

    // undefined: 未定义 没有给变量赋值
    let d;
    document.write(d+"的类型是："+typeof(d)+"
")
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

算术运算符

跟java大致相同

JavaScript 中除法是可以除得尽，如果除不尽会保留16位小数

赋值运算符

与java一致

比较运算符

===是恒等于

== 比较值，=== 比较值与类型

字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较。

逻辑运算

字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较。

逻辑运算符不建议单与&、单或|, 会变成数字。

<script>
    // 算术运算符: + - * / % ++ --
    //js中除法可以带小数
    let a = 10;
    let b = 3;
    document.write(a / b + "
")

    // 赋值运算符: = += -= *= %=
    document.write((a+=b)+"
")

    // 比较运算符: == > < >= <= != 特别的:===
    let c = 5;
    let d = 5;
    document.write(c == d + "
");//false 因为在js中”+“优先级大于“==”，现执行“+”
    document.write("
")
    document.write((c == d) + "
");
    // ==: 字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较。
    d = "5";
    document.write((d == c) + "
");

    // === 恒等于,既比较类型也比较值(js中为了严谨建议使用===)
    document.write((d === c) + "
");

    // 逻辑运算符: JS中建议使用 &&  ||
    document.write((true && true) + "
")
    document.write((false || false) + "
")

    // 注意: 不要使用&和|, &|会变成数字  结果是0和1，1代表true
    document.write((true & true) + "
")
    document.write((false | false) + "
")

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

if

<script>
    // 定义年龄变量,判断是否是未成年人
    let age = 18;
    if(age>=18){
        document.write("请进入"+"
")
    }

    // JS非boolean作为if的条件
    // number: 非0为true, 0为false
    if(2){
        document.write("成功"+"
");
    }

    // string: 字符串有内容为true, 字符串没有内容("")为false
    if("dsfa"){
        document.write("成功"+"
");
    }
    // undefined: 为false
    let a;
    if(!a){
        document.write("失败"+"
");
    }

    // object: 对象不为null是true, 对象为null是false
    let obj ={name:"cat"};
    if(obj){
        document.write("成功"+"
");
    }

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

循环

<script>
    // switch: 判断分数： 10分优良，9分及格，8分以下不及格
    let i = 8;
    switch (i){
        case 1:
        case 8:
            document.write("8"+"
");
            break;
        default:
            document.write("啥也不是"+"
");
            break;
    }
    // while: 打印1-10
    let n=1;
    while (n<5){
        document.write(n+"
");
        n++;
    }

    // 创建数组
    let arr = [11,22,33,44];

    // 普通for循环
    for (let j = 0; j < 4; j++) {
        document.write(arr[j]+"
");
    }

    // 增强for循环: for...of
    for (let number of arr) {
        document.write(number+"
")
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

命名函数

function

// 定义一个匿名函数实现加法功能
    let add = function (a,b){
        return a+b;
    }

    // 调用函数
    document.write(add(1,2));
1
2
3
4
5
6
7

Array

<script>
    // JS创建数组方式一: let 变量名 = new Array(元素列表);
    let arr = new Array(11,22,33);
    document.write(arr+"
")

    // JS创建数组方式二: let 变量名 = [元素列表];
    let arr1 = [44,55,66];
    document.write(arr1+"
")

    // 修改数组数据: 数组名[索引]=新的值;
    arr[2] = 0;
    document.write(arr+"
");

    // 获取数组数据: 数组名[索引]
    document.write(arr[0]+"
");

    // 特点：JavaScript数组相当于Java中集合。变长,变类型
    // 变类型
    arr1[3]="你好";
    document.write(arr1+"
")

    // 属性：length：数组中元素的个数
    document.write(arr1.length+"
");

    // push: 添加数据方法
    arr1.push(77,88);
    document.write(arr1+"
")
    document.write(arr1.length+"
");

    // splice:删除数据方法    splice(开始位置, 删除的数量)
    arr1.splice(0,2);
    document.write(arr1+"
")

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

BOM

BOM(Browser Object Model)：浏览器对象模型。

将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。

BOM常用对象

window 表示浏览器窗口位置
location 表示地址栏对象
history 表示浏览历史记录对象

window

alert 弹出框
prompt 输入框
confirm 确认框
setTimeout 过一段时间调用，只调用一次
setInterval 每隔一段时间调用一次

<script>
    // alert提示框  (只有确定按钮)
    //alert("警告");

    // 输入框  (可以输入数据,有确定和取消按钮), 点击确定得到输入的内容, 点击取消得到null
    prompt("确定进入吗？","确定");

    // 确认框  (只有有确定和取消按钮), 点击确定得到true, 点击取消得到false
    let a = confirm("真的真的确定吗？");
    document.write(a+"
")

    // window.可以省略

    // 定时器
    // setTimeout(函数名, 间隔毫秒数) 过指定时间后执行一次函数
    // setTimeout(eat,2000);
    function eat(){
        document.write("吃"+"
")
    }

    // setInterval(函数名, 间隔毫秒数) 每隔指定的时间都会执行前面的函数(反复执行)
    // setInterval(eat,1000);


    // 每隔一秒钟给img标签切换图片
    setInterval(selectImg,1000);

    let i = 0;
    function selectImg(){
        if(i%2==0){
            document.getElementById("myImage").src = "img/on.gif";
        }else{
            document.getElementById("myImage").src="img/off.gif";
        }
        i++;
    }

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

location

href属性就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。

<script>
    // location的href属性: ?
    document.write(location.href+"
")

    // location的href属性: ?
    location.href = "http://www.baidu.com";

</script>
1
2
3
4
5
6
7
8

history

表示访问过的历史记录，如果没有历史记录，这个对象中的方法不可用。

forword() 当前页面前进
back() 当前页面后退

<body>

<a href="01_js_hellowrold.html">页面</a>

<button onclick="history.back()">后退</button>
<button onclick="history.forward()">前进</button>

</body>
1
2
3
4
5
6
7
8

DOM

Document Object Model: 文档对象模型(浏览器显示的内容)，DOM用来操作网页中各种元素(标签)。

document代表了整个DOM树对象，查找节点都找document去获取。

获取元素方法：

document.getElementById(“”) 通过id获取一个元素

document.getElementsByTagName (“标签名”) 通过标签名获取一组元素

document.getElementsByName(“name”) 通过name属性获取一组元素

document.getElementsByClassName(“类名”) 通过样式类名获取一组元素

<script>
    // 1.getElementById：?
    document.getElementById("light").src="img/on.gif";

    // 2.getElementsByTagName：?
    // innerHTML：?
    let divEles = document.getElementsByTagName("div");
    for (let divEle of divEles) {
        divEle.innerHTML ="靓仔";
    }


    // 3.getElementsByName：?
    let nameArr = document.getElementsByName("hobby");
    for (let name of nameArr) {
        name.checked = true;
    }

    // 4.getElementsByClassName：?
    let clss = document.getElementsByClassName("cls");
    for (let cls of clss) {
        cls.innerHTML = "跑";
    }

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

事件

概念：

用户可以对网页的元素有各种不同的操作如：单击，双击，鼠标移动等这些操作就称为事件。事件通常与函数配合使用，这样就可以通过发生的事件来驱动JavaScript函数执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种方式设置事件</title>
</head>
<body>
<!--命名函数设置事件-->
<input type="button" value="命名函数设置事件" onclick="abc()"/>
<br/>
<br/>

<!--匿名函数设置事件
注意:标签要放在前面,这里才能通过id找到标签-->
<input id="input2" type="button" value="匿名函数设置事件"/><br/>

<script>
function abc(){
    alert("命名函数设置事件");
}

document.getElementById("input2").onclick=function (){
    alert("匿名函数设置事件")
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

常用事件

onsubmit 当表单提交时触发该事件

onclick 鼠标单击事件

ondblclick 鼠标双击事件

onblur 元素失去焦点

onfocus 元素获得焦点

正则表达

正则表达式的定义：

let reg = /^\w{6,11}$/;
1

test方法

用来判断是否符合正则表达式，在JS中正则表达式默认是部分匹配

意思就是只要一部分匹配也会返回true，所以引入

^：表示开始

$：表示结束

最后

如果你对本文有疑问，你可以在文章下方对我留言，敬请指正，对于每个留言我都会认真查看。