Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
15
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

JavaScriptとは何か

  • ブラウザで実行できるスクリプト言語(コンパイルが不要、正確にはブラウザがコンパイルしながら実行してくれる)
  • 動きのあるWebサイトを構築できる(一時的にFlashが流行りましたが、今はJavaScriptの天下な気がします)
  • よく言われてるけど、Javaとは別物です
  • 静的なwebページに動きをつけるので、HTMlについて知っておかないといけない

準備

テキストエディタ(メモ帳などなんでもOK ※Atomが高機能でおすすめ、しかしPCのスペックが低いと重いです)
で静的コンテンツを用意する。

index.html
<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body></body>
</html>

とりあえず書いてみる

index.html
<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>
            <script src="script.js"></script>
            <script>
            /*
            この記号の中にコメントが書けます。
       JavaScriptのソースは<script>の中で書けます。または、外部のjsファイルに書いて、htmlから呼び出すことも可能です。
            */
            // 一行の場合のコメントはこのように書けます。

            // 変数に関して、変数はデータを入れる箱というイメージです。
            var aisatu = "こんにちは"; // varでaisatuという名前の変数を制限して、文字列を変数に代入

            </script>
    </body>
</html>

変数の種類

  • 文字列 例:"こんにちは"
  • 数値 例: 123
  • 真偽値 例:true または false
  • オブジェクト: データのまとまり、例えばuserというオブジェクトがあるとして、userの中にnameやageがあるイメージ
  • 配列 例:['リンゴ', 'バナナ', 'イチゴ']
  • undefined 定義されていない
  • null 何もない

数値の演算

index.html
    <script>
        var x;
        x = 1 + 2;   // xが3になる
        x = 2 - 1; // xが1になる
        x = 10 * 2; // xは20となる
        x = 10 / 2; // xは5となる
        x = 10 % 3; // 余りが1となる
        x++; // xが7となる
        x--; // xが6となる
    </script>

文字の連結と特文字

\n 改行
\t タブ
s = "hello " + "world"; helloworld となる

条件分岐

index.html
    <script>
        var score = 50;
        if (score > 60) {
            // スコアが60より大きい時の処理
        } else if (score > 40) {
            // スコアが40より大きい時の処理
        } else {
            // スコアが40以下の時の処理
        }
    </script>

比較演算子

> a > b // aがbより大きい
< a < b // aがbより小さい
>= a >= b // aがb以上
<= a <= b // aがb以下
== a == b // aがbと等しい
!= a != b // aがbと等しくない

論理演算子

&& a && b // aかつb
|| a || b // aまたはb
! !true // falseである

一旦ここまで、続きは次回で!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
15
Help us understand the problem. What are the problem?