javaScriputをはじめよう

programing

javaScriptは、Javaという言語をベースにSunMicrosystems社とNetscapeCommunications社が開発したスクリプト言語です。文章だけの表現だけしかできなかったWEBページに動的な表現や対話性を付加するために開発されたものです。簡単なものでは、ブラウザで表示するWEBページに時刻を表示したり、画像を動かしたり、ゲームを作ったりなど動きのあるWEBページを作ることができます。

javaScriptで時刻を表示する

例えば、javaScriptを使って時刻を表示するとこうなります。

サンプル

0:0:30
0:0:30

これは、Wordpressでもコードを書くこともできますが、基本的にはブラウザに搭載されているので、メモ帳などのテキストエディタがあるとプログラミングすることができます。

javaScriptができること

現在のWEBページの多くはこれらで構成されています。

  • 文章構造を作るHTML
  • HTMLの見た目を装飾するCSS
  • これらに動きを付けるjavaScript

文章構造を作るHTML

HTMLは、テキストや画像などの内容を「タグ」でマークアップして文章構造を作ります。

<p class=”greet“>ハロー</p>

  • 赤字 タグ名~終了タグ
  • 青字 属性名
  • 緑字 属性値
  • 黄色 内容

HTMLの見た目を装飾するCSS

CSSは、セレクタとプロパティを使ってHTMLにスタイルを適用します。

p.greet{

background-color: #000;

  • 赤字 セレクタ部分
  • 青字 プロパティ部分
  • 緑字 プロパティ値部分

これらに動きを付けるjavaScript

HTMLファイル内にjavaScriptを記述する場合は、Scriptタグを使い、通常、</body>終了タグの直前に書きます。

<body>

<script>

//_ここにprogramを記述します。

 </script>

</body>

</html>

javaScriptファイルに書く場合は、ファイルの拡張子を「js」にしScriptタグscrの属性に読み込むjavaScriptファイルを指定します。

<body>

<script_src=”js/app.js”></script>

</body>

</html>

</body>

一行のプログラム

世界でもっとも有名なプログラムに「Hello World」という文字列を表示するだけのプログラムがあるのをご存知の方も多いと思います。これを入力しながらjavaScriptでのプログラミングに欠かせないコンソールの使い方を実践してみます。

コンソール

  1. 画面向かって右上のGooglechromeの設定をCrickします。
  2. その他のツール
  3. デベロッパーツール

直接入力していきます。

>の後へconsole.log(‘Hello World’);と書きます。

Enterを押すと以下のようになります。

次に、let_name_prompt(‘名前を入力してください’);

alert(‘こんにちは’_+_name);

と入力します。そうすると、コマンドが開くので、名前を入力してください。

あいさつを返してくれます。

プログラムを書く時の注意点

  • コードを書く時は半角文字
  • アルファベットの大文字・小文字は区別する
  • 文の終わりには、;(セミコロン)をつける
  • 見やすくするためにスペースやタブ文字、改行文字を入れる

エラーになりやすいポイント

  • ファイル名やプログラムノスベルミス
  • 全角文字を使っている
  • 「:」「;」や「.」「。」などの記号ミス

エラーが起きても場所を番号で確認できる

エラーが起きると、エラーが検出された行番号とその内容をコンソールで確認できます。

赤枠の部分をみると、CSSの1行目にエラーがあるということになります。

javaScriptを学んでみよう

javaScriptは、WEBページ制作にかかわる必須の知識です。

はじめてプログラミングを学ぶ人は、「プログラミング言語をどれにすれば良いのかわからない!」ことが多いと思いますが、はじめるならjavaScriptをおすすめします。javaScriptから覚えていき、慣れてきたら目的に応じて他の必要な言語を学んでいくと、覚えやすいでしょう。

まずは、「プログラミングとは何なのか?」ということを学んでみてはいかがでしょうか?

コメント