javascript笔记
JavaScript可以：
1、写入 HTML 输出(document.write("<h1>This is a heading</h1>");)
2、对事件作出反应(<button type="button" onclick="alert('Welcome!')">点击这里</button>)
3、改变 HTML 内容(x=document.getElementById("demo") //查找元素 x.innerHTML="Hello JavaScript"; //改变内容)
4、改变 HTML 图像
function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/i/eg_bulboff.gif"; } else { element.src="/i/eg_bulbon.gif"; } }
5、改变 HTML 样式(x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式)
6、 验证输入(if isNaN(x) {alert("Not Numeric")};)
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
外部的 JavaScript
JavaScript 函数和事件
会在页面加载时执行或某个事件发生时执行代码;
JavaScript 语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write("Hello \
World!");
不过，您不能像这样折行：
document.write \
("Hello World!");
您知道吗？
提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译
JavaScript 注释可用于提高代码的可读性
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。注释用于阻止其中一条代码行的执行（可用于调试）。
JavaScript 变量
与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。
您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可; 在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。在执行过以下语句后，变量 carname 的值将是 undefined;
声明也可横跨多行：
var name="Gates", age=56, job="CEO";
果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo"; var carname;
JavaScript 数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
JavaScript 数组
下面的代码创建名为 cars 的数组：
var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
也可以：var cars=["Audi","BMW","Volvo"];
数组下标是基于零的;
JavaScript 对象
var person={firstname:"Bill", lastname:"Gates", id:5566};
对象属性有两种寻址方式：
实例
name=person.lastname; name=person["lastname"];
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量;
声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
JavaScript 对象
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。
属性和方法
属性是与对象相关的值。
方法是能够在对象上执行的动作。
JavaScript 中的对象
在 JavaScript 中，对象是数据（变量），拥有属性和方法。
js中申明一个string型的txt变量时，默认就有：
属性：
txt.length=5
方法：
txt.indexOf() txt.replace() txt.search()
访问对象的属性
objectName.propertyName
访问对象的方法
objectName.methodName()
JavaScript 函数
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>js_test1</title> </head> <script> function globeVar() { a = "bbb"; } function changeGlobe() { a = "aaa"; } function getGlobeVar() { alert(a); } </script> <body> <input type="button" value="generate global variable" onclick="globeVar()" /> <input type="button" value="change global variable" onclick="changeGlobe()" /> <input type="button" value="get global variable" onclick="getGlobeVar()" /> </body> </html>
JavaScript 算术运算符
算术运算符用于执行变量与/或值之间的算术运算。
给定 y=5，下面的表格解释了这些算术运算符：
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 减 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除 | x=y/2 | x=2.5 |
| % | 求余数 (保留整数) | x=y%2 | x=1 |
| ++ | 累加 | x=++y | x=6 |
| -- | 递减 | x=--y | x=4 |
JavaScript 赋值运算符
赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符：
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
比较运算符
比较和逻辑运算符用于测试 true 或 false。
比较运算符在逻辑语句中使用，以测定变量或值是否相等。
给定 x=5，下面的表格解释了比较运算符：
| 运算符 | 描述 | 例子 |
|---|---|---|
| == | 等于 | x==8 为 false |
| === | 全等（值和类型） | x===5 为 true；x==="5" 为 false |
| != | 不等于 | x!=8 为 true |
| > | 大于 | x>8 为 false |
| < | 小于 | x<8 为 true |
| >= | 大于或等于 | x>=8 为 false |
| <= | 小于或等于 | x<=8 为 true |
逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符：
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
条件运算符
例子
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
JavaScript If...Else 语句
JavaScript Switch 语句
default所在位置对控制流程有很重要的作用；比如放在当中的时候，配合break使用有不错的功能，当然也非常容易出错；
JavaScript For 循环
For/In 循环
JavaScript for/in 语句循环遍历对象的属性：
实例
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
JavaScript 标签
正如您在 switch 语句那一章中看到的，可以对 JavaScript 语句进行标记。
如需标记 JavaScript 语句，请在语句之前加上冒号：
label: 语句
break 和 continue 语句仅仅是能够跳出代码块的语句。
语法
break labelname; continue labelname;
实例
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
JavaScript 错误 - Throw、Try 和 Catch
JavaScript 语句 try 和 catch 是成对出现的。
实例
在下面的例子中，我们故意在 try 块的代码中写了一个错字。
catch 块会捕捉到 try 块中的错误，并执行代码来处理它。
<!DOCTYPE html> <html> <head> <script> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()"> </body> </html>
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true} } }
下面是连同 HTML 表单的完整代码：
<html> <head> <script type="text/javascript"> function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
把方法添加到 JavaScript 对象
方法只不过是附加在对象上的函数。
在构造器函数内部定义对象的方法：
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
所有 JavaScript 数字均为 64 位
JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。
JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。
精度
整数（不使用小数点或指数计数法）最多为 15 位。
小数的最大位数是 17，但是浮点运算并不总是 100% 准确：
八进制和十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。
实例
var y=0377; var z=0xFF;
提示：绝不要在数字前面写零，除非您需要进行八进制转换。
数字属性和方法
属性：
- MAX VALUE
- MIN VALUE
- NEGATIVE INFINITIVE
- POSITIVE INFINITIVE
- NaN
- prototype
- constructor
方法：
- toExponential()
- toFixed()
- toPrecision()
- toString()
- valueOf()
-
几乎所有的js内置对象都有prototype方法，如Date.prototype之后可以为Date对象添加属性或者方法；
JavaScript 字符串(String)对象
JavaScript Math（算数）对象
JavaScript Boolean（逻辑）对象
JavaScript Array（数组）对象
JavaScript Date（日期）对象
JavaScript Number 对象
JavaScript RegExp 对象
创建 RegExp 对象的语法：
new RegExp(pattern, attributes);
参数
参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。
返回值
一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。
抛出
SyntaxError - 如果 pattern 不是合法的正则表达式，或 attributes 含有 "g"、"i" 和 "m" 之外的字符，抛出该异常。
TypeError - 如果 pattern 是 RegExp 对象，但没有省略 attributes 参数，抛出该异常。
http://www.w3school.com.cn/js/jsref_obj_regexp.asp
JavaScript 全局对象参考手册
全局属性和函数可用于所有内建的 JavaScript 对象。
顶层函数（全局函数）
FF: Firefox, IE: Internet Explorer
| 函数 | 描述 | FF | IE |
|---|---|---|---|
| decodeURI() | 解码某个编码的 URI。 | 1 | 5.5 |
| decodeURIComponent() | 解码一个编码的 URI 组件。 | 1 | 5.5 |
| encodeURI() | 把字符串编码为 URI。 | 1 | 5.5 |
| encodeURIComponent() | 把字符串编码为 URI 组件。 | 1 | 5.5 |
| escape() | 对字符串进行编码。 | 1 | 3 |
| eval() | 计算 JavaScript 字符串，并把它作为脚本代码来执行。 | 1 | 3 |
| getClass() | 返回一个 JavaObject 的 JavaClass。 | ||
| isFinite() | 检查某个值是否为有穷大的数。 | 1 | 4 |
| isNaN() | 检查某个值是否是数字。 | 1 | 3 |
| Number() | 把对象的值转换为数字。 | 1 | |
| parseFloat() | 解析一个字符串并返回一个浮点数。 | 1 | 3 |
| parseInt() | 解析一个字符串并返回一个整数。 | 1 | 3 |
| String() | 把对象的值转换为字符串。 | 1 | |
| unescape() | 对由 escape() 编码的字符串进行解码。 | 1 | 3 |
浙公网安备 33010602011771号