ASP.NET-前端-JavaScript语法

2020-03-28 本文已影响0人柠檬正在努力

JavaScript 是 web 前端开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

一、JavaScript 的版本问题

首先要说到版本的问题，因为不同版本下语法会不一样。
ECMAScript 是该语言的官方名称，从 2015 年起，ECMAScript 按年命名（ECMAScript 2015）。

ECMAScript 版本

版本	官方名称	描述
1	ECMAScript 1 (1997)	第一版
2	ECMAScript 2 (1998)	只改变编辑方式
3	ECMAScript 3 (1999)	添加了正则表达式添加了 try/catch
4	ECMAScript 4	从未发布过
5	ECMAScript 5 (2009) 阅读更多：JS ES5	添加了“严格模式” 添加了 JSON 支持添加了 String.trim() 添加了 Array.isArray() 添加了数组迭代方法。
5.1	ECMAScript 5.1 (2011)	编辑改变。
6	ECMAScript 2015 阅读更多：JS ES6	添加了 let 和 const 添加了默认参数值添加了 Array.find() 添加了 Array.findIndex()
7	ECMAScript 2016	添加了指数运算符（**）添加了 Array.prototype.includes。
8	ECMAScript 2017	添加了字符串填充添加了新的 Object 属性添加了异步功能添加了共享内存。
9	ECMAScript 2018	添加了 rest / spread 属性添加了异步迭代添加了 Promise.finally() 增加 RegExp

ECMAScript 通常缩写为 ES。

浏览器支持

所有浏览器都完全支持 ECMAScript 3。
所有现代浏览器都完全支持 ECMAScript 5。

浏览器版本是会影响JavaScript的功能的，实现同一个功能在不同浏览器或者不同版本上使用的方法也可能不一样，注意此处是容易出现问题的地方！

二、JavaScript 的常用语法

var x, y;   //  声明变量，刚声明的时候值是 undefined，类型是 undefined
x = 7; y = 8;   // 赋值
z = x + y;  // 计算值
z = ( x + y) * x;   // 计算值,算数运算符（+ - * /）来计算值

//字符串是文本，由双引号或单引号包围
var str = "Bill Gates"
var str = 'Bill Gates' 
var str = "Bill" + " " + "Gates"//字符串拼接也可以用 +

//JavaScript 可以用双斜杠注释
//JavaScript 对大小写敏感

/*
    之间的代码也被会视为注释
    下面是JavaScript的函数语法
*/

JavaScript的函数体：

function name(参数 1, 参数 2, 参数 3) {
    '要执行的代码'
    return True;
}

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var person = {firstName:"Wang", lastName:"Lee", age:20};   // 对象
// 但是通常来说对象的规范定义是这样子的
var person = {
    firstName:"Wang", 
    lastName:"Lee", 
    age:20,
    fullName : function() {//这里是对象内定义的函数的方法
        return this.firstName + " " + this.lastName;
    }
};

JavaScript 数组用方括号书写，数组的项目由逗号分隔：var cars = ["One", "Two", "Three"];
JavaScript 对象用花括号来书写,对象属性是 name:value 对，由逗号分隔：
var person = {firstName:"Wang", lastName:"Lee", age:20};

这里的firstName、lastName、age也被称为person的属性，我们能够以两种方式访问属性：
objectName.propertyName或者objectName["propertyName"]，通过objectName.methodName()访问对象方法

例如通过person.firstName、person.lastName、person.age调用，也可以通过person["firstName"]、person["lastName"]、person["age"]调用
例如通过person.fullName()访问对象方法

三、JavaScript 在页面中怎么发挥作用

HTML 事件是发生在 HTML 元素上的“事情”，当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件，或者说当事件发生时会使用JavaScript 进行反应。
通常，当事件发生时，用户会希望做某件事，JavaScript 允许您在事件被侦测到时执行代码，通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序：

<element event="一些 JavaScript">

例如，一个Button元素发生Onclick(点击)的事情的适合我想让名为TxtDemo元素的值为GetDate()方法的返回值,得到当前时间

<script type="text/javascript">
function GetDate(format) {
     /*
      format=1表示获取年月日
      format=0表示获取年月日时分秒
     */

     var now = new Date();
     var year = now.getFullYear();
     var month = now.getMonth()+1;
     var date = now.getDate();
     var day = now.getDay();//得到周几
     var hour = now.getHours();//得到小时
     var minu = now.getMinutes();//得到分钟
     var sec = now.getSeconds();//得到秒
     if (format==1){
         _time = year+"-"+month+"-"+date
    }
    else if (format==2){
        _time = year+"-"+month+"-"+date+" "+hour+":"+minu+":"+sec
    }
    return _time;
};
</script>
//一个Button元素发生Onclick(点击)的事情的适合我想让名为TxtDemo元素的值为GetDate()方法的返回值,得到当前时间
<Asp:Button id="cmdGetDate" runat="server" onclick='document.getElementById("TxtDemo").innerHTML=GetDate(0)'>现在的时间是？</button>

三、JSON 是 JavaScript 的对象

JSON 是存储和传输数据的格式，是一种以文本形式数据传输的约定格式，经常在数据从服务器发送到网页时使用。

在大多数时候接口的数据传输都是约定以Json为格式传输的。

JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本，而且JSON 名称需要双引号，JavaScript 名称不需要。读取和生成 JSON 数据的代码可以在任何编程语言编写的。

JSON 语法规则：

数据是名称/值对
数据由逗号分隔
花括号保存对象
方括号保存数组

实例，这就是一个Json

{
    "Family":[
            {
            "firstName":"Lee",
            "lastName":"Jie"
        },
            {
            "firstName":"Wang",
            "lastName":"Feng"
        },
            {
            "firstName":"Wang",
            "lastName":"Little"
        }
    ]
}

Json也可以在JavaScript 中进行解析,下面语句的结果是将FullName的值赋为Lee Jie

<input id="FullName" runat="server"></input>

<script>
    var TryJson = {
        "Family":[
                {
                "firstName":"Lee",
                "lastName":"Jie"
            },
                {
                "firstName":"Wang",
                "lastName":"Feng"
            },
                {
                "firstName":"Wang",
                "lastName":"Little"
            }
        ]
    };

    var obj = JSON.parse(TryJson);
    document.getElementById("FullName").innerHTML = obj.Family[0].firstName + " " + obj.Family[0].lastName;
</script>