• 前端基础之javascript


    一、简介

    一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

    • 核心(ECMAScript) 
    • 文档对象模型(DOM) Document object model (整合js,css,html)
    • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器)
    • Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的

    简单地说,ECMAScript 描述了以下内容:

    • 语法 
    • 类型 
    • 语句 
    • 关键字 
    • 保留字 
    • 运算符 
    • 对象 (封装 继承 多态) 基于对象的语言.使用对象.

    二、JavaScript基础

    1、JS引用形式

    1 直接编写
        <script>
            alert('hello yuan')
        </script>
    2 导入文件
        <script src="hello.js"></script>

    2、JS的变量、常量和标识符

    (1)变量

    在代数中,我们使用字母(比如 x)来保存值(比如 5)。通过上面的表达式 z=x+y,我们能够计算出 z 的值为 11。在 JavaScript 中,这些字母被称为变量。

    那么如何在JS中定义使用变量呢?

      a、声明变量时不用声明变量类型. 全都使用var关键字;

      b、一行可以声明多个变量.并且可以是不同类型

      c、声明变量时 可以不用var. 如果不用var 那么它是全局变量

      d、变量命名,首字符只能是字母,下划线,$美元符 三选一,余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写,x与X是两个变量 

    (2)常量和标识符

    常量 :直接在程序中出现的数据值

    标识符:

      a、由不以数字开头的字母、数字、下划线(_)、美元符号($)组成

      b、常用于表示函数、变量等的名称

      c、例如:_abc,$abc,abc,abc123是标识符,而1abc不是

      d、JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符

    3、JS的数据类型

    /*       
            number     -----  数值
            boolean    -----  布尔值
            string     -----  字符串
            undefined  -----  undefined
            null       -----   null  
          
     *

    =========布尔类型

    Boolean类型仅有两个值:true和false,也代表1和0,实际运算中true=1,false=0
    布尔值也可以看作on/off、yes/no、1/0对应true/false
    Boolean值主要用于JavaScript的控制语句,例如:

    if (x==1){
          y=y+1;
    }
    else{ y=y-1; }

    ============null和undefined类型

    Undefined类型

    Undefined 类型只有一个值,即 undefined。当声明的变量未初始化时,该变量的默认值是 undefined。

    当函数无明确返回值时,返回的也是值 "undefined";

    Null类型

    另一种只有一个值的类型是 Null,它只有一个专用值 null,即它的字面量。值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。

    尽管这两个值相等,但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象(在讨论 typeof 运算符时,简单地介绍过这一点)。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。

    3、运算符

    》》》》》》》》》》》算术运算符

    算术运算符:
        +   -    *    /     %       ++        -- 
    
    比较运算符:
        >   >=   <    <=    !=    ==    ===   !==
    
    逻辑运算符:
         &&   ||   !
    
    赋值运算符:
        =  +=   -=  *=   /=
    
    字符串运算符:
        +  连接,两边操作数有一个或两个是字符串就做连接运算

    注意1: 自加自减

    假如x=2,那么x++表达式执行后的值为3,x--表达式执行后的值为1;i++相当于i=i+1,i--相当于i=i-1;
    递增和递减运算符可以放在变量前也可以放在变量后:--i

    var i=10;
    console.log(i++);
    console.log(i);
    console.log(++i);
    console.log(i);
    console.log(i--);
    console.log(--i);

    注意2: NaN

        var d="yuan";
        d=+d;
        alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
        alert(typeof(d));//Number
    
        //NaN特点:
        
        var n=NaN;
        
        alert(n>3);
        alert(n<3);
        alert(n==3);
        alert(n==NaN);
        
        alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=

    》》》》》》》》》》比较运算符

    >   >=   <    <=    !=    ==    ===   !==

    等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。

    console.log(2==2);
    console.log(2=="2");
    console.log(2==="2");
    console.log(2!=="2");

    4、流程控制

    • 顺序结构(从上向下顺序执行)
    • 分支结构
    • 循环结构

    (1)顺序结构

    <script>
            console.log(“星期一”);
            console.log(“星期二”);
            console.log(“星期三”);
        </script>

    (2)分支结构

    if (表达式){
       语句1;
       ......
       }
     else{
       语句2;
       .....
       }

    if-elif-else结构:

    if (表达式1) {
        语句1;
    }else if (表达式2){
        语句2;
    }else if (表达式3){
        语句3;
    } else{
        语句4;
    }

    switch-case结构

    var week=3;
            switch (week){
                case 1:console.log('monday');break;
                case 2:console.log('tuesday');break;
                case 3:console.log('wednesday');break;
                case 4:console.log('thursday');break;
                case 5:console.log('friday');break;
                case 6:console.log('saturday');break;
            }

    switch比else if结构更加简洁清晰,使程序可读性更强,效率更高。

    (3)循环结构

    for循环:

    for(初始表达式;条件表达式;自增或自减)
        {
                执行语句
                ……
        }

    功能说明:实现条件循环,当条件成立时,执行语句1,否则跳出循环体

    for循环的另一种形式:

    for( 变量 in 数组或对象)
        {
            执行语句
            ……
        }

    while循环:

    语法规则:
    
    while (条件){
        语句1;
        ...
    }

    功能说明:运行功能和for类似,当条件成立循环执行语句花括号{}内的语句,否则跳出循环;同样支持continue与break语句。

    5、异常处理

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

    三、JavaScript的对象

    简介:

    在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象,在JavaScript程序大多数功能都是基于对象实现的。

    <script language="javascript">
    var aa=Number.MAX_VALUE; 
    //利用数字对象获取可表示最大数
    var bb=new String("hello JavaScript"); 
    //创建字符串对象
    var cc=new Date();
    //创建日期对象
    var dd=new Array("星期一","星期二","星期三","星期四"); 
    //数组对象
    </script>

    1、字符串对象的属性和函数

    x.length         ----获取字符串的长度
    
     x.toLowerCase()        ----转为小写
     x.toUpperCase()        ----转为大写
     x.trim()               ----去除字符串两边空格       
    
    
    ----字符串查询方法
    
    x.charAt(index)         ----str1.charAt(index);----获取指定位置字符,其中index为要获取的字符索引
    
    x.indexOf(findstr,index)----查询字符串位置
    x.lastIndexOf(findstr)  
    
    x.match(regexp)         ----match返回匹配字符串的数组,如果没有匹配则返回null
    x.search(regexp)        ----search返回匹配字符串的首字符位置索引
    
                            示例:
                            var str1="welcome to the world of JS!";
                            var str2=str1.match("world");
                            var str3=str1.search("world");
                            alert(str2[0]);  // 结果为"world"
                            alert(str3);     // 结果为15
                            
    
    ----子字符串处理方法
    
    x.substr(start, length) ----start表示开始位置,length表示截取长度
    x.substring(start, end) ----end是结束位置
    
    x.slice(start, end)     ----切片操作字符串
                            示例:
                                var str1="abcdefgh";
                                var str2=str1.slice(2,4);
                                var str3=str1.slice(4);
                                var str4=str1.slice(2,-1);
                                var str5=str1.slice(-3,-1);
    
                                alert(str2); //结果为"cd"
                                
                                alert(str3); //结果为"efgh"
                                
                                alert(str4); //结果为"cdefg"
                                
                                alert(str5); //结果为"fg"
    
    x.replace(findstr,tostr) ----    字符串替换
    
    x.split();                 ----分割字符串
                                     var str1="一,二,三,四,五,六,日"; 
                                    var strArray=str1.split(",");
                                    alert(strArray[1]);//结果为"二"
                                    
    x.concat(addstr)         ----    拼接字符串

     2、Array对象

    数组创建

    数组对象的属性和方法——join、concat、排序、切片、增加、删除

    3、Date对象

    创建时间对象

    时间对象的方法——获取日期和时间

    4、Math对象

    abs(x)    返回数的绝对值。
    exp(x)    返回 e 的指数。
    floor(x)对数进行下舍入。
    log(x)    返回数的自然对数(底为e)。
    max(x,y)    返回 x 和 y 中的最高值。
    min(x,y)    返回 x 和 y 中的最低值。
    pow(x,y)    返回 x 的 y 次幂。
    random()    返回 0 ~ 1 之间的随机数。
    round(x)    把数四舍五入为最接近的整数。
    sin(x)    返回数的正弦。
    sqrt(x)    返回数的平方根。
    tan(x)    返回角的正切。

    5、function对象(重点)

    函数的定义

    function 函数名 (参数){
<br>    函数体;
        return 返回值;
    }

    用 Function 类直接创建函数的语法如下:

    var 函数名 = new Function("参数1","参数n","function_body");

    函数的内置对象——arguments

    匿名函数

    6、BOM对象

    alert()            显示带有一段消息和一个确认按钮的警告框。
    confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
    prompt()           显示可提示用户输入的对话框。
    
    open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
    close()            关闭浏览器窗口。
    
    setInterval()      按照指定的周期(以毫秒计)来调用函数或计算表达式。
    clearInterval()    取消由 setInterval() 设置的 timeout。
    setTimeout()       在指定的毫秒数后调用函数或计算表达式。
    clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
    scrollTo()         把内容滚动到指定的坐标。

    window对象

    所有浏览器都支持 window 对象。

    概念上讲.一个html文档对应一个window对象.

    功能上讲: 控制浏览器窗口的.

    使用上讲: window对象不需要创建对象,直接使用即可.

    7、DOM对象



  • 相关阅读:
    Linux rsync 命令详解
    docker 容器间网络配置
    git合并分支
    基于Docker的Mysql主从复制搭建
    MySQL字符串函数substring:字符串截取
    mysql 存储过程
    分布式系统唯一ID生成方案汇总 转
    mysql 比较函数和操作符
    Distributed PostgreSQL on a Google Spanner Architecture – Storage Layer
    Distributed PostgreSQL on a Google Spanner Architecture – Query Layer
  • 原文地址:https://www.cnblogs.com/fenglinglf/p/7299713.html
Copyright © 2020-2023  润新知