JavaScript是一种运行于JavaScript解释器引擎中的解释型(运行之前不用编译直到检查到错误运行结束)脚本语言。
运行环境:
1、独立安装的JS解释器NodeJS 2、嵌入到浏览器内核中的JS 解释器。
JS组成:
1、核心(ECMAScript)
2、文档对象模型(DOM.Document Object Model)让JS有能力与网页进行对话。
比如在网页上进行的点击操作、鼠标滑入操作等。
3、浏览器对象模型(BOM Browser Object Model)让JS有能力与浏览器进行对话。
判断页面中滚动条距离顶端的距离或者当前鼠标光标在浏览器中的位置。
JS的特点
1、开发工具简单记事本即可
2、不需要编译,直接由JS解释器负责执行
3、由数据来决定数据类型
4、面向对象
浏览器内核作用:(不同浏览器内核不同)
负责页面内容的渲染。内核主要负责两部分内容:
1、内容排版引擎解析HTML和CSS
2、脚本解释引擎解析Javascript
JS使用方法:
1、将JS代码嵌入在元素“事件”中
<html>
<body>
<button onclick="console.log('Hello World');">
打印消息
</button>
</body>
</html>
2、将JS代码嵌入<script>标记中允许出现在网页的任意位置
<html>
<body>
页头
<script>
document.write('<b>欢迎</b>');
console.log('脚本执行结束...');
</script>
<hr/>
页尾
</body>
</html>
3、将JS代码写在外部脚本文件当中
<html>
<head>
<script src="myscript.js"></script>
</head>
<body>
</body>
</html>
JS 的三个组成部分:ECMS JS,DOM,BOM
1、ECMS JS 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var a=[1,2,3,4];
var sum=0;
for(var i=0;i<a.length;i++){
sum+=a[i];
}
document.write(sum);
</script>
</body>
</html>
DOM示例:
<html>
<body>
<p id="changeStyle">通过DOM改变样式,字号变为24号</p>
<button onclick="document.getElementById('changeStyle').style.fontSize='24px'">点击改变样式</button>
</body>
</html>
BOM浏览器对象模型示例;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function load()
{
window.open('http://www.baidu.cn','_blank','width=600,height=400,top=100px,left=0px')
}
</script>
</head>
<body>
<button onclick="load()">百度</button>
</body>
</html>
JS 的三中添加方法:
1、行内
<HTML>
<head>
</head>
<body>
<button onclick="alert('行内JS')">单机试试</button>
</body>
</HTML>
2、内嵌文档一被加载代码就会被执行
<HTML>
<head>
<script>
alert('内嵌JS');
</script>
</head>
<body>
</body>
</HTML>
第三种外部文件的方式跟css文件添加相类似
<HTML>
<head>
<script src="路径.js">
</script>
</head>
<body>
</body>
</HTML>