JavaScript
-
概念
一门客户端脚本语言。
- 运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎。
- 脚本语言：不需要编译，直接就可以被浏览器解析执行。
-
功能
- 可以用来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户体验。
-
组成
- JavaScript=ECMAScript+BOM+DOM
ECMAScript
-
基本语法
- 与html结合方式
-
内部js：定义< script>,标签内容js内容，写在html代码中
-
外部js：另写一个js文件
-
注意：< script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序。< script>可以定义多个。
-
注释
- 单行注释：//
-
多行煮熟：/* 内容 */
-
数据类型
- 原始数据类型（基本数据类型）
- number：数字，整数/小数/NAN（一个不是数字的数字类型）
- string：字符串，可以是单引号也可以是双引号
- boolean：true和false
- null：一个对象为空的占位符
- undefined：未定义，如果一个变量没有给初始化值，则会被默认赋值为undefined。
- 引用数据类型：对象
-
变量
- 变量：一小块存储数据的内存空间
-
Java语言是强类型语言，而JavaScript是弱类型语言
- 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
- 弱类型：在开辟变量存储空间时，没有定义空间将来存储的数据的数据类型，可以存储任意类型的数据。
- 语法：var 变量名=初始化值。 （输出到页面上：document.write()😉
-
运算符
- 一元运算符：只有一个运算数的运算符
- ++ ，–，+（正号）
- ++在前，先自增再运算
- ++在后，先运算再自增
- 在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动地将运算数进行类型转换（因为+号或-号只能用在number类型上）
- 其他类型转为number
- string转，按照字面值转换，如果字面值不是数字，则转化为NAN（不是数字的数字）
- 其他类型转为number
- 算术运算符
- +，-，*，/，%
- 赋值运算符
- =，+=，-=
- 比较运算符
- 大于,<，大于等于，小于等于，，=（全等于）
- 类型相同，直接比较，如果是字符串，按照字典顺序比较。按位逐一比较，直到得出大小为止。
- 类型不同，先进行类型转换再比较；===全等于，在比较之前，先判断类型，如果类型不一样，直接返回fales
- 大于,<，大于等于，小于等于，，=（全等于）
- 逻辑运算符
- && ，||，！
- ！有时候会产生其他类型转boolean
- number：0为假，非0为真
- string：除了空字符串（“”），别的都是true
- null&undefined：都是false
- 对象：所有对象都是true
- ！有时候会产生其他类型转boolean
- && ，||，！
- 三元运算符
- ？： 表达式？值1：值2
- 如果表达式成立，输出值1，否则输出值2
- 流程控制语句
- if …else…
- switch
- 在Java中，switch语句可以接受的数据类型：int byte shor char 枚举 string
- 在js中，switch可以接受任意的数据类型
- 特殊语法
- 语句以";"结尾。
- 变量的定义使用var关键字，也可以不使用。
- 用var ：定义的变量是局部变量
- 不用var，定义的变量是全局变量
-
-
基本对象
-
function对象
-
创建
-
var fun=new function（形参，方法体）；
-
function fun（形参列表）{
方法体
}
-
-
-
var fun=function（形参列表）{
方法体
}- 方法
-
属性
-
length长度
-
特点
-
方法定义时，形参的类型不用写
-
方法是一个对象，如果定义名称相同的方法，会发生覆盖
-
在js中，方法的调用制语方法的名称有关，与参数列表无关
- 在方法声明中有一个隐藏的内置对象（数组），arguements封装所有的实际参数
-
调用
- 方法名称（实际参数列表）；
-
-
Array数组对象
- 创建
- var arr=new Array（元素列表）；元素只有一个，代表数组长度
- var arr=new Array（默认长度）；
- var arr=[元素列表]；
- 方法
- join（参数）；将数组中的元素按照指定的分隔符拼接成字符串，不是如参数默认为逗号
- 属性
- 特点
- js中，数组元素的类型可变
- js中，数组的长度是可变的；如果大于了数组长度则默认为undefined；加入数组长度为5，也可以直接arr[10]=10;中间没写的都是undefined
- 创建
-
Date对象
- 创建
-
var date =new Date（）；
- 方法
- toLocaleString（），返回当前date对象对应的时间本地字符串格式
- getTime（），获取毫秒值，返回当前对象描述的时间到1970年0分0秒相差的秒
- 方法
-
Math对象
- 创建
-
特点：该对象不用创建，直接使用。Math.方法名（）；
- 方法
- random（），获取（之间的随机数
- ceil（）数进行向上取整
- floor（）数进行向下取整
- round（）四舍五入
- 方法
-
-
属性
+ PI -
RegExp正则表达式对象
-
正则表达式：定义字符串的组成规则
-
单个字符：[]
如：[a] [ab]a或b [a-z]a到z
特殊符号代表特殊含义的单个字符：
\d：单个数字字符[0-9]
\w:单个单词字符[a-zA-Z]
-
量词符号：
？：表示出现0次或者1次
*：表示出现0次或者多次
+：表示出现1次或多次
{m，n}：表示m<=数量<=n
m如果缺省：{，n}最多n次
n如果缺省：{m，}最少m次
-
开始结束符号
- ^表示开始
- $表示结束
-
-
正则对象
- 创建
- var reg=new RegExp（"^正则表达式$"）；
- var reg=/^正则表达式$/；
- 方法
- test()验证指定的字符串是否符合正则定义的规范
- 创建
-
-
Global对象
-
特点：是个全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名（）；
-
方法
-
encodeURI（）：uri编码；decodeURI（）：uri解码
-
encodeURIComponent（）：uri编码 decodeURIComponent（）：uri解码
-
-
parseInt（）将字符串转为数字 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
-
isNAN（） 六亲不认，连自己都不忍，NAN参与的==比较全部时false
-
eval（）；将JavaScript字符串转化成脚本代码来执行
-
-
-
-
DOM简单学习
- 功能：控制html文档内容
-
代码：获取页面标签（元素）对象 Element
- document.getElementById（“id值”）；通过元素的id获取元素
- 操作Element对象
- 修改属性值
- 明确获取的对象是哪一个
- 查看API文档，找其中有哪些属性可以设置
- 修改标签体内容（属性：innerHTML）
- 获取标签对象
- 使用innerHTML属性修改标签体内容
-
事件简单学习
- 功能：某些组件被执行了某些操作后，出发某些代码的执行。
- 如何绑定事件
- 指着在html标签上，指定事件的属性（操作），属性值就是js代码
- onclick–单击事件
- 通过js获取元素对象，指定时间属性，设置一个函数
- 指着在html标签上，指定事件的属性（操作），属性值就是js代码
-
BOM学习
- Window：窗口对象
- 创建
- 方法
- 与弹出框有关的方法
- alert（）显示带有一段消息和一个确认按钮的警告框。
- confirm（） 显示带有一段消息以及确认按钮和取消按钮的对话框；如果用户点击确定按钮，则方法返回true，点击取消按钮，方法返回false
- prompt（）显示可提示用户输入的对话框；返回值：获取用户输入的值。
- 与弹出框有关的方法
- 与打开关闭有关的方法
- close（）关闭浏览器窗口，谁调用就关谁
- open（）打开一个新的浏览器窗口
- 与定时器相关的方法
- 一次性定时器
- setTimeout()在指定的毫秒数后调用函数或计算表达式
- 参数：1.js打麻或者方法对象 2.毫秒值
- 返回值：唯一标识，用来取消定时器
- clearTimeout（）取消由setTomeout（）方法设定的timeout。
- 循环定时器
- setInterval（）按照指定的周期（以毫秒计）来调用函数或者计算表达式。
- clearInterval（）取消setInterval（）设置的timeout
- 属性
- 获取其他BOM对象
- history location nacigator screen
- 获取DOM对象
- document
- 特点
- window对象不需要创建可以直接使用window使用，window.方法名（）
- window引用可以省略，方法名（）；
- 方法
- Navigator:浏览器对象
-
Screen：显示器屏幕对象
- History：历史记录对象
- 创建（获取）
- window.history 或history
- 方法
- back（） 加载history列表中的前一个URL
- forward（）加载history列表的下一个URL
- go() 加载history 列表中的某个具体页面
- 参数 ：正数，前进几个历史记录；附属，后退几个历史记录
- 属性
- length 返回当前窗口列表中的URL对象
- Location：地址栏对象
- 创建（获取）：window.location 或location
- 方法：
- reload（）重新加载当前文档
- 属性
- herf 设置或者获取当前界面的路径
-
DOM
-
概念：Document Object Model 文档对象类型
-
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
-
w3c DOM标准被分为三个不同的部分
-
核心DOM–针对任何结构化文档的标准模型
-
Document 文档对象
-
创建（获取）：在html DOM模型中中可以使用window对象获取
- 方法
- 获取元素的方法
- getElementById（）根据元素id来获取对象，di属性值一般唯一
- getElementsByTagName（）根据标签名称来获取对象，返回值是一个数组
- getElementsByClassName（）根据class属性值来获取对象，返回值是一个数组
- getElementsByName（）根据name属性值来获取对象，返回值是一个数组
- 创建其他DOM的对象
- creatAttribute（name）：属性
- creatComment（）：注释
- creatElement（）：元素
- creatTextNode（）：文本节点
-
Element 元素对象
-
获取：通过document来获取和创建
-
方法
-
removeAttribute（）删除属性
-
setAttribute（）设置属性
- 参数：属性名称，属性值
-
-
-
Attribute 属性对象
-
Text 文本对象
-
Comment 注释对象
-
Node 节点对象，其他五个的父对象
- 特点：所有的dom对象都可以被认为是一个节点
- 方法
- appendChild（）向节点的子节点列表的结尾添加新的子节点
- removeChild（）删除并返回当前节点的指定子节点
- replaceChild（） 用新节点替换一个子结点
- 属性
- parentNode（）获取父节点
-
-
HTML DOM --针对HTML文档的标准模型
- 标签体的设置和获取：innerHTML
- 使用html元素对象的属性
- 控制样式
- 使用元素的style属性来设置
- 提前定义好类选择器的样式，通过元素的className属性来设置class的值
-
-
XML DOM --针对XML文档的标准模型
-
-
事件
- 概念：某些组件被执行了某些操作后，出发了某些代码的执行
- 事件：某些操作，如单机，双击，键盘按下，鼠标移动
- 事件源：组件，如按钮，文本输入框等
- 监听器：代码
- 注册监听：将事件，事件源，监听器结合在一起当事件源上发生了某个时间，则触发执行某个监听器代码。
- 常见的事件
- 点击事件
- 单击事件，onclick
- 双击事件，ondbclick
- 焦点事件
- onblur，失去焦点
- 一般用于表单检验
- onfocus，元素获得焦点
- onblur，失去焦点
- 加载事件
- onload，一张页面或者图像完成加载
- 鼠标事件
- onmousedown，鼠标按钮被按下
- 定义方法时，定义一个形参，接收event对象
- evebt对象的button属性可以获取鼠标按钮键被点击。
- onmouseup，鼠标按钮被松开
- onmousemove，鼠标被移动
- onmouseover，鼠标移到某元素之上
- onmouseout，鼠标移开
- onmousedown，鼠标按钮被按下
- 键盘事件
- onkeydown，某个键盘键被按下
- onkeyup，某个键盘按键被松开
- onekeypress，某个键盘按键被按下并松开
- 选择和改变
- onchange ，域的内容被改变
- onselect，文本被选中
- 表单事件
- onsubmit，确认按钮被点击
- 可以阻止表单的提交
- onreset，重置按钮被点击
- onsubmit，确认按钮被点击
- 点击事件
- 概念：某些组件被执行了某些操作后，出发了某些代码的执行
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
