@bigakubu アートとプログラミングがあればいい。

【JavaScript ハノン】必修パターン①

とりあえずHTML(pタグだけ)

See the Pen 最初のHTML by programmingbird (@programmingbird) on CodePen.

javascriptは基本的にブラウザ上(のウェブサイトの中)で動かすプログラミング言語なので、まずはHTMLを書いてみる。といっても最小限。「段落(paragraph)」を意味するpタグ(<p>〜</p>)のみ。pタグの中にはあたりさわりのないテキスト「テストです。」と書いておいた。このpタグを後でjavascriptで特定して使いたいので、何かしらidを振っておく。何でも良いがとりあえずtestとしておこう。(id=”test”の部分)

実行結果はもちろん「テストです。」と表示されるだけ。

pタグの中身を書き換える

See the Pen getElementById by programmingbird (@programmingbird) on CodePen.

先ほどtestというidを振ったpタグをjavascriptで特定する。それがdocument.getElementById(‘test’)の部分まで。documentはざっくり言うと「このウェブページ全体」みたいなこと。その次のドット(.)はjavascriptでは超重要なやつで、日本語でいう「の」とか「で」とかにあたる。getElementById()は英語の通りで「idによって要素を取得する」という意味。要素というのはHTMLのタグのこと。カッコの中に取得したいidを書く。なので、ここまでで「このウェブページ全体でidがtestになっている要素」を手にしている状態。

さらにドットでつないでinnerHTMLとなっている。innnerHTMLは「中身」という意味。まとめると「手にしているtest(というidのpタグ)の中身」となる。これはつまり「テストです。」というテキストを指し示している。

そしてコードはまだ続き、=’Hello Wordl!’ とある。イコール(=)はjavascriptでは「同じ」という意味ではなく、「左にあるものに右にあるものを代入する(置き換える)」という意味。つまり、pタグの中身をHello World! に置き換えている。

実行すると、HTMLには「テストです。」と書いてあるはずなのに、画面にはHello World!と表示されている。javascriptが正しく動いて、HTMLを後から書き換えるという作業が成功したのだ。

以降、しばらくの間、javascriptの実行結果を画面に表示する方法として、このやり方を使うことにする。

☆.getElementById(‘○’)
☆の中から、○というidがつけられている要素を取得

☆.innerHTML
☆という要素の中身を取得ip

let で変数を使う

See the Pen getElementById by programmingbird (@programmingbird) on CodePen.

やっていることはさっきと同じ。冒頭のlet test=document.getElementById(‘test’) に注目。letは変数を用意する命令。変数というのは、中に色々なものを入れておける容れ物。ここではtestという変数を用意し、その中身としてdocument.getElementById(‘test’)を入れておけ、という命令になってるわけ。こうしておくと、以降のコードでtestという変数が出てきたときはそれだけでdocument.getElementById(‘test’)つまり、testというidがつけられている要素(この場合はpタグでしたね)を指定したことになる。たった4文字書いただけで!

コード中で、同じ要素を何度も書き換えたりする場合を想像すれば、変数に入れておくことがいかに便利でコードも読みやすくなるということがわかってもらえると思う。

let ☆ = ○
☆という変数を用意し、○という値を入れる

変数と変数の計算をする

See the Pen let—getElementById by programmingbird (@programmingbird) on CodePen.

まずはlet a=2とlet b=3に注目。むしろletの最初に習う使い方はこういう感じ。aという変数を用意して2をセット、bには3を。で、何をしているか。test(pタグを指してるやつ)のinnerHTML(中身)にa*bを入れている。画面に「a*b」と表示されるのか?と思いきや、表示されているのは6。わかりますよね。*はjavascriptでは「かけ算」の記号(演算子といいます)。つまりa*bは変数aの値とbの値をかけ算した答え、という意味なのです。主要な演算子について、記号と意味を以下にまとめる。1〜4はいわゆる四則演算。かけ算とわり算の記号がいつもと違うなくらいで普通。5,6は見かけない感じだが意外とよく使うので覚えておく。7,8はコードを短く書くためにとても有用。以上を、サンプルコードの*の部分を置き換えたり、a,bの値を変えたりしながら、よく練習しておこう。

演算子意味(参考)a=7,b=2の場合の計算結果
1+加算(たし算)a+b の結果は 9
2減算(ひき算)a-b の結果は 5
3*乗算(かけ算)a*b の結果は 14
4/除算(わり算)a/b の結果は 3.5
5%剰余(あまり)a%b の結果は 1 (7÷2=3あまり1)
6**累乗a**b の結果は 49 (7の2乗、7×7)
7++インクリメント
(1増やす)
a++ の結果は 8
8デクリメント
(1減らす)
a– の結果は 6

変数と文字列をつなぐ

See the Pen let—getElementById by programmingbird (@programmingbird) on CodePen.

a+”と”+b+”をかけると”+a*b+”です。” の部分に注目。ところどころに入っている+記号は、数字のたし算だけでなく、変数と文字列をつなぎ合わせることができる。文字列はダブルクォーテーション(“)で囲む。コードと実行結果をよく見比べて変数と文字列がどのように対応しているか確認してください。



Google Ad

Google Ad

Recommend

【プログラミング教材#01】まず「ほぼ完成版」で遊んでみよう!

今日のレッスンの前半は、なんとゲームで遊ぶこと!簡単操作だけどなかなか難しいこのゲームで何点とれるか?競い合ってみましょう。レッスン後半では、JSFiddleというプログラミング練習画面を使って、さっ …

プログラミング教材・指導案

【プログラミング教材#05】土管の高さをランダムにしよう

前回の教材でゲームの重要な要素である土管を次々と表示し動かすことができました。今回は土管一つ一つの高さをランダムに変化させることにより、ゲームにバリエーションを持たせてみましょう。ランダム性はプログラ …

プログラミング教材・指導案

【プログラミング教材#02】トリを落下させよう

前回はゲームで遊んだあと(笑)コードを書いてトリを表示させるところまでやってみました。ついでに「座標」の数字を変えるとトリの位置を変えられることも学びました。今回はこのゲームのポイントでもある「放って …

プログラミング教材・指導案

【序文】ゲーム作りは実用的スキルとプログラミング的思考を身につける絶好の教材!

プログラミングなんて自分もやったことないのに、児童生徒たちに教えなくてはいけなくなった。そんな先生へ提案です。プログラミング言語javascriptを使ってゲーム「Flappy Bird」を作ることを授業のテーマにしましょう。ゲームプログラミングは実用的なスキルとプログラミング的思考を身につける絶好の題材です。いきなりゲーム作りなんて難しそう、と思うかもしれません。確かに簡単ではないですが、このサイトでは「教える人」の視点に立った詳しい解説や教材・教案準備に応用しやすいテキストや画像、そしてプログラムのサンプル素材を多く提供しますので安心して始めてみてください。

プログラミング教材・指導案

【プログラミング教材#06】背景表示と衝突判定をしよう

いよいよ完成間近です。今回は背景画像の表示をしたあと、ゲームの重要な要素である衝突判定を実装します。トリが土管や地面にぶつかったらゲームオーバー!その判定をコードでどう表現すればよいのか、じっくり考え …

プログラミング教材・指導案