1、javascript介绍
1、网站组成
- HTML:（HyperText Markup Language）超文本标记语言 结构
- CSS：（Cascading Style Sheets）层叠样式表 样式
- javaScript：简称js，用于网页交互的解释性脚本语言 行为
2、什么是JavaScript
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。
3、JavaScript的诞生
时间：1995
作者：布兰登·艾奇 (网景)
Javascript诞生记
http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html
4、ECMAScript和JavaScript
ECMAScript：标准
JavaScript：实现
因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
5、JavaScript 的组成
DOM：document object model (文档对象模型)
BOM：browser object model (浏览器对象模型)
ECMAScript：核心，定义这门语言的语法、关键字、语句等等
6、JavaScript的特点
1、解释性：
编译性：在代码执行之前，要将整个代码进行编译，编译完成之后，再交给计算机执行
解释性：在代码执行的时候，会逐行解释代码，解释完一行，就执行一行
2、基于对象
js中存在一些事先设置好的对象（工具），这些对象可以提供给我们一些方法，来实现一些最基本的效果。
3、事件驱动
通过事件驱动来解决用户和浏览器页面之间的交互的问题
4、跨平台
只要能运行浏览器，就能运行js
2、javascript初识
1、引入
1、内联（行内）
<!-- 1、内联（行内） 不推荐使用 -->
<div id="box" style="" onclick="alert('哥们，点我了')"></div>
2、内嵌
<!-- 2、内嵌 项目中不推荐使用，但是课上用 -->
<script>
alert('我弹出了');
</script>
3、外链
<!-- 3、外链 项目中必须用 -->
<script src="js/a.js"></script>
总结：
1、代码从上向下执行
2、alert是弹出窗，它具有阻塞代码的作用，如果不点确定，代码不会向下走
3、js代码可以放在页面的任何地方，但是我们推荐放在</body>的前面，或者放在</head>的前面
4、如果一个script标签用作了外链，就不要再将它用作内嵌
<script src="">
// 不要再用作内嵌
</script>
2、入门三步曲
1找: 找到谁: document.getElementById(“id名”)
2加: 加什么事件（做什么操作）: 标签.事件
3做: 做什么事: 标签.事件 = function(){ 要做的事情 }
<!-- 需求：我有一个box，点击它，弹出一句话 -->
<div id="box"></div>
<script>
// 1、找到box元素
// document.getElementById('id名')
// document 文档
// get 获取
// Element 元素
// ById 通过id
// 在这个文档里面，通过ID获取一个元素
// 2、添加什么事件
// 元素.事件
// 3、干什么事
// 元素.事件 = function () { 要做的事 }
document.getElementById('box').onclick = function () {
alert('点我了');
}
</script>
3、window.onload
window.onload的作用是，当文档和资源都加载完成后执行。
<script>
// 当整个文档加载完成之后，再执行的代码
// 整个文档加载完成，包括这个文档引入的js css 图片等等一切资源
window.onload = function () {
document.getElementById('box').onclick = function () {
alert('点我了');
}
}
</script>
4、其它鼠标事件
onclick ：点击事件
ondblclick ：双击事件
onmouseover ： 鼠标移入元素
onmouseout : 鼠标离开元素
onmouseenter ：鼠标移入元素
onmouseleave ：鼠标离开元素
onmousemove: 鼠标在元素中移动
onmousedown： 鼠标按下
onmouseup： 鼠标抬起
oncontextmenu ：鼠标右键菜单事件
window.onload = function () {
// 点击
document.getElementById('box').onclick = function () {
console.log('点击');
}
// 双击
document.getElementById('box').ondblclick = function () {
console.log('点击');
}
// 滑上
document.getElementById('box').onmouseover = function () {
console.log('滑上');
}
// 滑离
document.getElementById('box').onmouseout = function () {
console.log('滑离');
}
// 滑动 鼠标在元素上移动的时候会不断的触发这个事件
document.getElementById('box').onmousemove = function () {
console.log('滑动');
}
// 滑上 这一对滑上滑离和上面不同
document.getElementById('box').onmouseenter = function () {
console.log('滑上');
}
// 滑离
document.getElementById('box').onmouseleave = function () {
console.log('滑离');
}
// 按下
document.getElementById('box').onmousedown = function () {
console.log('按下');
}
// 抬起
document.getElementById('box').onmouseup = function () {
console.log('抬起');
}
// 右键 上下文菜单（环境菜单）
document.getElementById('box').oncontextmenu = function () {
console.log('按右键了');
}
}
5、变量
变量是对“值”的具名引用。变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。变量的名字就是变量名。
var 变量名 = 值;
// 方式一：声明并赋值
var a = 10;
console.log(a);
// 方式二：先声明，再赋值
var b;
b = '小王';
console.log(b);
// 方式三：一次声明多个
var c = 20,
d = '前端开发',
e = '河南';
console.log(c);
console.log(d);
console.log(e);
变量名的命名规则
- 1、只能使用英文字母、数字、_、$组成
- 2、不能以数字开头
- 3、不能使用关键字、保留字 （关键字：这门语言正在使用的字 保留字：js是发展的，将来可能要用到的字）
就跟我们学css时的class命名一样，变量名的命名，也有一些建议
- 1、具有语义化，即见名知义。
- 2、小驼峰命名，如：userName passWord
关键字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QgY1Q7m5-1606740910482)(./关键字.png)]
保留字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYMPyeAN-1606740910484)(./保留字.png)]
变量拼接
- 1、删除被替换的
- 2、写两引号（外面是什么引号，里面就写什么引号）
- 3、在引号之间，写两加号
- 4、在加号之间，写你的变量
6、注释
注释一般用于解释代码，提高可读性，不会被JavaScript解析；
也可以用于调试代码，例如代码出现了问题，但是又找不到具体出问题的代码，就可以注释掉可能出问题的代码，看程序是否正常运行，逐步排查。
7、调试命令
JavaScript中调试命令，用于调试代码，查看数据信息，常用的调试命令有alert()与console.log()。
alert命令直接在页面弹出信息，一次只能显示一个数据，并且没有点击确定之前，不能显示下一个数据。
console.log命令，在控制器台打印数据，一次可以打印多个，并且不会堵塞。
3、javascript元素操作
元素操作分为内容操作、属性操作、样式操作等。每种分为读和写的操作
1、内容操作
1、表单元素内容操作
- 获取：元素.value
- 设置：元素.value = 值
<input type="text" id="txt" />
<button id="btn1">设置</button>
<button id="btn2">获取</button>
// 第一步：获取元素
var txt = document.getElementById('txt');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
// console.log(txt, btn1, btn2);
// 设置
btn1.onclick = function () {
txt.value = '平头哥';
}
// 获取
btn2.onclick = function () {
console.log(txt.value);
}
案例：解密
2、双标签元素内容操作
获取：元素.innerHTML
设置：元素.innerHTML = 值
获取：元素.innerText
设置：元素.innerText = 值
innerHTML识别标签，而innerText不识别标签
会覆盖原来存在的内容，如果想要留下原来的，则要用原来的加上新的
var box = document.getElementById('box');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
// console.log(box, btn1, btn2);
// 获取
btn1.onclick = function () {
console.log(box.innerHTML);
console.log(box.innerText);
}
// 设置
btn2.onclick = function () {
// box.innerHTML = '平头<i>妹</i>';
// box.innerText = '平头<i>哥</i>';
box.innerHTML = box.innerHTML + ':平头哥'; // 保留原来的，同新的拼接起来
}
案例：留言
2、属性操作
属性：写在起始标签里，以 key=“value” 这种形式展示的就是属性
<div id="box" title="平头哥" class="abc">小王</div>
// 获取：元素.属性名
// 设置：元素.属性名 = 值
var box = document.getElementById('box');
console.log(box.title); // 获取
box.title = '平头妹';
特殊：class要换成className。图片的src属性在获取时，返回的是一个绝对的地址，一般只给图片设置src属性，而不获取src属性。
3、样式操作
- 设置：元素.style.样式名 = 值;
- 获取：元素.style.样式名;
var box = document.getElementById('box');
box.style.width = '200px';
box.style.height = '200px';
box.style.backgroundColor = 'red';
box.style.fontSize = '30px';
box.style.color = 'yellow';
// -----------------------------
// 简单，如果之前标签上有样式，会被覆盖，一般不用
box.style.cssText = 'width:200px;height: 200px;background-color: blue; font-size: 30px; color: white;'
4、点操作符和中括号操作符
- 元素[‘属性名’]
- 元素[‘属性名’] = 值
当属性是一个变量的时候，点的形式不能操作，只能用中括号的形式
<div id="box" title="平头哥">我就是我</div>
var box = document.getElementById('box');
// 点的操作形式
// console.log(box.title);
// box.title = '平头妹';
// ---------------------
// console.log(box['title']);
// box['title'] = '小高';
// ----------------------
// 当属性是一个变量的时候，点的形式不能操作，只能用中括号的形式
var t = 'title';
// box.t 这样写，代表box里有t这样一个属性
console.log(box[t]);
box[t] = '小张';
保留字
关键字