自学_JAVASCRIPT<四>

自学_JAVASCRIPT

什么是JAVASCRIPT

  • HTML只是描述网页长相的标记语言，没有计算、判断能力，如果所有计算、判断（比如判断文本框是否为空、判断两次密码是否输入一致）都放到服务器端执行的话网页的话页面会非常慢、用起来也很难用，对服务器的压力也很大，因此要求能在浏览器中执行一些简单的运算、判断。JavaScript就是一种在浏览器端执行的语言。HTML内容，css衣服，修饰，js控制
  • JavaScript的Java没直接的关系，唯一的关系就是JavaScript原名LiveScript，后来吸收了Java的一些特性，升级为JavaScript。JavaScript有时被简称为JS。
  • JavaScript是解释型语言，无需编译就可以随时运行，这样哪怕语法有错误，没有语法错误的部分还是能正确运行。

JAVASCRIPT开发环境

入门

<script type="text/javascript">
alert(new Date().toLocaleDateString());
</script>

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

  • JavaScript代码放到<script>标签中，script可以放到<head>、<body>等任意位置，而且可以有不止一个<script>标签。alert函数是弹出消息窗口，new Date()是创建一个Date类的对象，默认值就是当前时间。 JS是大小写敏感的。

  • 放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>是随着页面的加载而一个个执行的。

  • 除了可以在页面中声明JavaScript以外，还可以将JavaScript写到单独的js文件中，然后在页面中引入：<script src="test.js" type="text/javascript"></script>。声明到单独的js文件的好处是多页面也可以共享、减小网络流量。js文件的CDN(*)内容分发布网络(CDN),将别的服务器上的库

  • 注意：不要写成<script src="test.js" type="text/javascript"/>否则会有问题，这是一个比较特殊的地方。

事件

  • 在超链接的点击里执行JavaScript：<a href="javascript:alert(88)">发发</a>
  • JavaScript中也有事件的概念，当按钮被点击的时候也可以执行JavaScript：
    • <input type="button" onclick="alert(99)" value="久久"/>
    • 只有超链接的href中的JavaScript中才需要加“"javascript:”，因为它不是事件，而是把“"javascript:”看成像“http:”、“ftp:”、“thunder://”、“ed2k://”、"mailto:"一样的网络协议，交由js解析引擎处理。只有href中这是这是一个特例。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript">
            var sum = 0;
            for(int i = 0;i<=100;i++){
                sum += i;
            }
            alert(sum);
        function test() {
            var sum = 0;
            for(int i = 0;i<=100;i++){
                sum += i;
            }
            alert(sum);
        }
    </script>
</head>
<body>
    <a href="javascript:test()">Click me</a>
    <a href="win.htm" onclick="alert('123')">Click me</a>
    <input type="button" value="按钮" ondblclick="test()" />
</body>
</html>

变量

  • JavaScript中即可以使用双引号声明字符串，也可以使用单引号声明字符串。主要是为了方便和html集成，避免转义符的麻烦。只有一种类型var
  • JavaScript中有null、undefined两种，null表示变量的值为空，undefined则表示变量还没有指向任何的对象，未初始化。两者的区别参考资料。
  • JavaScript是弱类型，声明变量的时候无法：int i=0；只能通过var i=0;声明变量，和C#中的var不一样，不是C#中那样的类型推断。
  • JavaScript中也可以不用var声明变量，直接用，这样的变量是“全局变量”，因此除非确实想用全局变量，否则使用的时候最好加上var。
  • JS是动态类型的，因此var i=0;i="abc";是合法的。并且可以把方法放到var中，
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript">
        var x = "abc";
        if (!null) {
            alert("null");
        }
        if (!undefined) {
            alert("undefined");
        }
        if (x == null) {
            alert("null");
        }
        if (typeof(x) == "undefined") {
            alert("undefined");
        }
        if (!x) {
            alert("未初始化   0");
        }
        if (x) {
            alert(x);
        } 
    </script>
</head>
<body>
</body>
</html>

除错和调试

  • 如果JavaScript中的代码有语法错误，浏览器会弹出报错信息，查看报错信息就能帮助排查错误。
  • JavaScript的调试，使用VS可以很方便的进行JavaScript的调试，调试时需要注意几点：
  • IE6的调试选项要打开，Internet选项→高级，去掉“禁用脚本调试”前的勾选。
  • 以调试方式运行网页。
  • 设置断点、监视变量等操作和C#一样。
    案例：用循环语句的方法计算1到100之间整数的和

判断变量初始化

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

var x;
if (x == null) {
alert("null");
}
if (typeof (x) == "undefined") {
alert('undefined');
}
if (!x) {alert('不x');}
if(x){}//变量被初始化了或者变量不为空或者变量不为0.

推荐用最后一种方法。

函数声明

  • JavaScript中声明函数的方式：
function add(i1, i2) {
return i1 + i2;
}

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

  • 不需要声明返回值类型、参数类型。函数定义以function开头。
var r = add(1, 2);
alert(r);
r = add("你好", "tom");
alert(r);
  • JavaScript中不像C#中那样要求所有路径都有返回值，没有返回值就是undefined。
  • 易错：自定义函数名不要和js内置、dom内置方法重名，比如selectall、focus等函数名不要用。

匿名函数

var f1 = function(i1, i2) {
return i1 + i2;
}
alert(f1(1,2));
  • 类似于C#中的匿名函数。
  • 这种匿名函数的用法在JQuery中的非常多
  • alert(function(i1, i2) { return i1 + i2; }(10,10));//直接声明一个匿名函数，立即使用。用匿名函数省得定义一个用一次就不用的函数，而且免了命名冲突的问题，js中没有命名空间的概念，因此很容易函数名字冲突。通过例子发现一旦命名冲突以最后声明的为准
  • 必须<script src="my1.js" type="text/javascript"></script>不能：<script src="my1.js" type="text/javascript"/>

面向对象基础

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();
  • 必须要声明类名，function Person(name,age)可以看做是声明构造函数，Name、Age这些属性也是使用者动态添加了。var p1 = new Person("tom", 30);//不要丢了new，否则就变成调用函数了，p1为undefined。new 相当于创建了函数的一个实例

string 对象

  • length属性；
  • charAt方法；取第几个字符
  • indexOf lastIndexOf
  • Substr(start,length)、substring(start,end)
  • split
  • match、replace(只会替换一个，替换多个要用正则表达式)、search方法，正则表达式相关
var str = "我爱北京天安门,北京天安门爱我";
var reg = /我/g;
alert(str.replace("我", "你")); //replace()当第一个参数是字符串，只替换源字符串中的第一个匹配到的字符

如果是reg，就可以全部替换成功alert(str.replace(reg, "你")); 是正则表达式，是一个object

ARRAY对象

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]);
}

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

dictionary

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

 var pinyins = new Array();
pinyins["人"] = "ren";
pinyins["口"] = "kou";
pinyins["手"] = "shou";
alert(pinyins["人"]);
alert(pinyins.人);

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

array简化

Array还可以有简化的创建方式
var arr = [3, 5, 6, 8, 9]; 普通数组初始化
这种数组可以看做是pinyins["人"] = "ren";的特例，也就是key为0、1、2……
字典风格的简化创建方式：
var arr = {"tom":30,"jim":20};

数组，for其他

  • 对于数组风格的Array来说，可以使用join方法拼接为字符串
    var arr = ["tom","jim","lily"]; alert(arr.join(","));//JS中join是array的方法，不像.Net中是string的方法
  • for循环可以像C#中的foreach一样用
  • for循环还可以获得一个对象所有的成员，类似于.Net中的反射
for (var e in document) {
alert(e);
}

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

var p1 = new Object();//创建一个Object对象，动态增加属性、方法s
p1.Name = "tom";
p1.Age = 30;
p1.SayHello = function() { alert("hello"); };
p1.SayHello();
for(var e in p1) {//对象的成员都是对象的key
alert(e);
}

扩展方法

通过类对象的prototype设置扩展方法，下面为String对象增加quote（两边加字符）方法

String.prototype.quote = function(quotestr) {
if (!quotestr) {
quotestr = "\"";
}
return quotestr + this + quotestr;
};
alert("abc".quote());alert("abc".quote("|"));

扩展方法的声明要在使用扩展方法之前执行。JS的函数没有专门的函数默认值的语法，但是可以不给参数传值，不传值的参数值就是undefined，自己做判断来给默认值。

posted @ 2019-03-16 10:01  阿杜888  阅读(147)  评论(0)  编辑  收藏  举报