JavaScript中的全局变量与局部变量
<script type="text/javascript">
for(var x=0; x<3; x++){//在脚本片段中定义的变量，是全局变量。
document.write("x="+x);
}
function show(){
var x = 6;//局部变量。
}
document.write("x======="+x);
var x = 3;//全局变量x.
function show(x){//函数局部的变量x
x=8;
}
show(x);
document.write("x==="+x);//x=3;
</script>
<script type="text/javascript">
document.write("x---"+x);//全局变量在整个javascript甚至整个页面都有效。
</script>
演示Object对象
<script type="text/javascript">
function show(){
alert("show...run");
}
alert(show.toString());//对象.toString();将对象变成字符串。
var arr = [1,2,3,4,5];
alert(arr.toString());
var abc = function(){
alert("abc run");
}
alert(abc);
alert(abc.valueOf());//对象.toString();返回对象的原始值，与toString大同小异。
</script>
-------------------------------------------------------------------------------------------
out.js文件
//打印指定参数数据到页面上，并换行。
function println(param){
document.write(param+"<br/>");
}
//打印指定参数数据到页面上。
function print(param){
document.write(param);
}
-------------------------------------------------------------------------------------------
stringtool.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.substirng(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; x<y; x++,y--){
swap(arr,x,y);
}
return arr.join("");
}
-------------------------------------------------------------------------------------------
演示string对象。
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript" src="stringtool.js"></script>
<script type="text/javascript">
/*
*表现形式：
*var str = new String("abc");
*var str = "abc";
*/
var str = "abcde";
println("len="+str.length);
println(str.bold());//加粗
println(str.fontcolor("red"));//字体颜色。
println(str.link("http://www.163.com"));//将字符串变成超链接。
println(str.substr(1,3));//bcd 从1开始，截取3个。第二个元素可以指定，也可以不指定。
println(str.substring(1,3));//bc 取头到尾，不包含尾
/*
*发现js中的string对象方法有限，想要对字符串操作的其他功能。
*比如：去除字符串两端的空格。这时只能自定义。
*/
//去除字符串两端的空格。
function trim(str){
//定义两个变量，一个记录开始的位置。一个记录结束的位置。
//对开始的位置的字符进行判断，如果是空格，就进行递增，直到不是空格为止。
//对结束的位置的字符进行判断，如果是空格，就进行递减，直到不是空格为止。
//必须要保证开始<=结束，这样才可以进行截取。
var start,end;
start=0;
end=str.length-1;
while(start<=end && str.charAt(start)==' '){
start++;
}
while(start<=end && str.charAt(end)==" "){
end--;
}
return str.substring(start,end+1);
}
var s = " ab c ";
alert("-"+trim(s)+"-");
alert("abc".bold());//<b>this</b>
/*
*既然trim方法是用来操作字符串的方法，可不可以像字符串已有的方法一样，
*将该方法也定义到字符串对象中呢？直接用字符串对象调用就欧了。
*/
/*
*这里就可以使用一个该字符串的原型属性来完成。
*原型：就是该对象的一个描述。该描述中如果添加了新功能。
*那么该对象都会具备这些新功能。
*而prototype就可以获取到这个原型对象。
*通过prototype就可以对对象的功能进行扩展。
*
*
*需求：想要给string对象添加一个可以去除字符串两端空格的新功能。
*就可以使用原型属性来完成。
*/
//给string的原型中添加一个功能。注意：给对象添加新功能直接使用对象.新内容即可。
//String.prototype.len = 199;//给string的原型对象中添加一个属性名为len。值为199.
println("abc".len);
alert("-"+" ab cd ".trim()+"-");
</script>
-------------------------------------------------------------------------------------------
原型练习：
<script type="text/javascript" src="outT.js></script>
<script type="text/javascript" src="stringtoolT.js"></script>
<script type="text/javascript">
//练习1，给字符串添加一个功能，将字符串变成一个字符数组。
//练习2，给字符串添加一个功能，将字符串进行反转。
var str = "abcdefg";
println(str.toCharArray());
println(str.reverse());
println(str.toString());
-------------------------------------------------------------------------------------------
演示数组。
<script type="text/javascript" src="outT.js"></script>
<script type="text/javascript">
var arr = ["nba","haha","cba","aaa","abc"];
var arr2 = ["qq","xiaoqiang",70];
println(arr);
println(arr2);
//在arr数组上连接一个元素"mm"，再连接一个arr2数组。
//将mm作为新数组中的元素，将arr2数组中的元素也作为新数组中的元素。
var newArr = arr.concat("mm",arr2);
println(newArr);
println(arr.join("-"));
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;
}
// println("<hr/>");
// println(arr);
// println(arr.pop());//删除并返回最后一个元素。
// println(arr);
// println(arr.reverse());
// println(arr.shift());//删除并返回第一个元素。
// println(arr);
println("<hr/>");
arr.sort();//数组自带的排序功能。
println(arr);
//从1开始删除，删除3个元素（包括1），并进行元素的替换。
var temp = arr.splice(1,3,8080,9527,"xixixi","xiaoqiang");
println(temp);
arr.unshift("uuuu");//将指定的元素插入数组的开始位置。
println(arr);
</script>
-------------------------------------------------------------------------------------------
数组练习：用数组实现JS中的堆栈或队列数据结构。
<script type="text/javascript" src="outT.js"></script>
<script type="text/javascript">
var arr = [];
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>
-------------------------------------------------------------------------------------------
arraytoolT.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];
}
//数组的字符串表现形式。
//定义toSring方法。相当于java中的复写。
Array.prototype.toString = function(){
return "["+this.join(",")+"]";
}
-------------------------------------------------------------------------------------------
给数组添加新功能，使用到原型属性。
<script type="text/javascript" src="arraytoolT.js"></script>
<script type="text/javascript">
var array = ["nba","haha","cba","aaa","abc"];
var maxValue = array.getMax();
println("maxValue:"+maxValue);
println(array.toString());
</script>
-------------------------------------------------------------------------------------------
演示JS中的日期。Date
<script type="text/javascript" src="outT.js"></script>
<script type="text/javascript">
var date = new Date();
println(date);
println(date.toLocaleString());//日期和时间
println(date.toLocaleDateString());//只有日期
/*
* 为了简化对象调用内容的书写。
* 可以使用js中的特有语句with来完成。
* 格式：
* with(对象)
* {
* 在该区域中可以直接使用指定的对象的内容。不需要写对象。
* }
*/
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);
//将毫秒值转成日期对象。
var date3 = new Date(time);
//将日期对象和字符串之间进行转换。
//日期对象转成字符串。toLocaleString toLocaleDateString
//将字符串转成日期对象。具备指定格式的日期字符串-->毫秒值-->日期对象。
var str_date = "9/28/2017";
var time2 = Date.parse(str_date);
var date3 = new Date(time2);
println(date3.toLocaleDateString());
</script>
-------------------------------------------------------------------------------------------
演示Math对象。该对象中的方法都是静态的。不需要new，直接Math调用即可。
<script type="text/javascript" src="outT.js"></script>
<script type="text/javascript">
var num1 = Math.ceil(12.34);//返回大于等于指定参数的最小整数。
var num2 = Math.floor(12.34);//返回小于等于指定参数的最大整数。
var num3 = Math.round(12.54);//四舍五入
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 = parseInt((Math.random()*10+1));//Math.random()为0.0-0.9的伪随机数
println(num);
}
</script>
-------------------------------------------------------------------------------------------
演示global的全局方法。
<script type="text/javascript" src="outT.js"></script>
<script type="text/javascript">
println(parseInt("123")+1);//124
var val = parseInt("12abc");//val = 12;
println("value="+val);//通过isNaN来判断结果是否非法。
//将指定进制格式的字符串转成十进制。
var num = parseInt("110",2);
println("num="+num);
var num1 = parseInt('0x3c',16);
println("num1="+num1);
//将十进制转成其他进制。使用数字对象完成。
var num3 = new Number(6);
println("num3="+num3.toString(2));
var num4 = 60;
println("num4="+num4.toString(16));
/*
js中的特有语句for in
格式：
for(变量 in 对象){}//对对象进行变量的语句。
*/
var arr = [53,25,78];
for(i in arr){
println("i="+arr[i];
}
</script>
-------------------------------------------------------------------------------------------
js自定义对象。
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
如果想要自定义对象，应该先对对象进行描述。
js是基于对象，不是面向对象的。不具备描述事物的能力。
我们还想按照面向对象的思想编写js。
就要先描述，在js中，可以用函数来模拟面向对象中的描述。
*/
/*
//用js来描述人
function Person(){//相当于构造器
alert("person run");
}
//通过描述进行对象的建立。new
var p = new Person();
//动态给p对象添加属性。直接使用p.属性名即可。
p.name = "zhangsan";
p.age = 29;
//如果定义p对象的属性赋值为一个函数，即是给p对象添加一个方法。
p.show = function(){
alert("show:"+this.name+":"+this.age);
}
p.show();
var obj = new Object();
obj.name = "god father";
obj.age = 2013;
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("旺财",20);
for(x in p){
println(x+":"+p[x]);
}
p.setName("小强");
alert(p.name);
alert(p.getName());
//直接使用{}定义属性和值得键值对方式。键值对通过:链接，键与键之间用逗号隔开。
var pp = {
"name":"小明","age":38,
"getName":function(){
return this.name;
}
}
//对象调用成员有两种方式：对象.属性名 对象["属性名"]
alert(pp["age"]+":"+pp.name);
//用js实现键值对映射关系的集合容器。
var oMap = {
8:"小强",3:"旺财",7:"小明"
}
var val1 = oMap[8];
alert("val1:"+val1);
var val2 = get(7);
alert("val2:"+val2);
function get(key){
return oMap[key];
}
var myobj = {
myname:"lisisi",myage:30
}
alert(myobj.myname+":"+myobj["myage"]);
var myobj2 = {
"myname2":"hahaha","myage2":48
}
alert(myobj2.myname2+":"+myobj2["myage2"]);
var myMap = {
// names:["lisi1,","lisi2","lisi3"],nums:[26,75,16]
names:[{name1:"zhangsan"},{myname:"hahahah"}]
}
alert(myMap.names[1]);
alert(myMap.names[0].name1);
</script>
