続!Javascriptの入門で役に立
以前、厳選!Javascriptの入門で役に立つ10サイト+1でJavascriptとは何なのか?など基本的な内容に触れました。
今回は中級編ということでもう少し実践的に役立つ情報をお届けします。
Javascriptデバッグ
デバッグとは、コンピュータのプログラムの誤り(=バグ)を見つけ、手直しをすること。デバッギング。虫取り。
とのこと。せっかく書いたコードをブラウザで確認しても、「あれ?なんで動作しないの?」となった場合の原因点を突き止めることです。
特にJavascriptに関しては似たような記号を使うことが多く、半角スペースと全角スペースを間違うだけでも正しく動作しなくなってしまうのでデバッグ方法を知っておくのは有効でしょう。
JavascriptのChromeでのデバッグ方法個人的まとめ2016
このページで一番最初に紹介されているchromeの機能ですが実際に試してみるとこうなります。
※このコードはドットインストールで無料で受講できるJavascript講座で紹介されたものを基に記述したものです。
<meta charset="utf-8">
<title>Javascript Practice</title>
<style>
.box {
width: 100px;
height: 100px;
background: skyblue;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="target">
<script>
'use strict';
document.getElementById('target').addEventlistner('click', () => {
document.getElementByID('target').style.background = 'pink';
});
</script>
</div>
</body>
</html>
このコードは正しく動作すれば、ブラウザに表示された水色の正方形がクリックするとピンク色に変わるというものです。しかし、クリックしても色が変わりません。
そこでDeveloper Toolsを起動→Consoleタブで確認するとこのようなエラー表示がでました。
このエラーメッセージによると、index.htmlファイルの22行目に問題があるようです。そこで怪しそうな”document.getElementByID”を検索してみると実はdocument.getElementByIDではなくdocument.getElementByIdだったことがわかりました!
コードを修正すると正しく動作するようになりました。
たった一文字、大文字と小文字を間違えただけでも動作しなくなるとは…。Javascriptにとってデバッグ方法を知っておくことは有効であることがお分かりいただけたでしょうか。
JavascriptでできるUI 4選
UI(ユーザーインターフェイス=ユーザーにとって使い勝手の良いもの)としてJavascriptで色々な機能が使われていることは前回のブログでもお伝えしました。
今回はその実装方法を学べるサイトをご紹介します。
まずは無料で14講座から始めましょう!
募集人数には制限があります。サインアップはお早めに。
4月21日まで