JavaScript介绍
- 虽然是java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，没有一毛钱关系！
- 网景公司在Netscape2.0首先推出了JavaScript
- JavaScript 的正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js”
- JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
- JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。
js的特点
- 可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序 （后面会学习不用浏览器也能运行）
- 解释执行：事先不编译，逐行执行
- 基于对象：内置大量现成对象
- 适宜：
- 客户端数据计算
- 客户端表单合法性验证
- 浏览器事件的触发
- 网页特殊显示效果制作
js的组成
- ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
- DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
- BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口大小
- 提供 Web 浏览器详细信息的定位对象
- 提供用户屏幕分辨率详细信息的屏幕对象
- 对 cookie 的支持
- IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而实现ajax局部刷新技术
HTML与javaScript结合方式
使用js的三种方式
- 行内脚本
- 内部脚本
- 外部脚本
JavaScript的使用
变量
- 因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var
- 声明变量： var x ; var x,y;
- 数值类型：number
- 不区分整型数值和浮点型数值
- 所有数字都采用 64 位浮点格式存储，类似于double 格式
- 字符串：string
- 首尾由单引号或双引号括起
- 布尔类型：
- 仅有两个值：true和false也代表1和0
- 实际运算中true=1,false=0
- 自动类型转换
- 数据类型转换函数
- null与undefined
- 算术运算
- 关系运算
- 逻辑运算
- 控制语句
常用字符串API
- length:获取字符串的长度（字符串中字符的个数）属性，没有小括号
- toUpperCase/toLowerCase:转大小写
- charAt(下标)：返回某个下标上的字符
- indexof(字符)：查找字符串中字符出现的首次下标
- lastIndexof(字符)：查找字符串中字符最后一次出现的下标
- substring(开始,结束)：截取字符串中一部分（结束是不包含的）
- replace(旧的,新的)：将字符串中的旧字符替换成新字符
- split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型
数组
数组的常用方法
- tostring()：将数组转换成字符串
- join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。
- concat(新元素)：将原来的数组连接新元素，原数组不变。
- slice(开始，结束)：在数组中提取一部分，形成新的数组。
- reverse()：数组的反转（倒序）
- sort()：数组排序
Math数学对象
- Math 对象用于执行数学任务
- 没有构造函数 Math()
- 无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法
Number对象
- Number.fixed(2); 自带四舍五入技能
正则表达式
- 对字符串执行模式匹配的强大工具
日期对象
函数
- 使用关键字function定义函数
function 函数名( 形参列表 ){
// 函数体
return 返回值;
}
复制代码-
函数声明后不会立即执行，会在我们需要的时候调用到。
-
注意：
- 形参：一定不要带数据类型
- 分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句，所以不以分号结束。
-
无返回值
-
有返回值
-
参数对象
-
构造函数
-
匿名函数
-
全局函数
-
闭包
弹框输出
- 普通弹框 alert(“hello，拉勾”);
- 控制台日志输出 console.log(“谷歌浏览器按F12进入控制台”);
- 页面输出 document.write(“<h2>我爱你中国</h2>”); 将<h2>元素输出到<body>中
- 确认框 confirm(“确定删除吗？”);
- 输入框 prompt(“请输入姓名：”);
DOM 操作
- 在一个html页面中，会使用很多标签来规划制作页面。
- 每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素
- 如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一片叶子，应该怎么做？
- “顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一片叶子都不是难事了
- 叶子和大树的一些启发，工程师们开会讨论就定了这个理论“文档对象模型”，
- 文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了
- 在节点树中，顶端节点就是根节点（root）
- 每个节点都有父节点（除了根节点）
- 任何一个节点都可以拥有任意数量的子节点
- 同胞是拥有相同父节点的节点
从上面的HTML中：
- <html> 节点没有父节点；它是根节点
- <head> 和 <body> 的父节点是 <html> 节点
- 文本节点 “Hello world!” 的父节点是 <p> 节点
并且：
- <html> 节点拥有两个子节点：<head> 和 <body>
- <head> 节点拥有两个子节点：<meta> 与 <title> 节点
- <title> 节点也拥有一个子节点：文本节点 “DOM 教程”<h1> 和 <p> 节点是同胞节点，同时也是
- <body> 的子节点
并且：
- <head> 元素是 <html> 元素的首个子节点
- <body> 元素是 <html> 元素的最后一个子节点
- <h1> 元素是 <body> 元素的首个子节点
- <p> 元素是 <body> 元素的最后一个子节点
js为我们提供了很多种方法来实现在页面找查找某个元素节点
DOM访问
- getElementById：通过id属性获得元素节点对象
- getElementsByName：通过name属性获得元素节点对象集
- getElementsByTagName：通过标签名称获得元素节点对象集
DOM修改
- 修改 HTML DOM 意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）
- 添加节点
- 删除节点
- 替换节点
事件
js捕获某个动作而做出的反馈
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。
- onload 当文档被载入时执行脚本
表单元素事件 (Form Element Events)
仅在表单元素中有效。
- onblur 当元素失去焦点时执行脚本
- onfocus 当元素获得焦点时执行脚本
鼠标事件 (Mouse Events)
- onclick 当鼠标被单击时执行脚本
- ondblclick 当鼠标被双击时执行脚本
- onmouseout 当鼠标指针移出某元素时执行脚本
- onmouseover 当鼠标指针悬停于某元素之上时执行脚本
键盘事件
- onkeydown 按下去
- onkeyup 弹上来
事件冒泡
- 先子，后父。事件的触发顺序自内向外，这就是事件冒泡
事件捕获
- 先父,后子。事件触发顺序变更为自外向内，这就是事件捕获
面向对象OOP
- 使用Object创建通用对象
- 使用构造函数
- 使用直接量
JSON
- 大家在互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大（每个人的编码喜好不一样）
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
- 易于人阅读和编写，同时也易于机器解析和生成
{
属性1：值1，
属性2：值2，
。。。。
}
复制代码BOM操作
就是javascript对浏览器的一些常规操作的方法
window对象
- screen屏幕对象
- location定位
- history浏览器历史
- navigator 导航
存储对象
用起来和我们在java中map很相似，都是键值对的方式存数据
- 本地存储 localStorage
- 会话存储 sessionStorage
计时操作
- 周期性定时器 setInterval
- 停止定时器 clearInterval
- 一次性定时器 setTimeout
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
