すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
jQueryのanimateを使ったアニメーション
今回はjQueryのanimateを使って、要素をアニメーションさせる方法を試してみようと思います。 本当はCSSのアニメーションだけで済めば良いのですが、特にIEを考えると難しいところです。そこでjQueryを使っての基本的な方法をおさらいしておきたいと思います。 書き方 まずanimateの書き方ですが、このような感じ。 animate(params, [duration], [easing], [complete]); animate(params, options); 2通りありどちらの書き方でも動きます。 1つめの書き方はそれぞれ引数を指定する方法で、2つめは連想配列で指定できるようになっています。今回は2つ目の連想配列の方法で説明していきます。 params ここには、アニメーションさせたいスタイルを書きます。 $('#btn01').click(function(){ $('
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
実践しながらjQueryを学べるオンライン学習サイト・Try jQuery - かちびと.net
実際にコードを書いて学べる学習コンテンツ・Try jQueryのご紹介です。jQuery公式のオンライン学習サイトっぽいですね。英語ですけどこれから学ぼうという方にはうってつけかもしれません。 実践でjQueryを学べるサイトです。スライドも完備されています。英語が苦手な方にはちょっと難しいかもですけど・・ ドメインから察するに公式のものでいいと思います・・確認はしていませんけど。内容は基本的なものからスタートします。 スライドからスタートです。 他の学習サイト同様、指示通りに進めていきます。 正解ならSuccess!の文字が出て次に進みます。 これから始めたい、という方は如何でしょうか。 Try jQuery
[JS]スクロールに追従するページの先頭へアニメーションで戻るボタンが簡単に設置できるスクリプト -scrollUp
HTMLは一切変更せずに、スクロールに追従するページの先頭へ戻るボタンが簡単に設置できるjQueryのプラグインを紹介します。 デモページ：タブ scrollUpの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.scrollUp.js"></script> デザインをそのまま使用する場合は、スタイルシートもテーマごとに用意されています。 <link id="scrollUpTheme" rel="stylesheet" href="css/themes/link.css"> <li
jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します｜Webpark
jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー１<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー１</a></li> <li><a href="#">サブカテゴリー２</a></li> <li><a href="#">サブカテゴリー３</a></li> </ul> </li> <l
JavaScriptのライブラリを沢山集めてカタログ化しているWebサイト・Jster - かちびと.net
JSライブラリのまとめサイトの ご紹介。既知の方も多いかもし れませんが、探すのに便利なの で改めてご紹介します。カテゴ リ分けもしてくれているので探 しやすいです。 様々なJSライブラリがまとめられています。探し物がある際は覗いてみるといいかも。 UIやメディア、グラフィック、ユーティリティなどのカテゴリに分けられています。現在は900ほどのライブラリがまとめられています。 シンプルで探しやすいのではないかと思います。ライブラリはそれぞれ簡単な説明もしてくれています。 パッと見たところ、評価の高い印象のライブラリに絞ってくれている・・・気がしました。（気がするだけかも 困ったら覗いてみようと思います。 Jster
jQuery で実現する パララックス効果をヒントにしたシンプルで新しいスクロール背景 - こじょらぼ
背景画像のトップとボトムが、ページのトップとボトムと一致するように、 ページの長さに応じてスクロール量が変化する背景を設定する方法です。 ページのスクロールとは独立して(ページの縦幅に関係なく)、背景は背景画像の高さ(height)までしかスクロールしません。 ちょっと前から主流の fixed や、伝統の scroll に並ぶ、 新しい種類の背景(background-attachment)と言えるのではないでしょうか！ 特徴 繰り返さない一枚絵の美しさと、ユーザーの操作に応えるインタラクションを兼ね備えています。 パララックス効果を使った背景よりもシンプルです。 実装もシンプルで比較的 簡単です。 サンプルページ 当ブログのトップページがサンプルです。 コンテンツのスクロール量と、背景のスクロール量に注目。 スクロール バーでスクロールさせると、滑らかで分かりやすいかも知れません。 続き
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
自動でリピート再生するYoutube動画を背景全体に指定出来るjQueryプラグイン・jquery-tubular - かちびと.net
Webサイトの背景をリピート再生するYoutube の動画にしてしまおう、というjQueryプラグイン ・jquery-tubularのご紹介です。なかなか斬新 では無いかなと思います。ユニークなサイトを 作る際に参考にしたいですね。導入も極めて 簡単なのでぜひチャレンジしてみてください。 jQuery使うといろいろ出来るんですねぇ。スキルの低い僕にとっては、こうしてソースを提供してくれるのがとてもありがたいです。ライセンスはMITとのことですので、商用でもOKですね。 [note]かなり適当ですけどWordPressのテーマにしたのでご興味有りましたら遊んでみてください。[/note] このように背景全体にYoutubeの動画を使うことが出来るプラグインです。ユニークでインパクトもありますね。導入も非常に簡単です。 サンプル作った 面白かったので暇を見て適当にデモサイトを作ってみました。
[JS]かなりかっこいいアニメーションを使ったスライドショーを実装するチュートリアル
スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。 Slideshow with jmpress.js [ad#ad-2] デモ 実装 デモ まずは、そのダイナミックな3Dのアニメーションをご覧ください。 スライドは5枚あり、それぞれアニメーションが異なります。 デモページ：別レイアウト 実装 実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。 紹介記事はこちら。 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js HTML jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。 実装は一枚の広大なカンバスとなるルート（section要素）に、各パネル（div要
ブラウザベースのjQuery Mobileアプリ開発環境「codiqa」と「Application Craft」
jQuery MobileなどのすぐれたJavaScriptフレームワークの登場で、HTML5とJavaScriptを組み合わせたWeb標準によるモバイルアプリケーション開発が普及し始めています。 この記事では、Web標準によるアプリケーション開発をさらに簡単にしてくれる、WebブラウザベースのjQuery Mobile対応モバイルアプリケーション開発環境「codiqa」と「Application Craft」の2つを紹介しましょう。 Codiqa～jQuery Mobileアプリのモックアップがすぐ作れる モバイルデバイス対応のアプリケーションを開発するときに手間がかかるのが、小さい画面でも使いやすいユーザーインターフェイスの構築です。モックアップを作り、使い勝手を試す必要があります。 先月公開が始まった「codiqa」は、そのモックアップを手軽に、Webブラウザ上でドラッグ＆ドロップす
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
JavascriptでHTMLをインクルードする方法 | My Color 「ダンクハーツ-谷春樹Blog-」
一度制作したWebサイトの更新のしやすさを向上するために、プログラムのインクルードを利用して「サイドメニュー」や「ヘッダー」をテンプレート分けしている人も多いと思います。 簡単にHTMLをインクルードする方法として、phpが利用できるサーバーであれば<?php include"ファイル名" ?>と記述したり、SSIが利用できるのであれば<!--#include file="header.html" --> と記述する方法があります。 今回、phpもSSIも利用できないサーバーでサイトのパーツをテンプレート化できたらなぁ・・といろいろ探していたらついに発見！ Javascriptを利用してHTMLのインクルードを実現している方法があったのでご紹介。 参考サイトは「Displaying source code with Ajax」 上記のサイトで配布している、Ajaxフレームワークの「jq
超カッコいい確認ダイアログをjQueryで実装するチュートリアル:phpspot開発日誌
How to Create a jQuery Confirm Dialog Replacement | Tutorialzine 超カッコいい確認ダイアログをjQueryで実装するチュートリアル 普通、ダイアログというと javascript の confirm とか、その他 jquery プラグインを使って実装されるものが多いですが、これまで見たなかでもかなりのカッコよさのダイアログ実装チュートリアルです。 サンプルのダウンロードも可能。 一見全て画像のようにも見えますが、CSS3を使って綺麗にデザインされています。 ここら辺もこだわりたいという方は参考にしてみるとよさそう。 関連エントリ 効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」 その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近公開されたjQueryスライドショープラグインいろいろ