JavaScript相关知识点简单总结

最新推荐文章于 2024-11-11 19:29:13 发布

努力找工作的小白

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量199

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44482951/article/details/127404134

版权

JavaScript相关知识点简单总结

简称JS，作用是给页面添加动态效果

语言特点：

属于脚本语言, 不需要编译直接由浏览器解析执行
基于面向对象
弱类型语言
安全性强:JS语言由于是运行在客户端电脑上的语言,所以JS语言只能访问浏览器内部的数据,浏览器以外的数据是禁止访问的.
交互性强: 因为JS语言是嵌入到html页面中,最终执行在客户端电脑里面的,和用户近距离接触,所以交互性更强

如何在html中添加IS代码

三种引入方式:
- 内联: 在标签的事件属性中添加JS代码, 当事件触发时执行
- - 事件: 系统给提供的一些特定的时间点
  - 点击事件: 当用户点击元素时触发的时间点
- 内部: 在html页面中的任何位置添加script标签,在标签里面写JS代码
- 外部: 在单独的JS文件中写JS代码,然后在html页面中通过script标签的src属性引入变量, 数据类型, 运算符,各种语句,方法,面向对象

变量

JS语言属于弱类型语言，使用let声明变量即可
let和var声明变量的区别：
let声明变量的作用域和Java语言类似
var声明变量的作用域是全局的

数据类型

JS 语言中只有对象类型，常见的对象类型包括：

string字符串：可以通过单引号或双引号修饰
number数值：相当于java中所有的数值类型的总和
boolean布尔值：true/false
undefined未定义：当变量只声明不赋值时，变量的类型为未定义
typeof变量：获取变量的类型

运算符（和java基本相同）

算术运算符: + - * / %
除法会自动根据结果转换成整数或小数

JS: let x=5; let y=2; x/y=2.5 x=6 x/y=3

关系运算符: > < >= <= != == 和 ===
- ==: 先统一两个变量的类型再比较值
- ===:先比较类型, 类型相同之后再比较值

“666”==666 true “666”===666 false

逻辑运算符: && , || , !
赋值运算符: = += -= *= /= %=
三目运算符: 条件?值1:值2

JS相关语句（和java基本相同）

if else
while / do while
for
switch case

方法

JS: function 方法名(参数列表){方法体}
声明方法的方式:

function 方法名(参数列表){方法体}
let 方法名 = function(参数列表){方法体}

let 方法名 = new Function(“参数1”,“参数2”,“方法体”);

 function f1(){
    console.log("f1");//输出到页面控制台
  }
  let f2 = function (name,age){
    console.log(name+":"+age);
  }
  let f3 = new Function("name","age","console.log(name+\":\"+age);")
  f1();
  f2("张三",10)
  f3("张三",20)

NaN

Not a Number 不是一个数
isNaN(变量) 判断变量是否是NaN, true代表是NaN,false代表不是NaN
NaN和任何数值进行任何运算结果都是NaN
可以对相关的输入进行限制，如计算数字时输入其他字符或内容则不成功

JavaScript代码出错排错步骤:

通过浏览器F12 调出控制台, 看控制台中的错误提示, 然后点击超链接找到对应的代码

JavaScript的对象分类

内置对象, 包括: string,boolean,number…
DOM：Document Object Model文档对象模型, 包含和页面相关的内容
BOM：Browser Object Model 浏览器对象模型, 包含和浏览器相关的内容

DOM文档对象模型

通过选择器找到页面中的元素对象：let 元素对象 = document.querySelector(“选择器”);
获取或修改元素的文本内容

元素对象.innerText 获取

元素对象.innerText = “xxx”; 修改
在这里插入图片描述

获取或修改控件的值

控件对象.value 获取

控件对象.value=“xxx”; 修改
在这里插入图片描述

创建元素对象：let 元素对象 = document.createElement(“标签名”);

添加元素到某个元素里面：父元素对象.append(新元素对象);

<body>
<input type="text">
<input type="button" value="添加" onclick="f()">
<div></div>
</body>
<script>
  function f() {
    let i = document.querySelector("input")
    let d = document.querySelector("div")
    let h = document.createElement("h1")//创建h1
    h.innerText = i.value
    d.append(h)//将h放入div中
  }
</script>

获取body：document.body

BOM浏览器对象模型

window: 此对象中的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.
window中的常见方法:
- alert(“xxx”) 弹出提示框
- confirm(“xxx”)弹出确认框：点击后返回true或false
- prompt(“xxx”) 弹出文本框
- isNaN(变量) 判断变量是否是NaN
- parseInt() 将字符串或小数转成整数
- parseFloat() 将字符串转成整数或小数
- let timer = setInterval(方法,时间间隔) 开启定时器（注意，方法当参数传递时不可以加括号，调用方法时则必须添加）
- clearInterval(timer) 停止定时器
- setTimeout(方法,时间间隔) 开启只执行一次的定时器
window对象中的常见属性
- location 位置
- - location.href = “http://www.baidu.com”; 获得或修改浏览器的请求地址
  - location.reload(); 刷新页面
- history 历史
- - history.length 历史页面数量
  - history.back() 返回上一页面
    对象中的常见属性
- location 位置
- - location.href = “http://www.baidu.com”; 获得或修改浏览器的请求地址
  - location.reload(); 刷新页面
- history 历史
- - history.length 历史页面数量
  - history.back() 返回上一页面
  - history.forward() 前往下一页面