JavaScript

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

1.基本语法

1. 与html结合方式
   1. 内部js：定义< script>js代码< script/>
   2. 外部js：定义< script src属性引入外部js文件>js代码< script/>
   • 注意：< script>可以定义在html页面的任何地方，但是定义的位置会影响执行的顺序。< script>标签可以定义多个。
2. 注释
   • 和java中注释规则一样。
3. 数据类型
   1. 原始数据类型：
      1. number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）
      2. string：字符串
      3. boolean：true/false
      4. null：空
      5. undefined：未定义。如果一个对象没有给初始化值，则会被默认赋值为undefined
   2. 引用数据类型：对象
4. 变量
   • Java是强类型语言，而JavaScript是弱类型语言。
     • 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型，只能存储固定的数据类型。
     • 弱类型：在开辟变量存储空间时，不定义空间将来存储的数据的数据类型，可以存放任意的数据类型。
   • 语法：var 变量名=变量值；
5. 运算符
   • 一元运算符：只有一个运算数的运算符
     • ++，–，+（正号），-（负号），等
     • 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换。
       • 其他类型转number：
         • string转number，按照字面值转换，如果字面值不是数字，则转为NaN（不是数字的数字）
         • boolean转number，true转为1，false转为0
         • 其他两种类型转为NaN
   • 算数运算符：数学运算
     • +，-，*，/，%等
   • 赋值运算符
     • =，+=，-=等
   • 比较运算符
     • <，>，>=，<=，==，===（全等于）
     • 比较方式：
       1. 类型相同：直接比较。
       2. 类型不同：先进行类型转换再进行比较。
     • ===（全等于）：在比较之前，先判断类型，如果类型不一样，则直接返回false。
   • 逻辑运算符
     • &&，||，！
     • 其他类型转为boolean类型：
       • number：0或NaN为false，其他都是true
       • string：除了空字符串（“”），其他都是true
       • null与undefined：都是false
       • 对象：所有对象都为true
   • 三元运算符
     • ?:表达式
6. 流程控制语句
   • if…else…
   • switch
     • 在JS中，switch可以接收任意原始数据类型
   • while
   • do…while
   • for

2.基本对象

• Function：函数对象
  1. 创建
     1. var fun = new Function(形参列表，方法体)
     2. function 方法名称(形参列表){方法体}
     3. var 方法名 = function(形参列表){方法体}
  2. 方法
  3. 属性
     • length：代表形参的个数
  4. 特点
     1. 方法定义时，形参的类型可以不用写，返回值类型也bu’xie
     2. 方法是一个对象，如果定义一个名称相同的方法，会覆盖之前的方法
     3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
     4. 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数
  5. 调用：
     • 方法名称(参数列表)；
• 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
  1. 创建
     1. var date = new Date()；
  2. 方法
     • toLocalString()：返回本地时间字符串格式
     • getTime()：获取毫秒值，返回当前日期对象描述的时间到970年1月1日0点的差
  3. 属性
  4. 特点
• Math
  1. 创建
     • 不用创建，直接使用
  2. 方法
     • random()：返回0到1之间的随机数，包含0不包含1
     • cell(x)：向上取整
     • floor(x)：向下取整
     • round(x)：四舍五入
  3. 属性
     • PI：圆周率
  4. 特点
• Number
• String
• RegExp：正则表达式对象
  • 正则表达式：定义字符串的组成规则
    1. 单个字符：[]
    • 如：[a] [ab] [a-zA-Z0-9_]
    • 特殊符号代表特殊含义的单个字符：
      • \d：单个数字字符 [0-9]
      • \w：单个单词字符 [a-zA-Z0-9_]
    2. 量词符号：
       • ?：表示出现0次或1次
       • *：表示出现0次或多次
       • +：表示出现1次或多次
       • {m,n}：表示出现次数在m与n之中，包括m和n
         • {m,}：至少出现m次
         • {,n}：至多出现n次
    3. 开始结束符号：
       • ^：开始
       • $：结束
  • 正则对象
    1. 创建
       • var reg = new RegExp("正则表达式")；
         • 注意：正则表达式中的\应该写两个，因为在双引号中会被转义
       • var reg = /正则表达式/；
    2. 方法
       • test(参数)：验证指定的字符串是否符合正则表达式
• Global
  1. 特点：全局对象，这个Global对象中封装的方法可以不需要对象就直接调用。 方法名();
  2. 方法：
     • encodeURI()：url编码
     • decodeURI()：url解码
     • encodeURIComponent()：url编码，会进行编码的字符更多
     • decodeURIComponent()：url解码
     • parseInt()：将字符串转为数字
       • 逐一判断每个字符是不是是否是数字，直到不是数字为止，将前变数字部分转换为number
     • isNaN()：判断一个字符是不是NaN
     • eval()：将JavaScript字符串，转成脚本来执行

3.BOM对象

• 概念：Browser object Model 浏览器对象模型

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

• 组成：

  1. Window：窗口对象
     • 创建
     • 方法：
       1. 与弹出框有关的方法
          • alert()：显示带有一段消息和一个确认按钮的警告框。
          • confirm()：显示带有一段信息以及确认按钮和取消按钮的对话框。
            • 用户点击确认按钮，则返回true
            • 用户点击取消按钮，则返回false
          • prompt()：显示可提示用户输入的对话框。
            • 返回值。获取用户输入的值。
       2. 与打开关闭有关的方法：
          • open()：打开一个新的浏览器窗口
          • close()：关闭浏览器窗口
       3. 与定时器有关的方法
          • setTimeout()：在指定的毫秒数后调用函数或计算表达式。
            • 参数：
              • 参数1：js代码或者方法对象
              • 参数2：毫秒值
            • 返回值：唯一标识
          • clearTimeout()：取消由setTimeout()方法设置的timeout。
          • setInterval()：按照指定的周期（以毫秒计）来调用函数或表达式。
            • 参数：
              • 参数1：js代码或者方法对象
              • 参数2：毫秒值
            • 返回值：唯一标识
          • clearInterval()：取消seItnterval()设置的timeout。
     • 属性
       • 获取其他BOM对象：
         • history
         • location
         • Navigator
         • Screen
       • 获取DOM对象
         • document
     • 特点：
       1. 不需要创建，可以直接使用window使用。window.方法名()；
       2. window引用可以省略。方法名()；
  2. Navigator：浏览器对象
  3. Screen：显示器屏幕对象
  4. History：历史记录对象
     • 创建(获取)
       1. window.history
       2. history
     • 方法
       • back() 加载history列表中的前一个URL
       • forward() 加载history列表中的下一个URL
       • go() 加载history列表中的某个具体页面
         • 参数：
           • 正数：前进几个历史记录
           • 负数：后退几个历史记录
     • 属性
       • length：返回当前窗口历史记录列表中的URL数量
  5. Location：地址栏对象
     1. 创建(获取)
        • window.location
        • location
     2. 方法
        • reload() 重新加载当前文档。刷新
     3. 属性
        • href 设置或返回完整的URL

4.DOM对象

• 概念：Document Object Model 文档对象模型

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

• 功能：控制html文档的内容

• W3C DOM标准被分为3个不同的部分

  • 核心DOM：针对任何结构化文档的标准模型
    • Document对象：文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
    • Node：节点对象，其他五个的父对象
  • XML DOM：针对XML文档的标准模型
  • HTML DOM：针对HTML文档的标准模型

• 核心DOM模型：

  • Document对象：文档对象
    1. 创建(获取)：在htnl模型中可以使用window对象来获取
       1. window.document
       2. document
    2. 方法：
       • 获取Element对象：
         • getElementById() 根据id属性值获取元素对象。
         • getElementsByTagName() 根据元素名称获取元素对象们，返回值是一个数组
         • getElementsByClassName() 根据class的属性值来获取元素对象们
         • getElementsByName() 根据Name属性值获取元素对象们
       • 创建其他DOM对象：
         • createAttribute(Name)
         • createComment()
         • createElement()
         • createTextNode()
    3. 属性：
       • parentNode：获取父节点
  • Element：元素对象
    1. 获取：通过Document对象来获取和创建
    2. 方法：
       • removeAttribute()：删除属性
       • setAttribute()：设置属性
  • Node：节点对象，其他五个的父对象
    • 特点：所有DOM对象都可以被认为是一个节点
    • 方法：
      • COUR DOM树：
        • appendChild()：向节点的子节点列表的结尾添加新的子节点。
        • removeChild()：删除(并返回)当前节点的指定子节点。
        • replaceChild()：用新的节点替换一个子节点
    • 属性：

• HTML DOM

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

2. 使用html元素对象的属性：查询API文档

3. 控制元素样式：

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

• 操作Element对象

  1. 修改属性值
     1. 明确获取的对象是哪一个？
     2. 查看API文档，看其中有哪些属性值可以设置
  2. 修改标签体内容
     • 属性：innerHTML

• 事件简单学习

  • 功能：某些组件被执行了某些操作后触发某些代码的执行
  • 如何绑定事件：
    1. 直接在html标签上，指定事件的属性，属性值就是js代码
    2. 通过js获取元素对象，指定事件属性

• 事件

  • 常见的事件：
    1. 点击事件：
       1. onclick：当用户点击某个对象时调用的事件句柄。
       2. ondblclick：双击事件
    2. 焦点事件：
       1. onblur：失去焦点
          • 可以用于表单验证
       2. onfocus：元素获得焦点
    3. 加载事件：
       1. onload：一张页面或一张图片完成加载
    4. 鼠标事件：
       1. onmousedown：鼠标按钮被按下
          • 定义方法时，定义一个形参，接受event对象
          • event对象的button属性可以获取哪个鼠标按钮键被点击了
       2. onmouseup：鼠标按键被松开
       3. onmousemove：鼠标被移动
       4. onmouseover：鼠标移到某元素之上
       5. onmouseout：鼠标从某元素移开
    5. 键盘事件：
       1. onkeydown：键盘某个按键被按下
       2. onkeyup：键盘某个按键被松开
       3. onkeypress：键盘按下并松开
    6. 选中和改变：
       1. onchange：域的内容被改变
       2. onselect：文本被选中
    7. 表单事件：
       1. onsubmit：确认按钮被点击
          • 可以阻止表单的提交，方法返回true则提交，返回false则不提交
       2. onreset：重置按钮被点击