JavaScript中的noscript元素属性位置及作用介绍_javascript技巧

一、<script>元素属性
向XHTML页面中插入JavaScript的主要方法,就是使用<script>元素,该元素有5个属性分别为charset、defer、language、src、type,经常使用的是type、src、defer这三个。
1、type属性的值一般都是text/javascript,该属性是必须的,<script type=”text/javascript”/>。
2、src属性的值是*.js外部文件,该属性是可选的,<script type=”text/javascript” src=”example.js”/>。
在这个例子中,外部文件example.js将被加载到当前页面中。外部文件只需包含通常要放在开始的<script>和结束的</script>之间的那些Javascript代码即可。与解析嵌入式Javascript代码一样,在解析外部Javascript文件时,页面的处理也会暂时的停止。需要注意的是带有src属性后就不应该在<script>和</script>之间再包含额外的Javascript代码。
3、defer属性的值是”defer”,表示脚本可以延迟到文档完全被解析和显示之后再执行,该属性是可选的,<script type=”text/javascript” src=”example.js” defer=”defer”/>
二、标签位置
按照惯例,所有<script>元素都应该放在页面的<head>元素中,例如:

复制代码 代码如下:

<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js”/>
</head>
<body>
</body>
</html>

现代Web应用程序一般都把全部Javascript引用放在<body>元素中,放在页面的内容后面目的是让用户感觉到页面加载速度快了,如下所示:

复制代码 代码如下:

<html>
<head>
<title></tilte>
</head>
<body>
<!--内容-->
<script type=”text/javascript” src=”example.js”/>
</body>
</html>

三、延迟脚本
使用defer属性延迟脚本,这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后在运行。

复制代码 代码如下:

<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js” defer=”defer”/>
</head>
<body>
</body>
</html>

在这个例子中,虽然我们把<script>元素放在了文档的<head>元素中,但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。
四、CDATA
在XHTML(XML)中,CData片段是文档中的一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容。因此,在CData片段中就可以使用任意字符,而且不会导致语法错误。

复制代码 代码如下:

<script>
// <![CDATA[
function compare(a,b){
if(a<b){
alert(“A is less than B”) ;
}else if(a>b){
alert(“A is greater than B”) ;
}else {
alert(“A is equal to B”) ;
}
}
//]]>
</script>

加入双斜线注释是为了解决浏览器不兼容XHTML的问题。
五、<noscript>元素
当浏览器不支持Javascript或者Javascript被禁用时,包含在<noscript>中的元素才会显示出来,否则得话尽管页面中包含<noscript>,但其中的内容并不会被显示。
如下所示:

复制代码 代码如下:

<html>
<head>
<title></tilte>
<script type=”text/javascript” src=”example.js” defer=”defer”/>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)Javascript。</p>
</noscript>
</body>
</html>

这个页面会在脚本无效的情况下向用户显示一条消息。而在启用了脚本的浏览器中,用户永远也不会看到它——尽管它是页面的一部分。

复制代码 代码如下:

<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<noscript>
<center><p style="color:red; font-size:26px;">本页面需要浏览器支持(启用)JavaScript</p></center>
</noscript>
<!-- 这里放内容 -->
<script type="text/javascript">
alert(1);
</script>
</body>
</html>

复制代码 代码如下:

<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<noscript>
<center><p style="color:red; font-size:26px;">本页面需要浏览器支持(启用)JavaScript</p></center>
</noscript>
<!-- 这里放内容 -->
<script type="text/javascript">
alert(1);
</script>
</body>
</html>

在以下两种情况下,上述代码<p>标记中的内容会显示出来:
•浏览器不支持脚本
•浏览器支持脚本,但脚本被禁用。

除此之外,用户在浏览器中永远看不到<noscript>标记中的内容。

六、小结
把Javascript插入到XHTML中要使用<script>元素。使用这个元素可以把Javascript嵌入到XHTML页面中,让脚本与标记混合在一起;也可以包含外部的Javascript文件。而我们需要注意的有:
1、这两种方式都要求吧type属性的值设置为text/javascript,以表明使用的是Javascript脚本语言。
2、在包含外部Javascript文件时,必须将src属性设置为指向相应文件的url。而这个文件即可以好是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。
3、所有<script>元素会按照他们在页面中出现的先后顺序依次被解析。只有在解析完前一个<script>代码后才会解析下一个<script>代码。
4、浏览器在呈现后面的页面内容之前,必须先解析完前面<script>元素中的代码。为此,一般要把<script>元素放在页面的末尾,放在页面内容之后和结束的</body>标签之前。
5、在IE和火狐中,可以通过设置defer属性让浏览器在呈现完文档之后再执行脚本。其他浏览器不支持该属性。
另外,使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示<noscript>元素中的任何内容。

时间: 2024-08-22 04:34:38

JavaScript中的noscript元素属性位置及作用介绍_javascript技巧的相关文章

JavaScript中获取HTML元素值的三种方法_javascript技巧

JavaScript中取得元素的方法有三种:分别是: 1.getElementById() 方法:通过id取得HTML元素. 2.getElementsByName()方法:通过name取得元素,是一个数组. 3.getElementsByTagName()方法:通过HTML标签取得元素,是一个数组. 如果要取得值可以使用value,如:var x=document.getElementById("id").value; 方法一:getElementById() 方法可返回对拥有指定

JavaScript中数组对象的那些自带方法介绍_javascript技巧

/** * 本文纯粹是梳理一下目前W3C标准中Array对象的自带Method. * 全文没啥营养,不过最后性能测试的部分,倒是抛出了一些疑问. */ 赋值方法 (Mutator methods) 这些方法直接修改数组自身 pop 和 push Array.pop(); // 删除数组最后一个元素,返回被删除的元素 Array.push(element1, ..., elementN); // 在数组尾部插入1-N个元素,返回操作后数组的length 通过这 pop 和 push ,就能把数组模

JavaScript中的object转换函数toString()与valueOf()介绍_javascript技巧

JavaScript中,object转换为boolean的操作非常简单:所有的object转换成boolean后均为true:即使是new Boolean(false)这样的object在转换为boolean后仍然为true. 复制代码 代码如下: var x = new Boolean(false); if(x){   console.log("x is true"); } 在将object转换为string或者number时,JavaScript会调用object的两个转换函数:t

JavaScript中检查对象property的存在性方法介绍_javascript技巧

在JavaScript中,可以用四种方法来检查某个对象o是否拥有property x: 1."x" in o.in操作符可用于检查对象o中是否有x这个property.x可以是对象自身的(Own Property),也可以是从原型对象中继承而来的:x可以是enumerable的property,也可以是非enumerable的property. 2.o.x.可以通过访问o.x语句,判断其结果是否为undefined来确认x是否存在,其作用范围与in操作符相同.与in操作符不同的是:如果

javascript中关于break,continue的特殊用法与介绍_javascript技巧

今天在研究某系统时发现其代码有这样一个结构(已简化): 复制代码 代码如下: var result = false; point: { var obj = { key: 1 }; for (var key in obj) { // ... break point; } result = true; } alert(result); 咋看一下以为是代码错误,甚至于Visual Studio对此代码没办法进行正确的格式化.可是又仔细一看语意还是很清晰的,也就是从for循环内部break到指定的poi

Javascript中的方法链(Method Chaining)介绍_javascript技巧

在寻找如何设计一个Javascript API的时候,发现了Method Chaining这个东西,方法链,看上去似乎很强大,也挺有意思的,而这个东西也是过去我们经常看到的.. Javascript Method Chaining 在维基百科上有这样的解释: 复制代码 代码如下: Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls i

JavaScript中的apply()方法和call()方法使用介绍_javascript技巧

1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组.call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来. 例1: 复制代码 代码如下: window.firstName = "diz"; window.lastName = "song"; var myObjec

javascript中的变量作用域以及变量提升详细介绍_javascript技巧

变量作用域"一个变量的作用域表示这个变量存在的上下文.它指定了你可以访问哪些变量以及你是否有权限访问某个变量." 变量作用域分为局部作用域和全局作用域. 局部变量(处于函数级别的作用域)不像其他对面对象的编程语言(比方说C++,Java等等),javascript没有块级作用域(被花括号包围的):当是,javascript有拥有函数级别的作用域,也就是说,在一个函数内定义的变量只能在函数内部访问或者这个函数内部的函数访问(闭包除外,这个我们过几天再写个专题). 函数级别作用域的一个例子

javascript中的undefined和not defined区别示例介绍_javascript技巧

经研究发现,两者之间有很大的区别,不知从英语讲,这两者都有啥区别,研究结果如下 测试os:ubuntu 测试浏览器:chrome 测试案例1 console.log(a) 报错 ReferenceError: a is not defined 测试案例2 var a console.log(a) 无报错,但是输出undefined 测试案例2 var b = {}; console.log(b.a) 无报错,但是输出undefined 测试案例3 function c() { } var d =