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 boolean
js 数据类型
1. string
字符串: 可以是单引,也可是双引
2. number
数字型: 整数, 小数
3. boolean
布尔型: true/false
4. 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,非零可以理解成true
3.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 result
if(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>
/**
* onclick
onblur
onchange : 一般作用于下拉列表
onsubmit
onmouseover
onmouseout
onload
事件绑定函数的语法：
第一种：
<标签名 事件名="函数名">
第二种方式：(开发常用)
标签对象.事件名=匿名函数
*
*/
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>
<!--
日期 Date
1. 创建对象
let date = new Date(); 获取当前时间时间
2. 常用方法
toLocaleString() 转换为本地日期格式的字符串
getFullYear() 获取日期中的year
getMonth() 获取日期中的month
getDate() 获取日期中的 号
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~11
console.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>
