JavaScript学习笔记

**

JavaScript

**
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

功能：
用来增强用户和html页面的交互过程，可以用来控制html元素，让页面有一些动态的效果，增强用户体验。

JavaScript=ECMAScript+BOM+DOM

ECMAScript

1.基本语法：
1.与html结合方式
（1）内部js
定义<script>，标签体内容就是js代码
（2）外部js
定义<script>，通过src属性，引入外部js文件

注意：
1.`<script>`可以定义在html页面任何位置，但是定义的位置会影响执行顺序z在前面先执行，在后面后执行。
2`.<script>`可以定义多个。

2.注释
1.单行注释：//
2.多行注释：/* */

3.数据类型
原始数据类型
1.number：数字。整数/小数/NaN
2.string:字符串。字符/字符串 “abc” “a”
3.boolean:true/false
4.null:表示一个对象为空
5.undefined：未定义。如果一个变量没有给初始值，则会默认赋值为undefined
引用数据类型：对象

4.变量
变量：一小块内存存储数据的内存空间
java语言是强类型语言，而javascript是弱类型语言

强类型：在开辟变量存储空间时，定义了空间将来存储的数据类型。只能存储固定类型的数据
弱类型：在开辟变量存储空间时，不定义空间将来存储的数据类型，可以放任意类型数据。
语法：var 变量名=初始化值；
Typeof运算符：获取变量类型

5.运算符
一元运算符：只有一个运算数的运算符
算数运算符
赋值运算符
比较运算符
逻辑运算符
三元运算符：a>b ? 7：2

6.流程控制语句

if...else...
switch:
      在JS中，switch可以接受任意的原始数据类型
while
do...while
for

基本对象

function：函数对象
*function:函数（方法）对象

* 1.创建
*   1. var fun=new function(形式参数列表，方法体)
*   2. function 方法名称（形式参数列表）{
*       方法体
*    }
*   3.var 方法名称=function(形式参数列表){
*       方法体
*    }

• 2.方法
• 3.属性

•  length:代表形参的个数
  

• 4.特点

•  1.方法定义是，形参的类型不用写
  

•  2.方法是一个对象，如果定义名称相同的方法，会覆盖
  

•  3.在JS中，方法的调用只与方法的名称有关，和参数列表无关
  

•  4.在方法什么中有一个影藏的内置对像，arguments，封装所有的实际参数。
  

• 5.调用

• 方法名称（实际参数列表）
  

Array
*Array数组：

* 1.创建
*      1.var arr=new Array(元素队列)
*      2.var arr=new Array(默认长度)
*      3.var arr=[元素列表]；

• 2.方法
• join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
• push() 向数组的末尾添加一个或更多元素，并返回新的长度。
• 3.属性
• length
• 4.特点

•  1.JS中，数组元素类型可变
  

•  2.JS中，数组长度可变。
  

*/

Boolean
Date
/*
*Date:日期对象
*

1.创建
 *      var date=new Date();
 *   2.方法
 *      toLocaleString();返回当前date对象对应的时间本地字符串格式
 *      getTime（）；获取毫秒值，返回当前日期对应时间与1970年1月1日0点之间时间差

*/

Math

document.write(Math.PI+"<br>");
document.write(Math.random()+"<br>");
document.write(Math.round(3.14)+"<br>");
document.write(Math.ceil(3.14)+"<br>");
document.write(Math.floor(3.14)+"<br>");

Number
String
RegExp
正则表达式

1.创建
var reg=new regExp(“正则表达式”)
var reg=/正则表达式/
2.方法
test（参数）：验证指定的字符串是否符合正则定义规范

Global
*global

• 1.特点：全局对象，这个global中封装的方法不需要对象就可以直接调用
• 2.方法：

   encodeURI():url编码
*      decodeURI():url解码
*
*      encodeURIComponent():url编码,编码的字符更多
*      encodeURIComponent():url解码

    `parseInt():将字符串转为数字`
*      注意判断每一个字符是否为数字，知道不是数字为止，将前面数字部分
*  转为number
*  eval():将JS的字符串作为脚本来运行

*/

BOM
功能：控制HTML文档的内容
代码：获取页面标签（元素）对象ELment
document.getElementById（“id的值”）：通过元素的id获取元素对象

操作Element对象
1.修改属性值
（1）明确获取的对象是哪一个，
（2）查看API文档，找其中有哪些属性可以设置。
2.修改标签内容
属性：innerHTML
（1）获取元素对象。
（2）使用innerHTML属性修改标签体内容。

事件简单学习
功能：某些组件被执行了某些操作后，触发某些代码的执行

如何绑定事件
1.直接在html标签上，指定事件的属性（操作），属性值是js代码
1.事件：onclick—单击事件

2.通过js获取元素对象，指定事件属性，设置一个函数。

/*
*window窗口对象

• 1.创建
• 2.方法

     1.与弹出框有关的方法：
 *  alert（）显示带有一短消息和一个确认按钮的警告框
 *  confirm（）显示带有一段消息以及确认按钮和取消按钮的对话框
 *      如果用户点击确定按钮，则方法返回true
 *      如果用户点击取消按钮，返回false
 *  prompt()  显示可提示用户输入的对话框
 *      返回值：获取用户输入的值
 *      2.与开发关闭有关的方法
 *  close()关闭浏览器窗口
 *      谁调用我，我关谁
 *  open（）打开一个新的浏览器窗口

• 3.属性
• 4.方法
• window对象不需要常见可以直接使用window使用。window.方法名（）；
• window引用可以省略。方法名（）

*/

3.location：地址栏对象
1.创建（获取）
（1）window.location
（2）location

2.方法：
reload（）：重新加载当前文档
3.属性：
href 这只或者返回完整对象
4.history：历史记录对象
（1）创建（获取）
1.window.history
2.history
（2）方法

back（）加载history列表中的前一个url
forward（）加载history列表中的下一个url
go（） 加载history列表中某个具体页面

（3）属性
length：获取当前窗口历史列表中的url数量

DOM
概念：document object model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言进行CRUD的动态操作。

什么是 DOM？
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

W3C DOM 标准被分为 3 个不同的部分：
Core DOM - 所有文档类型的标准模型
document:文档对象
element：元素对象
attribute：属性对象
text：文本对象
conmment：注释对象
node：节点对象，其他5个的父对象

重点学习：
核心DOM模型
document:文档对象
1.创建（获取）:在html dom模型中可以使用window对象来获取

（1）window.document
（2）document

2.方法
（1）获取element对象：

getElementById():根据id属性值获取元素对象。id属性值一般唯一
getElementByTagName():根据元素名称获取元素对象，返回值是一个数组
getElementByClassName():根据class属性值获取元素对象，返回值是一个数组
getElementByName():根据name属性值获取元素对象，返回值是一个数组。

（2）创建其他DOM对象：

createAttribute（name）
createComment（）
createElement（）
createTextNode（）

3.属性：
element：元素对象
1.获取/创建：通过document
2.方法：

1.removeAttribute():删除元素
 2.setAttribute（）：设置属性

node：节点对象，其他5个的父对象
方法：

*  CRUD dom树
* appendChild():向节点的子节点列表末尾添加新的子节点
* removeChild():删除（并返回）当前节点的指定子节点
* replaceChild（）：新节点替换一个子节点

HTML DOM - HTML 文档的标准模型

1.标签体的设置和获取：innerHTML
2.使用html元素对象的属性
3.控制元素样式
1.使用元素的style属性来设置
2.提前定义好类选择器样式，通过元素的classname属性来设置class属性值。

事件

对事件作出反应
JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。
为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时
当网页加载后
当图像加载后
当鼠标移至元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户敲击按键时

常见事件

1.单击事件

onclick			：单击事件
ondblclick		：双击事件

2.焦点事件

onblur			：失去焦点
一般用于表单校验
onfocus			：元素获得焦点

3.加载事件

onload：一张纸或者一个页面加载完成

4.鼠标事件

onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。

5.键盘事件

onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。