zoukankan      html  css  js  c++  java
  • js学习笔记——在html中嵌入脚本

    一、在html中嵌入js代码:

    在html文件里嵌入js代码主要有四种形式:

    第一种是通过<script></script>标记,这种一般用来定义一些函数,放在body外;

    第二种是通过文件形式导入,由<script>标记的src属性指定路径;

    第三种是放在由句柄的属性值指定;

    第四种是使用javascript:协议。

    (1)方法一:

    1、把js代码放在<script></script>标记之间;如:

    <script>function square(x){return x*x;}</script>

    2、一个html文档可以包含多个<script>标记,执行顺序是他们在文档中出现的顺序

    (2)方法二:

    放在由<script>标记的src属性指定的外部文件中,src指定一个包含js代码的文件的url;如:

    <script src="http://www.cnblogs.com/scripts/util.js"></script>

    (3)方法三:

    1、放在事件句柄中,该事件句柄由onclick或onmouseover这样的html属性值指定;例如:要定义在用户点击表单中的复选框时调用事件句柄,只需把处理的代码作为

    定义复选框的html标记的属性:

    <input type="checkbox" name="options" value="giftwrap"
     onclick="giftwrap=this.checked;">

    这里的onclick的属性值是一个字符串,其中包含多个js语句,每条语句要用分号分开,当点击onclick事件时,便执行这些js代码;
    2、常用的事件句柄:

    onclick—— 所有类似按钮的表单元素、<a>和<area>标记都支持该处理程序;

    onmousedown,onmouseup——用法和onclick类似;

    onmouseover,onmouseout;

    onchange——<input>、<select>、<textarea>元素支持该事件句柄,在用户改变了元素的显示值,或移出了元素的焦点时触发它;

    onload——出现在<body>标记上,当文档及其外部内容(图像)完全载入的时候触发它;

    (4)方法四:

    在一个url中,这个url使用特殊的javascript:协议;如:

    javascript:var now = new Date();
    "<h1>当前事件是:</h1>"+now;

    当浏览器载入这样一个javascript url,它会执行url中所包含的js代码,并使用最后一个js语句或表达式的值,转换为一个字符串,作为新载入的文档内容显示;

    有时希望使用一个js url来执行某些js代码而不改变当前显示的文档,这样的话就要确保url最后一条语句没有返回值:使用void 0;如:

    javascript:window.open("about:blank");void 0;

    如果没有 void 0; 则新文档显示的内容为:[object Window]

    二、由于js并非唯一的脚本化语言,为使浏览器能正确的解析脚本,必须告诉浏览器脚本是用哪种语言编写的;使用http Content-srcipt-Type头部来为一个文件指定默认的脚本语言,

    要把所有的脚本指定为js,只需把如下标记放入到html文档的<head>中:

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    或者使用<script>标记的type属性:

    <script type="text/javascript">...</script>
  • 相关阅读:
    google浏览器高清壁纸保存
    vmworkstation安装unbuntu server 网络配置:NAT模式
    python量化交易相关资料
    Oracle VM VirtualBox启动后莫名奇妙的报错
    oracle RAC 跨网段客户端访问 报ORA-12170
    odoo开发 相关知识点
    C#.ToString()格式大全
    flex简单参考实例
    NPOI读写Excel
    C# Stream 和 byte[] 之间的转换(文件流的应用)
  • 原文地址:https://www.cnblogs.com/zhangchunxi/p/2975871.html
Copyright © 2011-2022 走看看