JavaWeb之javaScript

JavaScript

JavaScript

js简介

  • js是基于对象和事件驱动语言(脚本)
    • 基于对象，提供了很多对象，可以直接使用
    • 事件驱动，动作触发时，要执行的功能，可以理解为“监听器”
  • js特性
    • 交互性，数据信息的交互
    • 安全性，js本身是不能访问客户端本地磁盘的
    • 跨平台，通过浏览器实现跨平台

JavaScript结构

  • ECMAScript
    • ECMA：欧洲计算机协会
    • script
  • BOM
    • browser object model
    • 浏览器对象模型
  • DOM
    • document object model
    • 文档对象模型

js的使用

    • JavaScript与HTML结合使用
    • 使用方式
      • 使用script标签
      • 导入script文件
    • 如果在script标签中导入js文件，就不能在此标签中写js代码
  • js的原始类型
    • string
      • 字符串
      • var str = "hello"
    • number
      • 数值
      • var shu = 10
      • var xiaoshu = 3.14
    • boolean
      • 布尔
      • var bool = true
    • null
      • 作用在对象身上
      • var date = new Date()
    • undifined
      • 未知的数值
    • 在js中，没有数据类型匹配，在js中定义变量或对象时，统一使用var
    • typeof工具方法，查看当前变量是什么类型的

js语句

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

js运算符

  • 大部分和Java一样 ~（-……-）||~
  • 与Java不同的地方
    • 整数区别：Java整数有取整现象，但是js中不存在(js没有数据类型)
    • 字符串区别：在Java中使用字符串‘+’操作，字符串连接，js一样。但是在使用‘-’运算符时，Java会报错，js：NaN(表示不是一个数字)
    • 布尔区别：在js中true可以理解成一切非零值，false理解成零值，但是在Java中不可以，Java是强类型语言，类型不同不能比较
    • ‘==’和‘===’的区别，在js中‘===’需要判断类型是否相同，类型相同后继续比较数值是否相等，而Java中，根本就没有三个等号啊，秋梨膏

js中的数组

  • Java中的数组 int[] arr = new int[10]
  • js中的数组 var arr=[10,"hello",3.14]        var arr = new Array(3,4,5)
  • 常用方法
    • join(String)：将数组中的每个元素与指定参数相连接，形成一个字符串
    • push()：将指定参数数据添加到数组的尾部
    • pop()：将数组的最后尾部数据弹出
    • reverse()：将数组的数据翻转

js中的函数

  • 在定义函数的时候需要使用关键字
  • function函数名称(参数列表){函数体;返回值;}
  • 参数列表中的每个形参是不需要指定var

js中的String对象

    • js中的字符串与Java中的String类相似
    • bold：设置字符串加粗
    • fontcolor：设置字符串颜色
    • link：设置字符串链接
    • forsize：设置字符串大小
    • sub：设置字符串下角标
    • sup：设置字符串上角标
    • 等等
  • 字符串常用操作方法
    • 大部分和Java相差不大
    • charAt()：查找字符
    • indexOf()：查找索引
    • split()：截取
    • length()：长度
    • concat()：连接
    • replace()：替换

时间

  • Date表示时间
  • 也需要new Date()
  • toLocaleString()转换成本地时间
  • getFullYear()：获取年
  • getMonth()+1：获取月份 -- 默认是0-11
  • getDate()：获取日
  • getHours()：获取时
  • getMinutes()：获取分
  • getSeconds()：获取秒
  • getDay()：获取星期 0-6（0指星期日）
  • getTime()：获取时间戳

js中的全局函数

  • eval(String)：可以将String参数以js的方式进行解析
  • encodeURL(String)：对字符串进行编码
  • decodeURL(String)：对编码进行转换成字符串
  • isNaN()：判断是否为一个数字
  • parelnt()类型转换

js中的BOM

  • 什么是BOM
    • browser object model 浏览器对象模型
  • 常用操作
    • navigator：获取客户端浏览器相关信息
    • screen:获取客户端用于显示的信息，常用的是获取屏幕的分辨率
    • location：控制浏览器的URL地址栏，可以使用href属性设置页面动态地址
    • history：访问浏览器的历史记录(只限于当次使用'后退、前进、刷新')
    • 前置history.back();history.go(-1);(可以理解为前进)， 后置history.forward();history.go(1);(可以理解为后退)
    • window
      • 由与window对象是js核心对象，在访问window对象下的方法时，不需要window调用
      • confirm()：确认框 -- 返回值Boolean参数String
      • alert()：弹窗
      • var url = prompt("提示信息"，"默认值") -- 返回值是获取输入框中的数据
      • open( URL , "保留参数，一般给空" , "(宽，高)" ，"Boolean 也可不给")
      • close()：关闭窗口
      • opener.close()：关闭关联/弹出窗口
      • close方法兼容性比较差
      • 定时器
        • setInterval(Striing，int，第三个用的少，可以不写 ) -- 循环定时器
        • setTime -- 只执行一次

js中的DOM

    • js中的DOM对象主要针对于页面文档
    • 当页面被加载时，浏览器会将页面中的标签，生成节点对象，多个嵌套标签构成"文档树"(DOM树)
    • 整个文档对象称为：document
    • 元素对象：Element(又称为"标签对象")
    • 属性对象(id、class等等)
    • 文本对象
    • 节点对象：Node -- 是所有对象的父类
    • 常用方法
      • wrile() -- 向页面输出数据，在输出数据时，可以输出常量/变量的数据，同时也可以在数据中体现出html标签
      • getElement(标签的id) -- 通过标签id获取标签对象
      • getElementsByName(标签的name属性) -- 根据标签的名称获取标签对象 返回值：标签对象数组
      • getElementsByTagName(标签名称) -- 根据标签的名称获取标签对象 返回值：标签对象数组
    • 节点操作
      • 可以使用DOM对象来对整个文档进行操作
      • 创建节点对象
        • document.createElement("标签名") -- 属性对象
        • document.createTextNode("数据") -- 文本对象
      • 将对象添加
        • 父节点.appendChild(新节点)
      • 操作对象常用方法
        • createElement(标签名称) -- 创建标签对象节点
        • createTextNode(文本数据) -- 创建文本对象节点
      • 元素对象
        • DOM树中，每一个标签所对应的节点对象被称为"元素对象"
        • 常用方法
          • getAttribute("属性对象名称" -- 获得属性对象的值)
          • setAttribute("属性对象名称","值") -- 可以根据属性对象名修改其值
          • removeAttribute("属性对象名称" -- 根据属性对象名称删除属性对象)
      • 获取子标签
        • childNodes() -- 获取整个DOM树下所有的子标签
          • 可以使用此方法获取子节点，但是兼容性不是很好
        • 可以使用getElementsByTagName()方法来实现此功能
    • Node操作
      • 在操作节点时不知道是属于哪种类型的节点时，可以使用Node节点来进行存储
      • Node对象结构
        • nodeName
        • nodeType
        • nodeValue
      • 三种情况
        • 标签节点
          • nodeType -- 对应值：1(代表标签对象)
          • nodeName -- 标签名称(全大写形式存储)
          • nodeValue -- null
        • 属性节点
          • nodeType -- 对应值：2(代表属性对象)
          • nodeName -- 属性名称
          • nodeValue -- 属性值
        • 文本节点
          • nodeType -- 对应值：3(代表文本对象)
          • nodeName -- #text
          • nodeValue --文本内容
      • Node节点操作
        • 在DOM树结构中，可以通过制定的接地那对象获取相应结构
          • 父节点 ：parentNode()
          • 子节点：firstChild()、lastChild()
          • 兄弟节点、同级节点
          • 下一个节点：nextSibing
          • 上一个节点：previousSibing
          • 注意：在ul和li结构中不能加载文本，所以在两个节点中中间提供一个文本节点
          • 添加一个子节点：appendChild()
          • 插入节点：insertBefore(newNode,oldNode)
          • 在指定节点之前，插入一个新节点，参数一新节点，参数二现有节点
          • 移除指定节点：remove()
          • 移除指定的子节点，移除节点时，不能自己移除自己的节点
          • 替换节点：replaceChild(newNode,oldNode)
          • 替换指定的节点，参数一新节点，参数二要被替换的节点
          • 克隆(复制节点)节点：cloneNode(Boolean)
          • 克隆、复制一个节点，参数为Boolean，true表示克隆
          • var clone_ul = ul.cloneNode(true);
        • getAttributeNode() -- 获取属性节点方法
    • 操作文本的方法
      • innerHTML
      • 可以解析HTML
      • innerText
      • 可以解析不能解析HTML
如有问题，请发送邮件至buxiaqingcheng@163.com或者buxiaqingcheng@dingtalk.com
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhenzhunaichabujiatang/p/13730576.html