javascript笔记
Posted cxchanpin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript笔记相关的知识，希望对你有一定的参考价值。
警告
请使用 document.write() 只向文档输出写内容。
假设在文档已完毕载入后运行 document.write，整个 html 页面将被覆盖：
实例
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>
</body>
</html>
#当你须要在某个页面同一时候运行两个变化处时使用{}
javascript 代码块
JavaScript 语句通过代码块的形式进行组合。
块由左花括号開始。由右花括号结束。
块的作用是使语句序列一起运行。
JavaScript 函数是将语句组合在块中的典型样例。
以下的样例将执行可操作两个 HTML 元素的函数：
实例
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
}
JavaScript 对大写和小写敏感。
JavaScript 对大写和小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大写和小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
相同。变量 myVariable 与 MyVariable 也是不同的。
空格
JavaScript 会忽略多余的空格。您能够向脚本加入空格。来提高其可读性。
以下的两行代码是等效的：
var name="Hello"; var name = "Hello";
JavaScript 变量
与代数一样，JavaScript 变量可用于存放值（比方 x=2）和表达式（比方 z=x+y）。
变量能够使用短名称（比方 x 和 y），也能够使用描写叙述性更好的名称（比方 age, sum, totalvolume）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（只是我们不推荐这么做）
- 变量名称对大写和小写敏感（y 和 Y 是不同的变量）
提示：JavaScript 语句和 JavaScript 变量都对大写和小写敏感。
JavaScript 数据类型
JavaScript 变量还能保存其它数据类型，比方文本值 (name="Bill Gates")。
在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。
JavaScript 变量有非常多种类型，可是如今。我们仅仅关注数字和字符串。
当您向变量分配文本值时，应该用双引號或单引號包围这个值。
当您向变量赋的值是数值时，不要使用引號。
假设您用引號包围数值，该值会被作为文本来处理。
我们使用 var 关键词来声明变量：
var carname;提示：一个好的编程习惯是，在代码開始处，统一对须要的变量进行声明。
JavaScript 函数和事件
上面样例中的 JavaScript 语句，会在页面载入时运行。
通常，我们须要在某个事件发生时运行代码，比方当用户点击button时。
假设我们把 JavaScript 代码放入函数中，就能够在事件发生时调用该函数。
您将在稍后的章节学到很多其它有关 JavaScript 函数和事件的知识。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就能够把它们安置到同一处位置。不会干扰页面的内容。
提示：在面向对象的语言中，属性和方法常被称为对象的成员。
提示：在面向对象的语言中，使用 camel-case 标记法的函数是非经常见的。您会经常看到 someMethod() 这种函数名。而不是 some_method()。
函数是由事件驱动的或者当它被调用时运行的可反复使用的代码块。
调用带參数的函数
在调用函数时。您能够向其传递值。这些值被称为參数。
这些參数能够在函数中使用。
您能够发送随意多的參数，由逗号 (,) 分隔：
myFunction(argument1,argument2)
当您声明函数时。请把參数作为变量来声明：
function myFunction(var1,var2) { 这里是要运行的代码 }
变量和參数必须以一致的顺序出现。第一个变量就是第一个被传递的參数的给定的值，以此类推。
实例
<button onclick="myFunction(‘Bill Gates‘,‘CEO‘)">点击这里</button> <script> function myFunction(name,job) { alert("Welcome " +name+ ", the " +job); } </script>
上面的函数会当button被点击时提示 "Welcome Bill Gates, the CEO"。
函数非常灵活，您能够使用不同的參数来调用该函数，这样就会给出不同的消息：
实例
<button onclick="myFunction(‘Harry Potter‘,‘Wizard‘)">点击这里</button> <button onclick="myFunction(‘Bob‘,‘Builder‘)">点击这里</button>
?
???
?依据您点击的不同的button，上面的样例会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。
在您只希望退出函数时 ，也可使用 return 语句。返回值是可选的：
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
假设 a 大于 b。则上面的代码将退出函数，并不会计算 a 和 b 的总和。
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以仅仅能在函数内部訪问它。（该变量的作用域是局部的）。
您能够在不同的函数中使用名称同样的局部变量，由于仅仅有声明过该变量的函数才干识别出该变量。
仅仅要函数执行完成，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的全部脚本和函数都能訪问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间開始。
局部变量会在函数执行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
假设您把值赋给尚未声明的变量，该变量将被自己主动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内运行。
JavaScript 运算符
条件运算符
JavaScript 还包括了基于某些条件对变量进行赋值的条件运算符。
语法
variablename=(condition)?value1:value2
样例
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
假设变量 visitor 中的值是 "PRES"。则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。
条件语句用于基于不同的条件来运行不同的动作。
条件语句
通常在写代码时，您总是须要为不同的决定来运行不同的动作。您能够在代码中使用条件语句来完毕该任务。
在 JavaScript 中。我们可使用下面条件语句：
- if 语句 - 仅仅有当指定条件为 true 时，使用该语句来运行代码
- if...else 语句 - 当条件为 true 时运行代码，当条件为 false 时运行其它代码
- if...else if....else 语句 - 使用该语句来选择多个代码块之中的一个来运行
- switch 语句 - 使用该语句来选择多个代码块之中的一个来运行
switch 语句用于基于不同的条件来运行不同的动作。
JavaScript Switch 语句
请使用 switch 语句来选择要运行的多个代码块之中的一个。
语法
switch(n)
{
case 1:
运行代码块 1
break;
case 2:
运行代码块 2
break;
default:
n 与 case 1 和 case 2 不同一时候运行的代码
}
工作原理：首先设置表达式 n（一般是一个变量）。随后表达式的值会与结构中的每一个 case 的值做比較。假设存在匹配，则与该 case 关联的代码块会被运行。
请使用 break 来阻止代码自己主动地向下一个 case 执行。
<html>
<head>
</head>
<body>
<button type="button" onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var day=new Date().getDay();
switch (day)
{
case 0:
x= "Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
JavaScript For 循环
循环能够将代码块运行指定的次数。
JavaScript 循环
假设您希望一遍又一遍地执行同样的代码，而且每次的值都不同，那么使用循环是非常方便的。
我们能够这样输出数组的值：
document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>");
只是通常我们这样写：
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
不同类型的循环
JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 相同当指定的条件为 true 时循环指定的代码块
JavaScript 错误 - Throw、Try 和 Catch
try 语句測试代码块的错误。
catch 语句处理错误。
throw 语句创建自己定义错误。
JavaScript 測试和捕捉
try 语句同意我们定义在运行时进行错误測试的代码块。
catch 语句同意我们定义当 try 代码块错误发生时，所运行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
语法
try
{
//在这里执行代码
}
catch(err)
{
//在这里处理错误
}
实例
在以下的样例中，我们有益在 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>
Throw 语句
throw 语句同意我们创建自己定义错误。
正确的技术术语是：创建或抛出异常（exception）。
假设把 throw 与 try 和 catch 一起使用，那么您可以控制程序流。并生成自己定义的错误消息。
语法
throw exception
异常能够是 JavaScript 字符串、数字、逻辑值或对象。
实例
本例检測输入变量的值。
假设值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自己定义的错误消息：
<html>
<head>
</head>
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + "." ;
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
</body>
</html>JavaScript 可用来在数据被送往server前对 HTML 表单中的这些输入数据进行验证。必填（或必选）项目
以下的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，而且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
以下是连同 HTML 表单的代码：
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==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>
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笔记的主要内容，如果未能解决你的问题，请参考以下文章