JavaScript

介绍

JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。

嵌入页面方式

• 行间事件（主要用于事件）

  <input type="button" name="" onclick="alert('ok！');">

• 超链接href属性中（格式有要求:javascript:;）

  <a href="javascript:alert( 'ok!');">点击</a>

• 页面script标签嵌入

  <script type="text/javascript">        
      alert('ok');
  </script>

• 外部引入

  <script type="text/javascript" src="js/index.js"></script>

注释

• 单行注释  
  • //单行注释内容
• 多行注释  
  • /*多行注释内容*/

 

入门指令

• 控制浏览器弹窗
• 向页面输出内容
• 向控制台输出内容

  <script type="text/javascript">
      /*控制浏览器弹窗*/
      alert('浏览器弹窗');
  
      /*让计算机在页面中输出内容*/
      document.write('页面输出内容');
  
      /*向控制台输出内容*/
      console.log('控制台输出内容');
  </script>

   

变量

• 定义变量需要使用关键字 'var'，同时定义多个变量可以公用一个'var'，变量间用逗号','隔开
• 命名：由字母、数字、下划线（_）或者美元符号（$）组成，数字不能开头，区分大小写
• 类型
  • 基本类型：number、string、boolean、undefined、null
  • 复合类型：object
  • 注意：
    • number类型包含NaN和Infinity
• undefined和null的区别：
  • undefined（未定义）：声明了变量，但是未给该变量赋值
  • null（空值）：用来表示一个为空的对象，使用typeof检查时，会返回object

类型转换

• 转String

  • 方法一：toString()方法

    • 调用被转换数据类型的toString()方法
    • 该方法不会影响原变量的值，会将转换后的结果返回
    • null和undefined没有toString()方法，调用会报错

  • 方法二：String()函数

    • 使用String()函数强制转换时，null和undefined会直接返回'null'和'undefined'
    • 其他数据类型实际调用了内部的toString()方法

• 转Number

  • 方法一：Number()函数

    • string类型
      • 纯数字字符串，则返回数字
      • 包含非数字部分，则返回NaN
      • 空串或全空格，则返回0
    • boolean类型
      • true返回1，false返回0
    • null
      • 返回0
    • undefined
      • 返回NaN

  • 方法二：+（正号）

    • 在任意一个数据类型前使用+，可以将其转换成number，原理同Number()函数，但是使用更方便

  • 方法三：parseInt()函数

    • 可以取出以数字开头的字符串整数部分，否则返回NaN
      • 比如parseInt('20px')返回20，parseInt('30.45')返回30，但是parseInt('a20px')则返回NaN

  • 方法四：parseFloat()函数

    • 作用同parseInt()函数，可以取出以数字开头字符串中的浮点数，否则返回NaN

• 转Boolean

  • 使用Boolean()函数

    • 数字
      • 除了0和NaN以外，均返回true
    • 字符串
      • 除了空串，均返回true
    • null
      • 返回false
    • undefined
      • 返回false

自增和自减

• 自增

  • 通过自增，可以使变量值在原有基础上加1
  • 自增分两种：前++(++a)，和后++(a++)
    • ++a的值等于自增后的值（新值）
    • a++的值等于自增前的值（原值）

• 自减

  • 参照自增

元素

• 获取
  • document.getElementById('元素id')    根据id选择单个元素
  • document.getElementsByTagName('标签名')   是一个选择集
  • document.querySlector('选择器')       选择单个元素
  • document.querySlectorAll('选择器')   是一个选择集
• 操作元素属性
  • 获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
  • 属性名注意：
    • “class” 属性写成 “className”
    • “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
  • 操作属性的方法
    • '.'操作
    • ‘[ ]’操作：[ ]中可以是变量

      <script type="text/javascript">
      
          window.onload = function(){
              var oT = document.getElementById('test'); //获取元素
              var s = 'style';
              // 读取属性值
              var value = oT.value; // '.'操作
              var name = oT['name']; // '[ ]'操作// 写(设置)属性
              oT[s]['color'] = 'red'; // [ ]中使用变量
              oA.style.fontSize = '12px'; //有-的属性名改成驼峰式
          }
      
      </script>

• innerHTML
  • 可以读取或者写入元素内的html内容
• innerText
  • 可以读取或者写入元素内的html内容

函数

• 定义与执行

  <script type="text/javascript">
      // 函数定义
      function aa(){
          alert('hello!');
      }
      // 函数执行
      aa();
  </script>

• 匿名函数
  • 定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

    <script type="text/javascript">
    
    window.onload = function(){
        var oBtn = document.getElementById('btn1');
        // 直接将匿名函数赋值给绑定的事件
        oBtn.onclick = function (){
            alert('ok!');
        }
    }
    
    </script>

• 封闭函数
  • 封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
  • 写法：
    • (匿名函数)()

      (function(){
          var oDiv = document.getElementById('div1');
          oDiv.style.color = 'red';
      })();

    • !匿名函数()

      !function(){
          var oDiv = document.getElementById('div1');
          oDiv.style.color = 'red';
      }();

    • ~匿名函数()

      ~function(){
          var oDiv = document.getElementById('div1');
          oDiv.style.color = 'red';
      }();

条件语句

• 运算符
  • 算术： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
  • 赋值：=、 +=、 -=、 *=、 /=、 %=
  • 条件：==、===、>、>=、<、<=、!=、!==、||(或者)、&&(而且)、!(否)
• 条件运算符（也叫三元运算符）
  • 语法：
    • 条件表达式 ？语句1:语句2;
  • 执行流程：
    • 条件表达式执行结果为true，则执行语句1，并返回结果
    • 条件表达式执行结果为false，则执行语句2，并返回结果

      var a = 10;
      var b = 20;
      var max = a > b ? a:b; //求最大值
      console.log('max: '+max);

• if else

  var a = 6;
  if(a==1)
  {
      alert('语文');
  }
  else if(a==2)
  {
      alert('数学');
  }
  else if(a==3)
  {
      alert('英语');
  }
  else if(a==4)
  {
      alert('美术');
  }
  else if(a==5)
  {
      alert('舞蹈');
  }
  else
  {
      alert('不补习');
  }

• switch

  var a = 6;
  
  switch (a){
      case 1:
          alert('语文');
          break;
      case 2:
          alert('数学');
          break;
      case 3:
          alert('英语');
          break;
      case 4:
          alert('美术');
          break;
      case 5:
          alert('舞蹈');
          break;
      default:
          alert('不补习');
  }

  效率比if else高

循环语句

• for 循环

  for(var i=0;i<len;i++)
  {
      ......
  }

• while 循环

  var i=0;
  while(i<8){
      ......
      i++;
  }

字符串操作

• 操作方法
  • 字符串合并操作：“ + ”
  • parseInt() 将数字字符串转化为整数
  • parseFloat() 将数字字符串转化为小数
  • split() 把一个字符串分隔成字符串组成的数组
  • charAt() 获取字符串中的某一个字符
  • indexOf() 查找字符串是否含有某字符 --------------未查到，则返回-1
  • substring() 截取字符串 用法： substring(start,end)（不包括end）
  • toUpperCase() 字符串转大写
  • toLowerCase() 字符串转小写
• 字符串反转

  var str = 'asdfj12jlsdkf098';
  var str2 = str.split('').reverse().join('');
  alert(str2);

数组操作

• 数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
• 定义数组
  • 对象的实例创建

    var aList = new Array(1,2,3);

  • 直接创建

    var aList2 = [1,2,3,'asd'];

• 操作
  • 获取数组的长度：aList.length
  • 用下标操作数组的某个数据：aList[0]
  • join() 将数组成员通过一个分隔符合并成字符串
  • push() 和 pop() 从数组最后增加成员或删除成员
  • unshift()和 shift() 从数组前面增加成员或删除成员
  • splice() 在数组中增加或删除成员

    var aList = [1,2,3,4];
    aList.splice(2,1,7,8,9); //跳过2个元素，删除1个元素，然后在此位置增加'7,8,9'三个元素
    alert(aList); //弹出 1,2,7,8,9,4

  • reverse() 将数组反转
  • indexOf() 返回数组中元素第一次出现的索引值
• 数组去重
  • 根据当前元素的索引，是否和下标一致来进行判断

    var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
    var aList2 = [];
    for(var i=0;i<aList.length;i++)
    {
        if(aList.indexOf(aList[i])==i)
        {
            aList2.push(aList[i]);
        }
    }
    alert(aList2);

对象

将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。

• 内置对象
  • document

    document.referrer  //获取上一个跳转页面的地址(需要服务器环境)

  • location

    window.location.href  //获取或者重定url地址
    window.location.search //获取地址参数部分
    window.location.hash //获取页面锚点或者叫哈希值

    window可省略

  • Math

    Math.random 获取0-1的随机数
    Math.floor 向下取整
    Math.ceil 向上取整

• 对象的创建
  • 单体

    <script type="text/javascript">
    var Tom = {
        name : 'tom',
        age : 18,
        showname : function(){
            alert('我的名字叫'+this.name);    
        },
        showage : function(){
            alert('我今年'+this.age+'岁');    
        }
    }
    </script>

  • 工厂模式

    <script type="text/javascript">
    
    function Person(name,age,job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.showname = function(){
            alert('我的名字叫'+this.name);    
        };
        o.showage = function(){
            alert('我今年'+this.age+'岁');    
        };
        o.showjob = function(){
            alert('我的工作是'+this.job);    
        };
        return o;
    }
    var tom = Person('tom',18,'程序员');
    tom.showname();
    
    </script>

  • 构造函数

    <script type="text/javascript">
        function Person(name,age,job){            
            this.name = name;
            this.age = age;
            this.job = job;
            this.showname = function(){
                alert('我的名字叫'+this.name);    
            };
            this.showage = function(){
                alert('我今年'+this.age+'岁');    
            };
            this.showjob = function(){
                alert('我的工作是'+this.job);    
            };
        }
        var tom = new Person('tom',18,'程序员');
        var jack = new Person('jack',19,'销售');
        alert(tom.showjob==jack.showjob);
    </script>

  • 原型模式

    <script type="text/javascript">
        function Person(name,age,job){        
            this.name = name;
            this.age = age;
            this.job = job;
        }
        Person.prototype.showname = function(){
            alert('我的名字叫'+this.name);    
        };
        Person.prototype.showage = function(){
            alert('我今年'+this.age+'岁');    
        };
        Person.prototype.showjob = function(){
            alert('我的工作是'+this.job);    
        };
        var tom = new Person('tom',18,'程序员');
        var jack = new Person('jack',19,'销售');
        alert(tom.showjob==jack.showjob);
    </script>

  • 继承

    <script type="text/javascript">
    
            function fclass(name,age){
                this.name = name;
                this.age = age;
            }
            fclass.prototype.showname = function(){
                alert(this.name);
            }
            fclass.prototype.showage = function(){
                alert(this.age);
            }
            function sclass(name,age,job)
            {
                fclass.call(this,name,age);
                this.job = job;
            }
            sclass.prototype = new fclass();
            sclass.prototype.showjob = function(){
                alert(this.job);
            }
            var tom = new sclass('tom',19,'全栈工程师');
            tom.showname();
            tom.showage();
            tom.showjob();
        </script>