JavaScript基本语法

JavaScript

JavaScript = ECMAScript + JavaScript自己特有的(BOM+DOM)

ECMAScrpit:客户端脚本语言的标准

基本语法

  1. js引入
    1. 内部js
      • 定义script,内部为js代码
    2. 外部js
      • 定义script,通过src属性引入外部js文件
        注:同一级 直接写文件名
        上一级 ../
        ​上上一级 ../../
  2. 注释
    1. 单行注释 ://注释内容
    2. 多行注释:/* 注释内容 */
  3. 数据类型
    • 原始数据类型:

      1. number:整数/小数/NaN(not a number 一个不是数字的数字)
      2. string:字符串
      3. boolean:true/false
      4. null:一个对象为空的占位符
      5. undefined:未定义,默认值
    • 引用数据类型:对象
  4. 变量
    * 变量:一小块储存数据的内存空间
    * Java语言是强类型语言,而JavaScript是弱类型的语言。
    * 强类型:开辟空间时,定义了空间存储数据的数据类型,只能存储指定数据类型的数据
    * 弱类型:开辟空间时,不定义存储的数据类型,可以存放任意数据类型的数据
    * 语法:var 变量名 = 初始化的值;
  5. 运算符
    1. 一元运算符:只有一个运算数的运算符
      ++,--,+(正号)
    2. 算数运算符
      +,-,*,/,%...
    3. 赋值运算符
      =,+=,-=
    4. 比较运算符
      <,>,<=,>=,==,===(全等于)
      ==:数值大小相等即可,不需要数据类型也一样
      ===:大小相等,数据类型一样
    5. 逻辑运算符
      && ,||,!
    6. 三元运算符
      ?:
  6. 流程控制语句
    1. if...else...
    2. switch
    3. while
    4. do...while
    5. for
  7. JS特殊语法
    每行;可写,可省略
    用var定义为局部变量,不用var则为全局变量

基本对象

  1. Function函数对象
    1. var fun = new Function(形参,方法体) (不常用)
    2. function 方法名(形参){ 方法体 }
    3. var 方法名 = function(形参){ 方法体 }
  2. Array数组对象
    1. 创建数组
    1. var arr = new Array(元素列表)
    2. var arr = new Array(默认长度)
    3. var arr = [元素列表]
    1. 方法
      • join(参数):将数组中的元素按指定分隔符拼接成字符串
      • push(参数):向数组末尾添加一个或多个元素,并返回新的数组长度
    2. 属性
      • length:数组的长度
    3. 特点
      1. JS中,数组元素的类型是可以变的
      2. JS中,数组长度是可变的
  3. Boolean
  4. Date日期对象
    1. 创建
      var date = new Date()
    2. 方法
      • toLocaleString,返回当前date对应的时间本地字符串格式
      • getTime(),获取1970年1月1日零点到现在的毫秒值
  5. Math
    1. 创建
      特点:不用创建直接使用。Math.方法名();
    2. 方法
      random():返回一个0~1之间的随机数 (含0不含1)
      cell():对数进行向上取整
      floor():对数进行向下取整
      round():四舍五入取整
    3. 属性
      PI
  6. Number
  7. String
  8. RegExp正则表达式对象
    • tlgame.net_【官方首页】-天乐正则表达式:定义字符串的组成规则。
      1. 单个字符
        如:[a] [ab] [a-zA-Z0-9_]
        • 特殊符号代表特殊含义的单个字符
          \d:单个数字字符
          \w:[a-zA-Z0-9_]
      2. 量词符号
        " ? ": 表示0次或1次
        " * ": 表示出现0次或多次
        " + ": 出现1次或多次
        {m,n}: 表示m<= X <=n
        m如果缺省:{,n}最多n次 ; n如果缺省:{m,}最少m次
      3. 开始结束符号
        ^: 开始符号
        $: 结束符号
    • 正则对象
      1. 创建
        • var reg = new RegExp("正则表达式")
        • var reg = /^正则表达式&/
      2. 方法
        • test(参数):验证指定的字符串是否符合正则定义的规则
  9. Global
    1. 特点:全局对象,Global中封装的方法不需要对象就可以直接调用
    2. 方法:
      encodeURI(): url 编码
      decodeURI(): url 解码
      encodeURIComponent(): url 编码,编码的字符更多
      decodeURIComponent(): url 解码
      parseInt(): 将字符串转成数字,逐一判断每个字符是否为数字,直到不是数字为止,将前面数字部分转为number
      eval(): 将JavaScript字符串,并把它作为脚本代码来执行
      var code = "alert("123")"; //code本为字符串
      eval(code); //被作为脚本执行,将弹出123

BOM

  1. 概念:Browser Object Model 浏览器对象模型
    • 浏览器的各个组成部分封装成的对象
  2. 组成:
    • window :窗口对象
    • Navigator:浏览器对象
    • Screen:显示器屏幕对象
    • History:历史记录对象
    • Location:地址栏对象
  3. window:窗口对象

     1. 创建
     2. 方法
     * 与弹出窗口有关的方法
             1. alert("Hello") = window.alert("Hello")  显示一个带有一段消息各一个确认按钮的警告框
             2. confim()  显示带有一段消息以及确认按钮和取消按钮的对话框。
             * 如果用户点击确定返回 true
             * 如果用户点击取消返回 false
             3. prompt()  显示可提示用户输入的对话框。
                 * 返回用户输入的值
     * 与打开和关闭有关的方法
         1. close()  关闭浏览器窗口
             * 谁调用 关闭谁
         2. open("网址")  打开一个新的浏览器窗口
             * 返回一个新的window对象 
     * 与定时器有关的方法
             1. setTimeout() 设定定时器
             * 参数两个
                     1. js代码或者方法对象
                     2. 毫秒值
                     * 返回值,唯一标识,用于取消定时器
             2. clearTimeout() 关闭定时器
             3. setInterval() 设定循环定时器
             4. clearInterval() 关闭循环定时器
     3. 属性
             1. 获取其他BOM对象  
                 hiatory、location、Navigator、Screan
             2. 获取DOM对象
                 document
     4. 特点
             * 不需要创建可以直接使用
             * window引用可以省略。
  4. Location地址栏对象
    1. 创建(获取)
      1. window.location
      2. location
    2. 方法
      • reload() 重新加载当前文件(刷新)
    3. 属性
      • href
  5. History历史记录对象
    1. 创建(获取)
      1. window.history
      2. history
    2. 方法

      • back() 加载 history 列表中的前一个URL
      • forward() 加载 history 列表下一个URL
      • go() 加载 history 列表中某个具体页面
    3. 属性
      • length 返回当前窗口历史列表中URL数量

DOM

  1. 概念:Docunent Object Model 文档对象模型
    • 将标记语言文档的各个组成部分,封装成对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
  2. W3S DOM 标准被分为3个不同的部分
    • 核心 DOM - 针对任何结构化文档的标准模型
    1. Document:文档对象
    2. Element:元素对象
    3. Attribute:属性对象
    4. Text:文本对象
    5. Comment:注释对象
    • Node:节点对象,其他5个对象的父对象
    • XML DOM - 针对 XML 文档的标准模型
    • HTML DOM - 针对 HTML 文档的标准模型
  3. 核心 DOM 模型

    tlgame.net_【官方首页】-天乐* Document:文档对象
     1. 创建(获取):在HTML中可以用window对象获取
         1. window.document
         2. document
     2. 属性
     3. 方法
         1. 获取Element对象
                 1. getElementById():根据id获得属性对象,id属性值一般唯一
                 2. getElementsByTagName():根据元素标签名称获取元素对象们。返回值为一个数组
                 3. getElementsByClassName():根据class属性值获取元素对象们。返回值为一个数组
                 4. getElementsByName():根据name属性值获取元素对象们。返回值为一个数组
         2. 创建其他DOM对象
                 * createAttribute(name):创建属性
                 * createComment()
                 * createElement():创建标签
                 * createTextNode():创建节点
    
     * Element:元素对象
     1. 获取/创建:通过document来完成
     2. 方法
         1. removeAttribute():删除属性
         2. setAttribute():设置属性
    
     * Node:节点对象
     1. 特点:所有DOM对象都可以被认为是一个节点
     2. 方法
         * CRUDdom树:
             * appendChild():向节点的子节点列表的结尾添加一个新的子节点
             * removeChild():删除(并返回)当前节点的指定子节点
             * replaceChild():用新的节点替换子节点
     3. 属性
             * parentNode 返回当前节点的父节点
  4. HTML DOM 模型
    1. 标签体的设置和获取:innerHTML
    2. 使用html元素对象的属性
      • 查看API
    3. 控制元素样式
      1. 使用元素的style属性设置
        • div.style.border = "1px solid red";
          font-size --> fontSize
      2. 提前定义好类选择器的样式
        • div.className = "d1";

事件监听机制

  1. 概念:某些组件被执行了某些操作后,触发某些代码的执行。
    1. 事件:某些操作 如:单击事件,双击事件,键盘事件,鼠标事件
    2. 事件源:组件。如:按钮 文本输入框
    3. 监听器:代码
    4. 注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码。
  2. 常见的事件
    • 点击事件
      • onclick:单击事件
      • ondblclick:双击事件
    • 焦点事件
      • onblur:失去焦点
      • onfocus:获得焦点
    • 加载事件
      • onload:加载事件
    • 鼠标事件
      • onmousedown 鼠标被按下
      • onmouseup 鼠标被松开
      • onmousemove 鼠标被移动
      • onmouseover 鼠标移动到元素之上
      • onmouseout 鼠标从元素上移开
    • 键盘事件
      • onkeydown 某个按键被按下
      • onkeyup 某个按键被松开
      • onkeypress 某个按键被按下并松开
    • 选择和改变
      • onchange 域的内容被改变
      • onselect 文本被选中
    • 表单事件
      * onsubmit 确认按钮被点击
      * onreset 重置按钮被点击
posted @ 2020-02-14 23:39  yhking-W  阅读(...)  评论(...编辑  收藏

页面底部区域 foot.htm