JS 教程

1简介

1、JavaScript 是脚本语言

     1.1轻量级的编程语言

     1.2可插入 HTML 页面的编程代码

     1.3可由所有的现代浏览器执行

2、您将学到什么

     2.1JavaScript：写入 HTML 输出

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph</p>");

     2.2JavaScript：对事件作出反应

<button type="button" onclick="alert('Welcome!')">点击这里</button>

     2.3JavaScript：改变 HTML 内容

x=document.getElementById("demo")  //查找元素

x.innerHTML="Hello JavaScript";    //改变内容

     2.4JavaScript：改变 HTML 图像

     2.5JavaScript：改变 HTML 样式

x=document.getElementById("demo")  //找到元素

x.style.color="#ff0000";           //改变样式

     2.6JavaScript：验证输入

if isNaN(x) {alert("Not Numeric")};

2实现

1、<script> 标签

     1.1<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script>

 alert("My First JavaScript");

</script>

2、JavaScript 函数和事件

     2.1通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

     2.2<head> 或 <body> 中的 JavaScript

3、外部的 JavaScript

     3.1外部 JavaScript 文件的文件扩展名是 .js。

<!DOCTYPE html>

<html>

 <body>

  <script src="myScript.js"></script>

 </body>

</html>

3输出

1、操作 HTML 元素

     1.1如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

<!DOCTYPE html>

<html>

 <body>

  <h1>My First Web Page</h1>

  <p id="demo">My First Paragraph</p>

  <script>

   document.getElementById("demo").innerHTML="My First JavaScript";

  </script>

 </body>

</html>

2、写到文档输出

     2.1下面的例子直接把 <p> 元素写到 HTML 文档输出中：

<!DOCTYPE html>

<html>

 <body>

  <h1>My First Web Page</h1>

  <script>

   document.write("<p>My First JavaScript</p>");

  </script>

 </body>

</html>

4语句

1、JavaScript 语句

     1.1JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

document.getElementById("demo").innerHTML="Hello World";

     1.2分号用于分隔 JavaScript 语句。

2、JavaScript 代码

     2.1JavaScript 代码（或者只有 JavaScript）是 JavaScript 语句的序列。

document.getElementById("demo").innerHTML="Hello World";

document.getElementById("myDIV").innerHTML="How are you?";

3、JavaScript 代码块

     3.1JavaScript 语句通过代码块的形式进行组合。

     3.2块由左花括号开始，由右花括号结束。

     3.3块的作用是使语句序列一起执行。

function myFunction()

{

 document.getElementById("demo").innerHTML="Hello World";

 document.getElementById("myDIV").innerHTML="How are you?";

}

4、JavaScript 对大小写敏感。

5、空格

     5.1JavaScript 会忽略多余的空格。

6、对代码行进行折行

     6.1您可以在文本字符串中使用反斜杠对代码行进行换行。

document.write("Hello \

World!");

5注释

1、JavaScript 注释

     1.1我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

     1.2单行注释以 // 开头。

// 输出标题：

document.getElementById("myH1").innerHTML="Welcome to my Homepage";

// 输出段落：

document.getElementById("myP").innerHTML="This is my first paragraph.";

2、JavaScript 多行注释

     2.1多行注释以 /* 开始，以 */ 结尾。

/*

下面的这些代码会输出

一个标题和一个段落

并将代表主页的开始

*/

document.getElementById("myH1").innerHTML="Welcome to my Homepage";

document.getElementById("myP").innerHTML="This is my first paragraph.";

3、使用注释来阻止执行

//document.getElementById("myH1").innerHTML="Welcome to my Homepage";

document.getElementById("myP").innerHTML="This is my first paragraph.";

/*

document.getElementById("myH1").innerHTML="Welcome to my Homepage";

document.getElementById("myP").innerHTML="This is my first paragraph.";

*/

4、在行末使用注释

var x=5;    // 声明 x 并把 5 赋值给它

var y=x+2;  // 声明 y 并把 x+2 赋值给它

6变量

1、变量是存储信息的容器。

var x=2;

var y=3;

var z=x+y;

2、JavaScript 变量

     2.1变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

     2.2变量必须以字母开头

     2.3变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

     2.4变量名称对大小写敏感（y 和 Y 是不同的变量）

3、JavaScript 数据类型

     3.1当您向变量分配文本值时，应该用双引号或单引号包围这个值。

     3.2当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

var pi=3.14;

var name="Bill Gates";

var answer='Yes I am!';

4、声明（创建） JavaScript 变量

var carname="Volvo";

5、一条语句，多个变量

var name="Gates", age=56, job="CEO";

6、Value = undefined

     6.1在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

7、重新声明 JavaScript 变量

     如果重新声明 JavaScript 变量，该变量的值不会丢失：

var carname="Volvo";

var carname;

8、JavaScript 算数

y=5;

x=y+2;

7数据类型

1、JavaScript 拥有动态类型

     1.1这意味着相同的变量可用作不同的类型：

var x                // x 为 undefined

var x = 6;           // x 为数字

var x = "Bill";      // x 为字符串

2、JavaScript 字符串

     2.1字符串是存储字符（比如 "Bill Gates"）的变量。

     2.2字符串可以是引号中的任意文本。您可以使用单引号或双引号：

var carname="Bill Gates";

var carname='Bill Gates';

3、JavaScript 数字

     3.1JavaScript 只有一种数字类型。

var x1=34.00;      //使用小数点来写

var x2=34;         //不使用小数点来写

var y=123e5;      //

var z=123e-5;     // 0.00123

4、JavaScript 布尔

     4.1布尔（逻辑）只能有两个值：true 或 false。

var x=true

var y=false

5、JavaScript 数组

var cars=new Array("Audi","BMW","Volvo");

6、JavaScript 对象

     6.1对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

7、Undefined 和 Null

     7.1Undefined 这个值表示变量不含有值。

     7.2可以通过将变量的值设置为 null 来清空变量。

cars=null;

person=null;

8、声明变量类型

     8.1当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;

var x=      new Number;

var y=      new Boolean;

var cars=   new Array;

var person= new Object;

8对象

1、属性和方法

     1.1属性是与对象相关的值。

     1.2方法是能够在对象上执行的动作。

2、JavaScript 中的对象

     2.1在 JavaScript 中，对象是数据（变量），拥有属性和方法。

3、创建 JavaScript 对象

     3.1JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。

4、访问对象的属性

objectName.propertyName

5、访问对象的方法

objectName.methodName()

9函数

     函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

1、JavaScript 函数语法

     1.1函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()

{

这里是要执行的代码

}

2、调用带参数的函数

myFunction(argument1,argument2)

3、带有返回值的函数

function myFunction()

{

 var x=5;

 return x;

}

4、局部 JavaScript 变量

     4.1在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。

5、全局 JavaScript 变量

     5.1在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

6、JavaScript 变量的生存期

     6.1JavaScript 变量的生命期从它们被声明的时间开始。

     6.2局部变量会在函数运行以后被删除。

     6.3全局变量会在页面关闭后被删除。

7、向未声明的 JavaScript 变量来分配值

     7.1如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

carname="Volvo";

10运算符

1、运算符 = 用于赋值。

     运算符 + 用于加值。

y=5;

z=2;

x=y+z;

2、JavaScript 算术运算符

     2.1算术运算符用于执行变量与/或值之间的算术运算。

运算符描述例子结果+加x=y+2x=7-减x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余数 (保留整数)x=y%2x=1++累加x=++yx=6--递减x=--yx=4

3、JavaScript 赋值运算符

     3.1赋值运算符用于给 JavaScript 变量赋值。

运算符例子等价于结果=x=y x=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0

4、用于字符串的 + 运算符

     4.1+ 运算符用于把文本值或字符串变量加起来（连接起来）。

txt1="What a very";

txt2="nice day";

txt3=txt1+txt2;

5、对字符串和数字进行加法运算

x=5+5;

document.write(x);

x="5"+"5";

document.write(x);

x=5+"5";

document.write(x);

x="5"+5;

document.write(x);

     如果把数字与字符串相加，结果将成为字符串。

11比较

1、比较运算符

     1.1比较运算符在逻辑语句中使用，以测定变量或值是否相等。

运算符描述例子==等于x==8 为 false===全等（值和类型）x===5 为 true；x==="5" 为 false!=不等于x!=8 为 true>大于x>8 为 false<小于x<8 为 true>=大于或等于x>=8 为 false<=小于或等于x<=8 为 true

2、如何使用

     2.1可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：

if (age<18) document.write("Too young");

3、逻辑运算符

     3.1逻辑运算符用于测定变量或值之间的逻辑。

运算符描述例子&&and(x < 10 && y > 1) 为 true||or(x==5 || y==5) 为 false!not!(x==y) 为 true

4、条件运算符

variablename=(condition)?value1:value2 

12If...Else 语句

1、条件语句

     1.1通常在写代码时，您总是需要为不同的决定来执行不同的动作。

     1.2在 JavaScript 中，我们可使用以下条件语句：

      if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

      if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

      if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行

      switch 语句 - 使用该语句来选择多个代码块之一来执行

2、If 语句

     2.1只有当指定条件为 true 时，该语句才会执行代码。

if (条件)

  {

   只有当条件为 true 时执行的代码

  }

3、If...else 语句

     3.1请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

if (条件)

  {

  当条件为 true 时执行的代码

  }

else

  {

  当条件不为 true 时执行的代码

  }

4、If...else if...else 语句

     4.1使用 if....else if...else 语句来选择多个代码块之一来执行。

if (条件 1)

  {

  当条件 1 为 true 时执行的代码

  }

else if (条件 2)

  {

  当条件 2 为 true 时执行的代码

  }

else

  {

  当条件 1 和 条件 2 都不为 true 时执行的代码

  }

13Switch 语句

1、JavaScript Switch 语句

     1.1请使用 switch 语句来选择要执行的多个代码块之一。

switch(n)

{

case 1:

  执行代码块 1

  break;

case 2:

  执行代码块 2

  break;

default:

  n 与 case 1 和 case 2 不同时执行的代码

}

2、default 关键词

     2.1请使用 default 关键词来规定匹配不存在时做的事情：

var day=new Date().getDay();

switch (day)

{

case 6:

  x="Today it's Saturday";

  break;

case 0:

  x="Today it's Sunday";

  break;

default:

  x="Looking forward to the Weekend";

}

14For

1、JavaScript 循环

     1.1如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

for (var i=0;i<cars.length;i++)

{

document.write(cars[i] + "<br>");

}

2、不同类型的循环

      2.1JavaScript 支持不同类型的循环：

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

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

      while - 当指定的条件为 true 时循环指定的代码块

      do/while - 同样当指定的条件为 true 时循环指定的代码块

3、For 循环

      3.1for 循环是您在希望创建循环时常会用到的工具。

for (语句 1; 语句 2; 语句 3)

  {

  被执行的代码块

  }

     语句 1 在循环（代码块）开始前执行

     语句 2 定义运行循环（代码块）的条件

     语句 3 在循环（代码块）已被执行之后执行

4、语句 1

     4.1通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

5、语句 2

     5.1通常语句 2 用于评估初始变量的条件。

     5.2如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

6、语句 3

     6.1通常语句 3 会增加初始变量的值。

7、For/In 循环

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

var person={fname:"John",lname:"Doe",age:25};

for (x in person)

  {

  txt=txt + person[x];

  }

15While

1、while 循环

     1.1While 循环会在指定条件为真时循环执行代码块。

while (条件)

  {

  需要执行的代码

  }

2、do/while 循环

     2.1do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。

do

  {

  需要执行的代码

  }

while (条件);

16Break

1、Break 语句

      1.1break 语句可用于跳出循环。

      1.2break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：

for (i=0;i<10;i++)

  {

  if (i==3)

    {

    break;

    }

  x=x + "The number is " + i + "<br>";

  }

2、Continue 语句

     2.1continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

for (i=0;i<=10;i++)

 {

 if (i==3) continue;

  x=x + "The number is " + i + "<br>";

  }

17错误

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

1、错误一定会发生

     1.1当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。

2、JavaScript 抛出错误

     2.1当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

3、JavaScript 测试和捕捉

      3.1try 语句允许我们定义在执行时进行错误测试的代码块。

      3.2catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

      3.3JavaScript 语句 try 和 catch 是成对出现的。

try

  {

  //在这里运行代码

  }

catch(err)

  {

  //在这里处理错误

  }

4、Throw 语句

     4.1throw 语句允许我们创建自定义错误。

     4.2正确的技术术语是：创建或抛出异常（exception）。

throw exception

18验证

1、JavaScript 表单验证

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

     1.2被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？

用户输入的邮件地址是否合法？

用户是否已输入合法的日期？

用户是否在数据域 (numeric field) 中输入了文本？

2、必填（或必选）项目

     2.1下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。

function validate_required(field,alerttxt)

{

 with (field)

{

 if (value==null||value=="")

  {alert(alerttxt);return false}

 else {return true}

}

}

3、E-mail 验证

     3.1下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

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}

}

}
巴特西

JS 教程

最新文章

热门文章
