遊べるJavaScript入門レベル

JavaScriptを勉強し始めたけれど難しくて…という方や理屈よりも実践で楽しむ入門レベルのJavaScript記事です。 

私は、HPのサイドメニューに占いやクイズのようなものを入れたいという目的で勉強し始めたので、Javascript全般を理解することは考えていないのですが、このHPのものであれば難しい規則などを理解しなくても動きますし、使うメソッドは数個でいけそうですから、ぜひ参考にして難しく考えないでJavascriptを始めてみてください。

このページは、Javascriptを始めるときの「本選び」について書いています。

記事の一覧です 【目次】

・ わからないことが次々でてくる
・ イベントハンドラーを知ればかなり遊べる
・ イベントハンドラとイベントリスナーの使用例
・ 画像クリックすると別窓に説明文がでる
・ ボタンに対応した画像を表示する
・ ボタンを押すと画像と説明文を表示する
・ 小さな画像をクリックすると大きな画像が表示
・ セレクトボタンでえらんだ画像を表示
・ 順番にヒントを表示しその後に答えを表示する
・ ヒントと答えボタンを作り、答えが出るとボタンを消す
・ 写真を表示後少し遅れていくつかの文章を表示する
・ ランダムな数字を使う場面に
・ 2つのサイコロを振って合計で判定する
・ 配列の内容を選択してtextareaに表示する
・ ボタンを押して漢字の問題と答えを表示する
・ 続きPart2 問題を出題して一定時間後に答えを表示する

新しい記事ができれば上に追加していきます。

 

本を読むだけでは難解すぎる Javascript

Javascriptで挫折する人が多い… としばしばWEBや書籍に書かれています。

その理由をChatGPTで調べると、①他のプログラム言語にない概念が多く含まれる ②一連のシステムが大規模で、ライブラリーやフレームワークの選択肢も多い ③動的な言語で型エラーの発生が多い ④更新が多くて新旧の内容が混在して戸惑う …… とありました。 

私の場合は、本格的に学ぶつもりはなかったので、「きっと入門者用の本を読めばわかるだろう…」 と一冊目のJavaScriptの絵本を読んだのですが、全くの見込み違いで、頭に入ってくれません。 

そこでさらにいろんな本を購入したところが、かえってわからなくなりました。 JavaScriptの本の多読はしてはいけないし、じっくり最初の1冊を選ぶのは大事ですから、「最初の本選び」について私の経験を少し紹介します。

読んだ本の数々 これまでに購入した本

これだけ読むと、まず、著者(本)によって、書き方やポイントの置き方(JavaScriptに対する目標)が違っていることに気づきました。

専門家を目指すための入門書のように、全般を紹介するものから、HTMLやCSSとの関わりなどから説明するものなど様々です。

そして、最も戸惑ったのは、著者によって変数の名前の付け方がかなり違っていることで、「自由さがかえってわかりにくくしている」ということを感じました。

なかでも、ローマ字で書かれている「変数、関数、命令語」の区別がつきにくいので、初心者はいろいろな本を読むと戸惑うと思いますので、その点もチェックするのがいいでしょう。 ともかく、やみくもに色んな本をたくさん読むのは要注意です。

そして「新しいこと」は重要です。

毎年のようにJavascriptは規格が追加変更されているので、概ね5年以上前のものは避けるのが良さそうです。(内容が更新されておれば問題ないでしょう)

ともかく感じたのは、JavaScriptの用途や応用範囲が広大なために、全くの初心者から、大きなプログラムでHPを操作できるようになるのは、独学では無理っぽいということです。

専門家を目指す方や大きなプログラム作成をイメージしている方は、費用はかかっても、スクールなどで系統的に学ぶことを考えたほうがいいと感じています。

そんな、入門者はとっつきにくいJavascriptですが、私のような小さな目的目標のための勉強であれば、そんなに深刻に考える必要はありません。

つまり、わからなくても、本に書いてあることをマネして、自分用に少しずつアレンジしていけばどうにかなりますし、少ない出費の段階で「や~めた」と放棄しても被害は少ないでしょう。

そのためには、「自分はどんなことをしたいのか」を意識して、それから本選びをするのがいいでしょう。

この記事を読んでいただく方の中には、WEBを利用すればいい… と思う人も多いと思いますが、いつも手に取れる書籍は役に立ちますから、それに加えてWEB記事を参考にされるのがいいと思います。

結局、私の場合は、下で紹介する2冊の本を改めて買い足して、それで約1.5ヶ月間読んで演習した後に、もう一度、本にある使えそうな項目を抜書きして、自分なりに整理をして、このHP記事を書き始めたのですが、「自分で書いていく」という動作が理解を高めますし、何よりも、自分で書いたものがうまく動いてくれると楽しくなりますから、2ヶ月ぐらいは我慢するつもりで始めていただくのがいいと思います。

最初は全くわからないと思いますが、自分にあった本を選んで演習しながら進んでみることをぜひやってみてください。 

PR

ワークブックが私の理解を助けてくれた

本の作者さんからすると、Javascriptが広範囲なので、入門者にわかりやすいように書くのにかなり苦労されていると思うのですが、読む側にすると、本が変わると、書き方や視点が違っているのは困ったことです。

「入門用」だといっても、JavaScriptを理解しようとすれば、HTMLやCSSが関係していますし、読む人のレベルや能力でその本の評価が変わるのですが、私のように、全くの1から始める人には「入門・初心者用」でも、ほとんどの入門書はきつすぎたようです。

結局、初歩の前に戻ろうと思って本を選び直したのですが、私に一番役に立ったのは下の2冊で、さらに言えば、写真左の「ワークブック」が最も役に立っていますから、選択に困った初心者の方は、一度中身を確認してみてください。

下右の1冊は、初歩の初歩用に「基本」から学び直そうとおもって購入したもので、命令語や命令文をふりがな付きの日本語調で書かれています。 

ふりがな付きでコードを読んで、Javascriptがどんなものかの自分なりの感触をつかんで、その次に、実用的な例題の多い「ワークブック」を実習しながらこのHPを書きはじめていますから、完全初心者の方には「ふりがなプログラミング」は役立つはずです。

おすすめの2冊の本 一からやり直し用に購入した本

この「ふりがなプログラミング」は、2022年8月発刊のもので、最新のES2020バージョンの規格も念頭にして書かれていて、ひらがなで読み下しされると、英字アレルギーが和らぎますから、Javascriptがすこし身近に感じるようになるでしょう。(正直言って、これを読み終えても、プログラムを書くのは無理でしたが無駄ではありませんでした) 

1冊が200ページ強の本で、書いてある内容や範囲は限定的ですから、あくまでも超入門者限定です。 紹介されている命令語(メソッド)は10個程度です。

スラスラ読める JavaScriptふりがなプログラミング 増補改訂版 [ リブロワークス ]

価格:2178円
(2024/4/28 19:36時点)
感想(0件)


そして、何よりも、私にあっていたのは、下の「ワークブック」です。今は、この本に付箋がいっぱいついていて、いつも見るようにしています。

この本は、行数が少なくて実際に使えて役に立ちそうなプログラムがまとめられていて、説明も的確でわかりやすく、最小限のHTMLやCSSなどを含めた例題と回答がダウンロードできるようになっているので、HTML/CSSをよく知らない人でもわかって使える内容になっています。

使われている書式はES2015と最新ではないのですが、このES2015は現在も主流なので、Javascriptの実習用・理解用としては全く問題はないでしょう。

何よりも、価格も税別900円と安価です。書店でいろいろな本を30冊以上片っ端から立ち読ると、いい本も見つかるのですが、やはりこれが私に合っていますし、私のこのHPの内容の多くもこれを参考にしています。

 「JavaScriptはわからない」と感じている方は、ぜひ手にとって見てください。

JavaScriptワークブック第3版 ステップ30 (情報演習) [ 相澤裕介 ]

価格:990円
(2024/4/25 21:59時点)
感想(0件)

PR


私はHPビルダーとVisual Studio Codeを使用

この私のHPは「ホームページビルダー22(HPB22)」を使って書いています。 HPB22の良いところは、JavaScriptのエラーを表示してくれるところですが、HTML5でHPを書いているのですが、余分なタグが付くなど、完全でないところはいただけませんが、これがないとHPがかけませんので、このHPB22にお世話になっています。

さらに、Javascript部分はタイプの間違いが多いので、マイクロソフトの「VSコード」でJavascript部分を書くようにして、エラーがなかったらそれをHPビルダーにコピーする … というやり方をしています。(ここでは詳しい紹介や使い方は省きます)

ただし、「HPビルダー」も「VSコード」もスグレモノなのですが、残念ながら、動かない原因を特定してくれたり、プログラムを修正してくれませんから、ともかく、初心者のうちは試行錯誤して、エラーと戦わないといけない点はどうにもなりませんね。

VSコード画面の例 VSコードの画面


お断りその他

私のような入門者レベルでは動作が複雑なものや大きいものは作れませんし、完璧なプログラムも望めませんから、ともかく、イメージしたものが動作したらOK… ということで記事にしています。 使えるところがあれば、うまく利用してください。

ともかく「目的どおりに動けばOK」で記事を書いていますので、レイアウトや配色などの体裁などは考えていません。 これらの記事の内容は、折を見て、体裁を考えて作り直して、私のHPのサイドメニューに埋め込む予定です。

それもあって、動作トラブルの対応や質問には当面は対応できないことをご了承ください。

また、本文からコピーができませんので、コードのコピーが必要なら「ソースのコード表示」をさせてそこからコピーをしてください。



PR
(来歴)R6.4作成  R6.5月見直し。
PR

AmazonのJavascript本 送料無料


楽天ブックスは品揃え200万点以上!



目次はこちらから

電子工作の記事の目次へ