JavaScript实现
JavaScript 函数和事件
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。如果我们把 JavaScript
代码放入函数中,就可以在事件发生时调用该函数。
外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript
文件的文件扩展名是 .js。
例如:
<script src="myScript.js"></script>```
##JavaScript 输出
**操作 HTML 元素**
如需从 `JavaScript `访问某个 `HTML` 元素,您可以使用`document.getElementById(id)` 方法。
请使用 "`id`" 属性来标识` HTML` 元素:
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>```
JavaScript
由 web
浏览器来执行。在这种情况下,浏览器将访问 id="demo"
的 HTML
元素,并把它的内容(innerHTML)
替换为 "My First JavaScript"
。
- 下面的例子直接把
<p>
元素写到 HTML 文档输出中:
<script>
document.write("<p>My First JavaScript</p>");
</script>```
**注意**
请使用 `document.write() `仅仅向文档输出写内容。
如果在文档已完成加载后执行 `document.write`,整个 `HTML` 页面将被覆盖。
##JavaScript 语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
`JavaScript` 代码(或者只有 `JavaScript`)是 `JavaScript `语句的序列。
浏览器会按照编写顺序来执行每条语句。
- JavaScript 对大小写是敏感的
函数 `getElementById` 与` getElementbyID `是不同的。同样,变量 `myVariable `与` MyVariable `也是不同的。
- 空格
`JavaScript `会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。
- 对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。例如:
document.write("Hello
World!");
**注意**
`JavaScript `是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
##JavaScript 变量
`JavaScript` 语句和 `JavaScript `变量都对大小写敏感。
未使用值来声明的变量,其值实际上是 `undefined`。
如果重新声明 `JavaScript `变量,该变量的值不会“丢失”;
##JavaScript 数据类型
- `JavaScript `拥有动态类型
`JavaScript `拥有动态类型。这意味着相同的变量可用作不同的类型 ,例如:
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串```
-
JavaScript
数字
JavaScript
只有一种数字类型。数字可以带小数点,也可以不带,例如:
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写```
极大或极小的数字可以通过科学(指数)计数法来书写,例如:
var y=123e5; // 12300000
var z=123e-5; // 0.00123```
- JavaScript 数组
下面的代码创建名为cars
的数组:
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者
var cars=new Array("Audi","BMW","Volvo");```
##JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 `(name : value)` 来定义。属性由逗号分隔
`var person={firstname:"Bill", lastname:"Gates", id:5566};`
- `Undefined` 和` Null`
`Undefined` 这个值表示变量不含有值。可以通过将变量的值设置为`null`来清空变量。
- 在面向对象的语言中,属性和方法常被称为对象的成员。
`JavaScript` 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。
- 访问对象的方法
`objectName.methodName()`
使用 `String` 对象的 `toUpperCase()` 方法来把文本转换为大写:
var message="Hello world!";
var x=message.toUpperCase();```
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
- JavaScript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词function
。
function functionname()
{
这里是要执行的代码
}```
- 调用带参数的函数
在调用函数时,您可以向其传递值,这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数,由逗号 (,) 分隔。
`myFunction(argument1,argument2)`
- 带有返回值的函数
有时,我们会希望函数将值返回调用它的地方。通过使用` return `语句就可以实现。
在使用 `return` 语句时,函数会停止执行,并返回指定的值。例如:
function myFunction()
{
var x=5;
return x;
} ```
-
JavaScript
变量的生存期
JavaScript
变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
JavaScript 运算符
- 用于字符串的
+
运算符
+
运算符用于把文本值或字符串变量加起来(连接起来)。
如需把两个或多个字符串变量连接起来,请使用+
运算符。或者把空格插入表达式中。
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
在以上语句执行后,变量 txt3 包含的值是 "What a verynice day"。```
-` JavaScript `比较和逻辑运算符
比较和逻辑运算符用于测试 `true` 或 `false`。
- `JavaScript Switch `语句
`switch `语句用于基于不同的条件来执行不同的动作。
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}```
-
default
关键词
使用default
关键词来规定匹配不存在时做的事情。
JavaScript For 循环
不同类型的循环
-
JavaScript
支持不同类型的循环:
for
- 循环代码块一定的次数
for/in
- 循环遍历对象的属性
while
- 当指定的条件为 true 时循环指定的代码块
do/while
- 同样当指定的条件为 true 时循环指定的代码块
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}```
##JavaScript While 循环
`While` 循环会在指定条件为真时循环执行代码块。
- `do/while` 循环
`do/while` 循环是 `while` 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。
##JavaScript Break 和 Continue 语句
`break` 语句用于跳出循环。
`continue` 用于跳过循环中的一个迭代。
for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "
";
}
此循环跳过了值 3```
JavaScript 错误 - Throw、Try 和 Catch
try
语句测试代码块的错误。
catch
语句处理错误。
throw
语句创建自定义错误。
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}```
- `Throw` 语句
`throw` 语句允许我们创建自定义错误。
正确的技术术语是:创建或抛出异常`(exception)`。
如果把 `throw` 与 `try` 和 `catch` 一起使用,那么您能够控制程序流,并生成自定义的错误消息。
##JavaScript 表单验证
`JavaScript `可用来在数据被送往服务器前对` HTML` 表单中的这些输入数据进行验证。
被 `JavaScript `验证的这些典型的表单数据有:
用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域` (numeric field) `中输入了文本?