diakla

导航

统计

js笔记

  • alert:弹窗

  • 根据id更改html内容、样式
    文本




    菜鸟教程(runoob.com)

    <h1>我的第一段 JavaScript</h1>
    <p id="demo">
    JavaScript 能改变 HTML 元素的内容。
    </p>
    <script>
    function myFunction()
    {
    	x=document.getElementById("demo");  // 找到元素
    	x.innerHTML="Hello JavaScript!";    // 改变内容
    }
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>
    	
    </body>
    </html>
    x=document.getElementById("demo")  //找到元素 
    x.style.color="#ff0000";           //改变样式
    

    图像


    以上实例中代码 element.src.match("bulbon") 的作用意思是:检索  里面 src 属性的值有没有包含 bulbon 这个字符串,如果存在字符串 bulbon,图片 src 更新为 bulboff.gif,若匹配不到 bulbon 字符串,src 则更新为 bulbon.gif

  • 调用外部js





chrome使用js脚本

  • console窗口直接写,按回车执行

输出

  • 使用 window.alert() 弹出警告框。


    <h1>我的第一个页面</h1>
    <p>我的第一个段落。</p>
    
    <script>
    window.alert(5 + 6);
    </script>
    
    </body>
    
  • 使用 document.write() 方法将内容写到 HTML 文档中。


    <h1>我的第一个 Web 页面</h1>
    
    <p>我的第一个段落。</p>
    
    <script>
    document.write(Date());
    </script>
    
    </body>
    </html>
    
  • 使用 innerHTML 写入到 HTML 元素。


    <h1>我的第一个 Web 页面</h1>
    
    <p id="demo">我的第一个段落</p>
    
    <script>
    document.getElementById("demo").innerHTML = "段落已修改。";
    </script>
    
    </body>
    </html>
    
  • 使用 console.log() 写入到浏览器的控制台。


    <h1>我的第一个 Web 页面</h1>
    
    <script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
    </script>
    
    </body>
    </html>
    

数据类型

  • Number:整数 小数 科学计数,所有数据都是以 64 位浮点型数据(float) 来存储

  • String: “”或‘’,字符串加数字等于字符串
    var sln = txt.length;

    <script>
    var x = "John";              // x是一个字符串
    var y = new String("John");  // y是一个对象
    document.getElementById("demo").innerHTML =typeof x + " " + typeof y;
    
    var x = "John";             
    var y = new String("John");
    (x === y) // === 为绝对相等,即数据类型与值都必须相等。结果为 false,因为 x 是字符串,y 是对象
    </script>
    
  • Boolean:布尔

  • Symbol:表示独一无二的值

  • Array:数组[40, 100, 1, 5, 25, 10]
    var cars=new Array();
    cars[0]="Saab";
    cars[1]="Volvo";
    cars[2]="BMW";

    var cars=new Array("Saab","Volvo","BMW");
    
  • Object:对象,类似cpp的struct?

  • Function:函数function myFunction(a, b)

  • RegExp:正则

  • Date :日期

  • var:定义变量var x, length
    var carname=new String;
    var x= new Number;
    var y= new Boolean;
    var cars= new Array;
    var person= new Object;
    非严格模式下函数内给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。
    var var1 = 1; // 不可配置全局属性
    var2 = 2; // 没有使用 var 声明,可配置全局属性

    console.log(this.var1); // 1
    console.log(window.var1); // 1
    console.log(window.var2); // 2
    
    delete var1; // false 无法删除
    console.log(var1); //1
    
    delete var2; 
    console.log(delete var2); // true
    console.log(var2); // 已经删除 报错变量未定义
    
  • 注释://

  • 换行:\

语句

用法和cpp差不多

  • for有个Python一样的用法
    var person={fname:"Bill",lname:"Gates",age:56};

    for (x in person)  // x 为属性名
    {
        txt=txt + person[x];
    }
    
  • js标签,break 和 continue 语句仅仅是能够跳出代码块的语句。
    break labelname; //break 语句(不带标签引用),只能用在循环或 switch 中。
    continue labelname;//continue 语句(带有或不带标签引用)只能用在循环中。

    <script>
    cars=["BMW","Volvo","Saab","Ford"];
    list:{
    	document.write(cars[0] + "<br>"); 
    	document.write(cars[1] + "<br>"); 
    	document.write(cars[2] + "<br>"); 
    	break list;
    	document.write(cars[3] + "<br>"); 
    	document.write(cars[4] + "<br>"); 
    	document.write(cars[5] + "<br>"); 
    }
    </script>
    
  • typeof:检测变量的数据类型

  • undefined:是一个没有设置值的变量,任何变量都可以通过设置值为undefined来清空

  • constructor:返回所有 JavaScript 变量的构造函数。
    "John".constructor // 返回函数 String() { [native code] }
    (3.14).constructor // 返回函数 Number() { [native code] }
    false.constructor // 返回函数 Boolean() { [native code] }
    [1,2,3,4].constructor // 返回函数 Array() { [native code] }
    {name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
    new Date().constructor // 返回函数 Date() { [native code] }
    function () {}.constructor // 返回函数 Function()

    <p>判断是否为数组。</p>
    <p id="demo"></p>
    <script>
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = isArray(fruits);
    function isArray(myArray) {
        return myArray.constructor.toString().indexOf("Array") > -1;
    }
    </script>
    
  • 正则表达式:/正则表达式主体/修饰符(可选)

    test() 方法是一个正则表达式方法。
    test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
    /e/.test("The best things in life are free!")//true
    exec() 方法是一个正则表达式方法。
    exec() 方法用于检索字符串中的正则表达式的匹配。
    该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
    /e/.exec("The best things in life are free!");//e

  • 异常
    finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
    try {
    ... //异常的抛出
    } catch(e) {
    ... //异常的捕获与处理
    } finally {
    ... //结束处理
    }

    <script>
    function myFunction() {
        var message, x;
        message = document.getElementById("message");
        message.innerHTML = "";
        x = document.getElementById("demo").value;
        try { 
            if(x == "")  throw "值为空";
            if(isNaN(x)) throw "不是数字";
            x = Number(x);
            if(x < 5)    throw "太小";
            if(x > 10)   throw "太大";
        }
        catch(err) {
            message.innerHTML = "错误: " + err;
        }
    }
    </script>
    
  • let 声明的变量只在 let 命令所在的代码块内有效。
    var x = 10;
    // 这里输出 x 为 10
    {
    let x = 2;
    // 这里输出 x 为 2
    }
    // 这里输出 x 为 10

  • 死链接
    点我没有反应的!
    点我定位到指定位置!


    ...


    尾部定位点

事件

变量提升

JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

JavaScript 只有声明的变量会提升,初始化的不会。

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y
// y 输出了 undefined,这是因为变量声明 (var y) 提升了,但是初始化(y = 7) 并不会提升,所以 y 变量是一个未定义的变量。

严格模式

在函数内部声明是局部作用域 (只在函数内使用严格模式):

  • 不允许使用未声明的变量

  • 不允许删除变量或对象。

  • 不允许删除函数。

  • 不允许变量重名:

  • 不允许使用八进制:

  • 不允许使用转义字符:

  • 不允许对只读属性赋值:
    "use strict";
    var obj = {};
    Object.defineProperty(obj, "x", {value:0, writable:false});

    obj.x = 3.14;            // 报错
    
  • 不允许对一个使用getter方法读取的属性进行赋值
    "use strict";
    var obj = {get x() {return 0} };

    obj.x = 3.14;            // 报错
    
  • 不允许删除一个不允许删除的属性:

  • 禁止this关键字指向全局对象。
    function f(){
    return !this;
    }
    // 返回false,因为"this"指向全局对象,"!this"就是false

    function f(){ 
        "use strict";
        return !this;
    } 
    // 返回true,因为严格模式下,this的值为undefined,所以"!this"true

验证

  • 表单验证
    //用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息,阻止表单提交:






    <form name="myForm" action="demo_form.php"
    onsubmit="return validateForm()" method="post">
    名字: <input type="text" name="fname">
    <input type="submit" value="提交">
    </form>
    
    </body>
    </html>
    
    //自动验证非空
    <form action="demo_form.php" method="post">
      <input type="text" name="fname" required="required">
      <input type="submit" value="提交">
    </form>
    
  • html约束验证

  • 约束验证

    <p>输入数字并点击验证按钮:</p>
    
    <input id="id1" type="number" min="100" max="300" required>
    <button onclick="myFunction()">验证</button>
    
    <p>如果输入的数字小于 100 或大于300,会提示错误信息。</p>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() {
        var inpObj = document.getElementById("id1");
        if (inpObj.checkValidity() == false) {
            document.getElementById("demo").innerHTML = inpObj.validationMessage;
        } else {
            document.getElementById("demo").innerHTML = "输入正确";
        }
    }
    </script>
    
    </body>
    

this

  • 在对象方法中, this 指向调用它所在方法的对象。
    fullName : function() {
    return this.firstName + " " + this.lastName;
    }
  • 单独使用 this,则它指向全局(Global)对象。
    var x = this;
  • 在函数中,函数的所属者默认绑定到 this 上。 在浏览器中,window 就是该全局对象为 [object Window]:
    function myFunction() {
    return this;
    }
  • 在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素:
  • 显式函数绑定
    在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。
    在下面实例中,当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法:
    var person1 = {
    fullName: function() {
    return this.firstName + " " + this.lastName;
    }
    }
    var person2 = {
    firstName:"John",
    lastName: "Doe",
    }
    person1.fullName.call(person2); // 返回 "John Doe"

异步编程

  • 回调函数
    既然 setTimeout 会在子线程中等待 3 秒,在 setTimeout 函数执行之后主线程并没有停止
    setTimeout(function () {
    document.getElementById("demo").innerHTML="RUNOOB!";
    }, 3000);
  • AJAX

  • Promise:Promise 构造函数只有一个参数,是一个函数,这个函数在构造之后会直接被异步运行,所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。
    Promise 类有 .then() .catch() 和 .finally() 三个方法,这三个方法的参数都是一个函数,.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列,.catch() 则是设定 Promise 的异常处理序列,.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行,有任何异常都会直接跳到 catch 序列:
    new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
    }).then(function (value) {
    console.log("a / b = " + value);
    }).catch(function (err) {
    console.log(err);
    }).finally(function () {
    console.log("End");
    });

posted on   diakla  阅读(39)  评论(0编辑  收藏  举报

点击右上角即可分享
微信分享提示