JavaScript (JS) 的基本概念

JavaScript 基本概念目录

  • JavaScript (JS) 的概念
  • JavaScript API
  • 浏览器的标签页就是JavaScript的运行环境
  • 如何添加JavaScript
    • 使用script标签
    • 引入外部JavaScript文件
    • 内联的JavaScript使用
  • 解决调用顺序的问题
  • async和defer解决加载和依赖的问题

JavaScript (JS) 的概念

首先JavaScript(JS)是一种编程语言
他的特性是:

  • 函数优先
  • 轻量级
  • 即时编译(解释执行——无需编译)
    JavaScript能做什么
    可以在网页中实现复杂的功能,使网页给你展现动态而非静态的信息。
    如:交互式地图,2D/3D 动画,滚动播放的视频.

其他概念

  • 其中最广为人知的是作为Web脚本语言。但也被用于许多非Web环境中
  • JavaScript 是基于原型编程、多范式的动态脚本语言,支持面向对象、命令式和声明式(如函数式编程)风格
  • JavaScript 的标准是 ECMAScript
  • ECMAScript 6 也称之为 ES6
  • ECMAScript 是一种规范,而JavaScript是规范的一种具体实现
  • JavaScript和Java除了名字开始几个字母比较巧合的相同之外,没有任何的关联。

JavaScript API

JavaScript的用途虽然不止是Web浏览器的运用,但是在这里只针对Web浏览器而言
API 通常分为两类

  • 浏览器 API,如:文档对象模型 (DOM)接口
  • 第三方 API,例如:Jquery,Vue等

浏览器的标签页就是JavaScript的运行环境

浏览器的每一个标签就是运行JavaScript代码的独立容器(也可以称之为运行环境)。
每个标签页中的代码完全独立运行,而不能影响其他标签的中的代码,或者被其他标签中的代码所影响。

浏览器执行 JavaScript 代码时,会按从上往下的顺序执行。
所以代码顺序很重要。

如何添加JavaScript

使用script标签


<html>
<head>
head>
<body>
	<script>
		//在标签中写JavaScript代码
	script>
body>
html>

引入外部JavaScript文件

使用标签

<script src="your.js" async>script>

这里使用了【async】新特性,否则会立即执行

内联的JavaScript使用

<button onclick="alert('test')">你过来呀button>

但是不建议这样使用,因为这样会使得js跟html混杂在一起,使得代码混乱不易维护。

解决调用顺序的问题

因为JavaScript是解释型顺序执行的,所以需要使用一些方法来使得在元素加载完成后执行

  • 内部文件使用

<html>
	<head>
		<title>添加JavaScript代码title>
	head>
	<body>
		<button>click mebutton>
		<script>
			document.addEventListener("DOMContentLoaded", function() {
				//你的JavaScript代码
			});
		script>
	body>
html>
  • 外部文件使用async属性
<script src="your.js" async>script>
  • 把脚本放在文档体的底端(body标签之前),脚本就可以在 HTML 解析完毕后加载

async和defer解决加载和依赖的问题

在同一个页面中引用多个外部JavaScript文件时
如果多个文件之间彼此独立,则可以使用async属性如
使用规律:

  • 若脚本无需等待页面解析,且无依赖独立运行,那么应使用 async。
  • 若脚本需要等待页面解析,且依赖于其它脚本,调用这些脚本时应使用 defer,将关联的脚本按所需顺序置于 HTML 中。

如果情况是C->B->A那么需要使用defer属性来解决

你可能感兴趣的:(Js&JQuery,javascript,js)