初学javascript之引入javascript脚本代码到html中的4个方法

 最近自己在学javascript,所以想把自己的一些小小的总结贴出来,以便日后复习,也希望对大家有所帮助 (*^__^*) 嘻嘻……

方法1.通过<script></script>标记对

           在我们的源代码中<scipt></script>之外的部分是基本的html代码,<script></script>之间的是嵌入的是javascript封装的脚本代码

           实例:

           <html>
           <head>
               <meta http-equiv=content-type="test/html;charset=gb2312">
               <title>Sample Page!</title>
           </head>
           <body>
           <br>
           <center>
           <script language="javascript 1.2" type="text/javascript">
               document.write("hello world!");
           </script>
           </center>
           </body>  
           </html>

 

          

           这里标记对<script></script>将javascript代码封装,并告知浏览器标记对中间的代码就是javascript脚本代码啦,然后调用了document文档对象中的write(),将字符串"hello world!"写入HTML文档中。

 

几个重要属性:

       1)language属性:用于指定封装代码的脚本语言以及版本,几乎所有的浏览器都支持javascript(极老的浏览器除外),同时language属性默认为javascript,因此如果你选择的封装语言为javascript,可以默认不设置。

       2)type属性:指定<script></script>标记对中间插入的脚本代码的类型

       3)src属性:用于将外部的脚本文件内容嵌入当前文档中,一般在较新的浏览器中,使用javascript脚本编写的外部脚本的扩展名必须是.js,同时<script></script>中不能有任何内容。

       示例:

       <script language = "JavaScript” type="text/javascript" src="Sample.js">

       </script>

 

访法2:通过<script>标记的src属性引入

            实例:test.html

   <html>
   <head>
     <meta http-equiv=content-type="test/html;charset=gb2312">
     <title>Sample Page!</title>
   </head>
   <body>
   <br>
   <center>
   <script language="javascript 1.2" type="text/javascript" src="1.js" >

   </script>
   </center>
   </body>  
   </html>

并在文本编辑器中编辑

    document.write("hello world!");

存为1.js

 

       将test.html和1.js存在一个文件夹中,双击test.html运行结构跟方法1相同。

 

方法3:伪URL引入javascript

          在多数浏览器中可以通过伪URL地址调用语句来引入javascript脚本代码。伪URL地址的一般格式如下:

          javascript:alert("Hello World")

          一般以javascript开始,后面紧跟要执行的操作。

 示例:

<html>
<head>
  <meta http-equiv=content-type="test/html;charset=gb2312">
  <title>Sample Page!</title>
</head>
<body>
<br>
<center>
<p>伪URL引入javascript脚本实例:</p>
<form name = "MyForm">
  <input type=text name="MyText" value="鼠标点击"
  οnclick="JavaScript:alert('鼠标已点击')">
</form>
</center>
</body>  
</html>

       伪URL地址可以用于文档的任何地方,并触发任意数量个javascript函数,常用表单合法性验证。

 

方法4:通过HTML文档事件处理程序引入

          web开发时,可以给HTML文档中设定各种不同的事件处理器,通常设定某HTML元素(一个简单的动作或者函数)来引用一个脚本,属性一般以on开头。

示例:

<html>
<head>
  <meta http-equiv=content-type="test/html;charset=gb2312">
  <title>Sample Page!</title>
<script language="javascript" type="text/javascript">
function ClickMe()
{
   alert("鼠标已点击按钮");
}
</script>
</head>
<body>
<br>
<center>
<p>通过文档事件处理程序引入javascript脚本实例:</p>
<form name = "MyForm">
  <input type=button name="MyButton" value="鼠标单击"
  οnclick="ClickMe()">
</form>
</center>
</body>  
</html>

 

 

          

          

 

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值