**
JavaScript：
**
一、发展历史：
Javascript是一种由Netscape的LiveScript发展而来的面向对象的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
JavaScript 的正式名称是 “ECMAScript”。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言，从 1996 年开始，已经出现在所有的 Netscape 和 Microsoft 浏览器中。ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。
**
二、简介：
JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript 1、JavaScript是一种在网络浏览器上运行的编程语言。
它主要添加到使用HTML和CSS构建的网站中，并在实现各种页面动态效果方面发挥作用。 例如，网页上显示的轮播模式和在咨询平台上输入内容后显示的提示信息不正确等。另外，在商场网站上购物时，购物车的使用和成本估算也 需要JavaScript。 因此，即使不是很明显，它仍然是编码人员经常使用的语言。
2、JavaScript是一种多功能开发语言。
除了向网页添加操作的有用性之外，JavaScript还可以用于实现许多其他功能。 例如，它可以开发各种网站应用程序，例如“聊天工具”和“货币图表”，它们可以实时修改，这是JavaScript的主要魅力之一。
**
三、特点：
1.脚本语言。 JavaScript是一种解释型脚本语言。首先编译和执行C，C ++和其他语言，同时在程序运行期间逐行解释JavaScript。2.基于对象。 JavaScript是一种基于对象的脚本语言，不仅可以创建对象，还可以使用现有对象。
3.简单。 JavaScript语言使用弱类型的变量类型。它对使用的数据类型没有严格要求。它是一种基于Java基本语句和控件的脚本语言。它的设计既简单又紧凑。
4.动态。 JavaScript是一种事件驱动的脚本语言，无需通过Web服务器即可响应用户输入。访问网页时，鼠标可以在网页上单击鼠标，或上下移动并移动窗口。 JavaScript可以直接响应这些事件。
5.跨平台。 JavaScript脚本语言不依赖于操作系统，仅需要浏览器支持。因此，只要机器上的浏览器支持JavaScript脚本语言，那么编写后就可以在任何机器上使用JavaScript脚本。目前，大多数浏览器都支持JavaScript。
**
四、作用：
1.交互式操作2.表单验证
3.网页特效
4.Web游戏
5.服务器脚本等
(一)数据类型
- 数值：整数、浮点数。
- 整数：由正负号、数字构成，八进制、十进制、十六进制。
- 浮点数：由正负号、数字和小数点构成，常规记数法、科学记数法。
- 逻辑值：布尔值（true、false）。
- 字符串值：单引号、双引号。
- 空值：null
- 未定义值：已定义没有赋值的量，应用不存在的对象。
(二)变量声明
变量命名规则：
1.首字符必须是大写或小写的字母或下划线（_）或美元符（$)。
2.后续的字符可以是字母、数字、下划线或美元符。
3.变量名称不能是关键字。
4.长度是任意。
5.区分大小写。
语法格式：
var 变量名；
let 变量名；
conse 变量名；
let var 和const的区别:
var 在同一个作用域中,可以重复声明同一个变量
let 在同一个作用域中,不能重复声明，一个变量只能声明一次
const声明了一个不可以修改的变量,并且必须要初始化
声明变量：
var name,sex;
var total=3721;
var notNull=true;
var name=“李小龙”，sex=“先生”;
var i=j=0;
全局变量：省略var，或在函数外声明
局部变量：在函数内声明
全局变量可在整个脚本中被使用，可在不同的窗口中相互引用（指定窗口名）
例：
【结果】
五、JavaScript表达式：
- 算数运算符
+ - * / %（取余） ++（递增） --（递减） - 赋值运算符
= += -= *= /= %=（取余） - 关系运算符
== ===(全等) != > < >= <= - 逻辑运算符
！ && || - 条件运算符
? :
条件表达式?表达式1:表达式2
条件表达式的结果是boolean值
如果条件表达式为真，就执行表达式1
如果条件表达式为假，就执行表达式2
例1：
【结果】
六、javascript中的对象类型
数字类型 Number
布尔类型 Boolean
字符串类型 String
数组类型 Array
(一)、数字类型 Number
构造方法：用来构造数字对象
let a = new Number(100);
方法：对数字进行处理
toFixed(2) 四舍五入保留指定的小数位
toPrecision(2) 保留指定的精度[有效数字]
属性:表示一些特殊的值
MAX_VALUE 最大值
MIN_VALUE 最小值
POSITIVE_INFINITY 无穷大 值为Infinity
NEGATIVE_INFINITY 无穷小 值为-Infinity
NaN 不是数字的数值 (Not a Number)
-Infinity 无穷大
-Infinity 无穷小
(二)、Boolean对象
例：
let a1 = Boolean(true);
let a2 = Boolean(“abc”);
let a3 = Boolean(“123”);
let a4 = Boolean("")
let a5 = Boolean(null);
let a6 = Boolean(false)
let a7 = Boolean(“false”);
let a8 = Boolean(0);
let a9 = Boolean(Number.NaN);
为假的值：false 空字符串 null 0 NaN
其它都为真：true 非空字符串 非0数字
(三)、字符串类型 String
属性：
length获得字符串的长度
方法:
charAt(index) 获得指定索引位置的字符
indexOf(str) 获得指定子字符串首次出现的索引位置
lastIndexOf() 获得指定子字符串最后次出现的索引位置
subStr(start,length) 从指定的索引位置，截取length的字符
subString(start,end) 从start开始，到end结束，截取字符串
trim() 去掉字符串首尾的空格
replace(old,new) 替换字符串
split(str) 切割字符串
startWith(str) 判断是不是以str开头
endWith(str) 判断是不是以str结尾
toUpperCase() 转换成大写字母
toLowerCase() 转换成小写字母
七、JavaScript中的数组对象
数组：用来保存一组数据的类型一个变量只能表示一个数据
需求：
保存一个同学的成绩
let a=100;
1.数组的定义方式
//定义好之后，数组中的数据个数是确定的
let a = [100,90,95,80,68];
//定义好之后，数组中的数据个数不确定
let b = new Array();
b[0]=100;
b[1]=90;
b[2]=80;
let c = new Array(5);
2.数组的使用
一个数组中是可以存放多个数据的
这些数据叫做数组的元素
每一个元素都有一个编号，这个编号叫做数组的下标[索引]
索引是从0开始的连续的整数
通过索引可以操作数组的任意一个元素
操作方式：
数组变量名[索引]
例如：let a = [100,90,95,80,68];
a[0]表示数组的第一个元素
a[1]表示数组的第二个元素
a[2]表示数组的第三个元素
a[3]表示数组的第四个元素
a[4]表示数组的第五个元素
a[5]不存在,结果是undefined
数组的长度：数组中有多少个元素
数组的最大索引=数组长度-1
JavaScript的数组长度是可以改变的
只要增加了数据，就可以自动增加长度
获得数组长度的方式：
数组名.length
3.数组中的常用方法
push(值) 在数组的末尾添加元素
splice(start,len);从start索引开始，删除len个元素，包含start位置
reverse() 反转数组
sort() 对数组中的元素按照从小到大排序
八、JavaScript中的函数
函数 函数是一堆代码的集合定义格式:
//普通函数
function 函数名(){
代码块;
}
//有参数的函数
function 函数名(参数列表){
代码块;
}
//有返回值的函数
function 函数名(参数列表){
...
return 值;
}
函数必须要调用才会执行
调用格式:
函数名();
-------------------------------
调用有参数的函数，可以传入对应个数的数值
如果传入的参数个数要函数中定义的个数不一致，也是可以的
函数名(参数值);
-----------------------------------------
如果调用有返回值的函数，可以使用一个变量来接受返回值
let a = 函数名(参数值);
九、JavaScript中的对象
(一)、如何定义对象
let a = {};
let stu = {
变量名:值,
变量名:值,
变量名:值
};
对象中可以定义的内容-----变量、函数
如何描述学生？
姓名：张三
年龄：20
性别：男
电话:13812345678
学习
let stu = {
name:"张三",
age:20,
sex:"男",
tel:"13812345678",
study:function(){
console.log(this.name+","+this.age+","+this.sex+","+this.tel)
}
};
在对象外部使用变量
stu.name
stu.study()
在对象内部使用变量需要在变量前加一个this，表示当前对象
this.name
this.study()
（二）、使用对象构造器
1.定义构造器
function Puke(type,num){
this.type = type;
this.num = num;
this.info =function(){
console.log(this.type+" "+this.num);
}
}
调用构造器创建对象
let pai =new Puke("黑桃","A");
2.使用Object创建对象
方式a：
let obj = new Object();
obj.name="zhangsan";
obj.age=20;
obj.sex="男";
方式b：
let a={name:"zhangsan",age:20,sex:"男"}
let obj = new Object(a);
十、JavaScript中操作DOM对象
DOM:Document Object Model
文档对象模型
将HTML文件作为一个对象存在 -->Document
HTML中的每一个标签【元素】都是一个对象 -->Element
HTML中的每一个属性都是一个对象 --> Attribute
HTML中的每一个文本都是一个对象 -->TextJS操作DOM–>通过JS来对HTML页面进行操作[增删改查]
如何通过JavaScript操作HTML? 在JavaScript中已经内置了一个document对象
当浏览器加载完整个HTML页面的时候，就会自动创建一个document对象
(一)、获得HTML页面中的标签
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
document.getElementsByClassName();
document.querySelecter("");
document.querySelecterAll("");
拿到父标签
let parent = 子标签对象.parentElement
标签转换成了文档对象
文档
<a id="aa" href="http://www.baidu.com">这是超链接</a>
对象
let a={
id:"aa",
href:"http://www.baidu.com",
textContent:"这是超链接"
}
(二)、根据标签对象可以获得标签中的属性和文本
也可以修改标签中的属性值和文本的值
标签对象名.属性名 = 值;
let value = 标签对象名.属性名;
获得文本
let text = 标签对象名.textContent;
let text = 标签对象名.innerText;
let text = 标签对象名.innerHTML;
修改文本的值
标签对象名.textContent="";
标签对象名.innerText="";
标签对象名.innerHTML="";
(三)、增加标签
let 子标签 = document.createElement("h2");
父标签.append(子标签);
父标签.appendChild(子标签);
(四)、移除标签
父标签.removeChild(子标签);
(五)、事件
事件：在页面上发生了一个操作
鼠标事件：
onmousedown 鼠标按键按下
onmouseup 鼠标按键松开
onmouseenter 光标进入
onmouseout 光标离开
onclick 鼠标按键点击[按下+松开]
键盘事件
onkeypress
onkeydown
onkeyup
框架事件
onload 页面加载完成[页面在浏览器中完成显示过程]
onunload 页面卸载完成[浏览器关闭的时候，先清空浏览器中的页面数据]
表单事件
onblur 表单项失去焦点
onfoucs 表单项获得焦点
onchange 输入框内容发生改变
onsubmit 当提交按钮被点击
(六)、事件监听机制
事件监听机制：给组件绑定一个监听器，用来监听对应的事件是否发生
事件的绑定方式：
1.在标签[组件]中定义一个 属性，属性的值绑定了一个JS代码
<button onclick="ButtonAddNews()">添加</button>
2.在JavaScript中动态绑定
let btn = document.querySelecter("");
btn.addEventListener("事件",回调函数);
比如：
btn.addEventListener("click",function(event){})
例：
a、给组件绑定事件监听器
添加
b、编写监听函数
//点击按钮的监听器方法
function ButtonAddNews(){
alert(“我被点击了！”);
}
十一、通过JavaScript操作CSS
CSS的优先级:
Style > ID选择器 > 类选择器 >标签选择器
(一)、通过style属性来修改css
DOM Style对象
标签对象.style.CSS属性="值"；
注意：在JavaScript中CSS属性的写法和CSS中的属性写法不一样
CSS中多个单词使用 - 隔开
JavaScript中，使用驼峰命名法
font-size fontSize
margin-top marginTop
background-color backgroundColor
例：
<style>
.card{
width: 180px;
height: 180px;
margin:10px;
background:#FF00FF;
font-size:16px;
}
</style>
</head>
<body>
<div class="card" id="div">湖南长沙</div>
<script>
let card = document.querySelector(".card");
card.addEventListener('mouseover',function(){
//改变card的背景颜色
card.style.background="#FF0000";
card.style.fontSize="30px";
});
card.addEventListener('mouseout',function(){
//改变card的背景颜色
card.style.background="#FF00FF";
card.style.fontSize="16px";
})
</script>
【结果】
(二)、通过class属性/ID选择器 来重置选择器
标签对象.className="类选择器1 类选择器2"
标签对象.id="ID选择器"
<style>
.card{
width: 180px;
height: 180px;
margin:10px;
background:#FF00FF;
font-size:16px;
}
.card2{
background:#FF0000;
font-size:30px;
}
#abc{
color:#FFFFFF;
}
</style>
</head>
<body>
<div class="card">湖南长沙</div>
<script>
let card = document.querySelector(".card");
card.addEventListener('mouseover',function(){
card.className="card card2";
card.id="abc";
});
card.addEventListener('mouseout',function(){
card.className="card";
card.id="div";
});
</script>
【结果】：
123
9207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
