Java web：javascript

最新推荐文章于 2022-04-20 15:22:45 发布

Powerstot

最新推荐文章于 2022-04-20 15:22:45 发布

阅读量120

点赞数 1

分类专栏： # javaweb 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45813747/article/details/109503456

版权

javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

概述：

一门客户端脚本语言，不需要编译，直接就可以被浏览器解析执行了
增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

ECMAScript：客户端脚本语言标准

基本语法：
- 与html结合：
  - 内部js：定义<script>代码</script>
  - 外部js：定义<script src=“”>代码</script>
  - 注意：可以定义多个，可以定义任何地方，但会影响执行顺序
- 注释：和javase单行多行注释相同，无文档注释
- 数据类型：
  - 原始数据类型：
    - number：整数，小数，NaN（not a number）
    - string：“abc“,‘abc’,“a”,‘a’
    - boolean：true/false
    - null:对象为空的占位符
    - undefined：未定义，如果一个变量初始化时没有给值，默认赋值为undefined
  - 引用数据类型：对象
- 变量：一小块存储数据的内存空间
  - Java强类型语言，JavaScript是弱类型语言
  - var 变量名 = 初始化值;
- 运算符：与Java基本一致
  - 注意：如果运算数不是运算符所要求的类型，js引擎会自动的将运算数进行类型转换
    - 其他类型转number：string（字面值不是数组转为NaN），boolean（true转1，false转0）
    - 比较方式：
      - 类型相同：字符串，按照字典顺序比较。按位逐一比较，直到得出大小为止。
      - 类型不同：先进行类型转换，再比较（===：全等于，先判断类型再比较，类型不同直接false）
    - 其他类型转boolean：
      - number：0和NaN为false
      - string：空字符串（”“）为false
      - null&undefined：false
      - 对象：全为true
- 流程控制语句：js中，switch可以接收任意原始数据类型
- 特殊语法：
  - ；为语句结尾，一行一条语句可以省略
  - 变量用var定义：局部变量
  - 变量不用var定义：全局变量
基本对象：
- Function：函数对象
  - 创建：
    - var fun = new Function(形参,方法体);
    - function 方法名(形参列表){方法体}
    - var 方法名 = function(形参列表){方法体}
  - 属性：length 形参个数
  - 特点：
    - 定义时，形参类型可不写，返回值类型不写
    - 定义同名方法会覆盖，方法是一个对象
    - JS中，方法调用只与方法名有关
    - 方法声明中有一个内置数组，argument，来封装所有的形参
- Array：数组对象
  - 创建：
    - var arr = new Array(元素列表)
    - var arr = new Array(长度)
    - var arr = [元素列表]
  - 方法：
    - join(要替换的字符串)：将所有元素用该字符串链接
    - push():向数组末尾添加元素，返回长度
  - 属性：length：数组长度
  - 特点：
    - JS中，数组长度可变，数组元素类型可变
- Date：日期对象
  - var Date = new Date()
  - 方法：
    - toLocaleString()：返回当前date对象对应的时间的本地字符串格式
    - getTime()：获取毫秒值
- Math：数学对象（无需创建直接使用）
  - 方法：
    - random()：返回[0~1)之间的一个数
    - ceil(x):向上取整
    - floor(x):向下取整
    - round(x):四舍五入
  - 属性：PI
- RegExp：正则表达式对象
  - 创建：
    - var reg = new RegExp(“正则表达式”)
    - var reg = /正则表达式/
  - 方法
    - test(要判断的参数)：判断是否符合该正则表达式对象
- Global(无需创建直接使用)
  - 方法：
    - encodeURL():url编码
    - decodeURL():url解码
    - encodeURIComponent():url编码,编码的字符更多
    - decodeURIComponent():url解码
    - parseInt():将字符串转换为数组，逐一转换直到不为数子的字符出现，返会前面的数字
    - isNaN():判断是否为NaN（NaN放进去为false,NaN参与的==比较全部为false）
    - eval(字符串):将字符串，看作js代码来执行。

BOM

Browser Object Model 浏览器对象模型。将浏览器的各个组成部分封装成对象。
组成：
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器对象
- History：历史记录对象（当前页面）
- Location：地址栏对象
Window对象：无需创建
- 方法：
  - 弹出框：
  - alert()：显示一段消息和一个确认按钮的警告框
  - confirm()：显示一段消息和一个确认按钮和取消按钮的警告框（返回true和false）
  - prompt()：显示提示用户输入的对话框（返回用户输入的值）
  - 打开关闭：
  - close()：关闭当前浏览器窗口（调用者）
  - open()：打开一个浏览器窗口（返回一个window对象）
  - 定时器：
  - setTimeout(函数或这表达式，毫秒)：指定毫秒后调用函数或这表达式（返回该定时器标识）
  - clearTimeout()：取消该标识的定时器工作
  - setInterval()：周期性调用函数
  - clearInterval()：取消 setInterval()
- 属性：
  - 其他BOM对象：
    - History，Location，Navigator，Screen，
  - 其他DOm对象：
    - document
- 特点：window方法和属性可直接使用
Location对象：
- 方法：reload()：重新加载该文档，刷新
- 属性：href：设置或返回URL
History对象：
- 方法：
  - back()：加载history列表中前一个URL
  - forward()：加载后history列表下一个URL
  - go(参数)：加载后history列表某个具体页面（参数=正数：前进几个历史记录，=负数：后退…）
- 属性：length：当前窗口历史列表中的URL数量

DOM

Document Object Model 文档对象模型，将标记语言文档的各个组成部分，封装为对象进行CRUD的动态操作。
DOM标准：
- 核心DOM：标准通用模型
  - Document：文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
  - Node：节点对象
- XML DOM：针对XML文档的标准模型
- HTML DOM：针对HTML文档的标准模型
核心DOM：
- Document文档对象：
  - 方法：
    - 获取Element对象：
    - getElementById()：id来获取元素对象，
    - getElementsByTagName()：元素名称获取元素对象，返回一个数组
    - getElementsByClassName()：Class属性值获取元素对象，返回一个数组
    - getElementsByName()：name属性值获取元素对象，返回一个数组
    - 创建其他DOM对象：
    - createAttribute(name)
    - createComment()
    - createElement()
    - createTextNode()
- Element对象：
  - 方法：
    - removeAttribute()：移除属性
    - setAttribute()：设置属性
- Node对象：其他五个对象的父对象
  - 特点：所有DOM对象都可以看作节点对象
  - 方法：
    - appendChild()：向节点的子节点列表的结尾添加新的子节点。
    - removeChild()：删除（并返回）当前节点的指定子节点。
    - replaceChild()：新节点替换一个子节点。
  - 属性：parentNode 返回节点的父节点
HTML DOM
- 标签体的设置和获取：innerHTML
- 控制元素样式：
  - 使用元素的style属性来设置：div1.style.border = “1px solid red” div1.style.fontSize = “20px”
  - 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值

事件监听

些组件被执行了某些操作后，触发某些代码的执行。
- 事件：操作。单击，键盘按下
- 事件源：组件。按钮，输入框
- 监听器：代码。onclick
- 注册监听：事件，事件源，监听器结合在一起。
常见事件：
- 点击事件：
  - onclick：单击
  - ondblclick：双击
- 焦点事件：
  - onblur：元素失去焦点
  - onfocus：元素获得焦点
- 加载事件：
  - onload：一张页面或图片完成加载
- 鼠标事件：
  - onmousedown：鼠标按钮被按下
  - onmouseup：鼠标按钮被松开
  - onmousemove：鼠标移动
  - onmouseover：鼠标移动到某元素之上
  - onmouseout：鼠标移出某元素
- 键盘事件：
  - onkeydown：某个按键被按下
  - onkeyup：某个按键被松开
  - onkeypress：某个按键被按下并松开
- 选择和改变：
  - onchange：域的内容被改变
  - onselect：文本被选中
- 表单事件：
  - onsubmit：确认按钮被点击
  - onreset：重置按钮被点击

补充

//在浏览器页面显示内容,相当于write中的内容显示在body中
document.write("<h1>欢迎光临</h1>");
document.write("hello <br> world");
// /n无效
document.write("hello /n world");

//显示在console控制台，可以用于debug
console.log("123");

console.log(parseInt(1.2));
// == 比较值 === 比较类型和值

//Boolean()装换成boolean类型
//有内容就true，没有false

Powerstot

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Java web：javascript

概述：一门客户端脚本语言，不需要编译，直接就可以被浏览器解析执行了增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)ECMAScript：客户端脚本语言标准基本语法：与html结合：内部js：定义<script>代码</script>外部js：定义<script scr=“”>代码</scr
复制链接

扫一扫