LoginSignup
0
0

More than 3 years have passed since last update.

javascript学習(2020/06/19)

Posted at

setTimeoutメソッド

sample.js
setTimeout(ファンクション, 待ち時間)

待ち時間後にファンクションを一度だけ実行するメソッド。待ち時間はミリ秒で設定。ファンクション名の後ろに()はつけない。

日時を設定した状態でDateオブジェクトを初期化する

sample.js
new Date(,,,,,,ミリ秒);

padStartメソッド

sample.js
ある文字列.padStart(揃える文字列,埋め合わせ用の文字);

ある文字列をそろえる文字数に揃えるメソッド。もし、ある文字列の文字数が揃える文字数織少ない場合は先頭に埋め合わせ用の文字をくっつけて、文字数を揃える。

Stringオブジェクト

sample.js
String(数値データ).padStart(2,'0');

()内の数値データを文字列データに変換する。

URLを書き換える(新しいURLを指定する)

sample.js
location.href = 新しいURL;

cssセレクタで要素を取得する

sample.js
document.querySelector('CSSセレクタ');

document.querySelectorメソッドは()内に書かれたセレクタにマッチする要素を取得する。
複数の要素にマッチした場合は最初にマッチした要素の一つだけを取得。

selected属性の追加

sample.js
document.querySelector('option[value="index.html"]').selected = true;

ブール属性であるselected属性をtrueにする(代入する)と、selected属性がオンになる。この場合,
<option>タグにselected属性が追加される。

クッキー(cookie)

クッキーとは、ブラウザに保存される小さなデータのこと。クッキーのデータはブラウザとWebサーバーの間で送受信され、主にECサイトやSNSサイトなそでユーザーのログイン情報を管理するのに使われる。
クッキーは基本的にはブラウザとWebサーバーの間でデータをやり取りするものだが、javascriptからも読み取りと書き込みができる。javascriptでクッキーのデータを扱う場合は
・簡易的なアンケートや確認ボタンなどで過去に回答したことがあるかボタンをクリックしたことがあるかどうか
・そのwebサイトに何度訪問したか
・文字の大きさや背景色、使用言語などを変更できるサイトの場合は、その設定情報
などを保存するのに使われる。

指定した条件でクッキーを保存するjs-cookieライブラリのメソッド

sample.js
Cookie.set('クッキー名','',{expires: 有効期限});

js-cookieはオープンソースのライブラリ

HTML要素の削除

sample.js
取得した要素.removeChild(削除する要素)

取得した要素に含まれる子要素または孫要素のうち、()内のパラメータで指定した要素を削除する。

マッチする要素すべての取得

sample.js
document.querySelectorAll('CSSセレクタ');

()内で指定されたCSSのセレクタにマッチする要素すべてを取得する。
取得した要素は配列になる。

配列の繰り返し

sample.js
配列.forEach(function(item, index){
  処理内容
});

パラメータがitemで、これには配列の項目が一つ代入される。つまり、最初の繰り返しでは0番目の項目が代入される。2番目のパラメータはindexで配列の項目のインデックス番号が代入される。

javascriptでdata-ナンデモ属性も値を読み取る

sample.js
<タグ名 data-image="img.jpg">

imageの部分は自由に決めることができる

data-ナンデモ属性はナンデモの部分を自分で自由に決めてよい属性。
data-ナンデモ属性はjavascriptでその値を読み取るのに利用する。読み取るときは次のようにする。

sample.js
取得した要素.dataset.ナンデモのところにつけた名前

属性の値を読み取る

sample.js
取得した要素.属性

属性の値を書き換える

sample.js
取得した要素.属性 = ;

ブール属性の値を書き換えるには、実際の値ではなくtrueまたはfalseを代入する。

配列に保存されているデータの項目数を調べる

sample.js
配列.length
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0