JavaScriptの基礎

Jsとは

Jsとは HTML,CSS同様にサーバーからコードを受け取って、クライアントサイドで動く言語のこと。RESTのコードオンデマンドの部分。

JavaScriptで出来ること

ページの表見を変えれる(ooされたら要素をxxのように変更する)。しかしデータとしては保存されないので更新すると、始めのページ状態に戻る。

データのやり取りを行いたい場合はサーバーサイドでの処理が必要(JavaScriptでサーバーサイドで動くのはNode.js)。今回はそこには触れません。

Jsでよく使うやつ

document.write("内容"); //ウェブページに出力
document.write("<p>おはよう</p>"); //HTMLの出力
document.write(hoge); //変数の出力

alert("確認してください");//確認画面を出す

console.log();//コンソールに中身出力

JavaScriptの基本的な概念(DOM)

HTMLの内容を要素の親子関係として捉える。
この要素の親が誰かなどを理解しなければいけない。
DOMはHTMLの要素と似ているが実は少し違う。
HTMLのbodyの中身が読み込まれた後にDOMが作られる。JSではDOMを指定して命令を出すため、HTMLのbodyの中身が読み込まれる前にJSの処理をしてしまうと、DOMが完成していないため取り出す事ができない
↓
HTMLのheadでJSを読み込むと、bodyが読み込まれる前にJS処理が行われてしまう。その時はJSの処理にwindow.onloadとしてHTMLの処理の後に処理が発動するようにすると良い。

同じ意味を持つ処理として以下がある

document.addEventListener('turbolinks:load', function() {
.
.
.
}

この処理ではturbolinksを使っている。turbolinksとはAjaxの処理を可能にするためのライブラリなので、上記のように記述すると中身の処理が非同期で行えるようになる。つまり現在のviewのページを残しながら命令を実行できるようになる。turbolinks:loadを使用する際はturbolinksがアプリ内で使用されていないといけない。rails newでは自動的にturbolinksが有効になる。またturbolinksの具体的な機能はgetを用いたページ移行を高速化すること。具体的にいうと、ページ移行が起きた時に共通部分なる部分(cssやjs)は前のページの内容を残したまま移行するようにする。どのページでも同じcssやjsファイルを読み込んでいるため、読み込みを無くし引き継ぎをすることで高速化を実現している

応用

全ての子要素に同様にイベント(ooされたらxxする)を設定したい場合、その子達の親要素にイベントを設定してやれば良い。

豆知識

documentの親要素はwindow。DOM指定する際は省略できる。だから下の主なコマンドも本当はwindow.~になっている。

document.write("内容"); //ウェブページに出力
document.write("<p>おはよう</p>"); //HTMLの出力
document.write(hoge); //変数の出力

alert("確認してください");//確認画面を出す

console.log();//コンソールに中身出力

注意

イベントを設定するDOMを選択する時の注意。イベントを設定するDOMを選択する時は、サーバーサイドの変数を含んでいないHTML属性を選ばないといけない。id=todo_{$todo->id}の場合は、$todo->idにサーバー側で定義した変数が入っているので、DOMとして選択しない。

JavaScriptで主な変更

まず要素の指定
↓
イベントの追加(指定した要素がOO(イベント)になったらxxする)

要素を指定する時

var 変数名 = document.getElementById('要素名or#id名'); //jsでは要素を取り出し、変数に格納する
var 変数名 = document.querySelector('要素名or#id名');
var 変数名 = document.querySelectorAll("要素名or#id名 要素名or#id名");

変数定義で要素指定。こいつを次のステップで使用。

イベントの追加(指定した要素がOO(イベント)になったらxxする)

2パターンあるのでそれを以下で紹介

イベントハンドラによるイベント設定

こちらは古いやり方。一つのHTML要素に一つのイベント設定しかできないというデメリットがある。

HTML要素に直接埋め込むやり方と、別ファイルで要素にイベント設定をする方法がある。こちらが非常に参考になりました。JS イベントまとめ

また詳しいイベントハンドラについてはこちらを参考に。参考文献はJavaScriptのイベントハンドラ一覧。on〜となることでイベントハンドラになる。

イベントリスナーを使ったイベント設定

  Jsで定義した変数名.addEventListener('イベント', () => {
    //処理内容;
  })

主なイベントはclickやmouseover mouseoutなどだが、その他にもある。参考文献はJavaScriptのイベントハンドラ一覧。イベントハンドラで乗っているがonを外せば、イベントリスナーのイベントとして使用できる。

その他JSでよく使うパターン

HTML要素を追加したい時

JSで追加したい要素を定義して、親要素の直下に子要素として定数を追加する。

aaa=document.createElement(作成するHTMLタグ名)
document.親要素.appendChild(aaa)

その他にも既にある要素を複製して挿入したり、要素削除も可能。appendChild(子要素)とにたコマンドにinsertBeforeなどもあげられる。

また要素の中に属性を増やすにはsetAttributeを使用する。

ooされた時ページのデザイン(CSS)を変えたい時

現在ページで使われていないHTMLの要素(idやclass)をCSSで定義する
↓
JSでooされたら、現在HTMLに存在する要素を取り出し、その要素のidやclassを上で定義した値に変える。

こちらを参考文献にさせていただきました。[JavaScript] 要素のidを変更する

ここかわかることは
DOM.htmlの属性名　= 値；　で変更ができること！！！！！！！！！！！！！！！！

もう少し簡単に要素のCSSを変えたい時

例えば、htmlの要素にCSSの設定がされている時

<p style="display:none;" id="mienai">見えない</p>

↓

var mienai = document.getElementById('#mienai');
mienai.style.display = block; //Jsで定義した変数名.style.cssプロパティで変更できる

注意

DOM.htmlの属性名　= 値；　の時はDOMにhtmlの属性名を属性名をそのまま付けてよかった。
しかーーーし

Jsで定義した変数名.style.cssプロパティではcssプロパティはcssで書くときと少し変えないといけない

Jsで定義した変数名.style.background-color = "値";//こっちはだめ、cssではbackground-colorと書くが、jsでの指定ではだめ
Jsで定義した変数名.style.backgroundColor = "値"; //-を無くして後ろの文字を大文字にするのがお作法

DOMの<></>の間に文字を追加する

Jsで定義した変数名.innerHTML = "Hello"; //指定したDOMが現在<p></p>ならば<p>Hello</p>になる
Jsで定義した変数名.innerHTML = "<span>コードでもいい</span>";//コード自体を挿入しても良い

preventDefault()

イベント発生時に普通は発動することを、あえて止めること。参考文献はEvent.preventDefault()

dataset

これはHTMLの属性で、data-ooがある。この属性の値を得るために使用する。参考文献は【JavaScript】data属性の取得・設定・更新【dataset】

デバッグ

デバッグしたければ、検証→consoleで調べる。

その他重要な概念

JQuery

jsのライブラリ。Ajaxを簡単に実現可能。
JQueryの基本の基本

Vue.js

データバインディングができるjsのライブラリ。jsで定義したデータをviewに反映、viewで入力された値をjsで簡単に扱える。

jsファイルでvueインスタンスを作成し、viewで扱うデータやメソッドを設定

vue.jsについて(自分用)

Ajax

こちらを参照。Javascriptとrails
AjaxでJSON形式(オブジェクトと配列で書かれている非常に軽い形式)のデータを取得、そいつをHTMLの要素に差込む。JSONが軽いためはやい。この時にデータ取得がうまく行った時とうまく行かなかった時の処理も記述しなければいけない。こちらの文献(いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門)のchapter１１が非常にわかりやすかったです。

JSON

XMLのようなデータの形式を示す物。JSONでは配列とオブジェクト(辞書)でデータ形式を示す。データだけを渡すため、HTMLのデータ形式のXMLより軽いので、アクセスが早い。つまりAjaxで使用されるデータ形式。

JSONP

通常AjaxはJsファイルを送ってきたサーバーにしかアクセスはできない。これをクロスドメインの通信制御(不特定多数のドメインのサーバーにアクセスすること)と呼ぶ。しかしJSONPを使用することで複数のサーバーにアクセスできる。