JavaScriptの基本
最初のJavaScript
Javascriptとは
JavaScriptは世界で最も人気のある言語の1つです。クライアント側で実行されるスクリプト言語です(スクリプト言語:コンパイルする必要はなく、操作中にjsインタープリター(jsエンジン)によって1行ずつ解釈および実行されます。現在は、これも可能ですNode.jsテクノロジーに基づくサーバー側プログラミング)
JavaScriptの役割
- フォームの動的検証(パスワード生成の検出、js生成の本来の目的)
- ウェブページ効果
- サーバー側開発(Node.js)
- デスクトッププログラム(Electron)
- アプリ(Cordova)
- 制御ハードウェア(IoT Ruff)
- ゲーム開発(cocos2d-js)
HTML / CSS / JSの関係
- HTMLはページの構造とコンテンツを決定します
- CSSは、Webページがユーザーに提示される方法を決定します
- JSがビジネスロジックとページ制御を実現
ブラウザはJSの2つの部分を実行します
- レンダリングエンジン:HTMLとCSSを解析するために使用され、一般にカーネルと呼ばれます
- JSエンジン:Webページ内のJavaScriptコードを読み取り、処理後に実行するために使用されます(JSインタープリターとも呼ばれます)
JSの構成
ECMAScript
ECMAScriptは、ECMA Internationalによって標準化されたプログラミング言語です。この言語は、World Wide Webで広く使用されています。JavaScriptまたはJScriptと呼ばれることがよくありますが、実際、後者の2つはECMAScript言語の実装および拡張です
。ECMAScript:JSを指定しますプログラミング構文と基本的なコア知識、一連の業界標準の文法JS
DOMを遵守するすべてのブラウザーベンダー- ドキュメントオブジェクトモデル
ドキュメントオブジェクトモデル(DOMと呼ばれる)は、W3C推奨の処理拡張可能なマークアップ言語標準プログラミングインターフェイスです。 。DOMが提供するインターフェースを介して、ページ上のさまざまな要素(サイズ、位置、色など)を操作できます
。BOMブラウザーオブジェクトモデル
ブラウザーオブジェクトモデル(BOM)は、独立したブラウザーオブジェクトモデルを指します。ブラウザーウィンドウと対話できるコンテンツのオブジェクト構造。BOMを介して、ポップアップボックスなどのブラウザウィンドウを操作したり、ブラウザジャンプを制御したり、解像度を取得したりできます。
JS初体験
行内式
<input type="button" value="点我试试" onclick="alert('Hello World')" />
- HTMLタグのイベント属性(onで始まる属性)に1行または少量のJSコードを記述できます。
- 一重引用符と二重引用符の使用に注意してください:HTMLでは二重引用符の使用をお勧めします。JSでは一重引用符の使用をお勧めします
- 可読性が低く、HTMLで大量のJSコードを書くときに読むのが不便
- 引用符はエラーが発生しやすく、複数のネストが一致する場合、引用符を混同するのは非常に簡単です
- 特別な状況での使用
内嵌式
<script>
alert('Hello World~!');
</script>
- JSコードの複数行をスクリプトタグに書き込むことができます
- 組み込みJSは一般的な学習方法です
外部JSファイル
<script src="my.js"></script>
- HTMLページコードの構造化に役立つ、JSコードの大きなセクションをHTMLページの外に分離します。これは、美しいだけでなく、ファイルレベルの再利用にも便利です。
- 外部JSファイルを参照するスクリプトタグにコードを書き込むことはできません
- JSコードの量が比較的多い状況に適しています
JavaScriptコメント
- フレックスサブアイテムが占めるコピーの数
- align-selfは、交差軸上の子自身の配置を制御します
- order属性は、子の順序を定義します
単一行コメント
// 1行のテキストにコメントするために使用されます(ショートカットctrl + /)
複数行コメント
/ * * /複数行のテキストに注釈を付けるために使用されます(デフォルトのショートカットキーalt + shift + a)
JavaScriptの入出力ステートメント
- alert(msg)警告ボックスがブラウザにポップアップします
- console.log(msg)ブラウザコンソールの印刷出力情報
- prompt(info)ブラウザのポップアップ入力ボックス
変数
変数は、データコンテナーの格納、データの取得、変数名によるデータの変更に使用されます
変数のメモリへの保存
本質:変数は、プログラムがメモリにデータを格納するために適用するスペースの一部です
変数の使用
var age; // 声明一个 名称为age 的变量
- varは、変数の宣言に使用されるJSキーワードです(変数は変数を意味します)。このキーワードを使用して変数を宣言した後、プログラマーが管理する必要なく、コンピューターは自動的に変数にメモリスペースを割り当てます
- ageは、プログラマーが定義した変数名です。変数名を使用して、メモリに割り当てられたスペースにアクセスする必要があります
割り当て
age = 10; // 给 age 这个变量赋值为10
- =右側の値を左側の変数スペースに割り当てるために使用されます。これは割り当ての意味を表します
- 変数値は、プログラマーが変数スペースに保存した値です。
変数の初期化
var age = 18; // 声明变量同时赋值为 18 // 声明一个变量并赋值, 我们称之为变量的初始化
可変構文拡張
変数を更新
変数が再割り当てされると、その元の値は上書きされ、変数の値は最後の割り当ての値に従います
var age = 18;
age = 81; // 最后的结果就是81因为18 被覆盖掉了
複数の変数を同時に宣言する
同時に複数の変数を宣言する場合、必要な変数は1つだけです。カンマを使用して複数の変数名を区切ります
var age = 10, name = 'zs', sex = 2;
データのタイプ
JavaScriptの単純なデータ型とその説明は次のとおりです。
数
JavaScriptの数値タイプは整数と小数(浮動小数点数)を格納できます
var age = 21; // 整数
var Age = 21.3747; // 小数
文字列型文字列
文字列タイプは引用符で囲まれた任意のテキストにすることができ、その構文は二重引用符 ""および単一引用符 ``です。
var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串 // 常见错误
var strMsg3 = 我爱大肘子; // 报错,没使用引号,会被认为是js代码,但js没有这些语法
ブール
-
ブール型には、trueとfalseの2つの値があります。trueはtrue(右)、falseはfalse(false)を意味します。
-
ブール型と数値型を追加する場合、trueの値は1で、falseの値は0です。
console.log(true + 1); // 2
console.log(false + 1); // 1