JavaScript
JavaScript
也是为HTML服务的 存储数据 计算 请求
从三个方向来讲
- ECMAScript — 包含JS的基本语法
- BOM – 浏览器对象模型 是跟浏览器进行交互的
Browser Object Model - DOM — 文档对象模型 跟文档进行交互的
Document Object Model
补充
CSS
响应式布局: 根据不同的屏幕设置不同的布局
/* 最小屏幕宽 720px样式 */
@media screen and (min-width:720px) {
#footer p{
color: #008B8B;
}
}
/* 最小屏幕宽 960px样式 */
@media screen and (min-width:960px) {
#footer p{
color: palevioletred;
}
}
/* 最小屏幕宽 1200px样式 */
@media screen and (min-width:1200px) {
#footer p{
color: rgb(138,138,138);
}
}
引入JS的方式
内部引入
在head 或者 body 中添加script标签 标签之间就是JS的代码
外部引入
前提有一个JS文件
在head 或者 body 中添加script标签 通过属性src引入JS文件
-->
内部引用和外部引用不能合并在一起
标签之间的内容时不会识别的
以后写的话内部就是内部 外部就是外部
ECMAScript的基本语法
变量的声明
JS是动态语言， 变量的类型是有赋予的值来决定的 与Python这一点是一样的
- 声明变量的格式：
var 变量名 = 值;
语句结束之后 写分号可以 不写也可以 建议写 - 声明多个变量
var 变量名 = 值, 变量名1 = 值, …
数据类型
-
数字类型 Number
-
字符串类型 String 使用引号包含的数据， 单双引号都可以
-
布尔类型 Boolean 值只有两个 true 和 false
-
对象类型 Object ===> Python 中的字典
-
特殊的数据类型
- Null 等价于Python中的NoneType
值只有一个 null ===> None 空对象 - Undefined 只有一个值 undefined, 当声明变量的时候 没有对其进行初始化，就直接使用了该变量， 该变量的值就是undefined
- Null 等价于Python中的NoneType
-
检验变量类型的方法
typeof 变量名
Boolean类型详解
其他类型转化为布尔类型的规则
- 数值类型 — 非零即为true
- 字符串类型 — 空字符序列为false 非空为true
- 对象类型中 — Object的数据 —> Python中的字典的
- 非null即为true
- undefined 也是false
转换的格式
Boolean(数据)
var b = true;
console.log(typeof b)//boolean
console.log(Boolean(10))//true
console.log(Boolean(0))//false
console.log(Boolean(3.14))//true
console.log(Boolean(""))//false
console.log(Boolean(" "))//true
console.log(Boolean(null))//false
console.log(Boolean(undefined))//false
console.log(Boolean({}))//true
number类型详解
在小数数据存储的时候， 小数点后没有数据 或者是小数点后只有一个0
解释器解释 计算器在存储的时候会把该数据存储为整型 （节省内存）
浮点数据的存储占用的内存要比整型数据大很多 几乎为两倍
var num = 10;
console.log(typeof num);//number
var value = 10.0
console.log(value)//10
// 声明浮点数据的时候的格式
value = .8 // 不建议使用这种格式
console.log(value)//0.8
value = 1.8
console.log(value)//1.8
// 数值类型的最大值和最小值
console.log(Number.MAX_VALUE) // 1.7976931348623157e+308
console.log(Number.MIN_VALUE) //5e-324
// 数据过大或者过小的时候 会转化为科学计数法表示的
// 数值相除的时候 分母是不能为0的
console.log(0 / 0) // NaN -- Not a Number
// 如果数据超过上面的范围就会出现 正无穷和负无穷的情况
console.log(1 / 0) // Infinity 正无穷
console.log(-1 / 0) // -Infinity 负无穷
// 验证数据 是否 不是一个数值 isNaN(数据)
// 不是数值尾部true 是数值为false
console.log(isNaN("123abc"))//true
console.log(isNaN(123))//false
// 将字符串类型数据或者浮点类型数取整
var res = parseInt(3.14);
console.log(res)//3
// 字符串： 只要字符串开头的数据满足整数的格式 就能提取出来数据
console.log(parseInt("+125613fghjdklasjjhfds"))//125613
console.log(parseInt("a+125613fghjdklasjjhfds"))//NaN
// 将字符串的数据转化为浮点型
// 只要字符串开头的数据满足整数或者小数的格式
console.log(parseFloat("1.34abdf"))//1.34
字符串类型详解
1.声明字符串的格式
- var s = “abc”;
- s = new String(“abc”)
- s = String(“abc”)
new 可以省略
2.获取字符串的长度
var len = s.length
3.获取指定索引位置的字符
- var ch = s[0]
- ch = s.charAt(0)
4.获取子串从指定位置开始第一次出现的位置
s = “how are you how old are you”
- 默认是从头开始找的
var index = s.indexOf(“are”)
console.log(index)//4 - 从指定位置开始
index = s.indexOf(“are”, 5)
console.log(index)//20
5.获取子串到指定位置中最后一次出现的位置
index = s.lastIndexOf(“are”)
console.log(index)//20
- 指定位置结束
index = s.lastIndexOf(“are”, 19)
console.log(index)//4 - 找不到返回-1
index = s.indexOf(“meet”)
console.log(index)//-1
6.拼接字符串
- 使用运算符 + 号拼接 可以与任意类型的数据进行拼接 结果都是字符串类型
s = "abcdef"
var new_s = s + "-" + "hello"
console.log(new_s)//abcdef-hello
new_s = new_s + 10
console.log(new_s)//abcdef-hello10
console.log(typeof new_s)//string
new_s = new_s + true
console.log(new_s)//abcdef-hello10true
console.log(typeof new_s)//string
s = "hello" + 5 * 5
console.log(s)//hello25
s = 5 + 5 + "hello"
console.log(s)//10hello
- 拼接方法2 可以一次性拼接多个 每个之间使用逗号隔开即可
new_s = “hello”.concat(10,true,“nice”)
console.log(new_s)
7.提取子串
s = “goodgoodstudydaydayup”
开始索引和结束索引
[开始，结束)
- 什么都不传递 默认是从头到尾的
var substr = s.substring()
console.log(substr)//goodgoodstudydaydayup - 从指定起始位置到结束
substr = s.substring(4)
console.log(substr)//goodstudydaydayup - 指定范围
substr = s.substring(1,4)
console.log(substr)//ood - 从指定位置开始提取指定长度的子串
substr = s.substr(1,4)
console.log(substr)//oodg - 类似于第一种 指定起始和结束的
substr = s.slice(1, 4)
console.log(substr)//ood
8.将字符串中的字母转化为大写字母
var upper_str = s.toUpperCase()
console.log(upper_str)//GOODGOODSTUDYDAYDAYUP
9.将字符串中的字母转化为小写字母
var lower_str = upper_str.toLowerCase()
console.log(lower_str)//goodgoodstudydaydayup
10.切割字符串
- 切割为单词
s = “good good study day day up”
var sub_arr = s.split(" ")
console.log(sub_arr)// [“good”, “good”, “study”, “day”, “day”, “up”] - 指定切割后获取的前n个子串
var sub_arr = s.split(" ", 1)
console.log(sub_arr)//[“good”] - 切割符可以直接用正则表达式
/正则表达式/
s = “i13love14you520hahaha”
sub_arr = s.split(/\d+/)
console.log(sub_arr)//[“i”, “love”, “you”, “hahaha”]
11.替换字符串 — 只能替换查找到的第一个
var replace_s = s.replace(“o”, “OO”)
console.log(replace_s)//i13lOOve14you520hahaha
函数
封装重复使用的代码 简化代码 降低代码的重复率
格式：
function 函数名(形参列表){
函数体
return 返回值
}
解读
- function 声明函数的关键字
- 函数名 遵守标识符规范 使用小驼峰的命名规则
第一个单词首字母小写 之后每个单词首字母都是大写的
getMaxValue - ()是固定的
- 形参列表
形参变量 有多个的话每个之间使用逗号隔开即可
如果没有的话就不用设定了
声明形参变量时 不用使用var来修饰了
形参的个数是由 参与功能的未知项的个数决定的 - 在JS中没有什么缩进规则
- return 结束函数的标志 并将返回值返回到调用位置处
如果没有返回值 return可以省略的
- Python中是有可变参数的
*args **kwargs
JS中函数本身就是可变参数的
在函数体中 有一个数组(Python中的列表)的属性叫arguments存放着传递给函数的所有实参 - 函数呢也就是一个数据， 一个值 类似于10等 是可以被进行传递的
// 计算两个数的和
function add(x, y){
console.log(arguments)
// 想获取其中的数据的话 可以通过遍历来获取
for (i in arguments){
console.log(i)
console.log(arguments[i])
}
return x + y
}
console.log(typeof add)
// 函数的调用
var res = add(10, 20)
console.log(res)
res = add(10, 20, 30, 40, 50)
console.log(res)
匿名函数
* function(形参列表){
函数体
return 返回值
}
一次性函数
在内存中执行完成会被立即释放的
res = (function(a, b){
return a + b
})(13, 24)
console.log(res)
函数也是一个数据 可以被赋予给变量的
f = function(a, b){
return a + b
}
res = f(17, 19)
console.log(res)
f1 = add
res = f1(19, 19)
console.log(res)
使用var 标记变量和不标记变量的区别
函数有自己独立的作用域
在函数内部声明的变量 不用var标记 – 是一个全局变量
在函数的外部可以使用
使用var声明 就是一个局部变量 只能在函数中使用
function display(){
var max_value = 100
min_value = 10
}
display()
console.log(min_value)//10
console.log(max_value)//Uncaught ReferenceError: max_value is not defined
函数嵌套
function outer(){
console.log("外部函数")
function inner(){
console.log("内部函数")
}
inner()
}
outer()
想让inner的作用范围广一些 闭包
函数嵌套， 外层函数的返回值是一个函数
function outer1(){
console.log("外部函数1")
function inner1(){
console.log("内部函数1")
}
return inner1
}
res = outer1()
res()
运算符
算术运算符
+ - * / %
console.log(1 + 2)
console.log(1 - 2)
console.log(1 * 2)
console.log(1 / 2)
console.log(1 % 2)
一元运算符
+(正号) -(符号) ++(自加) --(自减)
单独的一条语句 a++ 和 ++a是没有区别的
都是在原来的基础上对变量进行自加1
在参与运算的时候
a++ 先将变量的值参与运算 再对变量进行自加1
++a 先对变量进行自加1 再将变量的值参与运算
var m = 10
n = m++
console.log(n) //10
console.log(m) //11
n = ++m
console.log(n) //12
console.log(m) //12
复合运算符
+= -= *= /= %=
比较运算符
> >= < <= == != ===(恒等)
==和===的区别
- ===才表示的是恒等： 数据和类型都是一致的 结果才为true
- == 数据内容一致 类型不一致结果也可以为true
var res = (123 == "123" ? "成立" : "不成立")
console.log(res)//成立
res = (123 === "123" ? "成立" : "不成立")
console.log(res)//不成立
res = (123 === 123 ? "成立" : "不成立")
console.log(res)//成立
逻辑运算符
逻辑与 && (and) 逻辑或 || (or) 逻辑非 ! (not)
在Python中and和or是具有短路原则的
- && 逻辑与
并且的关系 两边表达式同时成立 结果才能成立
换句话说 一假则全假 有一个不成立 结果就判定为假
左边表达式判定为假 右边表达式则没有必要判断真假 也就意味
执行到此结束了。 如果后面有逻辑或的表达式 直接执行逻辑或表达式的右边 - 逻辑或
或者的意思 必须两边表达式都不成立 结果才不成立
换句话说 一真则全真
左边表达式判断为真了， 右边表达式就没有必要判断真假了
var x = 10, y = 11
res = (x < y && --y >= x++)
// res x y 分别等于什么？？？
console.log(res)
console.log(x)
console.log(y)
// true 11 10
var x = 10, y = 11
res = (x >= 10 && y-- > ++x || y++ > 10)
// res x y
console.log(res)
console.log(x)
console.log(y)
// false 11 11
三元运算符
条件表达式 ? 表达式1 : 表达式2
条件成立执行表达式1 否则执行表达式2
var res = (123 == "123" ? "成立" : "不成立")
console.log(res)//成立
res = (123 === "123" ? "成立" : "不成立")
console.log(res)//不成立
res = (123 === 123 ? "成立" : "不成立")
console.log(res)//成立
流程控制语句
- 顺序语句 — 代码是从上到下执行的
- 分支语句
判断结构 — if语句
if(条件表达式){
条件成立时执行的语句
}else{
条件不成立时执行的语句
}
if(条件表达式1){
条件1成立时执行的语句
}else if(条件表达式2){
条件2成立时执行的语句
}...
else{
以上条件均不成立执行的语句
}
选择结构
case后跟随的是固定的数据 是一个明确的值
是根据switch后面的表达式的结果可能出现的情况列出的选项
如果其中一个选项满足 整个选择语句结构 通过break就结束
default是case中列出的选项都不成立 执行default
default的执行时机与其书写的位置没有关系
switch(表达式){
case 值1：
执行语句
break
case 值2：
执行语句2
break
...
default:
执行语句
break
}
循环语句
while循环
while(条件表达式){
循环语句
}
do-while循环
do-while至少会执行一次循环操作
do{
循环操作
}while(条件表达式)
for循环
小括号中放的是三条语句， 因为语句结束的标记是分号 有两个分号
初始化条件有多个 使用逗号分隔
for(循环初始化语句;循环条件判断语句;循环后初始化条件变化的语句){
}
// 死循环
for(;;){}
for-in循环
变量获取的是序列的索引
for(变量 in 序列){
}
数组Array
类比成 Python中的列表
在JS中的数组没有脚标越界一说
1. 数组的定义方式
- 只是一个整数 创建出来一个长度为10 的数组 但是数组中没有元素
var arr = new Array(10)
console.log(arr) - 超过一个的数据 创建的是一个数组长度为数据个数的 元素内容为数据的数组
arr = new Array(10, 20)
console.log(arr) - 字面量 直接列出
arr = [12, 30, 40, 60]
console.log(arr)
2.获取数组的长度
- 这个属性可读可写
var len = arr.length
console.log(len) - 重新设置 数据或根据你设置的长度重新变化数组中的数据
arr.length = 0 // 清空元素
console.log(arr)
arr.length = 10
console.log(arr)
3. 获取数组中指定索引位置的元素
没有指定位置 不会报错的 只是返回undefined
var value = arr[11]
console.log(value)
4. 遍历数组
for(var i = 0; i < arr.length; i++){
console.log(arr[i])
}
5.常见的操作
添加元素
- 在末尾追加元素 — 可以添加多个
arr.push(true, “hello”)
console.log(arr) - 在开头添加
arr.unshift(“head”,false)
console.log(arr) - 在指定位置添加
arr.splice(6, 0 ,66)
console.log(arr)
移除元素
- 移除尾部 只能移除一个
arr.pop()
console.log(arr) - 移除头部 只能移除1个
arr.shift()
console.log(arr) - 移除指定位置
arr.splice(7, 1)
console.log(arr) - 修改指定位置的元素
arr[6] = 77
console.log(arr)
或者是
arr.splice(7,1,88)
console.log(arr)
splice的参数
- 起始索引
- 删除元素的个数 添加(删除个数为0) 替换() 删除指定位置的元素(删除个数为1)
- 新增元素的内容 可以有多个元素 每个元素之间使用逗号隔开即可
以指定拼接符拼接数组中的元素 结果是一个字符串
var join_str = arr.join("-")
console.log(join_str)
翻转数据中的数据
arr.reverse()
console.log(arr)
对数组中的元素进行排序
- 默认是升序排序的 按照数据的相同位置的元素对比 进行排序的 类似于字符串的比较
arr = [17, 21, 19, 38, 29, 128]
arr.sort()
console.log(arr) //[128, 17, 19, 21, 29, 38] - 数值升序
函数需要两个形参
函数需要返回值的
返回的是交换元素的状态
这个函数给定的是交换数据的标准
arr.sort(function(ele1, ele2){
return ele1 - ele2
// ele1 > ele2 结果是大于零的会交换元素
// 否则不交换
})
console.log(arr)
Object对象
Object的数据结构是类似于Python的字典的键值对的形式呈现出来的
- 声明一个对象
var person = new Object() - 添加属性: 通过点语法的形式添加
person.name = “李泽”
person.age = 20 - 行为 — 方法
在Python中self 接受的被描述的对象的地址 可以通过
self来获取对象的属性和行为
在JS中这个字段 this 接受的就是被描述对象的地址
person.study = function(){
console.log(this.age +"岁的"+this.name + "在学习")
}
-
获取对象的属性
- 通过点语法的行为来获取
console.log("姓名： " + person.name) - 可以通过字典中根据键获取值的格式 获取属性值
console.log(“年龄：” + person[“age”])
- 通过点语法的行为来获取
-
删除对象的属性
delete person.name -
调用行为
person.study() -
常用创建对象的形式
var student = {
name:"测测",
age: 18,
sleep:function(){
console.log(this.name + "在睡觉")
}
}
student.sleep()
时间类
-
获取当前时间
var date = new Date()
console.log(date) -
自定义时间
月份 0-11 表示1到12
date = new Date(2020, 12, 25)
console.log(date)
date = new Date(2020, 0, 25, 12, 30, 25)
console.log(date) -
将指定的时间字符串格式转化为时间
年月日： “年-月-日” 或者 “年/月/日”
date = new Date(“2021-12-25 12:30:30”)
console.log(date) -
以特定的格式显示星期 年月日
console.log(date.toDateString()) -
以特定的格式显示时分秒和时区
console.log(date.toTimeString()) -
以本地时间格式显示年月日
console.log(date.toLocaleDateString()) -
以本地时间格式显示时分秒
console.log(date.toLocaleTimeString()) -
获取指定时间对应的时间戳
时间戳：指定时间到1970年1月1日凌晨经历的秒数
var time_code = date.getTime()
console.log(time_code) -
将时间戳转化为指定的时间
date = new Date(time_code)
console.log(date) -
获取指定字符串时间对应的时间戳
time_code = Date.parse(“2019-12-25 23:15:14”)
console.log(time_code)
date = new Date(time_code)
console.log(date) -
获取时间中指定字段的值get/重置指定字段的值set
- 获取年
var year = date.getFullYear()
console.log(year) - 重设
date.setFullYear(2020)
console.log(date) - 获取月
var month = date.getMonth()
console.log(month) - 重设
date.setMonth(11)
console.log(date) - 获取日
var day = date.getDate()
console.log(day) - 重设
date.setDate(18)
console.log(date) - 获取时
var hour = date.getHours()
console.log(hour) - 重设
date.setHours(10)
console.log(date) - 获取分
var minute = date.getMinutes()
console.log(minute) - 重设
date.setMinutes(10)
console.log(date) - 获取秒
var second = date.getSeconds()
console.log(second) - 重设
date.setSeconds(56)
console.log(date) - 获取星期
var week = date.getDay()
console.log(week)
- 获取年
数学类
console.log(“圆周率：”+Math.PI)
console.log(“产生的是0到1之间的随机数 不包含1：”+Math.random())
console.log(“两个数中的最大值：”+Math.max(18, 21))
console.log(“两个数中的最小值：”+Math.min(18, 21))
console.log(“绝对值：”+Math.abs(-10))
console.log(“求幂数：”+Math.pow(2, 5)) // 2的5次方
console.log(“开平方：”+Math.sqrt(8))
console.log(“四舍五入：”+Math.round(3.78))
console.log(“向上求整：”+Math.ceil(18.01))
console.log(“向下求整：”+Math.floor(18.99))
BOM - Browser Object Model浏览器对象模型
窗口对象 window
提供的是与浏览器进行交互的属性和方法
window对象常用的属性和行为
属性：
- document — 文档对象
- history – 历史记录对象
- location – 网址信息对象
行为：
- alert 弹框
- prompt 包含输入框的弹框
- confirm 包含确认取消按钮的弹框
点击确定取消的话会返回对应的结果
确定 — true
取消 — false - 打开并创建一个新的窗口 open
窗口中显示的网址
自定义名字
设置新窗口的属性：width height left top - 定时器
- 延时器
在JS中声明的变量和行为 如果没有标记属于哪个对象，那么它就属于window对象的
var person = {
name:"珂珂"
}
console.log(person.name)
var value = 100
console.log(value) // window对象是可以省略的
console.log(window.value)
alert("弹窗")
window.alert("弹窗2")
// 为了适配所有的浏览器
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
console.log("屏幕宽度：" + width + " 屏幕高度：" + height)
document
红豆生南国，春来发几枝。愿君多采撷，此物最相思。
常用方法
验证新窗口的名字
定时器
每隔多长时间执行什么行为就是定时器
要执行的行为
时间间隔 单位是毫秒
定时器生成的时候 会有一个定时器id的产生 根据这个id去移除定时器
var i = 1
var timeid = setInterval(function(){
console.log("执行了该定时器" + i + "次")
i++
if(i > 20){
// 停止定时器
clearInterval(timeid)
}
}, 1000)
延时器
延时指定时间之后 才会执行某些行为
只会执行一次
在延时期间 关闭这个行为 延时器生成的时候也是有延时器id的
history历史记录
first
第一页
second
第二页
3页
