【やり直しJavascript】consoleとalert
仕事で毎日webサイトのコーディングやらデザインをしているのですが、その中でも完全に忘れてしまったのがJavascriptを使ってのプログラミング。
半年通ったスクールでは一応習ったんですが、実際に仕事ではJQueryというめちゃくちゃ便利なライブラリを使ってしまうことが多いので、やはり書かないと忘れますし、実際にゼロからJavascriptで書く実力が不足していると実感しています。
そのため、勝手に自分で基礎からのやり直しJavascriptを始めます。
スクールで購入して、卒業してからはタンスに眠っていたJavascriptの参考書を文字通り愚直に参考にしながら地道にやり直していき、制作にバンバン使えるようになっていくのが目的です。
そしてこのブログに逐一記録していきます。
本当の初心者レベルからはじめていきます。
ということで、まずはconsoleに書き始めるところから、、
Consoleにアウトプットする
consoleっていうブラウザの場所にプログラムをアウトプットしていきます。
ブラウザはgoogle Chromeを使う前提で話は進めていきます。が、firefoxでも、IEでもできるので、ググってみてください。
chromeだとF12押すか、ブラウザのどこかを右クリックして「検証」を押すと出てくる開発ツールのにconsoleはあります。
※この下の画像の赤丸のとこをクリックするとconsoleがでてきます。
このconsoleに色々プログラムを書いてアウトプットもできるのです。
console.log(); と書くと、「consoleに書く」という命令になります。
この()の中にいろいろ書きます。
テキストは’ '(シングルクォート)で囲います。
計算等、テキスト以外は何も囲わずにそのまま書きます。
そうすると、プログラムを書いたすぐ直下に結果がアウトプットされます。
ちなみにconsole.log(’10+5′);と書くと、10+5と表示されます。
‘ ‘は文字列として認識されてしまうのです。
もう少し話が進むと、これがconsole上ではなく、webページに反映することになっていきますので少々お待ち下さい。これは超基礎編です。
テキストを表示できて、計算もできればokです。
htmlファイルに書く
htmlファイルの<body>タグの閉じタグである</body>の直前に書くこともできます。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>template</title>
</head>
<body>
<script>
console.log('htmから書くよ');
</script>
</body>
</html>
テキストエディタにこう書いて、index.htmlという名前でとりあえず保存し、
ブラウザで確認してみましょう。
先程のconsoleにテキストが表示されているはずです。
そしてテキストエディタですが、私はBracketsを使っています。
他にもatomとか、sublime textとかありますが、スクールの先生がオススメしてくれたのでBracketsを使い続けています。無料のエディタですし、いいかなと。
ちなみにPCは、
MacBook Pro (Retina, 13-inch, Late 2013)
というやつです。
とまあ話を戻すと、このbodyの閉じタグ直前に書くこともできますが、
実際に仕事では外部jsファイルに書くことが多いです。
<script src="script.js"></script>
headでもbodyでもどこに書いてもその場で実行されるので、状況によって使い分けましょう。
src=の先はscript.jsのあるフォルダに合わせてパスを変えてくださいね。
alertでダイアログボックスを表示する
こんな調子で書いてたら時間かかってしかたないですね。書き始めて気付きました。
うまく端折って実用的な内容にしていきたいです。
次は、ダイアログボックスを表示させます。
それには、consoleではなくalertを使います。
window.alert(ここになにか書く);
というプログラムを書けば、上にダイアログボックス(というそうです)が勝手に一発出てきます。
これも書くのはhtmlファイルでもいいし、外部jsファイルに書いて読み込んでもいいです。
ここにも文字だけでなく、計算式も書けます。
これは何かボタンを押した時に確認のアラートとか、エラーをお知らせしたりする時に使えます。その場合は、ボタンを押した時に発動するようにプログラムを書きます。
それもこの先やっていきます。
まとめ
ということでやり直しJavascriptの第1回目でした。
タンスから引っ張り出してきた本に沿って自分用メモ＋世間話を加えたような投稿をしていく予定です。(あくまでも予定)
もっと先に進むと面白いと思うので、まだ我慢の状態ですね。
地道にやっていきましょう！