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
如果觉得我的文章对你有用,请随意赞赏