JavaScriptサンプル一覧

JavaScriptの基礎

気づき：scriptタグは基本的にどこに書いてもよく、今回はheadタグに書いた。

どちらでも動いた

JavaScriptは、拡張子.jsを付けてファイルを作成することで、別ファイル内に処理を記述することができる。HTMLでは、1.のようにscriptタグを用いる。

console.log()メソッドを使うと、ブラウザーの開発者ツール内のコンソールパネルにメッセージを出力できる。任意の値を出力できるので、プログラム途中で値がどのように変化しているか知りたいときに便利。

console.log()メソッドの引数には複数の値をカンマ区切りで設定することができる。

JavaScriptではconstで定数を、letで変数を扱う。

値が格納された変数は以下の三点のことが可能。1.数値の変数同士で加算や減算を行う2.文字列の変数同士を結合する3.変数を別の変数に代入する

定数を使う場合は以下の時である。１.値に名前を付けて取り扱いたいとき2.値を使いまわしたいとき3.再代入不可能な定数を扱いたいとき

定数は、値を代入できないだけであって、完全に変更が不可能なわけではなく、例えば、配列やオブジェクトを扱う場合は、中身を変更できる

C言語のようにif,elseで処理を振り分けることができる

C言語のように条件で処理を振り分けることができる。

真偽値や数値や文字の取り扱い

JavaScriptのデータ型の一つにBoolean型(真偽値型)があり、trueかfalseで表す。また、!!を二つ付けることでデータをBoolean型に変換することが可能。

Math.round(数値)四捨五入、Math.floor(数値)切り捨て、Math.ceil(数値)切り上げる、Math.trunc(数値)整数部分を返す。

Math.random()は、０以上１未満の浮動小数点の疑似乱数を返す。これを使い、ボタンをクリックするたびに、ランダムにグラデーション色を変えるサンプルを作る。

Math.cos(数値)、Math.sin(数値)、Math.tan(数値)、Math.acos(数値)、を使い画像を回転させるアニメーションを作る。

'文字列'lengthで文字の長さを取得することができる。

注意点：lengthでは絵文字や特殊な文字は、２文字とカウントされる。これは、Javascriptでは基本的に文字を2バイトで表現しているが、絵文字や特殊な文字の場合は4バイトとして表現する。これをサロゲートペアという

JavaScript では内部的に文字を UTF-16 の文字コードで保管します。 UTF-16 でがほとんどの文字を 1 つの文字コードで表すことができますが、 Unicode で扱う文字の数が増えた結果 16 ビットの文字コードですべての文字を対応させることができなくなり一部の文字は 2 つの文字コードを使って表すように拡張が行われました。

サロゲートペアを含めて一文字としてカウントするには、Array.form()を使う。サロゲート( Surrogate )とは、英語で代理という意味

  
  
        
      Javascript
    /** テキストエリア */
    let textarea = document.querySelector('.textarea');
    
    /** 入力中の文字数 */
    let string_num = document.querySelector('.string_num');
    
    //  テキストを入力する度にonKeyUp()を実行する
    textarea.addEventListener('keyup', onKeyUp);
    
    function onKeyUp() {
      // 入力されたテキスト
      const inputText = textarea.value;
      // 文字数を反映
      string_num.innerText = inputText.length;
    }
  

「文字列からある文字列を検索したい」という場合に使うメソッド。indexOf()メソッドは、「対象の文字列」の中の「検索したい文字列」が見つかるインデックス(位置)を取得します。インデックスは0から始まります。例えば、１文字目のインデックスは0、5文字目のインデックスは4です。文字列が含まれていない場合は、-1が返ります。検索文字列の大文字・小文字が区別されます。

includes()、startsWith()、endsWith()メソッドを使うと、検索したい文字列が含まれているかをどうかを調べることができます。includes()メソッドは文字列のどこかに含まれていれば結果はtrueとなります。startsWithメソッドは文字列のはじめが引数と同じであるかを調べます。同様に、endsWith()メソッドは文字列の末尾が引数と同じであるかを調べます。

ランダムで画像を一枚表示するサンプル

ランダムで数字を１０個を表示

  
  
        
      Javascript
    var arr = [];
$('div i').each(function() {
  arr.push($(this).html());
});
arr.sort(function() {
  return Math.random() - Math.random();
});
$('div').empty();
for( i = 0; i < arr.length; i++ ) {
  $('div').append('' + arr[i] + '');
}