前端之JavaScript面向对象开发(1)

一.HTML 中的 JavaScript

将 JavaScript 引入网页,解决的是与网页的主导语言 HTML 的关系问题。

将 JavaScript 插入 HTML 的主要方法是:使用<script>元素(网景公司创造),最早在 Netscape Nav。后来,这个元素被正式加入到 HTML 规范igator 2 中实现的,

二.<script>元素的八个属性

  1. async:可选。应该立即开始下载脚本,但不能阻止其他页面动作,只对外部脚本文件有效。
  2. charset:可选。使用 src 属性指定的代码字符集。
  3. crossorigin:可选。配置相关请求的CORS(跨源资源共享)设置。默认不使用CORS。crossorigin= "anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据 标志,意味着出站请求会包含凭据。
  4. defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。
  5. integrity:可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性(SRI, Subresource Integrity)。
  6. language:废弃。
  7. src:可选。表示包含要执行的代码的外部文件。
  8. type:可选。代替 language,表示代码块中脚本语言的内容类型(也称 MIME 类型)。

三.使用<script>元素的方法

  1. 通过它直接在网页中嵌入 JavaScript 代码,
  2. 通过它在网页中包含 外部 JavaScript 文件。 
  3. <script> 
     function designbyly() { 
     console.log("designbyly!"); 
     } 
    </script> 

    备注:包含在<script>内的代码会被从上到下解释,

在使用行内 JavaScript 代码时,要注意代码中不能出现字符串

1.报错:将其当成结束的 标签

<script> 
 function designbylyScript() { 
 console.log("</script>"); 
 } 
</script> 

2.正确:代码就可以被浏览器完全解释,不会导致任何错误

<script> 
 function designbylyScript() { 
 console.log("<\/script>"); 
 } 
</script> 

包含外部文件中的 JavaScript,就必须使用 src 属性。值是一个 URL,指向包含 JavaScript 代码的文件

<script src="juzi.js"></script>

在 XHTML 文档中,可以忽略结束标签

<script src="juzi.js"/>

备注:外部 JavaScript 文件的扩展名是.js。这不是必需的。

服务器经常会根据文件扩展来确定响应的正确 MIME 类型。 如果不打算使用.js 扩展名,一定要确保服务器能返回正确的 MIME 类型。

使用了 src 属性的标签中再包含其他 JavaScript 代码。如果两者都提供的话,则浏览器只会下载并执行脚本文件,从而忽略行内代码。

四.<script>元素最为强大

  1. 可以包含来自外部域的 JavaScript 文件。
  2. <script>元素的 src 属性可以是一个完整的 URL,而且这个 URL 指向的 资源可以跟包含它的 HTML 页面不在同一个域中。

五.解析资源

<script src="http://www.xxx.com/xxx.js"></script> 
  • 浏览器在解析这个资源时,会向 src 属性指定的路径发送一个 GET 请求,以取得相应资源。

  • 假定 是一个 JavaScript 文件。这个初始的请求不受浏览器同源策略限制,但返回并被执行的 JavaScript 则受限 制。

  • 这个请求仍然受父页面 HTTP/HTTPS 协议的限制。

  • 来自外部域的代码会被当成加载它的页面的一部分来加载和解释。

  • 这个能力可以让我们通过不同的 域分发 JavaScript。

  • 不过,引用了放在别人服务器上的 JavaScript 文件时要格外小心,在包含外部域的 JavaScript 文件时,要确保该域是自己所有的,或者该域是一 个可信的来源。

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈工程师MrL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值