JavaScript学习心得之概述

一、JavaScript是一种专为与网页交互而设计的脚本语言，它的的组成

ECMAScript（核心） DOM（文档对象模型） BOM（浏览器对象模型）

1.1ECMAScript

ECMA-262定义的ECMAScrip与Web浏览器没有依赖关系，ECMA-262定义的只是这门语言的基础，提供核心语言功能

　　ECMAScript是通过ECMA-262标准化的脚本语言，ECMA-262规定语言的：语法、类型、语句、关键字、保留字、操作符、对象

1.2 DOM（Document Object Modle）
     DOM是针对XML但是经过扩展用于HTML的应用程序编程接口(API,Application Programming Interface),提供访问和操作网页内容的方法和接口

　　DOM把整个页面映射为一个多层节点结构，HTML或者XML等页面中的每个组成部分都是某种类型的节点，这些节点又包含不同类型的数据。

1.3 BOM(Bower Object Modle)
　　控制浏览器显示的页面以外的部分,BOM只处理浏览器窗口和框架,提供与浏览器交互的方法和接口

二、<script>元素
2.1引用javascript文件
　外部引用javascript文件：

代码如下:

<script type="text/javascript" src="../../XX.js"></script>

页面嵌入javascript代码

代码如下:

<script type="text/javascript">

//javascript代码

</script>

包含在<script>元素内部的JavaScript代码将被从上至下依次解释

2.2 <script>元素的属性

defer延迟脚本:告诉浏览器立即下载,脚本会被延迟到整个页面都被解析完才执行, defer只适用于外部引入的脚本文件

代码如下:

<!DOCTYPE html>
<html>
    <head>
         <script type="text/javascript" defer="defer" src="example.js"></script>
    </head>
</html>

虽然<script>标签位于<head>标签内，但是demo.js会延迟到浏览器遇到</html>后才执行。

async异步脚本:必让页面等待脚本的下载和执行，从而异步加载页面其他内容
同defer一样只适用于外部引入的脚本文件,async告诉浏览器立即下载文件，但与defer不同的是标记不async脚本并不保证按照指定它们的先后顺序执行，建议异步脚本不要在加载期间修改DOM

代码如下:

<!--异步脚本-->
<script type="text/javascript" async="async" src="example1.js"></script>
<script type="text/javascript" async="async" src="example2.js"></script>

2.3 <noscript>元素的属性

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<!--延迟脚本-->
<scripttype="text/javascript" defer="defer" src="example.js"></script>
<!--导部脚本-->
<script type="text/javascript" async="async" src="example1.js"></script>
<script type="text/javascript" async="async" src="example2.js"></script>
</head>
<body>
   <noscript>
    <p>本页显示需要浏览器支持(启用)Javascript
      </noscript>
</body>
</html>

浏览器不支持脚本

浏览器支持脚本,但脚本被禁用,浏览器就会显示<noscript>中的内容
这个页面会在脚本无效的情况下，向用户显示一条信息，而在启用了脚本的浏览器中，用户永远也不会看到它

以上就是本文的全部内容了，希望大家能够喜欢，本系列将持续更新。

赞 (0)

相关推荐

  • javascript开发技术大全－第1章javascript概述

    1.1略 1.2版本.略 1.3 javascript与浏览器 略 1.4 javascript 作用 摘自<3Cschool> JavaScript 能做什么? JavaScript 为 HTML 设计师提供了一种编程工具 HTML 创作者往往都不是程序员,但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言!几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中. JavaScript 可以将动态的文本放入 HTML 页面 类似于这样的一段 JavaScript 声

  • JavaScript高级程序设计（第3版）学习笔记 概述

    在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多,在我自己学习的过程中,曾经有过多次震撼,只是常常没有过多久,很多美轮美奂的用法就又模糊起来,希望通过对JavaScript高级程序设计(第3版)的专题学习笔记,能够较为系统的将基础知识梳理一次,也能够将自己平常学习与工作过程中遇到的一些美妙用法记录下来,便于自己再次学习,当然,也希望可以给有需要的朋友们一些力所能及的帮助. 相关术语 先简要说一下和JavaScript相关的一些背景术语,就不详细

  • 转义字符（\）对JavaScript中JSON.parse的影响概述

    按照ECMA262第五版中的解释,JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合json标准的字符串,后者将符合json标准的字符串转化为js对象.json标准参考<a href="http://json.org/" target="_blank">json.org</a>.(其实将符合json标准的字符串转化为js对象可以用eval,但是eval性能相对差且存在安全隐患(会执行json字符串中

  • JavaScript中Math对象方法使用概述

    1.丢弃小数部分,保留整数部分parseInt(5/2) 2.向上取整,有小数就整数部分加1 Math.ceil(5/2) 3,四舍五入. Math.round(5/2) 4,向下取整 Math.floor(5/2) Math 对象的方法FF: Firefox, N: Netscape, IE: Internet Explorer 方法 描述 FF N IE abs(x) 返回数的绝对值 1 2 3 acos(x) 返回数的反余弦值 1 2 3 asin(x) 返回数的反正弦值 1 2 3 at

  • JavaScript中的onerror事件概述及使用

    JavaScript中的onerror事件概述及使用

    1.Window.onerror事件 onerror事件用来协助处理页面中的JavaScript错误.当页面上出现异常时,error事件便在window对象上触发.例如: 在这种情况下,浏览器会显示错误信息: . 如果不希望浏览器在默认对话框中显示出错消息,让onerror方法返回true即可. 此外,onerror方法还提供了三个参数用来确定错误确切的信息,分别是: 1)message:一个字符串,声明了出现的错误的信息(不同的浏览器中返回的消息内容略有差异). 2)url:一个字符串,声明了

  • javascript中的作用域和上下文使用简要概述

    javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的设计模式的后盾.然而这也给开发人员带来很大困惑.下面全面揭示了javascript中的上下文和作用域的不同,以及各种设计模式如何使用他们. 上下文 vs 作用域 首先需要澄清的问题是上下文和作用域是不同的概念.多年来我注意到许多开发者经常将这两个术语混淆,错误的将一个描述为另一个.平心而论,这些术语

  • JavaScript创建类/对象的几种方式概述及实例

    在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表.字典.健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象. 一.由一对大括号括起来 复制代码 代码如下: var emptyObj = {

  • JavaScript学习心得之概述

    一.JavaScript是一种专为与网页交互而设计的脚本语言,它的的组成 ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型) 1.1ECMAScript ECMA-262定义的ECMAScrip与Web浏览器没有依赖关系,ECMA-262定义的只是这门语言的基础,提供核心语言功能 ECMAScript是通过ECMA-262标准化的脚本语言,ECMA-262规定语言的:语法.类型.语句.关键字.保留字.操作符.对象 1.2 DOM(Document Object Mod

  • javascript 继承学习心得总结

    看了不少js继承的东西也该总结总结了. 先说一下大概的理解,有不对的还望指正,也好更正一下三观.另外说明下,下面的例子并非原创基本就是改了个变量名啥的,有的甚至直接拿过来用的. js继承是用来干啥的: 首先说js没有真正的跟其他面向对象的语言一样概念的继承,js里边所说的继承是指模拟继承. 具体js继承是干啥呢,刚开始做前端的时候我是用来面试的(最早写些小效果的时候基本用不到,为啥要看呢,因为面试官很爱问这个问题啊),所以就看看大概的,面试时候能说个大概,在这个问题上算是面试党了.后来跟着慢慢的

  • 浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结

    这是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道require,seajs的用法(AMD,CMD用法),所以没有加入使用语法. 1.为何而生: 这三个规范都是为javascript模块化加载而生的,都是在用到或者预计要用到某些模块时候加载该模块,使得大量的系统巨大的庞杂的代码得以很好的组织和管理.模块化使得我们在使用和管理代码的时候不那么混乱,而且也方便

  • JavaScript学习笔记之创建对象

    JavaScript 有Date.Array.String等这样的内置对象,功能强大使用简单,人见人爱,但在处理一些复杂的逻辑的时候,内置对象就很无力了,往往需要开发者自定义对象. 从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值.对象或函数.也就是说对象是一组没有特定顺序的属性,每个属性会映射到一个值上,是一组键值对,值可以是数据或对象. 对象是JavaScript的基本数据类型.在JavaScript中除了字符串.数字.true.false.null和undefine

  • 使用Promise解决多层异步调用的简单学习心得

    前言 第一次接触到Promise这个东西,是2012年微软发布Windows8操作系统后抱着作死好奇的心态研究用html5写Metro应用的时候.当时配合html5提供的WinJS库里面的异步接口全都是Promise形式,这对那时候刚刚毕业一点javascript基础都没有的我而言简直就是天书.我当时想的是,微软又在脑洞大开的瞎捣鼓了. 结果没想到,到了2015年,Promise居然写进ES6标准里面了.而且一项调查显示,js程序员们用这玩意用的还挺high. 讽刺的是,作为早在2012年就在M

  • java反射机制的一些学习心得小结

    概述 之前在了解Spring的类加载机制的时候,了解了java的反射机制.但是,我对反射理解一直不深.也一直有点疑惑:Spring为什么利用反射创建对象?直接new对象和依靠反射创建对象有什么区别?什么是动态加载类? 什么是反射? 要想知道反射到底是什么,首先需要知道java的类加载和对象创建的机制. 当我们写完一个java文件的时候,后缀是.java.在我们利用IDE执行java文件的时候,其实IDE也帮我们运行了javac,即java编译器.编译器会将.java文件编译成.class文件.j

  • 如何用JavaScript学习算法复杂度

    如何用JavaScript学习算法复杂度

    概述 在本文中,我们将探讨 "二次方" 和 "n log(n)" 等术语在算法中的含义. 在后面的例子中,我将引用这两个数组,一个包含 5 个元素,另一个包含 50 个元素.我还会用到JavaScript中方便的performance API来衡量执行时间的差异. const smArr = [5, 3, 2, 35, 2]; const bigArr = [5, 3, 2, 35, 2, 5, 3, 2, 35, 2, 5, 3, 2, 35, 2, 5, 3,

  • Backbone中View之间传值的学习心得

    Backbone中View之间传值的学习心得

    Backbone中的View就是用来展示由Model层传出的数据,或者在View里产生的一些数据,包括输入框中输入等产生的数据,由当前View传递到另外一个View层里,应该怎么办呢,我之前读到一位博主<Backbone View的三种通信方式 >写的尤为的清晰,在我实际的项目中,常常使用的也就是最后一种方式. 嘿嘿,分享知识是一件快乐的事情,我就直接借鉴表述一下如下: 直接用 Backbone 作为事件注册机, 代码如下: var ApplicationView = Backbone.Vie

  • 每天一篇javascript学习小结（基础知识）

    1.字符转换 var s1 = "01"; var s2 = "1.1"; var s3 = "z";//字母'z'无法转换为数字,所以或返回NaN var b = false; var f = 1.1; var o = { valueOf: function() { return -1; } }; s1 = -s1; //value becomes numeric -1 s2 = -s2; //value becomes numeric -1.

  • 每天一篇javascript学习小结（Array数组）

    1.数组常用方法 var colors = ["red", "blue", "green"]; //creates an array with three strings alert(colors.toString()); //red,blue,green alert(colors.valueOf()); //red,blue,green alert(colors); //red,blue,green 2.数组map()方法 var number

随机推荐