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中的堆?；蜿犃袛祿Y構。

<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>

轉載于:https://www.cnblogs.com/L-java/archive/2013/04/13/3017800.html

總結

以上是生活随笔為你收集整理的JavaScript在HTML中的应用2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。