JavaScript基础
引入方式
向HTML页面插入JavaScript的主要方法，就是使用
js和HTML相结合的方式：
1.将javas代码封装到关闭，而不能这样关闭。否则没有任何错误信息，但是没有运行结果。
变量
js中定义变量，使用到关键字var。变量是弱类型的。
<script type="text/javascript">
var x=3;//var不写也行，因为js是非严谨的语言，但是建议用严谨的方式
x="abc";//重新赋值为字符串abc
x=3.45;//重新赋值为小数
x=true;//重新赋值为boolean类型
x='c';//赋值为字符串c
//alert("x="+x);//这是一个函数，将具体参数通过对话框进行显示
script>数据类型
typeof运算符
JavaScript中有四种基本数据类型：Undefined, Boolean,Number和String
关键字typeof可以获取一个变量的类型。
如果一个变量没有初始化值的时候，其类型为undefined类型。表示没有定义。
<script type="text/javascript" >
/*
1.undefined:未定义 其实它就是一个常量
* */
var s;//s没有赋值
alert(s);//undefined
alert(s==undefined);//true
//要想获取具体的值的类型 可以通过typeof来完成
alert(typeof("avd"));//string
alert(typeof(2.3));//number
alert(typeof(true));//boolean
alert(typeof(34));//number
alert(typeof('6')=='string');//true
script>运算符
算术运算符
1.加法运算符
某个运算数是 NaN，那么结果为 NaN。
如果两个运算数都是字符串，把第二个字符串连接到第一个上。
如果只有一个运算数是字符串，把另一个运算数转换成字符串，结果是两个字符串连接成的字符串。
2.比较运算符
无论何时比较一个数字和一个字符串，ECMAScript 都会把字符串转换成数字，然后按照数字顺序比较它们。
3.逻辑运算符
逻辑 AND 运算是简便运算，即如果第一个运算数决定了结果，就不再计算第二个运算数。
逻辑 OR 运算也是简便运算。对于逻辑 OR 运算符来说，如果第一个运算数值为 true，就不再计算第二个运算数。
4.赋值运算符
复合赋值运算是由乘性运算符、加性运算符或位移运算符加等号（=）实现的。
5.位运算符
6.三元运算符
<script type="text/javascript" >
/*
运算符
1.算术运算符
+ - * / % ++ --
2.赋值运算符
= += -= *= /= %=
3.比较运算符 运算完的结果Boolean类型
> < >= <= != ==
4.逻辑运算符 连接两个布尔型的表达式
&& || !
5.位运算符
& | ^ >> << >>> ~
6.三元运算符
? :
* */
//算术运算符演示
var a=2644;
//alert("a="+a/1000*1000);//a=2644 弱类型 要是是java应该是2000
var a1=2.3,b1=4.7;
alert("a1+b1="+(a1+b1));//"a1+b1=7"
alert("12"+1);//121
alert("12"-1);//11
alert(true+1);//2 因为在js中false就是0或者null，非0非null就是true。默认用1表示。
alert(2%5);//2
var n=3,m;
m=n++;
alert("n="+n+",m="+m);
//2.赋值运算符
var i=3;
i+=2;
alert("i="+i);
//3.比较运算符
var z=3;
alert(z==4);
//4.逻辑运算符
var t=4;
alert(t>3&&t<6);
alert(!true);
//5. 位运算符
var c=6;
alert(c&3);//2
alert(5^3^3);//5
alert(c>>>1);//6/2(1)=3
alert(c<<2);//6*2(2)=24
//6.三元运算符
3>0?alert("yes"):alert("no");
alert(3>10?100:200);
script>
流程控制语句
判断语句
if 语句的语法：
if (condition) statement1 else statement2
注意：
判断的条件会发生自动类型转换：
number：如果非0为true，0为false
string：如果非null或非空为true，否则为false
undefined：false
NaN: false
对象类型：非null为true，否则为false。
var x=3;
//if(x=4){//注意
if(4==x){//建议将常量放在左边，以报错来修正代码
alert("yes");
}else{
alert("no");
}
if(x>1)
alert("a");
else if(x>2)
alert("b");
else if(x>3)
alert("c");选择语句
var y="abc";
switch(y){
default:
alert("c");
break;
case "kk":
alert("a");
break;
case "abc":
alert("b");
break;关键字 break 会使代码跳出 switch 语句。如果没有关键字 break，代码执行就会继续进入下一个 case。
关键字 default 说明了表达式的结果不等于任何一种情况时的操作（事实上，它相对于 else 从句）。
JavaScript的switch语句与java不同之处：
1、基本数据类型都可以传递给switch case语句。
2、case语句可以是表达式。
循环语句
//循环结构
var t=1;
document.write("){
start++;
}
while(start<=end&&str.charAt(end)==' '){
end--;
}
return str.substring(start,end+1);
}
var s=" ab c ";
alert("="+trim(s)+"=");
script>
body>
html>
其中，out.js文件代码如下：
/**
* 打印指定参数数据到页面上并换行
* */
function println(param){
document.write(param+"
");
}
/**
* 打印指定参数数据到页面上
* */
function print(param){
document.write(param);
}原型prototype
在上面小节的代码中，trim方法是用于操作字符串的方法，可不可以像字符串已有的方法一样，将该方法也定义到字符串对象中呢？之后直接用字符串对象调用就可以。 这里就可以使用一个该字符串的原型属性来完成。
原型：就是该对象的一个描述。该描述中如果添加了新功能，那么该对象都会具备这些新功能，而prototype就可以获取到这个原型对象， 通过prototype就可以对对象的功能进行扩展。
“prototype”字面翻译是“原型”，是javascript实现继承的主要手段。粗略来说就是：prototype是javascript中的函数(function)的一个保留属性，并且它的值是一个对象（我们可以称这个对象为"prototype对象"）。
需求：给string对象添加一个可以去除字符串两端空格的新功能。
可以定义一个String的工具类stringtool.js，这个文件中包含自定义的string类的扩展新功能，在HTML导入这个js文件就可以直接使用这个功能了：
/**
*
*/
/*
* 字符串对象的新功能：去除字符串两端的新功能
* */
String.prototype.trim=function(){
var start,end;
start=0;
end=this.length-1;
while(start<=end&&this.charAt(start)==' '){
start++;
}
while(start<=end&&this.charAt(end)==' '){
end--;
}
return this.substring(start,end+1);
};
/**
* 字符串新功能：将字符串转成字符数组
* */
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();
//将数组位置置换功能进行封装，并定义到了反转功能内部 闭包
function swap(arr,a,b){
var temp=arr[a];
arr[a]=arr[b];
arr[b]=temp;
}//函数里封装函数
for(var x=0,y=arr.length-1;xreturn arr.join("");
};
function swap(arr,a,b){
var temp=arr[a];
arr[a]=arr[b];
arr[b]=temp;
}
调用定义好的新功能：
<body>
<script src="stringtool.js" type="text/javascript" charset="utf-8">script>
<script src="out.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript" charset="utf-8">
var str="abcde";
println(str.toCharArray());
println(str.reverse());
script>
body>
数组类Array
常见方法：
sort()
对当前数组进行排序，并返回已经进行了排序的此Array对象。
不会创建新对象，是在指定数组中直接进行排序。
reverse()
对当前数组进行反转排序，返回一个元素顺序被反转的 Array 对象。
不会创建新对象，是在指定数组中直接进行排序。
push( [item1 [item2 [. . . [itemN ]]]] )
将以新元素出现的顺序添加这些元素。
如果参数之一为数组，那么该数组将作为单个元素添加到数组中。
pop()
移除数组中的最后一个元素并返回该元素。
如果该数组为空，那么将返回 undefined。
shift()
移除数组中的第一个元素并返回该元素。
如果该数组为空，那么将返回 undefined。
unshift([item1[, item2 [, . . . [, itemN]]]])
将指定的元素插入数组开始位置并返回该数组。
splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
移除从 start 位置开始的指定个数的元素，并插入新元素，从而修改 concat([item1[, item2[, . . . [, itemN]]]])
返回一个新数组，这个新数组是由两个或更多数组组合而成的。原数组不变。
要加的项目（item1 … itemN）会按照从左到右的顺序添加到数组。
如果某一项为数组，那么添加其内容到 array1 的末尾。
如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。
slice(start, [end])
返回一个包含了指定的部分元素的数组。
将返回索引大于等于start且小于end的一段。
原数组不变。
join(separator)
把所有元素由指定的分隔符分隔开来组成一个字符串，返回这个字符串值。
如果数组中有元素没有定义或者为 null，将其作为空字符串处理。
<html>
<head>
<title>js_array.htmltitle>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
head>
<body>
<script src="out.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript" charset="utf-8">
/*
演示数组
* */
var arr=["cd","dvd","miaomi","puppy","kitty"];
var arr2=["weixin","weibo","qq","blog"];
println(arr);
println(arr2);
//concat方法
//在arr数组上连接一个元素"mm"，再 连接一个arr2数组
var newArr=arr.concat("mm",arr2);//将"mm"作为新数组的元素，将arr2中的元素也作为新数组的元素
println(newArr);
//join方法 返回字符串值，其中包含了连接到一起数组的所有元素，元素由指定的分隔符分隔开来
println(newArr.join());
println(newArr.join("-"));
println(myJoin(newArr,"+"));
//模拟join的原理
function myJoin(arr,separator){
var str="";
for(var x=0;xif (x!=arr.length-1)
str+=arr[x]+separator;
else
str+=arr[x];
}
return str;
}
println("
");
// //pop方法：移除数组中的最后一个元素并返回该元素
// println(arr.pop());//删除最后一个元素并返回
// println(arr);
//
// println("
");
// //将新元素添加到一个数组中，并返回数组的新长度值
// //arr3.push(arra,arrb,arrc);//等价于var arr3=[arra,arrb,arrc]; 里面有三个元素 每个元素都是数组 实现了二维数组
//
// println("
");
// //反转
// println(arr.reverse());
//
// println("
");
// println(arr.shift());//删除并返回第一个元素
// println(arr);
//
// //slice方法返回一个数组的一段
//
// //sort方法：返回一个元素已经进行了排序的Array对象
// println(arr);
// arr.sort();
// println(arr);
// //splice方法：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素
// println(arr);
// var temp=arr.splice(1,3,8080,9527,"game","gamble");//删除下标从1开始的3个元素，并返回删除的元素
// println(temp);
// println(arr);
//unshift方法：将指定元素插入数组开始位置并返回该数组
println(arr);
arr.unshift("emmmm");
println(arr);
script>
body>
html>
数组练习
1.用数组实现js中的堆栈或者队列数据结构
2.给数组对象添加新功能
<html>
<head>
<title>js_arraytest.htmltitle>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
head>
<body>
<script src="out.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript" charset="utf-8">
/*
数组练习
用数组实现js中的堆栈或者队列数据结构
* */
var arr=[];
// arr.unshift("abc1","abc2","abc3");
arr.unshift("abc1");
arr.unshift("abc2");
arr.unshift("abc3");
println(arr);
//
//队列
println(arr.pop());
println(arr.pop());
println(arr.pop());
// //堆栈
// println(arr.shift());
// println(arr.shift());
// println(arr.shift());
script>
<script src="arraytool.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript" charset="utf-8">
/*
给数组对象添加新功能，使用到原型属性
* */
var array=["ruoxi","longkui","yuer","xinyue","miaotong"];
var maxValue=array.getMax();
println("maxValue:"+maxValue);
println(array);
script>
body>
html>
arraytool.js：
/**
* 数组获取最大值的方法
*/
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];
};
/**
* 数组的字符串表现形式
* 定义toString方法，相当一java中的复写
*/
Array.prototype.toString=function(){
return "["+this.join(", ")+"]";
};Date类
<body>
<script src="out.js" type="text/javascript" charset="gb2312">script>
<script type="text/javascript" charset="utf-8">
/*
演示js中的日期 Date
* */
var date=new Date();
println(date);//Tue Dec 12 18:33:07 UTC+0800 2017
println(date.toLocaleString());//日期和时间
println(date.toLocaleDateString());//只有日期
/*
为了简化对象调用内容的书写
可以使用js中的特有语句with来完成
格式
with(对象){
在该区域中可以直接使用指定的对象的内容。不需要写 对象.
}
* */
//
// var year=date.getFullYear();
// var month=date.getMonth()+1;
// var day=date.getDate();
// var week=getWeek(date.getDay());
with(date){
var year=getFullYear();
var month=getMonth()+1;
var day=getDate();
var week=getWeek(getDay());
}
println(year+" 年 "+month+" 月 "+day+" 日 "+week);
function getWeek(num){
var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return weeks[num];
}
//日期对象和毫秒值之间的转换
var date2=new Date();
//获取毫秒值 日期对象-->毫秒值
var time=date2.getTime();
println("time:"+time);//time:1513082587526
//毫秒值转成日期对象
//1.new Date(time);//2. setTime();
var date3=new Date(time);
//将日期对象和字符串之间进行转换
//日期对象转成字符串 toLocaleString toLocalDateString
//将字符串转成日期对象。具备指定格式的日期字符串--->毫秒值--->日期对象
var str_date="12/12/2017";
var time2=Date.parse(str_date);
var date3=new Date(time2);
println(date3);
script>
body>Math类
<body>
<script src="out.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript" charset="utf-8">
/*
演示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);
println(num2);
println(num3);
var num4=Math.pow(10,3);
println("num4="+num4);//num4=1000
println("
");
for(var x=0;x<10;x++){
// var num=Math.floor((Math.random()*10+1));
var num=parseInt((Math.random()*10+1));//全局方法 Global对象里的方法
println(num);
}
script>Number类
JavaScript提供了两种把非数字的原始值转换成数字的方法，即 parseInt() 和 parseFloat()。只有对 String 类型调用这些方法，它们才能正确运行；对其他类型返回的都是 NaN。
在判断字符串是否是数字值前，parseInt() 和 parseFloat() 都会仔细分析该字符串。
parseInt() 方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符之前的字符串转换成数字。
判断是否是一个有效的数值：
isNaN( 表达式 )，返回的结果是否为NaN（非数值）
可以使用parseInt函数将指定进制格式的字符串转成十进制。
使用Number对象来实现将十进制转成其他进制。
<html>
<head>
<title>js_global.htmltitle>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
head>
<body>
<script src="out.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript" charset="utf-8">
/*
演示global的全局方法
* */
println(parseInt("123")+1);//124
var val=parseInt("abc");
println("value="+val);//value=NaN
println("boolean:"+isNaN(val));//通过isNaN来判断结果是否非法
var v=parseInt("1234abbc");
println("v="+v);//v=1234
//将指定进制格式的字符串转成十进制
var num=parseInt("110",2);
println("num="+num);
var num1=parseInt("0x3c",16);
println("num1="+num1);
//将十进制转成其他进制 使用数字对象Number来完成
var num3=new Number(6);
println("num3="+num3.toString(2));
var num4=60;
println("num4="+num4.toString(16));
//基于对象：无论写什么，包括一个变量、函数，在底层都是对象，内存里面全部都是对象
script>
body>
html>
自定义对象
如果想要自定义对象，应该先对对象进行描述。 js是基于对象，不对面向对象的，不具备描述事物的能力，要按照面向对象的思想编写js， 就要先描述。在js中，可以用函数来模拟面向对象的描述。
1.使用构造函数模式方式创建对象：
先自定义类，其实就是定义一个和类名相同的函数。
再使用new关键字调用定义好的类。
（任何函数，只要通过new操作符来调用，那它就可以作为构造函数）
说明：
要将属性与方法赋给this，这样才是表示是对象的属性，如果写var str则是方法中的局部变量。
不要写new Object()。
不要写return语句。
JS在new Person()会做如下事：
1，创建一个新对象。
2，this指向新对象。
3，执行构造方法中的代码。
4，返回新对象。
//用js来描述人
function Person(){//相当于构造器
// alert("person run");
}
//通过描述进行对象的建立 new
var p=new Person();
//动态给p对象添加属性。直接使用p.属性名即可
p.name="miaowu";
p.age=9;
//如果定义的p对象的属性赋值给一个函数，即是给p对象添加一个方法
p.show = function(){
alert("show:"+this.name+"--"+this.age);
};
p.show();
var obj=new Object();
obj.name="god ";
obj.age=2017;
alert(obj.name+":"+obj.age);带参数：
function Person(name,age){
//在Person对象中添加了两个属性
this.name=name;
this.age=age;
this.setName=function(name){
this.name=name;
};
this.getName=function(){
return this.name;
};
}
var p=new Person("aaaaa",23);
// alert(p.name+":"+p.age);
p.setName("alice");
// alert(p.getName());
//自定义对象中取属性值的方式
for(x in p){
println(x+":"+p[x]);
}//name:alice
//age:23
//setName:function(name){ this.name=name; }
//getName:function(){ return this.name; }
2.直接使用{}定义属性和值的键值对方式。键值对通过冒号连接，键与键直接用逗号隔开
var pp={
//定义一些成员
"name":"cindy","age":23,
"getName":function(){
return this.name;
}
};
//对象调用成员有两种方式：1. 对象.属性 2. 对象["属性名"]
alert(pp.getName()+":"+pp.age+"--"+pp["age"]);
这种方式可以来模拟集合的定义：
//模拟map集合的定义
var oMap={
4:"aab",3:"edf",6:"aoe"
};
// var val=map[4];
// alert("val:"+val);
var val2=get(6);
// alert("val2:"+val2);
function get(key){
return oMap[key];
}