红宝书之在HTML中使用JS

向页面中插入JS的主要方法,就是使用<script>元素。它现在使用的有5个属性。

1.asyns:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作。
2.charset:可选。表示通过src属性制定的代码的字符集。
3.defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
4.src:可选。表示包含要执行代码的外部文件。
5.type:可选。表示编写代码使用的脚本语言的内容类型。

一、使用<script>的方法

1.直接在页面中嵌入js代码
2.包含外部js文件

使用第一种方法时嵌入时,只需要为<script>指定type属性,然后像下面这样,直接把js代码放在元素内部就可以了。

    <script type="text/javascript">
        function sayHi(){
            alert('hi')
        }
        sayHi()
    </script>

包含在<script>元素内部的js代码将被从上往下依次解释,在解释器对<script>元素内部的所有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示。
同时,在使用这种方法嵌入js代码时,不要在代码中任何地方出"</script>"字符串。如:

 <script type="text/javascript">
        function sayHi(){
            alert("</script>")
        }
        sayHi()
    </script>

这样会报错的。因为按照嵌入时代码的规则,当浏览器遇到字符串"</script>"时,就会认为那是结束的标签,当然也有解决办法,使用转义字符"/"就可以解决。

  <script type="text/javascript">
      function sayHi(){
          alert("<\/script>")
      }
      sayHi()
  </script>

这样程序就不会报错,正常执行。
当然,尽量不要这样写。你显示什么不好非要费劲显示这个给自己找事儿?

使用第二种方法通过<script>元素来包含外部文件,src属性是必须的。这个属性的值是一个指向外部的js文件的链接。如:

<srcipt type="text/javascript" src="example.js"></srcipt>

需要注意的是,带有src 属性的<script>元素不应该在标签之间再包含额外的js代码,如果包含了代码,只会下载并执行外部脚本文件,嵌入的代码会被忽略。
同时,通过src属性还可包含来自 外部域 (跨域)的JS文件,和<img>标签一样,src属性可以直接指向当前HTML页面域之外的某个域中的完整URL,例如:

<srcipt type="text/javascript" src="https://www.baidu.com/"></srcipt>

这样外部域的代码也会被加载和解析。利用这一点就可以在必要时通过不同的域来提供JS文件。

二、<script>标签的位置:

传统做法是放在<head>中,但是代码量较多时,会导致浏览器呈现页面时出现明显延迟,期间串口一片空白,造成用户体验感极差。
解决办法很简单,就是把它放到<body>标签下面......

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,485评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,887评论 0 0
  • <script>元素 想HTML页面插入JavaScript的主要方法就是使用 元素。HTML 4.01为 定义了...
    胖胖冰阅读 597评论 0 0
  • 准备总结这周的事情才发现已经十周了,算起来第三期不知道不觉的就结束了,第四期也进行了一周时间,自己有强迫症所以每周...
    张添雅阅读 164评论 0 2