Java-JavaWeb-JavaScript

概述
- 基于对象（与Java的面向对象不同）和事件驱动的语言，应用于客户端（浏览器）
- 交互性、安全性（不能访问本地磁盘）、跨平台性
- 弱类型
- 3个组成部分
  - ECMAScript
    - ECMA:欧洲计算机协会
  - BOM
    - 浏览器对象模型
  - DOM
    - 文档对象模型
Js和html的结合方式
- 使用标签<script type="text/javascript">Js代码</script>
- 引入文件<script type="text/javascript" src="1.js"></script>
  - 标签里就不要写Js代码了，不会执行
Js的注释
- 单行：//单行注释
- 多行：/*多行注释*/
Js的数据类型
- 定义变量：
  - var 变量名=值；
- string
- number
  - 数字类型
  - 不区分整数和小数
- boolean
- null
  - 对象引用为空
- undifined
  - 变量未赋值
- typeof(变量名)
  - 可以查看变量的类型
语句
- if
  - 和java中一致
- switch同Java一样，只是Js中支持所有的数据类型
- while(){}同Java一样
- for循环同Java一样，只是变量定义时要使用var
- document.write("xx");
  - 可以写HTML代码：document.write("<br/>")
    - 若需要写标签内的属性的话，需要使用单引号
运算符
- 字符串操作
  - "12"+1 结果是"121"
  - "12"-1 结果是11
- boolean类型的运算
  - true在运算时相当于1，false相当于0
- ===和==的区别
  - ===
    - 比较值和类型
  - ==
    - 只比较值
数组
- 特点
  - 角标从0开始
  - 可以从存放不同的数据类型
  - 长度是可变的
- 定义
  - var a=[1,3,4];
  - var a=new Array(5);
    - 定义一个长度为5的数组
  - var a=new Array(2,5,6);
    - 直接将数组中的元素一起给出
- 数组长度属性
  - arr.length
- 方法
  - concat()
    - 连接2个数组
  - join()
    - 将数组元素放入字符串，按照指定的字符分隔元素
  - push()
    - 向数组末尾添加元素，并且会返回新的数组的长度
    - 参数可以是新的元素，也可以是另一个数组（这种情况会将这个数组当作一个整体添加）
  - pop()
    - 删除并返回最后一个元素
  - reverse()
方法
- 创建方法：
  - 一：function 方法名（参数列表）{方法体}
    - 返回值可有可无
    - 参数列表中不写var，直接写变量名
  - 二：var f =function (参数列表){方法体}
  - 三：使用js的内置对象Function
    - var a =new Function("参数列表","方法体");
- js中不存在重载
  - 会调用最后一个
  - 函数会将参数传给arguments这个数组中！所以可以通过操作arguments的每一个元素类模拟实现重载。
  - 当传入的参数个数超过了函数定义的时候定义的参数数量，这些超出的参数一样会被传入arguments这个数组中。就算定义的时候没有写参数列表，也是如此
局部变量和全局变量
- <script></script>标签内定义的变量是全局变量，在别的<script>标签中也可以访问
- 方法内部定义的，只能在方法内部访问
<script>标签的位置
- 建议放在<body></body>标签的后面，若放在<body>标签之前，是无法获取到<body>中某些标签中的属性值的
String对象
- 定义
  - var str="abc";
- 属性
  - length
- 方法
  - str.bold()\fontcolor()\fontsize()等
  - str.link(url) 将字符串显示为超链接
  - sup()\sub()
  - 与Java相似的一些方法
    - concat()方法，将2个字符串进行连接
    - charAt(index)
    - indexOf()
    - split()
    - replace()
    - substr()
    - substring()
Date对象
- var date=new Date();
- 方法
  - toLocaleString() //Java中也有这个方法
    - 以本地日期格式显示
  - getFullYear()
    - 得到年字段
  - getMonth()
    - 返回0-11月份
  - getDay()
    - 返回一周中的某一天，0-6，星期天是0
  - getDate()
    - 返回月中的某一天，1-31
  - getHours()\getMinutes()\getSeconds()
  - getTime()
    - 返回19700101至今的毫秒数
Math对象
- 都是静态方法，使用类名调用：Math.sin()
- ceil()\floor()\round()
全局函数
- Js中不属于任意一个类的一些方法，这些方法不需要对象去调用，直接使用函数名调用
- eval(str)
  - str表示一行Js代码，这个方法可以执行str这行代码
- encodeURI()\decodeURI()
  - 对字符进行编码、解码
- isNaN()
  - 判断是否不是数字，是数字的话，则返回false
- parseInt()
  - 将字符串转成数字
BOM
- browser object model浏览器对象模型
- navigator对象
  - 用于获取客户机浏览器信息
  - 属性
    - navigator.appName\\浏览器名称
- screen对象
  - 用于获取屏幕信息
  - 属性
    - screen.width
    - screen.height
- location对象
  - location.href
    - 获取、设置URL地址
    - location.href="1.html";
    - 案例：定义一个按钮，当点击时，调转是指定页面
      - <input type="button" value="跳转至。。" onclick="href();"/> \\onclick属性用于定义鼠标点击事件，这里这个事件会触发href()函数的调用
      - function href(){ location.href="hello.html";} \\触发事件会跳转至hello.html
- history对象
  - 请求的URL的历史
  - history.back()
  - history.forward()
- window对象
  - 顶层对象，其中的方法可以直接调用，例如alert()
  - navigator\screen等都是它的子对象
  - 属性
    - opener
      - 获取创建了本窗口的上一个窗口的引用
  - 方法
    - alert()
    - confirm(参数)
      - 提供一个确认\取消的对话框，用户点击确认\取消后会返回true\false
      - 参数：要显示的内容
    - prompt()
      - 输入对话框
    - open()
      - 打开一个新的窗口
    - close()兼容性差
    - setInterval()
      - setInterval("alert('123');",3000)
        
        每隔3秒alert一次123
        
        会返回一个该方法的id，该id可以用来作为clearInterval()的参数
    - setTimeout("js代码",毫秒数)
      - 毫秒数之后，执行代码，只执行一次
    - clearInterval()\clearTimeout()清楚间隔器和计时器
DOM
- 概述
  - document object model 文档对象模型
  - 提供一些对象和方法，对html\xml等文档进行操作
  - DOM将标签，属性，文本等全都封装为对象，这些对象的父对象是node节点对象
  - DOM如何解析HTML文档
    - 根据HTML的层级结构，在内存中分配一个树形结构
    - 树形结构有且只有一个根节点，其他包括子节点/叶子节点
  - DOM包括：document对象/element（标签）对象/属性对象/文本对象/Node节点对象（所有对象的父对象）
  - DHTML
    - 多种技术的结合：html\css\javascript\dom(dom属于javascript)
- document对象
  - 表示整个文档
  - 方法
    - write()
    - getElementById()
      - 根据ID获取某个标签、可以通过这个标签变量设置其属性
    - getElementsByName()
      - 返回一个符合条件的标签的集合
    - getElementsByTagName()
      - 返回的是一个集合
      - 当符合条件的tag只有一个的时候，返回的仍是数组，不过长度是1
      - 当需要获取某一个标签的所有子标签时，推荐使用这个方法，它虽然是document对象的方法，但仍可以使用标签对象去调用
    - createElement("标签名称");
      - 创建一个标签
    - createTextNode("文本内容");
      - 创建文本
    - appendChild()
      - 将某元素添加到另一个元素的子节点上，添加至末尾
- Element对象
  - 通过getElementById()获取到标签对象后，可以：
    - getAttribute()\setAtrribute()方法，访问修改标签的属性
    - removeAttribute()
- Node对象
  - Node节点的3个属性，对于每一个Node（标签、属性、文本）都具有：
    - nodeType
    - nodeName
    - nodeValue
    - 获取Node节点的方法
      - getAttributeNode()
      - 属性：firstChild
  - 子节点
    - 属性：childNodes
      - 某一个节点的子节点们，浏览器的兼容性差
      - 这里指的是标签节点
    - firstChild
    - lastChild
  - 父节点
    - 属性：parentNode
  - 同辈节点
    - nextSibling
    - previousSibling
  - 操作DOM树
    - appedChild()
      - 在末尾添加子节点
      - 特点：类似剪切+粘贴（将插入的节点，会被从原位置删除）
    - insertBefore(newNode, oldNode)
      - 在某一个节点之前插入新的节点
      - 需要父节点调用此方法
      - 不存在insertAfter()方法
    - removeChild()
      - 通过父节点调用
    - replaceChild(newNode, oldNode)
      - 通过父节点调用
    - cloneNode(boolean)
      - 复制节点
      - 节点自身调用
innerHTML属性
- 并非DOM的组成部分，但是多数浏览器都支持
- 获取标签里的文本内容
  - span1.innerHTML
- 也可设置HTML代码
  - div1.innerHTML="<h1>AAA</h1>";
鼠标事件
- onclick
- onchange
- onfocus
  - 得到焦点（比如鼠标点击输入框时，产生事件）
- onblur
  - 失去焦点

Java-JavaWeb-JavaScript

猜你喜欢