今回はJavascriptとCSSの基本に触れたい思います。
javascriptの基本要素
javascriptブラウザ上で動作するプログラミング言語
基本的な構文
javascriptの主な要素は関数、変数、if文、for文です。今回はこの4つを身につけましょう。
関数一連の動作をまとめて定義したもの(functionで定義できる)
変数let,const,varを用いて定義する。中に数字や文字列を代入(?)することができる。
配列という[1,2,3]など複数要素入れることができるものもある。
※let,const,varは若干用法が異なる
let再代入は可能だが、再宣言ができない
const再代入、再宣言ともに不可
var再代入、再宣言ともに可
ifif(条件)の形で書く。条件を満たしていたらif文の中のコードが読まれる。
if(条件){
//成功時の処理
}
for特定の動作を繰り返し行いたいときに使われる。
for (初期値; 条件; 増減) {
// 繰り返し実行される処理
}
例えば初期値(i=0)、条件(i<=5)、増減(i++)とすると5回繰り返される。(++は値を1足す)
実際に使用してみよう
説明しただけではわからないと思うので、実際のコードを用いて説明しましょう。
新しいhtmlファイルを作り、以下のコードを貼り付けよう。
<html>
<head>
<title>日記➁</title>
</head>
<body>
<input type="button" id="button" value="ボタン" onClick="onClick()">
<script>
function onClick(){
let hensu = 5;
let answer = 0;
for (i=1; i<=10; i++){
answer ++;
if (hensu == answer){
console.log(`一致しました:${i}回目`)
}
else {
console.log(`一致しませんでした。:${i}回目`)
}
}
}
</script>
</body>
</html>
このコードを書いたhtmlファイルをブラウザで開いてください。
f12を押すと右にコンソールが表示されます。
表示させてからボタンを押すとこのような画面になるはずです。
なっていたら成功ですね。
解説
<input type="button" id="button" value="ボタン" onClick="onClick()">
この部分、htmlの要素です。onClick="関数名"とすることでその関数を呼び出せます。
つまり今回はonClick()という関数を呼び出してます。
つぎに<script>タグの中を見てみましょう。
function onClick()
functionを用いてonClick()という関数を定義します。
つまりさっきのボタンが押されたら呼び出される関数を定義するわけです。
次に関数の中身を見ていきましょう。
let hensu = 5;
let answer = 0;
この部分では2つの変数を宣言しています。hensuを5、answerを0と宣言しているわけです。
次にこの部分をまとめて解説します。
for (i=1; i<=10; i++){
answer ++;
if (hensu == answer){
console.log(`一致しました:${i}回目`)
}
else {
console.log(`一致しませんでした。:${i}回目`)
}
}
for(i=1; i<=10; i++)
初期値(i=1)、条件(i<=10)、増減(i++)としていますね。
つまりiを最初に1と宣言して中のコードを実行するたびにiの値を1足します。
1回目はi=1、2回目はi=2...となるわけです。
それで条件がi<=10、つまりiが10以下なので、10回コードが実行されます。
answer ++;の部分
answerに1を足します。つまりfor文が実行されるたび1ずつ増えます。
最初にanswerを0と宣言しているので1回目は1、2回目は2...という感じですね。
if (hensu == answer){
console.log(`一致しました:${i}回目`)
}
else {
console.log(`一致しませんでした。:${i}回目`)
}
まず、if文の条件から見ていきましょう。hensu == answer
つまりhensuとanswerが一致したら...っていう条件ですよね。
最初にhensu=5と宣言していて、answerはi回目のiと等しくなる。
つまり5回目に一致しますね。consoleを見てみると実際に5回目で一致していることが分かります。
elseこれはif文でこれより上がすべて条件を満たしていなかった場合に実行されます。
今回の場合は一回目のhensu==answerが満たされていなかったらelseの方が読まれます。
console.logこれはかなり便利です。f12で表示させることができるconsoleにログを表示させることができます。この中身にはhensuを含むこともできるので、目には見えない変数が今どんな挙動をしているのかを視覚化することができます。
今回の場合はconsole.log(`一致しました:${i}回目`)ですね。`←でくくった中に${}とかくと、この中の変数が読まれます。つまり変数iの値を読み取っています。
CSSの使い方
javascriptの基本はおさえたと思うので、今度はCSSを使ってみましょう。
CSSとは主にブラウザの装飾のためのものです。
さっきのブラウザのボタンの見た目を変えてみましょう。
その前にCSSをhtmlに読み込ませる方法は主に2つあります。
<link>を使用して外部のCSSファイルを読み込む
<style>を使用して直接中に書き込む
CSSもjavascript同様、外部ファイルの方が見やすいのですが、今回は中に直書きします。
<style>は<head>の中に書くため、さっきのコードをこうしましょう。
<html>
<head>
<title>日記➁</title>
<style>
.button {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<input type="button" id="button" value="ボタン" onClick="onClick()" class="button">
<script>
function onClick(){
let hensu = 5;
let answer = 0;
for (i=1; i<=10 ; i++){
answer ++;
if (hensu == answer){
console.log(`一致しました:${i}回目`)
}
else {
console.log(`一致しませんでした。:${i}回目`)
}
}
}
</script>
</body>
</html>
これでhtmlファイルを開いてみるとボタンが緑の正方形になったと思います。
解説
<input type="button" id="button" value="ボタン" onClick="onClick()" class="button">
htmlのこの中のclass="button"という箇所がCSSで定義した部分です。
<style>
.button {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
</style>
ここではボタンの見た目を定義しています。
widthボタンの幅(今回は100px)、heightボタンの高さ(今回は100px)
background-colorボタンの主な色、color文字の色
borderボタンの周りの線に関するもの(noneにすると消える)
fonct-size文字の大きさ(今回は16px)
cursorボタンにカーソルを合わせたとき(pointerにするとカーソルが変わる)
displayとaligan-itemsは省きます
justify-contentボタン内の要素を揃える(centerにすると要素が真ん中に揃う)
今回の場合はボタン内のテキストが揃います。
最後に
javascriptとcssについて理解できたでしょうか。
どちらもできることはまだまだたくさんあるのですが、とりあえず基礎はわかったかなと思います。
次回はhtml,javascript,cssの3つを合わせて、何かを作ってみたいと思います。
それではまた次回!