ひさしぶりに『簡単なWEBサイトが作りたいな』と、ふと思いつきました。 どうせなら動的なページにしたいけど、短時間でサクッと完成させたくもあり、 JavaScriptで作ることにしました。 小さく作成して、少しずつパワーアップさせていき、 最終的にはそこそこの仕組みができたらなあと思います。 また、いきなり凝ったものを作り始めると、 完成させるのに時間がかかり、途中であきてしまうから・・・。 作りたいWEBページのイメージ画像 今回のWEBサイトに必要な機能 画面遷移すること 4択のクイズ問題を表示すること 合計10問くらい出題すること 得点を計算して、最後に発表すること 今回のWEBサイト作成に必要な知識 HTML （基礎的なレベル） CSS　（わからないところをWEBで調べながらで十分） JavaScript　（これも、WEBで調べながらで十分） 完成した今回のWEBサイト作成 漢字の

TECH::CAMPでプログミングを学ぼうTECH::CAMPとはこんな人におすすめ・学校では学べない実践的な技術力を身に付けたい方・独学ではモチベーションの維持が難しいという方TECH::CAMPの概要TECH::CAMPとは最短1ヶ...

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

ドットインストール代表のライフハックブログ

ポルトガルのオープンソースプロジェクトインキュベーター、Indigo UnitedがJavaScriptでPHPやJavaのようなオブジェクト指向プログラミングを可能にするためのライブラリ「dejavu」を公開している。PHPやJavaでのオブジェクト指向プログラミングに慣れ親しんだ開発者がJavaScriptに移るのを支援するという。 JavaScriptのプロトタイプ型継承はパワフルで柔軟性があるが、オブジェクト指向プログラミングを利用する開発者にとって移行は簡単ではないという問題に着目、dejavuはこれを解決するためのJavaScriptライブラリとなる。 dejavuを利用することで、JavaScriptでクラス機構やインターフェイス機構、Mixin、静的メンバ、PrivateとProtectedメンバ、定数、コンテキストバインド、メソッド署名検証などが利用可能となる。requi

スマホ向けサイト制作の実装＆使えるTips10選：jQuery Mobileでスマホ向け企業サイト構築（3）（1/4 ページ） まだjQuery Mobileを触ったことのないWeb制作者向けに、基本的な利用方法を学びながら、jQuery Mobileを使った簡単な企業サイトの構築の仕方を解説していきます。今回は、画面遷移の制御、アイコン表示、ナビゲーションバー、検索フィルタ、基本的なHTMLスタイル、固定ポジションモードなどを紹介します jQuery Mobileでスマホ向けサイト制作は、こんなに簡単にできる 前回の第2回「触りながら覚えるスマホ向け企業サイト設計の基礎知識」では、サイトの基本構造についての説明と、トップページのコーディングに合わせてヘッダ、フッタなどのツールバー、リストビューコンポーネントを紹介しました。 新年1発目となる本連載の第3回はお知らせページの作成を進めつつ、

JavaScriptテストの基礎知識と使えるフレームワーク6選：フレームワークで実践！ JavaScriptテスト入門（1）（1/3 ページ） しっかりとJavaScriptの“テスト”を行うために、最近のJavaScript事情やテストを取り巻く環境、今注目のテストフレームワークを6つ紹介する JavaScriptでもテストを書こう ＠ITの読者の方たちのほとんどは、どのような言語を主に利用しているのかなどの違いはあるにせよ、日常的にプログラムを書いている方たちが多いかと思います。 アプリケーションを作る、ライブラリを作成する、オープンソースプロジェクトに貢献するなど、皆さんがプログラムを書く場面はそれぞれいくつかあるはずです。それらプログラムを書く場面に共通して大切な習慣の1つとして、「作成するプログラムに対しては必ずテストコードを書く」ことがあるのは、誰にでも同意してもらえることでし

クライアントもサーバも！ Webアプリ開発言語Dartとは 今回は、プログラミング言語「Dart」を紹介します。 Dartは2011年にグーグルが発表したプログラミング言語です。「Dart: Structured web apps」で情報が公開されています。今後のWebアプリ開発のトレンドを見極めるうえでも、1度はチェックしておきたいプログラミング言語でしょう。 DartはJavaと同じクラスベースのオブジェクト指向言語です。JavaScriptがターゲットとする分野と同じくWebアプリ開発向けのプログラミング言語です。 「構文スコープ（lexical scoping）」「クロージャ（closures）」「オプショナル静的型（optional static typing）」といったJavaにはない機能をサポートしています。Webアプリを開発しやすい言語を目指しており、クライアントサイドもサ

imgAreaSelectは画像の切り抜きに役立つ範囲選択機能を提供するjQueryライブラリです。 ユーザにアップロードされた画像の一部を切り出してアイコンに使うと言ったような操作はよくあります。そんなUIをjQueryを使って実現するのがimgAreaSelectです。 一例です。 選択されていない場所はグレーになるので分かりやすいです。 各ポイントの数値が取れます。 imgAreaSelectではユーザが縦、横の長さを自由に変更できる他、比率固定でサイズを変更したり、あらかじめ決められた場所に選択範囲を置くと言った指定ができます。切り抜く箇所や大きさの値が受け取れるので、後はサーバサイドで切り抜き処理を行えば良いでしょう。 imgAreaSelectはjQuery/JavaScript製のオープンソース・ソフトウェア（GPL/MIT License）です。 MOONGIFTはこう見る

Sketch.jsはCanvasを使ったWebベースのイラストソフトウェアです。 Web上でお絵描きをしようと思ったらCanvasタグを使うのが良さそうです。そのためチュートリアルとしても役立ちそうなのがSketch.js、超シンプルなお絵描きソフトウェアです。 中央に真っ白なキャンパスがあります。 マウスで書けます。 こちらは色や太さを指定できるようにしたサンプルです。 さらに画像での出力機能付き。 間違えて書いてしまった場合も… 消しゴム機能で消せます。 iPhoneでも書けるのですが、2回目を書くと1回目の線が消えてしまいました。 使い方は簡単で、data-downloadでダウンロード機能、data-sizeで太さ、data-colorで色、data-markerでマーカー、data-eraserで消しゴム機能を提供します。つまりUIについてはかなり広くカスタマイズができるようです

新しく書き直した。 以前のバージョンと全然互換性がなくて申し訳ないのだけど、可読性とかかなり使い勝手が良くなっていると思います。ライブラリ自体のコードも分かりやすくなっているはず。 http://mohayonao.github.com/timbre.js/ Chrome, Safari, Firefox あと node.js で使えます。 あとついでに SuperCollider みたいな関数を集めたものも用意しました。 http://mohayonao.github.com/subcollider.js/ timbre.js と合わせてアルゴリズム的なものを作るのに使えます。 デモ どういうことができるのかは簡単なデモで確認できます。 http://mohayonao.github.com/timbre.js/beatbox.html http://mohayonao.github.c

アンダース氏が設計した新言語による次世代JavaScript開発とは？：特集：TypeScript（プレビュー版）概説（前編）（1/3 ページ） 「Turbo Pascal」「Delphi」「C#」と聞けば、ある、すご腕の開発言語設計者が最初に思い浮かぶ。その人物の名は「アンダース・ヘルスバーグ（Anders Hejlsberg）」、1996年にボーランド社からマイクロソフトに移籍し、現在はC#やVB（Visual Basic）などの言語設計に携わる有名な開発言語アーキテクトだ。 アンダース氏が作る開発言語の特徴は、言語仕様がオブジェクト指向ベースで明確なので「チームによる大規模開発」にも対応しやすいだけでなく、開発ツールによる支援機能も考慮されているので「開発生産性」にも非常に優れていることだ（と筆者は考える）。またアンダース氏は、最先端のプログラミング言語をよく研究しており、各種言語の

CoffeeScriptは、JavaScriptのコードを生成するためのコンパクトなスクリプト言語です。JavaScriptの言語仕様から、あいまいさやわかりにくさを排除した仕様を持っているので、JavaScriptよりもシンプルなコードで処理を記述できます。JavaScriptで複雑な処理を記述したり、大規模なアプリケーションを開発したりする必要があるときに適しています。 目次 千葉県鎌ヶ谷市在住のライター。自著・監修の書籍が100冊達成まであと1冊になりました。だからなんだというわけでもないのですが、ひとつの区切りということで(^^;。 これからも、少しでも役立つ書籍、記事を書いていきたいと思いますので、どうぞよろしくお願いいたします。ホームページ：サーバサイド技術の学び舎 - WINGS

jsdo.it にある色々なコードを勉強がてら tmlib.js で作りなおしてみました. せっかくなので作ったコードを紹介したいと思います. っとその前にプログラミングを学んでいる方向けに, 車輪の再発明×jsdo.it の良さについて軽く書きたいと思います. Table of contents 車輪の再発明って？ 車輪の再発明×jsdo.it サンプル Hexagon Phase 2 – tmlib.js version Fire Effect – tmlib.js version Water Effect – tmlib.js version Ice Effect – tmlib.js version 車輪の再発明って？ 車輪の車輪再発明とは, 既存のものをまた改めて作ることを言います. 新たな付加価値がないことから良いニュアンスで使われることはあまりありません. ですが, プログラ

JavaScript に関するリファレンスを提供するサイト

This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.