JS

• 一.概述

  • 1.简介
    • 基于对象和事件驱动的语言,应用于客户端
    • 基于对象--提供好了很多对象，可以直接拿过来使用
    • 事件驱动--html做网站静态效果，javascript动态效果
    • 客户端--专门指的是浏览器
  • 2.特点
    • 交互性--信息的动态交互
    • 安全性--js不能访问本地磁盘的文件
    • 跨平台性--只有能够支持js的浏览器，都可以运行
  • 3.组成
    • ECMAScript--由ECMA组织制定的js的语法、语句.....
    • BOM--浏览器对象模型
    • DOM--文档对象模型
  • 4.Java和JavaScript
    • java是sun公司，现在oracle；js是网景公司
    • JavaScript是基于对象的，java是面向对象
    • java是强类型的语言，js是弱类型的语言
      比如java里面 int i = "10";js里面  var i = 10; var m = "10";
    • JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行

• 二.和html的结合方式

  • 1.使用标签
    <script type="text/javascript">  js代码  </script>
  • 2.使用标签并引用外部的js文件
    <script type="text/javascript" src="1.js"></script>** 使用第二种方式时候，就不要在script标签里面写js代码了，不会执行。​

• 三.原始类型和声明类型

  • 原始类型 五个
    • number
    • string
    • boolean
    • null
      null表示对象引用为空 (所有对象的引用是object)
    • undefined
      定义了一个变量，但没有赋值
  • 声明类型
    • 都使用关键字 var
  • 基本数据类型
    • byte short int long float double char boolean

• 四.语句

  • 判断
    • if
    • switch
  • 循环
    • for
    • while
    • do while

• 五.运算符

  • 1.js里面不区分整数和小数
    var j = 123;alert(j/1000*1000);   //  j/1000*1000    在java里面得到结果是 0  // 在js里面不区分整数和小数，123/1000=0.123 * 1000 = 123
  • 2.字符串的相加和相减
    * //字符串的操作var str = "456";//alert(str+1);   //在java里面操作的结果是 4561 ，在js里面还是 4561alert(str-1);    //相减时候，执行减法的运算* 提示NaN:表示不是一个数字
    • 相加，做字符串连接
    • 相减做减运算
  • 3.boolean类型也可以操作
    true相当于值为1；false相当于值为0​
  • 4.==和===的区别
    ==只比较值，===比较值和类型

• 六.数组

  • 1.定义方式 3种
    • （1）直接赋值
      var arr = [1,"4",true]; ​var arr = [1,2,3];
    • （2）使用有长度的内置对象 Array
      var arr1 = new Array(5);  //定义一个数组，数组的长度是5arr1[0] = "1";
    • （3）使用有元素的内置对象 Array
      var arr2 = new Array(3,4,5); //定义一个数组，数组里面的元素是3 4 5 
  • 2.长度 length
  • 3.可以存放不同数据类型的数据

• 七.函数

  • 1.定义方式 3种
    • （1）使用关键词 function
      function add2(a,b,c) { var sum1 = a+b+c; return sum1;}alert(add2(3,4,5));
    • （2）匿名函数
      var add3 = function(m,n) { alert(m+n);}//调用方法add3(5,6);
    • （3）动态函数--使用到js里面的一个内置对象 Function
      var add = new Function("参数列表","方法体和返回值");
  • 2.全局函数
    • eval() 执行js代码（如果字符串是一个js代码，使用方法直接执行）
      var str = "alert('1234');"; //alert(str);eval(str);
    • encodeURI()/decodeURI() 对字符进行编码/解码
      encodeURIComponent() 和 decodeURIComponent()
    • isNaN() 判断当前字符串是否是数字
    • parseInt()：类型转换为int
  • 3.重载
    方法名相同，参数列表不同
    • js里面不存在重载，但可以通过aruguments数组来实现重载的效果

• 八.全局变量和局部变量

  • 全局变量
    在script标签里面定义一个变量，这个变量在页面中js部分都可以使用在方法外部使用，在方法内部使用，在另外一个script标签使用
  • 局部变量
    在方法内部定义一个变量，只能在方法内部使用如果在方法的外部调用这个变量，提示出错

• 九.script标签放在的位置

  • 建议把script标签放到 </body>后面
    如果现在有这样一个需求： 在js里面需要获取到input里面的值，如果把script标签放到head里面 会出现问题。 html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input里面的值， 因为页面还没有解析到input那一行，肯定取不到。

• 十.对象

  • 1.String对象

    • 创建对象
      • var str = "abc"
    • 方法
      • 与html相关的方法
        • bold()：加粗
        • fontcolor(): 设置字符串的颜色
        • fontsize(): 设置字体的大小
        • link(): 将字符串显示成超链接
        • sub() sup(): 下标和上标
      • 与java相似的方法
        • concat(): 连接字符串
        • charAt():返回指定指定位置的字符串
        • indexOf()： 返回字符串位置
        • split()：切分字符串，成数组
        • replace() ： 替换字符串
        • substr()和substring()
    • 属性
      • length：字符串的长度

  • 2.Array对象

    • 创建对象（3种）
      var arr1 = [1,2,3];var arr2 = new Array(3); //长度是3var arr3 = new Array(1,2,3); //数组中的元素是1 2 3var arr = [];  //创建一个空数组
    • 方法
      • concat方法： 数组的连接
      • join()：根据指定的字符分割数组
      • push():向数组末尾添加元素，返回数组的新的长度
      • pop()：表示 删除最后一个元素，返回删除的那个元素
      • reverse():颠倒数组中的元素的顺序
    • 属性
      • length：查看数组的长度

  • 3.Date对象

    • 获取当前时间 new Date()
      js里面获取当前时间var date = new Date();//获取当前时间var date = new Date();document.write(date);  // Fri Apr 17 10:47:46 UTC+0800 2015 //转换成习惯的格式document.write("<hr/>");document.write(date.toLocaleString());​在java里面获取当前时间 Date date = new Date();
    • 获取当前的年 getFullYear()
    • 获取当前月 getMonth()
    • 获取当前星期 getDay()
    • 获取当前日 getDate()
    • 获取当前的小时 getHours()
    • 获取当前的分钟 getMinutes()
    • 获取当前的秒 getSeconds()
    • 获取当前的毫秒 getTime()

  • 4.Math对象

    • ceil(x): 向上舍入
    • floor(x)：向下舍入
    • round(x)：四舍五入
    • random()：得到随机数（伪随机数）

  • 5.BOM对象--浏览器对象模型

    • （1）navigator 获取客户机的信息（浏览器的信息）
      • navigator.appName
        document.write(navigator.appName);
    • （2）screen 获取屏幕的信息
      • screen.width
        document.write(screen.height);
      • screen.height
    • （3）location 请求url地址
      • location.href
        • 获取地址
          document.write(location.href)
        • 设置地址
          location.href = "hello.html"
    • （4）history 请求的url的历史记录
      • 到访问的上一个页面
        • history.back()
        • history.go(-1)
      • 到访问的下一个页面
        • history.forward()
        • history.go(1)
    • （5）window  窗口对象
      • 操作窗口
        • window.alert() 页面弹出一个文字框
        • window.confirm() 页面弹出一个确认框
        • window.prompt(） 页面弹出一个输入框
        • window.open() 页面弹出一个新窗口
        • window.close() 关闭窗口(浏览器兼容性比较差)
      • 做定时器
        • setInterval("js代码",毫秒数) 每多久执行一次
          表示每三秒，执行一次alert方法window.setInterval("alert('123');",3000)
        • setTimeout("js代码",毫秒数) 多久开始执行
          表示四秒之后执行js代码，只会执行一次 window.setTimeout("alert('abc');",4000)
        • clearInterval() 清除定时器
        • clearTimeout() 清除定时器
      • 属性 opener，获取创建当前窗口的窗口

  • 6.DOM对象--文档对象模型

    • （1）概述
      • 可以使用js里面的dom里面提供的对象，通过这些对象的属性和方法，对标记型文档进行操作
        • 文档--指超文本文档，html、xml
        • 对象--提供了属性和方法
        • 模型--使用属性和方法操作超文本标记型文档
      • 需要先解析标记型文档，然后把标记型文档里面的所有内容封装成对象​
        解析过程--根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象
        • document对象--整个文档
        • element对象--标签对象
        • 属性对象
        • 文本对象
        • Node节点对象--这个对象是这些对象的父对象
          如果在对象里面找不到想要的方法，这个时候到Node对象里面去找
      • 其他
        • DOM模型有三种
          • DOM level 1: 将html文档封装成对象
          • DOM level 2: 在level 1的基础上添加新的功能
            例如，对于事件和css样式的支持​
          • DOM level 3: 支持xml 1.0的一些新特性
        • DHTML
          • html 封装数据
          • css 使用属性和属性值设置样式
          • dom 操作html文档（标记型文档）
          • javascript 专门指的是js的语法语句（ECMAScript）
    • （2）document对象--表示整个的文档
      *** 想要获取标签下面的子标签 ** 使用属性 childNodes，但是这个属性兼容性很差 ** 获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法 - var ul11 = document.getElementById("ulid1"); //获取ul下面的子标签 //var lis = ul11.childNodes; //alert(lis.length); var lis = ul11.getElementsByTagName("li"); alert(lis.length);
      • 得到元素
        • document.getElementById() 通过id得到元素
        • document.getElementsByName() 通过name属性值得到标签,返回的是一个集合/数组
        • getElementsByTagName() 通过标签名称得到元素
      • 创建标签/文本
        • document.write() 向页面输出变量值/html代码
        • document.createElement() 创建标签
        • document.createTextNode() 创建文本
        • document.appendChild方法 在末尾添加，剪切黏贴
        • document.insertBefore(newNode,oldNode) 在某个节点之前插入
        • cloneNode(boolean) 复制节点
      • 删除
        • removeChild方法 删除节点
      • 替换
        • replaceChild(newNode,oldNode)方法: 替换节点
      • 属性
        • 变量.getAttribute() 获取属性的值
        • 变量.setAttribute() 设置属性的值
        • 变量.removeAttribute() 去除属性的值
    • （3）Node对象
      • 标签节点对应的值
        • nodeType： 1
        • nodeName： 大写标签名称  比如SPAN
        • nodeValue: null
      • 属性节点对应的值
        • nodeType： 2
        • nodeName： 属性名称
        • nodeValue: 属性的值
      • 文本节点对应的值
        • nodeType： 3
        • nodeName： #text
        • nodeValue: 文本内容
      • 父节点 parentNode
      • 子节点
        • childNodes：得到所有子节点，但是兼容性很差
        • firstChild
        • lastChild
      • 同辈节点
        • nextSibling:
        • previousSibling
    • （4）innerHTML属性
      这个属性不是dom的组成部分，但是大多数浏览器都支持的属性
      • 第一个作用：获取文本内容
      • 第二个作用：向标签里面设置内容（可以是html代码）