zoukankan      html  css  js  c++  java
  • html--前端JavaScript基本内容

    一、JavaScript 变量

      在 JavaScript 中创建变量通常称为"声明"变量。
      使用 var 关键词来声明变量。
    注意:
    1、变量必须以字母开头
    2、变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
    3、变量名称对大小写敏感(y 和 Y 是不同的变量)
    4、JavaScript 语句和 JavaScript 变量都对大小写敏感。

    示例:

    <script type="text/javascript">
    
        // 全局变量
        name = 'seven';
    
        // 定义函数
        function func(){
            // 局部变量
            var age = 18;
    
            // 全局变量
            gender = ""
        }
    </script>            

    二、JavaScript 数据类型
    JavaScript 中的数据类型分为原始类型和对象类型:
    1、原始类型:
      数字(Number)
      JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:
        var x1=34.00; // 使用小数点来写
        var x2=34; // 不使用小数点来写

      Number对象相关属性
        Number.MAX_VALUE 最大数值
        Number.MIN_VALUE 最小数值
        Number.NaN 特殊的非数字值
        Number.NEGATIVE_INFINITY 负无穷大
        Number.POSITIVE_INFINITY 正无穷大
        Number.toExponential( ) 用指数计数法格式化数字
        Number.toFixed( ) 采用定点计数法格式化数字
        Number.toLocaleString( ) 把数字转换成本地格式的字符串
        Number.toPrecision( ) 格式化数字的有效位
        Number.toString( ) 将—个数字转换成字符串
        Number.valueOf( ) 返回原始数值

      字符串(String)
      字符串可以是引号中的任意文本。您可以使用单引号或双引号:
        var carname="Volvo XC60"; //双引号
        var carname='Volvo XC60'; //单引号

      String对象相关属性
        String.charAt( ) 返回字符串中的第n个字符
        String.charCodeAt( ) 返回字符串中的第n个字符的代码
        String.concat( ) 连接字符串
        String.fromCharCode( ) 从字符编码创建—个字符串
        String.indexOf( ) 检索字符串
        String.lastIndexOf( ) 从后向前检索一个字符串
        String.length 字符串的长度
        String.localeCompare( ) 用本地特定的顺序来比较两个字符串
        String.match( ) 找到一个或多个正则表达式的匹配
        String.replace( ) 替换一个与正则表达式匹配的子串
        String.search( ) 检索与正则表达式相匹配的子串
        String.slice( ) 抽取一个子串
        String.split( ) 将字符串分割成字符串数组
        String.substr( ) 抽取一个子串
        String.substring( ) 返回字符串的一个子串
        String.toLocaleLowerCase( ) 把字符串转换小写
        String.toLocaleUpperCase( ) 将字符串转换成大写
        String.toLowerCase( ) 将字符串转换成小写
        String.toString( ) 返回字符串
        String.toUpperCase( ) 将字符串转换成大写
        String.valueOf( ) 返回字符串

      布尔值(Boolean)
      布尔(逻辑)只能有两个值:true 或 false。
        var x=true;
        var y=false;

      Boolean对象相关属性
        Boolean.toString( ) 将布尔值转换成字符串
        Boolean.valueOf( ) Boolean对象的布尔值

      2、对象类型:
        数组(Array)
          var cars=new Array();
          cars[0]="Saab";
          cars[1]="Volvo";
          cars[2]="BMW";
        或者
          var cars=new Array("Saab","Volvo","BMW");

      Array对象相关属性
        Array.concat( ) 连接数组
        Array.join( ) 将数组元素连接起来以构建一个字符串
        Array.length 数组的大小
        Array.pop( ) 删除并返回数组的最后一个元素
        Array.push( ) 给数组添加元素
        Array.reverse( ) 颠倒数组中元素的顺序
        Array.shift( ) 将元素移出数组
        Array.slice( ) 返回数组的一部分
        Array.sort( ) 对数组元素进行排序
        Array.splice( ) 插入、删除或替换数组的元素
        Array.toLocaleString( ) 把数组转换成局部字符串
        Array.toString( ) 将数组转换成一个字符串
        Array.unshift( ) 在数组头部插入一个元素

      对象(Object)
       对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
        var person={firstname:"John", lastname:"Doe", id:5566};
        或者
        var person={
        firstname : "John",
        lastname : "Doe",
        id : 5566
        };

      Object对象相关属性
        Object.constructor 对象的构造函数
        Object.hasOwnProperty( ) 检查属性是否被继承
        Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型
        Object.propertyIsEnumerable( ) 是否可以通过for/in循环看到属性
        Object.toLocaleString( ) 返回对象的本地字符串表示
        Object.toString( ) 定义一个对象的字符串表示
        Object.valueOf( ) 指定对象的原始值

      空(null)
        null是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”。

      未定义(Undefined)
        undfined是一个特殊值,表示变量未定义。

    三、JavaScript函数

      3.1、函数语法:
      函数就是包裹在花括号中的代码块,前面使用了关键词 function:
        function 函数名(){
          执行代码
        }

      3.2、函数的分类

    // 普通函数
    function func() {
        return "yusheng_liang"
    }
    // 匿名函数
    var func = function(arg){
        return "yusheng_liang";
    };
    // 自执行函数
    (function(arg){
        console.log(arg);
    })('123')

    3.3、调用带参数的函数

      在调用函数时,您可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数,由逗号 (,) 分隔:
      语法:
        function myFunction(var1,var2){
          代码
        }

      示例:

    <button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
    
    <script>
    function myFunction(name,job)
    {
        alert("Welcome " + name + ", the " + job);
    }
    </script>

    3.4、带有返回值的函数
      有时,我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时,函数会停止执行,并返回指定的值。
      语法:
        function myFunction(){
          var x=5;
          return x;
        }

    四、JavaScript 作用域

      作用域是可访问变量的集合。在JavaScript中,能够定义全局作用域或者局部作用域。

    4.1、全局作用域

      变量在函数外定义,即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

    1 var carName = " Volvo"; 
    2 
    3 // 此处可调用 carName 变量 
    4 
    5 function myFunction() { 
    6 
    7     // 函数内可调用 carName 变量 
    8 
    9 }

    注意:全局变量在页面关闭后销毁。

     

    4.2、局部作用域

      变量在函数内声明,变量为局部作用域。局部变量:只能在函数内部访问。

    // 此处不能调用 carName 变量 
    
    function myFunction() { 
        var carName = "Volvo"; 
    
        // 函数内可调用 carName 变量 
    
    }

    注意:

    1、因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。

    2、局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。

    五、条件语句

    JavaScript中支持两个中条件语句,分别是:if 和 switch

    5.1、If...else if...else 语句

    使用 if....else if...else 语句来选择多个代码块之一来执行。

    if (condition1)       
      {        
      当条件 1true 时执行的代码       
      }       
    else if (condition2)       
      {        
     当条件 2true 时执行的代码      
      }        
    else        
      {        
      当条件 1 和 条件 2 都不为 true 时执行的代码        
      }

    5.2、switch 语句用于基于不同的条件来执行不同的动作。

    switch(n)
     {
     case 1:
      执行代码块 1
     break;
     case 2:
      执行代码块 2
     break;
     default:
     n 与 case 1case 2 不同时执行的代码
     }

    六、循环语句

    6.1、for - 循环代码块一定的次数。

    for (语句 1; 语句 2; 语句 3)        
      {        
      被执行的代码块        
      }
    //语句 1 (代码块)开始前执行 starts.
    
    //语句 2 定义运行循环(代码块)的条件
    
    //语句 3 在循环(代码块)已被执行之后执行

    6.2、while 循环

    while 循环会在指定条件为真时循环执行代码块。

     while (条件)
       {
      需要执行的代码
       }

    6.3、do/while 循环

    do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。

     do
       {
      需要执行的代码
       }
     while (条件);

    七、异常处理

    7.1、JavaScript try 和 catch

    try 语句允许我们定义在执行时进行错误测试的代码块。

    catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

    JavaScript 语句 try 和 catch 是成对出现的。

    try {
        //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
    }
    catch (e) {
        // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
        //e是一个局部变量,用来指向Error对象或者其他抛出的对象
    }
    finally {
         //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
    }

    7.2、Throw 语句

    throw 语句允许我们创建自定义错误。

    正确的技术术语是:创建或抛出异常(exception)。

    如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

    throw exception 

    八、闭包

    「闭包」,是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

    闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」

    由于作用域链只能从内向外找,默认外部无法获取函数内部变量。闭包,在外部获取函数内部的变量。

    function f2(){
        var arg= [11,22,33,44];
        function f3(){
            return arg;
        }
        return f3;
    }
     
    ret = f2();
    ret();

     

    九、面向对象

    function Foo (name,age) {
        this.Name = name;
        this.Age = age;
        this.Func = function(arg){
            return this.Name + arg;
        }
    }
      
    var obj = new Foo('yusheng_liang', 18);
    var ret = obj.Func("很帅");
    console.log(ret);

    对于上述代码需要注意:

    • Foo充当的构造函数
    • this代指对象
    • 创建对象时需要使用 new

    上述代码中每个对象中均保存了一个相同的Func函数,从而浪费内存。使用原型和可以解决该问题:

    function Foo (name,age) {
        this.Name = name;
        this.Age = age;
    }
    Foo.prototype = {
        GetInfo: function(){
            return this.Name + this.Age
        },
        Func : function(arg){
            return this.Name + arg;
        }
    }
  • 相关阅读:
    SVG平移和缩放(鼠标滚轮)的实现
    CSS之容器水平垂直居中
    CSS之flex布局
    CSS之鼠标悬停——内容变深/变浅
    CSS之clip-path绘制多边形
    axios
    .Net 反射
    Redis
    .Net Core GRPC报错
    Python 京东云无线宝消息推送
  • 原文地址:https://www.cnblogs.com/june-L/p/11886455.html
Copyright © 2011-2022 走看看