JavaScript学习笔记(3)——JavaScript与HTML的组合方式

一、JavaScript可以写在HTML页面内部,通过<script>标签,如下面代码中的粗体部分:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            console.log("hello World!");
        </script>
    </head>
    <body>
    </body>
</html>

二、JavaScript还可以写在单独的文件中,以“.js”为后缀,HTML语言通过<script>标签的src属性引入,如下面代码中的粗体部分:

js文件夹下新建javascript0.js文件:

console.log("hello world!");

HTML代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            console.log("hello World!");
        </script>
        <script src="js/javascript0.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
    </body>

</html>

粗体部分为引入js/javascript0.js文件的写法,效果与写入HTML文件效果一样,这样做有两个好处:

1.代码复用

2.结构清晰

此处应该注意两点:

1.在js文件中不需要再写<script>标签, 该标签是告诉浏览器引擎,标签内为javascript代码,而js文件已经表明这是javascript代码。

2.在引入外部javascript文件的<script>标签内不可以再编写javascript代码,即使编写也不会起作用。

三、javascript代码是按照在html中的顺序执行。那么一般就会把javascript写在文件最后,或者写在javascript的一个方法中,该方法是在页面加载后才知性。这样做有两个好处:

1.提高页面加载速度,因为javascript代码执行时,后面的html代码将不会被渲染;另外,js文件下载也需要时间。提高用户体验。

2.防止javascript代码操作的DOM还没有加载完成。造成异常。

时间: 2024-08-26 06:06:43

JavaScript学习笔记(3)——JavaScript与HTML的组合方式的相关文章

JavaScript学习笔记(10)——JavaScript语法之操作DOM

1.页面输出用document.write()方法,但是不可以在window.onload中用,否则整个html页面将被覆盖. 2.通过javascript获取对象后,改变对象中的html内容:document.getElementById(id).innerHTML=new HTML. 3.改变对象的属性:document.getElementById(id).attribute=new value. 4.改变对象的css属性:document.getElementById(id).style

JavaScript学习笔记一 JavaScript是什么能干什么

一JavaScript是什么 JavaScript 是一种解释型的脚本语言,可以插入 HTML 页面,并由所浏览器解释执行. 二JavaScript能干什么 ①向HTML 添加新内容 document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>"); 注意:在 HTML 输出过程中使用 document.

JavaScript学习笔记(6)——JavaScript语法之对象

JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等. 在 JavaScript 中,对象是拥有属性和方法的数据. 属性是与对象相关的值. 方法是能够在对象上执行的动作. 提示:在面向对象的语言中,属性和方法常被称为对象的成员. 访问对象属性的语法是: objectName.propertyName 您可以通过下面的语法调用方法: objectName.methodName()

JavaScript学习笔记(5)——JavaScript语法之数据类型

JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill"; // x 为字符串 1.字符串:字符串可以是引号中的任意文本.可以使用单引号或双引号. 2.数字:JavaScript 只有一种数字类型.数字可以带小数点,也可以不带.极大或极小的数字可以通过科学(指数)计数法来书写: var y=123e5; // 12300000 var z=123e-5;

JavaScript学习笔记(7)——JavaScript语法之函数

函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { //这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用. 提示:JavaScript 对大小写敏感.关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数. 在调用函数时,您可以向其传递值,这些值被称为参数. 这些参数可以在函数中使

JavaScript学习笔记(12)——JavaScript内置对象

1.Number Javascript只有一种数字类型,可以有小数也可以没有,也可以使用科学计数法. var y=123e5; // 12300000 var z=123e-5; // 0.00123 JavaScript 不是类型语言.与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数.短.长.浮点等等. JavaScript 中的所有数字都存储为根为 10 的 64 位(8 比特),浮点数. 如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果

Javascript学习笔记3 Javascript与BOM简介

什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C BOM最初是Netscape浏览器标准的一部分 BOM结构图 BOM对象包括 window对象 是BOM的顶层(核心)对象,所

JavaScript学习笔记—— 3. JavaScript基本概念

1.     ECMAScript中的一切(变量.函数名和操作符)都区分大小写. 2.     标识符:指变量.函数.属性的名字,或者函数的参数. 第一个字符必须是一个字母.一个下划线( _ )或者一个美元符号($): 其他字符可以使字母.下划线.美元符号或者数字. 按照惯例,ECMAScript标识符采用驼峰大小写格式. 3.     严格模式:*use strict*,可以在脚本中启用严格模式,写在代码顶部. 4.     ECMAScript中的语句采用一个分号作为结尾.虽然并不必需,但是

Javascript学习笔记:3种定义函数的方式

①使用函数声明语法定义函数 1 function sum(num1,num2){ 2 return num1+num2; 3 } ②使用函数表达式定义函数 1 var sum=function(num1,num2){ 2 return num1+num2; 3 } ③使用Function构造函数定义函数 1 var sum=new Function('num1','num2','return num1+num2'); 三种定义函数的方式,其中第二和第三种从技术角度讲都属于函数表达式的方式,但是不