今回は、Javascriptの概念を深ぼってみたのでまとめていきます!!
#1) JS
①ブラウザ内
1.ブラウザに表示された画面に動きを与えることができます。
2.ザーバーと通信を行い、情報の送受信を行うことができます。
例えば、郵便番号を入力すると住所をサーバーから受信してフォームに表示する(お問い合わせフォーム)、他人が送信したチャット情報を自分の画面に表示させる事ができる(インスタグラム、フェイスブック)、検索フォームに入力した単語に関連するキーワード候補を(Google検索、ヤフー検索)表示させることができます。
②ブラウザの外
1.React(スマホアプリ用のフレームワーク)を使うと、スマホアプリを作ることができます。
2.Node.js(サーバーサイド言語)を使うと、サーバーで動くアプリケーションを作ることができます。
3.Google Apps Script(GAS)これは、Googleが独自に開発した言語ですが、これを使うことでGoogleが提供するサービス(Googleスプレッドシート)などを効率化することができます。
#Jqueryとの違い
ここで、Jqueryとの違いについて説明します。
結論から言うと、JqueryはJSのライブラリーになります。つまり、JavaScriptを簡単に書くことができるということです。なので、前提条件として、JSがないと存在することができないということです。記述方法も似ているので、気になった人は調べてみてください。
初心者に向いていると言われています。
それでは、本題のJSのできることについてです。
結論から言うと、できないことあるのかな?ってくらいにたくさんあります。
*制御とは、自由勝手に振る舞わせない、支配する。機械装置などの望む通りの運転状態にすることです。
#HTML制御
別の文字に変更、新しい文字に変更、すでにある文字の削除などを行います。
#CSS制御
CSSで表示されていた文字の変更などを行います。
#フォーム制御
1.選択したボタンによって表示内容を変える
2.入力された内容を制御する
単価×数量=〇〇円とか
3.入力フォーム内容チェック
フォームに入力された値をリアルタイムに読み込む。
4.入力文字数のカウント
#アニメーション制御
1.表示・非表示の切り替え
2.フェードイン・フェードアウトの切り替え
3.サイズの拡大・縮小
4.画像の回転
5.移動
#写真制御
1.サムネ写真の切り替え(楽天、アマゾンの商品の切り替えとか)
2.スライド
3.ヘッターを表示
#その他
1.スクロール制限
2.ヘッターを上部に固定する
#JS自体ができること
- 現在時刻の取得,ポップアップウィンドウの表示,フォームに入力させた値をもとにメッセに返す
2)非同期通信
Ajaxを使用して行います。
通常、HTTP通信を同期通信と言います。HTTP通信の場合、リクエストを出してから、レスポンスを受け取るまで処理を実行することはできません。しかし、Ajaxを使うことで、リクエストを出してから、レスポンスを受け取るまでに処理を完了することができます。
メリットは、以下のようになります。
・操作性の向上 ・パフォーマンスの向上(ページの一部のみの更新)
逆にデメリットに関しては以下のようになります。
・クロスブラウザ処理の発生(異なるドメインへのアクセス) ・サーバー負担 ・コードの量の増加
Ajaxの構成要素については後ほど。
3)ユーザーの動きに応じて表示内容を変えることができます
4)Node.jsを使うことでサーバーサイドからOSの機能にアクセスすることができるため、ネットワークシステムをJSでかくことができます。
#Ajaxの構成要素
・XMLHttpRequesut
・javascript
・DOM
・JSON(XML)
#DOM
ドキュメントをものとして扱うものです。
ツリー構造をしています。
WEbページとJSをつなぐ役割をしています。
例えば、IDからノードを取得して操作します。
今回の内容は以下のサイトを参考にしていただくとわかりやすいかと思います。