JavaScript介绍
1. 1 JavaScript是什么
1.JavaScript(是什么)?
是一种运行在客户端(浏览器)的编程语言,实现人机交互效果
2. 作用
网页特效(监听用户的一些行为让网页作出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据,渲染到前端)
服务端编程(node.js)
3. JS组成
ECMAScript、Web APIs(DOM+BOM)
- ECMAScript:规定了js基础语法核心知识,比如变量、分支语句、循环语句、对象等等
- Web APIs:
DOM→操作文档,比如对页面元素进行移动、大小、添加删除等操作。
BOM→操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
DOM:页面文档对象模型
BOM:浏览器对象模型
1.2 JavaScript书写位置
- 内联JavaScript
代码写在标签内部
语法:
<body>
<button onclick="alert('逗你玩')">点击我月薪过万</button>
</body>
注意:此处作为了解即可,但是后面vue框架会用到这种模式
-
内部JavaScript
直接写在html文件里,用script标签包住
规范:script标签写在上面
拓展: alert(‘你好,js’)页面弹出警告对话框 -
外部JavaScript
代码写在以.js结尾的文件里
语法:通过script标签,引入到html页面中
<body>
<script src="my.js"></script>
</body>
案例:
<!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>Document</title>
<style>
.pink {
background-color: pink;
}
</style>
</head>
<body>
<button class="pink">按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
let btns = document.querySelectorAll('button')
for( let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(){
document.querySelector('.pink').className = ''
this.className = 'pink'
})
}
</script<