JS快速入门

js概念

一门客户端脚本语言

• 运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎
  
• 脚本语言：无需编译，直接被浏览器解析执行
  

功能

可以控制HTML元素，让页面有动态效果，增强用户和HTML页面的交互过程

JavaScript发展史

一开始各种客户端脚本语言很乱，ECMA制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式

JavaScript=ECMAScript+JavaScript自己特有的东西（BOM+DOM）

ECMAScript：客户端脚本语言的标准

一、基本语法

与HTML结合方式

1. 内部js
   定义<script>，标签体内容就是js代码
   
2. 外部js
   定义<script>，通过src属性引入外部的js文件
   

注意：

• <script>可以定义在html页面的任何地方。但定义的位置会影响执行顺序
  
• <script>可以定义多个
  

注释

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

数据类型

1. 原始数据类型（基本数据类型）

1. number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）
   
2. string：字符串（js中没有字符的概念）。"aaa" 'a'
   
3. boolean：true/false
   
4. null：一个对象为空的占位符
   
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
   

2. 引用数据类型（对象）
   

变量

变量：一小块存储数据的内存空间

java语言是强类型语言，JavaScript是弱类型语言

强类型：在开辟变量存储空间时，定义了空间将来存储数据的唯一类型。只能存储唯一类型的数据

弱类型：在开辟变量存储空间时，没有定义空间将来的存储数据类型，可以存放任意类型的数据

语法：

var 变量名 = 初始化值；

运算符

1. 一元运算符+（-）正负号在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

• 其他类型转number
  
• string转number：按照字面值转。如果字面值不是数字，则转为NaN（不是数字的数字）
  
• boolean转number：true转为1，false转为0
  

2. 比较运算符

• 类型相同：直接比较（字符串按照字典顺序比较）
  
• 类型不同：先进行类型转换，再比较
  ===：全等于。在比较之前，先判断类型，如果类型不一样，直接返回false
  

3. 逻辑运算符

• &&：与（短路：前面一个能判断出布尔值，后面的就不再判断）
  
• ||：或（短路）
  
• ！：非其他类型转boolean：

1. number：0或NaN为false，其他为true
   
2. string：除了空字符串（“”），其他都是true
   
3. null&undefined：都是false
   
4. 对象：所有对象都为true
   

4. 三元运算符
   表达式？值1：值2
   表达式为true，取值1；为false，则取值2
   
5. 特殊语法

• 语句以；结尾，如果一行只有一条语句，则；可以省略（不建议）
  
• 变量的使用使用var关键字，也可以不适用
  用：定义的变量是局部变量
  不用：定义的变量是全局变量（不建议）
  

流程控制语句

1. switch：
   在js中，switch语句可以接受任意的原始数据类型
   在java中，switch语句可以接受的数据类型：byte int short char，枚举（1.5），string（1.7）

switch (a){

           case1:

               alert("number");

               break;

       }

二、基本对象

Function：函数（方法）对象

1. 创建

1. function 方法名称（形参列表）{方法体}
   
2. var 方法名 = function（形参列表）{方法体}
   

2. 属性
   length：代表参数的个数
   
3. 特点

• 方法定义时，形参的类型不用写，返回值类型也不用写
  
• 方法是一个对象，如果定义名称相同的方法，会覆盖前一个
  
• 在js中，方法的调用只与方法的名称有关，和参数列表无关
  
• 在方法声明中有一个隐藏的内置对象（数组）arguments，封装所有的实参
  

4. 调用
   方法名称（实际参数列表）；
   

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中，数组长度可变（自动扩容）
   

Date：日期对象

1. 创建
   var date = new Date（）；
   
2. 方法
   toLocalString()：返回当前date对象对应的时间本地字符串格式
   getTime()：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差
   

Math：数学对象

1. 创建
   Math对象不用创建，直接使用。Math.方法名
   
2. 方法
   random()：返回0~1之间的随机数。含0不含1
   ceil(x)：向上取整。（ceil：天花板）
   floor(x)：向下取整。（floor：地板）
   round()：四舍五入
   
3. 属性
   PI：圆周率
   

RegExp：正则表达式对象

1. 正则表达式：定义字符串的组成规则。regular expression

1. 单个字符：[ ]
   特殊符号代表特殊含义的单个字符：
   \d：单个数字字符[0-9]。（digital）
   \w：单个单词字符[a-zA-Z0-9_]。（word）
   
2. 量词符号：
   ？：出现0次或1次
   *：出现0次或多次
   +：出现1次或多次
   {m,n}：出现[m,n]次
   m如果缺省：{,n}，最多n次
   n如果缺省：{m,}，最少m次
   例如：\w?表示单个单词出现0次或1次
   
3. 开始结束符号
   ^：开始
   $：结束

varreg1=/^\w{6,12}$/;

varreg2=newRegExp("^\\w{6,12}$");

1. 字符串内用到反斜杠需要用反斜杠来转义。"^\\w{6,12}$"

1. 正则对象

1. 创建

1. var reg = new RegExp("正则表达式")；
   
2. var reg = /正则表达式/；（这个比较多用）
   

2. 方法
   test(参数)：验证指定的字符串是否符合正则定义的规范
   

Global：全局对象

Global中封装的方法不需要对象就可以直接调用。方法名();

1. 方法
   encodeURI()：url编码
   decodeURI()：url解码
   encodeURIComponent()：url编码（对同一个url编码的字符更多，对://也会编码）
   decodeURIComponent()：url解码
   * 若汉字是GBK编码，则1个汉字占2个字节；若汉字是utf-8编码，则1个汉字占3个字节。
   
   parseInt()：将字符串转为数字（比+、-功能更强大）
   * 逐一判断每一个字符是否是数字，直到不是数字为止，将前面的数字部分转为number
   isNaN()：判断一个值是否是NaN
   * NaN六亲不认，连自己都不认。NaN参与的==比较全部为false
   eval()：将JavaScript字符串转为脚本代码来执行
   

BOM

一、概念

Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装为对象

二、组成

Window：窗口对象

1. 创建
   
2. 方法

1. 与弹出框有关的方法
   alert（）：显示带有一段消息和一个确认按钮的警告框
   confirm（）：显示带有一段消息以及确认按钮和取消的对话框
   * 用户点击确定，返回true
   * 用户点击取消，返回false
   prompt（）：显示可提供用户输入的对话框
   * 返回值：获取用户输入的值
   
2. 与打开关闭有关的方法
   close（）：关闭浏览器窗口
   * 谁调用我，我关谁
   open（）：打开一个新的浏览器窗口
   * 返回新的Window对象
   
3. 与定时器有关的方法
   setTimeout()：一次性定时器，在指定的毫秒后执行代码。timeout暂停
   *参数：
   1.js代码或者方法对象
   2.毫秒值
   *返回值：唯一标识id，用于取消定时器
   clearTimeout(id)：根据唯一标识id取消一次性定时器
   setInterval()：循环定时器，按照指定周期（毫秒计）来执行代码。interval间隔（返回值参数同上）
   clearInterval(id)：取消循环定时器

varid=setTimeout("fun();",2000);

       clearTimeout(id);

       functionfun(){

           alert("hhhh")

       }js

1. 属性

1. 获取其他四个BOM对象
   history
   location
   navigator
   screen
   
2. 获取DOM对象
   document

window.document.getElementById()

document.getElementById()

1. 特点

• Window对象不需要创建可以直接使用window使用。window.方法名（）；
  
• window引用可以省略。方法名（）；
  

Location：地址栏对象

1. 创建（获取）

1. window.location
   
2. location
   

2. 方法
   reload()：刷新当前网页
   href()：获取或设置地址栏url

varbtn=document.getElementById("btn");

   //绑定单击事件

   btn.onclick=function (){

       //刷新网页

       location.reload();

       //访问www.baidu.cn

       location.href="http://www.baidu.cn"

   }

History：历史记录对象

1. 创建（获取）

1. window.history
   
2. history
   

2. 方法
   *back()：加载history列表中的前一个url
   *forward()：加载history列表的下一个url
   *go(参数)：加载history列表中的某个具体页面
   参数：
   正数：前进几个历史记录
   负数：后退几个历史记录
   
3. 属性
   length：返回当前窗口历史列表中的url数量
   

Navigator：浏览器对象（基本不用）

Screen：显示器屏幕对象（基本不用）

DOM

一、概念

document object model文档对象模型

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行crud的动态操作

HTML文档被加载进浏览器内存，变成DOM树结构

二、组成

核心 DOM：针对任何结构化文档（标记语言）的标准模型

• Document：文档对象

1. 创建（获取）：在html dom模型中可以使用window对象来获取

1. window.document
   
2. document
   

2. 方法：1.获取Element对象

1. getElementById()：根据id属性值获取元素对象。id属性值一般唯一
   
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
   
3. getElementsByClassName()：根据class属性值获取元素对象们。返回值为数组
   
4. getElementsByName()：根据name属性值获取元素对象们。返回值为数组
   

3. 2.创建其他DOM对象
   createAttribute(name)
   createComment()
   createElement()
   createTextNode()
   
4. 属性
   

• Element：元素对象

1. 获取/创建：通过document来获取和创建
   
2. 方法：

1. removeAttribute()：删除属性
   
2. setAttribute()：设置属性
   

• Attribute：属性对象
  
• Text：文本对象
  
• Comment：注释对象
  
• Node：节点对象。上面5个的父对象

1. 特点：所有DOM对象都可以被认为是一个节点
   
2. 方法

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

3. 属性
   parentNode()：返回节点的父节点
   

HTML DOM：针对HTML文档的标准模型

1. 设置和获取标签体的内容：innerHTML

document.getElementById("div").innerHTML+="<input type='text'>";

//在元素标签体后添加一个文本框

1. 使用html元素对象的属性
   
2. 控制样式

1. 使用style属性来设置
   
2. 提前定义好类选择器的样式，通过元素的className属性来设置class属性值
   

XML DOM：针对xml文档的标准模型

三、事件监听机制

概念

某些组件被执行了某些操作后，触发某些代码的执行

• 事件：某些操作。如：单击，双击，键盘按下，鼠标移动
  
• 事件源：组件。如：按钮 文本输入框
  
• 监听器：代码
  
• 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，就触发执行监听器代码
  

常见事件

1. 点击事件

1. onclick：单击事件
   
2. ondblclick：双击事件
   

2. 焦点事件

1. onblur：失去焦点。blur：模糊
   *一般用于表单内容校验
   
2. onfocus：获得焦点。focus：集中
   

3. 加载事件

1. onload：网页或一副图像完成加载
   

4. 鼠标事件

1. onmousedown：鼠标按键被按下
   *定义方法时，定义一个形参，接收event对象
   *event 对象的button属性可以获取哪个鼠标按键被点击了
   
2. onmouseup：鼠标按键被松开
   
3. onmousemove：鼠标被移动
   
4. onmouseover：鼠标移到某元素之上
   
5. onmouseout：鼠标从某元素移开
   

5. 键盘事件

1. onkeyup：键盘某个键被按下
   
2. onkeydown：键盘某个键被松开
   
3. onkeypress：键盘某个键被按下并松开

document.getElementById("username").onkeydown=function (event){

       //用户填写表单按下回车键自动提交

       if(event.keyCode==13){

           alert("提交表单……");

       }

   }

1. 选择和改变

1. onChange：域的内容被改变
   *可用于下拉列表的改动提示
   
2. onselect：文本被选中
   

2. 表单事件

1. onsubmit：确认按钮被点击
   
2. onreset：充值按钮被点击

//onsubmit可以阻止表单的提交

   document.getElementById("form").onsubmit=function (){

       //校验用户名是否正确

       varflag=false;

       //不返回或者返回true，则提交表单；返回false则阻止提交表单

       returnflag;

   }

1.