文章目录
day11(Javascript)
01Javascript
①Javascript是什么
是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。
②JavaScript组成
ECMA 欧洲计算机制造商协会
ECMA-262 ECMA下辖的一个小机构 专门负责JS标准的制定
ECMAScript 具体的标准 简称ES
JavaScript 是这个标准的具体实现
-
ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
-
BOM (Browser Object Model): 浏览器对象模型
- 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等
-
DOM (Document Object Model): 文档对象模型
- 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等
③ Javascript的书写位置
分为 行内式， 内嵌式，外链式
1. 行内式 (不推荐)
写在标签上的 js 代码需要依靠事件（行为）来触发
<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>
<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>
<!--
注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
-->
2 . 内部位置使用 ( 内嵌式 )
内嵌式的 js 代码会在页面打开的时候直接触发
<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script type="text/javascript">
alert('我是一个弹出层')
</script>
<!-- 注：script 标签可以放在 head 里面也可以放在 body 里面 -->
3. 外部位置使用 ( 外链式 )
-
外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发
-
新建一个
.js后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面
// 我是 index.js 文件
alert('我是一个弹出层')
<!-- 我是一个 html 文件 -->
<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>
<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>
02变量
1. 什么是变量
- 变量指的是在程序中保存数据的一个容器
- 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
- 也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他
- 语法：
var 变量名 = 值
2. 定义变量及赋值
/*
var : 定义变量的关键字, 告诉浏览器, 我要定义一个变量了
空格 : 必须写, 区分 关键 和 变量名 的
变量名 : 你自己起的一个名字
= : 赋值符号, 把右边的内容, 给到左边的变量
值 : 你给你定义的变量赋的是什么值
*/
// 定义一个变量
var num;
// 给一个变量赋值
num = 100;
// 定义一个变量的同时给其赋值
var num2 = 200;
3. 注意事项
- 一个变量名只能存储一个值
- 当再次给一个变量赋值的时候，前面一次的值就没有了
- 变量名称区分大小写（JS 区分大小写）
4. 命名规范
- 规则： 必须遵守的，不遵守就是错
- 一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成
- 严格区分大小写
- 不能由数字开头，不要使用中文汉字命名
- 不能是 保留字 或者 关键字
- 不要出现空格
- 规范： 建议遵守的（开发者默认），不遵守不会报错
- 变量名尽量有意义（语义化）
- 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写,例如 myAge
03输入和输出
1) 输出形式1
以弹窗的形式展示给用户
// 以弹出层的形式展示给我们
alert('你好 世界')
2) 输出形式2
在页面中展示给用户
// 直接展示到我们的页面上
document.write('hello world')
3) 输出形式3
// 在控制台展示出来
console.log('大家好');
4) 选择输入框
// 这个选择框返回的是一布尔值
var name = confirm('你是程序员吗')
// 打印我们拿到的结果(也就是布尔值)
console.log(name)
详细了解看我这篇文章前端知识点—选择输入框confirm(Javascript)
5) 用户输入框
// 这个输入框返回的是用户输出的内容
var name = prompt('请输入你的姓名')
// 我们拿到的结果就是用户输入的结果
console.log(name)
04数据类型
①简单数据类型
是指我们存储在内存中的数据的类型
我们通常分为两大类 *基本数据类型* 和 *复杂数据类型(引用数据类型)*
先讲基本数据类型 , 仅仅基本
1) 数值类型（number）,分为浮点数和整数
- 包含一切数字和数值相关内容
- 整数 : 100, -100, 234
- 浮点数 : 100.234, -0.456
- 科学记数法 : 10e5
- 其他进制表示
- 二进制 : 0b100
- 八进制 : 0o100
- 十六进制 : 0x100
- 无穷 : Infinity
- 非数字 : NaN
2)NaN(not a number)
- NaA不与任何值相等 包括他自己 它是属于数值类型 但是没确定的值
3)Infinity 无限大
// 整数
var n1 = 100
var n2 = -100
// 浮点数
var n3 = 100.2
var n4 = -100.2
// 科学记数法
// e5 => 指 10 的 5 次方
// 10e5 => 指 10 * 10的5次方
var n5 = 10e5
// 其他进制表示
var n6 = 0b100
var n7 = 0o100
var n8 = 0x100
2) 字符串类型 (string)
a) 被引号包裹的所有内容
单引号 ( ‘’ )
双引号 ( “” )
反引号 ( `` )
ar s1 = 'hello world'
var s2 = "hello world"
var s3 = `hello world`
console.log(s1)
console.log(s2)
console.log(s3)
b) 注意
无论哪种引号, 必须成对出现
各种引号之前可以互相嵌套, 但是不能自己嵌套自己
反引号定义的字符串可以换行书写, 并且可以在字符串内直接使用 ${} 的形式解析变量 , 这叫做模板字面量 , 想要详细了解看我这篇文章前端知识点—字符串的8种拼接方法(Javascript)
// 1. 可以换行书写
var str = `
hello
world
你好 世界
`
console.log(str)
// 2. 可以直接在字符串内解析变量
var age = 18
// 单引号 和 双引号 不具备解析变量的能力
var s1 = '我是小千, 我今年 ${ age } 岁了'
console.log(s1)
var s2 = `我是小千, 我今年 ${ age } 岁了`
console.log(s2)
3) 布尔类型 (boolean)
表示肯定或否定时在计算机中对应的是布尔类型数据
只有两个（true 或者 false）
表示肯定的数据用 true，计算机中存储的就是1
表示否定的数据用 false，计算机中存储的就是0
/*
布尔 Boolean
+ true 表示真, 在计算机内存储的时候按照 1 存储
+ false 表示假, 在计算机内存储的时候按照 0 存储
*/
var b1 = true
var b2 = false
console.log(b1)
console.log(b2)
4) null类型
只有一个，就是 null，null值表示一个空对象指针:
有值，但是是一个空值。
使用时需要给变量赋值为null，才能得到null
5) undefined类型
undefined也叫未定义是比较特殊的类型，本该有个值，但是没有 ，就是undefined
只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined
只有一个，就是 undefined，表示没有值的意思
undefined和Null的区别:
- Undefined: 只有一个值
=> undefined, 表示 没有定义
=> 这里本该有一个值, 但是没有的时候, 叫做 undefined
=> 一个变量声明没赋值, 就是 undefined- Null: 只有一个值
=> null, 表示 有一个空
=> 这里真的有一个值, 这个值是一个空值
=> 你需要给一个变量赋值为 null 才是 null
var u
// 需要拿到 u 变量的值来使用
// u 本该给我一个值, 让我显示, 但是没有
console.log(u)
var n = null
// n 变量给我的值就是一个 空值
console.log(n)
② 复杂数据类型
对象类型（object）
函数类型（function）
对象类型
对象是由键值（属性和方法）对组成
你可以先大概理解函数就是方法 , 属性就是除了函数之外的 比如说这里的 name: “小芳”,
想了解更多点我
var gf = {
name: "小芳",
age: 30,
cook: function () {
//实现某种功能
},
};
05数据类型相互转换(重点)
要转换数据类型, 要先知道是属于什么数据类型
检测变量类型:
typeof
// 第一种使用方式
var n1 = 100;
console.log(typeof n1);
//结果是number
// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));
//结果是string
注意
typeof 的结果必然是一个字符串类型
当你需要检测两个内容的运算结果的时候, 必须要使用 () 包裹
var r1 = typeof 100 + 200
var r2 = typeof(100 + 200)
console.log(r1)
console.log(r2)
当你多个typeof连用的时候，返回值必然是一个’string’
因为第一次使用typedef时候 , 返回值就是string
isNaN()
可以使用 isNaN 这个方法来判断一个变量是不是一个合法的数字
isNaN ：is not a number
语法：
isNaN(要检测的数据)
返回值：布尔值
// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false
// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true
//如果变量是这样的一个数据
var r1 = '123javas
console.log(isNaN(r1)); //=>false
Number.isNaN()
Number.isNaN() 方法用于判断传递的值是否为 NaN
并且检查其类型是否为 Number
如果值为 NaN 且类型为 Number，则返回 true，否则返回 false
想详细了解可以看我这篇文章前端知识点—Javascript中检测数据类型函数总结
console.log(Number.isNaN(123)); // false
console.log(Number.isNaN(0/0)); // true
①强制转换
1转换成number类型
Number
不能被转换的值：‘hello(非数字)’、undefined 转换为 NaN
不存在的值：null、false 转换为 0
//1.1Number()将其他类型转数值
console.log(Number("123")); //123
console.log(Number("abc123")); //NaN 数值类型，不与任何值相等，NaN==1 false NaN==NaN false
console.log(Number("")); //0
console.log(Number(" ")); //0
console.log(Number(true)); //1
console.log(Number(false)); //0
console.log(Number(undefined)); //NaN
console.log(Number(null)); //0
ParseInt()或parseFloat()
Number和parseInt的区别:
Number函数将字符串转为数值，要比parseInt函数严格很多。基本上，只要有一个字符无法转成数值，整个字符串就会被转为NaN
从第一位开始检查，是数字就转换，直到一个不是数字的内容就结束了
开头就不是数字，那么直接返回NaN
不认识小数点，只能保留整数
parseInt()取一个字符串中以整数开头的部分，如果字符串不是以整数开头，得到NaN 和parseFloat()可以取到小数
console.log(parseInt("abc123")); //NaN
console.log(parseInt("123abc")); //123
console.log(parseInt("123.456abc")); //123
console.log(parseInt("")); //NaN
console.log(parseInt(" ")); //NaN
console.log(parseInt(10.123)); //10 取整
2 转换成string类型
只要给它加上"" 或者’'或者``
就可以转换成字符串
3 转换成boolean类型
Boolean()
//对于数字类型
console.log(Boolean(0), Boolean(NaN)); //除了这俩转false。其余都是true
//对于字符串类型
console.log(Boolean(""), Boolean(" "), Boolean("0")); //除了空字符串转false。其余都是true
//对于其他
console.log(Boolean(undefined), Boolean(null)); //false
代表空、否定的值 \color{red}{空、否定的值}空、否定的值会被转换为false，如：’ '、0、NaN、null、undefined 其余值都会转换为true
方法二
两次非运算
为任意的数据类型做两次非运算（隐式类型转换）
var a = “hello”;
a = !!a; // true
②隐式转换
<script>
//1. + 如果参与运算的值有一个是字符串，另一个也会转字符串，进行拼接，如果两个都不是字符串，转数值进行求和
// - * / % 无论参与运算的是什么类型 都转成数值
console.log("123" + 456); //"123456"
console.log(true + 5); //6
console.log(undefined + false); //NaN
console.log(5 * true); // 5
console.log(1 - null); //1
//2. 对于比较运算，如果两个值都是字符串按位比较，否则转数值进行比较
console.log("12" > 2); //"12"->12 12>2 true
console.log("12" > "2"); //"1"和 "2"先比 false
</script>
主要记住 数值类型和字符串类型的相互转换
<script>
// 一、隐式转换：
// 1. 将数值类型转为字符串
// var num = 10;
// console.log(typeof num); //'number' ===> 数值类型
// console.log("" + num);
// console.log(typeof ("" + num));//'string'===>字符串
// 2. 将纯数字字符串类型转为数值类型 减号 除（除1） 乘（乘1）
var str = "10";
// console.log(typeof (str)); // 'string'
// console.log(str-0); //蓝色的 10
// console.log(typeof(str-0)); //"number"
console.log(typeof (str)); // 'string'
console.log(typeof (str / 1)); //"number"
console.log(str / 1); //蓝色的 10
</script>
06运算符
1) 含义
就是在代码里面进行运算的时候使用的符号
不光只是数学运算
我们在 js 里面还有很多的运算方式
我们所熟知的数学运算只是诸多运算符的一种
2) 数学运算符
-
加号
-
只有符号两边都是数字或者布尔值的时候才会进行加法运算
-
只要符号任意一边是字符串类型，就会进行字符串拼接
// 数学运算符 console.log(100 + 100); // 200 数字＋数字 console.log(100 + true); // 101 数字＋布尔值 console.log(100 + false); // 100 数字＋布尔值 console.log(100 + '435'); // '100435' 数字＋字符串
-
-
减号
-
会执行减法运算
-
会自动把两边都转换成数字进行运算
// 数学运算符(-) console.log(10 - 5); // 5 console.log(10 - true); // 9 console.log(10 - false); // 10
-
-
乘号
-
会执行乘法运算
-
会自动把两边都转换成数字进行运算
// 数学运算符(*) console.log(10 * 5); // 50 console.log(10 * true); // 10 console.log(10 * false); // 0
-
-
/
-
会执行除法运算
-
会自动把两边都转换成数字进行运算
// 数学运算符(/) console.log(10 / 5); // 2 console.log(10 / true); // 10 console.log(false / 10); // 0
-
-
%
-
会执行取余运算
-
会自动把两边都转换成数字进行运算
// 数学运算符(%) console.log(10 % 3); // 1
-
-
**
-
幂（**）运算符返回第一个操作数取第二个操作数的幂的结果
// 数学运算符(**) console.log(3 ** 4); // 81
-
3) 赋值运算符
-
=
-
就是把 = 右边的赋值给等号左边的变量名
-
var num = 100
-
就是把 100 赋值给 num 变量
-
那么 num 变量的值就是 100
-
注意：
同一个变量只能赋值一次
也就说给同一个变量第一次赋值以后就不能再次赋值了
如果给同一个变量再次赋值会把前面的值覆盖掉
-
变量值的交换
-
借助第三个变量来做交换
// 交换变量 // 声明变量 var x = 5 var y = 6 console.log(x) console.log(y) // 声明第三个变量 var tmp // 把x的值赋值给tmp tmp = x // 把y的值赋值给x x = y // 把tmp的值赋值给y y = tmp console.log(x) console.log(y)
-
-
+=
-
就是赋值符号和加号的合作符号
-
就是在自己的原来的基础上再加上多少
var a = 10; a += 10; console.log(a); //=> 20 -
a += 10 等价于 a = a + 10
-
不能写成 a = 10 + a
-
-
-=
-
就是赋值符号和减号的合作符号
-
就是在自己的原来的基础上再减去多少
var a = 10; a *= 10; console.log(a); //=> 100 // `a -= 10` 等价于 `a = a - 10`
-
-
*=
-
就是赋值符号和乘号的合作符号
-
就是在自己的原来的基础上再乘上多少
var a = 10; a *= 10; console.log(a); //=> 100 // `a *= 10` 等价于 `a = a * 10`
-
-
/=
-
就是赋值符号和除号的合作符号
-
就是在自己的原来的基础上再除上多少
var a = 10; a /= 10; console.log(a); //=> 1 // `a /= 10` 等价于 `a = a / 10` -
-
%=
-
就是赋值符号和取余符号的合作符号
-
就是把自己和某个数取余后的结果在赋值给自己
var a = 10; a %= 3; console.log(a); //=> 1 // `a %= 3` 等价于 `a = a % 3`
-
4) 比较运算符
-
含义
计算机除了能够处理数据的加减乘除运算外
还能对数据进行比较，如大小比较、类型比较等
比较运算的结果一定为布尔类型
比较运算符也叫关系运算符
-
==
比较符号两边的值是否相等，不管数据类型
console.log(1 == 1); // true console.log(1 == '1'); // true console.log(1 == 2); // false console.log(1 == '2'); // false -
===
比较符号两边的值和数据类型是否都相等
console.log(1 === 1); //true console.log(1 === '1'); // false -
!=
比较符号两边的值是否不等,如果是返回true不管数据类型
console.log(1 != 1);// false console.log(1 != '2'); // true console.log(1 != '1'); // false -
!==
比较符号两边的数据类型和值是否不等,如果都满足返回true
console.log(1 !== 1); // false console.log(1 !== '1');// true console.log(1 !== 2); // true console.log(1 !== '2'); // true -
‘>=’
比较左边的值是否 大于或等于 右边的值
console.log(2 >= 1); // true console.log(2 >= 2); // true console.log(2 >= 3); // false -
<=
比较左边的值是否 小于或等于 右边的值
console.log(1 <= 1); // true console.log(1 <= 2); // true console.log(3 <= 2); // false -
“>”
比较左边的值是否 大于 右边的值
console.log(1 > 2); // false console.log(3 > 2); // true console.log(2 > 2); // false -
“<”
比较左边的值是否 小于 右边的值
console.log(1 < 2); // true console.log(3 < 2); // false console.log(2 < 2); // false
5) 逻辑运算符
-
含义
逻辑运算符一般是将多个表达式的值组合起来，再次运算产生的新的表达式的值，逻辑运算主要分3种情形
逻辑与（且） &&
逻辑或 ||
逻辑非（取反）!
-
逻辑与 ( 且 ) &&
-
进行 且 的运算
-
必须符号两边同时为 true，才会返回 true
-
只要有一边不是 true，那么就会返回 false
-
同真为真，一假则假
console.log(true && true); // true console.log(true && false); // false console.log(false && false); // false -
-
逻辑或 ||
-
进行 或 的运算
-
符号两边任意一边为 true，都会返回 true
-
只有两边都是 false 的时候才会返回 false
-
一真为真，同假则假
console.log(true || true); // true console.log(true || false); // true console.log(false || false); // false -
-
逻辑非 ( 取反 ) !
-
进行 取反 运算
-
本身是 true 的，会变成 false
-
本身是 false 的，会变成 true
console.log(true); // true
console.log(!true); // false
console.log(false); // false
console.log(!false); // true
6) 短路逻辑
-
逻辑且（与）&&
当运算符左边为 false 的时候, 右边的代码不执行
只有左边的代码为 true 的时候, 右边的代码才执行
false && console.log('你好 世界'); true && console.log('你好 世界'); -
逻辑或 ||
当运算符 左边为 true 的时候, 右边的代码不执 行
只有左边的代码为 false 的时候, 右边的代码才执行
true || console.log('hello world'); false || console.log('hello world');
7) 一元运算符
-
含义
一个数据带一个运算符就能完成的运算就叫一元运算
-
++
-
进行自增运算
-
分成两种，前置++ 和 后置++ 不管是前置还是后置，都是让自身的值+1，只能＋1
-
前置++，会先把值自动 +1，在返回之后参与运算
var a = 10; console.log(++a); // 会返回 11，并且把 a 的值变成 11- 后置++，会先把值拿来参与运算，运算结束以后在自动+1
var a = 10; console.log(a++); // 会返回 10，然后把 a 的值变成 11- 练习 - 求 n 和 res 的值
var n = 10 var res = n++ + ++n + ++n + ++n + n++ console.log(n) console.log(res) -
-
–
-
进行自减运算
-
分成两种，前置-- 和 后置–
-
和 ++ 运算符道理一样
-
求 n 和 res 的值
var n = 10 var res = --n + ++n + n++ + n++ + n-- - --n console.log(n) console.log(res) -
作业
①
-
为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
-
89 / 24 = 3.xxxxxxx
-
parseInt() 就能拿到小数点前面的数字
-
89 - (3 * 24) || 89 % 24
-
小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
- 它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
- 提示：摄氏度与华氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)保留3位小数
-
保留三位小数
-
1.23456789 * 1000 = 1234.56789
-
parseInt(1234.56789) = 1234
-
1234 / 1000 = 1.234
-
保留三位小数
-
1.23456789 * 1000 = 1234.56789
-
Math.round(1234.56789) = 1235
-
1235 / 1000 = 1.235
②
- var k=0; console.log(k++ + ++k +k +k++)
- 掌握逻辑运算的意义
- 掌握八进制、十六进制的写法
- 掌握NaN的含义
- 掌握Number函数的转换结果
③
计算两个文本框的加减乘除
文本框 + 文本框 按钮（=） 文本框（结果）
要求：
-
使用parseInt方法类型转换
-
计算结果使用Math.round方法四舍五入