今回は、外部ファイルの読み込みと操作、GETメソッドを使ったファイルの扱い方を中心に紹介していきます。APIを使ったWebアプリケーションをつくる際に必要になってくるJSON形式について覚えましょう！！ 以下のファイルを用意してください。 sample.html <h2>lo</h2>…

前回に引き続き、jQueryで記述する「属性の操作とイベント処理」について書きます。今回は、クリックするとメニューが表示・非表示されるなどのアニメーション効果を中心に紹介していきます。 以下のHTMLとCSSを用意してください。 <ul id="hover"> <li>リスト１</li> <li>リスト２</li> <li>リス</li></ul>…

クラスの追加と削除 まずはじめに、以下のHTMLとCSSファイルを用意します。 HTMLファイルには、タグで囲まれた要素にidとclassを割り当てます。 例題３：クリックしたらh1タグの中身を表示する <h1>jQueryを動かしてみよう！！</h1> 例題１：クラスの追加と削除 <p id="cls1">クラ</p>…

Mathオブジェクト 高度な計算を行うには、Mathオブジェクトを使います。 Mathオブジェクトの主なプロパティとメソッドには、次のようなものがあります。 働き使い方計算結果 プロパティ PI円周率a = math.PI;約3.141592653.... メソッド abs( )絶対値a = Mat…

ファイルを準備しよう！！ jQueryはJavaScriptファイル（拡張子.js）に記述します。前回勉強したJavaScriptの関数化を使い、外部ファイルに記述し操作していきます。 以下のHTMLを用意します。 jquery.html

jQueryとは jQueryは、JavaScriptのライブラリーの一つです。ライブラリーにはjQuery以外にもいろいろなものが存在します。 jQueryの特徴 jQueryでは、さまざまな処理をシンプルに記述できるようするための工夫がされています。１つのリスト記述で様々なWeb…

Stringオブジェクト 文字列を扱うStringオブジェクトは、次のように作成できます。 オブジェクト名 = String("文字列"); lengthプロパティを使うと、文字列の長さを取得できます。 str = String(文字列); len = str.length; /* 結果： len = 4 */ 文字列から…

前回の配列の基本を復習します。 //配列の基本型 配列名 = array[要素１,要素２,要素３]; arrayオブジェクトを使わずに次のように書くこともできます。 a = [1,2,3]; 空のarrayオブジェクトを作成し、後から要素を代入することもできます。 a = array( ); //…

じゃんけんプログラム ボタンをクリックすると、じゃんけんをするプログラムを作成してみます。 「judgment.js」にじゃんけんの勝敗を判定するJavaScriptを記述します。 ＜対戦条件＞ 対戦相手はコンピューターです。 じゃんけんの出し手は、「グー」、「チ…

関数の定義 関数を独自に作るには、次のように定義します。 function 関数(仮引数){ //仮引数：関数のなかでは実引数で指定した値になります -- 関数化したいものを記述します -- } 関数（実引数） //実引数：関数を呼び出すときに使います 関数の呼び出し …

配列の考え方 JavaScriptのオブジェクトには、あらかじめ用意された一般的なオブジェクトがあります。 一般的なオブジェクトとは、JavaScriptに組み込まれたブラウザとは関係ない機能をまとめたもので組み込みオブジェクトとも呼ばれます。 Arrayオブジェク…

switch文 switch文は、複数のcaseという選択肢から式の値に合うものを選択して処理を実行します。 式の値がどれにも当てはまらない場合はdefaultに進みます。 各選択肢の最後にはbreak文を記述し、選択した処理のみを行うようにします。 switch(式){ case 値…

while文 ある条件が成り立っている間だけ、処理を繰り返し実行する制御文です。 for文との違いは、カウンタにあたるものがないことです。 主に繰り返す回数が分からないときに使います。 do〜while文 while文と同じように繰り返しを行う制御文です。 while文…

繰り返し処理をする制御文（for文） for文は、繰り返し処理を効率よく行う制御文です。 for文は以下のように記述します。 for(事前処理；繰り返し処理；事後処理){ 処理１; } //事前処理：カウンターの初期値を設定します //繰り返し処理：繰り返しを続ける…

異なる型の連結 文字列と数値を「＋」で連結すると、数値は文字列に変換されます。 [文字列（string）] + [数値型（number）] = [文字列（string）] a = "アタック"; //文字列を代入 b = 25; //数値を代入 c = a + b; //c="アタック25" 数値と論理値を「＋」…

条件分岐をつくる制御文（if文、if〜else if〜else文） プログラミングをする上でよく使われる制御文について説明します。 制御文は、プログラミングの流れを必要に応じて変えたいときに使います。 if文は「もし〜だったら・・・する」という、条件分岐をつ…

論理演算子 論理演算子を使うと、より複雑な条件を表すことができます。 演算子働き使い方意味 &&かつ(10 aは10以上かつ50未満 ||または(a == 10) || (a == 50)aは10または50 !〜ではない!(a == 10)aは10ではない 条件つき実行 条件式と処理を論理演算子でつ…

比較演算子 JavaScriptでは変数の値や数値を比較して、条件式を作ります。 その結果によって処理を変えることができます。 このとき使う演算子を比較演算子といいます。 条件が成立した場合を「真（true）」、成立してない場合を「偽（false）」といいます。…

算術演算子 計算に用いる「＋」や「ー」などのことを、算術演算子といいます。 演算子働き使い方結果 +（プラス）+（足す）a = 5 + 510 -（マイナス）-（引く）a = 5 - 50 *（アスタリスク）×（かける）a = 5 * 525 /（スラッシュ）÷（割る）a = 5 / 51 %（…

文字列型 文字がはいる変数の型を文字列型といいます。 「”（ダブルクオテーション）」または「’（シングルクオーテーション）」で挟みます。 typeof演算子では「string」で表されます。 a="Hello,World!!"; b='a'; 数値型 整数や小数などの数値がはいる変数…

変数とは 数字や文字などのデータを格納しておく箱を変数といいます。（a=2;の「a」の部分） 箱に格納されたデータの性質によって数字や文字列などいくつかの種類に分類されます。 この性質のことを型といいます。 型の種類には、整数や小数の値をもつ数値型…

イベントハンドラ フォームのボタンをクリックするなど特定のイベントが発生した時に処理を実行する仕組みをイベントハンドラといいます。 フォームボタンなどがクリックされた時のイベントハンドラを「onclick」といいます。 イベントハンドラは次のようにH…

オブジェクトとは ブラウザのウィンド、フォーム、ドキュメントなど操作対象となる部品をオブジェクトといいます。 プロパティとは オブジェクトの状態や属性を表します。プロパティは、参照や設定が可能です。 プロパティの参照・設定 windowオブジェクトの…

外部JavaScriptファイルの呼び出し JavaScriptファイルの保存場所は、HTMLファイルとは別に作成しておきます。 複数のページに同じスクリプトを使いたい時に便利です。 ディレクトリー構成top ˪ index.html ˪js（JavaScriptファイルの保存ディレクトリ） ˪sa…

JavaScriptの基本的なプログラムを使って文字を表示するプログラムを書いてみます。 開発環境には、「Eclipse」を利用しています。 簡単なプログラムを作るJavaScriptには、文字列をHTMLに埋め込んで表示する方法とダイアログボックスで表示する方法がありま…