ホームページ > 記事 > ウェブフロントエンド > JavaScript の基本を詳しく理解する
JavaScript の基本を詳しく理解する
- php中世界最好的语言オリジナル
- 2018-03-13 13:19:551376ブラウズ
今回はJavaScriptの基本的な応用例と、JavaScript基本的な応用例を使用する際の注意事項について詳しくご紹介します。
関数の戻り値戻り値1<script>function show(){ return 'advb';
}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('div1');
//alert(css(oDiv, 'width')); //获取到宽度 200px
css(oDiv, 'background', 'green'); //修改背景颜色为绿色
};
</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('div1');
alert(getStyle(oDiv, 'backgroundColor'));
};###Note e7116f921f8c0ae23b2c9972ddc9fc1e単一スタイル: 幅、高さ、位置など
複合スタイル: 背景、境界線など
>###3. 配列 - 配列の基本
- 配列の使用方法に違いはありません
定義
var arr=[12, 5, 8, 9]; //一般用这种创建方式,简单 var arr=new Array(12, 5, 8, 9); //也可以这样创建、コードが短いため、[] のパフォーマンスがわずかに高くなります
length
配列の使用原則: 配列
- 配列メソッドを追加
push(element) を追加し、末尾から要素を追加します
pop( )、末尾から要素を削除
shift()、先頭から要素を削除
- insert、`splice` (`発音記号: [splaɪs]`): 配列の汎用操作
delete
splice(start, Length) //第一引数: 位置を指定; 第二引数: 長さを指定
splice(start, 0 、要素...)
splice(start, length, Elements...)
最初に削除してから挿入
置換
最初に削除してから挿入を置換として使用できます
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('-')) //1-2-3-4 alert(arr.join('- -p')) //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=['float', 'width', 'alpha', 'zoom', 'left']; arr.sort(); alert(arr); //结果 ['alpha','float','left','width','zoom'] </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 に注目してください。ウェブサイト
その他
HTMLとCSSの背景関連の属性
以上がJavaScript の基本を詳しく理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。