一、JavaScript的用途和发展状况
1. 用途:开发交互式的web页面。
前端三剑客:html(结构)、css(样式)、JavaScript(行为)。
js的工作原理:通过在html页面中嵌入js脚本,可以获取相应浏览器对象,读写html元素内容,更改html元素样式等功能。
2. 发展状况:
由来:1995年网景公司开发的JavaScript;
设计初衷:嵌入到网页中的编程语言,用来控制浏览器的行为;
滥用现象:广告、弹窗、恶意代码、安全漏洞;
里程碑:ajax技术的流行与发展,实现页面局部刷新;
未来发展:服务端node.js,移动端开发,全栈开发。
3. JavaScript的特征:
(1). 脚本语言:解释型脚本语言,在程序的运行过程中逐行进行解释。
脚本语言与非脚本语言的区别:
非脚本语言一般需要编译、链接,生成独立的可执行文件后才能运行。
脚本语言依赖于解释器,只在被调用时自动进行解释或编译。
(2). 可跨平台:不依赖操作系统,仅需要浏览器的支持。
(3). 支持面向对象:不仅可以创建对象,也可以使用现有的对象。
除了经典的JavaScript库,又诞生了Bootstrap、AngularJS、Vue.js、Backbone.js、React、Wwebpack等框架和工具
二、JavaScript与ECMAScript的关系
ECMAScript 也是一门脚本语言,缩写ES,通常看作js的标准化规范。
JavaScript实现了ECMAScript语言标准,并且还在这个基础上做了一些扩展。
三、JavaScript基本使用
1、浏览器引擎
渲染引擎:一般习惯称之为浏览器内核,主要功能是解析HTML/CSS进行渲染页面;
JS引擎:专门处理js脚本的虚拟机、解释器。用来执行js代码,在早期内核也是包含js引擎的,后来独立了出来。
2、JavaScript引入方式
(1). 行内式:将JavaScript代码作为HTML标签的属性值使用。
<!-- 行内式 -->
<!-- 第一种 -->
<a href="javascript:alert('我的第一个JavaScript程序');">test</a>
<!-- 第二种 -->
<input type="button" onclick="alert('Hello');" value="test">
(2). 嵌入式:使用 <script> 标签包裹JavaScript代码,直接编写到HTML文件中,type属性用于告知浏览器脚本的类型。type默认值为text/javascript(HTML5),可以省略type属性。
<script>
alert('我的第一个JavaScript程序')
</script>
(3).外链式:将JavaScript代码保存到一个单独的文件中,通常使用“js”作为文件的扩展名,然后使用 <script> 标签的src属性引入文件中。
<script src="001/01.js"></script>
3、JavaScript异步加载
存在的问题:引入JavaScript代码时,页面的下载和渲染都会暂停,等待脚本执行完成后才会继续(内嵌式或外链式)。
解决的办法1:对于不需要提前执行的代码,将 <script> 标签放在<body>标签的底部,可以减少对整个页面下载的影响。
解决的办法2:可用HTML5为<script>标签新增的两个可选属性:async和defer。
// 方式一:async
<script src="http://js.test/file.js" async></script>
// 方式二:defer
<script src="http://js.test/file.js" defer></script>
async异步加载,即先下载文件,不阻塞其他代码执行,下载完成后再执行。
defer用于延后执行,即先下载文件,直到网页加载完成后再执行。
共同点:即使文件下载失败,也不会阻塞后面的JavaScript代码执行。
4、常用输出语句
(1).alert() 警告框
<script>
alert('这里是输出的内容')
</script>
(2).console.log() 控制台输出
<script>
console.log(true)
</script>
(3).document.write()文档页面输出
<script>
document.write('<b>我的js<\/b>')
</script>
<script>
//在网页上弹出一个警告框
document.write('<script>alert(111);<\/script>')
</script>
5、注释方式
单行注释使用“//”、多行注释使用“/* */”
6、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改变网页的背景色</title>
<script>
function color(str){
document.body.style.backgroundColor=str;
}
</script>
</head>
<body>
<input type="button" value="设为红色" onclick="color('red')">
<input type="button" value="设为黄色">
<input type="button" value="设为蓝色">
<input type="button" value="设为自定义颜色" onclick="color('#0f0')">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证用户输入的密码</title>
<script>
// 通过输入框获取用户输入的密码
var password = prompt('请输入密码:');
if(password=='111111'){
alert('正确!~')
}else{
alert('错误!')
}
</script>
</head>
<body>
</body>
</html>