JavaScript(class0526)

什么是JavaScript?

HTML只是描述网页长相的标记语言,没有计算、判断能力,如果所有计算、判断(比如判断文本框是否为空、判断两次密码是否输入一致)都放到服务器端执行的话网页的话页面会非常慢、用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算、判断。JavaScript就是一种在浏览器端执行的语言。

B/S

JavaScript的Java没直接的关系,唯一的关系就是JavaScript来源于Netscape中的LiveScript,后来吸收了Java的一些特性,升级为JavaScript。JavaScript有时被简称为JS。 Jscript ECMASctipt

JavaScript是解释型语言,无需编译就可以随时运行,这样哪怕语法有错误,没有语法错误的部分还是能正确运行。

JS的开发环境

VS中JavaScript、JQuery的自动完成功能:在VS2010中直接有,VS2008需要安装VisualStudio 2008SP1(http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&familyid=27673c47-b3b5-4c67-bd99-84e525b5ce61)和VS90SP1-KB958502-x86(http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736)补丁会更强更好用。如果实在“.” 不出来也没关系,不影响运行。注意:先安装2008SP1,再安装VS90SP1-KB958502-x86。 JS是非常灵活的动态语言,不像C#等静态语言那样严谨,开发工具中的JS完成功能只是一个辅助、建议,“.”出来的成员调用可能不能用,“.”不出来的成员也许也能调用,因此不要因为“点儿不出来”而担心代码有问题。 VS2008的HTML编辑器中触发JavaScript自动完成:Ctrl+J。

JS入门

<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(*)

注意:不要写成<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中这是这是一个特例

JS的变量

JavaScript中即可以使用双引号声明字符串,也可以使用单引号声明字符串。主要是为了方便和html集成,避免转义符的麻烦。

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 i = 10; //声明一个变量,名字为i,指向10这个整数,一旦指向10,i就是int类型了。
        i = "abc";//嫁鸡随鸡嫁狗随狗!

 function f1() {
            a = 500;
            var b = 600;
        }
        function f2() {
            alert(a);
            alert(b);
        }
        f1();f2();

判断变量初始化

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

var x;

if (x == null)

{ alert("null"); }

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

{ alert(‘undefined‘); }

if (!x)

{alert(‘不x‘);}

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

推荐用最后一种方法。 在js中 值为0、null、undefined或空字符串的表达式被解释为 false。

JS除错与调试

如果JavaScript中的代码有语法错误,浏览器会弹出报错信息,查看报错信息就能帮助排查错误。

以前调试的时候都是alert

JavaScript的调试,使用VS可以很方便的进行JavaScript的调试,调试时需要注意几点: 以调试方式运行网页。 设置断点、监视变量等操作和C#一样。

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

函数的声明

JavaScript中声明函数的方式:

unction 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);

avaScript中不像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"/>

JS面向对象基础(*)

JavaScript中没有类的语法,是用函数闭包(closure)模拟出来的,下面讲解的时候还是用C#中的类、构造函数的概念,JavaScript中String、Date等“类”都被叫做“对象”,挺怪,方便初学者理解,不严谨。

 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 = Person("tom", 30);//不要丢了new,否则就变成调用函数了,p1为undefined。new 相当于创建了函数的一个实例

面向对象 参考文章:http://www.cnblogs.com/heros/archive/2009/09/14/1566622.html 闭包参考文章 http://www.ibm.com/developerworks/cn/linux/l-cn-closure/

String对象(*)

length属性;

charAt方法;

取第几个字符

indexOf

lastIndexOf

Substr(start,length)、substring(start,end)

split

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

g:   全局匹配

i:   忽略大小写

gi:   以上组合

电子邮件reg=/^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9][email protected]([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/gi;

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]);
        }
无需预先制定大小,动态。

练习

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

function getMax(array) { }

将一个字符串数组输出为|分割的形式,比如“梅西|卡卡|郑大世”。不要使用JavaScript中的Join函数。arr1.join("|")将数组用分隔符连接成一个字符串。

将一个字符串数组的元素的顺序进行反转。{"3","a","8","haha"} {"haha","8","a","3"}。不要使用JavaScript中的反转函数。提示:第i个和第length-i-1个进行交换。定义成函数。myreverse

交换两个变量,数组同样是传递引用。

JS中的Dictionary

JS中的Array是一个宝贝,不仅是一个数组,还是一个Dictionary,还是一个Stack。
 var pinyins = new Array();
        pinyins["人"] = "ren";
        pinyins["口"] = "kou";
        pinyins["手"] = "shou";
        alert(pinyins["人"]);
        alert(pinyins.人);
像Hashtable、Dictionary那样用,而且像它们一样效率高。
只要有了Array你就同时拥有了数组、List、Hashtable,
 var arr = new Array();
        arr[0] = "tom";
        arr[1] = "jim";
        for (var i in arr) {//打印出来的是0、1、2……证明了数组用法是Dictionary用法的一个特例而已。
            alert(i+arr[i]);
        }

Array的简化声明

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

var arr = [3, 5, 6, 8, 9];

普通数组初始化 这种数组可以看做是pinyins["人"] = "ren";的特例,也就是key为0、1、2……

字典风格的简化创建方式: var arr = {"tom":30,"jim":20};

Json对象

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。

数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。

值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。这些结构可以嵌套。

数组、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对象,动态增加属性、方法
        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,自己做判断来给默认值。

JavaScript(class0526)

时间: 2024-10-10 22:10:00

JavaScript(class0526)的相关文章

JavaScript(15)jQuery 选择器

jQuery 选择器 选择器允许对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器允许通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器允许对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 &

初探JavaScript(二)——JS如何动态操控HTML

除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛.就这样,踉踉跄跄.囫囵吞枣似的已经过五关斩六将,到达第十一章. 书中有几个章节并没有从语法.技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点: Jav

Head first javascript(二)

three basic data types text number boolean 变量 var var_name; 用'='初始化变量 var var_name = ini_value; const (不是所有浏览器都支持const) const const_name = ini_value; nan: not a number 使用一些未初始化的变量进行计算的时候会产生nan,如: const unknown; total = (1 + 2) * unknown; 这里total在计算的时

Head first javascript(一)

网页需要更好的交互体验,仅仅有html和css当然不够,因此javascript粉末登场 <script>表示当前页面有javascript,一般放在<head>中 <html> <head> <title>...</title> <script type = "text/javascript"> function ... </script> </head> ... </h

你不知道的Javascript(上卷)读书笔记之一 ---- 作用域

你不知道的Javascript(上卷)这本书在我看来是一本还不错的书籍,这本书用比较简洁的语言来描述Js的那些"坑",在这里写一些博客记录一下笔记以便消化吸收. 1 编译原理 在此书中,开始便提出:Javascript是一门编译型语言,我一开始以为这是国内翻译的锅,翻译的不够准确,后来我还专门去github看了,作者确实是将Js描述为一门编译型语言(compiled language).然而我认为作者更想表达的是Js也拥有和Java一般的特定的编译过程.而不是传统得认为只是单纯的进行&

面向对象的JavaScript(2):类

在小项目中对于JavaScript使用,只要写几个function就行了.但在大型项目中,尤其是在开发追求良好的用户体验的网站中,如SNS,就会 用到大量的JavaScrpt,有时JavaScript的工作量胜过了C#,这时写一堆function,就会显得很乱,杂乱无章,甚至会出现命名冲突,管理和维 护起来都很麻烦.对于这种情况我们就需要使用面向对象的思想来开发JavaScript.那我们就这样作罢: 在上一节面 向对象的JavaScript(1):命名空间  中说了怎么定义JavaScript

初探JavaScript(一)——也谈元素节点、属性节点、文本节点

Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本<Javascript Dom编程艺术>,开始慢慢走近JS,与它套近乎,今天是第三天了,从目前来看,比较好相处.就此动笔,是一个回忆复习的过程,权当是自己的一份读书笔记. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,已经被广泛用于Web应用开发,常用来为网

Ext JS学习第三天 我们所熟悉的javascript(二)

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作 栗子代码 1 //Function 函数 2 //

Ext JS学习第二天 我们所熟悉的javascript(一)

此文用来记录学习笔记: •ExtJS是一个强大的javascript框架,如果想真正的掌握ExtJS,那么我们必须要对javascript有一定的认识,所以很有必要静下心来,抱着一本javascript书籍,恶补一番.推荐书籍<javascript高级程序设计>.<javascript设计模式>. •在这里我们学习一下可能你从未接触过的javascript,这些javascript知识是我们要学好ExtJS这个框架非常有必要的.必备的知识.我们需要掌握的内容有: –javascri