JavaScript
プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="ham-btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>
オブジェクトとは、関連するデータや 機能の集合体です。JavaScriptには多くのオブジェクトが用意されています。これを目的別に使っていきます。 documentオブジェクト（ファイル関連のデータを操作する） windowオブジェクト（ウィンドウ関連のデータを操作…
プログラムとは？いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。 プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解し…
フッター要素などにあるコピーライトの記述。サイトによって色々な書き方がありどう書いて良いか迷う所ですが、そもそもコピーライトの記述は絶対に必要なものでは無く、記述しようがしまいが、日本では著作物は法律でちゃんと守られます。それでも何となく…
非常に便利なGoogle Formですが、デフォルトの状態だと「送信ボタン」をクリックした後の動きが若干解り難いです。 お問い合わせフォームでは「送信ボタン」をクリックした後、「完了画面」にページ遷移する形が一般的です。 Google FormもJavaScriptなどで…
Cookie（クッキー）とは？ Cookie（クッキー）とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…
プログラムとは？いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。 プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解し…
ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。 各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします…
JavaScriptで乱数を取得したい場合には「random関数」を使います。 覚えるメソッド Math.random Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.floor()は、小数点…
JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当…
フェッチ 【 fetch 】とは ソフトウェアやネットワーク通信の分野では、データなどの受信側・需要側が(送信側・供給側から送られてくるのを待つのではなく)能動的に読み出しに行く、相手に送信するよう要求する、といった意味合いでフェッチという用語が用い…
var box = document.getElementById("box") fetch("logo2.svg") .then(function(response) { return response.text(); }).then(function(svg) { box.innerHTML = svg })
サイト制作を通して、プラグインに頼らず自身でJavaScript・jQueryを打てるようになりたい！と思った人も多いと思います。 あまりコストをかけずにJavaScriptを学びたい人にとっては、やはりオンラインサービスを使うのが良いかもしれません。 今は無料で便…
FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見…
Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。簡単に言い換えるとhtmlの各要素、たとえば「p」とか「img」といった要素に直接アクセス…
一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます。 手間のかかる処理を関数として定義しておけば、必要なときに必要なだけ何度も呼び出すことができます。関数は、function文を使って定義する。 定義した関数を実行するときは、関数名…
前回やった「jQueryのclickイベントを使ってtransformを適用させる」を応用し、ボタン自体にアニメーションを追加させてみましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <title>線を動かす</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { $('.btn').on('click', function…</meta></head></html>
イベントとは？ イベントとは，ブラウザ上で発生した出来事全般のことを表します。例えばブラウザに表示された画像をマウスをクリックしたり、テキストボックスに文字を入力するといったように，閲覧者が何か操作したときにイベントが発生します。またHTMLが…
イベントとは？ イベントとは，ブラウザ上で発生した出来事全般のことを表します。例えばブラウザに表示された画像をマウスをクリックしたり、テキストボックスに文字を入力するといったように，閲覧者が何か操作したときにイベントが発生します。またHTMLが…
JavaScriptには色々な演算子がありますが、まずは基本となる加算 (+)、減算 (-)、乗算 (*)、除算 (/) の四則演算をしっかり覚えましょう。 足し算 var a = 10 + 20; document.write(a) 引き算 var a = 10 - 5; document.write(a) 掛け算 var a = 5*4; docume…
JavaScriptの必要性 現在のWeb制作においてJavaScriptは、HTML・CSSと密接に関わっていて、プログラマーはもちろん、デザイナー志望の人も覚えておくべきプログラム言語です。 今までプログラムに接してこなかった人にとっては敷居が高く感じますが、まずは…
index.html <html lang="ja"> <meta charset="utf-8"> <title>Javascriptによる画像置換２</title> <link href="reset.css" rel="stylesheet"> </head> <body> <ul> <li><img src="img/01.png" alt="" name="mainImage"></li> <li class="thum"></li></ul></body>
インクリメント演算子とデクリメント演算子にはそれぞれ前置と後置の二種類が用意されています。 インクリメント演算子の前置きと後置きは次のようになります。 前置: ++変数 後置: 変数++ 前置であっても後置であってもインクリメント演算子は対象の変数の…
一つのfor文（ループ）の中に、さらにfor文を入れることができます。 もちろん入れ子の深さを二重、三重、...と深くしていくことも可能です。 これらをまとめて多重ループと呼びます。 ここでは、for文による二重ループを使って、九九の表を表示するプログラ…
