Ajax（エイジャックス）とは？ 参考サイト Ajax（エイジャックス）とは？ JavaScriptからサーバーとの通信を行い、ページの動的な書き換えを行います。Asynchronous JavaScript + XMLの略でAsynchronous＝非同期通信を指します。 参考サイト QiitaでAjaxや非…

focusメソッド blurメソッド change 下記のようなテキスト入力欄やセレクトボックスがあったとします。このようなフォームで使えるイベント をいくつか見ていきます。 <input type="texat" id="name"><select id="members" name="members"> <option>a</option> <option>b</option> <option>c</option> </select> focusメソッド テキスト入力欄などにフォーカスがあたった際のイベントを指定で…

本記事で作成する見出しについて 手順 どんなコードをデザインCSSに貼り付ければよいか？ はてなブログの見出しのタグについて！ もっとおしゃれな見出しにしたい はてなブログの見出しですが、デフォルトの表示が少し見づらく感じますので罫線やカスタマイ…

click mouseover mouseout mousemove クリックイベントなどを扱う方法について見ていきます。 click クリックしたときのイベントを設定できます。下記はクリックしたときにhiと表示する例です。 $(function(){ $('#box').click(function(){ alert("hi!"); })…

視覚効果（エフェクト） hideメソッド showメソッド fadeOut fadeIn toggle コールバック関数 視覚効果（エフェクト） jQueryでは視覚効果（エフェクト）を使うことができます。代表的なものについて記載します。なお、例では下記ボックスに対して視覚効果を…

before、afterメソッド beforeの場合 afterの場合 insertBefore/insertAfterメソッド insertBefore insertAfter prepend/appendメソッド prepend append prependTo/appendToメソッド prependTo appendTo jQueryでは要素を追加することができます。 before、a…

textメソッド htmlメソッド valメソッド removeメソッド emptyメソッド jQueryではタグの中身を操作するメソッドがありますのでいくつか見ていきましょう。 textメソッド テキストの内容を設定、取得するメソッドです。例えばｐ要素のテキストの内容を書き換…

css メソッド addClass、removeClassメソッド attrメソッド css メソッド CSS に関する値の設定をする場合は css メソッドを使います。また、メソッドチェーンを使っていくつも設定することができます。 $('p').css('color','red').css('background','blue')…

属性セレクタとは？ 属性セレクタの使い方 属性を指定する記号 = != *= ^= $= 属性セレクタとは？ 例えばHTMLに下記コードがあります。「a」要素の「href」属性が「Google」となっているものを指定することができます。 <p>jQueryの練習</p> <p><a href="http://google.com">Google</a></p> <p><a href="http://yahoo.co.jp">Yahoo</a></p> <p><a href="http://bing.com">bing</a></p> 属性…

メソッドを使った要素指定 使い方 メソッドを使った要素指定 下記のメソッドを使いDOM要素を指定することができます。 parent() 親要素を指定 children() 子要素を指定 next() 次の要素を指定 prev() 前の要素を指定 siblings() 兄弟要素を全て指定 使い方 …

主なフィルタについて 例えば下記のHTMLコードがあったとします。 <ul id="sub"> <li>3-0</li> <li>3-1</li> <li class="item">3-2</li> <li class="item">3-3</li> <li>3-4</li> </ul> この中で上から３番目のli要素を選択したいといった場合、jQueryでは下記のセレクタ記法を使うことができます。 $("#sub > li:eq(2)" ).css("color" , "red"); eq(2)…

HTML要素の指定方法 idの指定方法 classの指定方法 特定の要素の指定方法 jQueryではHTML要素、id、classの指定方法がそれぞれ異なります。どのように指定すればよいか見ていきましょう。 HTML要素の指定方法 「$("")」に「p」や「h1」などそのままHTML要素…

jQueryって何？ 公式サイト 学習に必要な知識 学習に必要なツール jQueryの読み込み方 ・公式サイトからjQueryをダウンロードして使用する。 ・Google、Microsoft、jQueryなどがサーバー配信しているものを使用する。 jQueryの書き方 セレクタとメソッド メ…

何かボタンをクリックする度にページ内の要素を書き換えることができます。 まず、ボタンを配置します。 <button id="add">Click!</button> document.getElementById('add')で button を取得し、 addEventListenerでイベントを割り当てます。addEventListenerは第 1 引数にはイベントの…

DOMとは？ ツリー構造について ｐ要素を書き換える 新しく要素を作る ①要素の追加 ②テキストノードの作成 DOMとは？ DOM（ドム）とは「Document Object Model」の略です。Document にアクセスするための色々な命令のことです。 ツリー構造について Chrome De…

手順 IMEが無効ですとなっている場合 Windows10で作業をしている際、半角全角を切り替えていると下記の画像の表示出てきませんか？ この機能は私的にはこれはちょっと・・・って感じです。そのため、非表示かする方法をまとめました。 手順 ①［IMEのオプショ…

独学で学ぶ際の学習系サイトや情報収集サイトを紹介します。 学習系サイト Progate（プロゲート） オンラインでプログラミングを学べるサービスで筆者も使用しています。内容については初心者向けで基礎から学べます。無料版では約１７講座レッスンを受けら…

オブジェクト プロパティ プロパティへのアクセス 値の書き換え オブジェクトのメソッド this 組み込みオブジェクト String オブジェクト 代表的なプロパティ、メソッド length replace substr 文字列リテラル Arrayオブジェクト 代表的なプロパティ、メソッ…

配列の宣言 添字 要素の書き換え 2次元配列 配列の宣言 配列とはグループ化されたデータとなります。大括弧でカンマ区切りでデータを書いてあげればOKです。また、数値だけではなく文字列を入れることができます。

setInterval と setTimeoutとは？ setInterval と setTimeoutの構文 setIntervalの使い方（例） setTimeoutの使い方（例） setInterval と setTimeoutの使い分け setTimeout で繰り返し処理をする方法 setInterval と setTimeoutとは？ JavaScript では setI…

関数とは？ 基本的な構文 関数を呼び出す方法 引数を指定する 「return」とは？ ローカル変数 無名関数、匿名関数 即時関数 関数とは？ 複数の処理をまとめて名前をつけたもので、プログラミングでは同じような処理を繰り返し書くようになるが、このような場…

promptについて 基本構文 使用例１ 使用例２ promptについて JavaScriptには入力ダイアログを表示させるpromptというコードがあります。 基本構文 prompt("表示させたい文字列") 使用例１ var name = prompt("お名前は？"); console.log(name); ※prompt では…

confirmについて 基本構文 使用例 confirmについて JavaScriptには［OK］と［キャンセル］のダイアログを表示させるconfirmというコードがあります。 基本構文 confirm("表示させたい文字列") 使用例 var answer = confirm("●●してもよいですか？"); console…

alertについて 基本構文 使用例 alertについて JavaScriptには「警告」や「メッセージ」のアラートダイアログを出すalertというコードがあります。 基本構文 alert("表示させたい文字列") 使用例 alert("hello"); ※下記画像のようにHelloと記載されたアラー…

ループ処理（for文） ジャンプ文 (breakとcontinue) ループ処理（for文） for文の構文は下記となります。 for (初期値; 条件式; 増減式) { 繰り返し処理} ・初期値 – はじめに処理をおこなう値・条件式 – 繰り返し処理をおこなうかどうかの判断・増減式 – 処…

ループ処理（while文） ループ処理（do ... while文） while文とdo ... while文の違い ループ処理（while文） while文の構文は下記となります。条件が「真」である間は「繰り返し処理を続けなさい」という処理となります。 while (条件式) {繰り返し処理} 下…

条件分岐（switch文） switch文の補足説明 条件分岐（switch文） switch文の構文は下記となります。 switch (式) { case 値: 処理１ break; case 値: 処理２ break; default: 処理３ switch文の補足説明 ①最初に「式」をチェックし、次に「値」を見ていきま…

条件分岐 比較演算子 論理演算子 真偽値 条件分岐 if文の構文は下記となります。 if (条件) {真} else {偽} 例えば、scoreが60以上ならOK、それ以外はNGとする場合は下記のような記述となります。 var score = 60;if(score >= 60){console.log("OK");}else{c…

変数 データ型 数値 演算子 ①演算子 ②代入を伴う演算子 var x; x = 10 * 2;x = x + 5; console.log(x); var x; x = 10 * 2;x += 5; console.log(x); ③単項演算子 var x; x = 10 * 2;x = x + 1; console.log(x); var x; x = 10 * 2;x ++; console.log(x); 文…

JavaScriptを書く場所 外部ファイル（*.js）を参照させる コメント・ルール 実行方法 JavaScriptを書く場所 JavaScriptは<script>タグに書きます。<script>タグは<body>タグの直前に書くのが一般的です。 ●index.html <!DOCTYPE html><html lang="ja"> <head> <meta </script>…