javascript在html中实现_javascript在html文档中自己生成-优快云博客

本文链接：https://blog.youkuaiyun.com/pursuer211/article/details/17463181

本文介绍了HTML中使用JavaScript的基本方法，包括直接在HTML中编写JS脚本及引用外部JS文件，详细讲解了如何通过ID、标签名和类名获取HTML元素，并演示了如何改变HTML内容、属性和样式。

1、html中使用javascript主要有两种方式：

1、直接在html中写js脚本

2、通过引用外部js文件

1.1、直接在html中写js脚本

HTML 中的的js脚本必须位于 <script> 与 </script> 标签之间。<script> 与 </script>脚本可被放置在 HTML 页面的 <body> 或 <head> 部分中，在或者同时放入<body> 或 <head>中。

提示：那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

下面两段代码效果是相同的，函数myFunction()会在点击按钮时被调用:

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

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

1.2、通过引用外部js文件

在<script> 标签的 "src" 属性中设置该 .js 文件，在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。

如下面代码：

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

提示：被引用的外部文件不能包括<script>标签。

2、操作HTML元素

1、通过ID获取html元素

使用 document.getElementById(id) 方法，通过HTML元素id获取元素。

2、通过标签名获取html元素

使用getElementsByTagName(标签名) 方法，通过标签名获取元素

getElementsByTagName标签名() 返回带有指定标签名的所有元素。

例：

x=document.getElementsByTagName("p");
document.write("第一段的文本: " + x[0].innerHTML);

3、通过类名class获取所有的html元素

使用document.getElementsByClassName(class);方法，通过class获取所有元素。

  document.getElementsByClassName("intro");

上面的例子返回包含 class="intro" 的所有元素的一个列表：

4、改变 HTML 内容

innerHTML 用来设置或获取位于html元素起始和结束标签内的HTML。几乎所有的元素都有innerHTML属性，它是一个字符串，取HTML当前标签的起始和结束里面的内容。

例：

<!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"; //设置html
alert(document.getElementById("demo").innerHTML);
</script>

</body>
</html>

5、改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

例：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="/i/eg_tulip.jpg" onclick="changeImage()"/>

<script>
 function changeImage()
 {
   document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";
 }
</script>

<p>原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。</p>

</body>
</html>

6、改变HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

  document.getElementById(id).style.property=new style

更多属性请见： “HTML DOM Style 对象介绍 ”

例：

下面的例子会改变 <p> 元素的样式：

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

7、向文档输出内容

document.write()或document.writeln()方法向文档输出写内容，可以包括元素标签，

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

提示：如果在文档已完成加载后执行 document.write，整个HTML 页面将被覆盖。( 原因请参见“document.write()/document.open()/document.close() 用法”)

比如下面代码，document.write输出的内容将会覆盖页面上原有的内容。

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

3、JavaScript 语句

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

2、分号用于分隔 JavaScript 语句，但在 JavaScript 中，用分号来结束语句是可选的，就是说可以省略分号。

3、浏览器会按照编写顺序来执行每条语句。

4、 JavaScript 对大小写是敏感的。

4、JavaScript 注释

1、单行注释以 // 开头。

如：

// 输出标题：
document.getElementById("myH1").innerHTML="Welcome to my Homepage";

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

如：

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";

5、JavaScript 数据类型

JavaScript的数据类型有：字符串、数字、布尔、数组、对象、Null、Undefined

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。

如：

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

5.1、JavaScript 字符串

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

如：

var carname="Bill Gates";
var carname='Bill Gates';

2、可以在字符串中使用引号，只要不匹配包围字符串的引号即可（即不和最外层的引号匹配）。

如：

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

5.2、JavaScript 数字

1、JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。

例：

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

2、极大或极小的数字可以通过科学（指数）计数法来书写。

例：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

5.3、JavaScript 布尔

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

如：

var x=true
var y=false

5.4、JavaScript 数组

1、创建数组的三种写法

方法1：

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo"

或

var cars=new Array();
cars.push("Audi");
cars.push("BMW");

cars.push("Volvo");

注：数组Array对象的其他方法请参考：链接

方法2：

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

方法3：

var cars=["Audi","BMW"];

注意和对象创建的区别，对象的创建用的是大括号{}

2、数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。


5.5、JavaScript 对象
       对象只是带有属性和方法的特殊数据类型，JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等等。
 JavaScript 提供多个内建对象，比如 String、Date、Array 等等。此外，JavaScript 允许自定义对象。
     1、创建“对象”，使用对象构造器
          语法：     
function ObjectName(param1,param2,param3,...)
{
this.param1=param1;
this.param2=param2;
this.param3=param3;
...
this.method1 = function()
{
     ...
 }
this.method2 = function()
{
     ...
 }
...
}

如：

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.getName = function()
{
     return this.firstname + this.lastname;
 }
}

2、创建“对象实例”
方法1：

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
person.getName = function(){
           return person.firstname + person.lastname;
     }

方法2：

var person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue",getName : function(){ return "LiLei";}};

注意：属性名和方法名可以用单引号‘’或是双引号“”括住，也可以不括，但是如果属性名是保留字就必须用括号括住。所以上面的写法和下面的写法是等同的：

var person={"firstname":"John","lastname":"Doe","age":50,"eyecolor":"blue","getName" : function(){ return "LiLei";}};

对象实例的方法中如果调用对象实例的属性，必须在属性前加this.,其中this就是值对象实例

<!DOCTYPE html>
<html>
<body>
<script>
var person = { "firstname":"John",  
               "lastname":"Doe", 
               "age":50,
               "eyecolor":"blue",
               "getName":function(){
                    return this.firstname + this.lastname;
                 }
           };  

document.writeln(person.firstname);
document.writeln(person["lastname"]);
document.writeln(person.getName());
</script>
</body>
</html>

输出结果为：

  John 
  Doe 
  John Doe

方法3：

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
var p = new person();

3、可以向已有“对象实例”添加新属性和新方法

如：

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
var p = new person();
p.sex = "man";                    //新增属性
p.getName = function(){           //新增方法
     return p.firstname + " " + p.lastname;
}

4.也可以向“对象”添加新属性和新方法
如：

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;
}
}
var p =new person("Steve","Jobs",56,"green");
person.sex = "man";
person.getName = function(){        //对象方法
     return p.firstname + " " + p.lastname;
}

document.write(person.getName());

5.“对象方法”和“对象实例方法”互不影响，互不覆盖，即便是它们拼写一致。
例：

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.getName = function()         //对象实例方法
{
  return this.firstname + " " + this.lastname;
}
}
var p =new person("Steve","Jobs",56,"green");
person.getName = function(){     //对象方法
     return "ZHANGSAN";
}

document.write(person.getName()); //调用对象方法
document.write("<br>"); 
document.write(p.getName());  //调用对象实例方法

打印的结果分别是：

ZHANGSAN
Steve Jobs

6.访问对象/对象实例的属性和方法
对象实例.属性名
对象实例["属性名"]
对象实例.方法名()
对象.属性名
对象["属性名"]
对象.方法名()
例如：

<!DOCTYPE html>
<html>
<body>
<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
//对象属性
person["address"] = "anhui";
var p = new person("Li");
p["lastname"]="Lei";
p.age = 19;
document.writeln(p["firstname"]);
document.writeln(p.lastname);
document.writeln(p.age);
document.writeln(person.eyecolor);
document.writeln(person.address);
document.writeln("<br/>");

var boy ={"firstname":"John","lastname":"Doe","age":50,"eyecolor":"blue"};  
document.writeln(boy.firstname);
document.writeln(boy["lastname"]);
</script>
</body>
</html>

执行结果如下：

Li Lei 19 undefined anhui 
John Doe

7.JavaScript for...in 循环对象实例属性
语法：
for (对象中的变量)
{
要执行的代码
}
例：

var person={fname:"Bill",lname:"Gates",age:56};

for (x in person)
  {
  txt=txt + person[x];
  }

5.6、JavaScript 函数

1、JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
这里是要执行的代码
}

2、局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
只要函数运行完毕，本地变量就会被删除。

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

4、向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
例：

function myFunction(a,b)
{  c = 2;                  //  自动将c变量声明为全量变量
   return a*b*c;
}

document.getElementById("demo").innerHTML=myFunction(4,3);
alert(c);    //此时c的值为2

5、JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

5.7、JavaScript 运算符

1、JavaScript 算术运算符

运算符	描述	例子	结果
+	加	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

2、JavaScript 赋值运算符

运算符	例子	等价于	结果
=	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

3、字符串的 + 运算符
+ 运算符用于把文本值或字符串变量加起来（连接起来）。
例：
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

对字符串和数字进行加法运算。
规则是：
如果把数字与字符串相加，结果将成为字符串。
例：

x=5+5;
document.write(x);


x="5"+"5";
document.write(x);


x=5+"5";
document.write(x);


x="5"+5;
document.write(x);

结果是：

5.8、比较和逻辑运算符

1、比较运算符

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

2、逻辑运算符

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

3、条件运算符
语法：
variablename=(condition)?value1:value2

例：
greeting=(visitor=="PRES")?"Dear President ":"Dear ";

如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。

5.9、If...Else 语句

在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
if (expression)
{
...
}
当expression为下面列出的值时为假：
false
null
undefined
空字符串‘’
数字0
数字NaN
其他的所有值都被当做真，包括true，字符串'false'，空格字符串‘ ’，以及所有的对象。
另外上面在上面为假的值前加上否运算符！，比如：！0，表达式就变成真了。

5.10、Switch 语句

语法
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}

5.11、循环

JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
1、For循环
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 在循环（代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行。
例：
for (var i=0; i<5; i++)
{
x=x + "The number is " + i + "<br>";
}
2、For/In 循环
JavaScript for/in 语句循环遍历对象的属性或数组：
例：
var person={fname:"John",lname:"Doe",age:25};
//遍历对象属性
for (x in person)
{
txt=txt + person[x];
}
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
//遍历数组
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
3、while 循环
While 循环会在指定条件为真时循环执行代码块。
语法
while (条件)
{
需要执行的代码
}

4、do/while 循环
语法
do
{
需要执行的代码
}
while (条件);

5.12、break和continue

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
5.13、错误处理

1、常见错误
当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误：
a.可能是语法错误，通常是程序员造成的编码错误或错别字。
b.可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
c.可能是由于来自服务器或用户的错误输出而导致的错误。
d.也可能是由于许多其他不可预知的因素。

2、处理语句作用说明
try 语句抛出错误的代码块。
catch 语句处理错误。
throw 语句创建自定义错误。

异常处理语法：
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}

3、Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

语法：
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。

例：

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

4、异常对象err的属性
name 错误名
number 错误号
description 描述
message 错误信息
例：

var txt="";
function message()
{
try
  {
  adddler("Welcome guest!");   //该方法不存在
  }
catch(err)
  {
  txt="本页有一个错误。\n\n";
  txt+="错误名：" + err.name + "\n\n";
  txt+="错误号：" + err.number + "\n\n";
  txt+="错误信息：" + err.message + "\n\n";
  txt+="错误描述：" + err.description + "\n\n";


  txt+="点击确定继续。\n\n";
  document.write(txt);
  }
}

执行结果：
本页有一个错误。错误名：TypeError 错误号：-2146823281 错误信息：缺少对象错误描述：缺少对象点击确定继续。

5、自定义异常
new Error(number, message)
例：

var txt="";
function message()
{
try
  {
    throw new Error("123456", "Welcome guest Error!");
  }
catch(err)
  {
  txt="本页有一个错误。\n\n";
  txt+="错误名：" + err.name + "\n\n";
  txt+="错误号：" + err.number + "\n\n";
  txt+="错误信息：" + err.message + "\n\n";
  txt+="错误描述：" + err+ "\n\n";


  txt+="点击确定继续。\n\n";
  document.write(txt);
  }
}

执行结果：
本页有一个错误。错误名：Error 错误号：123456 错误信息：Welcome guest Error! 错误描述：Welcome guest Error! 点击确定继续。
6、常见的异常
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError