JavaScript概述
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1.交互性（它可以做的是信息的动态交互）
2.安全性（不允许直接访问本地硬盘）
3.跨平台性（只要是可以解析Js的浏览器都可以执行，和平台无关）
JavaScript与Java的不同
1.Js是Netscape（网景）公司的产品，前身是LiveScript；Java是Sun公司的产品，现在是Oracle公司的产品。
2.Js是基于对象，Java是面向对象。
3.Js只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4.Js是弱类型，Java是强类型（每一种类型都有具体的划分）。
JavaScript与Html的结合方式
1.将JavaScript代码封装到<script>标签中；
2.将JavaScript代码封装到js文件中，并通过<script>标签中的src属性进行引用；
<script type="text/javascript" src="demo.js"> </script>
注意：如果<script>标签中使用了src属性，那么该标签中封装的javascript代码不会被执行。所以导入js文件通常都是使用单独的<script>标签。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
</head>
<body>
<!--导入js文件-->
<script type="text/javascript" src="demo.js">
</script>
<!--封装javascript代码-->
<script type="text/javascript">
alert("hello javascript");//标签中使用了src属性，那么该标签中封装的javascript代码不会被执行
</script>
</body>
</html>
JavaScript语法
通常，高级程序设计语言所包含的语法内容：
1.关键字，该种语言中被赋予了特殊含义的单词；
2.标识符，用于标识数据和表达式的符号，通常可以理解为在程序中自定义的名称，比如变量名、函数名；
3.注释，注解说明解释程序，用于调试程序；
4.变量，标识内存中的一片空间，用于存储数据，该空间中的数据时可以变化的，当数据不确定时，定义变量来操作数据；
5.运算符，可以让数据进行运算的符号；
6.语句，用于对程序的运行流程进行控制的表达式；
7.函数，用于对功能代码进行封装，以便于提高复用性；
8.数组，对多数据进行存储，便于操作就是缓冲容器；
9.对象，只要是基于对象的语言，或者面向对象语言都存在对象的概念，对象就是一个封装体，既可以封装数据，又可以封装函数；
这些都是高级程序设计语言具备的共性内容，只不过各种语言对这些内容的表现形式不同，但是使用的基本思想是一致的。
Js变量
Js中定义变量，需要使用关键字：var；
Js是弱类型的，不需要具体的类型。var关键字可以省略，因为Js是非严谨的语言。
<!--演示JavaScript语法-->
<script type="text/javascript">
//定义变量
var x=3;//js是弱类型，不需要具体的类型
x="abc";
x=3.45;
x=true;
x='c';//赋值为字符串c，Js中单引号和双引号都是字符串
alert("x="+x);//这是一个函数，将具体的参数通过对话框进行显示
</script>
Js运算符
1.算数运算符
2.赋值运算符
3.比较运算符
4.逻辑运算符
5.位运算符
6.三元运算符
<!--运算符-->
<script type="text/javascript">
//算数运算符
var a = 3710;
//alert(a / 1000 * 1000);//3710，而不是3000
var a1 = 2.3;
b1 = 4.7;
// alert("a1+b1="+(a1+b1));//7，而不是7.0
// alert("12"+1);//121
// alert("12"-1);//11
// alert(false+1);//2。在Js中false就是0或者null；true是非零或非空，默认用1表示
var n=3,m;
m=n++;//n=4,m=3
// m=++n;//n=4,m=4
// alert("n="+n+",m="+m);
//=======================================================
//赋值运算符
var i=3;
i+=2;//在Js中等同于i=i+2，其他运算符同此处
// alert("i="+i);
//=======================================================
//比较运算符，比较运算符结果是false或true
var z=3;
// alert(z==4);
//=======================================================
//逻辑运算符，连接两个boolean型的表达式
var t=4;
// alert(t>3&&t<6);//区分&和&&，在Js中&等是位运算符。此处若用&，则1&1结果为1
// alert(!t);//false
//=======================================================
//位运算符
var c=6;
// alert(c&3); //110&011=010
// alert(5^3^3);//5
// alert(c>>>1);//3
// alert(c<<2);//24
//=======================================================
//三元运算符
// 3>0?alert("yes"):alert("no");//yes
alert(3>10?100:200);//200
</script>
Js运算符-细节
<script type="text/javascript">
/*
* 细节
* 1.undefined，未定义，其实它就是一个常量
*/
var xx;
// alert(xx);//undefined
// alert(xx==undefined);//true
//要想获取具体值的类型，可以通过typeof完成
// alert(typeof("abc")=="string");//string，可通过==直接判断类型，此处为true
// alert(typeof(2.5));//number
// alert(typeof(true));//boolean
// alert(typeof(78));//number
// alert(typeof('9'));//string
</script>
Js语句
语句：
1.顺序结构
2.判断结构
代表语句：if
3.选择结构
代表语句：switch
4.循环结构
while ，do-while，for
5.其他语句
break 跳出选择，跳出循环。
continue 用于循环语句，结束本次循环，继续下一次循环。
<script type="text/javascript">
//判断结构
/* var x = 3;
// if (x == 4) {//如果改为x=4，则结果为yes。因为此处是赋值操作，此时x的值为4，判断结果为true。
if (4 == x) {//建议将常量放左边，如果写为=，会报错提示
alert("yes");
}
else {
alert("no");
}
*/
//=======================================================
//选择结构
/*
var x="abc";
switch(x){
case "kk":
alert("a");
break;
case "abc":
alert("b");
break;
default:
alert("c");
}
*/
//=======================================================
//循环结构
/*
var x=1;
document.write("<font color='red'>");//
while(x<10){
// alert("x="+x);
//将数据直接写到当前页面中
document.write("x="+x+"<br/>");
x++;
}
document.write("</font>");//一个font标签，修饰循环输出的内容
*/
/*
for(var x=0;x<3;x++){//不能用int x=0,使用var
document.write("x="+x+"<br/>");
}
*/
//=======================================================
x:for(var x=0;x<3;x++){
for(var y=0;y<4;y++){
document.write("x="+x+"<br/>");
continue x;
}
}
</script>
Js语句-练习-九九乘法表
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<link rel="stylesheet" href="tabcss.css"/>
</head>
<body>
<script type="text/javascript">
document.write("<table>");
for(var x=1;x<=9;x++){
document.write("<tr>");
for(var y=1;y<=x;y++){
document.write("<td>");
document.write(y+"*"+x+"="+y*x);
document.write("<td/>");
}
document.write("<tr/>");
}
document.write("<table/>");
</script>
</body>
</html>
/*tabcss*/
table,table td{
border:#0000ff double 1px;
}
Js数组
数组用于存储更多的数据，是一个容器。
注意：1.Js数组长度是可变的；
2.元素的类型是任意的；
建议在使用数组时，存储同一类型的元素，操作起来较为方便。
Js中的恶数组定义的两种方式：
1.var arr=[]；
var arr=[3,4,5,8];
2.使用JavaScript中的Array对象来完成定义。
var arr=new Array();//相当于var arr=[];
var arr=new Array(5);//数组定义，且长度为5
var arr=new Array(5,6,7);//定义一个数组，元素是5,6,7
Js中的函数
函数就是功能的封装体。
定义功能通常需要两个明确：
1.功能的结果；
2.功能实现中，参与运算的未知内容；
Js中定义函数的格式：
通过指定的关键字来定义。
function 函数名(参数列表){
函数体;
return 返回值;//如果没有具体返回值，return语句可以省略
}
JS函数不存在重载。建议函数中定义了几个参数，就传递几个实参。
细节：
1.只要使用了函数的名称，就是对这个函数的调用；
2.函数中有一个数组，在对传入的参数进行存储，这个数组的名字就是arguments；
3.
function getSum(){
return 100;
}
//var sum=getSum;//getSum本身是一个函数名，代表的是对象，函数本身在Js中就是一个对象，getSum就是这个函数对象的引用
//getSum这个引用的地址赋值给了sum，这时sum也指向了这个函数对象
//相当于这个函数对象有两个函数名称
//alert("sum="+sum);//打印的时候，如果sum指向的是函数对象，那么会将该函数对象的字符串表现形式打印出来，就是该函数的代码定义格式
var sum=getSum();//getSum函数运行，并将返回的结果赋值给sum
alert("sum="+sum);
动态函数：使用的是Js中内置的对象Function
var add=new Function("x,y","var sum;sum=x+y;return sum");
var sum=add(4,8);
alert("sum="+sum);//sum=12
参数列表、函数体都是用字符串动态指定的。
匿名函数：没有名字的函数，通常是函数的简写形式。
var add3=function(a,b){
return a+b;
}
alert(add(7,8))//15
练习：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
/*
* 综合练习：
* 1.定义功能，完成数组的最值获取；
* 2.对数组排序；
* 3.对数组进行查找；
* 4.对数组元素进行反转；
*/
//取最值
var arr=[66,13,37,29,89,98,12];
function getMax(arr){
var max=0;//初始化脚标
for(var x=1;x<arr.length;x++){
if(arr[x]>arr[max])
max=x;
}
return arr[max];
}
var maxValue=getMax(arr);
// document.write("maxValuee="+maxValue);
//排序
function sortArray(arr){
for(var x=0;x<arr.length;x++)
for(var y=x+1;y<arr.length;y++){
if(arr[x]>arr[y])
swap(arr,x,y);
}
}
//数组中的元素位置置换
function swap(arr,x,y){
var temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
function println(val){
document.write(val+"<br/>");
}
println("排序前："+arr);
// sortArray(arr);
println("排序前："+arr);
</script>
<script type="text/javascript">
//对数组进行查找
function searchElement(arr,key){
for(var x=0;x<arr.length;x++){
if(arr[x]==key){
return x;
}
return -1;
}
}
//折半查找，必须是有序的数组
function binarySearch(arr,key){
var max,min,mid;
min=0;
max=arr.length-1;
while(min<=max){
mid=(max+min)>>1;
if(key>arr[mid])
min=mid+1;
else if(key<arr[mid])
max=mid-1;
else
return mid;
}
}
//对数组进行反转
function reverseArray(arr){
for(var start=0,end=arr.length-1;start<end;start++,end--){
swap(arr,start,end);
}
}
reverseArray(arr);
println("反转后："+arr);
</script>
</body>
</html>
全局变量和局部变量
定义在函数体内部的变量叫做局部变量，而直接在脚本片段（<script><script/>）中定义的是全局变量。
var x=3;
function show(x){
x=8;
}
show(x);
document.write("x="+x);//3，x是全局变量，x=8是show中的局部变量，而全局变量还是x=3。
常见对象-Object
objectname.toString([radix])
Array 将 Array 的元素转换为字符串。结果字符串由逗号分隔，且连接起来。
Boolean 如果 Boolean 值是 true，则返回 “true”。否则，返回 “false”。
Date 返回日期的文字表示法。
Error 返回一个包含相关错误消息的字符串。
Function 返回如下格式的字符串，其中 functionname 是被调用 toString 方法函数的名称：
function functionname( ) { [native code] }
Number 返回数字的文字表示。
String 返回 String 对象的值。
默认 返回 “[object objectname]”，其中 objectname 是对象类型的名称。
object.valueOf( )
Array 数组的元素被转换为字符串，这些字符串由逗号分隔，连接在一起。其操作与 Array.toString 和 Array.join 方法相同。
Boolean Boolean 值。
Date 存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function 函数本身。
Number 数字值。
Object 对象本身。这是默认情况。
String 字符串值。
String基本功能
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示string对象
* 表现形式：
* var str=new String("abc");
* var arr="abc";
*/
var str="abcde";
// println(str);//abcde
// println("len="+str.length);//len=5
// alert(str.bold());//<B>abcde</B>，效果是加粗
// println(str.fontcolor("red"));//同上<font></font>，效果是字体颜色
// println(str.link("http://www.baidu.com/"));//超链接
println(str.substr(1,3));//bcd，包含头，也包含尾。从1开始，3是长度。
println(str.substring(1,3));//bc，包含头，不包含尾。1、3是首尾脚标。
</script>
string的自定义方法：
function trim(str){
//定义两个变量，一个记录开始位置，一个记录结束的位置
//对开始位置的字符进行判断，如果是空格，就进行递增，直到不是空格位置
//对结束位置的字符进行判断，如果是空格，就进行递减，直到不是空格位置
//必须要保证开始<=结束，这样才能保证截取
var start,end;
start=0;
end=str.length-1;
while(start<=end&&str.charAt(start)==" "){//charAt,返回指定索引位置处的字符。
start++;
}
while(start<=end&&str.charAt(end)==" "){//charAt,返回指定索引位置处的字符。
end--;
}
return str.substring(start,end+1);
}
var s=" ab c ";
alert("-"+trim(s)+"-");//-ab c-
prototype 属性
返回对象类型原型的引用。
/*
* 既然trim方法是用来操作字符串的方法，可不可以像字符串已有的方法一样，
* 将此方法也定义到字符的对象中？能够用字符串对象直接调用。
* 这里就可以使用一个该字符串的原型属性来完成。
* 原型：就是该对象的一个描述，该描述中如果添加了新功能，那么它的对象都会具备这些新功能。
* 用prototype就可以获取这个原型对象。
* 通过prototype就可以对对象的功能进行扩展。
*
* 需求：想要给string对象添加一个可以去除字符串两端空格的新功能。
* 就可以使用原型属性来完成。
*/
//给string的原型中添加一个功能。注意，给对象添加新功能，直接使用对象.新内容。
//String.prototype.len=199;//给string的原型对象中添加一个属性，名为len，值为199
//添加行为
String.prototype.trim = function() {
var start, end;
start = 0;
end = this.length - 1;
while (start <= end && this.charAt(start) == " ") {// charAt,返回指定索引位置处的字符。
start++;
}
while (start <= end && this.charAt(end) == " ") {// charAt,返回指定索引位置处的字符。
end--;
}
return this.substring(start, end + 1);
}
alert("-"+" abc d e ".trim()+"-");
/**
*字符串对象的新功能，将字符串进行反转
*/
String.prototype.reverse=function(){
var arr=this.toCharArray();
//将数组位置置换功能进行封装，并定义到了反转功能内部
function swap(arr,a,b){
var temp=arr[a];
arr[a]=arr[b];
arr[b]=temp;
}
for(var x=0,y=arr.length-1;x<y;x++,y--){
swap(arr,x,y);
}
return arr.join("");//join方法，将字符数组连接
}
Array 对象
提供对创建任何数据类型的数组的支持。
arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
参数arrayObj 必选项。要赋值为 Array 对象的变量名。
size 可选项。可选项数组的大小。由于数组的下标是从零开始，创建的元素的下标将从零到 size -1。
element0,...,elementN 可选项。要放到数组中的元素。这将创建具有 n + 1 个元素的长度为 n + 1 的数组。使用该语法时必须有一个以上元素。
concat 方法 (Array) 返回一个新数组，这个新数组是由两个或更多数组组合而成的。
join 方法
返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。
arrayObj.join(separator)
//push 方法 将新元素添加到一个数组中，并返回数组的新长度值。
arr3.push(arra,arrb,arrc);//arra,arrb,arrc为数组，push方法实现了二维数组
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
*演示数组
*/
var arr=["nbc","haha","cba","aaa","abcd"];
var arr2=["qq","xiaoqiang"];
println(arr);
println(arr2);
//合并数组：在arr数组上连接一个元素"mm"，再连接一个arr数组
var newArr = arr.concat("mm",arr2);//效果：将"mm"作为新数组中的元素，arr2中的元素也作为新数组的元素
//println(newArr);
println(arr.join("-"));//nbc-haha-cba-aaa-abcd
//println(myJoin(arr,"="));
//模拟join方法
function myJoin(arr,separator){
var str="";
for(var x=0;x<arr.length;x++){
if(x!=arr.length-1)
str+=arr[x]+separator;
else
str+=arr[x];
}
return str;
}
//pop 方法 移除数组中的最后一个元素，并返回元素
/*
println("<hr/>");
println(arr);//nbc,haha,cba,aaa,abcd
arr.pop();
println(arr);//nbc,haha,cba,aaa
//shift 方法 移除数组中的第一个元素，并返回该元素。
println(arr.shift());//nba
println(arr)
//slice 方法 (Array) 返回一个数组的一段。
//arrayObj.slice(start, [end])，包含头不包含尾
*/
println("<hr/>");
//sort 排序
println(arr);
//arr.sort();
println(arr);//aaa,abcd,cba,haha,nbc
//splice 方法 从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
//arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
//删除元素并进行元素的替换
//var temp= arr.splice(1,3,8080,9527,"xixixi","wangcai");
//println(temp);//删除的元素：haha,cba,aaa
//println(arr);//在删除位置，并插入新元素nbc,8080,9527,xixixi,wangcai,abcd
//println(arr.unshift("uuuu"));//将元素添加到数组的首位
println(arr);//uuuu,nbc,haha,cba,aaa,abcd
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 数组练习
* 用数组可以实现js中的堆栈或者队列数据结构
*/
var arr=[];
//arr.unshift("abc1","abc2","abc3");//添加元素,输出顺序为：abc1,abc2,abc3
arr.unshift("abc1");
arr.unshift("abc2");
arr.unshift("abc3");//输出为abc3,abc2,abc1
println(arr);
//arr.pop();//删除尾部元素，abc3,abc2
arr.shift();//删除首部元素，abc2,abc1
println(arr);
</script>
<script type="text/javascript" src="arraytool.js"></script>
<script type="text/javascript">
println("<hr/>");
/*
* 给数组对象添加新功能，并使用到原型属性
*/
var array=["nbc","haha","cba","aaa","abcd"];
var maxValue=arr.getMax();
println("maxValue:"+maxValue);
println(array);
</script>
</body>
</html>
Date 对象
启用基本存储器并取得日期和时间。
dateObj = new Date()
dateObj = new Date(dateVal)
dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])
month 必选项。表示的月份，是从 0 到 11 之间的整数（ 1 月至 12 月）。
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示js中的日期，Date
*/
var date=new Date();
//println(date);
//println(date.toLocaleString());//日期和时间
//println(date.toLocaleDateString());//只有日期
var year=date.getFullYear();//getYear方法已过时
var month=date.getMonth()+1;//注意month的取值为0-11
var day=date.getDate();
var week=getWeek(date.getDay());
println(year+"年"+month+"月"+day+"日 "+week);
function getWeek(num){
var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return weeks[num];
}
println("<hr/>")
//日期对象和毫秒值之间的转换
var date2=new Date();
//获取毫秒值，日期对象对象——>毫秒值
var time=date2.getTime();
println("time:"+time);
//将毫秒值转成日期对象
//1.new Date(time);
//2.setTime()
var date3=new Date(time);
//println(date3);
//3.将日期对象和字符串之间进行转换，使用parse
//日期对象转成字符串 date.toLocaleDateString()、date.toLocaleString()
//将字符串转成日期对象。将具备指定格式的日期字符串——>毫秒值——>日期对象
var str_date="9/28/2017";
var time2=Date.parse(str_date);
var date4=new Date(time2);
println(date4);//Thu Sep 28 00:00:00 UTC+0800 2017
println(date4.toLocaleDateString());
</script>
JS特有语句
为了简化对象调用的书写，可以使用JS中的特有语句with来完成。
格式：
with(对象)
{
在该区域中可以直接使用指定的对象的内容，不需要写对象。
}
<script type="text/javascript">
println("<hr/>");
var date=new Date();
function getWeek(num){
var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return weeks[num];
}
with (date) {
var year = getFullYear();//getYear方法已过时
var month = getMonth() + 1;//注意month的取值为0-11
var day = getDate();
var week = getWeek(date.getDay());
println(year+"年"+month+"月"+day+"日 "+week);
}
</script>
Math对象
是一个固有对象，提供基本数学函数和常数。
Math.[{property | method}]
参数
property 必选项。Math 对象的一个属性名。
method 必选项。Math.对象的一个方法名。
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示Math对象，该对象中的方法都是静态的，不需要new，直接可以Math调用
*/
var num1=Math.ceil(12.34);//13,返回大于等于参数的最小整数
var num2=Math.floor(12.34);//12,返回小于等于参数的最大整数
var num3=Math.round(12.34);//12,四舍五入
println("num1="+num1);
println("num2="+num2);
println("num3="+num3);
var num4=Math.pow(10,2);//10^2
println("num4="+num4);
println("<hr/>")
for(var x=0;x<10;x++){
//var num=Math.floor(Math.random()*10+1);//伪随机数，取整
//parseInt，全局方法
var num=parseInt(Math.random()*10+1);//伪随机数，取整
println(num);
}
</script>
全局方法
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示global的全局方法
*/
println(parseInt("123")+1);//124
var val=parseInt("abc");
println("value="+val);//value=NaN，非法。可以通过isNaN来判断结果是否非法
var val=parseInt("12abc");
println("value="+val);//12，将abc舍弃
var num=parseInt("110",2);//将制定禁止的字符串转换成十进制，110——>6
println("num="+num);
var num1=parseInt("0x3c",16);
println("num1="+num1);//num1=60
//十进制——>其他进制，使用数字对象完成
var num3=new Number(6);
println("num3="+num3.toString(2));//num3=110,使用Number对象，十进制——>二进制
var num4=60;//JS是基于对象的语言，num4在底层是对象
println("num4="+num4.toString(16));//num4=3c
</script>
JS特有的语句-for in
格式：
for(变量 in 对象)//对对象进行遍历的语句
{
}
var arr=[32,80,65];
for(i in arr){
println(arr[i]);//遍历数组
}