JavaScript概述
前言：
学习前基础：Java基础、Html、Css；
文章目录
一、概览
二、JavaScript基础
三、JavaScript内置对象
一、概览
1、JavaScript是什么
JavaScript是一种基于对象和事件驱动的脚本语言，在客户端执行。虽然它是作为开发web页面的脚本语言而出名的，但是在很多非浏览器环境中也使用JavaScript，例如 node.js、 Apache CouchDB 和 Adobe Acrobat。
2、JavaScript定位
Css+Html用于生成具有固定结构样式的静态网页。JavaScript用于将其变为可执行简单程序的动态网页，并且可以与服务器交互生成由服务器计算数据所控制的动态网页。也即前端页面与后台服务器之间的桥梁。
2、JavaScript与java的关系
JavaScript从名字上看与Java非常相似。但这是两种截然不同的编程语言。主要区别如下：
代码格式不一样：Java将代码保存在独立的文件中，而JavaScript必须包含在HTML页面中才能运行。
基本原理不一样：Java是一种面向对象编程语言，而JavaScript是一个客户端脚本语言。
执行过程不一样：Java在指向之前必须经过编译，才能在对应平台上运行。二JavaScript则不需要编译，只需将源代码发送到客户端，有浏览器解释执行。
二、JavaScript基础
1、JavaScript语言位置
<html>
<head></head>
<script>
document.write("你好，欢迎来到JavaScript世界")
</script>
<body>
</body>
</html>
JavaScript语句使用<script></script>语句包裹(之前需使用<script type=“text/javascript”>,现在默认<script>即为JavaScripe)，可放置在Html语言任意部位。浏览器按上下顺序执行JavaScript脚本
2、语法结构
2.1、数据类型
数值型：能存储整数和小叔类型
字符串型：用双引号或单引号包含的一个或多个字符，如果是双引号和单引号一起使用，则单引号包含在双引号内使用
布尔型：仅有两个 值true、false
2.2、变量
JavaScript数据类型为弱数据类型，所有数据类型均使用关键字“var”来定义
var <变量名> [ = <值>]；
var是variable的缩写，又可以叫做可变类型。JavaScript变量命名的规则与Java相似，只能包含数字、字母、下划线，要以字母开头，不可以使用JavaScript关键字。
2.3、运算符与表达式
"===" 表示恒等于，比较运算符。等式左右两边表达式值相等并且数据类型相等时返回true,否则返回false；
“！==”表示不恒等于，比较运算符。等式左右两边表达式值不相等或数据类型不相等时返回true,否则返回false;
其余均与Java运算符相同
3、流程控制及循环语句
3.1、流程控制语句
if语句、switch语句，语法同java
3.2、循环语句
for循环、while循环，语法同java
4、函数
4.1、常用系统函数
alert：弹出具有一个确定按钮的对话框
isNaN：是否为非数值类型
4.2、自定义函数
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript Function</title>
</head>
<script>
function wirteTime(){
var time = getTime();
document.getElementsByName("timeInput")[0].value = time;
}
function getTime(){
var time = new Date().toLocaleString();
return time;
}
</script>
<body>
<font>点击获取当前时间</font>
<button onclick="wirteTime()">click</button>
<input name = "timeInput" type="text" value="" />
</body>
</html>
自定义函数涉及函数关键字“function”，函数名，函数参数，函数体，函数返回值，函数调用这些关键点。
5、对象
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript Function</title>
</head>
<script>
var stu = {
name : "Tom",
age : 18,
address : null,
study : function(){
alert("good good study ,day day up");
}
};
/**
* 对象赋值的两种方式
*/
stu["address"] = "china";
stu.age = 20;
</script>
<body>
<p>stuName:<input type="text" name="name" value="" /></p>
<P>stuAge:<input type="text" name="age" value=""></P>
<p>stuadress:<input tyepe="text" name="address" value=""></p>
<p>study:<input type="button" onclick="stu.study()" value="click">
<!--
若将下面代码放置<body>前面则报错，因为浏览器按顺序执行Html中的JavaScript语句，
直接位于<script></script>标签下的语句直接加载执行，此时尚未加载<body>内容，
则getElementsByName()方法返回值为空。
放在此处则三个<p></p>标签内容已经加载完毕，
浏览器加载时getElementsByName()方法时可获取值。
关键点在于弄清楚执行顺序，因为JavaScript为非编译，直接执行语言。
-->
<script>
/***
* 对象获取值得两种方式
*/
document.getElementsByName("name")[0].value = stu.name;
document.getElementsByName("age")[0].value = stu["age"];
document.getElementsByName("address")[0].value = stu.address;
</script>
</body>
</html>
三、JavaScript内置对象Ⅰ
JavaScript共内置17个对向，以下是一些常用对象：
3.1、Array
Array对象提供一个数组的模型、存储大量有序的数据。
三种定义方式：
var 数组名 = [元素1，元素2，元素3，....]；
var 数组名 = new Array(数组长度)；
var 数组名 = new Array(元素1，元素2，元素3，......)；
属性：
length：数组的长度
方法：
Concat（）：表示把几个数组合并成一个数组。
Join（）：返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。
Pop（）：移除数组最后一个元素。
Shift（）：移除数组中第一个元素。
Slice（start，end）：返回数组中的一段。
Push（）：往数组中新添加一个元素，返回最新长度。
Sort（）：对数组进行排序。
Reverse（）：反转数组的排序。
toLocaleString()：返回字符串值，其中包含了连接到一起的数组的所有元素，元素由“,”分隔开来。
3.2、Date
Date对象用于处理日期和时间以及其转化
两种定义方式
var 对象名 = new Date()；
//以字符串形式创建Date对象，格式为:MM,DD,YYYY,hh:mm:ss
var 对象名 = new Date("Aug,18,2009,08:51:05");
常用方法(以 2009-8-18 08:51:05 (周二) 为例):
获取日期方法：
getDate()：获得当前日期，显示18。
getDay()：获得当前周几，显示“2”，如果是周日，则显示“0”。
getHours()：获得当前的小时，显示为“8”。
getMinutes()：获得当前的分钟，显示"51"。
getMonth()：获得当前月份，显示"7"，月份为 0 - 11。
getSeconds()：获得当前的秒，显示为"05"。
getTime()：获得当前时间，以毫秒为单位，显示"1250556665671"。相对于1970年1月1日 00:00:00到当前时间的毫秒数。在此之前的时间会以负数的形式存在。
getYear()：获得当前年份，显示"2009"。
设置日期方法：
setDtate()：设置日期，范围0-30，
setHours()：设置小时，范围0-23，
setMinutes()：设置分钟，范围0-59，
setMonth()：设置月份，范围0-11，
setTime()：设置时间，例如 setTime(1250556665671)
setYear()：设置年份
其他方法：
toString() ： Tue Aug 18 08:51:05 UTC+0800 2009
toLocaleString()：2009年8月18日 8:51:05
toLocaleDateString()：2009年8月18日
3.3、String
处理所有的字符串操作
两种定义方式：
var 对象名 = new String(字符串值)；
var 对象名 = 字符串值；
属性：
length：返回String对象的长度；
方法：
查找类方法：
charAt()：查找指定下标的字符。
indexOf()：查找匹配字符串第一次出现的位置。
lastInexOf()：从后向前搜索，匹配字符串第一次出现的位置。
操作类方法：
concat()：将多个字符串连接成一个字符串。
replace()：将匹配字符串替换成新字符串。
split()：将字符串分割，返回字符串数组。
substr()：截取字符串。
subString()：截取字符串。
slice()：提取字符串片段返回。
search()：查找与正则表达式相匹配的值。
转换类方法：
toLowerCase：返回字符串的小写形式
toUpperCase：返回字符串的大写形式
3.4、Math
Math对象用于执行数学任务；Math对象并不像Date和String那样是对象的类，因此没有构造函数Math()。
语法：
var x = Math.PI；//返回PI
var y = Math.sqrt(16)；//返回16的平方根
属性：
E：返回算数常量e，即自然对数的底数(约等于2.718)。
LN2：返回2的自然对数。
LN10：返回10的自然对数。
LOG2E：返回以2为低的e的对数。
LOG10E：返回以10为低的e的对数
PI：返回圆周率。
SQRT1_2：返回2的平方根的倒数。
SQRT2：返回2的平方根。
方法：
abs(x)：返回x的绝对值。
sin(x)：返回x的正弦值。
cos(x)：返回x的余弦值。
acos(x)：返回x的反余弦值。
asin(x)：返回x的反正弦值。
max(x,y,z...n)：返回x,y,z,...,n中的最高值。
main(x,y,z,...n)：返回x,y,z..,n中的最低值。
random()：返回0~1之间的随机数。
3.5Number
JavaScript只有一种数字类型。可以使用也可以不是使用小数点来书写数字。
所有JavaScript数字均为64位。
前缀为0，JavaScript会吧数值常量解释为八进制数。前缀为0x，则解释为16进制。
JavaScript用Infinity表示无穷大。用-Infinity表示无穷小。
初始化：
var x = 123；//数字可以私有数据进行初始化。
var y = new Number(123)；//数字对象化初始数据。
属性：
NaN：代表非数字值的特殊值。
MAX_VALUE：JavaScript中可表示的最大的数；
MIN_VALUE：JavaScript中可表示的最小的数；
方法：
isNaN()：判断是否为非数值
toFixed()：四舍五入为指定小数位数的数字。
toString()：
四、JavaScript内置对象Ⅱ
4.1、window
JavaScript结构中的顶级对象，表示浏览器窗口或一个框架。在客户端JavaScrpt中，Window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来试用。例如，可以只写document,而不必写window.document。
集合：
frames[]：返回窗口中所有命名的框架。
属性：
closed：返回窗口是否已被关闭。
defaultStatus：设置或返回窗口状态栏中的默认文字。
document：对Document对象的只读引用。
history：对History对象的只读引用。
innerheight：返回抽口的文档显示区的高度。
innerwidth：返回窗口的文档显示区的宽度。
length：设置或返回窗口中的框架数量。
location：用于窗口或框架的Location对象。
name：设置或返回窗口的名称。
Navigator：对Navigator对象的只读引用。
openner：返回对创建此窗口的窗口的引用。
outerheight：返回窗口的外部高度。
outerwidth：返回窗口的外部宽度。
pageXOffset：设置或返回当前页面相对于窗口显示区左上角的X位置。
pageYOffset：设置或返回当前页面相对于窗口显示区左上角的Y位置。
parent：返回父窗口。
Screen：对Screen对象的制度引用。
self：返回对当前窗口的引用。等价于Window属性
status：设置窗口状态栏的文本。
top：返回最顶层的先辈窗口。
window：window属性等价于self属性，它包含了对窗口自身的引用。
方法：
alert()：显示带有一段消息和一个确认按钮的警告框。
blur()：把键盘焦点从顶层窗口移开。
clearInterval()：取消由setInterval()设置的timeout。
clearTimeout()：取消由setTimeout()设置的timeout。
close()：关闭浏览器窗口。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
focus()：把键盘焦点给予一个窗口。
moveBy()：可相对窗口的当前坐标把它移动指定的像素。
moveTo()：把窗口的左上角移动到一个指定的坐标。
open()：打开一个新的浏览器窗口或查找一个已命名的窗口。
print()：打印当前窗口内容。
prompt()：显示可提示用户输入的对话框。
resizeBy()：按照指定像素调整窗口的大小。
resizeTo()：把窗口偶的大小调整到指定的宽度和高度。
scrollBy()：按照指定的像素值来滚动内容
4.2、document
代表整个Html文档，可被用来访问页面中的所有元素
属性：
body：提供对<body>元素的直接访问。
cookie：设置或返回与当前文档相关的所有cookie。
domain：返回当前文档的域名。
referrer：返回子啊如当前文档的URL。
title：返回当前文档的标题。
URL：返回当前文档的URL。
方法：
getElementById()：返回对拥有指定id的第一个对象的引用。
getElementsByName()：返回带有指定名称的对象集合。
getElementsByTagName()：返回带有指定标签名的对象集合。
getElementsByClass()：返回带有指定clss属性的对象集合。
4.3、History
包含了浏览器窗口访问过的URL
属性：
length：返回浏览器历史列表中的URL数量。
方法：
back()：加载history列表中的前一个URL。
forward()：加载history列表中的下一个URL。
go()：加载history列表中的某个具体页面。
4.4、Location
包含了当前URL的信息
属性：
host：设置或返回主机名和当前URL的端口号。
hostname：设置或返回当前URL的主机名。
href：设置或返回完整的URL。
pathname：设置或返回当前URL的路径部分。
port：设置或返回当前URL的端口号。
protocol：设置或返回当前URL的协议。
search：设置或返回从问号(?)开始的URL(查询部分)。
方法：
assign()：加载新的文档。
reload()：从新加载当前文档。
replace()：用新的文档替换当前文档。
4.5、Screen
包含客户端显示屏的信息。
方法自查
