目录

  • 简介
  • 用途
  • 组成
  • ECMAScript
  • 文档对象模型（DOM树）
  • 浏览器对象模型BOM
  • 位置
  • head元素的script子元素
  • body元素的script子元素
  • 外部JavaScript


简介

JavaScript是一种浏览器脚本语言，特点有动态语言和解释执行两个，他除了名字之外，和Java没有多大关系。

用途

一般被用来执行以下操作：

  • 操作HTML 元素
  • 处理用户访问HTML元素的事件
  • 验证用户输入
  • 访问用户浏览器
  • 创建cookies(在浏览器持久化小规模数据）
  • 还有很多新用途

组成

一般浏览器支持的JavaScript语言由3 个不同部分组成的：
JavaScript语言核心(ECMAScript)：JavaSrcript语法和基本对象；
文档对象模型(DOM) ：处理HTML文档的方法和接口；
浏览器对象模型(BOM)：浏览器相关的方法和接口。

ECMAScript

ECMAScript 规范描述了JavaScript的词法、数据类型 、语句 、关键字 、保留字 和运算符 ，是JavaScript的核心对象 。

文档对象模型（DOM树）

DOM是HTML 文档和 XML文档的应用程序接口(API)，DOM 将把整个文档规划成由节点层级构成的文档。比如说下面这段代码：

<html> 
<head> 
<title>Sample Page</title> 
</head> 
<body> 
<p>hello world!</p> 
</body> 
</html>

javascript主要概念 javascript的主要作用_html


同时可以通过修改DOM树来更改节点样式。例子：

<html>
	<head>
		<script src="js/jquery.min.js" type="text/javascript">
		</script>
		<script type="text/javascript">
		function changeStyle(){
		   $("#firstLabel").css("color","red");
		}
		</script>
	</head>
	<body>
		<h1 id="firstLabel">hello world</h1>
		<button onclick="changeStyle();">修改CSS</button> 
	</body>
</html>

javascript主要概念 javascript的主要作用_对象模型_02


点击按钮后，文本变为红色：

javascript主要概念 javascript的主要作用_javascript_03

浏览器对象模型BOM

对浏览器窗口进行访问和操作，BOM只是 JavaScript 的一个部分，没有任何相关的标准。BOM 主要处理浏览器窗口和框架，与浏览器相关的JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口大小
  • 提供 Web 浏览器详细信息
  • 提供用户屏幕分辨率详细信息的屏幕对象
  • 对 cookie 的访问支持
  • IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

位置

head元素的script子元素

在head中的script子元素中可以定义函数和代码片段。
在head的script子元素中定义的javascript函数，在整个文档中都可以引用。例子：

<!DOCTYPE html>
<html>
<head>
	<title>在head中定义js函数</title>
	<script language="javascript" type="text/javascript"> 
		function fun(){
			document.write("<h1>Hello World</h1>");
		}
	</script>
</head>
<body>
	<button type="button" onclick="fun();">按我</button>
</body>
</html>

也可以在head中定义代码片段，但是这个代码片段会在head加载完时就执行，然后再去加载body。

body元素的script子元素

在body中的script子元素中同样可以定义函数和代码片段。

<html>
  <body>
     <script language="javascript" type="text/javascript" >
          document.write("<h1>helllo world</h1>");
     </script>
  </body>
</html>

因为浏览器解析html是从上到下的，所以放在head中的js代码会在页面加载完成之前就读取并执行（在body加载之前就执行了），而放在body尾部的js代码，会在整个页面加载完成之后读取并执行。

外部JavaScript

将JavaScript函数或者代码片段写入一个外部文件中，然后以.js为后缀保存这个文件，通过script标签的src属性引入js中的函数和代码片段。例子：
hello.html

<!DOCTYPE html>
<html>
<head>
	<title>外部js</title>
	<script src="./js/hello_world.js"></script>
</head>
<body>
	<button type="button" onclick="fun();">按我</button>
</body>
</html>

hello_world.js

function fun(){
	document.write("<h1>Hello World</h1>");
}