javascript内嵌式与外链式的基本应用方式

目录
  • javascript内嵌式与外链式基本应用
  • JavaScript的三种书写方式：行内式、内嵌式、外链式
    • 1、行内式
    • 2、内嵌式
    • 3、外链式

javascript内嵌式与外链式基本应用

js语言可以完全放在html语言中

但视情况而定可以分为内嵌式以及外链式

当js代码较少，可以直接使用内嵌式 通过<script></script>标签以及相关属性引入javascript

<!DOCTYPE html>
<html>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<body>

</body>
</html>

但是在大型工程以及javascript代码较多时就需要使用外链式了

使用外链式时需要先新建一个.js文件

<!DOCTYPE html>
<html>
<script type="text/javascript" src="1245.js">
</script>
<body>

</body>
</html>

将需要编写的javascript代码放在1245.js的文件中

JavaScript的三种书写方式：行内式、内嵌式、外链式

1、行内式

在html标签的属性内,通过行为触发执行.（几乎不用）

2、内嵌式

在html文件内使用script标签包裹起来，页面打开自动执行。（使用方便，但是大篇幅的JS代码千万不要用。）

3、外链式

写在独立的js文件内，在html文件中使用script标签的src属性引入，页面打开自动执行。（推荐使用，因为有各种优化方法）

注：行内真的很少用，几乎不用。内嵌和外链不能共用一个script标签。外链的script标签，原则上来说可以放在任何位置。外链的script属性为src，不是href，不是href，不是href…

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js获取元素的外链样式的简单实现方法

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样

  • js获取元素外链样式的方法

    本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析如下: 一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.ge

  • javascript动态添加样式(行内式/嵌入式/外链式等规则)

    添加CSS的方式有行内式.嵌入式.外链式.导入式 a)动态引入样式表文件: 复制代码 代码如下: function loadLink(url){ var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; var head = document.getElmentsByTagName(&qu

  • javascript内嵌式与外链式的基本应用方式

    javascript内嵌式与外链式的基本应用方式

    目录 javascript内嵌式与外链式基本应用 JavaScript的三种书写方式:行内式.内嵌式.外链式 1.行内式 2.内嵌式 3.外链式 javascript内嵌式与外链式基本应用 js语言可以完全放在html语言中 但视情况而定可以分为内嵌式以及外链式 当js代码较少,可以直接使用内嵌式 通过<script></script>标签以及相关属性引入javascript <!DOCTYPE html> <html> <script> doc

  • JavaScript获取css行间样式,内连样式和外链样式的简单方法

    [行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签,也就是获取到div1 console.log(odiv.style.background); //这样我们就可以获取到了行间的样式了 </script> [内连样式获取] <html>

  • JavaScript 异步调用框架 (Part 4 - 链式调用)

    现实开发中,要按顺序执行一系列的同步异步操作又是很常见的.还是用百度Hi网页版中的例子,我们先要异步获取联系人列表,然后再异步获取每一个联系人的具体信息,而且后者是分页获取的,每次请求发送10个联系人的名称然后取回对应的具体信息.这就是多个需要顺序执行的异步请求. 为此,我们需要设计一种新的操作方式来优化代码可读性,让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅. 传统做法 大多数程序员都能够很好的理解顺序执行的代码,例如这样子的: 复制代码 代码如下: var firstResult

  • JavaScript 异步调用框架 (Part 5 - 链式实现)

    调用入口 链式调用存在Async.go方法和Async.chain方法两个入口,这两个入口本质上是一致的,只是Async.chain方法在调用时先不提供初始参数,而Async.go方法在调用时提供了初始参数并启动异步调用链. 复制代码 代码如下: Async.chain = function() { var chain = new Async.Operation({ chain: true }); return chain; }; Async.go = function(initialArgum

  • jQuery对象的链式操作用法分析

    本文实例讲述了jQuery对象的链式操作用法.分享给大家供大家参考,具体如下: jQuery对象的链式操作 首先来看一个例子: 复制代码 代码如下: $("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good"); 对一个jQuery对象先调用了css()函数修改样式,然后使用attr()函数修改属性,这种调用方式象链一样,所以称为&qu

  • Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】

    本文实例讲述了Thinkphp5.0框架的Db操作.分享给大家供大家参考,具体如下: 连接操作: <?php namespace app\index\controller; use think\Controller; use think\Db; class Index extends Controller { public function study_db(){ //方式一:默认读取配置文件的配置 $res = Db::connect(); //方式二:手动配置,使用一个数组 $res = D

  • 利用Java如何实现将二维数组转化为链式储存

    利用Java如何实现将二维数组转化为链式储存

    目录 链式存储结构 代码思路 代码实现 输出结果 总结 链式存储结构 链式存储结构的线性表将采用一组任意的存储单元存放线性表中的数据元素.由于不需要按顺序存储,链表在插入.删除数据元素时比顺序存储要快,但是在查找一个节点时则要比顺序存储要慢. 使用链式存储可以克服顺序线性表需要预先知道数据大小的缺点,链表结构可以充分利用内存空间,实现灵活的内存动态管理.但是链式存储失去了数组随机存取的特点,同时增加了节点的指针域,空间开销较大. 下图就是最简单最一般的单向链表: 代码思路 将二维数组压缩成链式存

  • 内嵌式RealPlayer播放器的参数含义

    内嵌式RealPlayer播放器的参数含义                 内嵌式RealPlayer播放器的参数含义 参数:autostart 属性:True或是False 作用:指定是否自动播放指定的源文件 参数:backgroundcolor 属性:任何用符号"#"开头的16进制数值或是任何预定义的颜色 作用:指定图像窗口的背景颜色 参数:center 属性:True或是False 作用:指定片断使用初始编码大小播放,并且在图像窗口的中央. 参数:classid 属性:"

  • JavaScript对象链式操作代码(jquery)

    虽然现在慢慢减少了对jQuery的使用(项目上还是用,效率高点.平时基本不用了),希望从而减少对jQuery的依赖度. 但是这链式操作的方式实在吸引人(貌似现在不少新库都采用了链式操作). 新手无畏嘛,所以写了以下代码.主要是避免以后又忘了,呵呵. 复制代码 代码如下: window.k = function() { return new k.fn.init(arguments); } k.fn = k.prototype = { init:function() { this.length =

随机推荐