Web前端开发（JS的快速入门）
JavaScript:是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
JavaScript 和 Java是完全不同的语言，不论是概念还是设计，但是基础语法类似。
目录
JS引入方式
JS基础语法
JS函数
JS对象
JS事件监听
JS引入方式
内部脚本：将JS代码定义在HTML页面中
JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度
外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
外部的JS文件中，只包含JS代码，不包含<script>标签
<script>标签不能自闭合
外部JS文件如图所示只含JS代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS引入方式</title><!-- 内部脚本 --><!-- <script>alert('hello js');</script> --><!-- 外部脚本 --><script src="js/dome.js"></script></head>
<body></body>
</html>JS基础语法
书写语法
区分大小写：与Java一样，变量名、函数以及其他一切东西都是区分大小写的
每行结尾分号可有可无
注释
单行注释：//注释内容
多行注释：/*注释内容*/
大括号表示代码块
输出语句
使用window.alert()写入警告框 //浏览器弹出警告框
使用 document.write()写入HTML输出 //写入HTML，在浏览器展示
使用 console.log()写入浏览器控制台 //写入浏览器控制台
变量
JavaScript中用var关键字来声明变量。
JavaScript是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：
组成字符可以是任何字母、数字、下划线(-)或美元符号（$）
数字不能开头
建议使用驼峰命名
var定义的变量的特点：
1.作用域比较大，全局变量
2.可重复定义
（ECMAScript 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量， 只在let关键字所在的代码内有效。且不允许重复声明。
const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。)
数据类型、运算符、流程控制语句
JavaScript中分为：原始类型 和 引用类型。
原始类型：
number：数字（整数、小数、NaN（Not a Number））
string :字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefine：当声明的变量未初始化时，该变量默认值是undefine
运算符：
==会进行类型转换，===不会进行类型转换
（即==先转换为相同类型再进行转换，===发现类型不同直接返回false）
parseInt转化：
字符串转换为数字：
将字符串字面值转为数字。如果字面值不是数字。则转为NaN
其他类型转为boolean:
Number:0和NaN为false，其他均为true。
String：空字符串为false，其他均转为true。（空格也为true）
Null和undefined：均转为false。
使用typeof运算符可以获取数据类型
流程控制语句：
if...else if ... else...
switch
for
while
do...while
JS函数
介绍：函数（方法）是被设计为执行特点任务的代码块。
定义：
方式一：
JavaScript函数通过function关键字进行定义，语法为：
function functionName（参数1，参数2）{
//要执行的代码
}
方式二：
var functionName=function（参数1，参数2）{
//需执行代码
}
注意：
形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
JS中函数调用可以传递任意个数的参数。
调用：函数名称（实际参数列表）
JS对象
基础对象：Array、String、JSON
浏览器对象模型：BOM
文档对象模型：DOM
Array:
JavaScript中Array对象用于定义数组。
定义
var 变量名=new Array（元素列表）//方式一
var 变量名=[元素列表] //方式二
<script>// alert('hello js');// window.alert("hello js");// document.write("hello js");// console.log("hello js");var arr1=new Array(1,2,3,4);var arr2=[1,2,3,4];console.log(arr1[0]);console.log(arr2[2]);</script>//特点：长度可变，类型可变。
访问
arr[索引]=值
var arr2=[1,2,3,4];arr2[10]=10;for(let i=0;i<arr2.length;i++){console.log(arr2[i]);}console.log("======================");// console.log(arr1[0]);arr2.forEach(function(e){console.log(e);})// ES6 箭头函数：（...）=>{...}arr2.forEach((e)=>{console.log(e);})String：
String字符串对象的创建
Var 变量名=new String("...");//方式一
Var 变量名="...";//方式二
（substring截取含头不含尾）
JSON：
JavaScript自定义对象：
定义格式：
var 对象名 ={
属性名1：属性值1，
属性名2，属性值2，
属性名3，属性值3，
函数名称：function（形参列表）{}
}；
自定义中的方法冒号和function可省略
var user={name:"Tom",age:10,gender:"male",eat(){alert("哈哈哈");}}调用格式：
对象名.属性名；
对象名.函数名();
JSON-介绍
JSON-基础语法
定义：var 变量名 = ‘{"key1":value1,"key2":value}';
value 的数据类型为：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true或false）
数组（在方括号中）
对象（在花括号中）
null
JSON字符转化为JS对象
var jsObject=JSON.parse(userStr)；
JSON对象转化为JSON字符串
var jsonStr=JSON.stringify(jsObject)；
var jsontr='{"name":"Tom","age":18,"addr":["北京","shanghai"]}';alert(jsontr.name);var obj = JSON.parse(jsontr);
BOM：
概念：浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装 为对象
Window:浏览器窗口对象
Navigator:浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
window：
介绍：浏览器窗口对象。
获取：直接使用window，其中window.可省略。window.alert("Hello Window");
属性：
history:对History对象的只读引用
location:用于窗口或框架的Location对象。
navigator：对Navigator对象的只读引用。
方法：
alert()：显示带有一段消息和一个确认按钮的警告框。
confirm():显示带有一段消息以及确认和取消按钮的对话框
setlnterval()：按照指定的周期来调用函数或计算表达式
var i=0;setInterval(function(){i++;console.log("执行了"+i+"次");},2000);
setTimeout()：在指定的毫秒数后调用函数或计算表达式。
Location:
介绍：地址栏对象。
获取：使用window.location获取，其中window.可省略。
window.location.属性; \ loction.属性；
属性：
href：设置或返回完整的URL。
DOM：
概念：文档对象模型。
将标记语言的各个组成部分封装为对应的对象:
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text：文本对象
Comment：注释对象
JavaScript通过DOM，就能够对HTML进行操作：
改变HTML元素的内容
改变HTML元素的样式（css）
对HTML DOM事件作出反应
添加和删除HTML元素
一、
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Doucument对象提供了以下获取Element元素对象的函数：
1.根据id属性值获取，返回单个Element对象
var h1=document.getElementById('h1');
2.根据标签名称获取，返回Element对象数组
var divs=document.getElementsByTagName('div');
3.根据name属性值获取，返回Element对象数组
var hobbys=document.getElementsByName('hobby');
4.根据class属性值获取，返回Element对象数组
var clss=document.getElementsByClassName('cls');
二、
查询参考手册，属性、方法
JS事件监听
事件监听：
事件：HTML事件是发生在HTML元素上的“事情”。比如：
按钮被点击
鼠标移动到元素上
按下键盘按键
事件监听：JavaScript可以在事件被侦测到时 执行代码。
事件绑定：
常见事件：
