JavaScript基础

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

概念：一门客户端脚本语言

  • 运行在客户端浏览器中
  • 不需要编译，直接被浏览器解析执行

功能：增强用户和html的交互过程，可以控制html，使其拥有一些动态效果

ECMAScript：客户端脚本语言标准

  1. 基本语法：

    • 与html结合方式

      • 内部js：

      • 外部js：

      • <script>
    alert("Test")
</script>
<script src="1.js"></script>

    • 注释

      • 单行注释：//
      • 多行注释：/ /

    • 数据类型

      • 原始数据类型：
        1. number：数字
        2. string：字符串
        3. boolean：true/false
        4. null：一个对象为空的占位符
        5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值undefined
      • 引用数据类型：对象

    • 变量

      • Java强类型、JavaScript弱类型
      • var a = 3

    • 运算符

      • 一元运算符：只有一个运算数的运算符
      • 算数运算符：+ - * /
      • 赋值运算符：= += -=
      • 比较运算符：> < >= <= == ===
        • ===:在比较前，先判断类型，如果类型不一致，直接返回false
      • 逻辑运算符：&& || ！
      • 三元运算符：？：
        • var c = a > b ? 1:0;
        • 如果a>b则c=1，否则c=0

    • 流程控制语句

      • if...else...
      • switch
      • while
      • do....while
      • for

    • JS特殊语法：

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

  2. 基本对象

    • Function：函数、方法

      • function 方法名(参数){方法体}
      • var 方法名 = function (形参列表){方法体}
      • 定义名称相同的方法，会覆盖第一个方法
      • length：代表方法形参的个数
      • 定义方法，形参类型不用写
      • JS中方法的调用跟形参个数没有关系

    • Array：数组对象

      • 创建
        • var arr = new Array(元素列表)
        • var arr = new Array(默认长度)
        • var arr = {元素列表}
      • 方法
        • join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
        • push：向数组末尾添加一个变量
      • 属性
      • 特点
        • JS中数组元素的类型是可变的
        • JS中数组长度是可变的

    • Data：日期时间对象

      • 创建：
        • var data = new Data()
      • 方法
        • toLocaleString：获取本地时间
        • getTime()：获取从1970年1月1日起的毫秒值

    • Math：数学类

      • 创建：

        • Math对象不用引用直接使用

      • 方法：

        • random()：生成随机数
        • ceil()：对数进行向上舍入
        • floor()：对数进行向下舍入
        • round()：把数四舍五入为最接近的整数

    • RegExp：正则表达式对象

      • 单个字符：[ ]
        • \d：单个数字字符[0-9]
        • \w：单个单词字符[a-zA-Z0-9_]
      • 量词字符：
        • ?：表示出现0次或1次
        • *：表示出现0次或多次
        • +：出现1次或多次
        • {m,n}：表示m<=数量<=n
          • m如果缺省：{,n}最多n次
          • n如果缺省：{m,}最少m次
      • 正则对象：
        • 创建：
          • var reg = new RegExp("正则表达式")
          • var reg = /正则表达式/;
        • 方法：
          • test(参数)：验证指定的字符串是否符合正则定义的规范

    • Global：

      • 特点：全局对象，这个Global中封装的方法
      • 方法：
        • encodeURI()：url编码
        • decodeURI()：url解码
        • encodeURIComponent()：编码字符更多的url编码
        • decodeURIComponent()：url编码
        • parseInt()：将字符串转化为数字

DOM简单学习：

  1. 功能：控制Html文档的内容
  2. 代码：获取页面标签对象 Element
    • document.getElementById("id值")：通过元素id获取元素对象
    • 操作Element对象：
      • 设置属性值
        • 获取对象
        • 查看API，看那个属性可以设置
      • 修改标签体内容：innerHTML
  3. 事件的简单学习：
    • 功能：某些组件执行了某些动作，触发某些代码的执行
    • 绑定事件：
      • 直接在html标签指定事件的属性，属性值就是JS代码
        • onclick --- 单击事件
      • 通过js获取元素对象，指定事件属性，设置一个函数

BOM：

  1. 概念：将浏览器的各个组成部分封装成对象

  2. 组成：

    • Window：窗口对象

      • 方法：

        1. 与弹出框有关的方法：
          • alert()：带确认的警告框
          • confirm()：带确认和取消的警告框
          • prompt()：提示用户输入的对话框
        2. 与开启/关闭有关的方法
          • open：打开新窗口，返回一个新的windows对象
          • close：关闭当前窗口，谁调用我，我关谁
        3. 与定时器有关的方式
          • setTimeout：在指定的毫秒数后调用函数或表达式
          • clearTimeout：清除定时器
          • setInterval：循环定时器，每隔几秒调用一次方法
          • clearInterval：清除定时器

      • 属性：

        1. 获取其他BOM对象
          • history
          • location
          • Navigator
          • Screen
        2. 获取DOM对象
          • document

      • 特点：

        • 不需要创建直接引用，window.方法()

    • Navigator：浏览器对象

    • Screen：显示器屏幕对象

    • History：历史记录对象

    • Location：地址栏对象

      • 创建：
      • 方法：
        1. reload：重新加载当前文档
        2. href：获取当前网页的URL
      • 属性：

DOM：

  1. 概念：将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记文档进行CRUD的动态操作
  2. W3C DOM标准被分为三个不同的部分
    • 核心DOM：针对任何结构化文档的标准模型
      • Document：文档对象
      • Element：元素对象
      • Attribute：属性对象
      • Text：文本对象
      • Comment：注释对象
      • Node：节点对象，其他5个的父对象
    • XML DOM：针对XML文档的标准模型
    • HTML DOM：针对HTML文档的标准模型
  3. 核心DOM模型：
    • Document：文档对象
      1. 创建：在html dom模型中可以使用Windows对象来获取
        • window.document
        • document
      2. 方法：
        • 获取Element对象
          • getElementsById()：通过id获取元素对象
          • getElementsByTagName()：通过元素名获取元素对象
          • getElementsByClassName()：通过Class属性值获取元素对象
          • getElementsByName()：通过name属性值获取元素对象
        • 创建其他Element对象
          • createAttribute(name)
          • createComment()
          • createElement()
          • createTextNode()
      3. 属性：
    • Element：元素对象
      • 获取：通过document来获取
      • 方法：
        • removeAttribute()：删除属性
        • setAttribute()：设置属性
    • Node：节点对象，其他5个父对象
      • 特点：所有的dom对象都可以被认为是一个节点
      • 方法：
        • CRUD dom树：
          • appendChild()：向节点的子节点列表的结尾添加新的子节点
          • removeChild()：删除并返回当前节点指定的子节点
          • replaceChild()：用新的节点替换一个子节点
      • 属性：
        • parentNode：返回节点的父节点
  4. HTML DOM
    • 标签体的设置和获取：innerHTML
    • 使用html元素对象的属性
    • 控制元素样式
      • 修改样式
        • div1.style.border = "1px solid red"
        • div1.style.fontSize = "20px"
      • 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值

事件

  1. 概念：某些组件被执行了某些操作后，触发某些代码的执行
    • 事件：某些操作，单击、双击、键盘按下了、鼠标移动了
    • 事件源：组件，按钮、文本输入框
    • 监听器：代码
    • 注册监听：将事件、事件源、监听器结合在一起
  2. 常见的事件
    • 点击事件：
      • onclick：单击事件
      • ondblclick：双击事件
    • 焦点事件：
      • onblur：失去焦点
      • onfocus：元素获得焦点
    • 加载事件：
      • onload：一张界面或一幅图像完成加载
    • 鼠标事件：
      • onmousedown：鼠标按钮被按下
      • onmouseup：鼠标按键被松开
      • onmousemove：鼠标被移动
      • onmouseover：鼠标移到某元素之上
      • onmouseout：鼠标从某元素移开
    • 键盘事件：
      • onkeydown：某个键盘按键被按下
      • onkeyup：某个键盘按键被松开
      • onkeypress：某个键盘按键被按下并松开
    • 选中和改变：
      • onselect：文本被选中
      • onchange：域的内容被改变
    • 表单事件：
      • onsubmit：确认按钮被点击
      • onreset：重置按钮被点击
Last modification：July 22nd, 2020 at 10:47 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏