跟着杨中科学习asp.net之javascript

Javascript教程

Javascript语言基础

内容：JavaScript语言。JavaScript语法很多

和C#、Java、C等语言类似，因此本课只讲

JavaScript特有的语法，不会再讲解编程的基

本原理。

目标：掌握JavaScript语法，为Dom编程和

JQuery打基础。

什么是JavaScript

l HTML只是描述网页长相的标记语言，没有计算、判断能力，如

果所有计算、判断（比如判断文本框是否为空、判断两次密码是

否输入一致）都放到服务器端执行的话网页的话页面会非常慢、

用起来也很难用，对服务器的压力也很大，因此要求能在浏览器

中执行一些简单的运算、判断。JavaScript就是一种在浏览器端

执行的语言。(纯前端语言)

l JavaScript的Java没直接的关系，唯一的关系就是JavaScript原

名LiveScript，后来吸收了Java的一些特性，升级为JavaScript。

JavaScript有时被简称为JS。

l JavaScript是解释型语言(对应为编译型语言如C#)，无需编译就可以随时运行，这样哪怕

语法有错误，没有语法错误的部分还是能正确运行。

JS的开发环境

l VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，

VS2008需要安装VisualStudio 2008SP1（

http://www.microsoft.com/downloads/details.aspx?displaylang=zhcn&

familyid=27673c47-b3b5-4c67-bd99-84e525b5ce61）和VS90SP1-

KB958502-x86（

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.a

spx?ReleaseId=1736）补丁会更强更好用。如果实在“.” 不出来也没关

系，不影响运行。注意：先安装2008SP1，再安装VS90SP1-

KB958502-x86。

l JS是非常灵活的动态语言，不像C#等静态语言那样严谨，开发工具中

的JS完成功能只是一个辅助、建议，“.”出来的成员调用可能不能用，“.”

不出来的成员也许也能调用，因此不要因为“点儿不出来”而担心代码有

问题。

l VS2008的HTML编辑器中触发JavaScript自动完成：Ctrl+J。

JS入门

l <script type="text/javascript">

l alert(new Date().toLocaleDateString());

l </script>

l <script language="....>已经不推荐使用。

l JavaScript代码放到<script>标签中，script可以放到<head>、<body>等任意位

置，而且可以有不止一个<script>标签。alert函数是弹出消息窗口，new Date()

是创建一个Date类的对象，默认值就是当前时间。JS是大小写敏感的。

<head>

alert(new Date().toLocaleDateString());

</script>

</head>

<body>

</body>

</html>

l 放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>

是随着页面的加载而一个个执行的。

<head>

alert(new Date().toLocaleDateString());

</script>

alert("唯有知情一片月，曾窥飞鸟入朝阳！");

</script>

</head>

<body>

alert("玉京星阙！");

</script>

aaaaaaaaaaa

alert("无人唱彻！");

</script>

bbbbbbbbbbbbbbbbb

</body>

</html>

l 除了可以在页面中声明JavaScript以外，还可以将JavaScript写到单独的js文件中

，然后在页面中引入：<script src="test.js" type="text/javascript"></script>。声

明到单独的js文件的好处是多页面也可以共享、减小网络流量。js文件的CDN(*)

</script>

引用公用的js文件

l 注意：不要写成<script src="test.js" type="text/javascript"/>否则会有问题，这是

一个比较特殊的地方。

事件

l 在超链接的点击里执行JavaScript：

l JavaScript中也有事件的概念，当按钮被点击的时候也可以执行

JavaScript：

• <input type="button" οnclick="alert(99)" value="久久"/>

• 只有超链接的href中的JavaScript中才需要加“"javascript:”，

因为它不是事件，而是把“"javascript:”看成像“http:”、“ftp:”、

“thunder://”、“ed2k://”、"mailto:"一样的网络协议，交由js解

析引擎处理。只有href中这是这是一个特例。

JS的变量

l JavaScript中即可以使用双引号声明字符串，也可以使用单引号

声明字符串。主要是为了方便和html集成，避免转义符的麻烦。

l JavaScript中有null、undefined两种，null表示变量的值为空，

undefined则表示变量还没有指向任何的对象，未初始化。两者

的区别参考资料。

l JavaScript是弱类型语言（没有那么严谨完善的机制，没有类型一说），声明变量的时候无法：int i=0；只能通过var i=0;（声明变量为i指向0的整数，一旦指向0就是int类型）声明变量，和C#中的var不一样，不是C#中那样的类型推断。

l JavaScript中也可以不用var声明变量，直接用，这样的变量是“

全局变量”，因此除非确实想用全局变量，否则使用的时候最好

加上var。

l JS是动态类型的，因此var i=0;i="abc";是合法的。

JS除错与调试

l 如果JavaScript中的代码有语法错误，浏览器会弹出报错信息，

查看报错信息就能帮助排查错误。

l JavaScript的调试，使用VS可以很方便的进行JavaScript的调试

，调试时需要注意几点：

• IE6的调试选项要打开，Internet选项→高级，去掉“禁用脚本

调试”前的勾选。

• 以调试方式运行网页。

• 设置断点、监视变量等操作和C#一样。

l 案例：用循环语句的方法计算1到100之间整数的和

// alert("唯有知情一片月，曾窥飞鸟入朝阳！");

var sum = 0;

for (var i = 0; i <= 100; i++) {

sum += i;

}

alert(sum);

</script>

判断变量初始化

JavaScript中判断变量、参数是否初始化的三种方法：

var x;

if (x == null) {

alert("null");

}

if (typeof (x) == "undefined") {

alert('undefined');

}

if (!x) {alert('不x');}

if(x){}//变量被初始化了或者变量不为空或者变量不为0.

推荐用最后一种方法。

函数的声明

l JavaScript中声明函数的方式：

function add(i1, i2) {

return i1 + i2;

}

int add(int i1,int i2)//C#写法

l 不需要声明返回值类型、参数类型。函数定义以function开头。

var r = add(1, 2);

alert(r);

r = add("你好", "tom");

alert(r);

l JavaScript中不像C#中那样要求所有路径都有返回值，没有返回值就是

undefined。

l 易错：自定义函数名不要和js内置、dom内置方法重名，比如selectall、

focus等函数名不要用。

匿名函数

var f1 = function(i1, i2) {

return i1 + i2;

}

alert(f1(1,2));

l 类似于C#中的匿名函数。

l 这种匿名函数的用法在JQuery中的非常多

l alert(function(i1, i2) { return i1 + i2; }(10,10));//直接声明一个匿名

函数，立即使用。用匿名函数省得定义一个用一次就不用的函数

，而且免了命名冲突的问题，js中没有命名空间的概念，因此很

容易函数名字冲突。通过例子发现一旦命名冲突以最后声明的为

准

l 必须<script src="my1.js" type="text/javascript"></script>不能：

JS面向对象基础（*）

l JavaScript中没有类的语法，是用函数闭包（closure）模拟出来的，下面讲解的时候

还是用C#中的类、构造函数的概念，JavaScript中String、Date等“类”都被叫做“对象”

，挺怪，方便初学者理解，不严谨。JavaScript中声明类（类不是类，是对象）：

function Person(name, age) {

this.Name = name;

this.Age = age;

this.SayHello = function () {

alert("你好，我是" + this.Name + "，我" + this.Age + "岁了");

}

var p1 = new Person("tom", 20);

p1.SayHello();

l 必须要声明类名，function Person(name,age)可以看做是声明构造函数，Name、Age

这些属性也是使用者动态添加了。var p1 = Person("tom", 30);//不要丢了new，否则就

变成调用函数了，p1为undefined。new 相当于创建了函数的一个实例

String对象(*)

l length属性；

l charAt方法；

l indexOf；

l match、replace、search方法，正则表达式相关

l split

l substr、substring

Array对象

l JavaScript中的Array对象就是数组，首先是一个动态数组，而且

是一个像C#中数组、ArrayList、Hashtable等的超强综合体。

var names = new Array();

names[0] = "tom";

names[1] = "jerry";

names[2] = "lily";

for (var i = 0; i < names.length; i++) {

alert(names[i]);

}

var names = new Array();

names[0] = "tom";

names[1] = "jerry";

names[2] = "lily";

for (var i = 0; i < names.length; i++) {

alert(names[i]);

}

l 无需预先制定大小，动态。

练习

l 求一个数组中的最大值。定义成函数。

function getMax(arr) {

var max = arr[0];

for (var i = 0; i < arr.length; i++) {

if (arr[i] > max) {

max=arr[i];

}

return max;

}

var arr1 = new Array();

arr1[0] = 10;

arr1[1] = 100;

arr1[2] = 30;

arr1[3] = 50;

arr1[4] = 8;

alert(getMax(arr1));

l 将一个字符串数组输出为|分割的形式，比如“梅西|卡卡|郑大世”

。不要使用JavaScript中的Join函数。arr1.join("|")将数组用分隔

符连接成一个字符串。

function myjoin(arr) {

if (arr.length <= 0) {

return "";

}

var s = arr[0];

for (var i = 1; i < arr.length; i++) {

s=s+"|"+arr[i];

}

return s;

}

var arr = new Array();

arr[0] = "tom";

arr[1] = "jerry";

arr[2] = "lily";

alert(myjoin(arr));

l 将一个字符串数组的元素的顺序进行反转。{"3","a","8","haha"}

{"haha","8","a","3"}。不要使用JavaScript中的反转函数。提示：

第i个和第length-i-1个进行交换。定义成函数。Myreverse

function myreverse(arr) {

for (var i = 0; i < arr.length / 2; i++) {

var temp;

temp = arr[i];

arr[i] = arr[arr.length - i - 1];

arr[arr.length - i - 1] = temp;

}

var arr = new Array();

arr[0] = "tom";

arr[1] = "jerry";

arr[2] = "lily";

alert(myjoin(arr));

myreverse(arr);

alert(arr);

l 交换两个变量，数组同样是传递引用，js出错很麻烦。

JS中的Dictionary

l JS中的Array是一个宝贝，不仅是一个数组，还是一个Dictionary

，还是一个Stack。

var pinyins = new Array();

pinyins["人"] = "ren";

pinyins["口"] = "kou";

pinyins["手"] = "shou";

alert(pinyins["人"]);

alert(pinyins.人);

var diec = new Array();

diec["人"] = "ren";

diec["口"] = "kou";

diec["手"] = "shou";

alert(diec["口"]);

alert(diec.口);

var diec = new Array();

diec["人"] = "ren";

diec["口"] = "kou";

diec["手"] = "shou";

// alert(diec["口"]);

// alert(diec.口);

for (var k in diec) {

alert(k);

}

遍历出的为key

var arr = new Array();

arr[0] = "tom";

arr[1] = "jerry";

arr[2] = "lily";

for (var a in arr) {

alert(a);

}

结果为0,1,2

l 像Hashtable、Dictionary那样用，而且像它们一样效率高。

l 课下练习：网页版的火星文翻译。

Array的简化声明

l Array还可以有简化的创建方式

• var arr = [3, 5, 6, 8, 9]; 普通数组初始化

• 这种数组可以看做是pinyins["人"] = "ren";的特例，也就是key为0、1

、2……

l 字典风格的简化创建方式：

• var arr = {"tom":30,"jim":20};

var arr3 = { "tom": 30, "jim": 20 };

alert(arr3["jim"]);

输出为：20

数组、for及其他

l 对于数组风格的Array来说，可以使用join方法拼接为字符串

var arr = ["tom","jim","lily"];

alert(arr.join(","));//JS中join是array的方法，不像.Net中是string的方法

for循环可以像C#中的foreach一样用

l for循环还可以获得一个对象所有的成员，类似于.Net中的反射

for (var e in document) {

alert(e);

}因为对象的成员就是以对象的key的形式出现的

var p1 = new Object();

p1.Name = "tom";

p1.Age = 30;

p1.SayHello = function () { alert("hello"); };

p1.SayHello();

for (var s in p1) {

alert(s);

}

有了它没有文档也可以进行开发。

扩展方法（*）

l 通过类对象的prototype设置扩展方法，下面为String对象增加

quote（两边加字符）方法

l String.prototype.quote = function(quotestr) {

l if (!quotestr) {

l quotestr = "\"";

l }

l return quotestr + this + quotestr;

l };

l alert("abc".quote()); alert("abc".quote("|"));

l 扩展方法的声明要在使用扩展方法之前执行。JS的函数没有专门

的函数默认值的语法，但是可以不给参数传值，不传值的参数值

就是undefined，自己做判断来给默认值。

转载于:https://www.cnblogs.com/seclusively/p/3789455.html

跟着杨中科学习asp.net之javascript相关推荐

【解惑】杨中科说给弟弟的话
刚才和我弟弟通电话聊了聊这一段时间的学习以及下一阶段的学习规划,我弟弟在读大二,是计算机专业,他也是如鹏网上一个比较活跃的会员.今天和他聊电话,感触颇多,倒不是因为我发现了新的东西,而是因为竟然连他都 ...
杨中科的.NET 6新书的出版进度汇报
各位朋友好,我有3个月没发公众号了,今天打扰大家一下,不好意思. 最近这3个月,我在忙着给我的.NET 6新书收尾,并且在.NET 6正式版发布后,我把书中用.NET 6 预览版编写的内容在.NET ...
【杨中科】问苍天，微软的技术更新真的快吗
经常在网站上看到有人抱怨: "微软的技术怎么更新这么快,.Net2.0.3.0.3.5.4.0.4.5,我的妈呀,都跟不上微软的步伐了!" "还没学会Silverligh ...
从零开始学习 ASP.NET MVC 1.0 (三) Controller/Action 深入解析与应用实例【转】
一.摘要一个Url请求经过了Routing处理后会调用Controller的Action方法. 中间的过程是怎样的? Action方法中返回ActionResult对象后,如何到达View的? 本文 ...
学习ASP.NET比较完整的流程
如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步掌握一门.NET面向对象语言,C#或VB.NET 我强烈反对在没系统学过一门面向对象(OO)语言的前提下去学ASP.NET. ASP.NE ...
[转] - 学习ASP.NET比较完整的流程！
如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步掌握一门.NET面向对象语言,C#或VB.NET 我强烈反对在没系统学过一门面向对象(OO)语言的前提下去学ASP.NET. ASP.N ...
【转】学习asp.net比较完整的流程
如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步掌握一门.NET面向对象语言,C#或VB.NET 我强烈反对在没系统学过一门面向对象(OO)语言的前提下去学ASP.NET. ASP.NE ...
杨中科.NET5视频教程更新了：DI、配置系统、Logging、EF Core等
我的.NET5视频教程又更新了一些内容了,包含依赖注入.配置系统.日志系统以及部分Entity Framework Core的内容.Entity Framework Core还没全讲完,会继续更新. ...
[给ASP.NET 初学者的话]不要练功练了三年，才发现自己必须「砍掉重练」！....学习ASP.NET之前，请先把自己杯中的水倒掉...
这是我的文章备份,原文请看: [给ASP.NET 初学者的话]不要练功练了三年,才发现自己必须「砍掉重练」!....学习ASP.NET之前,请先把自己杯中的水倒掉 http://www.dotblog ...
【学习笔记】Part1·JavaScript·深度剖析-函数式编程与 JS 异步编程、手写 Promise（二、JavaScript 异步编程）
[学习笔记]Part1·JavaScript·深度剖析-函数式编程与 JS 异步编程.手写 Promise(课前准备) [学习笔记]Part1·JavaScript·深度剖析-函数式编程与 JS 异步 ...

跟着杨中科学习asp.net之javascript

跟着杨中科学习asp.net之javascript相关推荐

最新文章

热门文章