JavaScript总结梳理

简介

• 基于对象
  • 提供好了对象，可以直接拿来使用
• 事件驱动
  • HTML做静态效果，做网站的动态效果
• 用于客户端（浏览器）

特点

• 交互性
  • 信息的动态交互
• 安全性
  • js不能访问本地磁盘的文件
• 跨平台性
  • java通过jvm虚拟机实现跨平台，而js只需要支持js的浏览器就可以运行

与java的不同

• Java是强类型的语言，js是弱类型的语言
  • java中：int i=10;
  • js中：var i =10;var m=“10”;
• Java需要先编译成class字节码文件再执行，JavaScript只需要解析就可以执行

JavaScript组成的三部分

1. ECMAScript
   • ECMA： 欧洲计算机协会
   • 其中包含ECMA组织制定的js语法语句
2. BOM
   • broswer object model：浏览器对象模型（控制地址栏，浏览器的关闭等等）
3. DOM
   • document object model：文档浏览器模型（操作网页中的内容）

数据类型和变量声明

• 定义变量 都是用关键字 var
• string：字符串
  • var str = “abc”
• number：数字类型
  • var m = 123；
• boolean：true和false
  • var flag = true;
• null
  • var date = new Data();
  • 获取对象的引用，null表示对象引用为空，所有对象的引用也是object；
  • typeof(null)返回的是object，这是设计时就这么设计的，可以理解成对象引用的一个占位符。
• undifined
  • 定义一个没有赋值的变量
• typeof(); 查看当前变量的数据类型

js语句

• if判断
• switch语句
• 循环语句
  • for(var i = 0;i <=2;i++){}

js运算符

• 算术运算符
  

• 赋值运算符
  

• js里不区分整数和小数
  var j =123；
  alert(j/10001000);
  //java中得到的结果为0
  //js里不区分整数和小数，123/1000=0.1231000 = 123

• 字符串的相加和相减的操作
  var str = “123”
  //如果相加的时候，做的是字符串链接
  //如果相减，做的是相减的运算
  //如果字符串是字母，相减会提示NaN，表示不是一个数字

• boolean类型也可以操作
  true相当于值为1
  false相当于值为0

• 和=区别

  • 都是做判断
  • ==判断的是值
  • ===判断的是值和类型
  • 注：java里只能int和int相比

js数组

• 定义方式（三种）

1. var arr = [1,2,3]
   var arr = [1,“a”,true]
2. 使用内置对象Array对象
   var arr1 = new Array(5); //定义一个数组，数组长度是5
   arr[0] = “1”;
3. 使用内置对象Array
   var arr = new Array(3,4,5）； //定义一个数组，数组里元素是3 4 5

• Array有属性length，可以用.调用；

js函数

• 三种定义方式，函数的参数列表里不需要写var，直接写参数名称；

1. 使用关键字function
   function 方法名（参数列表） {
   方法体；
   返回值可有可无（根据实际需要决定）；
   }
2. 匿名函数
   var 方法名称 = function (参数列表) {
   方法体和返回值；
   }
3. （了解）动态函数
   使用js中的一个内置对象Function
   var 方法名称 Function（“参数列表”，“方法体和返回值”）

全局变量和局部变量

• 全局变量：在script标签里定义一个变量，这个变量在页面中所有js部分都可以使用。
• 局部变量：在方法内部定义一个标签，只能在方法内部使用。

script标签位置

• 原则上放在当前页面哪里都可以运行，但是有时js需要获取某些值（如input标签内的值），需要考虑语句的先后顺序，所以约定一般放在之后。
• tips：HTML解析是从上到下解析的。

js的String对象

• 创建String对象
  • var str = “abc”;
• 方法与属性
• w3cschool-String方法
  1. 与HTML相关的方法
     • bold(); //加粗
     • fontcolor(“颜色名称”); //更换颜色
     • fontsize();//更换字体大小
     • link(变量名.网址.html);//超链接
     • sub();sup(); //下标与上标
  2. 与java相似的方法
     • concat();//连接字符串
     • charAt();//获取指定位置的字符串
     • indexOf();//返回字符串的位置，字符不存在返回-1
     • split();//切分字符串
     • replace();//替换字符串
     • substr(a,b);//从a位开始，向后截取b个字符
     • substring(a,b);//从a位开始到b位结束，不包含第5位

js的Array对象

• 创建数组（三种）
  1. var arr1 = {1,2,3};
  2. var arr2 = new Array(3);
  3. var arr3 = new Array(1,2,3);
• 属性
  • length
• 方法
  • concat();//连接数组
  • join("-");//根据指定的字符分隔数组。{1,2,3,}–>{1-2-3}
  • push();//向数组末尾添加元素，返回数组的新的长度，这个时候把数组当做一个整体字符串添加进去（即如数组原来长度为3，添加一个数组后，长度是变为4）
  • pop();//删除并返回数组的第一个元素
  • reverse();//颠倒数组中元素的顺序

js的Date对象

• 获取当前时间
  • var date = new Date();//获取当前时间
  • date.toLocaleString();//转化成国人习惯的时间格式
  • getFullYear();//得到当前的年
  • getMonth()+1;//返回值默认是0-11;
  • getDay();//得到当前的星期，0-6,0代表周日
  • getHours();//获取当前的小时
  • getMinutes();//当前的分钟
  • getSeconds();//当前的秒

js的Math对象

• 数学运算

• Math里都是静态方法，可以直接Math.方法();

• 常用的：

  1. ceil();//向上取整
  2. round();//四舍五入
  3. floor();//向下取整
  4. random();//得到随机数（伪随机数，0.0-1.0，如果要0-9，可以random()*10;,然后floor（）接收取整）
  5. max();
  6. min();
  7. power(x,y);//x的y次幂

• 属性

  • PI //圆周率

全局函数

• 不属于任何一个对象，直接写名称使用
• eval(): //执行js代码（如果字符串是一个js代码，使用方法直接执行）
• encodeURI(); //表示对字符进行编码
• decodeURI();//对字符进行编码
• encodeURIComponent() 和 decodeURIComponent() （和上面两功能一样，但是字符编码的范围不一样，具体百度）
• isNaN(); //判断是不是数字，返回true（不是数字）和false（是数字）
• parseInt(); //类型转换，字符串的数字转换为可加的数字

js函数重载

• 和Java不同，js函数重载不存在
• 会自动调用最后一个方法（就近原则）
• 但是js可以通过别的办法模拟重载
  • js函数中的参数会保存在默认的arguments数组里，可以通过判断arguments中的参数个数来ifelse选择函数。

js的bom对象

• 浏览器对象模型
• 有以下对象：
  • navigator（获取浏览器的信息）
    • navigator.appname；（得到浏览器名称）
  • screen（获取屏幕的信息）
    • screen.width;
    • screen.height;
  • location（请求URL地址）
    • href属性
      • 获取到请求的URL地址
        • location.href
      • 设置URL地址
        • location.href = “XXX.html”（一般和js一起使用，作为鼠标点击事件跳转地址）
  • history （请求的URL的历史记录）
    • history.back(); history.go(-1); //访问上一个界面
    • history.next(); history.go(1);//访问下一个界面
  • window（重点）
    • 窗口对象
    • 顶层对象（所有的BOM对象都在window里操作）
    • 方法
      • .alert() 弹出一个框
      • .confirm() 确认框（有返回值true/false）
      • .prompt（“框里显示内容”，“输入框里的默认值”）输入对话框 （很少使用）
      • .open(“打开新窗口的地址”，“窗口特征（宽高度）”)
      • close（）
      • setInterval(“函数”，毫秒数) 在指定的周期内（毫秒基计数）来调用或计算表达式 1s=1000ms
      • setTimeout() 在指定的毫秒数后调用函数

js的DOM对象

• 文档对象模型
• 文档：超文本标记文档：html、xml
• 对象：属性、方法
• 模型：使用了属性和方法操作超文本标记型文档
• 小结：可以使用js里的dom提供对象，使用这些方法的属性和方法，对标记型文档进行操作
• 使用
  • 对标记型文档里所有内容封装成对象，形成树形结构（dom的解析html过程）：
    1. document对象：整个HTML对象
    2. element对象：标签对象
    3. 属性对象
    4. 文本对象
    5. Node节点对象：这这些对象的父对象。

DHTML

• 很多技术的简称：HTML、css、dom（操作HTML-标记型文档）、JavaScript

document对象

• 表示整个的文档
• 常用方法：
  • write(); //向页面输出变量或HTML代码
  • getElementById(); //通过id得到标签，返回的是对象
  • getElementsByName(); //通过标签的name属性得到标签，返回的是一个对象集合（可以理解成数组）
  • getElementByTagName(); //通过标签名称得到对象集合