Help us understand the problem. What is going on with this article?

初めてのJavaScript その1

More than 1 year has 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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした