JavaScript基础知识概述

JavaScript基础知识小结

1.JavaScript的简介

  是基于对象和事件驱动的语言，应用于客户端

2.js的特点

  * 交互性：信息的动态交互
  * 安全性：js不能访问本地磁盘的文件
  * 跨平台性：只要能支持js的浏览器，都可以运行

3.JavaScript与Java的区别

     * 开发公司不同
   * js是基于对象的，java是面向对象的
   * java是强类型的语言，js是弱类型的语言
   * js只需要解析就可以执行，而java需要先编译再执行

4.js的组成

   * ECMAScript：有ECMA组织制定的js的语法，语句等
  * BOM:浏览器对象模型
  * DOM：文档对象模型

5.js与html的结合方式

   * 使用一个标签
     <script type="text/javascript">js代码</script>
  * 使用script标签，引入一个外部的js文件
     <script type="text/javascript" src="js代码路径"></script>
    使用此种方式时，就不要再script标签里面再写js代码了,不会执行

6.js的原始类型和声明变量

   * string:字符串
   * number:数字类型
   * boolean:布尔类型
   * null:表示对象引用为空
   * undifined:定义一个变量，没有赋值
    ** 注意：定义变量，都使用关键字var

    ** typeof(变量名称);查看当前变量的数据类型

    ** 直接向页面输出语句
        document.write();
        可以向页面输出固定值，变量和HTML代码

   **  js语句和java语句类似
   **  字符串的相加和相减操作
         var str="123";
 alert(str+1);
      * 相加的时候，和java一样，做的是字符串连接
      * 相减的时候，做的是相减的运算，如果不是数字，会提示NaN
   ** == 和 ===的区别
       ==：比较的只是值
       ===：比较的是值和类型

7.js数组的定义

   * var arr=[1,"2",true];  定义一个数组，包含三个元素
   * var arr=new Array(5);  定义一个数组，数组的长度是5
   * var arr=new Array(1,2,4);  定义一个数组，包含三个元素
    ** 数组有属性length
    ** 数组的长度是可变的
    ** 数组可以存放不同数据类型的数据

8.js的函数

  * 1.使用关键字function
   ** function 方法名(参数列表){
  方法体;
  返回值可有可无(根据实际需要);
      }
  * 2.匿名函数
   ** function(参数列表){
    方法体;
  返回值可有可无(根据实际需要);
      }
      **<script type="text/javascript">
function add(a,b){
var sum=a+b;
return sum;
}
alert(add(2,6));
</script>
   **<script type="text/javascript">
var add=function(a,b){
var sum=a+b;
alert(sum);
}
add(2,6);
      </script>


  * 3.动态函数(用得少，了解一下):使用到js里的一个内置对象Function
    new Function("参数列表","方法体和返回值");

   <script type="text/javascript">
var add=new Function("a,b","var sum=a+b;return sum;");
alert(add(2,6));
  </script>

9.* js的全局变量和局部变量

   -- 全局变量：在script标签里面定义的变量，这个变量在页面中的js部分都可以使用，即：
                在方法外部使用，在方法内部使用，在另一个script标签中使用
   -- 局部变量：在方法发内部定义一个变量，只能在方法内部使用

  * script标签放在的位置
    建议把script标签放到</body>后面

   IE浏览器自带调试工具，F12调试

10.js的string对象

   * 方法和属性
    ** 属性 length:字符串的长度
    ** 方法
      ***与html相关的方法
         -bold():加粗
        -fontcolor():设置字符串的颜色
-fontsize():设置字体的大小
-link():将字符串显示成超链接
-sub():下标
-sup():上标
      ***与java相似的方法
         -concat():连接字符串
-charAt():返回指定位置的字符
-indexOf():返回字符串位置
-split():切分字符串成数组
-replace():替换字符串
  *传递两个参数：第一个参数是原始字符，第二个参数是替换成的字符
-substr()与substring()：截取字符串
  *substr():两个参数，从第几位开始，向后截取几位
             *substring():两个参数，从第几位开始，到第几位结束， 但不包括结束位

11.js的Array对象

   * var arr=[];  创建一个空数组
   * 属性：length
   * 方法：
    ** concat();  数组的连接
    ** join();   根据指定的字符分割数组
    ** push();   向数组末尾添加元素，并返回数组新的长度
                注意：如果添加的是一个数组，这时候把数组当做一个整体字符串添加进去
    ** pop();  表示删除最后一个元素，并返回删除的那个元素
    ** reverse(); 颠倒数组中的元素的顺序

12.js的Date对象

   * js获取当前时间
        var date=new Date();
document.write(date);//Mon Aug 08 2016 09:58:22 GMT+0800 (中国标准时间)

//转换成习惯的格式
document.write("<br/>");
document.write(date.toLocaleString());
    * 获取当前年的方法
      getFullYear(); 得到当前的年
     ** var date=new Date();
 document.write(date.getFullYear());
   * 获取当前月的方法
     getMonth(); 获取当前的月份
      返回的值是0-11，如果要得到准确的月份，加1
    ** var date=new Date();
       var mon=date.getMonth()+1;
       document.write("month:"+mon);
   * 获取当前星期的方法
      getDay(); 获取当前的星期
        返回的值是0-6，星期日返回的是0
     **var date=new Date();
       document.write("星期:"+date.getDay());
   * 获取当前天的方法
     getDate(); 0-31
     **var date=new Date();
document.write("day:"+date.getDate());
   * 获取当前小时的方法
     getHours(); 0-23
     **var date=new Date();
document.write("hour:"+date.getHours());
   * 获取当前分钟的方法
     getMinutes(); 0-59
     **var date=new Date();
document.write("minute:"+date.getMinutes());
    * 获取当前秒的方法
        getSeconds(); 0-59
     ** var date=new Date();
  document.write("second:"+date.getSeconds());
    * 获取当前毫秒数的方法
         getTime(); 返回的是1970.1.1至今的毫秒数
     ** var date=new Date();
document.write("毫秒数:"+date.getTime());

13.js的Math对象

   *属性：PI               document.write(Math.PI);
   *里面的都是静态方法，使用时可以直接Math.方法名()


    **cell(x); 向上舍入 10.4 → 11
    **floor(x); 向下舍入 10.7 → 10
    **round(x); 四舍五入
    **random(); 返回0-1之间的随机数(伪随机数)
      得到0-9的随机数
      Math.floor(Math.random()*10)
    **pow(x,y);  x的y次幂

14.js的全局函数

   *不属于任何一个对象，直接写名称使用
    **eval(); 执行js代码(如果字符串是一个js代码，使用此方法直接执行)
      ***var str="alert('0123456789')";
          eval(str);
    **encodeURI():对字符进行编码
      decodeURI():对字符进行解码
    **encodeURIComponent()和decodeURIComponent()
    **isNaN():判断当前字符串是否为数字
      特别注意：如果是数字，返回false
            如果不是数字，返回true
    **parseInt():类型转换
      parseFloat():类型转换

15.js函数的重载

   ** 定义：方法名形同，参数不同
   ** js是否存在重载
     —— js里面不存在重载
     —— 但可以通过其他方式模拟重载的效果，通过arguments数组来实现

16.js的bom对象

   *bom：broswer object model 浏览器对象模型
   *有哪些对象
    **navigator: 获取客户机(浏览器)的信息
      -- navigator.appName
    **screen:获取屏幕的信息
       --screen.width 
       --screen.height
    **location:请求url地址
      --href属性
        ***获取请求的url地址
    document.write(location.href);
***设置url地址
  页面上设置“百度”按钮，鼠标点击就会跳转百度页面
  <body>
    <input type="button" value="百度" onclick="hrefClick();"/>
    <script type="text/javascript">
function hrefClick(){
location.href="http://www.baidu.com";
}
    </script>
  </body>

    **history：请求的url的历史记录
      -- history.back();  history.go(-1);到访问的上一个页面  
      -- history.forward(); history.go(1);到访问的下一个页面
    **window：窗口对象
      --顶层对象：所有的bom对象都是在window里面操作的
      --跨页面操作：opener属性：得到创建此窗口的窗口
      --方法
        ***window.alert(); 页面显示一个框，显示内容
  简写为alert();
***confirm(); 确认框
***prompt(); 输入的对话框
  用法：prompt(text,defaultText);
  prompt("请输入一个数：","0");
***open(); 打开一个新的浏览器窗口或查找一个已命名的窗口
  用法：open(URL,name,features,replace); 一般只用前三个参数
  即：open("打开的新窗口的url地址","","窗口的特征，比如说窗口的宽度高度");
  -- 创建一个按钮，点击后打开一个新的窗口

     <body> 

 <input type="button" value="窗口" onclick="openNew()"/> 
 <script type="text/javascript"> 
function openNew(){
open("biaodan.html","","width=600,height=500");
//open("http://www.baidu.com","","width=600,height=500");
}
  </script>
     </body>
***close(); 关闭窗口(浏览器兼容性不好)
---定时器
***setInterval(); 指定的周期(以毫秒计)来调用函数或计算表达式
  -- 用法：setInterval("js代码",毫秒数);  1秒=1000毫秒
  setInterval("alert('定时操作设置成功！');",3000); 
***setTimeout();  在指定是毫秒后调用函数或计算表达式,只执行一次
      setTimeout("js代码",毫秒数); 
***clearInterval(); 取消由setInterval()设置的timeout
 -- 用法：clearInterval(id); id必须是由setInterval()返回的ID值
***clearTimeout();  取消由setTimeout()设置的timeout
  -- 用法：clearTimeout(id); id必须是由setTimeout()返回的ID值

17.js的dom对象

   * dom: document object model: 文档对象模型
   * 解析过程
     根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成
     对象
     --document对象：整个文档
     --element对象：标签对象
     --属性对象
     --文本对象

     --Node节点对象：这个对象是这些对象的父对象
       **如果对象里面找不到想要的方法，这时候到Node对象里面去找

18.DHTML

   动态的HTML，它不是一门语言，是多项技术综合体的简称。
   包括html,csss,dom,javascript

19.document对象

   *常用方法：
     -- getElementById()返回对拥有指定id的第一个对象的引用
        **通过id得到元素(标签)

     -- getElementsByName() 返回带有指定名称的对象集合
        **通过标签的name的属性值得到标签
**返回的是一个对象集合(数组)
     -- getElementsByTagName()  返回带有指定标签名的对象集合
        **getElementsByTagName("标签名称")
     -- write() 向页面输出变量(值),向页面输出html代码
     -- createElement("标签名称")方法：创建标签
     -- createTextNode("文本内容")方法：创建文本

     appendChild()方法

20.Elememt对象

   *操纵Elememt对象的属性(首先要获取到element，使用document里面相应的方法获取)
    -- 获取属性里面的值：getAttribute(name)方法
    -- 设置属性的值：setAttribute(name,value)方法
                 注意：value的值无法删除
    -- 删除属性：removeAttribute(name)方法


   *在Elememt对象中查找Elememt对象(获取标签下的子标签)
     --使用Node对象中的属性childNodes,但是此属性的兼容性很差
     --在Elememt对象的范围内，可以用来查找其他节点的唯一有效方法就是
       getElementsByTagName()方法，而该方法返回的是一个集合


       ctrl+F5 无缓存刷新(IE浏览器)

21.Node对象属性

   -- nodeName
      *获取属性：getAttributeNode()方法
   -- nodeType
   -- nodeValue


   --使用dom解析html时，会将html里面的标签，属性和文本都封装成对象


   --                nodeType     nodeName      nodeValue
      标签节点       1         大写的标签名称     null
      属性节点       2             属性名称           属性的值
      文本节点       3                #text               文本内容




    - 父节点，子节点和同辈节点
    -- 父节点：parentNode
             * parentNode属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点
         * document节点没有父节点            
    -- 子节点：
            * childNodes:获取指定节点的所有子节点的集合
      * firstChild:获取指定节点的第一个子节点
        * lastChild: 获取指定节点的最后一个子节点
    -- 同辈节点：
            * nextSibling:返回个给定节点的下一个兄弟节点
        * previousSibling:返回一个给定节点的上一个兄弟节点
   

22.操作DOM节点树

   *插入节点
         -- appendChild()方法:
                   **添加子节点到末尾
     **有剪切粘贴的效果(特点之一)
-- insertBefore(newNode,oldNode)方法
      **插入一个新节点，节点不存在，创建
        1.创建标签
2.创建文本
3.把文本添加到标签中
注意：没有insertAfter()方法
    *删除节点
         -- removeChild()方法：通过父节点删除，不能自己删除自己
    *替换节点
         -- replaceChild(newNode,oldNode)方法：
             通过父节点替换，不能自己替换自己
    *复制节点：cloneNode(boolean)方法，其中，参数boolean是判断是否复制子节点


   移动节点：由以下三种方法组合完成
        -- 查找节点：
          * getElementById()：通过节点的id属性，查找对应节点
 * getElementsByName()：通过节点的name属性，查找对应节点
 * getElementsByTagName()：通过节点名称，查找对应节点
-- 插入节点：
          * appendChild()方法                   
          * insertBefore(newNode,oldNode)方法
-- 替换节点：replaceChild(newNode,oldNode)方法

23.innerHTML属性

   *浏览器几乎都支持该属性，但不是DOM标准的组成部分
   *innerHTML属性可以用来读，写某给定元素里的HTML内容
   *innerHTML属性多与div或span标签配合使用

   作用：1.获取文本内容
         2.向标签里面设置内容(可以是html代码)

24.表单提交方式

   *使用submit提交
   <form>
   <input type="submit" value="提交"/>
   </form>
    
   *使用button提交表单
   <form id="fm">
      <input type="button" onclick="tijiao();"/>
    </form>
    <script type="text/javascript">
function tijiao(){
var fm=document.getElementById("fm");
fm.action="xxx.html";
fm.submit();
}
    </script>
   *使用超链接提交
    <a href="xxx.html?username=abc">提交</a>

   *鼠标事件
    onclick:鼠标点击
    onchange:改变内容(一般和select一起使用)

    onfocus:得到焦点
    onblur:失去焦点