Js和html相结合的方式
目录
TOC \o
"1-3" \h \z \u js和html相结合的方式. PAGEREF _Toc455386178 \h 1
08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003400350035003300380036003100370038000000
js和html相结合的方式
当js脚本写好之后 如何来使用js呢，有2种方式对js进行调用，
l js代码和html代码都写在html网页中
l 将js文件单独写在一个文件中，然后使用引入到html语言中
如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 <script> 标签（同时使用 type 属性来定义脚本语言）。
这样，<script
type="text/javascript"> 和 </script> 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。
|
<html> <head> <title></title> </head> <body> <script type = "text/javascript"> //js代码区域 alert("hello js!"); </script> </body> </html> |
使用外部JavaScript
有时，你也许希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。
为了达到这个目的，你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。然后把 .js 文件指定给 <script> 标签中的 "src" 属性，就可以使用这个外部文件了：
当网页打开后会调用script中的代码
HTML文件
|
<html> <head> <title></title> </head> <body> <script </body> </html> |
JS文件
创建一个.js文件名字叫做myJavascript.js然后将这个文件和html文件放在一起
当在HTML文件中链接好了这个js文件，以后就可以在这个js文件里写代码了。
|
alert( |
提示：
一旦在script标签中引入了src属性，并且链接了.js文件，那么再在<script></script>标签中的嵌入代码将均不会被执行。
在哪里放置javascript
代码自己重新总结
页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。
位于
head 部分的脚本：
当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。
|
<html> <head> <script type="text/javascript"> .... </script> </head> .... |
位于 body
部分的脚本：
在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。
|
<html> <head> </head> <body> <script type="text/javascript"> .... </script> </body> </html> |
在 body 和 head 部分的脚本：
你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到 body，又可以放置到 head 部分。
|
<html> <head> <script type="text/javascript"> .... </script> </head> <body> <script type="text/javascript"> .... </script> </body> </html> |
Js和html相结合的方式的更多相关文章
- 前端 使用localStorage 和 Cookie相结合的方式跨页面传递参数
A页面 html代码: 姓名:<input type="text" id="name1"> 年龄:<input type="text ...
- 从一个简单例子来理解js引用类型指针的工作方式
<script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...
- JS几种数组遍历方式以及性能分析对比
前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结
Day27 html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...
- get方法与post方法的区别与js获取url参数的方式
1.get方法与post方法的区别: 区别一:get重点在从服务器上获取资源,post重点在向服务器发送数据:区别二:get传输数据是通过URL请求,以field(字段)= value的形式,置于UR ...
- 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？
书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...
- js获取对象值的方式
js获取对象值的方式 var obj = {abc:"ss",nn:90}; var v1 = obj.abc;//使用点的方式 var v2 = obj["abc&qu ...
- JS几种变量交换方式以及性能分析对比
前言 "两个变量之间的值得交换",这是一个经典的话题,现在也有了很多的成熟解决方案,本文主要是列举几种常用的方案,进行大量计算并分析对比. 起由 最近做某个项目时,其中有一个需求是 ...
随机推荐
- AngularJS自定义指令及指令配置项
两种写法 //第一种 angular.module('MyApp',[]) .directive('zl1',zl1) .controller('con1',['$scope',func1]); fu ...
- js数组，在遍历中删除元素
/** * 有效的方式 - 改变下标,控制遍历 */ for (var i = 0; i < arr.length; i++) { if (...) { arr.splice(i, 1); // ...
- RabbitMQ (十一) 消息确认机制 - 消费者确认
由于生产者和消费者不直接通信,生产者只负责把消息发送到队列,消费者只负责从队列获取消息(不管是push还是pull). 消息被"消费"后,是需要从队列中删除的.那怎么确认消息被&q ...
- 【二分】Jessica's Reading Problem
[POJ3320]Jessica's Reading Problem Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1309 ...
- bzoj 3140: [Hnoi2013]消毒
3140: [Hnoi2013]消毒 Description 最近在生物实验室工作的小T遇到了大麻烦. 由于实验室最近升级的缘故,他的分格实验皿是一个长方体,其尺寸为a*b*c,a.b.c 均为正整数 ...
- 20162312Java结对编程之挑战出题
需求分析 实现去重出题,并以命令行参数形式指定题目要求. 设计思路 具体的思路: 思路一: 原本我和春旺商量通过集合中的元素的不重复性进行去重.但是运算符多也导致重复的数字多,去重的数量也大大增多越到 ...
- python基础之闭包函数与装饰器
闭包函数: 什么是闭包函数: 闭指的是定义在一个函数内部 包指的是该函数包含对外部作用域(非全局作用域)名字的引用 def counter(): n=0 def incr(): nonlocal n ...
- MySQL中变量的定义和变量的赋值使用（转）
说明:现在市面上定义变量的教程和书籍基本都放在存储过程上说明,但是存储过程上变量只能作用于begin...end块中,而普通的变量定义和使用都说的比较少,针对此类问题只能在官方文档中才能找到讲解. 前 ...
- rust安装
http://blog.csdn.net/teamlet/article/details/50838996
- mysql mapper 大于小于号 tag name expected
xml文件的某些特殊字符是自动转义的, 我们不希望它被转义,可以用<![CDATA[]]>, xml解析器会忽视CDATA中的内容, 比如:<![CDATA[<]]> 或 ...