Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Junlee(Jun lee)

HTML CSS JavaScript 基礎編-第3回 JavaScript基礎(1)

Last updated at Posted at 2023-05-02

仕事で、Plotly.jsを使ってデータを可視化する必要があるため、JavaScriptに詳しくない私は、HTML、CSS、JavaScriptについての書籍を勉強して基本的な知識を身につけておくことにしました。自分ためのメモですので、記事の中で一部中国語で書くことがあります。また、自分にとって重要ではないところも飛ばしています。

1. JavaScript基礎

前述した通り、JavaScriptがWebページの動作をする役割ます。こちらの動作はブラウザ側で解釈して出した動作です。サーバー側の動作と違うので、注意してください。
JavaScriptに関する勉強のパスが、JavaScript基礎→JQuery→JavaScript中級の方が良いです。

JavaScriptのインポート方式

  • 外部ファイルのインポート
<html>
    <head>
        <!--CSSの外部ファイル-->
        <link rel="stylesheet" type="text/css" href="index.css"/>
        
        <!--JavaScriptの外部ファイル-->
        <link rel="stylesheet" type="text/css" href="index.css"/>
        <script src="index-01.js"></script>
    </head>
    <body>
        <!--BodyからインポートでもOKです-->
        <script src="index-01.js"></script>
    </body>
</html>
  • 内部で直接記入

image.png

  • イベント発生するとここ記入
<html>
    <head>
        <script>
            <!--1. 関数の形でもOKです-->
            function alerMes(){
                alert("おはようございます！")
            }
        </script>
    </head>
    <body>
        <!--2. 簡単な動作でしたら、直接記入-->
        <input type="button" value="button01" onclick="alert('GoodMorning!')" />
        <input type="button" value="button02" onclick="alerMes()"/>
    </body>
</html>

一つのJavaScriptサンプルです。

<html>
    <head>
        <script>
            window.onload = function(){
                alert("おはようございます！");
            }
            window.onbeforeunload = function (event){
                var e = event || window.event;
                e.returnValue = "また来てくださいね！";
            }
        </script>
    </head>
    <body>
    </body>
</html>

2. 基礎

  • 変数(var a=1;)と定数(var PI=3.14;)

  • データ型

    • 基本型
      • 数字、文字列
      • ブールBool：true または false
      • 未定義値:定義したが、値をアサインしていない undefined
      • null
    • 参照型
      • 配列(array)
      • オブジェクト(object)

  • キャスト（型変換）

    • number型にしたいときは「parseInt / parseFloat」
    • string型にしたいときは「toStringメソッド」

  • コメント

    • //がjavascript、/* */がCSS、<!-- -->がHTML

演算子

  • 二項演算子
名称 演算子 概要
プラス演算子 + 数値と数値を足す
文字列結合演算子 + 文字列を結合(くっつける)
マイナス演算子 - 数値から数値を引く
乗算演算子 * 数値と数値をかける
除算演算子 / 割り算
剰余演算子 % 2つの数値の余りを計算
べき乗演算子 ** ある数値の○乗を計算
  • 単項演算子(1つのオペランドを取る演算子)
名称 演算子 概要
単項プラス演算子 + オペランドを数値へ変換
単項マイナス演算子 - オペランドをマイナスの数値へ変換、反転できる
インクリメント演算子 ++ オペランドの数値を+1する
デクリメント演算子 -- オペランドの数値を-1する
  • 比較演算子(オペランド同士を比較し、真偽値を返す)
名称 演算子 概要
厳密等価演算子 ===
厳密不等価演算子 !==
大なり演算子 >
大なりイコール演算子 >=
小なり演算子 <
小なりイコール演算子 <=
  • 代入演算子
名称 演算子 概要
代入演算子 = 変数に値を代入する
  • 論理演算子
名称 演算子 概要
AND演算子 &&
OR演算子 ||
NOT演算子 ! 
/** AND演算子 */
// 左辺がtrueの場合、右辺の評価結果を返す
console.log(true && false);             // => false(右辺)

// 左辺がfalseの場合、左辺の評価結果を返す
console.log(false && true);             // => false(左辺)

/** OR演算子 */
// 左辺がtrueの場合、左辺の評価結果を返す
console.log(true || false);             // => true(左辺)

// 左辺がfalseの場合、右辺の評価結果を返す
console.log(false || true);             // => true(右辺)

/** NOT演算子 */
// 評価結果を反転させた真偽値を返す
console.log(!true)                      // => false
  • 条件演算子(三項演算子)
// 条件式 ? trueの場合の処理 : falseの時の処理;
const result1 = true ? "trueの場合はこちらを代入" : "falseの場合はこちらを代入";
console.log(result1);                   // => trueの場合はこちらを代入

const result2 = false ? "trueの場合はこちらを代入" : "falseの場合はこちらを代入";
console.log(result2);                   // => falseの場合はこちらを代入
  • グループ化演算子(( )で囲うことで演算子の優先度を高くすることができる)
/** グループ化演算子 */
// 2 * 4が優先される
const result1 = 2 * 4 + 3;
console.log(result1);                   // => 11

// グループ化演算子で4 + 3の優先度を高くする
const result2 = 2 * (4 + 3);
console.log(result2);                   // => 14

3. 制御

ほかの言語と同じですので、概要だけ留めます。

  • 順序実行
    • デフォルトとして、上から下まで順番に実行します。
  • 選択
    • if / switch() case break default
  • 繰り返し
    • while / do...while / for

4. 関数

関数ももちろん他の言語と同じですので、違うところのみ記載します。関数を利用するため、以下の二つステップがあります。

  • 関数の定義
  • 関数の呼び出し
<html>
    <head>
        <script>
            // 定義
            function addSum(a,b){
                var sum = a + b;
                return sum;
            }
            //　呼び出し
            var n = addSum(234,898) + 400;
            document.write(n);
        </script>
    </head>
    <body>
    </body>
</html>

以下の二つ呼び出し方が、注意してみましょう。

  • hrefのハイパーリンクで呼び出し、クリックしたら関数が呼び出す：
  • イベントで呼び出し、例えば、ボタンのクリックなど：
<html>
    <head>
        <script>
            // 定義
            function expressMes(){
                alert("おはようございます.\n こんにちは")
            }
        </script>
    </head>
    <body>
        <a href="javascript:expressMes()">Click Me</a>
        <br/>
        <input type="button" onclick="expressMes()" value="Submit"/>
    </body>
</html>

ネストされた関数

ネストされた関数はJavaScriptでの最も重要な概念のクロージャと関わっています。

組み込み関数

組み込み関数 とは、プログラミング言語などの仕様にあらかじめ用意され、標準で使用できる 関数 のこと。
これに対し、 プログラマ がコード上で定義・実装した関数を「ユーザー定義関数」（user-defined function）という。

JavaScriptでの標準組み込まれた関数が大量にありまして、よく使うのは以下の通りです。

  • parseInt()
  • parseFloat()
  • isFinite()
  • isNaN()
  • escape()
  • unescape()
  • eval()

5. 文字列オブジェクト

Javascriptでは、標準組み込みオブジェクトもいっぱりあります。

よく使うのは以下の四つ：

  • String
  • Array
  • Date
  • Math

文字列オブジェクトの使用例：

<html>
    <head>
        <script>
            var a="おはよう！Good!";
            document.writeln("1.長さ："+ a.length + "<br>");
            document.writeln("2.大文字："+a.toUpperCase() + "<br>");
            document.writeln("3.指定文字："+ a.charAt(5)+"<br>");
            document.writeln("4.一部文字："+ a.substring(4,7)+"<br>");
            document.writeln("5.文字置き換え："+ a.replace("o","AA")+"<br>");
        </script>
    </head
    <body>
    </body>
</html>

1.長さ：10
2.大文字：おはよう！GOOD!
3.指定文字：G
4.一部文字：！Go
5.文字置き換え：おはよう！GAAod!

ほかの文字列の関数もある、基本的に他の言語と同じです：

  • 正規表現による置き換え
  • 文字列の分割
  • 指定文字列の場所
  • 指定文字が数値かどうか（isNaN()）

6. Arrayオブジェクト

<html>
    <head>
        <script>
            var a=["神奈川","東京","大阪"];
            document.writeln(a[2] + "<br>");
            a[2] = "千葉";
            a[3] = "沖縄";
            document.writeln(a[2] + "," + a[3] + "<br>");

            document.writeln("<b>これから繰り返し：</b><br>");
            for(var i=0;i<a.length;i++){
                document.writeln(a[i] + "<br>")
            }
        </script>
    </head>
    <body>
    </body>
</html>

大阪
千葉,沖縄
これから繰り返し：
神奈川
東京
千葉
沖縄

ほかのよく使う関数が：

  • slice(start,end)
  • unshift()：unshift("1","6")を使って、アレーの最初に新しいエレメントを追加
  • push()：push("1","6")を使って、アレーの最後に追加
  • shift():アレーの最初のエレメントを削除
  • pop():アレーの最後のエレメントを削除
  • sort():sort(up) アレーをソートする
  • reverse()
  • join():join("接続文字")、アレーでのエレメントを一つ文字列にしておく

7. Dateオブジェクト

Dataオブジェクト関連の関数が多いので、覚える必要がありません。

関数名 説明
getFullYear() 4文字年数
getMonth() 0-11の月数(1月から１２月になります)
getDate() 1-31日数
getHours() 0-23時間数
getMinutes() 0-59分数
getSeconds() 0-59秒数
setFullYear() 年、月、日を設定
setMonth() 月、日を設定
setDate() 日を設定
setHours() 時、分、秒、ミニ秒を設定
setMinutes() 分、秒、ミニ秒を設定
setSeconds() 秒、ミニ秒を設定

定義：

<html>
    <head>
        <script>
            var dt = new Date();
            document.writeln(dt.getFullYear()+"年<br>");
            document.writeln((dt.getMonth()+1)+"月<br>");
            document.writeln("WeekDay："+(dt.getDay())+"<br>");
            
            // 曜日
            var wkday = ["月曜日","火曜日","水曜日","木曜日","金曜日","土曜日","日曜日"];
            document.writeln(wkday[(dt.getDay()-1)]+"<br>");
            
            // set
            dt.setFullYear(2000,11,30);
            document.writeln(dt.getFullYear()+"年<br>");
            document.writeln((dt.getMonth()+1)+"月<br>");
            document.writeln(dt.getDate()+"日<br>");
        </script>
    </head
    <body>
    </body>
</html>

image.png

8. mathオブジェクト

例：

<html>
    <head>
        <script>
            document.writeln(Math.PI,"<br>");
            document.writeln(Math.max(0.5,1,1,4,9));
        </script>
    </head>
    <body>
    </body>
</html>

3.141592653589793
9

詳細は以上のページで、Mathオブジェクトには、静的プロパティと静的メソッドがあります。
利用する際に、上記のページで検索すれば良いのです。

参考情報

0
0
1

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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?