JavaScript

JavaScript

客户端脚本语言 : 运行在客户端浏览器中,每个浏览器都有JavaScrip解析引擎
脚本语言 : 不需要编译,直接可以被浏览器解析执行
功能 : 增强用户和HTML页面的交互过程, 控制HTML元素,让页面有动态效果
JavaScript = ECMAScript(标准) + JavaScript(BOM +DOM)

ECMAScript

客户端脚本语言标准

基本语法

1. 与HTML结合方式
   • 内部JS -> 定义<script>, 标签体内容为js代码
   • 外部JS -> 定义<script>, 通过src属性引入外部js文件
   • 注意:
     1. <script>可以定义在html页面任地方,但定义位置会影响执行顺序
     2. <script>可以在一个页面定义多个
2. 注释
   • 单行 ->//
   • 多行 -> /* */
3. 数据类型
   • 原始数据类型(基本数据类型)
     1. number -> 数字 (整数 / 小数 / NaN)
     2. string -> 字符串 (字符 / 字符串)
     3. boolean -> true / false
     4. null -> 空的占位符
     5. undefind -> 未定义 (如果一个变量没有初始化值,则会默认定义为undefind)
   • 引用数据类型 : 对象
4. 变量
   • var 变量名 [= 初始化值];
5. 运算符
   • 一元运算符
     1. ++ , – , + , -
   • 算数运算符
     1. +, - , * , /
   • 赋值运算符
     1. = , += , -= …
   • 比较运算符
     1. < , > , >= , <= , == , ===(判断类型比较)
     • 类型相同直接比较
     • 类型不同,先进行类型转换
   • 逻辑运算符
     1. && , || , !
   • 三元运算符
     1. ? :
6. 流程控制语句
   • if…else…
   • switch…
   • while…
   • do…while…
   • for…

基本对象

• Function : 函数对象
• Array
• Boolean
• Date
• Math
• Number
• String
• RegExp
• Global

BOM

Browser Object Model - 浏览器对象模型
将浏览器的各个部分组成部分封装对象

1. 组成:
   • Window -> 窗口对象
     1. 弹出框:
        • alter() -> 警告框
        • connfim() -> 确认和取消对话框
        • prompt() -> 提示输入框
   • Navigator -> 浏览器对象
   • Screen -> 屏幕对象
   • History -> 历史记录对象
   • Location -> 地址栏对象

DOM

控制HTML文档内容
获取页面标签(元素)对象 Element -> document.getElementById(“id值”);
W3C DOM 标准分为3个不同部分

1. 核心 DOM -> 针对任何结构化文档的标准模型
   1. Document：文档对象
      • document
        1. 方法
           1. 获取Element对象
              • getElementById() -> 根据id属性获取元素对象
              • getElementsByTagName() -> 根据元素名称获取元素对象们
              • getElementsByClassName() -> 根据Class属性值获取元素对象们
              • getElementsByName() -> 根据name属性获取元素对象们
           2. 创建DOM对象
              • createAttribute(name)
              • createComment()
              • createElement()
              • createTextNode()
        2. 属性
   2. Element： 元素对象
      1. 获取/创建：通过document对象
      2. 方法
         • removeAttribute() -> 删除属性
         • setAttribute() -> 设置属性
   3. Attribute：属性对象
   4. Text：文本对象
   5. Comment：注释对象
   6. Node：节点对象，其他五个对象的父对象
      • 特点：所有DOM对象都可以被认为是一个节点
      1. 方法
         • CRUD dom树
           • appendChild() -> 末尾添加子节点
           • removeChild() -> 删除指定节点
           • replaceChild() -> 用新节点替换子节点
      2. 属性
         • parentNode -> 返回当前对象的父节点
2. XML DOM -> 针对XML文档的标准模型
3. HTML DOM -> 针对HTML文档的标准模型
   1. 标签体的设置和获取：innerHTML
   2. 使用html元素对象的属性
   3. 控制样式
      • 方式1：元素对象.style.属性 = "属性值"
      • 方式2：元素对象.className = "样式名"