JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互W3C标准:网页主要由三部分组成：
结构:HTML
表现: CSS
行为: JavaScript
JavaScript和Java是完全不同的语言，不论是概念还是设计，但是基础语法类似
1，JavaScript的引入方式
（1）内部脚本
将JS代码定义在HTML页面中
在HTML中，JavaScript代码必须位<script>与</script>标签之间
javascript
<script>
alert("hello JS ~");
</script>提示:
在HTML文档中可以在任意地方，放置任意数量的<script>
一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示
（2）外部脚本
将JS代码定义在外部JS文件中，然后引入到HTML页面中
javascript
外部文件: demo.js
alert("hello JS ~");
引入外部js文件
<script src="../js/demo.js"></script>注意:
1．外部脚本不能包含<script>标签
- <script>标签不能自闭合
2，JavaScript基础语法
（1）书写语法
区分大小写:与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：
单行注释://注释内容
多行注释:/*注释内容*/
大括号表示代码块
javascript
if (count == 3){
alter(count);
}（2）输出语句
使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
javascript
window.alert("hello JS~");/弹出警告框
document.write("hello JS ~");/写入HTML
console.log("hello JS ~");/写入控制台（3）变量
JavaScript中用var关键字(variable的缩写)来声明变量
javascript
var test=20;
test="张三";JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则:
组成字符可以是任何字母、数字、下划线(_）或美元符号($)
数字不能开头
建议使用驼峰命名
ECMAScript 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
ECMAScript 6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变
var:
1.作用域：全局变量
2.变量可重复定义
（4）数据类型
JavaScript中分为:原始类型和引用类型
5种原始类型:
number:数字（整数、小数、NaN(Not a Number))
string:字符、字符串，单双引皆可
boolean:布尔，true，false
null:对象为空
undefined:当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型
alert(typeof age);
（5）运算符
|-------|---------------------------------|
| 一元运算符 | ++，-- |
| 算术运算符 | +， -， *，l，% |
| 赋值运算符 | =，+=，-=... |
| 关系运算符 | >，<，>=，<=，!=，==,===..... |
| 逻辑运算符 | &&，ll，! |
| 三元运算符 | 条件表达式? true_value : false_value |
javascript
var age1=20;
var age2="20";
alert(age1==age2);//true
alert(age1===age2);//false==：判断两个类型是否一样，如果不一样，则进行类型转换，再进行比较
===：判断两个类型是否一样，如果不一样，直接返回false
类型转换：
其他类型转为number
1.String：按照字符串的字面值，转为数字，如果字面值不是数字，则转为NaN，一般使用parseInt
2.boolean：true为1，false为0
其他类型转为boolean
1.number：0和NaN为false，其他为true
2.String：空字符串为false，其他为true
3.null：false
4.undefined：false
javascript
var str="20";
alter(paeseInt(str)+1);//21（6）流程控制语句
if
switch
for
while
do...while
（7）函数
函数(方法)是被设计为执行特定任务的代码块
定义: JavaScript函数通过function关键词进行定义，语法为:
方式一：
function functionName(参数1,参数2..){
要执行的代码
}
方式二：
var functionName=function(参数列表){
要执行的代码
}
注意:
形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
javascript
function add(a,b){
return a+b;
}
let result=add(1,2);3，JavaScript对象
（1）Array对象
JavaScript Array对象用于定义数组
1）定义
var 变量名=new Array(元素列表);//方式一
var 变量名=【元素列表】；//方式二
2）访问
arr[索引]=值;
注意:Js数组类似于Java集合，长度，类型都可变
javascript
var arr=[1,2,3];
arr[10]=10;
alter(arr[10]);//10
alter(arr[10]);//undefined3）方法
push:添加方法
splice:删除元素
（2）String对象
1）定义
var 变量名=new String(s);//方式一
var 变量名=s；//方式二
javascript
var str=new String("hello");
var str="hello";
var str='hello';2）属性
length：字符串长度
3）方法
charAt()：返回指定位置的字符串
indexOf()：检索字符串
trim()：去除字符串前后两端的空白字符
（3）自定义对象
javascript
var person={
name:"zhangsan",
age:23,
eat:function(){
alter("干饭");
}
};4，BOM
Browser Object Model浏览器对象模型
JavaScript将浏览器的各个组成部分封装为对象
组成:
Window:浏览器窗口对象
Navigator:浏览器对象
screen:屏幕对象
History:历史记录对象
Location:地址栏对象
（1）Window对象
Window:浏览器窗口对象
获取:直接使用window，其中window.可以省略
window.alert("abc");
1）属性
获取其他BOM对象
|-----------|-----------------------------------|
| history | 对History对象的只读引用。请参数History对象 |
| Navigator | 对Navigator对象的只读引用。请参数Navigator对象 |
| Screen | 对Screen对象的只读引用。请参数Screen对象 |
| location | 用于窗口或框架的 Location对象。请参阅Location对象 |
2）方法
|---------------|-------------------------------|
| alert() | 显示带有一段消息和一个确认按钮的警告框 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| setInterval() | 按照指定的周期(以毫秒计）来调用函数或计算表达式，循环执行 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式，执行一次 |
（2）History对象
History：历史记录
获取：使用window.history获取，其中window.可以省略
window.history.方法();
history.方法();
1）方法
|-----------|-----------------------|
| back() | 加载history 列表中的前一个 URL |
| forward() | 加载history 列表中的下一个URL |
（3）Location对象
Location：地址栏对象
获取：使用window.location获取，其中window.可以省略
window.location.方法();
location.方法();
1）属性
|------|-------------|
| href | 设置或返回完整的URL |
5，DOM
Document Object Model文档对象模型
将标记语言的各个组成部分封装为对象
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
JavaScript通过DOM，就能够对HTML进行操作了：
改变HTML元素的内容
改变HTML元素的样式(CSS)
对HTML DOM事件作出反应
添加和删除HTML元素
DOM是W3C(万维网联盟)的标准
DOM定义了访问HTML和xML文档的标准:
W3C DOM标准被分为3个不同的部分:
1.核心DOM:针对任何结构化文档的标准模型
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
2.XML DOM:针对XML文档的标准模型
- HTML DOM:针对HTML文档的标准模型
lmage: <img>
Button : <input type='button'>
（1）获取Element
Element:元素对象
获取:使用Dgcument对象的方法来获取
-
getElementByld:根据id属性值获取，返回一个Element对象
-
getElementsByTagName:根据标签名称获取，返回Element对象数组
-
getElementsByName:根据name属性值获取，返回Element对象数组
-
getElementsByClassName:根据class属性值获取，返回Element对象数组
（2）HTML Element对象的使用
查阅文档
6，事件监听
事件:HTML事件是发生在HTML元素上的"事情"。比如:
1，按钮被点击
2，鼠标移动到元素之上
3，按下键盘按键
事件监听: JavaScript可以在事件被侦测到时执行代码
（1）事件绑定
事件绑定有两种方式:
方式一:通过HTML标签中的事件属性进行绑定
javascript
<input type="button" onclick='on()'>
function on(){
alter("ass");
}方式二:通过DOM元素属性绑定
javascript
<input type="button" id='bin'>
document.getElementById("bin").onclick=function(){
alter("az");
}（2）常见事件
|-------------|--------------|
| 事件名 | 说明 |
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
7，正则表达式
概念:正则表达式定义了字符串组成的规则
定义：
1，直接量:注意不要加引号
javascript
var reg=/^\w{6,12}$/;2，创建RegExp对象
javascript
var reg =new RegExp("^\\w{6,12}$");方法：
test(str):判断指定字符串是否符合规则，返回true或 false
（1）语法
|-------|---------------------------------------|
| ^ | 表示开始 |
| $ | 表示结束 |
| [] | 代表某个范围内的单个字符，比如:[0-9]单个数字字符 |
| . | 代表任意单个字符，除了换行和行结束符 |
| \w | 代表单词字符:字母、数字、下划线()，相当于[A-Za-zO-9] |
| \d | 代表数字字符:相当于[0-9] |
| + | 至少一个 |
| * | 零个或多个 |
| ? | 零个或一个 |
| {x} | x个 |
| {m,} | 至少m个 |
| {m,n} | 至少m个，最多n个 |