js学习！

最新推荐文章于 2024-07-12 10:43:17 发布

l20040121_

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量30

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/l20040121_/article/details/128590531

版权

js代码书写位置

行内式（不推荐）

<div onclick="alert('hello world')">点我</div>
<a href="javascript:alert('hello world')">点我</a>

内嵌式
在这里插入图片描述

外链式(推荐)
在这里插入图片描述

注释与规范

注释方案：1.// 2./* 内容*/

变量

<script>
var x=100
console.log(+2000)
</script>

变量命名规则和规范

规则：
1.一个变量名可以由数字、字母、英语下划线
2.严格区分大小写
3.不能由数字开头
4.不能是保留字或关键字
5.不要出现空格
规范：
1.变量名尽量有意义
2.遵循驼峰命名规则，由多个单词组成的时候，第二个单词开始首字母大写
3.不要使用中文

数据类型

基本类型：
1.Number 18 ， 12.5
2.String字符类型
3. Boolean
4. Undefined声明未赋值
5. Null
6. Symbol
复杂类型：

检测数据类型

<script>
var a="111"
console.log(typeof a)
</script>

类型转化

转数值·
在这里插入图片描述
true 1
false 0
转字符串

转成布尔

数学运算符

在这里插入图片描述

赋值运算符

比较运算符

1.==
比较两边的值是否相等，不管数据类型

2.===
比较符号两边的值和数据类型是否相等

3.！==
比较符号两边值是否不等

4.！==
比较符号两边数据类型是否不等

5.>=
比较左边的值是否大于右边

逻辑运算符

if条件分支

Switch

在这里插入图片描述

break终止循环

在这里插入图片描述

continue结束本次循环

在这里插入图片描述

函数的概念

在这里插入图片描述

函数定义阶段

1.定义阶段就是我们把代码放进盒子里面
2.我们就要学习怎么放进去，也就是书写一个函数
3.我们有两种定义方式声明式和赋值式

定义函数

1.声明式

function test1(){
 }

2.赋值式

var test3 = function(){
    console.log 
}

声明式可以先调用再定义

函数的参数

返回值

在这里插入图片描述

预解析

作用域

在这里插入图片描述

访问规则

逐级向上找（就近原则）

对象

查
document.write（“姓名是”+obj.name）
改
obj.age=200
console.log(obj)
删
delete obj.name
2增
var obj2={}
obj2[“name”]=“kerwin”
2查
console.log(obj2[“name”])
2改
obj2[“name”]=“tiechui2”
2删
delete obj2[“name”]

对象的遍历

<script>
for(var i in obj){
document.write(i+":"+obj[i])
}
</script>

数组

概念：数据的集合
数据类型分类
在这里插入图片描述
创建数组：[]
push
在数组末尾追加一个元素
pop
用来删除数组最后一个元素

unshift

向数组开头添加一个或者多个元素，并返回新的新租长度
shift
可以删除数组的第一个元素，并将删除的作为返回值返回
splice
在截取数组中的某些内容，按照数组索引来截取
reverse
用来反转数组
sort
用来给数组排序
concat
多个数组进行拼接
join
是把数组里面的每一项内容链接起来，变成一个字符串
可以自己定义每一项之间链接的内容 join(要以什么内容链接)
不会改变原始数组，而是把链接好的字符串返回

注意：join 方法不会改变原始数组，而是返回链接好的字符串

indexOf
用来找到数组中某一项的索引
forEach
和 for 循环一个作用，就是用来遍历数组的
filter
和 map 的使用方式类似，按照我们的条件来筛选数组
把原始数组中满足条件的筛选出来，组成一个新的数组返回

字符串基本操作

var str1=“world”;
length只读不能改
str1[1]索引，只读

字符串常用方法

1.charAt(索引) 返回索引对应的字符
2.charCodeAt(索引) 返回字符编码
3.toUpperCase toLowerCase 转成大写/小写
4.substr（开始索引，长度） substring（开始索引，结束索引） slice（开始索引，结束索引）截取
5.replace 替换（替换什么，替换的内容）只能替换第一个
6.split 分割（可以加分割符）
7.indexOf lastIndexOf 查询值为-1是不存在
8.concat 连接字符串
9.trim 去掉首尾空格
10.trimStart() trimLeft()去掉首空格
11.trimEnd() trimRight()去掉尾空格

模糊查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=["aaa","asd","Wda"];
        var input=prompt("请输入查询内容");
        var res=arr.filter(function(item)
        {
            return item.indexOf(input)>-1;
        })
        console.log(res);
    </script>
</head>
<body>
    
</body>
</html>

ps：
1.json格式字符串
格式：{“key”:内容随意}
var str=‘{“name”:“kerwin”}’
var obj=JSON.parse(str);
2.转换为JSON格式
var obj1={“name”:“t11”}
var str1=JSON.stringify(obj1)
3.模板字符串
`可以让字符串换行写
${}把里面的内容当成js代码

数字常用方法

toFixed()保留小数位返回是字符串类型
Math对象的方法
random 随机返回0-1的数，不包含1包含0
round四舍五入取整
ceil向上取整 floor向下取整
abs绝对值
sqrt 平方根
pow底数的指数倍
max多个参数中最大的
min多个参数中最小的
PI π的值

时间对象

在这里插入图片描述
var dat=new Date()自动转为字符串
传参（从1970年1.1 0:0开始计时）
1个传参是毫秒数
2，3个参数
var date2=new Date(2023,0,3,10,10,10)
字符串
var date3=new Date(“2023-10-10 10:10:10”)
var date3=new Date(“2023/10/10 10:10:10”)
时间对象常用方法

BOM

在这里插入图片描述

浏览器

1.浏览器可视窗口的尺寸
window.innerHeight 窗口的高
window.innerWidth 窗口的宽
2.浏览器的弹出层
alert confirm（询问框） prompt（输入框）
3.浏览器的地址栏
window.location.href(浏览器的地址)
href也可以输入进行改名
reload 重新加载页面
4.浏览器常见的事件
window.onload 所有资源加载完后执行（图片，视频，dom）
5.resize 大小改变时会执行一次
scroll 页面滚动时会执行
document.doucumentElement.scrollTop 浏览器的滚动距离
document.body.scrollTop 也可以获取滚动距离
6.window.scrollTo(0,0)
数字写法，回到顶部
7.对象写法，回到顶部
window.scrollTo(
{
left:0;
top:0;
}
)
8.浏览器打开标签页
window.open(“”)新的标签页打开一个页面
widow.close()关掉自己的页面
9.浏览器的历史记录
history.back() 返回（必须保证历史记录有才能执行）
history.forward() 前进（必须保证历史记录有才能执行）
history.go() 1表示前进一个页面，-1表示回退一个页面
10.浏览器的本地存储
永久存储
.localStorage.setItem() 增只能存字符串，不能存对象
.localStorage.getItem() 取
.localStorage.removeItem() 删
.localStorage.clear() 清空
11.暂时存储（关掉网页就没了）
.sessionStorage.setItem() 增只能存字符串，不能存对象
.sessionStorage.getItem() 取
.sessionStorage.removeItem() 删
.sessionStorage.clear() 清空