标题: [转载教程] JS基础知识 [打印本页]
作者: wc726842270 时间: 2011-6-8 17:28 标题: JS基础知识
本帖最后由 wc726842270 于 2011-6-9 04:44 编辑
刚开始弄,就下机了,晚上继续(只能打出来,复制不了)
1.区分大小写
在正式开始之前,按照神圣的传统我们一般都会说Hello world。就像这样:
var test = 'Hello world';
alert(Test);
我们立刻遇到了第一个JavaScript旬误: Test is not defined。
JavaScript是区分大中写的。变量test不同于Test,所以JavaScript不能识别它。
在书写类似getElementById这样大小写混合的名字时要特别注意。即使你犯了最细微的错误(比如写成了getElementByID),JavaScript也不会理解你的意思。
2.语句和分号
每个脚本都是由一组命令语句组成的,它们告诉JavaScript要做什么,以这段脚为例:
var test = 'Hello world';
alert(test);
它包含了两条语句。第一条语句告诉JavaScript创建一个变量test,并将字符串Hello world赋给它。第二条语句告诉JavaScript创建一个弹出警告框,并在其中显示test的值。
就像你所看到的,我使用分号;结束每一条语句。这告知JavaScript一条语句结束了,并且跟随在它后面的任何代码都有是一条新语句的一部分。如查在同一行上有好几条语句,这点就很重要了。
var test = 'Hello world'; alert(test);
如果没有分号,JavaScript无法理解第一条语句在哪里结束,而第二条语句又从哪里开始。
每一行写一条JavaScript语句,这样的做法很普遍,可以使得代码有很好的可读性。事实上,JavaScript也是以此作为最佳实践来设计的。一行代码不管是否以分号结尾,JavaScript都会自动插入分号。下面这段码执行起来也不会出错:
var test = 'Hello world'
alert(test)
虽然如此,前面的两个例子都是不好的编程习惯,请把每条语句放在单独的一行上,并使用分号结尾。CSS向导在这方面就有优势,因为在CSS中分号是必需的。应该把他们的分号原则引入到JavaScript中来。
什么时候不用分号
当使用if,for或者while这些控制结构的时候,你可以不用分号来结束一行代码。像这样是错误的:
if (x == 4);
{
x == x * 2;
alert(x);
}
JavaScript会这样理解这段代码:
if (x == 4)
{
/* nothing */;
}
{
x = x * 2;
alert(x);
}
如果x的值等于4,JavaScript完全不做任何事情,因此这个if语句也不会生成任何错误信息。但是,这可能不是你想要的结果。
你也将会从惨痛的经验中学习到JavaScript这个小小的令人讨厌的特性。我已经浪费了大量的时间去寻找令人费解的浏览器缺陷(bug),而它可能仅仅是因为一个不正确的分号而导致的。
作者: wc726842270 时间: 2011-6-8 17:29
本帖最后由 wc726842270 于 2011-6-9 11:20 编辑
3.注释
有些行包含了注释而不是代码。注释会被脚本解释器忽略,它只是为了帮助那些使用你代码的人可以更好地理解你的代码。
JavaScript有两种定义注释的方式:
// 这行是注释
/*
这一段语句是注释
*/
//字符使得它们所在行的剩余部分转变成注释。你可以在一条普通的JavaScript语句后面使用它们
if (node.nodeType == 3) // 处理Safari浏览器的bug!
node = node.parentNode;
我通常使用//来暂时屏蔽脚本中的几行代码。举例来说,我在“站点调查”的addInput()函数中屏蔽了一行:
[站点调查器/popup.js,第49~56行]
function addInput(name.value) {
var mainForm = document.forms[0];
var newInput = document.createElement('input')
// newInput.type = 'hidden';
newInput.name = name;
newInput.value = value;
mainForm.appendChild(newInput);
}
在现实版本中,这个脚本生成隐藏的表单域。但是,为了向你展示这个脚本是如何执行的,我屏蔽了这一行,那样你就可以看到动态生成的表单域。
/*和*/字符定义了多行注释,就像CSS中一样。注意这里*/是必须的: 如果你打开了/*而没有闭合它,所有的浏览器都会报错
4.代码块:{}
花括号{}定义了一块代码,它可被视作一条单独的语句。这些代码块通常在特定的情况下才执行。举例
来说,看这个函数:
function highlight(obj) {
obj.parentNode.className = 'highlight';
}
花括号中定义的代码块是函数主体,块中的语句只有函数被调用时才执行。同理,if和for语句也一样:
if (x == 4) {
x = x * 2;
alert(x);
}
只有当x等到于4的时候,这些被花括号封闭的语句才能执行
忽略{}
当if,while,for代码中只包含了一条语句时,你可以省略{}。举例来说
if (x ==4)
x = x * 2;
如果x等于4,x就被乘以2。这是合法的JavaScript。但是,忽略花括号可能会导致问题。比如这段代码
;它并没有错,但它可能并不像你期望中那样执行;
if (x == 4)
x =x * 2;
alert(x);
重复一遍,如果x等于4, x就被乘以2。然后,无孔不入论x是否等到于4,都会弹出警告提示框来显示x
。事实上,JavaScript是这样理解该段代码的:
if (x == 4) {
x = x * 2;
}
alert(x);
为了避免这类错误,最好总是用花括号来包围if,for语句。
注意函数主体总是应该被包围在花括号中,即使它们只包含一条语句.
作者: wc726842270 时间: 2011-6-8 17:29
本帖最后由 wc726842270 于 2011-6-10 04:43 编辑
5.1 运算符
大多数语句至少包含一个运算符,这个字符确切的告诉JavaScript应该执行哪个运算。看这段代码
a b;
尽管你可能定义了变量a和b,但这个伪语句(pseudo-statement)没告诉JavaScript该怎么操作它们,于是产生一个错误。
相反,你应该给出清楚的指令:
var c = a * b;
这个语句包含了两个运算符:*运算符执行a乘以b,而=运算符将相乘后的结果赋值给c。
通常,你不必但心运算符。总的来说,你一旦知道它们的含义,就能凭直觉正确地使用它们。最与众不同的是+运算符,以后我们将讨论。
5.2 运算数
一个运算符需要运算数的值来完成运算。比如a*b,*运算符指示进行一个乘法运算。我们拿什么来相乘?是用a和b的数值。*运算符是使用a和b来运算的,因此a和b就是*的运算数。大多数运算符需要两个运算数。
运算符优先级
看这条语句。
var a = x - y * z;
哪个运算符的操作先被执行呢?-还是*?如果你记得学过的数学,就会知道乘法优先于减法。用技术术语描述就是,乘法运算符比减法运算符具有更高的优先级。
因此,这条语句先将y乘以z,然后再从x中减去它们相乘后的结果。最终运算的结果保存到a中。如果你想首先进行减法运算,可以使用括号,就像在一般的数学运算中一样:
var a = (x - y) * z;
这会先从x中减去y,然后将结果乘以Z,并将最终结果保存到a中。
注意这里的=运算符具有较低的优先级,只有当所有的运算符都求完成后它才执行。那也是为什么最终结果赋值给a的操作发生在最后的原因。- =的返回值
- =运算符的返回值有一点整蛊的,看这个操作:
- var a=1;
- 事实上它做了两件事:
- (1)把1赋值给变量a
- (2)一旦第一步完成,它返回这个同样的值1给下一个运算符(如果有的话),就好像前一个例子中的*运算符把相乘后的结果值返回给=运算符那样。
- 通常在赋值语句中是没有其他运算符的,但偶尔你想要将同一个值赋给好几个变量:
- var a=b=1;
- 首先JavaScript将1赋值给b,然后它取得=运算符的返回值,它还是1,然后再将它赋给a(在此说一下本人的理解,JS不同于VBS它是相对来说比较严紧的,JS的起初打算也是应用于HTML中,所以理解好交互还是有必要的,这里的a,b没有什么联系,只不过是将它们赋一个相同的值而以,所以不要将a和b联系起来,关于=号以后会有讲解的,反正我是看见了,一定要正确理解)
复制代码
5.3 返回值
每个运算符都返回一个值,这个值就是你想要对其进行某种操作的东西:
var c = a * b;
如果我们用a乘以b,该运算返回相乘后的结果。=运算符取得了这个返回值,并对它执行了自已的运算,即把该值保存到c中。
值
取得并使用值是所有程序设计中的要点。所以,我们必须更深入地来看看值。看这行代码:
var a = b * 4;
4是一个值。b是一个包含了一个值(比如3)的变量。如果我们将4乘以b就会得到另一个值即12,它赋给了变量a,这是值操作的简单例子。
作为值的函数
现在让我们看一个更复杂的例子:
var test = function () {
alert('Hello world!');
}
var otherTest = test;
otherTest();
在JavaScript中,函数和其他值没有根本区别,在这个例子中,变量test指向一个函数的引用。当test的值被赋给otherTest,otherTest就成为那个执行时会弹出Hello world!警告提示框的函数。
将函数当作值 来处理,在事什处理中应用得非常普遍。
5.4 变量与字面量
一个值通常表示为一个变量或者一个字面量。其区别很简单:
var a = 10;
var b = a * 4;
在这个代码例子中,a和b是变量,这意味着它们可能包含任意值,不过当前它们的值分别是10和40。
10和4是字面量:它们按字面意思就意味着10和4,并不会表示其他任何值。(不管a和b被赋为什么值,它们的本质依然是变量,不要因为a被赋为10就认为是字面量,不过以上是个人的理解)
作者: wc726842270 时间: 2011-6-8 17:29
本帖最后由 wc726842270 于 2011-6-10 10:55 编辑
6.0数据类型
每个值都有一个数据类型来定义它的类别.
例如,4的数据类型是数字,"Hello world!"的数据类型是字符串,而函数test()的数据类型是对像。
6种数据类型
JavaScript有4种得重要的数据类型和4种小数据类型。其中重要的是:数字,字符串,布尔型和对像。小数据类型是undefined(未定义)和null(空),表示“不存在”的两种不同说法。
数字
数字几乎无需解释,它们就是数字,你可以对数字进行加,减,乘,除。当脚本需要计算时,总是会用到数字。例如:
var exampleNumber = 42;
我们将会在以后探险讨数字。
字符串
字符串型就是字符的序列。定义字符串时,你总要在它的两边写上单下号'或双引号".这会告知JavaScript正在处理的是字符串。例如:
var exampleString = 'I am a JavaScrpt hacker';
var exampleString2 = '49';
注意,第二个字符串例子中包含了数字(或者说两个数字字符),但被引号括起来了,对JavaScript来说它就是字符串。
字符串是目前为止JavaScript提供的最通用的数据类型。很就会注意到随时都在使用字符串。例如,大多数时候你从DOM中读取某些数据(比方说用记在表单域中输入的文本)时就会得到一个字符串。
布尔型
布尔型只有两个值:true或false。真正的布尔型变量只有在回答简单的是/否问题才有用(如,“这个表单没有错吗?”,“用记选择复先框了吗?”)。例如,
var exampleBoolean = true;
注意,这里的true没有使用引号括起来。如果有,它就是字符串,而不是布尔值。我们还会在以后讨论。
作者: wc726842270 时间: 2011-6-8 17:29
本帖最后由 wc726842270 于 2011-6-11 13:34 编辑
对象
对象数据类型包括了除数字,字符串和布尔型以外的所有类型。它区别天其他类型的原因是:对象可以被复制,被传递,还可以通过引用来比较,而不是通过值。
这意味着什么呢?看看下面这几行代码:
var x = 1;
var y = document.getElementById('myName');
var a = x;
var b = y;
变量x和a都包含了数值1。而y和b都引用了getElementById('myName')的返回值。
对y和b背后(所引用的)真实对象的任何必变都会同时体现在两个变量中。比如这两行:
b.className = 'error';
alert(y.className);
警告对话框显示了HTML无素的class属性的值:error。事实上,我们是否使用变量b去访问并不重要,y与b引用了相同的对象,因此它从同一个来源中得到数据.
相反,x和a具有相同的值,而没有引用任何一个对象,所有对x的值所做的操作都不会影响到a,反之亦然。
我们将通过这章探讨许多对象数据类型,比如数组和函数。尽管它们在细节上并不相同,但就我们关心的数据类型而言它们都是对象。
undefined和null
尽管undefined和null的关系紧密,但它们并不完全相同。
null通常意味着无值。但是一个函数如果没有其他匹配的值,也可能将它作为返回值。尽管这种情况不常发生。
举例来说,假设HTML中没有一个id为test的无素:
var x = document.getElementById('test');
alert(x);
x变成了null。你会发现我们在作对象检测时,常常会利用这种情况。
返回undefined值的情况有3种,如下所述:
(1)你声明了一个变量,但没有给它赋值。
(2)你访问了一个对象尚未声明的属性(在JavaScript中你可以把任何东西都视为对象的一个属性).
(3)你定义了函数的参数,但没有把值传递给它。
例如这段代码:
var x;
aler(x);
我显式地声明变量x,但它还没有值。因此警告对话框会给出undefined.
第二条规则产生了奇怪的结果:
// y没有被声明
alert(y);
alert(window.y);
就像你期望的,第一个警告对话框给出了错误信息:y没有被声明。但是第二个提示框把y当作JavaScript的全局对象--window对象的属性来访问。因为未定义的属性值总是undefined,所以警告对话框没有给出错信息,而是显示了undefined.
typeof运算符
typeof运算符能显示出一个值的数据类型。它的语法是这样的:
typeof x;
注意以下两个特例:
--对函数使用时,typeof会产生结果function。但是,至少从数据类型上考虑,函数实际上就是对象。
--null的计算结果为object.
这个运算符在调试时特别有用。假设你认为一个变量可能保存的是字符串而不是数字,你可以插入一个调用typeof的警告对话框检测。一般来说,当你觉得遇到的是数据类型相关的问题时,它应该是你使用的第一个调试工具。
有时候作对象检测也会用到typeof.然而,对像检测通常是试图找出某个对象是否存在,但是无论对象是否存在,typeof总是返回object(如果对象不存在,即null会被计算为object),在这种情况下,它就没什么用了。我建议你要用typeof进行对象检测,而是坚持没用我们在3C讨论的规则。
作者: wc726842270 时间: 2011-6-8 17:29
数据类型转换
JavaScript的优雅特性之一就是:将数值从一种数据类型转换到另一种数据类型是很容易的。事实上,它随时都在发生。例如这段全码:
var a = 4;
var b = '4';
var c = a * b;
用你刚学到的数据类型的知识来看,a是一个数字,而b是一个字符串。第三行代码试图将它们两个相乘,很明显该计算要求是数字的运算。
在这里触发了数据类型的转换。乘法运算任需要数字,所以JavaScript尝试尽可能将它的运算数转换为数字。在这个例子中很容易:b被解释
为数字4,于是c变成16。
重要的是要认识到b并没有成为数字。它仍然是一个字符串,但是JavaScript为了特殊的目的--作乘法运算,而把它解释为数字。
另一方面,乘法运算的结果(储存在c中)是一个数字。这真是两全其美:你的原始变量没有改变它的数据类型,但是运算结果拥有的是正确
的数据类型。
让我们回到前一个例子,来展示一下数据据类型的转化是多么的普遍,
var x;
alert(x);
就像我们所看到的,警告对话框显示undefined,因为x就是这个值。但是,对话框能显示的是字符串,因此undefined这个值首先被转化成字
符串"undefined".
NaN
数据类型的转换能否成功依赖于“原材料”。当你把字字符串转换为数字时,这一点特别重要。看这个例子:
var exampleString = 'I am a JavaScript hacker';
var exampleNumber = 42;
alert(exampleString * exampleNumber);
为了把这两个值相乘,JavaScript试图解释exampleString为数字。这是完全不可能的,所以乘法运算得出的结果是一个特殊的数值NaN(非数
字值),它表示“这个值不能被解释为数字”。- 作为警告的NaN
- 当你期望得到一个数字但得到的是NaN时,你可能犯了一个数据类型转换的错误。你想要使用的一个数字实际上是一个不能转换成数字的字符
-
- 串。这个错误有时候很明显,就像一个完全没有包含数字的字符串,比如"I am a JavaScript hacker",但它有时也可能很隐晦,比如字符
-
- 串"7,000"。
- 一旦你发现NaN出现,你要逐个杳看变量并确保它们都要可以被解释为数字。
复制代码
+号的问题
一般来说你不必担心数据类型的转换,它们会自动进行。但有一个你必须特别关注的特例,即当你使用+运算符的时候。
运算符的问题在于它可能有两种含义。如果把它用在数字上,它意味着把两个数字相加。但是如果把它用在字符串上,它意味着把两个字符串连接或拼合在一起。连接也是一种加法,但它与数字运算有根本上的区别。
看这个例子:
var a = 4;
var b = '4';
var c = a + b;
你可能会以为c的值是8,但事实上它包含的是字符型'44'。JavaScript处理字符串连接的优先级高于数字求和。因此,JavaScript处理字符串连接的优先级高于数字求和。因此,JavaScript将a+b解释为字符连接,而不是求和。数字被转换成字符串,而不是反过来。
很时显,这个问题的解决办法是确保两个运算数都是数字。
var a = 4;
var b = '4';
var c = a + (b*1);
如果我们先把b乘以1,JavaScript就会使用这个运算的返回值,即一个数字。这样它接下来就把+解释为相加,而不是连接。
在一行代码中求和或连接
有时候你想要在同一行中把一些数字相加或者连接一个字符串。让我们看看下面这个例子:
var amount1 = 42;
var amount2 = 24;
var message = amount1 + amoun2 + ' apples is what you ordered';
message现在变成了字符串“66 apples is what you ordered”。这可能看起来很古怪,因为我们刚才知道了连接比相加优先级高。但是此时变量和运算符的顺序也很重要。
省下一半发上来好了,弄不上来,上火
作者: applba 时间: 2011-6-9 06:53
//和/*让我想起了delphi
作者: Demon 时间: 2011-6-9 08:41
JS板块的JS难道不是JScript的缩写而是JavaScript的缩写?
作者: wc726842270 时间: 2011-6-9 16:19
JS是JavaScript的缩写,也不多说了,看一下百度吧
区别:
Javascript:
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
Jscript:
JScript是由微软公司开发的活动脚本语言,是微软对ECMAScript规范的实现。JScript最初是随Internet Explorer 3.0于1996年8月发布。
最初的jscript和javascript差异过大,web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。
而两者之间主要的区别就在于对ECMAScript标准的实现方法和支持程度,详细可参考ECMAScrip标准t规范,有必要说说明一点目前很多脚本语言比如FLASH等中所用均基于该标准。
--------------------------------------------------------
联系:
1.产生的背景相同,最初目的相同。
2.语法相差细微,以至于很多程序员看JScript代码时都认为是JAVASCRIPT
3.目前基于同一个标准。
4.都不是说明JAVA语言的简化版本或异化版本,他们同JAVA仅仅是因为当初JAVA大行其道想借JAVA的东风,语法书写上相似JAVA。
作者: Batcher 时间: 2011-6-9 18:19
为何不能理解成即包括JScript又包括JavaScript呢?
作者: Demon 时间: 2011-6-9 22:32
JS是JavaScript的缩写,也不多说了,看一下百度吧
区别:
Javascript:
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器 ...
wc726842270 发表于 2011-6-9 16:19
http://zhidao.baidu.com/question/203605983.html
百度一下,什么都不知道。复制粘贴谁不会。
作者: wc726842270 时间: 2011-6-10 03:40
走路也很简单,你又能走多远呢?在说之前,别忘了先做出来,
是啊,百度谁都会,但是你在问之前查了么?这不是我的问题,是你的。自已的问题都是让别人“百度”出来的,还说“谁不会”,我看是你不会
RE:10L
我跟你是同一个想法,只不过是不同时期的而以,它的不同以经是过去时了,但是还是让别人自已去理解吧
作者: Demon 时间: 2011-6-10 12:44
本帖最后由 Demon 于 2011-6-10 12:46 编辑
走路也很简单,你又能走多远呢?在说之前,别忘了先做出来,
是啊,百度谁都会,但是你在问之前查了么?这不是我的问题,是你的。自已的问题都是让别人“百度”出来的,还说“谁不会”,我看是你不会
RE:10L
我跟 ...
wc726842270 发表于 2011-6-10 03:40
用百度的人水平一般不会太高。复制粘贴前麻烦你先鉴别一下对不对。
http://en.wikipedia.org/wiki/JScript
作者: canyuexiaolang 时间: 2011-7-20 20:07
其实我想知道
var test='hello world';
alert (test);
为啥错误。。。
作者: broly 时间: 2011-7-20 20:24
14# canyuexiaolang
alert 不是JS本身的函数,而是网页的 window对象的函数,原来为 window.alert(),可缩写为 alert()
作者: wc726842270 时间: 2011-7-24 20:56
可以保存为HTML文件,浏缆器最好在IE6或FIREFOX1.5以上
欢迎光临 批处理之家 (http://bbs.bathome.net/) |
Powered by Discuz! 7.2 |