首頁 > web前端 > js教程 > 主體

深入JavaScript之基礎應用

php中世界最好的语言
發布: 2018-03-13 13:19:55
原創
1373 人瀏覽過

這次帶給大家深入JavaScript之基礎應用,使用JavaScript基礎應用的注意事項有哪些,下面就是實戰案例,一起來看一下。

函數傳回值

傳回值1

<script>function show(){    return &#39;advb&#39;;
}var a=show();
alert(a); // 结果: advb</script>
登入後複製

傳回值2

<script>function show(a, b){    return a+b;
}
alert(show(3, 5));</script>
登入後複製

傳回值3

<script>function show(a, b){    //return; //没有return}
alert(show(3, 5));  //结果 : undefined</script>
<script>function show(a, b){    return; //没有return任何东西}
alert(show(3, 5));  //结果 : undefined</script>
登入後複製

一般求和

<script>function sum(a, b){    return a+b;
}
alert(sum(12, 6));</script>
登入後複製

多個參數求和 (arguments 是一個可變數組)

<script>
    function sum()    {        //arguments 是一个可变数组 
        var result=0;        for(var i=0;i<arguments.length;i++)
        {
            result+=arguments[i];
        }        return result;
    }
    alert(sum(12, 6, 8, 6, 8, 6, 8)); //结果 : 54</script>```
登入後複製

- CSS函數當傳入兩個參數時取得屬性 , 三個參數時,修改樣式

<html>
<head>
<meta charset="utf-8">
<title>CSS函数</title>
<script>
function css(obj, name, value)
{
if(arguments.length==2) //获取
{
return obj.style[name];
}
else
{
obj.style[name]=value; //修改
}
}
window.onload=function ()
{
var oDiv=document.getElementById(&#39;div1&#39;);
//alert(css(oDiv, &#39;width&#39;)); //获取到宽度 200px
css(oDiv, &#39;background&#39;, &#39;green&#39;); //修改背景颜色为绿色
};
</script>
</head>
<body>
<div id="div1" style="width:200px; height:200px; background:red;">
</div>
</body>
</html>
登入後複製
function getStyle(obj, name)
{if(obj.currentStyle) //由于currentStyle只兼容IE,所以在IE浏览器中他是true,其他浏览器中为false
{
return obj.currentStyle[name]; //IE
}
else
{    //计算样式 其中getComputedStyle(oDiv, xxx) 第二个参数可以随便填,一般习惯写false
return getComputedStyle(obj, false)[name];  //Chrome、FF
}
}
登入後複製

範例程式碼:
透過上面的函數來取得非行間樣式`backgroundColor`

window.onload=function (){var oDiv=document.getElementById(&#39;div1&#39;);
alert(getStyle(oDiv, &#39;backgroundColor&#39;));
};
登入後複製

##注意此函數只適用於單一樣式,複合樣式不適用!!!
單一樣式:width、height、position 等
複合樣式:background、border 等
>
3.陣列- 陣列基礎
- 陣列的使用
定義

var arr=[12, 5, 8, 9]; //一般用这种创建方式,简单
var arr=new Array(12, 5, 8, 9); //也可以这样创建
登入後複製

沒有任何差別,[]的效能略高,因為程式碼短


- 陣列的屬性
length


既可以獲取,又可以設定:①.可以取得陣列的個數,②.又可以用過array.length = 1;來設定陣列的個數;
範例:快速清空陣列 //用過array.length = 0;來清空陣列;

陣列使用原則:陣列中應該只存一種類型的變數


- 陣列的方法

  新增

push(元素),從尾端新增一個元素

unshift(元素),從頭部加入一個元素


刪除


pop(),從尾部刪除一個元素

shift(),從頭部刪除一個元素


- 插入、刪除`splice` (`音標:[splaɪs]`) : 陣列的萬能操作
刪除

splice(開始,長度) //第一個參數:指定位置;第二個參數:指定長度


插入

#splice(開始, 0, 元素…)


先刪除,後插入


#splice(開始, 長度,元素…)

先刪除,後插入


替換

先刪除,後插入可用作替換


- 數組連接(兩個數字組合並) :concatconcat(數組2)
連接兩個陣列

<script>
var a = [1,2,3];
var b = [4,5,6];
alert(a.concat(b)); 结果:[1,2,3,4,5,6];
alert(b.concat(a)); 结果:[4,5,6,1,2,3];
</script>
登入後複製

- join(分隔符)
用分隔符,組合陣列元素,產生字串(學習ajax時,連接網址使用)

<script>
var arr = [1,2,3,4];
alert(arr.join(&#39;-&#39;)) //1-2-3-4
alert(arr.join(&#39;- -p&#39;)) //1- -p2- -p3- -p4
</script>
登入後複製

- 字串split  (`[splɪt]`分離;分解)split() 方法用來把一個字串分割成字串陣列。 stringObject.split(separator,howmany)


separator   必要。字串或正規表示式,從該參數指定的地方分割 stringObject。

howmany 可選。此參數可指定傳回的陣列的最大長度。如果設定了該參數,則傳回的子字串不會多於這個參數指定的陣列。如果沒有設定該參數,整個字串都會被分割,不考慮它的長度。


使用


如果您希望將單字分割為字母,或將字串分割成字符,可使用下面的程式碼:

"hello".split("")   //可返回 ["h", "e", "l", "l", "o"]
登入後複製


若只需要傳回一部分字符,請使用howmany 參數:

"hello".split("", 3)    //可返回 ["h", "e", "l"]
登入後複製

 - 排序sort`sort([比較函數])`,排序一個數組
排序一個字串陣列
排序一個數字數組
① 排序一個字串數組

<script>
var arr=[&#39;float&#39;, &#39;width&#39;, &#39;alpha&#39;, &#39;zoom&#39;, &#39;left&#39;];
arr.sort();
alert(arr); //结果 [&#39;alpha&#39;,&#39;float&#39;,&#39;left&#39;,&#39;width&#39;,&#39;zoom&#39;]
</script>
登入後複製

②排序一個數字數組 - 2.1 基礎版本

<script>
var arr=[12, 8, 99, 19, 112];
arr.sort();
alert(arr); //结果: [112,12,19,8,99] //其实他把数字当成字符串来排序了
</script>
登入後複製

- 2.1 晉級版

<script>
var arr=[12, 8, 99, 19, 112];
arr.sort(function (n1, n2){
if(n1<n2)
{
return -1;//只要是个负数就可以 -2,-7等都可以
}
else if(n1>n2)
{
return 1; //只要是个正数就够了
}
else
{
return 0;
}
});
alert(arr); //结果:[8,12,19,99,112]
</script>
登入後複製

- 2.2最終版(由2.1進化而來)

<script>var arr=[12, 8, 99, 19, 112];
arr.sort(function (n1, n2){    return n1-n2; //若果n1>n2,为正;如果n1<n2,为负;如果相等,则为0;});alert(arr);//结果:[8,12,19,99,112]
</script>
登入後複製
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網#其它相關文章!

推薦閱讀:

HTML與CSS中背景相關屬性

#JS的8個必須注意的基礎知識

###

以上是深入JavaScript之基礎應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板