javascriptはじめました - 1限目 Hello, world! - （旧姓）タケルンバ卿日記避難所

毎日が日曜日であるワタクシがやっても仕方ないのですが、世間的には夏休みであり、夏休みの宿題というものがあるようです。そこで、ワタクシ、タケルンバもなにか夏休みの宿題的なものに取り組んでみるべく、例によって思いつきで動いてみることにしました。
で、早速、紀伊国屋書店に行き、買ってきたのがこの本。

10日でおぼえる JavaScript 入門教室新版

作者: 岡田克司
出版社/メーカー: 翔泳社
発売日: 2008/02/05
メディア: 大型本
購入: 1人クリック: 4回
この商品を含むブログ (8件) を見る

えへへ、プログラムやってみようかなって。javascript。
英語できない、数学できない。できるのは社会科目系だけという偏りまくった学力のせいで、とんと理系分野には縁がなく、英数字が並ぶプログラミングの領域なんてわかる由もないタケルンバではありますが、興味はあったのよね。一応、10年来サイトをやってきたし、htmlベタ打ちとかの時代も見てるし、ソースをいじったことがないわけではないし、本格的にやってみたいという気持ちはあった。
また、こうしてブログでいろいろやってみると、やりたいことを形にするために、プログラムができるって武器だなあと。選択肢を広げるのにいいなあと思っていたわけです。イメージを形にするための手段として有効なのでね。

「歌って踊れてコードも書ける」貴族

というわけで、いっちょ初めてみるかと。「歌って踊れてコードも書ける」貴族になろうかと思いまして、ええ。なんだかカッチョいいじゃん。
それに「偏差値30からの大学受験」ってのはあるけど、「御年30過ぎからのプログラミング」というのも乙かなあと。「プログラマー35歳定年説」って話を聞くけど、その定年に近い年齢になってはじめてみることで、逆につかめることもあるかもしれん。
……ま、実はそこまで大げさなことは考えてないんだけど（考えてねえのかよ！）、ま、とにもかくにもやってみようと。知らない分野なので、なにをやってもプラスにはなるんじゃなかろうか。そんな軽い気持ちで初めてみることにしました。

何故javascript？

あんまり意味はありません。だって、それすらわかってないレベルだもん、オレ（開き直り）。
ただ、わかってないレベルだからこそ、都合が良さそうだなあと感じたのがjavascript。ワタクシはこの手の仕事したことないし、いじったこともないので、必要なソフトだのツールとかをインストールしてみたいなことになると、もうそれだけで面倒くさい。「ああんもう！　ムキーッ！」となる可能性が高い。
その点、javascriptだと、そのあたりのツールがいらなそう。準備作業がなさそう。また、元々サイトを運営しとるので、手元に「ホームページビルダー」はある。これを使えば打ち込んだものをプレビューでどうなるかを確認しながらできるし、そのままアップロードしちゃえばそのまま設置ができるので、面倒がなさそうだなあと。結構こういうところって障害になるもので。テニスしたいのに、近いところにテニスコートがないと続かないでしょ。そういう感覚です。……詳しい人にとっては「なんじゃそりゃ！」って感覚なんだろうなあ。これがド素人のポテンシャルか……。

1限目 - Hello, world!

ま、とりあえずやってみよう。性癖はド変態だが、こういう勉強に関してはドノーマルである。ちゃんとテキストの順番通りに取り組んでみることにする。
最初は基本中の基本らしい「Hello, world!」を表示させるの巻。「レディスアンドジェントルメン。ウエルカムおとっつぁんおかっつぁん」である。トニー谷か。
とりあえず指示通り打ち込んでみるよ。コードデビュー。長年守り続けてきたプログラム処女が……。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lamg="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=urf-8"/>
<script type="text/javascript">
function hello() { //関数を定義
  alert("Hello, world!");
}
</script>
<title>Hello, world!"</title>
</head>

<body>
<h1>Hello, world!</h1>
<button onclick="hello();">ここをクリック</button>
</body>
</html>

おお、なんだかギークな人のブログみたい。まさかオレがこのはてな記法を使う日が来るとはねえ。

ソースコードを色付けして記述する（シンタックス・ハイライト） - はてなダイアリーのヘルプ

するってえとこうなるわけだ。

Hello, world!

おお、にゃるほど。
ということは、「ここをクリック」の文を変えれば、ボタンの文章が変わるってことだな。

<button onclick="hello();">押せ！俺の負けだ！</button>

押せ！俺の負けだ！

そしてページのタイトルもtitleの部分をいじれば変えられると。ううむ、なるほど。こういう構造になってたのか。
よし、さらにいじってみよう。bodyのところでページ本文、alertのところで、立ち上がるダイアログの文をいじれるみたいだ。

<script type="text/javascript">
function hello() { //関数を定義
  alert("決まり手は押し出し。押し出しで白鵬の勝ち。");
}
</script>
<title>白鵬対琴欧洲 - タケルンバ情報局</title>
</head>

<body>
<h1>白鵬 対 琴欧洲</h1>
<button onclick="hello();">はっけよい、のこった</button>
</body>
</html>

よりリアルな感じにしてみた。

白鵬対琴欧洲

へえ、なるほどねえ。今、やっとこういうダイアログの仕組みがわかった感じ。こうやってできてるのか。
ということは、こういうエロい使い道もあるわけだな。

あなたのことが、好きなの

これでボタンをオパーイ画像にして、音声をつければリアルになるわけだ。
あと、これはクリックでダイアログが出るようにしてるけど、ダブルクリックで表示することもできるらしい。

<button onclick="hello();">ここをクリック</button>

を、

<button ondblclick="hello();">ここをクリック</button>

にする。

あなたのことが、好きなの2

へえ。おもしろいもんだ。他にもキーが押されたりとか、マウスのポインタが動いたとか、こういう設定ができるんだって。「イベントハンドラ」って言うらしいよ。いろいろ機能があるもんだね。
1限目はこれにて終了。とりあえずこんな感じでゆるりとやってみます。壁にぶち当たるまでは独学で。なにせ本当にド素人なので、まだなにがなにやらって感じだし、わからんことがわからない状況なのでね。ま、楽しくやっていきますよ。楽しくないと続かないし、続ければいいことがあるのは、どんなことでも一緒だと思うので。
好きこそものの上手なれ。