JavaScript関数
続いfunctionキーワードによって定義されたJavaScript関数、関数名と括弧()。
関数名は、文字、数字、アンダースコアおよびドル記号(同じルールや変数名)を含めることができます。
括弧は、カンマで区切られたパラメータを含むことができます
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
コード内の関数は、他のコード内の関数を呼び出して実行します。
- イベントが発生すると(ユーザーがボタンをクリックしたとき)
- 場合はJavaScriptコードの呼び出し
- 自動(自己呼び出し)
例
摂氏華氏に変換します:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
上記の例を使用して、toCelsius関数オブジェクトを参照し、toCelsius()は引用符で囲まれた結果の関数です。
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius; //结果为function toCelsius(f) { return (5/9) * (f-32); }
JavaScript関数で宣言された変数は、の関数であるローカル変数。
ローカル変数は関数内でのみアクセスすることができます。
JavaScriptオブジェクト
例var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
アクセスオブジェクトのプロパティ
person.id
若しくは
person["id"]
オブジェクトのアクセス方法
name = person.fullName();
あなたがいる場合()を使用していないアクセスのfullNameメソッドに戻ります関数の定義を:
name = person.fullName; //function() { return this.firstName + " " + this.lastName; }
JavaScriptイベント
イベントが発生した場合、通常、ユーザーが何かをしたいと思うでしょう。
JavaScriptはイベントが検出されたときにコードを実行することができます。
JavaScriptのコードを 、HTMLを使用すると、HTML要素にイベントハンドラを追加することができます。
次の例では、onclickの属性(およびコード)がボタン要素に追加されます。
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是?</button>
次の例では、(this.innerHTMLを使用して)コードは、独自のコンテンツ要素を変更します。
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
ここではいくつかの一般的なHTMLのイベントです
イベント | 説明 |
---|---|
onchange | HTML要素が変更されました |
onclickの | HTML要素をユーザーがクリック |
onmouseover属性 | ユーザーのHTML要素にマウスを移動 |
ONMOUSEOUT | ユーザーは、HTML要素をマウスを置きました |
onkeydownを | ユーザーは、キーを押します |
onloadイベント | ブラウザがページの読み込みを完了しました |
JavaScriptの文字列
JavaScriptの文字列は引用符ゼロ以上の文字で囲まれています。
あなたはそれが文字列の前後に引用符が可能と一致しない、文字列に引用符を使用することができます。
var answer = "It's good to see you again!";
var answer = "He is called 'Bill'";
var answer = 'He is called "Bill"';
内蔵プロパティの長さは、文字列を返すの長さを:
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length; //26
エスケープ文字
コード | 結果 | 説明 |
---|---|---|
" | " | 単一引用符 |
" | " | 二重引用符 |
\ | \ | バックスラッシュ |
JavaScriptの他の6つの有効なエスケープシーケンス:
コード | 結果 |
---|---|
\ B | バックスペース |
\ F | フィード |
\ nは | 新しい行 |
\ rを | 入ります |
\トン | 水平タブ |
\ V | 垂直タブ |
ロングコードをラップ
ので、変更することができます
document.getElementById("demo").innerHTML =
"Hello Kitty.";
また、文字列に変更される可能性があり
document.getElementById("demo").innerHTML = "Hello \
Kitty";
この方法は、ECMAScriptの(JavaScriptの)標準ではありません。
一部のブラウザでは、文字の後にスペースを許可していません。
文字列の追加を使用して最も安全なアプローチは、長い文字列をラップします(しかし、少し遅い)は、次のとおりです。
document.getElementById("demo").innerHTML = "Hello " +
"Kitty!";
あなたは、コードのバックスラッシュラップ行することはできません。
document.getElementById("demo").innerHTML = \
"Hello Kitty!"; //这是错误的,不会被执行
文字列も対象とすることができます(これは速度が遅くなりますよう、推奨されません)
var firstName = new String("Bill")
var x = "Bill";
var y = new String("Bill");
// typeof x 将返回 string
// typeof y 将返回 object
==等価演算子を使用する場合は、同じ文字列が等しいです
var x = "Bill";
var y = new String("Bill");
// (x == y) 为 true,因为 x 和 y 的值相等
===演算子を使用する場合、オペレータは===同時に同じタイプおよび値を必要とするため、文字列が等しい、等しくありません。
var x = "Bill";
var y = new String("Bill");
//(x === y) 为 false,因为 x 和 y 的类型不同(字符串与对象)
またはさらに悪いです。オブジェクトは比較することはできません
var x = new String("Bill");
var y = new String("Bill");
// (x == y) 为 false,因为 x 和 y 是不同的对象
// (x === y) 为 false,因为 x 和 y 是不同的对象
JavaScriptオブジェクトは、JavaScriptが常にfalseを返します2つのオブジェクトを比較するために比較することはできません。
文字列メソッド
文字列の長さlengthプロパティは、文字列の長さを返します。
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length; //26
サブストリング検索
indexOf()メソッドは、テキストで指定した文字列を返す初めてのインデックス表示されます(位置)
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China"); //17
lastIndexOf()メソッドで指定されたテキスト文字列を返し、最後の最初の発生の指標を
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China"); //51
テキストが見つからない場合、のindexOf()とのlastIndexOf()は-1を返している
開始位置検索ように、第2のパラメータを受け入れるための2つの方法で
取得するのlastIndexOf()メソッド(後方尾部から頭部)、手段:もしを第2のパラメータは、文字列の先頭まで検索を開始する位置50から50です。最終的な結果は、文字列のインデックス位置の最初から最後まで与えられていることに注意してください
部分文字列を取得
検索文字列の検索()メソッドは、値を指定し、位置合わせを返します
var str = "The full name of China is the People's Republic of China.";
var pos = str.search("China");
両方の方法、のindexOf()と検索()は、ある異なるがあり、両方とも等しいです。
違いは、次のとおりです。
- search()メソッドは、第二のパラメータの開始位置を設定することはできません。
- indexOf()メソッドは、より強力な検索値(正規表現)を設定することはできません。
文字列の抽出
スライスは、()は、文字列の特定の部分を抽出し、リターン部は、新しい文字列に抽出されます。開始インデックス(開始位置)、絞り指標(終了位置):この方法は、2つのパラメータを設定します。
ar str = "Apple, Banana, Mango";
var res = str.slice(7,13); //Banana
パラメータが負の場合、文字列の末尾から数え。
この例では、トリミングされたスライス位置の文字列位置-13 -8
var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7); //包含-13,-6截至,不包含-7 ,Banana
省略された場合、第二引数の残りの部分、作物列の方法
var res = str.slice(7); //Banana, Mango
)(サブストリングがスライスに類似しています()。
違いは、()サブストリングは負の指数を受け入れることができないということです。
var str = "Apple, Banana, Mango";
var res = str.substring(7,13); //Banana
SUBSTR()スライスに類似しています()。
第二のパラメータの部分が所定の抽出されたことを除いて長さ。
var str = "Apple, Banana, Mango";
var res = str.substr(7,7); //Banana,
二番目のパラメータを省略した場合、SUBSTR()作物列の残りの部分。
var str = "Apple, Banana, Mango";
var res = str.substr(7); //Banana, Mango
最初の引数が負の場合、文字列の位置の端から計算。
var str = "Apple, Banana, Mango";
var res = str.substr(-5); //Mango
それは長さが定義されているように、第2のパラメータは、負にすることはできません。
SUMMARY置換文字列
replace()メソッドは、別の値を持つ文字列で指定された値を置き換えます。
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School"); //n = Please visit W3School
デフォルトでは、()置き換えるだけで最初のマッチを置き換え
デフォルトで、交換してください()大文字と小文字が区別されます。
大文字と小文字を区別しない交換が行われるため、正規表現/ I(ケース小文字を区別しない)を使用し
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");
すべての出現箇所を置換するには、(グローバル検索)正規表現のシンボルグラムを使用
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");
// 请访问 W3School 和 W3School!
ケースを変更して
文字列を大文字に変換するには、toUpperCase()によって
var text1 = "Hello World!"; // 字符串
var text2 = text1.toUpperCase(); // text2 是被转换为大写的 text1,即HELLO WORLD!
toLowerCaseメソッドによって()下げるために文字列を変換します
var text1 = "Hello World!"; // 字符串
var text2 = text1.toLowerCase(); // text2 是被转换为小写的 text1,即hello world
CONCAT()メソッドではなく加算演算子を用いることができます。次の2行は等価です
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
すべての文字列メソッドは、新しい文字列を返します。彼らは変更しない元の文字列の
関係者は言った:文字列は不変です:文字列を変更することはできません、だけで置き換えます
トリム()メソッドは、文字列の空白の両端を除去します
var str = " Hello World! ";
alert(str.trim()); //Hello World!
:警告のInternet Explorer 8またはそれ以前のバージョンはサポートしていませんトリム()をサポートするための方法をIE 8、あなたは(置き換える正規表現を使用できるように)メソッドの代わりに。
var str = " Hello World! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
また、JavaScriptのString.prototypeを追加するトリム機能を置き換えるために、上記のプログラムを使用することができます
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = " Hello World! ";
alert(str.trim());
文字の文字列を抽出します
これらは、文字の文字列の2つです安全な方法:
- charAt(位置)
- charCodeAt(位置)
charAt()メソッドは、文字列の指定したインデックス(位置)での文字列を返します
var str = "HELLO WORLD";
str.charAt(0); // 返回 H
charCodeAt()メソッドは、指定されたインデックスをコード化Unicode文字の文字列を返します
var str = "HELLO WORLD";
str.charCodeAt(0); // 返回 72
プロパティへのアクセス
var str = "HELLO WORLD";
str[0]; // 返回 H
プロパティへのアクセスは、あまりにもトリッキーではありません。
- NA 7またはInternet Explorerの以前のバージョン
- それは(本当に)のような文字列のルックスの配列を作ります
- あなたが文字を見つけることができない場合は、[]戻りは不定、しかしのcharAt()は空の文字列を返します。
- これは読み取り専用です。STR [0] =「A」はエラーではありません(しかし、それは動作しません!)文字列は不変です
アレイへの文字列は、
文字列配列に変換する)(分割することができ
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用竖线分隔
セパレータが省略された場合、アレイ全体文字列インデックスを含む返される[0]です。
var str = "a,b,c,d,e,f";
var arr = str.split();
document.getElementById("demo").innerHTML = arr[0]; //a[0]="a,b,c,d,e,f"
セパレータがある場合は「」、アレイは単一の文字間隔の配列で返されます
var txt = "Hello"; // 字符串
var arr = txt.split(""); // 分隔为字符arr[0]=H