WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

JavaScript

JavaScriptをオンラインで学習する

サイト制作を通して、プラグインに頼らず自身でJavaScript・jQueryを打てるようになりたい!と思った人も多いと思います。 あまりコストをかけずにJavaScriptを学びたい人にとっては、やはりオンラインサービスを使うのが良いかもしれません。 今は無料で便…

無限スクロールの導入

FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見…

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

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

関数の使い方

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

random関数

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

ボタンにアニメーションを追加する

前回やった「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の基本的なメソッドの使い方を覚える

JavaScriptの必要性 現在のWeb制作においてJavaScriptは、HTML・CSSと密接に関わっていて、プログラマーはもちろん、デザイナー志望の人も覚えておくべきプログラム言語です。 今までプログラムに接してこなかった人にとっては敷居が高く感じますが、まずは…

onClickによる画像置換

index.html <html lang="ja"> <meta charset="utf-8"> <title>Javascriptによる画像置換2</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文を入れることができます。 もちろん入れ子の深さを二重、三重、...と深くしていくことも可能です。 これらをまとめて多重ループと呼びます。 ここでは、for文による二重ループを使って、九九の表を表示するプログラ…