文章标题

来源：互联网发布：trustdata移动大数据编辑：程序博客网时间：2024/06/04 18:28

JavaScript的教程

1.JavaScript实现

HTML中的脚本必须位于<script></script>之间，
而脚本可放于HTML页面的<body>或<head>中

<script>                    alert("My First JavaScript");</script>

现在script标签中不用再写type=”text/javascript”,因为JavaScript是所有现代浏览器乙级HTML5中的默认脚本语言。

和中JavaScript函数的使用方法一样，将script标签套用进去即可，可通过button触发事件，例如：

<!DOCTYPE html><html>    <body>        <h1>My Web Page</h1>        <p id="demo">A Paragraph</p>        <button type="button" onclick="myFunction()">Try it</button>        <script>        function myFunction()        {        document.getElementById("demo").innerHTML="My First JavaScript Function";        }        </script>    </body></html>

JavaScript也可以写在外部，并将文件拓展名命名为.js,在script标签中用src调用

<!DOCTYPE html><html>    <body>        <script src="myScript.js"></script>    </body></html>

2.JavaScript的输出

①通过操作操作HTML元素来输出，例如可以通过指定的ID来访问HTML元素

<!DOCTYPE html><html>    <body>    <h1>我的第一张网页</h1>    <p id="demo">我的第一个段落</p>        <script>        document.getElementById("demo").innerHTML="我的第一段 JavaScript";        </script>    </body></html>

②写到文档输出，例如，

<script>document.write("<p>我的第一段 JavaScript</p>");</script>

但是，document.write()仅仅向文档输出写内容，如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖

3.JavaScript语句

①JavaScript用分号分割JavaScript语句，这是可选的，也可以不带分号
②JavaScript会按照编写的顺序来执行每一条语句
③JavaScript语句通过代码块的形式进行组合
④JavaScript对大小写敏感
⑤JavaScript会忽略多余的空格
⑥JavaScript可在文本字符串中使用反斜杠对代码行进行换行，例如

document.write("Hello \World!");**

**warning：**JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

4.JavaScript注释（与C++一样）

5.JavaScript变量

变量是存储信息的容器

JavaScript变量的注意事项

变量可以以字母，$和_字符开头，但是尽量以字母开头
变量对大小写敏感

JavaScript数据类型

JavaScript变量可以保存其他数据类型，比如文本值（name=“likai”）
JavaScript变量有很多种类型，需要注意的是当我们向变量分配文本值时，应该用双引号或单引号包围这个值

声明（创建）JavaScript变量

这部分与C++类似，需要注意的是，重新声明JavaScript变量，该变量的值不会丢失，例如，

var carname="Volvo";var carname;

6.JavaScript数据类型

JavaScript拥有动态类型，相同的变量可作用于不同的类型：

JavaScript可以是引号中的任意文本，但不能匹配包围字符串的引号，例如，

var answer="Nice to meet you!";  var answer="He is called 'Bill'";  var answer='He is called "Bill"';

JavaScript数字，布尔略
JavaScript数组注意，声明JavaScript数组不需要写明几个，例如，cars后面不用写数组的大小
```
var cars=new Array();cars[0]="Audi";cars[1]="BMW";cars[2]="Volvo";
```
当然下面两种方法也可以：
```
var cars=new Array("Audi","BMW","Volvo");
```
或
```
var cars=["Audi","BMW","Volvo"];
```
JavaScript对象
对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式（name：value）来定义，属性间由逗号分隔，例如
```
var person={firstname : "Bill",lastname  : "Gates",id        :  5566};
```
两种寻址的方式：
```
name=person.lastname;name=person["lastname"];
```
Undefined和Null
Undefined这个值表示变量不含有值
可以通过将变量的值设置为Null来清空变量
可用关键词“new”来声明其类型，例如，
```
var carname=new String
```

7.JavaScript对象

JavaScript中的几乎所有事物都是对象：字符串、数字、数组、日期、函数，等等。也可以自己创建对象，例如，创建person对象并赋值。

<!DOCTYPE html><html><body><script>person=new Object();person.firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";document.write(person.firstname + " is " + person.age + " years old.");</script></body></html>

访问对象的属性：

对象名.对象属性

访问对象的方法：
对象名.对象方法()

8.JavaScript函数

函数是由时间驱动的或者当他被调用时执行的可重复使用的代码块
1. JavaScript函数语法

    function functionname（参数）{            执行的代码    }

与C++和Java不同的是，声明函数时不用写明参数的类型，只写其名即可，例如，

    <button onclick="myFunction('Bill Gates','CEO')">点击这里</button>    <script>    function myFunction(name,job)    {    alert("Welcome " + name + ", the " + job);    }    </script>

结果为Welcome Bill Gates, the CEO
2. 带有返回值的函数，return即可，

    document.getElementById("demo").innerHTML=myFunction();

demo” 元素的 innerHTML 将成为 5，也就是函数 “myFunction()” 所返回的值。
您可以使返回值基于传递到函数中的参数。
3. 局部变量和全局变量以及JavaScript变量的生存期与C++类似，略
4. 如果把值赋给了未声明的变量，该变量将被自动作为全局变量声明

9.JavaScript 运算符(与C++类似)

10.JavaScript比较和逻辑运算符

比较和逻辑运算符用于测试true和false，内容与C++大致类似，在条件运算符处稍有不同，
语法：
variablename=(condition)?value1:value2
例子：
greeting=(visitor==”PRES”)?”Dear President “:”Dear “;

11.JavaScript条件判断语句（if…else和Switch）与C++一样

12.JavaScript循环（while循环和for循环）

for循环

for - 循环代码块一定的次数

for (语句 1; 语句 2; 语句 3){           被执行的代码块}

for/in 语句循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25};for (x in person){    txt=txt + person[x];}

结果

    JohnDoe25

3.while循环和do while循环（略）

13.JavaScript Break和Continue语句

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

JavaScript 标签

语法

    break labelname;        continue labelname;

continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块，例如

    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>");    }

14.JavaScript错误 - Throw、 Try和Catch

try语句测试代码块的错误
catch语句处理错误
throw语句创建自定义错误

try catch语句

    try{    //在这里运行代码    }catch(err)    {    //在这里处理错误       }

throw语句

正确的技术术语是：创建或抛出异常
语法：
throw exception
例如：

<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>

15.JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
1. 用户是否已填写表单中的必填项目？
2. 用户输入的邮件地址是否合法？
3. 用户是否已输入合法的日期？
4. 用户是否在数据域 (numeric field) 中输入了文本？

阅读全文

0 0