はじめてのJS 1
はじめてのJS 1
#01 JavaScriptを使ってみよう
JavaScript とはプログラミング言語で、
動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語です。
JavaScript を使うといろいろなことができますが、よくあるのは HTML や CSS で作られたページの中の要素を操作するといった使い方ですね。
たとえば、ユーザーが画像をクリックしたら、詳細ウィンドウをサッと表示するといった動きを作ることができます。
他にも、3択クイズを作ったり、数字をタッチしていくゲームや、もしくはピンポンゲームのようなものを作っていくことができます。
では学習を進めていきたいのですが、今回ブラウザは Chrome 、エディタは VS Code を使っていきます。
#02 ひな形となるファイルを作ろう
さて、さっそく VS Code でコードを書いていきましょう。
今回のレッスンでは HTML/CSS の知識を前提としているので、もしわからないところがあったら、新たに更新予定ですので、レッスンを参考にしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript Practice</title>
<style>
.box {
width: 100px;
height: 100px;
background: skyblue;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
文書宣言をして html 要素を書いてあげて、その中に head 要素と body 要素を配置してあげましょう。
head 要素のほうですが、文字コードの設定とタイトルの設定をしてあげます。
文字コードは meta タグで <meta charset="utf-8"> と設定してあげましょう。
body のほうですが、とりあえず div をひとつ配置してあげて、あとで JavaScript で操作していきましょう。
それから、わかりやすくスタイルを付けてあげたいので class 属性を付けてあげます。では、クラス名は box としてあげましょう。
box クラスに対してスタイルを付けていきたいので、今回は style タグの中に書いてあげます。
box クラスの要素に対して width: 100px; height: 100px; background: skyblue; 、そしてあとでクリックしたときの動作を付けるので、クリックできることがわかりやすいように cursor: pointer; としてあげましょう。
ではブラウザのほうで確認していきます。
こうですね、 div がこのように表示されたのがわかります。
では、ここまでうまくいったので続きは次回にしていきましょう。
