1、js概述
js是javascript的简称，作用是实现页面和用户的交互
js由浏览器解析运行，不需要编译
js由es基础语法，bom浏览器相关，dom文档操作相关 三大部分组成
2、html引入js
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01-HTML引入JS</title><style type="text/css"></style>
</head>
<body>
<!--js 需要引入到html中, 浏览器加载的时候会自动解释运行#js引入到html中的两种方式1. 内部引入a. 在html中写一个script标签 (type="text/javascript" 可以省略)b. 然后在script标签内编写js代码c. script标签可以放在html中任意位置(推荐放在body内底部)2. 外部引入a.在html外部编写一个js文件b. 然后通过script标签的src属性引入注意: 一个script标签只能使用一种引入方式-->
<script type="text/javascript">alert("hello world");
</script><script src="js/my.js">/*这样写没效果*//*alert("2333333~") */
</script>
</body>
</html>
小结：
1. <script>标签可以用在任何位置，建议写在<body>下面
2.一个<script>标签只能使用一种引入方式
3、变量声明
js是弱类型语言，不注重变量的定义，所以在js中定义变量的类型方式如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/**** es5:* var(声明任意类型的变量)** es6:* let(和var用法一样，只不过引入作用域的概念)* const ：声明常量** typeof(变量) 查看变量的类型*//* var a ;a=1;a = "abc";alert(typeof (a));*//*let a ;a=1;a = "abc";alert(typeof (a));*///let和var的区别// for(let i=0;i<10;i++){// console.log(i);// }//// alert(i);//常量不可更改const a = 10;//a= 11;</script>
</html>
小结：
1.js中使用let 和 var声明变量，const声明常量
2.let/const报错，是因为js版本需要换成es6的版本
4、js的数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/*java 8大基本类型byte short int long float double char booleanjs 数据类型1. string字符串: 可以是单引,也可是双引2. number数字型: 整数, 小数3. boolean布尔型: true/false4. undefined未定义 (只声明,不赋值)5.对象类型Object*/let abc = "hello";console.log(typeof(abc));abc=123.2;console.log(typeof(abc));abc=true;console.log(typeof(abc));abc=undefined;console.log(typeof(abc));abc=null;console.log(typeof(abc));abc=new Date();console.log(typeof(abc));</script>
</html>
小结：
1.js中let关键字声明的变量可以接受任意数据类型
2.js中不严格校验数据类型，因为js是弱数据类型的语言
5、js中的运算
1. 算数运算符+ - * / % ++ --
2. 赋值运算符= += -= *= /= %=eg. a+=1 -> a= a+1
3. 比较运算符> < ==(===恒等于) !=(!==不恒等于)
4. 逻辑运算符&& || !(非)
5. 三元（目）运算符条件表达式？为真:为假
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/*注意：1.js中的==只比较值的大小，不比较数据类型*/let abc = "123";let num = 123;console.log(abc==num);/*** 2js中任意的非null，非undefined,非零可以理解成true*/if(abc){console.log("条件为真");}/*** 3.js中任意数值都可以参与逻辑运算左边为真，值看右边。左边为假，值看左边。*/console.log(abc&&num);console.log(0&&num);</script>
</html>
小结：
1.js中的==只比较值的大小，不比较数据类型2.js中任意的非null，非undefined,非零可以理解成true3.js中任意数值都可以参与逻辑运算
6、js中的流程控制
if条件判断：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02-条件判断</title></head>
<body><script>/*var : es6之前的变量声明 后来被es6的 let/const替代es6(所有主流浏览器都支持)* java中判断条件是 结果为boolean的表达式* js跟java不同的是: 任意类型都能当成判断条件** 1. string -> 空串为false,非空串true* 2. number -> 非0为true,0为false* 3. boolean* 4. null -> false* 5. undefined -> false* */let resultif(result){console.log(true)}else{console.log(false)}</script>
</body>
</html>
for循环：
1. 普通for循环for(let i= 0; i<10; i++){需要执行的代码;}2. 增强for循环for(let element of array){需要执行的代码;}3. 索引for循环for(let index in array){需要执行的代码;}
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>03-循环语句</title></head>
<body><script>/** 1. 普通for循环for(let i= 0; i<10; i++){需要执行的代码;}2. 增强for循环(for of)for(let obj of array){需要执行的代码;}3. 索引for循环(for in) -> 了解for(let index in array){需要执行的代码;}* *//** java 数组:* String[] array = {"张三","李四","王五"}* js 数组:* let array = ['张三','李四','王五']** */let array = ['张三','李四','王五']for(let i= 0; i<array.length; i++){console.log(array[i])}for(let element of array){console.log(element); // 数组中的每个元素}for(let index in array){console.log(index); // 数组中的每个元素索引}</script>
</body>
</html>
小结：
注意：
1.js中if条件判断可以是任意值。任何非零，非null，非undefined理解成true，反之为false
2.for循环中，let关键字声明变量
7、js中的函数
1.普通函数
语法：
function 函数名(参数列表){函数体;[return 返回值;] // 中括号意思表示内容可以省略....
}
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/*function 函数名(参数列表){函数体;[return 返回值;] // 中括号意思表示内容可以省略....}注意：1.函数必须要被调用才能执行。2.js中函数如果需要返回值，直接return即可。3.js中的函数需要传递参数，直接写变量名即可。4.js中不存在函数的重载。只要函数名一致，后面的会覆盖前面的。5.js中函数的调用只要名字一致即可。在js中，有个隐藏对象，arguments存在了函数的所有参数*/function demo() {console.log("success");}//demo();function demo2() {return 123;}// let num = demo2();// console.log(num);function demo3(a,b) {console.log(a+b);}//demo3(1,2);function demo3() {console.log("这是demo3");}//demo3(1,2);function demo5() {for(let param of arguments){console.log(param);}}demo5(1,2,3,"a");
</script>
</html>
小结：
1.函数的参数直接写变量名
2.函数如果有返回值，直接写return，不需要声明返回值的类型
3.js中函数不存在重载，只需要函数名一致，就可以调用，无论参数列表
4.js函数中有默认变量，arguments，用来接收函数的所有参数。
2.匿名函数
语法：
function (参数列表){函数体;[return 返回值;] // 中括号意思表示内容可以省略....
}
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>05-匿名函数</title></head>
<body><script>/** js中的函数格式有两种* 1. 普通函数* function 函数名(参数列表){* 函数体* }* 2. 匿名函数* 变量 = function(参数列表){* 函数体* }** a. 匿名函数没有函数名* b. 匿名函数必须给变量赋值** 补充:* 1. 在js,函数是一种特殊的变量类型(对象)!!!* 2. 匿名函数一般是用来注册事件* */function method01(a,b) {document.write(a + b + "哈哈")}method01(1,2)document.write("<br>")let method02 = function (a,b) {document.write(a + b + "呵呵")}method02(1,5)document.write("<br>")document.write(typeof method02)document.write("<br>")</script>
</body>
</html>
小结：
js中的匿名函数一般都是结合js中的事件一起使用的
8、js中的事件
1.常用事件
场景说明：
用户输入完用户名，离开输入框的时候，提示不合法。这是当用户触发了某个动作的时候，js就会执行相应的功能。这就是事件
小结：
事件(event)：JS可以监听用户的行为叫做事件
事件的作用：给事件绑定函数，事件触发的时候，调用函数，执行函数的功能。
常见事件：
1. 点击事件：1. onclick：单击事件2. ondblclick：双击事件 (double: 时间间隔很短两次单击)2. 焦点事件1. onblur：失去焦点2. onfocus:元素获得焦点。3. 加载事件：1. onload：页面加载完成后立即发生。4. 鼠标事件：1. onmousedown 鼠标按钮被按下。2. onmouseup 鼠标按键被松开。3. onmousemove 鼠标被移动。4. onmouseover 鼠标移到某元素之上。5. onmouseout 鼠标从某元素移开。5. 键盘事件：1. onkeydown 某个键盘按键被按下。 2. onkeyup 某个键盘按键被松开。3. onkeypress 某个键盘按键被按下并松开。6. 改变事件1. onchange 域的内容被改变。7. 表单事件：1. onsubmit 提交按钮被点击。
2.事件绑定
语法：
第一种：<标签 事件名=函数名>
第二种：标签对象.事件名=匿名函数
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--this代表的是触发当前事件的标签对象，此处就指代按钮。--><input type="button" value="按钮" onclick="demo1()" onmouseover="demo4(this)" onmouseout="demo5(this)"><br><input type="text" onblur="demo2()"><br><select onchange="demo3()"><option>中国</option><option>俄罗斯</option><option>美国</option></select><br><input id="btn" type="button" value="按钮2">
</body>
<script>/*** onclickonbluronchange : 一般作用于下拉列表onsubmitonmouseoveronmouseoutonload事件绑定函数的语法：第一种：<标签名 事件名="函数名">第二种方式：(开发常用)标签对象.事件名=匿名函数**/function demo1() {alert("按钮被点击了");}function demo2() {alert("输入框失去焦点了，我要验证码输入框的内容的格式是否正确");}function demo3() {alert("下拉列表的内容改变了");}function demo4(myinput) {//修改按钮的背景色myinput.style.backgroundColor="blue";}function demo5(myinput) {myinput.style.backgroundColor="green";}//通过标签的id的属性值获取标签对象let btn = document.getElementById("btn");btn.onclick = function () {alert("第二种绑定事件的方式");}
</script>
</html>
9、js中的内置对象
内置对象: js提供好的对象, 开发者直接可以创建对象,并使用
1.string对象
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>10-字符串</title></head>
<body>
<!--1. 构造字符串对象可以使用a. 双引号b. 单引号c. 反引号(重音符) 键盘左上角 esc下面 (es6字符串模板)经常用在拼接字符串: 避免单双引手动拼接'字符串${变量名}字符串'2. 字符串常用方法substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符。 包头不包尾toLowerCase() 把字符串转换为小写。toUpperCase() 把字符串转换为大写。split() 把字符串分割为字符串数组。trim() 去掉首尾空格-->
<script type="text/javascript">// ------------ 1. 构造字符串对象可以使用 双引号,单引号,反引号// let str2 = new String("abc")let str = "abc"let str2 = 'abc'let str3 = `abc`console.log(str);console.log(str2);console.log(str3);let i = 100; // 效果: 小丽体重i斤let str4 = '小丽体重' + i + '斤'console.log(str4);let str5 = `小张体重${i}斤`console.log(str5);// ------------ 2. 字符串常用方法let str6 = "askfdjASDFAJSDLas"var s = str6.toLowerCase();console.log(s)
</script>
</body>
</html>
2.array对象
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>11-数组</title></head>
<body>
<!--数组查询手册完成:1. 创建数组a. let array = new Array('a','b','c')b. let array = ['a','b','c'] -> 中括号 (常用)js的数组更像java中的集合,长度可以变化的,元素类型不必一致2. 数组常用方法concat() 连接两个或更多的数组，并返回结果。push() 向数组的末尾添加一个或更多元素，并返回新的长度。pop() 删除并返回数组的最后一个元素join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。与 字符串.split()切割为数组 方法相反sort() 对数组的元素进行排序
-->
<script>let array1 = new Array('a','b','c')let array2 = ['d','e','f']console.log(array1);console.log(array2);for (let i = 0; i < array1.length; i++) {console.log(array1[i]);}// 常用方法//concat: 两个数组拼接, 产生新数组let array3 = array1.concat(array2)console.log(array3);console.log(array1.length)//往数组添加一个元素array1.push(100)console.log(array1.length)console.log(array1)//删除并返回最后一个元素let s = array1.pop();console.log(array1)console.log(s)//将数组转成字符串,元素之间用参数中的内容隔开(string的split方法相反)let str = array1.join(",");console.log(str);let arr = str.split(",")console.log(arr);let arr2 = [4, 3, 1, 2]console.log(arr2.sort()) // 默认升序console.log(arr2.sort().reverse()) // 降序var f = function(o1,o2){// return o1-o2; // 升序return o2-o1; // 降序}let arr3 = arr2.sort(f) // 传参: 参数还是函数类型的变量console.log(arr3);console.log(arra2.sort(function (a,b) {return a-b;}))</script>
</body>
</html>
3.date对象
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>12-日期</title>
</head>
<body>
<!--日期 Date1. 创建对象let date = new Date(); 获取当前时间时间2. 常用方法toLocaleString() 转换为本地日期格式的字符串getFullYear() 获取日期中的yeargetMonth() 获取日期中的monthgetDate() 获取日期中的 号getTime() 获取时间毫秒值(时间原点: 1970年1月1号0时分秒)
--><script>let date = new Date();//Sun May 24 2020 14:38:34 GMT+0800 (中国标准时间:东八区)console.log(date);console.log(date.toLocaleString()); // 转换为本地日期格式的字符串console.log(date.getFullYear()); // 年 四位console.log(date.getMonth()+1);// 月 范围：0~11console.log(date.getDate()); // 日console.log(date.getTime()); // 1970年~今毫秒值</script></body>
</html>
4.math对象
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>13-数学</title></head>
<body>
<body>
<!--
数学运算查询手册完成1. 四舍五入 round()2. 向下取整 floor() 地板3. 向上取整 ceil() 天花板4. 产生随机数 random() ：返回 [0,1) 之间的随机数。[0,1) 左闭右开区间,包含0不包含1-->
<script >let n = 1234.567//1. 四舍五入取整console.log(Math.round(n));//2. 向下取整console.log(Math.floor(n));//3. 向上取整console.log(Math.ceil(n));//4. 产生随机数for (let i = 0; i < 10 ; i++) {console.log(Math.random());}
</script>
</body>
</html>
5.RegExp正则对象
正则表达式字符含义：
语法：
第一种：let reg = new RegExp("正则表达式"); 此处正则需要\\第二种：let reg = /正则表达式/;api正则对象.test(str);校验字符串是否满足正则表达式
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/**第一种：let reg = new RegExp("正则表达式"); 此处正则需要\\第二种：let reg = /正则表达式/;api正则对象.test(str);校验字符串是否满足正则表达式注意：js中的正则表达式必须加上^ $ .表示匹配整个字符串。否则表示的是 是否含有*/let username = "admin22555";//用户名必须在6到8位（数字，字母，下滑线）之间//let regExp = new RegExp("^\\w{6,8}$"); 此种方式中，需要\\let regExp = /^\w{6,8}$/;console.log(regExp.test(username));
</script>
</html>
小结：
1.如果采用new的方式创建正则对象，字符串中需要使用2个\
6.全局函数
我们不需要通过任何对象，可以直接调用的就称为全局函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/*** parseInt():解析字符串，返回一个整数**/let str = '100.12px'let number = parseInt(str);console.log(number);/*** encodeURI() 把字符串编码为 URI。* 杯子 -> %E6%9D%AF%E5%AD%90* decodeURI() 解码某个编码的 URI 。* %E6%9D%AF%E5%AD%90 -> 杯子**/let str3 = '杯子'var result = encodeURI(str3); //编码console.log(result);console.log(decodeURI(result)) //解码
</script>
</html>
