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

最新推荐文章于 2024-08-26 00:19:47 发布

didu283141

最新推荐文章于 2024-08-26 00:19:47 发布

阅读量116

点赞数

文章标签： c# javascript java ViewUI

原文链接：http://www.cnblogs.com/seclusively/p/3789455.html

版权

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

didu283141

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟着杨中科学习asp.net之javascript

Javascript教程 Javascript语言基础内容：JavaScript语言。JavaScript语法很多和C#、Java、C等语言类似，因此本课只讲 JavaScript特有的语法，不会再讲解编程的基本原理。目标：掌握JavaScript语法，为Dom编程和 JQuery打基础。什么是JavaScript l HTML只是描述网页长相的标记语言，没有...
复制链接

扫一扫