プログラミング日記#11 JavaScriptとは
こんにちは！よっしーです。
今回はプログラミング学習11回目！いつものように学習を振り返ります。
今回の学習内容
ドットインストール「はじめてのJavaScript（全11回）」完了
HTML.CSSを使って、簡単なWebサイトは作れるようになったので、今日からJavaScriptの学習をはじめました。
今までのHTML.CSSはプログラミング言語というより、「マークアップ言語」という基礎の基礎部分でした。
JavaScriptは、ほとんどのWebサービスで使われているプログラミング言語で、汎用性が高いようです。
学習の振り返り JavaScriptとは
JavaScriptは、プログラミング言語の1種であり、HTML、CSSで作ったものに動作をくわえたり、簡単なゲームをつくることができます。
Webサイト制作におけるJavaScriptのよいところは、CSSだけでは表現しきれなかったところにまで手が届き、より”いい感じ”に仕上げられることでしょうか。
まだ、基礎部分にしか触れていないので詳しく説明できませんが…現状の認識としてはそんな感じです。
学習の振り返り② JavaScript基本の書き方
JavaScriptの書き方は、HTMLファイルに記述する方法と、JavaScript専用の外部ファイルに記述する方法があります。
今回ドットインストールで学習したのは、HTMLファイルに直接記述する方法だったので、今回はそちらをおさらいします。
HTMLファイルへの記述は、body内にscriptタグを作ってその中に書いていきます。
<body>
<script>
<!--ここにJavaScriptコードを書く--!>
</script>
</body>JavaScriptコードを書いてみよう
さて、どこに書くのかはわかったところで、次はどんなコードを書くの？という部分を振り返っていこうと思います。
今回の学習では、1つのボックスをクリックすることで色を変えるという機能をつくりました。
まず、body内にボックスの要素をつくります。class名はbox、id属性にtargetを指定しています。
それから、scriptタグの中に「ボックスがクリックされたら背景色を青に変えてね」という指定をしてあげます。
どうするかというと、
<script>
'use strict';
document.getElementById('target').addEventListener('click',() => {
/*documentの中の、targerというID名がついた要素をクリックしたときに*/
document.getElementById('target').style.background = 'blue'
/*targetID要素の背景色を青色に変える*/
})
</script>（コメントアウトしたのは、日本語訳です。）
こう書きます。…が、なにがなんだかわからないので、ひとつひとつおさらいします。
use strict...ブラウザ上でエラーを特定するための指定。これを指定するとディベロッパーツールでエラー内容が確認できる。
document...文書全体を指す意味として使われる。「document.〇〇」この場合は、「文書全体の中の〇〇を指定するよ」という意味。
getElementById(' ')...ID属性の要素を指定する。カッコ内にID名を入力する。
addEventListener(' ')...”要素に対してどんなアクションをした場合”の指定。今回はクリックした時に色を変えてほしいので、カッコ内に'click'を指定した。その他の指定方法はコチラの記事が参考になりそうです。
といった感じですね。addEventListenerのあとの、( ) => { }がややこしい…
{ }内に「クリックした後にどうなりますか」という指定をしてあげます。
頻繁に出てくる.(カンマ)は、日本語でいう「接続詞」として考えるとわかりやすいかも。
今回の背景色の指定なんかも、CSSになじんでるとややこしいなと思うのですが、style.（スタイルは）background = 'blue'（背景を青に変えてね）と、こんな感じで考えるとわかりやすいです。変な日本語ですけど。
まとめ
学習ないでは、もう少し進んでよりややこしくなったのですが、とりあえずこの記事ではここまでにしておきます。全部書くと長すぎるので。
はじめた所感としては、「難しいな…」といった印象。でも継続して勉強したら大丈夫かなと思います。
引き続き頑張るぞっ
それじゃ！
この記事が気に入ったらサポートをしてみませんか？