简易学习JavaScrip

一、什么是JavaScript

JavaScript是不用编译就能运行的解释型语言，所以它要寄生在html内放在服务器上，随网络传输到客户端，在浏览器里运行。

JavaScript能实现网页的动态效果，让网页能与用户交互。

JavaScript的组成有以下几部分：
ECMAScript：基本语法规范；
BOM：Browser Object Model，浏览器对象模型。操作浏览器；
DOM：Document Object Model，文档对象模型。操作网页；

二、ECMAScript-基本语法规则

接下来咱们在编译语言的基础上来学习一下，JavaScrip的数据类型、运算符、流程控制、函数、事件。

1、数据类型

数据类型	描述	示例
number	数字类型	1，2，3.14
boolean	布尔类型	true，false
string	字符串类型	“hello world”
object	对象类型	new Date()，null
undefined	未定义类型	undefined

2、运算符

有这些个：
{+ ，- ，* ，/， > ，<， >= ，<=， ++ ，-- ，+=， -=，*= ，/=， &&， ||， ! ==， ===， !=， !==}
跟java的运算符也差不多，但因为JavaScrip是解释型语言，比宽松，所以有以下要注意有地方：

（- * / ） 算术符运算	描述
如果是数字	正常运算
如果不是数字	js会尝试转换成数字再运算
如果转换不成功	结果是NaN
如果除数是0	结果是Infinity

逻辑运算	描述
== 和 !=	比较的是值
== 和 !=	比较的是值

3、流程控制

有这些个：
{if，if else，for，while，swtich}
和Java的差不多，主要别是个if判断要注意一下：

判断条件	结果
false ，0 ，null ，undefined ，""	为false,其它为true

4、函数

在JavaScript中，函数分为普通函数和匿名函数。

普通函数—语法

//1.定义 一个普通函数
function 函数名(形参1,  形参2, ...){
    //函数体
    //如果需要返回值，就return；否则就不return
}
//2.调用 一个普通函数
var result = 函数名(实参1，实参2, ...);

匿名函数—语法

//定义：
function(形参1,  形参2, ...){
    //函数体
    //如果需要返回值，就return；否则就不return
}

5、事件

事件源：被监听的对象（哪个对象上发生的动作或者状态变化），通常是html标签。
事件(监听器)：用于监听事件源状态变化的组件，由JavaScript提供的不同的事件（监听器），用于监听不同的状态变化。
响应行为：监听到事件源状态变化、或者发生了动作，要执行的代码。

事件	描述
onclick	监听鼠标单击
ondbclick	监听鼠标双击
onsubmit	监听表单提交
onchange	监听加载内容改变
onload	监听加载完成
onfocus	监听获取焦点（光标）
onblur	监听失去焦点（光标）
onkeydown	监听键盘按键按下
onkeyup	监听键盘按键弹起
onkeypress	监听键盘按键按下或按住
onmousedown	监听鼠标按键按下
onmouseup	监听鼠标按键弹起
onmouseover	监听鼠标移入
onmouseout	监听鼠标移出
onmousemove	监听鼠标移动

使用事件示例

//使用onclick事件
<input type="button" value="按钮" onclick="show()"/>
<script>
    //定义响应行为的函数
    function show(){
        alert();
    }   
</script>

三、BOM—浏览器对象模型

用JavaScript代码调用bom对象，可以操作浏览器。

bom对象	描述	调用
window	浏览器窗口对象	window
location	浏览器地址对象，可进行跳转	window.location或location
history	浏览器历史记录对象，可进行历史记录切换	window.history
screen	浏览器的屏幕显示信息对象	window.screen
navigator	浏览器信息对象，可获取浏览器的内核、版本等信息	window.navigator

1、window对象的API

弹窗	描述
alert(string)	普通弹窗
confirm(string)	确认弹窗
prompt(string)	输入弹窗

定时器	描述
setInterval(fn,ms)	多次定时器，fn为函数，ms为毫秒值
setTimeout(fn,ms)	一次定时器，fn为函数，ms为毫秒值
clearInterval(id)	清除多次定时器，id为多次定时器对象
clearTimeout(id)	清除一次定时器，id为多次定时器对象

打开新页面：window.open(“地址”)

2、location对象的API

API	描述
href	获取/设置网址
reload()	刷新当前页面

3、history对象的API

API	描述
forward()	前进一步
back()	后退一步
go(n)	切换n步

screen对象和navigotor对象：略

四、DOM—文档对象模型

dom树：网页被加载到内存中后，网页上所有的标签、属性、文本全部都转换成节点对象，然后按照层级结构形成一个树形结构，这就是dom树。
也就是说只有dom树上的内容才会生效。

1、操作标签的API

获取标签
用document对象调用

方法	说明	返回值
getElementById(“标签id属性”)	通过id获取标签对象	一个标签对象
getElementByName(“标签name属性”)	通过name获取标签对象	一个数组
getElementByTagName(“标签名称”)	通过标签名称获取标签对象	一个数组
getElementByClassName(“标签class属性”)	通过class获取标签对象	一个数组

创建标签

document.createElement("标签名称");

创建出来的标签不会立即生效，必须要插入到dom树里

插入标签

父标签对象.appendChild(子标签对象）

删除标签

标签对象.remove()

操作标签体

//获取标签体
var html=标签对象.innerHTML
//设置标签体
标签对象.innerHTML="HTML代码";

2、操作属性的API

获取属性值

//方法1
var v=标签对象.属性名称;
//方法2
var v=标签对象.getAttribute(属性名);

设置属性值

//方法1
标签对象.属性名称=值;
//方法2
标签对象.setAttribute(属性名,值);

删除属性

标签对象.removeAttribute(属性名);

五、引用数据类型

相当于Java的内置类，js有9个内置类。
在这简列一下：
{Array，Boolean，Date，Math，Number，String，RegExp，Functions}

1、Array数组

创建

//创建空数组对象
var arr=new Array();

//指定长度创建数组对象
var arr=new Array(number);

//添加元素创建数组对象
var arr=new Array(Element1,Element2...);

//直接添加元素创建数组对象
var arr=[Element1,Element2...);

属性
length 获取数组长度

//示例
var len=arr.length;

2、Date日期

创建

创建日期对象	描述
var date=new Date();	获取当前时间对象
var date=new Date(年,月,日);	获取指定日期对象，起始月份为0
var date=new Date(年,月,日,时,分,秒);	获取指定时间对象，起始月份为0

常用方法
toLocaleString()—转换成本地日期格式字符串
getTime()—获取毫秒值
setTime()—以毫秒值设置日期对象

//转换成本地日期格式字符串
var str=date.toLocaleString();

//获取毫秒值
var ms=date.getTime();

//以毫秒值设置日期对象
date.setTime(毫秒值);

3、Math数学工具

ceil()—向上取整
floor()—向下取整
round()—四舍五入
random()—求随机数 [0,1)

//向上取整
var num=Math.ceil(3.14)//4

//向下取整
var num=Math.floor(3.14)//3

//四舍五入
var num=Math.round(3.5)//5

//求随机数
var num=Math.random() //0到1的数，包头不包尾

//求1到100的随机数
var num=Math.floor(Math.random()*100)+1;

4、RegExp正则表达式

这就比较有难度了，但一般用的时候都会去参考网上现成的表达式。原因无非是背完了会长时间，然后就，只能找现成的了。
创建

//直接量方式
var reg1 = /正则表达式/;  
  
//对象形式
var reg2 = new RegExp("正则表达式");

方法
test()—检索字符串的指定的值

var isOk = reg.test("字符串");