JavaScript の基礎 [1]_PHP チュートリアル

JavaScriptの基本 [1]

2015/11/13 16:10:04

JavaScriptはその誕生以来物議を醸していますが、それは今日のWEBプログラミングの主流言語になることに影響を与えていません。元の JavaScript は、ブラウザー側でデータ対話、画面レンダリング、セッション認証などの動的な機能を提供するように設計されていましたが、現在では、node.js の人気により、JavaScript がサーバー側にも拡張されています。

弱い型指定のスクリプト言語であるため、JavaScript の構文は複雑ではありません。Web 開発を行うかどうかにかかわらず、この時代のプログラマーとして JavaScript に精通していることは有益です。ということで、今日はJavaScriptについてしっかりと理解していきましょう！

1. JavaScriptとは何ですか?

JavaScript は動的スクリプト言語であり、特に Web アプリケーション開発に使用されます。その主な機能は、ページに動的な動作効果を追加することです。具体的には、次のとおりです。

• HTML ページに動的テキストを埋め込みます。
• ブラウザのイベントに応答します (JavaScript は、ユーザーのマウスのクリックや動きなどに応答できるイベント応答言語です)。
• HTML 要素 (フォームなど) を読み書きします。 ) 送信など);
• サーバーに送信する前にデータを検証します。
• Cookie の作成や変更などを制御します。 js テクノロジー;
JavaScript は、クライアント側で HTML ページの動的な動作をプログラミングするための文字通りのスクリプト言語であると言え、Web ブラウザーはユーザー ページを表示するだけではありません。しかし、JavaScript はクライアントにデプロイされるため、そのセキュリティは常に注目の的となってきました。

• 2. JavaScript のデバッグ

  JavaScript スクリプトの実行は、主に主要なブラウザ メーカーが独自に開発した解析エンジンを通じて実装されます。既存の主流の JavaScript 解析エンジンには主に、Chrome の V8 エンジン、IE9 の JS エンジン、Firefox の TraceMonkey があります。

  JavaScript 開発では、直接使用できる VS に似た IDE を使用することに慣れていますが、JavaScript 自体は " 軽量」言語なので、開発とデバッグには簡単なテキストエディターとJavaScript解析エンジンだけが必要です。

  もちろん、Windows のメモ帳や Linux の Vim エディターを使用することもできますが、構文の強調表示や自動補完などの便利な機能がたくさんある専用のコード エディターを使用することをお勧めします。ここで使用するテキスト エディターは nodepad++ で、付属のデバッガーは単純な Firefox です。もちろん、nodepad++ は複数のブラウザーのデバッグをサポートしているため、IE、Chrome、さらには Safri も使用できます。

  

  Notepad++ の [実行] メニューで、デバッグ JavaScript スクリプトを実行するブラウザを選択するか、上記のショートカット キーを使用できます。

  3. JavaScript テストプログラム

  次に、非常に簡単な JavaScript スクリプトを提供し、それに関連する知識ポイントを 1 つずつ説明します。

  最初は JavaScript スクリプトです: program.js、最初にコードの一部を見てみましょう:
  
  
  

  <ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>document.writeln('');<br /> </li><li>document.writeln("Hello, world!");<br /></li><li>var a = 100000000000000000000e400;<br /></li><li>if (a < Infinity)<br /></li><li>{<br /></li><li>document.writeln(a);<br /></li><li>document.writeln('a less than Infinity, 3Q~~');<br /></li><li>}<br /></li><li>else<br /></li><li>{<br /></li><li>document.writeln(a);<br /></li><li>document.write('Sorry, a more than Infinity!\n');<br /></li><li>} </li></ol>

  
  1 行目: document.writeln() と document.write() は両方とも書き込みに使用されます。ターミナル (ブラウザ) の出力情報。違いは、「ln」バージョンには独自の改行があることです。
  3 行目: 変数を定義します。型を宣言する必要はありません。キーワード「var」を使用するだけです。引き続き JavaScript では、if-else、while、for などの基本的な制御構造を使用できます。JavaScript の数値は一律に 64 ビット浮動小数点で表現されるため、1.0 と 1 で表現される値は同じになります。 NaN は正常な結果を生成できない演算結果を表し、1.798e308 より大きい値はすべて Infinity で表され、e308 は 10 の 308 乗を表すため、入力値が定義された値より大きい場合は、
  
  
  
  

  <ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>var a = 10, b = 9;<br /> </li><li><br /></li><li>document.writeln(a);<br /></li><li><br /></li><li>function add(x,y)<br /></li><li>{<br /></li><li>return x + y;<br /></li><li>}<br /></li><li><br /></li><li>function subtract(x,y)<br /></li><li>{<br /></li><li>return x - y;<br /></li><li>}<br /></li><li><br /></li><li>document.writeln(add(a,b)); </li></ol>

  行 5 は単純な関数の定義を開始し、1 つは加算 (add)、もう 1 つは減算 (subject) であり、端末の出力時に関数が呼び出されます。
  
  
  

  <ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>document.writeln("Global Object...");<br /> </li><li>var MyObj = {};<br /></li><li><br /></li><li>MyObj.member = {'first-name': "Alice", last_name : "Winston"};<br /></li><li><br /></li><li>MyObj.record = {<br /></li><li>airline: 'T2B',<br /></li><li>number: 777,<br /></li><li>departure: {<br /></li><li>Date:"Sunday",<br /></li><li>Time:"2015-11-01",<br /></li><li>City:"Taiwan"<br /></li><li>},<br /></li><li>arrival: {<br /></li><li>Date:'Monday',<br /></li><li>Time:"2015-11-02",<br /></li><li>City:"Beijing"<br /></li><li>}<br /></li><li><br /></li><li>};<br /></li><li><br /></li><li>document.writeln("Retrive a non-exit attribute value ..exa..MyObj.people..");<br /></li><li>document.writeln(MyObj.people);<br /></li><li><br /></li><li>document.writeln("typeof MyObj.member is ...");<br /></li><li>document.writeln(typeof MyObj.member);<br /></li><li><br /></li><li>document.writeln("MyObj.record.number is ...");<br /></li><li>document.writeln(typeof MyObj.record.number);<br /></li><li><br /></li><li>document.writeln('MyObj.record.airline is ...');<br /></li><li>document.writeln(typeof MyObj.record.airline); </li></ol>

  
  JavaScript関数にはローカルドメインがないため、グローバルドメインがよく使われます。プログラミング経験のある人なら誰でも、グローバル変数は非常に混乱しやすいことを知っているので、この記事のように最初にグローバル オブジェクトを作成し、その後、すべての操作をその一部にすることをお勧めします。つまり、定義するグローバル オブジェクトは次のとおりです。実際には「グローバル コンテナ」です。

  JavaScript の単純なデータ型には、数値、文字列、ブール値、null 値、および未定義の値が含まれます。その他の値は、配列、関数、正規表現などのオブジェクトです。簡単に言えば、JavaScript のオブジェクトは変更可能なキー付きコレクションです。オブジェクトはさまざまな属性で構成されます。属性の名前には空の文字列を含む任意の文字列を指定でき、属性値には未定義を除く任意の値を指定できます。

  
  行 2 は空のグローバル オブジェクト MyObj を初期化します。
  行 4 はオブジェクト MyObj に属性メンバーを追加します。メンバーは 2 つのキーと値のペアを含むオブジェクトで、各キーと値のペアは ',' で区切られています。属性に記号を追加する必要はありません。
  行 7 ～ 8 の属性名は文字列です。JavaScript 識別子仕様 (数字、文字、アンダースコア、最初の文字は文字のみ) を使用することをお勧めします。 「first-name」などの文字列を表す「」は「」を省略できませんが、first_name として記述するだけでなく、オブジェクトのプロパティを取得するときに簡単に参照記号「.」を使用できます。 MyObj.member.last_name として使用し、非正規識別子は MyObj.member.["first-name"] のみを使用できますが、これは非常に面倒です
  
  
  
  

  <ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>//对象属性值的更新<br /> </li><li>document.writeln('Attribute value update...');<br /></li><li>document.writeln(' Once Date is ' + typeof MyObj.record.departure.date);<br /></li><li><br /></li><li>MyObj.record.departure.Date = 'Saturday';<br /></li><li><br /></li><li>document.writeln(MyObj.record.departure.Date);<br /></li><li><br /></li><li>//对象枚举<br /></li><li>document.writeln('Object enume...')<br /></li><li>var name;<br /></li><li>for (name in MyObj.record)<br /></li><li>{<br /></li><li>document.writeln(name + ':' + MyObj.record[name]); </li></ol>

  
  3 行目では typeof を使用してオブジェクトの型を取得しています。 typeof 演算子の値は、「string」、「boolen」、「unknown」、「function」、「object」のみです。

  5 行目は、既存の属性を直接更新します。属性のキーと値のペアを作成します。

  行 9 は、オブジェクトのすべてのプロパティの列挙を示しています。for-in 構造を使用して、すべてのプロパティ (関数およびプロトタイプのプロパティを含む) を列挙できます。必ずしも順番通りではないので、一般的には for() の形式でトラバーサル メソッドを指定します
  
  
  次は
  program.html
  

  です。

  <ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"><html><br />  </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"><body><br /> </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"><pre class="brush:php;toolbar:false"><br /> </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"> <br /> </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;">