HTML中调用JavaScript的几种情况和规范写法

比较简单,基础。

一、引用外部文件中的js脚本

< script  type ="text/javascript"  src ="ext.js" ></ script >

也可以象下面这样写,language不是必要的,但是推荐上面的写法

< script  language ="javascript"  type ="text/javascript"  src ="ext.js" ></ script >


二、页面内引用:

< script  type ="text/javascript" > // <![CDATA[
var  x  =   0 ;
function  fn(args) {
 
// ...

// ]]></script>

加上“//<![CDATA[” 和 “//]]>”是为了兼容XHTML,是推荐的写法,HTML时代一般用“<!--”和“//-->”

三、在一些HTML控件的事件属性中使用(一般事件为onxxx,如onmouseover,onclick,onchange)

< body  onload ="alert('loaded');" >
< input  type ="text"  name ="username"  onclick ="alert(this.value);"   />

四、在一些HTML控件的非事件属性中使用(注意:一定要加javascript:)

< href ="javascript:void(0);"  onclick ="alert(this.innerText);" > my blog:http://blog.csdn.net/kimsoft </ a >


 



JavaScript在HTML的引用共有4种:

  • (1)页头引入(head标签内);
  • (2)页中引入(body标签内);
  • (3)元素事件中引入(标签属性中引入);
  • (4)引入外部JS文件;

By the way,这4种引入方式都very very 常用,大家一定要好好理解一下喔。

一、页头引入JS

在页头引入JS,指的就是在<head></head>标签内编写JavaScript。

语法:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
     <title></title>
     <script type= "text/javascript" >
         //这里编写JavaScript程序
     </script>
</head>
<body>
</body>
</html>

说明:

<script type="text/javascript">……</script>格式是固定的,JavaScript代码必须在<script></script>标签内编写,并且必须设置type属性值为“text/javascript”。

<script type="text/javascript">……</script>这句语句要记忆的喔,别到时候写个JavaScript程序连这句都要回来这里复制代码过去呀。

举例:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
     <title></title>
     <script type= "text/javascript" >
         document.write( "绿叶学习网JavaScript入门教程" );
     </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下:

JavaScript在HTML中的引用方式

分析:

“document.write()”表示在页面输入某一个内容,大家记住这个语句,后面经常用喔。

二、页中引入JS

在页中引入JS,指的就是在<body></body>标签内编写JavaScript。

语法:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
     <title></title>
</head>
<body>
     <script type= "text/javascript" >
         //这里编写JavaScript程序
     </script>
</body>
</html>

说明:

body标签内引入JavaScript跟在head标签引入JavaScript语法格式类似,在此不再重复讲解。

举例:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
     <title></title>
</head>
<body>
     <script type= "text/javascript" >
         document.write( "绿叶学习网JavaScript入门教程" );
     </script>
</body>
</html>

在浏览器预览效果如下:

页中引入JavaScript

三、元素事件中引入JS

在元素事件中引入JS,就是指在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数,这个属性指的是元素的“事件属性”。

举例1:(在元素事件属性中直接编写JavaScript)

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
     <title></title>
</head>
<body>
     <input type= "button" onClick= "alert('绿叶学习网')" value= "按钮" />
</body>
</html>

在浏览器预览效果如下(点击按钮效果):

元素事件中引入JavaScript

举例2:(元素事件属性调用JavaScript函数)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
     <title></title>
     <script type= "text/javascript" >
         function alertMessage()
         {
             alert( "绿叶学习网" );
         }
     </script>
</head>
<body>
     <input type= "button" onclick= "alertMessage()" value= "按钮" />
</body>
</html>

在浏览器预览效果如下(点击按钮效果):

四、引入外部JS文件

引入外部JS文件,说白了就是把JavaScript程序存放在一个后缀名为.js的文件中,然后使用script标签来引用。此外,引用外部JS文件的script标签可以放在head标签内,也可以放在body标签中。

语法:

<script src="js/index.js" type="text/javascript"></script>

可能大家刚刚开始很难去深入理解并记忆这4种JS引用方式,不过没关系,以后大家忘了再回来这里看看,编程这种东西一回生二回熟,写多了自然就会记得。

总结

1、JavaScript在HTML的引用共有4种:

(1)页头引入(head标签内);

(2)页中引入(body标签内);

(3)元素事件中引入(标签属性中引入);

(4)引入外部JS文件;

这四种引用方式都非常重要,没有哪一种不重要的。


  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaScript 的原型是一种非常重要的概念。在 JavaScript ,所有的对象都有一个原型,而原型也是对象。当我们访问一个对象的属性时,如果这个对象本身没有这个属性,那么 JavaScript 引擎会检查这个对象的原型,看看原型对象是否有这个属性。如果原型对象也没有这个属性,那么 JavaScript 引擎会继续检查原型对象的原型,以此类推。这样的一种继承机制就是 JavaScript 原型的实现方式。 要想很好地理解 JavaScript 的原型,有以下几点建议: 1. 首先要确保自己对 JavaScript 的对象有一个较为深入的理解。对象是 JavaScript 非常重要的概念,而原型是对象的一个重要特性。 2. 了解 JavaScript 的原型链,即对象的原型会指向另一个对象,而这个对象的原型又会指向另一个对象,以此类推。这种继承机制就是 JavaScript 的原型链。 3. 学习使用原型的相关方法,比如 `Object.create()` 和 `Object.getPrototypeOf()` 等。这些方法可以帮助我们创建和操作对象的原型。 4. 多看一些相关的文章和教程,多 ### 回答2: 要很好地理解JavaScript的原型,我们首先需要了解几个概念。在JavaScript,每个对象都有一个原型(prototype),它定义了该对象的属性和方法。当我们调用一个对象的属性或方法时,如果对象自身没有定义这个属性或方法,JavaScript引擎就会去查找它的原型链,直到找到为止。 原型链是一种对象之间的连接方式,它是通过每个对象的原型来实现的。每个对象都有一个__proto__属性,指向它的原型。当我们访问对象的属性或方法时,如果对象自身没有定义,JavaScript引擎就会通过__proto__找到它的原型,然后继续向上查找,直到找到为止。 JavaScript的原型是通过构造函数来创建的。构造函数是一种特殊的函数,它定义了一个对象的结构和行为。当我们使用new关键字来调用一个构造函数时,JavaScript引擎会创建一个新的对象,并将该对象的原型指向构造函数的原型。这样,新创建的对象就继承了构造函数的属性和方法。 原型的作用是实现代码的重用和继承。通过原型,我们可以将方法和属性定义在构造函数的原型上,这样所有通过该构造函数创建的对象都可以共享这些方法和属性。这样可以大大减少重复代码的书写,并且方便对对象进行扩展和修改。 要想很好地理解原型,我们可以通过以下几个步骤进行学习: 1. 学习构造函数和new关键字的使用方式,了解原型是通过构造函数来创建的。 2. 了解__proto__属性和原型链的概念,理解对象之间的连接方式。 3. 学习如何将方法和属性定义在构造函数的原型上,了解如何通过原型链来访问这些方法和属性。 4. 练习使用原型来实现对象之间的继承,理解原型链的继承机制。 5. 阅读和调试一些使用原型的代码,理解原型的实际应用场景和作用。 通过以上步骤的学习和实践,我们就能够较好地理解JavaScript的原型,从而更好地理解和使用JavaScript的面向对象编程特性。 ### 回答3: 理解JavaScript的原型可以从以下几个方面入手: 首先,JavaScript是一种基于原型的语言,每个对象都有一个原型,对象可以通过它的原型继承属性和方法。原型是一个普通的对象,它包含一些共享的属性和方法,被实例化的对象可以访问这些属性和方法。 其次,可以通过构造函数来创建一个对象,构造函数的原型属性可以被所有由这个构造函数创建的对象共享。利用构造函数和原型的结合,可以实现对象的继承和属性共享。 另外,JavaScript的原型链是通过属性的查找机制实现的。在访问一个对象的属性时,如果对象本身没有该属性,它会沿着原型链向上查找,直到找到对应的属性或者到达原型链的末端。 通过理解这些概念,可以更好地理解JavaScript的原型。可以通过以下几个步骤来理解原型: 1. 创建对象时的属性和方法定义在构造函数,构造函数的原型属性指向一个普通对象,该对象包含了共享的属性和方法。 2. 通过构造函数创建实例对象,实例对象可以访问构造函数的原型属性定义的共享属性和方法。 3. 如果实例对象访问一个属性或者方法,而实例对象本身没有该属性或者方法,它会沿着原型链向上查找,直到找到对应的属性或者到达原型链的末端。 4. 如果需要更改某个属性或者方法,可以将新的属性或者方法赋值给实例对象,这样实例对象会在自身创建一个同名的属性或者方法,从而覆盖原型链上的属性或者方法。 通过理解并实践这些步骤,可以更深入地理解JavaScript的原型,并能够灵活运用原型链实现对象的继承和属性共享。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值