JavaScript の基本を詳しく理解する-jsチュートリアル-php.cn

JavaScript の基本を詳しく理解する

php中世界最好的语言

リリース： 2018-03-13 13:19:55

オリジナル

1409 人が閲覧しました

今回は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>

ログイン後にコピー

複数のパラメータの合計(引数は変数配列)

<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関数パラメータが2つの場合が渡され、

属性を取得します、3つのパラメータが渡されたら、スタイルを変更します

<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;));
};

ログイン後にコピー

###Note

単一スタイル: 幅、高さ、位置など
複合スタイル: 背景、境界線など
>###3. 配列 - 配列の基本
- 配列の使用方法に違いはありません
定義

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

ログイン後にコピー

、コードが短いため、[] のパフォーマンスがわずかに高くなります

- のプロパティarray

length

は取得と設定の両方が可能です: ① 配列の数を取得できます。また、array.length = 1; を使用して配列の数を設定することもできます。 /Use array.length = 0;

配列の使用原則: 配列

- 配列メソッドを追加

push(element) を追加し、末尾から要素を追加します

unshift(element)、先頭から要素を追加

delete

pop( )、末尾から要素を削除
shift()、先頭から要素を削除

- insert、`splice` (`発音記号: [splaɪs]`): 配列の汎用操作
delete

splice(start, Length) //第一引数: 位置を指定; 第二引数: 長さを指定

Insert

splice(start, 0 、要素...)

最初に削除してから挿入

splice(start, length, Elements...)
最初に削除してから挿入

置換

最初に削除してから挿入を置換として使用できます

-配列の連結 (2 つの配列をマージ):concatconcat(array 2)

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>

ログイン後にコピー

- 結合 (区切り文字)
区切り文字を使用して配列要素を結合し、文字列を生成します (Ajax を学習するときに URL を接続するために使用されます)

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

ログイン後にコピー

- 文字列の分割 (`[splɪt]`分離; 分解) split() メソッドを使用します。文字列を文字列の配列に分割するために使用されます。 stringObject.split(separator,howmany)

separator 必須。このパラメータで指定された場所から stringObject を分割するための文字列または正規表現。
オプションの数。このパラメータは、返される配列の最大長を指定します。このパラメータが設定されている場合、このパラメータで指定された配列以外の部分文字列は返されません。このパラメータが設定されていない場合、文字列の長さに関係なく文字列全体が分割されます。

使用

単語を文字に分割したい場合、または文字列を文字に分割したい場合は、次のコードを使用できます:

"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 Chinese に注目してください。ウェブサイト
その他