目录
了解js特性&事件使用
20200316
1、JavaScript简介
历史：
第一个浏览器 就是文本和图片
网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互
诞生：为了实现用户和网页的交互而出现
1、开发一门新语言
2、使用已经成熟的语言（java<sun> python c ------）
这个时候使用的是java ----- 笨重
95年的时候 布兰登.艾奇 网景公司 看书喝茶
javascript 布兰登.艾奇 10天
布兰登.艾奇 ：我不喜欢这们语言 因为我感觉他像是各个语言的一个综合体
javascript 完善？
es1 es5和es6 es102、JavaScript特点、功能
javascript 核心组成：
1、ECMAscript 核心语法 规定这门语言怎么写或者说怎么用
2、DOM document object model 文档模型 ---- 标签
3、BOM browser object model 浏览器模型 --- 浏览器
javascript特点：
1、解释性的脚本语言 ------ 浏览器可以直接读写
2、基于事件的 -- 必须是事件触发 才能运行某一个效果
3、基于对象的 -- 万物皆对象 面向对象编程 es5里面没有对象这一个说法 只有类对象 在es6里面才有对象的概念
4、跨平台的 --- 是否有浏览器有关系
5、弱类型语言 -- 定义变量的关键字是唯一的 使用的是var
和编译语言之间的区别：
- java --> 编译器 -->0101010 --> 效果
- JavaScript --> 浏览器（javascript引擎）
- Java和JavaScript之间关系 --> 没有关系3、JavaScript引入方式
行内：
不需要在开始标签写入javascript 这个关键词 和内部样式是有区别的
onclick:是点击事件 只有点击了才能执行 不点击就不会执行
alert(1)：是js自带的弹出框，带有一个确定按钮 只是用来测试使用 不能用于实际的开发
和超连接里面的#号不一样 #属于空链接 alert属于事件弹出框
alert（）：可以放置任何内容，一般用来测试 如果是中文或者英文 要使用引号引起来，数字或者变量 不需要使用引号
内部：
在使用内部js的时候，要使用script双标签，所有的js代码都要放在这个script双标签之间
script双标签在页面的位置，可以放在任何位置，但是，只建议放在head和body的结束标签之前，紧紧挨着head和body的结束标签。
外部：
注意扩展名 是.js
外部js的引入 要使用script双标签 并使用src属性 引入外部js的路径
href和src的区别：都是指的路径 一个是外部样式的路径 一个是外部js的路径
script双标签在页面的位置，可以放在任何位置，但是，只建议放在head和body的结束标签之前，紧紧挨着head和body的结束标签
伪协议：
<a href = 'javascript:;'></a>
注意：在使用外部js 的时候，不需要在外部js里面在写入script 双标签3.1、三种引入方式优先使用哪个？
优先使用外部 （页面和js的开发可以分离，提高开发效率）
对于一些简单的小效果 可以使用内部 尽量不要使用行内 3.2、js如何注释
被注释掉的代码是不执行的
在开发中，没有删除代码着一种说法，只有注释代码
单行注释 //
多行注释 /*注释的代码*/
快捷键 ctrl+/4、js鼠标事件
onclick 点击事件
ondblclick 双击事件
onmouseover 鼠标移入元素
onmouseout 鼠标离开元素
onmouseenter 鼠标移入元素
onmouseleave 鼠标离开元素
onmousemove 鼠标在元素中移动
onmousedown 鼠标按下
onmouseup 鼠标抬起
oncontextmenu 鼠标右键菜单事件5、js获取元素
get:获取 / set:设置
Element：元素 指的是标签名
By：通过
Id：ID名字
document.getElementById('id名字')；
测试语句： console.log()；把结果在控制台打印出来
document.getElementById('box').onclick=function(){
alert(1);
}
当使用内部或者外部js的时候，要把功能代码 放在一个函数的代码块里面
getAttribute() 6、js变量
用来存储值使用的
使用关键字 var 定义 js里面所有的变量都是使用 var 关键字定义 所谓被称为弱类型语言
因为定义所有的变量只使用 var 关键字 ，所以是弱类型语言
var num = 10；
var： 申明变量的关键字
num: 变量名
= : 不是等于的意思，是赋值
10： 变量值
js里面的值的类型 是由等号右面的值决定的
命名规则：
必须以字母、$、下划线（_）开头 后面可以跟任何东西
遵循驼峰命名法 -- 当你的变量名 由两个单词或者两个单词以上组成时，从第二个单词开始，首字母要大写
具有语义化
不能使用关键字或者保留字（现在不是关键字，将来会成为关键字的字）
分号：
告诉浏览器，这一行代码结束了
最好是带上分号，好习惯
引号：
单引号和双引号
单引号和双引号都是成对出现的，不能交叉使用 要嵌套使用
单引号里面一定要使用双引号 双引号里面一定要使用单引号7、事件的三部曲
谁发生了事件
发生了什么事件
发生了什么事情
------------------------------------------------------------------------
//1、 btn发生了事件 获取btn
*var* btn = document.getElementById('btn');
// 2、发生了什么事件 onclick
btn.onclick = *function*(){
// 3、把‘我成功被点击了’打印到控制台
console.log('我成功被点击了211111');
}
alert()和console.log():两个测试语句的括号里面，除了变量名和纯数字以为，其他的都要加引号
当js必须写在头部时：
window.onload = function() {
var btn = document.getElementById('btn');
console.log(btn);
btn.onclick = *function* () {
alert('我是被点击的');
}
}
是让你的文档以及资源优先加载，然后在加载js8、JavaScript操作属性（内容、标签、样式）
操作表单元素：
表单.value；获取表单内容
表单.value = '新的值'； 设置表单内容
txt.value = null;9、操作闭合标签内容
innerHTML
标签.innerHTML 获取内容
标签.innerHTML = '新内容' 设置内容
innerHTML会覆盖原来的内容
innerText
获取内容的
标签.innerText 获取内容
标签.innerText= '新内容' 设置内容
innerText会覆盖原来的内容
区别：
innerHTML是可以识别标签，并正常输出的 但是 innerText是不可以识别标签的，会把标签当作文本正常打印9-案例
<body>
<div id="box">春眠不觉晓 处处蚊子咬</div>
<script>
var box = document.getElementById('box');
// console.log(box);
// console.log(box.innerHTML); // 获取标签内容
//box.innerHTML = '我是新内容'; // 设置新内容覆盖原内容
// 原来的内容和新的内容全部保留住
// box.innerHTML = box.innerHTML+'我是新内容';
// box.innerHTML += '我是新内容233333'; //简写
---------------------------------------------------------------
// console.log(box.innerText);
// box.innerText = '123';
// box.innerText = box.innerText + '789';
// box.innerText += '789';
// 区别：
// box.innerHTML = '<h1>我是可以识别标签的</h1>';
box.innerText = '<h1>我是可以识别标签的</h1>';
</script>
</body>10、操作元素属性
元素的属性有哪些 ？
id class title
原有属性 id class title 自定义属性 ： 自己起名字
标签.属性名 获取属性
标签.属性名 = '新属性值' 设置属性
这种方式对自定义属性是获取不到的
class是一个特别的属性
要想获取class,必须使用className
但是会覆盖原来的类名10-案例
<style>
.active{
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<!-- 操作元素属性 -->
<div id="box" class="div" title="我就是我"></div>
<script>
var box = document.getElementById('box');
// console.log(box);
// console.log(box.id,box.title);
// box.id = 'box1';
// box.title = '我不是我 我也不知道是谁';
// class的获取设置以及使用
// console.log(box.class); 无法获取class值
console.log(box.className); //使用className获取
box.className = 'active';
</script>
</body>11、操作元素样式
行间样式和非行间样式
js操作的样式，不管是添加样式，还是覆盖样式 或者是修改样式 最终显示的位置都是行间样式
标签.style.样式名 = '样式值';
## 注意：js里面是没有 `-`,当使用样式里面的复合词的时候，要把`-`去掉，然后从第二个单词开始，首字母要大写
cssText
添加样式的时候，1、保证样式在同一行 2、字符串拼接
会完全覆盖原来的样式 box.style.cssText += 'width: 100px;height: 100px;border:2px solid blue';
兼容：
打印值的时候，在`IE`浏览器里面 样式名和样式值 都是大写，并且数无序的
`IE`浏览器并不会读写cssText,必须在样式前面加 `;`11-案例
<body>
<div id="box" style="width: 200px; height: 200px;"> 我是为你</div>
<script>
// 获取元素
var box = document.getElementById('box');
// console.log(box);
// 标签.style.样式名 = ‘样式值’;
box.style.width = '100px';
box.style.height = '100px';
//box.style.background = 'blue'; // 英文 十六进制
// box.style.background-color = 'red'; // 错误的
box.style.backgroundColor = 'red'; //js中采用驼峰命名，不能使用 - 连接
box.style.fontSize = '20px';
</script>
</body>
注：相同属性后写的覆盖之前的，没有的会添加
当你的属性值赋值给一个变量的时候，如果使用这个变量，那么 `.` 的形式就不能使用了
解决方案：我们使用`[]`形式实现属性的获取以及设置
只要是从键盘输入的，都是字符串，也就是用引号引起来
如果直接使用的是属性名 那就用`.` ,如果属性名 赋值给了一个变量，并且你想使用这个变量来改变属性，那就使用`[]`.
-------------------------------------------
cssText
<body>
<div id="box"></div>
<script>
1、 var box = document.getElementById('box');
// box.style.cssText = 'width: 100px;'+
// 'height: 100px;'+
// 'background: pink;';
// 标准浏览器的
2、 box.style.cssText = 'width: 100px;height: 100px;background: pink;';
box.style.cssText += 'width: 100px;height: 100px;border:2px solid blue';
console.log( box.style.cssText)
// IE兼容解决：非标准浏览器的 指的是ie 5 6 7 8
box.style.cssText += ';width: 100px;height: 100px;border:2px solid blue';
</script>
</body>
注：cssText 书写折行时需添加''+'' 形式将属性连接 如1
一行书写时如2
数据类型&操作符
20200317
1、数据类型的分类
1）基本数据类型（用来存储单一数据）
数值类型 number
字符串类型 string
布尔型 true/false
空值 null undefined
2）复杂数据类型（可以用来存储多种数据类型）
对象 object
函数 function(){}
数组 Array()2、typeof操作符
为什么需要知道数据类型？
为了保证正常的运算，需要使用运算符把数据链接起来，形成表达式
数据的类型是有值决定
用来确定定义的数据是哪种数据类型
空格 typeof 变量名 我们一般用来判断基本数据类型
括号 typeof (变量名) 我们一般用来判断复杂的数据类型
instanceof运算符 用来确定当前的实列化是不是当前的对象创建的 2-案例
var d = 10；
console.log(typeof d) 控制台返回number数值型
console.log(typeof(d)) 两种写法3、基本数据类型--Number类型-数值类型
整数和小数
如果是小数，并且第一位是 0 ，可以省略，并不影响打印
如果是小数，并且最后一位是 0 ，0会被自动省略
负值
整数或者小数的负数
进制
二进制 0101
八进制（0-7） 如果超出这个范围 自动转化成十进制
十进制 （0-9）
十六进制（0-9 a-f）以0x开头 x可以大写也可以小写
小数相加
小数计算的方式是按照 `IEEE 754` 64位方式进行计算的 进度缺失；
解决方式：扩大100倍 结果缩小100倍
NaN
当进行一个不正常的运算的时候 会产生NaN
不是一个数字的数字 类型number
作用：只是告诉开发者，你的表达式运算出现了不正常的运算3-案例
//进度缺失 0.1 0.2特殊
var a = 0.1;
var b = 0.2;
console.log(a + b);//0.30000000000000004
解决：扩大一百倍
console.log((0.1*100 + 0.2*100) / 100); // 透明度计算会遇到
var c = 0.2;
var d = 0.3;
console.log(c + d);//0.5
var e = 3;
var f = 'aa';
console.log(e / f); //返回NaN 告知程序员数据运算类型不统一
console.log(typeof(e / f)); //返回 number 类型4、String类型
定义的
使用单引号和双引号引起来的 都是字符串
字符串是可以拼接的
键盘输入的
键盘输入的一定是字符串
长度
字符串是有长度的 并且是有下标的
长度就是字符串的字母个数，所有的下标都是从`0`开始 最后一个下标值是 长度length - 1;
字符串.length(长度)
读写
字符串只能读 不能写 而且必须通过下标
下标
下标从0开始
console.log(a.charAt(0));4-案例
var str = 'dyh';
var str1 = 'hnnu';
var nu = 10;
console.log(typeof str,typeof str1,typeof nu); //返回 string string number
console.log(str + str1); //字符串拼接 dyhhnnu
console.log(10 + str); //隐式转化 10dyh
console.log(str[0]); //d 这种方式是从数组演变过了的
console.log(str.charAt(0)); //字符串使用这种方式取5、Boolean类型
当true和 false参与运算的时候，会根据隐式转换的原则 true 变为 1 false变为 0
true 1 真
false 0 假
console.log(true + false); //返回 16、null与undefined
var a = null；
null 空值 是一个空对象，是为了将来存储一个对象，提前在内存分配一块空间，是为对象进入准备的
var b；
undefined 无定义 没有值 定义的变量没有赋值 结果就是undefined
7、复杂数据类型
Object
关键字创建
表达式创建
function
关键字创建
表达式创建
数组 array
关键字创建
表达式创建7-案例
对象：万物皆对象 属性和方法
对象：一个名词
属性：形容词
方法：动词
一个人：对象
属性： 外貌 身高 胖瘦
方法：跑步 走路 跳 踢 吃饭 看书
表达式定义一个对象 键值对 有键名和键值
var person = {
name:'小花',
age:18,
height:'300kg',
}
// console.log(person.name);
console.log(person['name']);
使用关键字 new new 的作用 就是实列化一个对象
内置函数：js定义好的函数 可以直接拿过来用的 就是内置函数 9种
var person1 = new Object(); //内置函数
person1.name = '宝贝';
console.log(person1.name);
console.log(person1['name']);
function Num(){ // 自定义构造函数
}
var per = new Num();