目录

 TOC \o
"1-3" \h \z \u js和html相结合的方式. PAGEREF _Toc455386178 \h 1
08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003400350035003300380036003100370038000000

把 JavaScript 放入 HTML 页面. PAGEREF _Toc455386179 \h 1
08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003400350035003300380036003100370039000000

使用外部JavaScript PAGEREF _Toc455386180 \h 2
08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003400350035003300380036003100380030000000

在哪里放置javascript PAGEREF _Toc455386181 \h 2
08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003400350035003300380036003100380031000000

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
type = "text/javascript" src
= "myJavascript.js"></script>

</body>

</html>

 

 

 

JS文件

创建一个.js文件名字叫做myJavascript.js然后将这个文件和html文件放在一起

当在HTML文件中链接好了这个js文件，以后就可以在这个js文件里写代码了。

alert(
"hello js!" );

提示：

一旦在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相结合的方式的更多相关文章

  1. 前端 使用localStorage 和 Cookie相结合的方式跨页面传递参数

    A页面 html代码: 姓名:<input type="text" id="name1"> 年龄:<input type="text ...

  2. 从一个简单例子来理解js引用类型指针的工作方式

    <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...

  3. JS几种数组遍历方式以及性能分析对比

    前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...

  4. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

  6. get方法与post方法的区别与js获取url参数的方式

    1.get方法与post方法的区别: 区别一:get重点在从服务器上获取资源,post重点在向服务器发送数据:区别二:get传输数据是通过URL请求,以field(字段)= value的形式,置于UR ...

  7. 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  8. js获取对象值的方式

    js获取对象值的方式 var obj = {abc:"ss",nn:90}; var v1 = obj.abc;//使用点的方式 var v2 = obj["abc&qu ...

  9. JS几种变量交换方式以及性能分析对比

    前言 "两个变量之间的值得交换",这是一个经典的话题,现在也有了很多的成熟解决方案,本文主要是列举几种常用的方案,进行大量计算并分析对比. 起由 最近做某个项目时,其中有一个需求是 ...

随机推荐

  1. 获取或设置config节点值

    ExeConfigurationFileMap 这个类提供了修改.获取指定 config 的功能:新建一个 ExeConfigurationFileMap 的实例 ecf :并设置 ExeConfig ...

  2. windows系统中，创建临时环境变量

    以servlet-api.jar 包为例 set classpath=%classpath%;C:\apache-tomcat-6.0.37\lib\servlet-api.jar

  3. Mysql Sql Explain

    1.使用mysql explain的原因 在我们php程序员的日常写代码中,有时候会发现我们写的sql语句运行的特别慢,导致响应时间特别长,这种情况在高并发的情况下,我们的网站会直接崩溃,为什么双十一 ...

  4. python之面向对象编程二

    类的成员 类的成员可以分为三大类:字段.方法.属性. 字段:普通字段.静态字段. 方法:普通方法.类方法.静态方法 属性:普通属性. 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多 ...

  5. 关于 Unity WebGL 的探索（一）

    到今天为止,项目已经上线一个多月了,目前稳定运行,各种 bug 也是有的.至少得到了苹果的两次推荐和 TapTap 一次首页推荐,也算是结项后第一时间对我们项目的一个肯定. 出于各种各样的可描述和不可 ...

  6. Bzoj4753/洛谷P4432 [JSOI2016]最佳团体（0/1分数规划+树形DP）

    题面 Bzoj 洛谷 题解 这种求比值最大就是\(0/1\)分数规划的一般模型. 这里用二分法来求解最大比值,接着考虑如何\(check\),这里很明显可以想到用树形背包\(check\),但是时间复 ...

  7. 树形dp入门（poj 2342 Anniversary party）

    题意: 某公司要举办一次晚会,但是为了使得晚会的气氛更加活跃,每个参加晚会的人都不希望在晚会中见到他的直接上司,现在已知每个人的活跃指数和上司关系(当然不可能存在环),求邀请哪些人(多少人)来能使得晚 ...

  8. 20162303实验四 Android程序设计

    北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级: 1623 姓名: 石亚鑫 学号:20162303 成绩: 2分 指导教师:娄嘉鹏 王志强 实验日期:5月26日 实验密 ...

  9. 兼容各种浏览器下调用iframe里面的函数

    <script type="text/javascript"> var o = $(window.frames["menu"])[0].conten ...

  10. 数据库系统入门 | Oracle Linux上部署Oracle 11g服务，并实现SSH远程登录管理

    文章目录 写在前面 一.实验内容 二.实验前期准备 1．软件目录 2．准备一些配置文件.脚本文件 三.实验方案(具体步骤) (一)在虚拟机上安装Oracle Linux (二)在Linux上安装Ora ...