JS勉強中

こんにちは！ 本日は洗濯日和ですね。 Chapter6-3 空き席状況をチェック 今回はAjaxとJSONです。 data.json script.js Ajax 通常のブラウザからのリクエストをJavaScriptが代わりに行う仕組みのこと。 非同期通信と言い、ページ全体ではなく一部のみを書き換えることが可能となります。 Ajaxの基本形 $.ajax({url: 'data.json', dataType: 'json'}) .done(function(data) { データがダウンロードできたときの処理 }) .fail(function() { データがダウンロードできなかったときの…

こんにちは！ サッカーの試合がある日はワクワクします。 chapter6-2 ドロワーを作ってみよう 今回はメニューが端から出てくる動きです。 HTML や CSS は動きに関係している部分のみ抜粋します。 index.html special.css script.js hamburger をクリックしたら、wapper と nav に showクラスが設定されます。 その結果、画面全体が左にスライドしています。 コード自体は前回までの内容ですね。 Java Script は HTML要素のクラスを設定したり削除したりで使うことを意識しましょう。 ではでは。

こんにちは！ 関西の梅雨入りはまだかな？ Chapter6-1 開閉するナビゲーションメニュー 今回はjQueryを扱っていきます。 index.html 今は hidden クラスの設定でリストが隠れています。 これを開閉できるようにします。 script.js jQuery Java Script のオープンソースのライブラリです。 典型的な処理を描きやすくしてくれる便利なものです。 $(document).ready(function(){ ...省略 }); HTMLが読み込まれたら処理をします、という最初の文言です。 $('セレクタ') 要素を取得するメソッドです。 $()で取得した…

こんにちは！ 夜なのに「こんにちは！」は前職の名残ですね。 Chapter5-5 スライドショー スライドショー、響きがいいですね。 script.js 調べながらでもここまで動かせると気持ちがいいですね。 script.js 真ん中にページ数を表示しました。 script.js 事前にロードしておくプリロードを追記しました。 残すは後2章、旅の終わりは近づいています。 ではでは。

こんにちは！ 焼き菓子を買いに行きたくなってきた。 Chapter5-3 プライバシーポリシー承認パネルを作る 今回は cookie の扱いがメインです。 script.js 9行目に ; が抜けていた。。。 js-cookieライブラリ ライブラリとは補助プログラムのことで、定型的な文章などを肩代わりしてくれる機能です。 Cookies.getやCookies.setなどが当てはまります。 script.js クッキー削除にはCookies.removeを使用しました。 最後に、パネルの削除を実装します。 script.js remove.Child(削除する要素)を用いて、指定した子要素を…

こんにちは！ 気分が乗らない時は思い切って休むに限る。 Chapter5-2 プルダウンメニューで指定ページへ 要素の新しい取得方法を学びます。 index.html script.js プルダウンメニューを作成し、ページ移動をさせています。 現状では日本語ページに戻れず、選択されている項目も見た目での変化がありません。 新しい知識を用いて解決していきます。 index.html html タグに lang 属性を追加しました。 script.js document.querySelector('CSSセレクタ') 今まではid属性から要素を取得していました。 この querySelector…

こんにちは！ 応用内容に入っていくので、コードを書く量も盛り沢山です。 Chapter5-1 カウントダウンタイマー 今回はDateオブジェクトを使用してのカウントダウンタイマーの作成です。 script.js まず変数 goal で今日の最後の時間を設定しています。 goal を countdown ファンクションに代入して計算を行なっています。 HTMLに書き出していきます。 script.js 残りの時間を取得することができました。 次に、タイマーとして表示できるようにします。 script.js setTimeout 待ち時間後にファンクションを一度だけ実行するメソッドです。 今回は1…