JavaScript_1のフロントエンドの基礎

要約:


、JavaScriptの概要

  1、ECMAScriptのとJavaScriptの関係:

  1996年11月、JavaScriptの--Netscape会社の作成者は、この言語が国際標準になることを期待することができ、標準のJavaScript ECMAのための国際機関に提出することを決めました。翌年、ECMAは、標準番号262ドキュメント(ECMA-262)の最初のバージョンをリリースし、標準ブラウザのスクリプト言語を提供し、ECMAScriptのと呼ばれるこの言語は、このバージョンは1.0です。

  JavaScript言語のための標準を開発し始めているが、JavaScriptを呼び出していませんでした、二つの理由があります。まず、商標、JavaScriptのネットスケープ自体が商標として登録されています。しかし、メーカーの言語を反映するというよりも、ネットスケープ、これは言語の発達や中立性を確保するのに役立ちます、ECMAです。
  したがって、関係のECMAScriptやJavaScriptは、前者が達成前者は後者の仕様であることです。
  ES6はECMAScriptの6を参照
  するECMAScriptが重要な基準であるが、それにはJavaScriptの一部だけではありませんが、もちろん、唯一の標準化された部品ではありません。実際には、完全なJavaScriptの実装は、次の3つの異なる部分で構成されています。

  • コア(ECMAScriptの) 
  • ドキュメントオブジェクトモデル(DOM)ドキュメントオブジェクトモデル(統合JS、CSS、HTML)
  • ブラウザのオブジェクトモデル(BOM)Broswerオブジェクトモデル(JS統合とブラウザ)

  簡単に言えば、ECMAScriptのではJavaScript言語自体内容を説明しています。

  JavaScriptはスクリプト言語である
  JavaScriptは、軽量プログラミング言語です。
  JavaScriptは、HTMLページにプログラミングコードです。
  HTMLページにJavaScriptの後に、それはすべての最新ブラウザで行うことができます。 

  2、導入のJavaScriptの道

    • HTMLタグファイル内のコードを書きます:
      <SCRIPT> 
        // ここにあなたのJSコードの書き込みに
       </スクリプトを>
    • スクリプトのsrc導入JSファイル:
      <スクリプトSRC = " myscript.js " > </ SCRIPT>

  3、JavaScriptの言語仕様

    • メモ(Notesはコードの母です):
      // これは1行コメントです
      
       * / 
      これは
      複数行コメント
       / *
    • ターミネーター:セミコロン「;」ターミネータです。


 二、JavaScript言語の基礎

  1、JavaScriptの変数宣言

  ①は、JavaScriptの変数名は、アンダースコア、数字、文字、$指定子を使用することができますし、数字で始めることはできません。

  ②、VAR変数名を宣言する形式を使用する変数を宣言

  • VaRの名前は=「SGT」;
     VAR年齢= 18である
    これは、可変コントラストのPythonを定義する変数を宣言しますが、Pythonのトラブルスポットよりも加えて。
  • 注意点:

    1. 変数名は大文字と小文字が区別されます
    2. キャメルは、命名規則を推奨しました
    3. 予約語は変数名として使用することはできません
    4. ここで差がVARと宣言された変数が一部変更で変更することができるということであるしましょう

  ③、変数のメソッドを宣言:変数名を聞かせて

  •  非常に適したループカウンタ用のコマンドを聞かせて、その文I:ES6は、たとえば、変数を宣言するために使用され、その使用がVARに似ていますが、変数は唯一letコマンドブロック内で有効な宣言し、コマンドを聞かせて追加しましたlet文と変数の増分変化は、ループのiについての外の他の変数には影響を与えません。
  •  {...}(; iが10 <I ++は、I = 0せ)

   ④、ES6は、その値は変更されません、一度宣言し、定数を宣言するのconstを追加しました。

  • PI = 3.1415のconst ; 
    PI // 3.1415 
    
    意志エラーの修正定数の宣言の場合:
    PI = 3
     // 例外TypeError: "PI"は読み取り専用です

  2、JavaScriptのデータ型

  JavaScriptは、ダイナミック型(割当のタイプの変数の宣言であるデータ・タイプを、変数のデータ・タイプを変更する)を有しています

  • VaRの X;   // この場合xは未定義である
    VaRの X = 1;   // この場合xは数
    VARは、 X =「アレックスは」   // この場合、xは文字列であります

  ①、値(数値)

  JavaScriptは、整数と浮動小数点型、唯一の数値タイプを区別しません。

  • var a = 12.34;
    var b = 20;
    var c = 5e3;  // 5000
    var d = 5e-3  // 0.005

    还有一种类型:NaN(表示不是一个数字Not a Number)

  • parseInt('123');    //结果为 123
    parseInt('helo')    // 结果为NaN,NaN代表非数字值的特殊值,该属性用于指示某个值不是数字。
    parseFloat(''123.456')  //结果为123.456

  ②、字符串(String):

  • var a = 'hello';
    var b = 'world';
    var c = a+b ;      //JavaScript支持字符串直接用+号拼接
    console.log(c);   //结果为helloworld
  •  

    字符串分割方法:slice(start,end)与substring(start,end)的区别:
    相同点:
    1、如果start=end,则返回空字符串
    2、如果end参数不写,省略,则取到字符串末尾。
    3、如果某个参数超过字符串的长度,则这个参数会被替换为string的长度。

    不同点:
    substring()特点:
    1、如果start > end ,则start和end会被交换
    2、如果参数是复数或者不为数字,则会将其替换为0

    slice()特点:
    1、如果start > end ,不会交换
    2、如果start = -2,则切割从字符串末尾往前数第2个字符开始(包括该位置的字符)
    3、如果stop = -3,则切割在从字符串末尾往前数的第3个字符结束(不包括该位置字符)

  • ES6引入了 模板字符串:(template string)
    • 模板字符串是增强版字符串,用反引号标识(esc按键下面那个键),作用:
      • 当做普通字符串
      • 定义多行字符串
      • 字符串中可以嵌入变量(类似格式化输出)
  • //当做普通字符串使用:
    `啦啦啦啦啦啦`
    
    //当做多行字符串使用:
    `
    轻轻地我走了,
    正如我轻轻地来...
    `
    //可以嵌入变量,类似那种格式化输出的形式:
    var name = 'sgt',age = '18';
    '
    Hello, ${name}, are you  ${age} years old?
    '
    注意:如果在字符串内使用反引号,则需要用转义字符(反斜杠)转义一下。

    ③、布尔值(Boolean):

    true和false都是小写,这点需要注意!
  • var a = true;
    var b = false;
    
    Tips:空字符串("")、0、null、undefined、NaN都是false
  • null与undefined的区别:
    ---- null :表示值为空,一般在需要指定或者清空一个变量时候才会使用,如name = null;
    ---- undefined: 表示当声明一个变量但未初始化时候,该变量的默认值是undefined,还有就是函数无明确的返回值时候,返回的也是undefined。
    !!!:null其实就是表示让一个以前有值的变量变为空,而undefined建名思义,没有被定义,仅仅是声明了变量,然后就没了,具体理解可以联想下图:
  • ④、对象(Object):

    JavaScript中的所有事物都是对象,字符串、数值、数组、函数...此外,JavaScript允许自定义对象

   JavaScript提供多个内建对象,比如:String、Date、Array等等

  • 第一种创建自定义对象方式:
  • 第二种创建自定义对象方式:

  4-1、数组(等同于Python中的列表list)

  • var a = [123, "ABC"];
    console.log(a[1]);  // 输出"ABC"

    ⑤、原始数据类型(symbol)

  •  ES6新引入的一种数据类型,表示一个独一无二的值,其作用相当于判断数据的数据类型。

  • 数据类型查询:

    typeof ‘ABC’;  // 'string'
    typeof  null// 'object'
    typeof true;    // 'boolean'
    typeof 123      //'number'

  

  3、JavaScript运算符

   ①:比较运算符:

  •   >      >=      <     <=       !=     ==     ===    !==
    大于 大于等于 小于 小于等于 不等于 弱等于 强等于 强不等于

    注意:

  • 1 == “1”          //  true  弱等于
    1 === "1"       //   false 强等于
    
    /*上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将数
    值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误、
    */

    ②:逻辑运算符:

  • &&   ||   !
    与 或 非
    and or not

    ③:赋值运算符:

  • = += -= *= /=

    ④:算数运算符:

  • + - * / % ++ --

    需要注意的:

    var x = 10;
    var res1 = x++;
    var res2 = ++x;
    res1;
    >10
    res2;
    >12
    
    解析:
    res1=x++是先将x赋值给res1,然后x++自增长1
    res2=++x,上面x自增长了1,所以是11,然后++x是先自增长1变成12,再将其赋值给res2,所以res2为12

     

  4、JavaScript流程控制

  #1: if>>else

  #2: if >>else if >>else 

 

 

  #3: switch

  #4: for

  #5: while

  •  

  #6: 三元运算

  •  

  5、JavaScript函数

   JavaScript中的函数定义方式:

  •  几种常见的函数形式:
    // 普通函数定义:
    function f1(){
          console.log('hw');  
    }
    
    // 带参数的函数:
    function f2(a,b){
         console.log(arguments);  // 内置的arguments对象
         console.log(arguments.length);
         console.log(a, b);
    }
    
    // 带返回值的函数:
    function sum(a,b){
        return a+b;  
    }
    
    sum(1.2);   //调用函数
    
    
    // 匿名函数方式:
    var sum = function(a,b){
         return a+b;  
    }

     

  • 特殊函数形式:
    // ES6中允许使用“箭头”(=>)定义函数。
    var f = v => v;
    // 等同于
    var f = function(v){
      return v;
    }
    
    // 如果箭头函数不需要参数或需要多个参数,就是用圆括号代表参数部分:
    var f = () => 5;
    // 等同于
    var f = function(){return 5};
    
    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2){
      return num1 + num2;  //这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
    }
  • 函数的全局变量和局部变量
    1. 局部变量:在JavaScript的函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问它,只要函数运行完毕,本地变量就会被删除。
    2. 全局变量:在函数外面声明的变量就是全局变量,网页上的所有脚本和函数都能访问和使用它。
    3. 变量生成的周期:
      • JavaScript的变量的生命期是从他们被声明的时候开始的。
      • 局部变量会在函数运行以后删除。
      • 全局变量会在页面关闭后删除。
    4. 作用域:在函数内部查找变量,找不到则到外层全局作用域去找,逐步找到最外层。(下面通过几个例子来了解JavaScript的全局变量和局部变量的含义)
  • 1.
    var city = 'BJ';
    function f(){
        var city = 'SH';
        function inner(){
            var city = 'SZ';
            console.log(city);
        }
        inner();
    }
    f();     //结果为SZ
    // 分析:f()>inner()>声明了city=‘sz’,然后打印city,inner函数内就有city,所以无需从其他地方查找,打印结果为SZ。
    
    2.
    var city1 = 'Wuhan';
    function Bar(){
        console.log(city1);
    }
    function f(){
        var city1 = 'Erdos';
        return Bar;
    }
    var ret = f();
    ret();   //结果为Wuhan
    // 分析:ret()>f()()>bar()>bar内没有city1,只能从bar外找,bar外面有city1=‘WuHan’,所以打印结果为WuHan。
    
    3.
    var city2 = 'BeiJing';
    function f(){
        var city2 = 'ShangHai';
        function inner(){
            console.log(city2);
        }
        return inner;
    }
    var ret = f();
    ret();      //结果为:ShangHai
    // 分析:ret()>f()()>inner()>inner内无city2,从inner开始往外找,inner外是f函数,f函数内部有city='ShangHai',所以打印结果为ShangHai

  6、JavaScript词法分析(了解知识点)

  • avaScript中在调用函数的那一瞬间,会先进行词法分析。
    
    词法分析的过程:
    
    当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:
    
    1:函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
    2:函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
    3:函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。
    
    函数内部无论是使用参数还是使用局部变量都到AO上找。
    
    看两个例子:
    
    第一题:
    var age = 18;
    function foo(){
      console.log(age);
      var age = 22;
      console.log(age);
    }
    foo();  // 问:执行foo()之后的结果是?(22)
    
    第二题:
    var age = 18;
    function foo(){
      console.log(age);
      var age = 22;
      console.log(age);
      function age(){
        console.log("呵呵");
      }
      console.log(age);
    }
    foo();  // 执行后的结果是?(22)
    词法分析
  • 词法分析过程:
    1、分析参数,有一个参数,形成一个 AO.age=undefine;
    2、分析变量声明,有一个 var age, 发现 AO 上面已经有一个 AO.age,因此不做任何处理
    3、分析函数声明,有一个 function age(){...} 声明, 则把原有的 age 覆盖成 AO.age=function(){...};
    
    最终,AO上的属性只有一个age,并且值为一个函数声明
    
    执行过程:
    注意:执行过程中所有的值都是从AO对象上去寻找
    
    1、执行第一个 console.log(age) 时,此时的 AO.age 是一个函数,所以第一个输出的一个函数
    2、这句 var age=22; 是对 AO.age 的属性赋值, 此时AO.age=22 ,所以在第二个输出的是 2
    3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了
    答案解析

    7、JavaScript内置对象

  在JavaScript中,所有的事物都是对象:字符串、数字、数字、日期...等等。在JavaScript中对象是拥有属性和方法的数据。

  # 自定义对象:JavaScript中的对象本质上是键值对的集合(Hash结构),但是只能用字符串作为key.

  • var a = {'name':'sgt', 'age':16};
    console.log(a.name);
    console.log(a['age']);
    //结果:
    //sgt
    //16
    
    //遍历对象中的内容:
    var a = {"name": "sgt", "age": 16};
    for (var i in a){
      console.log(i, a[i]);
    }
    //结果:
    //name sgt
    //age 16
  • 创建对象:
    var teacher = new object();      // 创建一个teacher对象
    teacher.name = 'sgt';            // 添加teacher对象的name属性
    teacher.age = 18;                // 添加teacher对象的age属性
  • 拓展:
    注意:
    
    ES6中提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当做键。
    
    也就是说,Object结构提供了“字符串--值”的对应,Map结构提供了“值--值”的对应,是一种更完善的Hash结构实现。
    
    var m = new Map();
    var o = {p: "Hello World"}
    
    m.set(o, "content"}
    m.get(o)  // "content"
    
    m.has(o)  // true
    m.delete(o)  // true
    m.has(o) // false
    Map数据结构
    // 父类构造函数
    var Car = function (loc) {
      this.loc = loc;
    };
    
    // 父类方法
    Car.prototype.move = function () {
      this.loc ++;
    };
    
    // 子类构造函数
    var Van = function (loc) {
      Car.call(this, loc);
    };
    
    // 继承父类的方法
    Van.prototype = Object.create(Car.prototype);
    // 修复 constructor
    Van.prototype.constructor = Van;
    // 扩展方法
    Van.prototype.grab = function () {
      /* ... */
    };
    JavaScript面向对象之继承

     

  • Date对象:
    //创建Date对象:
    //方法1:不指定参数:
    var d1 = new Date();
    console.log(d1.toLocaleString());
    //2019/6/1 下午3:11:18
    
    
    //方法2:参数为日期字符串:
    var d2 = new Date('2004/3/20 11:12');
    console.log(d2.toLocaleString());
    //2004/3/20 上午11:12:00
    
    
    //方法3:参数为毫秒数:
    var d3 = new Date(5000);
    console.log(d3.toLocaleString());
    console.log(d3.toUTCString());
    //1970/1/1 上午8:00:05
    //Thu, 01 Jan 1970 00:00:05 GMT
    
    
    //方法4:参数为年月日小时分钟秒毫秒:
    var d4 = new Date(2004,2,20,11,12,0,300);
    console.log(d4.toLocaleString());
    //2004/3/20 上午11:12:00     //毫秒并不直接显示
  • Date对象的方法:
    var d = new Date();
    
    d.getDate();          //获取当前日(今天多少号)
    d.getDay();           //获取星期(比如从星期天到星期六依次是0-6)
    d.getMonth();         //获取月份数(0-11,0是一月,11是12月,依次类推)
    d.getFullYear();      //获取完整的年份2019
    d.getYear();          //获取年119
    d.getHours();         //获取小时15
    d.getMinutes();       //获取分钟22
    d.getSeconds();       //获取秒53
    d.getMilliseconds();  //获取毫秒513
    d.getTime();          //返回累计毫秒数(从1970/1/1午夜)1559373773513
  • 应用:将当前日期按照‘2019-12-27 11:11 星期三’格式输出
    const WEEKMAP = {
    0:'星期天',
    1:'星期一',
    2:'星期二',
    3:'星期三',
    4:'星期四',
    5:'星期五',
    6:'星期六'};
    
    
    function showTime() {
        var y1 = d.getFullYear();
        var m1 = d.getMonth()+1;
        var d1 = d.getDate();
        var h1 = d.getHours();
        var mm1 = d.getMinutes() < 10 ? '0'+d.getMinutes():d.getMinutes();
        var w1 = WEEKMAP[d.getDay()];
        my_time = `${y1}-${m1}-${d1} ${h1}:${mm1} ${w1}`;
        console.log(my_time)
    };
    
    showTime();
    2019-6-1 15:41 星期六
    格式化输出日期时间
  • JSON对象:

  • RegExp对象(正则对象):

    // 定义正则表达式两种方式
    var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
    var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
    
    // 正则校验数据
    reg1.test('jason666')
    reg2.test('jason666')
    
    /*第一个注意事项,正则表达式中不能有空格*/ 
    
    // 全局匹配
    var s1 = 'egondsb dsb dsb';
    s1.match(/s/)
    s1.match(/s/g)
    var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
    reg2.test('egondsb');
    reg2.test('egondsb');
    reg2.lastIndex;
    /*第二个注意事项,全局匹配时有一个lastIndex属性*/
    
    // 校验时不传参数
    var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
    reg2.test();
    reg2.test(undefined);
    
    var reg3 = /undefined/;
    reg3.test();
  • 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)      返回角的正切。

     

おすすめ

転載: www.cnblogs.com/suguangti/p/10957255.html