javascript(二)

Posted on 2018-10-12 09:58  eilinge  阅读(172)  评论(0编辑  收藏  举报

  嗨,很快就和大家见面了。今天是复习javascript的第二天,学习了一些新的知识。就来和大家分享,更重要的就是每天在晚上用手机就可以回顾了。QAQ

JavaScript 用法

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
        
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
    <script src="myScript.js"></script>
        
    </body>
    </html>
    function myFunction()
    {
        document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
    }

JavaScript 输出

    使用 window.alert() 弹出警告框。
    使用 document.write() 方法将内容写到 HTML 文档中。
    使用 innerHTML 写入到 HTML 元素。
    使用 console.log() 写入到浏览器的控制台。
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
        
    <h1>我的第一个 Web 页面</h1>
    <p>
    浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
    </p>
    <script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
    </script>
        
    </body>
    </html>

JavaScript 数据类型

    var length = 16;                                              // Number 通过数字字面量赋值 
    var points = x * 10;                                          // Number 通过表达式字面量赋值
    var lastName = "Johnson";                                 // String 通过字符串字面量赋值
    var cars = ["Saab", "Volvo", "BMW"];                      // Array  通过数组字面量赋值
    var person = {firstName:"John", lastName:"Doe"};      // Object 通过对象字面量赋值
//声明变量类型
    var carname=new String;
    var x=      new Number;
    var y=      new Boolean;
    var cars=   new Array;
    var person= new Object;
    
//在 JavaScript 中有 5 种不同的数据类型:
    string
    number
    boolean
    object
    function
//3 种对象类型:
    Object
    Date
    Array
//2 个不包含任何值的数据类型:
    null
    undefined

JavaScript 函数

    function myFunction(a, b) {
       return a * b;                                // 返回 a 乘以 b 的结果
    }
    
JavaScript 代码块
    JavaScript 可以分批地组合起来。
    代码块以左花括号开始,以右花括号结束。
    代码块的作用是一并地执行语句序列。
    本例向网页输出一个标题和两个段落:

 

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>

    <h1>我的 Web 页面</h1>
    <p id="myPar">我是一个段落。</p>
    <div id="myDiv">我是一个div。</div>
    <p>
    <button type="button" onclick="myFunction()">点击这里</button>
    </p>
    <script>
    function myFunction(){
        document.getElementById("myPar").innerHTML="你好世界!";
        document.getElementById("myDiv").innerHTML="你最近怎么样?";
    }
    </script>
    <p>当您点击上面的按钮时,两个元素会改变。</p>

    </body>
    </html>

JavaScript 语句标识符

    语句                    描述
    break            用于跳出循环。
    catch            语句块,在 try 语句块执行出错时执行 catch 语句块。
    continue        跳过循环中的一个迭代。
    do ... while    执行一个语句块,在条件语句为 true 时继续执行该语句块。
    for                在条件语句为 true 时,可以将代码块执行指定的次数。
    for ... in        用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
    function        定义一个函数
    if ... else        用于基于不同的条件来执行不同的动作。
    return            退出函数
    switch            用于基于不同的条件来执行不同的动作。
    throw            抛出(生成)错误 。
    try                实现错误处理,与 catch 一同使用。
    var                声明一个变量。
    while            当条件语句为 true 时,执行语句块。

JavaScript 对象(属性和方法)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>

    <p>创建和使用对象方法。</p>
    <p>对象方法是一个函数定义,并作为一个属性值存储。</p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
    var person = {
        firstName: "John",
        lastName : "Doe",
        id : 5566,
        fullName : function() 
        {
           return this.firstName + " " + this.lastName;
        }
    };
    document.getElementById("demo1").innerHTML = "不加括号输出函数表达式:"  + person.fullName;  //不加括号输出函数表达式:function() { return this.firstName + " " + this.lastName; }
    document.getElementById("demo2").innerHTML = "加括号输出函数执行结果:"  +  person.fullName();
    //加括号输出函数执行结果:John Doe
    </script>
        
    </body>
    </html>
/*
访问对象方法
    你可以使用以下语法创建对象方法:
        methodName : function() { code lines }
    你可以使用以下语法访问对象方法:
        objectName.methodName()
*/

JavaScript 函数:带有返回值的函数

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>

    <p>本例调用的函数会执行一个计算,然后返回结果:</p>
    <p id="demo"></p>
    <script>
    function myFunction(a,b){
        return a*b;    //12
    }
    document.getElementById("demo").innerHTML=myFunction(4,3);
    </script>

    </body>
    </html>
    JavaScript 变量的生命期从它们被声明的时间开始。
    局部变量会在函数运行以后被删除。
    全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

    如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。
    这条语句:
    carname="Volvo";
    将声明 window 的一个属性 carname。
    非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。

    var var1 = 1; // 不可配置全局属性
    var2 = 2; // 没有使用 var 声明,可配置全局属性

    console.log(this.var1); // 1
    console.log(window.var1); // 1

    delete var1; // false 无法删除
    console.log(var1); //1

    delete var2; 
    console.log(delete var2); // true
    console.log(var2); // 已经删除 报错变量未定义

字符串属性和方法

字符串属性
    constructor    返回创建字符串属性的函数
    length    返回字符串的长度
    prototype    允许您向对象添加属性和方法
    
字符串方法
    charAt()    返回指定索引位置的字符
    charCodeAt()    返回指定索引位置字符的 Unicode 值
    concat()    连接两个或多个字符串,返回连接后的字符串
    fromCharCode()    将 Unicode 转换为字符串
    indexOf()    返回字符串中检索指定字符第一次出现的位置
    lastIndexOf()    返回字符串中检索指定字符最后一次出现的位置
    localeCompare()    用本地特定的顺序来比较两个字符串
    match()    找到一个或多个正则表达式的匹配
    replace()    替换与正则表达式匹配的子串
    search()    检索与正则表达式相匹配的值
    slice()    提取字符串的片断,并在新的字符串中返回被提取的部分
    split()    把字符串分割为子字符串数组
    substr()    从起始索引号提取字符串中指定数目的字符
    substring()    提取字符串中两个指定的索引号之间的字符
    toLocaleLowerCase()    根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
    toLocaleUpperCase()    根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
    toLowerCase()    把字符串转换为小写
    toString()    返回字符串对象值
    toUpperCase()    把字符串转换为大写
    trim()    移除字符串首尾空白
    valueOf()    返回某个字符串对象的原始值

JavaScript 算术

    运算符    描述        例子    
    +            加法        x=y+2    7    5    
    -            减法        x=y-2    3    5    
    *            乘法        x=y*2    10    
    /            除法        x=y/2    2.5    
    %            取模(余数)    
    ++        自增        x=++y
    --            自减        x=--y
    
JavaScript 赋值运算符
    运算符    等同于
    +=        x=x+x
    -=        x=x-y
    *=        x=x*y
    /=        x=x/y
    %=        x=x%y