求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

JavaScript

Javascript演習問題

Javascript演習問題 入力された値が5の倍数かどうかを判別する記述をボタンを押したときに表示させなさい。 1〜100までの合計を、DOMの記述を使ってボタンを押したときに表示させなさい。

DOMでのオブジェクトの使い方

Windowオブジェクト Windowオブジェクトは、ブラウザーが持っている情報をそのまま持っています。ブラウザーの様々な情報を確認・取得する事が出来ます。 早速確認してみましょう。 <script> console.log(window); </script> documentオブジェクト documentオブジェクトとは、…

DOM (ドキュメント・オブジェクト・モデル)

Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。簡単に言い換えるとhtmlの各要素、たとえば「p」とか「img」といった要素に直接アクセス…

連想配列とは

連想配列とは、数値の代わりに意味のある文字列などをインデックスにすることで、各要素を識別しやすくすることができます。 連想配列の場合、インデックスのことを「キー」と呼びます。 <script> var favorites = { food : 'カレー', color : '青', number : 7 }; </script> …

Dateオブジェクトで時間の取得

「 new Date()」を使う事で、現在の時間を取得することが出来ます。 <script> var date = new Date(); document.write(date); </script>実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。 このままでは使いづらいので「 new …

配列の使い方

配列とは複数の値を入れる事が出来る箱の事です。 今まで使っていた変数は1つにつき、1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまう、という特徴がありましたが、配列を使う事で同時に複数の値を収納出来るようになります。 配列の使…

for文を使った演習

以下の表をfor文を使って作成しましょう。 さらに 「1ドル=103.124678 円」換算の場合に取得した値を「Math.floor」などを使って整数に丸めてみましょう。 ※注意 JavaScriptでは少数を扱う計算を行う時、気を付けなければいけない点があります。 blog.asial…

Math.randomの使い方

JavaScriptで乱数を取得したい場合には「random関数」を使います。 覚えるメソッド Math.random Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.round()は、小数点…

for文の多重ループ

一つのfor文(ループ)の中に、さらにfor文を入れることができます。 もちろん入れ子の深さを二重、三重、...と深くしていくことも可能です。 これらをまとめて多重ループと呼びます。 ここでは、for文による二重ループを使って、九九の表を表示するプログラ…

関数の使い方

一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます。 手間のかかる処理を関数として定義しておけば、必要なときに必要なだけ何度も呼び出すことができます。関数は、function文を使って定義する。 定義した関数を実行するときは、関数名…

for文の使い方

for文もwhile文と同じ繰り返し(ループ)処理ですが、記述方法が変わるので、違いをしっかりと覚えましょう。 for ( 変数iの初期値 ; 繰り返し条件 ; 変数の変更 ) { 処理の結果 } 記述例 <script> for (var i = 1 ; i <= 00 ; i++) { console.log( i ); } /* for (</script>…

while文の使い方

while文とは繰り返し(ループ)処理です。この繰り返し処理はプログラムでもっとも使われる処理の1つなので、しっかりと理解しましょう。 JavaScriptでは繰り返し処理には「for文」と今回の「while文」の大きく分けて2つの構文があります。 「while文」 条…

switch文の使い方

「switch文」とはif文と少し似ていて、同じように分岐処理を行う物ですが、if文の場合、AルートもしくはBルート、というように二者択一を続ける分岐に対し、今回の「switch文」は同時に多数の分岐処理を行うことが出来ます。 switch (式or変数) { case 値1 :…

JavaScript確認テスト

d.hatena.ne.jp

if文を使った条件分岐

if文を使うことで、プログラムの結果を分岐する事が出来ます。例えば 値が〇〇以上であれば、Aルート値が〇〇以下であれば、Bルートというように、ある条件をもとにルートが分岐する事を条件分岐といいます。 if文の書き方 if (条件) { 条件が真であれば実行…

onClickによる画像置換

今回はサムネイルをクリックしたら「mainImage」の画像のパスが変わる、という動きです。前回の画像置換は自分自身に対して命令したかったので「this」を使いましたが、今回は「mainImage」に対して命令をします。 index.html <html lang="ja"> <meta charset="utf-8"> <title>Javascriptによる画像置換2</title> <link href="reset.css" rel="stylesheet"></link></meta></html>…

JavaScriptでの四則演算

JavaScriptには色々な演算子がありますが、まずは基本となる加算 (+)、減算 (-)、乗算 (*)、除算 (/) の四則演算をしっかり覚えましょう。 足し算 var a = 10 + 20; document.write(a) 引き算 var a = 10 - 5; document.write(a) 掛け算 var a = 5*4; docume…

変数の使い方

JavaScriptでまず覚える事は変数の使い方です。変数とは値を入れておくことができる箱のようなものです。 処理結果などの値を変数に格納したり、それをまた別の処理へ引き渡したりすることができます。 変数宣言 変数を使用する上で、まず行うのが変数宣言で…

オブジェクト指向とは

オブジェクト指向 JavaScriptもオブジェクト指向の流れを汲む言語です。 本格的なオブジェクト指向言語ではなく、基本的な概念のみを取り入れて、扱いやすくした「簡易的なオブジェクト指向言語」と言われています。 専門用語とオブジェクト指向の考え方を知…

JavaScriptの基礎

JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当…