公告

今日内容

JS基本语法---->重点
JS的BOM对象--->window,location
JS的DOM对象----->重点
JS的案例------>必须练习
- 表单校验
- 图片轮播
- 二级联动

第一章-JS基础

1.1 JS简介

什么是JS

JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。
脚本语言：不需要编译(直译)，就可以被浏览器直接解析执行了。
JS语言和Java语言对比：

对比	Java	JS
运行环境	JVM虚拟机	JS引擎，是浏览器的一部分
是否跨平台运行	跨平台	跨平台
语言类型	强类型语言	弱类型，动态类型语言
是否需要编译	需要编译，是编译型语言	不需要编译，是解释型语言
是否区分大小写	区分大小写	区分大小写

JS的作用

具体来说，有两部分作用：

JS代码可以操作浏览器：进行网址跳转、历史记录切换、浏览器弹窗等等
JS代码可以操作网页标签：操作HTML的标签、标签的属性、样式等等

注意：JS的是在浏览器内存中运行时操作，并不会修改网页源码，所以刷新页面后网页会还原

JS的组成

ECMAScript(核心)：是JS的基本语法规范
BOM：Browser Object Model，浏览器对象模型，提供了与浏览器进行交互的方法
DOM：Document Object Model，文档对象模型，提供了操作网页的方法

1.2 JS引入

内部JS

语法

在html里增加<script>标签，把js代码写在标签体里

<script>
	//在这里写js代码
</script>

示例

创建html页面，编写js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式-内部js</title>
    <script>
        //操作浏览器弹窗
        alert("hello, world");
    </script>
</head>
<body>

</body>
</html>

打开页面，浏览器会弹窗

1571279916433

外部JS

语法

把js代码写在单独的js文件中，js文件后缀名是.js
在HTML里使用<script>标签的src属性引入外部js文件

<script src="js文件的路径"></script>

示例

创建一个my.js文件，编写js代码
- 第1步：创建js文件
- 第2步：设置js文件名称
- 第3步：编写js代码

alert("hello, world! 来自my.js");

创建一个html，引入my.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式-外部js</title>
    <!--引入外部的my.js文件-->
    <script src="../js/my.js"></script>
</head>
<body>

</body>
</html>

打开页面，浏览器会弹窗

1571279953863

注意事项

一个script标签，不能既引入外部js文件，又在标签体内写js代码。

错误演示

<script src="../js/my.js">
	alert("hello");
</script>

正确演示

<script src="../js/my.js"></script>
<script>
	alert("hello");
</script>

1.3 JS小功能和JS调试

小功能

alert(): 弹出警示框
console.log(): 向控制台打印日志
document.write(); 文档打印. 向页面输出内容.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            + alert(): 弹出警示框
            + console.log(): 向控制台打印日志
            + document.write(); 文档打印. 向页面输出内容.
         */
        // alert作用: 1.提示  2.调试代码
        // alert("警告");

        // console.log(): 1.提示  2.调试代码
        // console.log("向控制台输出日志信息....");

        // document.write(): 1.可以输出文本  2.可以输出html标签
        document.write("Hello,World");
        document.write("<h1>标题</h1>");

    </script>
</head>
<body>

</body>
</html>

调试

按F12打开开发者工具
找到Source窗口，在左边找到页面，如下图
- 打断点之后，当代码执行到断点时，会暂停执行
- 在窗口右侧可以查看表达式的值、单步调试、放行等等

1571577895543

如果代码执行中出现异常信息，会在控制台Console窗口显示出来

1571578078067

点击可以定位到异常位置

1571578109301

1.4 JS基本语法

变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 'var'
格式: var 变量名 = 值;

举例:

var num1 = 10;      ----->相当于java中的int num1 = 10;
var str = "itheima";----->相当于java中的String str = "itheima";
var flag = true; -------->相当于java中boolean flag = true;
var date = new Date();--->相当于java中的Date date = new Date();
var num1 = 10,num2 = 20,num3 = 30;---->相当于java中的int num1=10,num2=20,num3=30;
注意: var可以省略不写,建议保留
num1 = 10;
str = "itheima";
flag = true;
date = new Date();

注意:
- var可以省略不写,建议保留
- 最后一个分号可以省略,建议保留
- 定义多个变量可以用","隔开，公用一个‘var’关键字

数据类型

1.五种原始数据类型

数据类型	描述	示例
`number`	数值类型	`1`, `2`, `3`, `3.14`
`boolean`	布尔类型	`true`, `false`
`string`	字符串类型	`"hello"`, 'hello'
`object`	对象类型	`new Date()`, `null`
`undefined`	未定义类型	var a;

2.typeof操作符

作用：用来判断变量是什么类型
写法：typeof(变量名) 或 typeof 变量名
null与undefined的区别：

null: 对象类型，已经知道了数据类型，但对象为空。
undefined：未定义的类型，并不知道是什么数据类型。

3.小练习

定义不同的变量,输出类型,

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 需求:定义不同的变量,输出类型
        // 定义number类型的变量
        var num1 = 10;
        var num2 = 3.14;
        console.log(typeof num1);// number
        console.log(typeof num2);// number

        // 定义boolean类型的变量
        var flag = true;
        console.log(typeof flag);// boolean

        // 定义string类型的变量
        var str = "itheima";
        console.log(typeof str);// string

        // 定义object类型的变量
        var obj1 = new Date();
        var obj2 = null;
        console.log(typeof obj1);// object
        console.log(typeof obj2);// object

        // 定义undefined类型的变量
        var v;
        console.log(typeof v);// undefined
    </script>
</head>
<body>

</body>
</html>

字符串转换成数字类型

全局函数(方法)，就是可以在JS中任何的地方直接使用的函数，不用导入对象。不属于任何一个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        // 字符串--->整数
        console.log(parseInt("123"));// 123
        console.log(typeof parseInt("123"));// number

        // 字符串--->小数
        console.log(parseFloat("3.14"));// 3.14
        console.log(typeof parseFloat("3.14"));// number

        // isNaN:判断是否是一个非数字,如果是非数字就返回true,否则就返回false
        console.log(isNaN(10));// false
        console.log(isNaN("10"));// false
        console.log(isNaN("10A"));// true
        console.log(isNaN("abc"));// true
        console.log("------------");

        // 注意:
        console.log(parseInt("123a"));// 123
        console.log(typeof parseInt("123a"));// number

        console.log(parseInt("12a3"));// 12
        console.log(typeof parseInt("12a3"));// number

        console.log(parseInt("a123"));// NaN

        console.log(parseFloat("3.14A"));// 3.14
        console.log(typeof parseFloat("3.14A"));// number

        console.log(parseFloat("3.1A4A"));// 3.1
        console.log(typeof parseFloat("3.1A4A"));// number

        console.log(parseFloat("A3.1A4A"));// NaN




    </script>
</head>
<body>

</body>
</html>

运算符

关系运算符:> >= < <=,,!=, **=**
算术运算符: +,-,*,/,%
自增自减: ++,--
逻辑运算符: && , || , !
赋值运算符: =, +=,-=,*=,/=,%=
三元运算符:
注意:
- number类型和字符串做-,*,/,%的时候,字符串自动的进行类型转换,前提字符串里面的数值要满足number类型

 // -,*,/,%
var num1 = 10;
var str = "20";
console.log(num1 - str);// -10
console.log(num1 * str);// 200
console.log(num1 / str);// 0.5
console.log(num1 % str);// 10

除法,保留小数

var i = 2;
var j = 5; 
alert(j/i);//2.5

== 比较数值, === 比较数值和类型

var i = 2;
var j = "2"; 
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false

流程语句

for\while\do...while循环

for (var i = 0; i < 5; i++) {
    document.write("for循环..." + i);
    document.write("<br/>");
}


var j = 0;
while (j < 5) {
    document.write("while循环..." + j);
    document.write("<br/>");
    j++;
}

var k = 0;
do {
    document.write("do...while循环..." + k);
    document.write("<br/>");
    k++;
} while (k < 5);

if... else

var num = 10;
if (num == 10) {
    document.write("num=10");
    document.write("<br/>");
} else {
    document.write("num!=10");
    document.write("<br/>");
}

switch

var str = "java";
switch (str) {
    case "php":
        document.write("php...");
        document.write("<br/>");
        break
    case "java":
        document.write("java...");
        document.write("<br/>");
        break
    case "c++":
        document.write("c++...");
        document.write("<br/>");
        break
    default:
        document.write("default...");
        document.write("<br/>");
        break
}

1.5 函数

什么是函数

函数：是被设计为执行特定任务的代码块，在被调用时会执行
函数类似于Java里的方法，用于封装一些可重复使用的代码块

普通(有名)函数

语法

定义普通函数

function 函数名(形参名,形参名,...){
    函数体(代码块)
    [return 返回值;]
}
注意:
	1.小括号中的形参是没有形参类型的,也就是不要写var(写了会报错),只需要直接写形参名即可
	2.js中的行数没有重载,如果函数一样,后面的函数会覆盖前面的函数

调用普通函数

var result = 函数名(实参列表);

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 定义函数
        function f1() {
            document.write("无参数无返回值的函数");
            document.write("<br/>");
        }

        function f2(num, str) {
            document.write("有参数无返回值的函数,参数1:" + num + ",参数2:" + str);
            document.write("<br/>");
        }

        function f3() {
            document.write("无参数有返回值的函数");
            document.write("<br/>");
            return 10;
        }

        function f4(num, str) {
            document.write("有参数有返回值的函数,参数1:" + num + ",参数2:" + str);
            document.write("<br/>");
            return "java";
        }

        // 调用函数
        f1();
        f2(100, "itheima");
        var res1 = f3();
        console.log("返回值:" + res1);
        var res2 = f4(200, "itcast");
        console.log("返回值:" + res2);

        // 注意: js函数没有重载,如果函数一样,后面的函数会覆盖前面的函数
        function f1(num) {
            document.write("无参数无返回值的函数-----后定义,num:"+num);
            document.write("<br/>");
        }

    </script>
</head>
<body>

</body>
</html>

匿名函数

匿名函数，也叫回调函数，类似于Java里的函数式接口里的方法

function (形参列表){
    函数体
    [return 返回值;]
}

1.6 JS事件

事件介绍

HTML 事件是发生在 HTML 元素上的“事情”，是浏览器或用户做的某些事情
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

常见事件

属性	此事件发生在何时...
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onchange	域的内容被改变。
onblur	元素失去焦点。
onfocus	元素获得焦点。
onload	一张页面或一幅图像完成加载。
onsubmit	确认按钮被点击；表单被提交。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按住。
onkeyup	某个键盘按键被松开。
onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开。
onmouseout	鼠标从某元素移开。
omouseover	鼠标移到某元素之上。
onmousemove	鼠标被移动。

事件绑定

普通函数方式

说白了设置标签的属性

<标签 事件属性="调用js函数"></标签>
属性: 根事件名一致
属性值: 调用js函数代码

匿名函数方式

<script>
    标签对象.事件属性 = function(){
        //执行一段代码
    }
</script>

事件使用

重要的事件

点击事件

需求: 每点击一次按钮弹出hello...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--需求: 每点击一次按钮 弹出hello...-->
<!--普通函数方式绑定事件---通过标签的事件属性-->
<input type="button" value="点击事件1" onclick="f1()"><br/>
<!--匿名函数方式绑定事件-->
<input id="btn" type="button" value="点击事件2"><br/>
</body>
<script>
    function f1() {
        alert("hello...")
    }

    // 获得按钮标签
    document.getElementById("btn").onclick = function () {
        alert("hello,world...")
    }
</script>
</html>

获得焦点(onfocus)和失去焦点(onblur)

需求:给输入框设置获得和失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--需求:给输入框设置获得和失去焦点-->
<input type="text" onfocus="f1()"  onblur="f2(this)">
</body>
<script>
    function f1() {
        console.log("获得焦点");
    }

    function f2(obj) {
        console.log("失去焦点,用户输入的数据是:"+obj.value);
    }
</script>
</html>

内容改变(onchange)

需求: 给select设置内容改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--需求: 给select设置内容改变事件-->
<select onchange="f1(this)">
    <option value="sz">深圳</option>
    <option value="gz">广州</option>
    <option value="hz">惠州</option>
    <option value="dg">东莞</option>
</select>
</body>
<script>
    function f1(obj) {
        console.log("下拉框选择的值:"+obj.value);
    }
</script>
</html>

等xx加载完成(onload) 可以把script放在body的后面/下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="f1()">
    <h1>标题</h1>
</body>
<script>
    function f1() {
        alert("页面加载完毕....");
    }
</script>
</html>

掌握的事件

键盘相关的, 键盘按下(onkeydown) 键盘抬起(onkeyup)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--键盘相关的, 键盘按下(onkeydown)  键盘抬起(onkeyup)-->
<input type="text" onkeydown="f1()"  onkeypress="f2()" onkeyup="f3()">
</body>
<script>
    function f1() {
        console.log("键盘按下...");
    }

    function f2() {
        console.log("键盘按住...");
    }

    function f3() {
        console.log("键盘抬起...");
    }
</script>
</html>

鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)-->
<input type="button" value="按钮" onmouseover="f1()" onmousemove="f2()" onmousedown="f3()" onmouseout="f4()">
</body>
<script>
    function f1() {
        console.log("鼠标在按钮之上...");
    }

    function f2() {
        console.log("鼠标在按钮之上移动...");
    }

    function f3() {
        console.log("鼠标按下...");
    }

    function f4() {
        console.log("鼠标离开...");
    }
</script>
</html>

1.7 正则表达式

正则表达式概述

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

用我们自己的话来说: 正则表达式用来校验字符串是否满足一定的规则的公式

正则表达式的语法

创建对象

对象形式：var reg = new RegExp("正则表达式")
直接量形式：var reg = /^正则表达式$/;

常用函数

方法	描述	参数	返回值
`boolean test(string)`	校验字符串的格式	要校验的字符串	boolean，校验通过返回true

常见正则表达式规则

符号	作用
\d	数字
\D	非数字
\w	单词：a-zA-Z0-9_
\W	非单词
.	通配符，匹配任意字符
	匹配n次
	大于或等于n次
	在n次和m次之间
+	1~n次
*	0~n次
?	0~1次
^	匹配开头
$	匹配结尾
[a-zA-Z]	英文字母
[a-zA-Z0-9]	英文字母和数字
[xyz]	字符集合, 匹配所包含的任意一个字符

使用示例

需求:

出现任意数字3次
只能是英文字母的, 出现6~10次之间
只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字

步骤:

创建正则表达式
调用test()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 1. 出现任意数字3次
        var reg = /^\d{3}$/;
        console.log(reg.test("123"));// true
        console.log(reg.test("12a"));// false
        console.log(reg.test("1234"));// false
        console.log("----------");

        // 2. 只能是英文字母的, 出现6~10次之间
        var reg1 = /^[a-zA-Z]{6,10}$/;
        console.log(reg1.test("abcdefg"));// true
        console.log(reg1.test("abc1defg"));// false
        console.log("----------");

        // 3. 只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
        var reg2 = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        console.log(reg2.test("abcdefg"));// true
        console.log(reg2.test("1abc1defg"));// false
        console.log("----------");

        // 4. 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字
        var reg3 = /^1[3456789]\d{9}$/;
        console.log(reg3.test("13566668888"));// true
        console.log(reg3.test("135666688889"));// false
        console.log(reg3.test("1356666888"));// false
        console.log(reg3.test("135666688a8"));// false
        console.log(reg3.test("2356666888"));// false
        console.log("----------");

    </script>
</head>
<body>

</body>
</html>

1.8 内置对象之Array数组【重点】

创建数组对象

语法

var arr = new Array(size)
var arr = new Array(element1, element2, element3, ...)
var arr = [element1, element2, element3, ...];

数组的特点

数组中的每个元素可以是任意类型
数组的长度是可变的，更加类似于Java里的集合List

示例

创建数组，并把数组输出到浏览器控制台上
- 说明：把数据输出到控制台：console.log(value)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //* `var arr = new Array(size)`
        // * `var arr = new Array(element1, element2, element3, ...)`
        // * `var arr = [element1, element2, element3, ...];`
        // 创建一个长度为3的数组
        var arr1 = new Array(3);
        arr1[0] = "php";
        arr1[1] = "java";
        arr1[2] = "c++";
        arr1[3] = "go";
        for (var i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);
        }
        console.log("------------");

        // 创建数组的同时赋值
        var arr2 = new Array("110","120","119");
        for (var i = 0; i < arr2.length; i++) {
            console.log(arr2[i]);
        }
        console.log("------------");

        // 直接创建数组并赋值
        var arr3 = ["深圳","广州","惠州","东莞"];
        for (var i = 0; i < arr3.length; i++) {
            console.log(arr3[i]);
        }

    </script>
</head>
<body>

</body>
</html>

数组常见的函数

API介绍

concat(arr) 连接两个或更多的数组，并返回结果。
join(str) 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
reverse() 颠倒数组中元素的顺序。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // concat(arr) 连接两个或更多的数组，并返回结果。
        // join(str) 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
        // reverse() 颠倒数组中元素的顺序。
        var arr1 = new Array(3);
        arr1[0] = "php";
        arr1[1] = "java";
        arr1[2] = "c++";
        var arr2 = ["深圳","广州","惠州","东莞"];

        // 数组拼接
        var arr = arr1.concat(arr2);
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

        // 数组元素拼接
        var s = arr1.join("-");
        console.log(s);

        // 数组元素反转
        var arr3 = arr1.reverse();
        for (var i = 0; i < arr3.length; i++) {
            console.log(arr3[i]);// c++,java,php
        }

        console.log("----------");

        for (var i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);// c++,java,php
        }



    </script>
</head>
<body>

</body>
</html>

二维数组

数组里面再放数组就是二维数组
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        // 创建二维数组
        // 方式1:
        var arr1 = new Array(3);
        arr1[0] = ["深圳","广州","惠州","东莞"];
        arr1[1] = ["长沙","郴州","张家界","衡阳"];
        arr1[2] = ["瑞金","井冈山","南昌","九江"];

        // 方式2:
        var arr2 = new Array( ["深圳","广州","惠州","东莞"],["长沙","郴州","张家界","衡阳"], ["瑞金","井冈山","南昌","九江"]);

        // 方式3:
        var arr3 = [["深圳","广州","惠州","东莞"],["长沙","郴州","张家界","衡阳"], ["瑞金","井冈山","南昌","九江"]];

        // 遍历
        for (var i = 0; i < arr1.length; i++) {
            var arr = arr1[i];
            for (var j = 0; j < arr.length; j++) {
                console.log(arr[j]);
            }
            console.log("-----");
        }
        console.log("--------------------------");

        for (var i = 0; i < arr2.length; i++) {
            var arr = arr2[i];
            for (var j = 0; j < arr.length; j++) {
                console.log(arr[j]);
            }
            console.log("-----");
        }
        console.log("--------------------------");

        for (var i = 0; i < arr3.length; i++) {
            var arr = arr3[i];
            for (var j = 0; j < arr.length; j++) {
                console.log(arr[j]);
            }
            console.log("-----");
        }
        console.log("--------------------------");
    </script>
</head>
<body>

</body>
</html>

1.9 内置对象之-Date日期

创建日期对象

语法

创建当前日期：var date = new Date()
创建指定日期：var date = new Date(年, 月, 日)

注意：月从0开始，0表示1月
创建指定日期时间：var date = new Date(年, 月, 日, 时, 分, 秒)

注意：月从0开始，0表示1月

日期常用方法

API介绍

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。

3.1.2示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 创建当前日期对象
        var date1 = new Date();
        console.log("当前的日期对象:" + date1);

        // 创建1999-10-11日期对象
        var date2 = new Date(1999,9,11);
        console.log("1999-10-11的日期对象:" + date2);

        // 创建1999-10-11 10:11:12日期对象
        var date3 = new Date(1999,9,11,10,11,12);
        console.log("1999-10-11 10:11:12的日期对象:" + date3);

        console.log("----------------");
        console.log("当前的年:" + date1.getFullYear());
        console.log("当前的月:" + date1.getMonth());
        console.log("当前的日:" + date1.getDate());
        console.log("当前的时:" + date1.getHours());
        console.log("当前的分:" + date1.getMinutes());
        console.log("当前的秒:" + date1.getSeconds());
        console.log("当前的毫秒:" + date1.getMilliseconds());
        console.log("当前日期对应的字符串:" + date1.toLocaleString());
        console.log("当前日期对应的字符串:" + date1.toLocaleDateString());
        console.log("当前日期对应的字符串:" + date1.toLocaleTimeString());

        document.write(date1.toLocaleString());


    </script>
</head>
<body>

</body>
</html>

第二章-JS的BOM

2.1 JS的BOM

概述

Browser Object Model ,浏览器对象模型. 为了便于对浏览器的操作，JavaScript封装了对浏览器中各个对象，使得开发者可以方便的操作浏览器中的各个对象。

BOM里面的五个对象

window: 窗体对象

alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框,返回选择的结果,确定(true),取消(false)
setInterval('函数名()',time) 按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout('函数名()',time) 在指定的毫秒数后调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 Interval()。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // alert() 显示带有一段消息和一个确认按钮的警告框
        // window.alert("弹出警告框");
        // alert("弹出警告框");

        // confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框,返回选择的结果,确定(true),取消(false)
        /*var flag = confirm("您确定要删除吗?");
        if (flag){
            document.write("确定删除")
        } else{
            document.write("取消删除!")
        }*/

        // setInterval('函数名()',time) 按照指定的周期（以毫秒计）来调用函数或计算表达式
        /*setInterval("f1()",200);

        function f1() {
            console.log("hello world");
        }*/

        // setTimeout('函数名()',time) 在指定的毫秒数后调用函数或计算表达式
        /*setTimeout("f2()",2000);

        function f2() {
            console.log("f2一次性定时器");
        }*/

        // clearInterval() 取消由 setInterval() 设置的 Interval()。
        // clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

    </script>
</head>
<body>
<input type="button" value="启动循环定时器" onclick="start()">
<input type="button" value="关闭循环定时器" onclick="end()">

</body>
<script>
    var interval;

     function start() {
        interval = setInterval("f1()",1000);
    }

    function f1() {
        console.log("hello world");
    }

    function end() {
        clearInterval(interval);
    }
</script>
</html

navigator:浏览器导航对象【了解】

属性	作用
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息

screen:屏幕对象【了解】

方法	作用
width	返回显示器屏幕的分辨率宽度
height	返回显示屏幕的分辨率高度

history:历史对象【了解】

方法	作用
back()	加载 history 列表中的前一个 URL
forword()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面,（-1上一个页面，1前进一个页面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="04_历史对象b页面.html">从a页面前进到b页面</a>
<input type="button" value="前进到下一个页面" onclick="f1()">
</body>
<script>
    function f1() {
        // history.forward();
        history.go(1);
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

    </script>
</head>
<body>
<a href="04_历史对象a页面.html">从b页面回退到a页面</a>
<input type="button" value="回退到上一个页面" onclick="f2()">
</body>
<script>
    function f2() {
        // history.back();
        history.go(-1);
    }
</script>
</html>

location:当前路径信息

属性	作用
host	设置或返回主机名和当前 URL 的端口号
href	设置或返回完整的 URL
port	设置或返回当前 URL 的端口号

location.href; 获得路径

location.href = "http://www.baidu.com"; 设置路径,跳转到百度页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log("ip地址和端口号:"+location.host);
        console.log("url路径:"+location.href);
        console.log("端口号:"+location.port);

        location.href = "http://www.itheima.com";
    </script>
</head>
<body>

</body>
</html>

第三章-JS的DOM

3.1 DOM介绍

1. 什么是dom

DOM：Document Object Model，文档对象模型。是js提供的，用来访问网页里所有内容的(标签,属性,标签的内容)

2. 什么是dom树

当网页被加载时，浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构：网页里所有的标签、属性、文本都会转换成节点对象，按照层级结构组织成一棵树形结构。
- 整个网页封装成的对象叫document
- 标签封装成的对象叫Element
- 属性封装成的对象叫Attribute
- 文本封装成的对象叫Text

一切皆节点, 一切皆对象

3.2 操作标签

获取标签

document.getElementById(id) 根据id获取标签 返回值:Element对象
document.getElementsByTagName(tagName) 根据标签名称获取一批标签 返回值:Element类数组
document.getElementsByClassName(className) 根据class属性值获取一批标签 返回值:Element类数组
document.getElementsByName(name) 根据标签name属性值获取一批标签 返回值:Element类数组

<body>

<input id="inputId1" type="text" value="admin"><br/>
<input id="inputId2" type="password" value="123456"><br/>
<input type="text" class="c1"><br/>
<input type="text" class="c1"><br/>
<input type="text" class="c1"><br/>
<input type="text" class="c1"><br/>
<input type="checkbox" name="hobby"> 篮球<br/>
<input type="checkbox" name="hobby"> 足球<br/>
<input type="checkbox" name="hobby"> 敲代码<br/>
</body>
<script>
    // 获取第一个文本输入框
    var inputE = document.getElementById("inputId1");
    console.log("值:"+inputE.value);

    // 获取所有的input标签
    var inputArr1 = document.getElementsByTagName("input");
    console.log(inputArr1.length);// 9

    // 获取class属性值为c1的input标签
    var inputArr2 = document.getElementsByClassName("c1");
    console.log(inputArr2.length);// 4

    // 获取name属性值为hobby的input标签
    var inputArr3 = document.getElementsByName("hobby");
    console.log(inputArr3.length);// 3

</script>

操作标签

方法	描述	返回值
`document.createElement(tagName)`	创建标签	`Element`对象
`parentElement.appendChild(sonElement)`	插入标签
`element.remove()`	删除标签
`document.createTextNode()`	创建文本

<body>
<p id="pId">段落标签</p>
<input type="button" value="添加font标签到p标签中" onclick="addElement()">
<input type="button" value="删除p标签" onclick="removeElement()">
</body>
<script>
    // 获取p标签对象
    var pE = document.getElementById("pId");

    function addElement() {
        // 创建font标签
        var fontE = document.createElement("font");// <font></font>

        // 创建文本对象
        var text = document.createTextNode("字体标签");// 字体标签

        // 把文本对象添加到font标签中
        fontE.appendChild(text);// <font>字体标签</font>

        // 把font标签对象添加到p标签中
        pE.appendChild(fontE);
    }

    function removeElement() {
        // 删除p标签
        pE.remove();
    }
</script>

3.4 操作标签体[重点]

语法

获取标签体内容：标签对象.innerHTML
设置标签体内容：
- innerHTML是覆盖式设置，原本的标签体内容会被覆盖掉；标签对象.innerHTML = "新的HTML代码";
- 支持标签的可以插入标签, 设置的html代码会生效; 标签对象.innerHTML += "新的HTML代码";

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="pId">段落标签</p>
<input type="button" value="获取p标签中的内容" onclick="get()">
<input type="button" value="添加font标签到p标签中" onclick="addElement()">

</body>
<script>
    function get() {
        // 1.获取p标签对象
        var pElement = document.getElementById("pId");

        // 2.获取p标签中的内容
        console.log(pElement.innerHTML);
    }

    function addElement() {
        // 1.获取p标签对象
        var pElement = document.getElementById("pId");

        // 2.添加font标签到p标签中
        // pElement.innerHTML = "<font>字体标签</font>";
        pElement.innerHTML += "<font color='red'>字体标签</font>";

    }
</script>

</html>

3.5 操作属性

每个标签Element对象提供了操作属性的方法

方法名	描述	参数
`getAttribute(attrName)`	获取属性值	属性名称
`setAttribute(attrName, attrValue)`	设置属性值	属性名称, 属性值
`removeAttribute(attrName)`	删除属性	属性名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../img/a.gif" id="imgId">
<input type="button" value="获取img标签src属性的值" onclick="f1()">
<input type="button" value="修改img标签src属性的值" onclick="f2()">
<input type="button" value="删除img标签src属性" onclick="f3()">
</body>
<script>

    // 获取img标签对象
    var imgE = document.getElementById("imgId");

    function f1() {
        console.log("img标签src属性的值:"+imgE.getAttribute("src"));
    }

    function f2() {
        imgE.setAttribute("src","../img/b.jpg");
    }

    function f3() {
        imgE.removeAttribute("src");
    }
</script>
</html>

第四章-JS案例

案例-使用JS完成表单的校验

1. 案例需求

课堂完成: 用户名校验
课后完成: 手机号码,电子邮箱校验

2.思路分析

1.为用户名输入框绑定获取焦点和失去焦点事件
2.获取焦点事件的函数实现:
	2.1 获取span标签对象
	2.2 往span标签对象中设置提示信息
3.失去焦点事件的函数实现:
    3.1 获得用户输入的用户名
	3.2 创建校验用户名的正则表达式
	3.3 调用test函数进行校验
	3.4 根据校验结果,显示提示信息到span标签中

3.代码实现

1.为username文本输入框绑定获取焦点和失去焦点事件
2.js代码
<script>

    // 获取span标签对象
    var spanE = document.getElementById("usernamespan");

    // 获取焦点事件
    function showTips() {
        // 往span标签对象中设置提示信息
        spanE.innerHTML = "以字母开头,由数字和英文字母组成,4-16位";
    }
    
    function checkUsername(obj) {
        //3.1 获得用户输入的用户名
        var username = obj.value;

        //3.2 创建校验用户名的正则表达式
        var reg = /^[a-zA-Z][A-Za-z0-9]{3,15}$/;

        //3.3 调用test函数进行校验
        var flag = reg.test(username);

        //3.4 根据校验结果,显示提示信息到span标签中
        if (flag){
            spanE.innerHTML = "<img src='img/gou.png' width='10px' height='10px'>";
        } else{
            spanE.innerHTML = "<font color='red'>用户名输入格式不对</font>";
        }
    }
</script>

做一下验证手机号码,email格式 var reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/;

4,小结

事件,函数,正则表达式...

案例-使用JS完成图片轮播效果

1.需求分析

实现每过3秒中切换一张图片的效果，一共3张图片，当显示到最后1张的时候，再次显示第1张。

2.思路分析

1.设置一个循环定时器(每隔3s调用一个函数changeImg)
2.在changeImg函数中,获得img标签,然后修改img标签的src属性

3.代码实现

<script>
    // 设置一个循环定时器,每隔3秒调用changeImg函数
    setInterval("changeImg()",3000);

    var i = 1;

    function changeImg() {
        // 改变i的值
        i++;
        if (i > 3){
            i=1;
        }

        // 1.获取img标签对象
        var imgE = document.getElementById("imgId");

        // 2.修改img标签对象的src属性值
        imgE.setAttribute("src","../img/banner_"+i+".jpg");

    }
</script>

4.小结

定时任务

setInterval("函数名()", time);

操作属性

setAttribute("属性名","属性值")

案例-JS控制二级联动

1.需求分析

在注册页面添加籍贯,左边是省份的下拉列表,右边是城市的下拉列表.右边的select根据左边的改变而更新数据

2.思路分析

1.创建页面,含有2个下拉框,分别表示省份和城市
2.为省份下拉框绑定一个内容改变事件
3.内容改变事件函数的实现:
3.1 获得选择的省份
3.2 获得城市下拉框对象
3.3 根据选择的省份获取对应的城市信息
3.4 循环遍历城市信息
3.5 把遍历出来的城市添加到城市下拉框中

3.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
籍贯: <select onchange="changeCity(this)">
    <option value="-1">-请选择-</option>
    <option value="0">广东</option>
    <option value="1">湖南</option>
    <option value="2">江西</option>
</select>
<select id="cityId">
    <option>-请选择-</option>
</select>
</body>
<script>
    var arr1 = new Array(3);
    arr1[0] = ["深圳", "广州", "惠州", "东莞"];
    arr1[1] = ["长沙", "郴州", "张家界", "衡阳"];
    arr1[2] = ["瑞金", "井冈山", "南昌", "九江"];

    function changeCity(obj) {
        // 3.1 获得选择的省份
        var province = obj.value;

        // 3.2 获得城市下拉框对象
        var cityE = document.getElementById("cityId");

        // 清空城市下拉框中的选项
        // cityE.innerHTML = "";
        cityE.innerHTML = "<option>-请选择-</option>";

        if (province > -1){
            // 3.3 根据选择的省份获取对应的城市信息
            var citysArr = arr1[province];

            // 3.4 循环遍历城市信息
            for (var i = 0; i < citysArr.length; i++) {
                // 3.5 把遍历出来的城市添加到城市下拉框中
                // 3.5.1 创建option标签对象
                var optionE = document.createElement("option");

                // 3.5.2 创建城市名称的文本对象
                var text = document.createTextNode(citysArr[i]);

                // 3.5.3 把城市名称添加到option标签中
                optionE.appendChild(text);

                // 3.5.4 把option标签添加到城市下拉框中
                cityE.appendChild(optionE);
            }
        }
    }
</script>

</html>

4.小结

内容改变事件

<select onchange="函数()"></select>

二维数组
innerHTML
- 会把前面的内容覆盖掉
- 支持标签的插入
dom
- 父节点.appendChild(子节点)
- document.createElement()
- document.createTextNode()

总结

必须练习:
	1.课堂上三个js案例独立完成
        
- 了解js的作用
    - JS代码可以操作浏览器：进行网址跳转、历史记录切换、浏览器弹窗等等
	- JS代码可以操作网页：操作HTML的标签、标签的属性、样式等等
  	注意：JS的是在浏览器内存中运行时操作，并不会修改网页源码，所以刷新页面后网页会还原

- 能够在HTML里引入js
    内联方式:在html里增加<script>标签，把js代码写在标签体里
    外联方式:把js代码写在单独的js文件中，js文件后缀名是.js
		    在HTML里使用<script>标签引入外部js文件

- 能够使用浏览器开发者工具调试js代码
      F12  
        
- 掌握js的基本语法
    变量:var 变量名 = 值;
    数据类型: 数值类型,布尔类型,字符串类型,对象类型,未定义类型
    运算符:   
		/ 会取小数; 
		数值和字符串可以-,*,/,%操作,字符串会自动转换为数值;
		== 比较值是否相等
        === 比较值和类型都是否相等
    循环\控制语句
        循环语句,条件判断语句(if,switch)
- 能够定义和调用函数
     普通函数:
			function 函数名(形参列表){
                函数体
                [return 返回值;]
            }
			注意:形参不要写var
	  匿名函数:
			function (形参列表){
                函数体
                [return 返回值;]
            }
- 能够使用js的内置对象
    Date日期对象,Array数组对象,常用函数
    
- 能够绑定js事件
    方式一: <标签 属性="js代码，调用函数"></标签>
    方式二: <script>
        标签对象.事件属性 = function(){
            //执行一段代码
        }
    </script>
- 能够使用正则表达式校验字符串格式
    var reg = /^表达式$/;
	test(str);
- 能够使用js的bom操作浏览器
    windows,navigator,screen,history,location
- 能够使用js的dom操作网页
    获取标签
	document.getElementById(id) 根据id获取标签 返回值:Element对象
    document.getElementsByName(name) 根据标签name获取一批标签 返回值:Element类数组
    document.getElementsByTagName(tagName) 根据标签名称获取一批标签 返回值:Element类数组
    document.getElementsByClassName(className) 根据类名获取一批标签 返回值:Element类数组
    
    操作标签
    document.createElement(tagName) 创建标签 Element对象
     parentElement.appendChild(sonElement) 插入标签
	element.remove() 删除标签
	document.createTextNode()创建文本
	
    操作标签体
    - 获取标签体内容：标签对象.innerHTML
    - 设置标签体内容：标签对象.innerHTML = "新的HTML代码";
	
	操作属性
        1. getAttribute(attrName)  获取属性值 
        2. setAttribute(attrName, attrValue)  设置属性值 
        3. removeAttribute(attrName)  删除属性

posted on 2022-04-24 23:09 ofanimon 阅读(46) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部