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结合的方式：
a):JS代码存放在标签<script>JS code</script>中。
b):当有多个html页面使用到相同的JS脚本时，可以将JS代码封装到一个文件中，只要在script标签
的src属性引入一个JS文件。（方便后期维护，扩展）
注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。
例：<script src="test.js" type="text/javascript"></script>
规范中script标签早期有一个属性language，而现在使用type属性。
通常高级程序设计语言所包含的语法内容：
1.关键字：这种语言中被赋予了特殊含义的单词
2.标识符：用于标识数据表达式的符号，通常可以理解为在程序中自定义的名称，比如变量名，函数名。
3.注释：注解说明解释程序，或者用于调试程序。
4.变量：用于标识内存中的一片空间，用于存储数据，该空间中的数据是可以变化的。
什么时候使用变量？当数据不确定的时候。
5.运算符：可以让数据进行运算的符号。
6.语句：用于对程序的运行流程进行控制的表达式。
7.函数：用于对功能代码进行封装，便于提高复用性。
8.数组：对多数据进行存储，便于操作。其实就是个容器。
9.对象：只要是基于对象或者面向对象的语言，就存在着对象的概念。
对象就是一个封装体，既可以封装数据又可以封装函数。
这些都是高级程序设计语言具备的共性内容，只不过各种语言对这些内容的表现形式不同。
但是使用思想基本一致。
<script type="text/javascript">
/*
JS中定义变量，要使用到关键字var。而且要注意是弱类型的。
*/
var x=4; //var和后面的分号不写也行，JS是不严谨的，但最好写上。
x="abc"; //JS是弱类型的，所以上面是int，这里直接就可以变成字符串类型。
// alert("x="+x); //这是一个函数，将具体的参数通过对话框进行显示。
</script>
<script type="text/javascript">
/*运算符：
*1.算术运算符： + - * / % ++ --
*2.赋值运算符： = += -= *= /= %=
*3.比较运算符： < > <= >= != ==
*4.逻辑运算符： ! && ||(用来连接两个boolear表达式)
*5.位运算符： & | ^ >> << >>>
*6.三元运算符：? :
*/
// 算术运算符演示：
var a=3710;
// alert("a="+a/1000*1000); //结果是a=3710，而不是3000.因为是弱类型的。
// alert("12"-1); //结果为11
// alert("12"+1); //结果为121
// alert(true+1); //结果为2 因为JS中false就是0或者null，非0非null就是true就是1
// 位运算符
var c=6;
// alert(c&3); //结果为2 6是110 3是011 结果是010就是2
// alert(c>>>1); //结果为3 110右移一位变成了011
// alert(c<<2); //结果24
// 三元运算符
3>0?alert("yes"):alert("no");
/*一些细节：
*undefind：未定义,其实就是一个常量。
*想要获取某个值得类型，可以通过typeof来完成。
*/
alert(typeof("abc")); //string
</script>
<script type="text/javascript">
/*语句：
*1.顺序结构。
*2.判断结构。 if
*3.选择结构。 switch
*4.循环结构。 while for
*5.其他语句。 break（跳出选择或者循环结构）
* continue（用于循环语句，结束本次循环，继续下次循环）
*/
// 判断结构
var x=3；
if（x==4）{
alert("yes");
}else{
alert("no");
}
// 选择结构
var x="abc";
switch(x){
case"kk":
alert("a");
break;
case"abc":
alert("b");
break;
case"ufo":
alert("c");
break;
default: //这个无论放哪都是最后才执行的，判断其他都不满足才执行这个。
alert("0.0");
break;
}
// 循环结构
var x=1;
while(x<5){
// alert("x="+x); //这样运行的话要弹四次窗口，比较麻烦。
document.write("<font color='red'>x="+x+"<br/>"); //将数据直接写到当前页面中。
x++;
}
for(x=0;x<3;x++){ //注意这里for的初始条件不能写int，要么就报错了。
document.write("x=+x");
}
</script>
练习：在页面中显示一个99乘法表
<html>
<head>
<title>这是一个网页的标题。</title>
<style type="text/css">
table,table td{
border:#0000ff double 1px;
width:800px;
}
</style>
</head>
<body>
这是我的<br /><hr />
<font color='red' size='5'>网页内容<br /><hr /></font>
<script type="text/javascript">
document.write("<table>");
for(var x=1;x<=9;x++){ //x代表行，y代表列
document.write("<tr>");
for(var y=1;y<=x;y++){
document.write("<td>"+"<font color='blue' size='5'>"+y+"*"+x+"="+x*y+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
JavaScript中的数组：
数组是一个容器，是用来存储更多数据的。
1.定义方式a：var arr=[1,2,3,4]; 注意：数组的数据类型是object，对象类型。
定义方式b：var arr=new Array(5); //定义长度为5的数组。
2.遍历数组：
var arr=[1,2,3,4];
for(var x=0;x<arr.length;x++){
document.write("arr["+x+"]="+arr[x]+"<br/>");
}
3.数组长度是可变的，元素类型是任意的，但最好存同一类型，操作方便。
JavaScript中的函数：
函数是一个功能的封装体。定义函数通常需要明确功能的结果和功能实现中的参与运算的未知内容。
通过关键字function来定义函数。
function 函数名(参数列表){
函数体；
return 返回值； //如果没有具体的返回值，return语句可以省略不写。
}
一些细节：
1.只有使用函数的名称对函数进行调用时，函数才会运行。
2.函数中有一个数组会把传入的参数进行存储，这个数组就是arguments。
3.function getSum(){
return 100;
}
// var sum=getSum(); //getSum函数正常运行。并将返回值赋给sum
// var sum1=getSum; //getSum本身是一个函数名，js是基于对象，函数本身就是一个对象，getSum就是对这个函数的引用。
//所以就会将getSum这个引用的地址值赋给sum1，这时sum1也就指向了这个对象。相当于这个函数对象有两个名称。
// alert(sum1); //打印时sum1指向函数对象，那么就会将这个函数的代码原封不动打印出来。就是该函数的代码定义格式。
JavaScript中函数的其他表现形式：
动态函数：使用的是JS中内置的一个对象Function。用的不是很多。
参数列表和函数体都是通过字符串动态指定的。
var add=new Function("x,y","var sum;sum=x+y;return sum;");
var haha=add(4,8);
alert("haha="+haha); //输出为12
匿名函数：没有名字的函数。通常是函数的简写形式。这个还用的挺多的。
var add1=function(a,b){
return a+b;
}
alert (add1(7,8)); //输出为15
综合练习：1.定义功能，完成对数组的最值获取。
2.对数组进行从小到大排序。
3.对数组进行查找。
4.对数组元素进行反转。
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<body>
<script type="text/javascript">
var arr=[66,13,37,21,89,17];
function getMax(arr){
var max=0; //注意：这个0代表角标
for(var x=1;x<arr.length;x++){
if(arr[max]<arr[x])
max=x;
}
return arr[max];
}
var maxValue=getMax(arr);
alert("maxValue:"+maxValue);
function mySort(arr){
for(var x=0;x<arr.length-1;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;
}
document.write("排序前："+arr+"<br/>");
mySort(arr);
document.write("排序后："+arr+"<br/>");
function search(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; //右移一位，相当于除以2.
if(key>arr[mid])
min=mid+1;
else if(key<arr[mid])
max=mid-1;
else
return mid;
}
return -1;
}
document.write("所查元素角标为："+binarySearch(arr,66));
function reverse(arr){
for(var start=0,end=arr.length-1;start<end;start++,end--){
swap(arr,start,end);
}
}
reverse(arr);
document.write("反转后："+arr);
</script>
</body>
</html>
在JavaScript中，脚本片段里定义的变量是全局变量。
即该变量的作用范围是在整个标签内，这与java不同。
而当变量定义在函数function中就是局部变量，作用范围就只在这个函数中。
JavaScript中的对象
1.Object对象
包含的方法：toString():将对象变成字符串。如果对象是函数的话，就返回函数的源代码。
valueOf():返回指定对象的原始值。
2.String对象
定义方法：var str="abc";
var str=new String("abc");
属性：constructor length prototype
常用方法：str.bold 加粗
str.fontcolor 字体颜色
str.link 将字符串变成超链接
str.substr(1,3) 从字符串角标为1处截取长度为3的子字符串，如abcde就变成bcd
str.substring(1,3) 从字符串角标为1处截取到角标为3处，如abcde就变成bc
自定义一个方法，用来去除字符串两端的空格。
function trim(str){
//定义两个变量，一个记录开始的位置，一个记录结束的位置
//对于开始的位置的字符进行判断，如果是空格，就递增，直到不是空格为止。
//对于结束的位置的字符进行判断，如果是空格，就递减，直到不是空格为止。
//必须要保证开始<=结束才可以进行截取。
var start,end;
start=0;
end=str.lenth-1;
while(start<=end&&str.charAt(start)==' '){
start++;
}
while(start<=end&&str.charAt(end)==' '){
end--;
}
return str.substring(start,end+1);
}
这个自定义的trim方法使用时，必须得调用这个方法，能否像string对象的方法那样，直接把它定义在字符串对象中呢？
这就和string对象的原型prototype属性有关了。原型：就是该对象的描述，该描述中如果添加了新功能，那么该对象就具备了新功能。
而prototype就可以获取到这个原型对象，通过prototype就可以对对象的功能进行扩展。
需求：给string对象添加一个可以去除字符串两端空格的新功能。（用prototype属性完成）
String.prototype.trim=function(str){
var start,end;
start=0;
end=str.lenth-1;
while(start<=end&&str.charAt(start)==' '){
start++;
}
while(start<=end&&str.charAt(end)==' '){
end--;
}
return str.substring(start,end+1);
}
练习：
<html>
<head>
<title>我的网页</title>
</head>
<body>
<script type="text/javascript">
/*
*练习1：给字符串添加一个功能，将字符串变成字符串数组。
*练习2：给字符串添加一个功能，将字符串反转。
*/
var str="abcde";
String.prototype.toCharArray=function(){
var chs=[];
for(var x=0;x<this.length;x++){
chs[x]=this.charAt(x);
}
return chs;
}
String.prototype.reverse=function(){
var arr=this.toCharArray();
for(var x=0,y=arr.length-1;x<y;x++,y--){
var temp=arr[x];
arr [x]=arr [y];
arr [y]=temp;
}
return arr.join("");
}
//这下就完成了为string对象添加功能的操作，直接可以使用了。
document.write(str.toCharArray());
alert (str.reverse());
</script>
</body>
</html>
3.Array对象
演示：
<html>
<head>
<title>我的网页</title>
</head>
<body>
<script type="text/javascript">
var arr=["abc","cba","haha","nba","www"];
var arr2=["qq","xixi",110];
document.write("<font color='yellow' size='5'>"+arr+"<br/>");
document.write("<font color='green' size='8'>"+arr2+"<br/>");
document.write("<font color='red' size='5'>"+arr.concat("mm",arr2)+"<br/>");
//在arr数组后连接字符串“mm”，再连接arr2
document.write(arr.join("-")+"<br/>");
//返回该数组，并添加一个分隔符，如果不写默认是逗号
document.write(arr.pop()+" 新数组："+arr+"<br/>");
//移除数组中的最后一个元素，并返回该元素
document.write(arr.reverse()+"<br/>");
//反转数组
document.write(arr.shift()+" 新数组："+arr+"<br/>");
//移除数组中的第一个元素，并返回该元素
document.write(arr.slice(0,-1)+" 新数组："+arr+"<br/>");
//返回数组中的一段，包含头不包含尾。若有负数，将该值按数组长度+该数处理。若省略end，返回所有。
document.write(arr.sort()+"<br/>");
//返回一个元素已经进行排序了的数组对象
document.write(arr.splice(2,2,8090,"删了两个")+" 新数组："+arr+"<br/>");
//从一个数组中移除一个或多个元素，并返回该移除的元素，如果有必要，在所移除元素的位置上加上新元素。
document.write(arr.unshift("666")+"<br/>");
//将指定元素插入数组开始位置并返回该数组。
</script>
</body>
</html>
如何给数组对象添加自定义的新功能呢？
这也要用到原型属性。
Array.prototype.getMax=function(){
var temp=0;
for(var x=1;x<this.length;x++){
if(this[x]>this[temp]){
temp=x;
}
}
return this[temp];
}
这样就可以直接用Array的getMax方法了。
4.Date对象
<html>
<head>
<title>我的网页</title>
</head>
<body>
<script type="text/javascript">
var date=new Date();
var year=date.getFullYear(); //和getYear一样的。
var month=date.getMonth()+1; //注意：月份是用0-11来表示的，所以要+1
var day=date.getDate();
var week=getWeek(date.getDay());
document.write("<font color='green' size='5'>"+year+"-"+month+"-"+day+"-"+week+"<br/>");
function getWeek(num){
var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return weeks[num];
}
document.write("<font color='purple' size='5'>"+date+"<br/>"); //当前时间
document.write(date.toLocaleString()+"<br/>"); //当前地区日期和时间
document.write(date.toLocaleDateString()+"<br/>"); //只有日期
//日期对象和毫秒值之间的转换
var date2=new Date();
var time=date2.getTime(); //将日期对象转成毫秒值
document.write("time:"+time+"<br/>");
var date3=new Date(time); //将毫秒值转成日期对象
document.write(date3+"<br/>");
//日期对象和字符串之间的转换
var str_date="8/1/2017";
var time2=date.parse(str_date);
var date4=new date(time2); //这个是将字符串转成日期对象。先转成毫秒值，再转成日期对象。
document.write(date4.toLocaleDateString()+"<br/>"); //日期对象转字符串直接转就行。
</script>
</body>
</html>
为了简化对象调用内容的书写，可以使用JS中的特有语句来完成。
格式：
with(对象){
在该区域中可以直接使用指定对象的内容，而不需要在方法前写“对象.”
}
没啥技术含量，了解就行。
5.Math对象（该对象中的方法都是静态的，不需要new，直接调用即可。）
<html>
<head>
<title>我的网页</title>
</head>
<body>
<script type="text/javascript">
var num1=Math.ceil(12.34); //返回大于等于指定参数的最小整数
var num2=Math.floor(12.34); //返回小于等于指定数据的最大整数
var num3=Math.round(12.34); //四舍五入
document.write("num1="+num1+"<br/>"); //13
document.write("num2="+num2+"<br/>"); //12
document.write("num3="+num3+"<br/>"); //12
var num4=Math.pow(10,2); //返回10的2次方
document.write("num4="+num4+"<br/>"); //100
document.write("<hr/>");
for(var x=0;x<10;x++){
var num=Math.ceil(Math.random()*10);
document.write(num+"<br/>"); //产生1-10的随机数
}
</script>
</body>
</html>
6.global对象（全局对象）
<html>
<head>
<title>我的网页</title>
</head>
<body>
<script type="text/javascript">
document.write("123"+1+"<br/>"); //结果为1231
document.write(parseInt("123")+1+"<br/>"); //结果为124。 这个方法就是把字符串转为整数的。
var x=parseInt("abc");
document.write(isNaN(x)+"<br/>"); //结果为true。 这个就是用来判断是否非法的，这个是非法的，所以为true。
//parseInt还可以将指定格式的字符串转成十进制。
var a=parseInt("110",2);
document.write(a+"<br/>"); //结果为6
//将十进制转成其他进制，要使用Number对象来完成。
var b=new Number(6); //这个一般就直接写成var b=6；因为JS是基于对象的，无论咋写，底层都是对象。
document.write("b="+b.toString(2)+"<br/>"); //结果为110
</script>
</body>
</html>
JS中的特有语句：for in
格式：
for(变量 in 对象){ //对对象进行遍历的语句
}
举例：
var arr=[32,80,65];
for(i in arr){
document.write("i="+arr[i]); //结果就对这个数组进行了遍历。
}
7.JS中的自定义对象
<html>
<head>
<title>我的网页</title>
</head>
<body>
<script type="text/javascript">
/*
*如果想要自定义对象，就要先对对象进行描述。
*JS是基于对象的，不是面向对象的，不具备描述事物的能力，但我们还想按照面向对象的思想编写JS。
*在JS中，可以用函数来模拟面向对象的描述。
*/
//用JS描述对象
function Person(){ //相当于构造器。
alert("person run");
}
var p=new Person(); //通过描述进行对象的建立，new。
p.age=29; //动态给P对象添加属性。直接使用p.属性名即可。
p.name="zhangsan";
p.show=function(){ //如果定义的P对象属性值为一个函数，就是给P对象添加一个方法。
alert("show run："+this.name+"-"+this.age);
}
p.show();
//对象调用成员有两种方式：
//（1）对象.属性名
//（2）对象["属性名"]
</script>
</body>
</html>
