HTML 5＋JavaScriptでCanvasアプリを作る
HTML 5のCanvasを使ってJavaScriptでアナログ時計を作る！ それでは、実際にCanvas要素をJavaScriptから操作して、ブラウザ上で動作するアナログ時計の簡単アプリケーションを作ってみましょう。アナログ時計アプリケーションの完成イメージは図3になります。 このアナログ時計を作っているHTML 5のCanvasを使ったJavaScriptの基本的な考え方は、四角／円を描画する場合と同じです。canvas要素によるマークアップを行い、DOMでそのノード内にJavaScriptでcanvasによる描画をする、といった具合でそれぞれの処理を書いていきます。 完成ファイルを見てみよう！ アナログ時計の完成ファイルはこちらからダウンロードできます（773_3.zip/1.42 KB）の、完成ファイルのソースコードを見ながらHTMLとJavaScriptソースの要点を紹介します
KAYAC Engineers' Blog
こんにちは。グループ情報部の池田（@mashiike）です。 先日の6/25、26に幕張メッセで開催されたAWS Summit Japan 2025に参加してきました。 今年も2日間とも参加しましたが、今年はやはり生成AIが大きな話題となっていました。 さて、AWS Summit Japanといえば、毎年恒例のElastic座布団クッションの配布があります。 今年ももちろんゲットしてきました。そこで、参加レポートという形で、今年のクッションが例年に比べてどうだったのかを考察します。 クッションの変遷 まずは、2023年・2024年のクッションと並べて比較した写真がこちらです。 ３年分のクッション 2023年のクッションには「AWS Summit Tokyo」と書かれています。実は2023年までの表記はJapanではなくTokyoだったんですね。 2024年のときは「おぉ！厚くなってる！」「
jquery.jsを読み解く：第1回 jQueryライブラリ（1～171行目）｜gihyo.jp … 技術評論社
はじめに jQueryとは、John Resigによって開発され、最近非常に注目を集めている Javascriptライブラリです。 JavaScriptとHTMLの対話を劇的に改善し、Ajaxなどにより複雑化してきているWebアプリケーション構築に必要な処理を非常に簡潔に書くことができます。また、ブラウザの種類やバージョンによる違いも吸収してくれるため、プログラマの作業量も減らしてくれます。 本連載では、jQueryライブラリのコードを読みながら、実装として中で何が行われているのかを見ていこうと思います。 想定している読者は、jQueryライブラリをただ使うだけでなく、やっていることを理解したいという方、使われているコードを応用して自分なりの改造をしてみたい方、新たなプラグインを開発したいという方などです。 今回の連載では執筆開始時点の最新版であるバージョン1.2.2を対象としています。説
第1回 Firebugの基礎知識と、Firebugを使った開発のメリット | gihyo.jp
Firefox 3とFirebugで始めるJavaScript開発 第1回Firebugの基礎知識と、Firebugを使った開発のメリット はじめに このたび、Firefox 3＋Firebugについての連載を書かせていただきます、堀と申します。普段は仕事でJavaScriptやPHPを用いたフロントエンドの開発を行いながら、個人でRoppongi.JSという、JavaScriptのイベントの企画・主催をしております。 この連載では、Firefox 3のリリースに備えて、現在提供されているFirefox 3のベータ版とFirebugによるJavaScriptの開発手法について解説していきます。 第1回はFirefox 3ベータ版とFirebugのインストールから、Firebugによって、どのようなことが行えるようになるかについて簡単に概略を説明していきます。 Firebugとは Fir
JavaScript講座 | SMART プログラミングとサイト構築のウェブマガジン
JavaScriptの概要から始まって、フレームワークやオブジェクトなど仕様の隅々まで解説しています。 沢山のサンプルコードとテクニック集もご用意、遠慮なくご利用ください。
JavaScript の基本文法 - とほほのWWW入門
変数や式の型を調べるには、typeof 演算子を用います。 オブジェクト JavaScript はオブジェクト指向というプログラミング上の思想を受け継いでおり、ウィンドウや、ドキュメントやフォーム部品などいろいろなものをオブジェクト（物）として扱います。オブジェクトには以下のようなものがあります。 □ オブジェクト（Object） ├□ シンボル（Symbol） ├□ 数値（Number） ├□ 文字列（String） ├□ 真偽値（Boolean） ├□ 配列（Array） ├□ マップ（Map） ├□ セット（Set） ├□ 数学関数（Math） ├□ 日付（Date） ├□ 関数（Function） ├□ 正規表現（RegExp） └□ ウィンドウ（Window） ├□ ナビゲーター（Navigator） │├□ プラグイン（Plugin） │└□ MIMEタイプ（MimeType）
JSONなんて怖くない！
Copyright © 2004-2025 Impress Corporation. An Impress Group Company. All rights reserved.
予約語一覧
下の表に示した言葉は予約語です。JavaScriptでは、識別子にこれらの名前を付けることはできません。 これらのいくつかは JavaScriptの制御構文で使われています。その他は、将来の機能拡張のために予約されている語です。 abstract boolean break byte case catch char class comment const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import static super switch s
JavaScript : setTimeout
書式 タイマーID = setTimeout(処理, ミリ秒) タイマーID = window.setTimeout(処理, ミリ秒) タイマーID = フレームオブジェクト.setTimeout(処理, ミリ秒) 説明 指定されたミリ秒後に指定された処理を実行します。戻り値としてタイマーIDが返されます。設定したタイマーを解除するにはclearTimeout()のパラメータにタイマーIDを指定します。 サンプルコード [実行] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <script type="te
clearInterval
書式 clearInterval(★) ★＝タイマー変数名 文例 clearInterval(timerID) 上位オブジェクト frames, window 説明 インターバルタイマーをクリアします。インターバルタイマーをクリアするためにはsetIntervalでタイマー変数を指定しておく必要があります。再度タイマー起動させるにはsetIntervalを使用します。 関連 clearTimeout, setInterval, setTimeout サンプル１ サンプル２（Dreamcast用）
setInterval
書式 ★＝setInterval(☆,◆) ★＝タイマー変数名 ☆＝タイマー割り込みで実行される命令または関数名 ◆＝割り込み秒数(1/1000秒単位） 文例 timerID = setInterval('myFunc()', 200) 上位オブジェクト frames, window 説明 インターバルタイマーを設定します。setTimeoutと違い一度割り込み指定をすると定期的に関数を呼び出します。割り込み秒数は１秒が1000になります。0.2秒であれば200になります。 関連 clearInterval, clearTimeout, setTimeout サンプル１ サンプル２（Dreamcast用）
slayeroffice | code | image cross fade redux
Photos © Kevin C. Smith This is a rewrite of a very old experiment. This rewrite uses unobtrusive DOM scripting and semantic markup to achieve its goals, and is somewhat less abusive of the CPU in Firefox. It also works in Safari - the original version was written prior to Safari supporting the CSS3 "opacity" property. Opera doesn't support opacity, so the images will just flip in that browser. Fo
第1回 DOMから始めるモダン・スクリプティングの世界へようこそ
本連載では，DOM（Document Object Model）を使ったJavaScriptの新しいコーディング手法について紹介していきます。 近年，AJAXの台頭をきっかけに，JavaScriptを使ったブラウザのリッチ・クライアント化が進んできました。これまでは，サーバー側のプログラムでページを書き換えることで，ブラウザの表示に変化を与えてきました。しかし，現在では，ページの表示を変化させるだけであれば，ほとんどのことはJavaScriptのみで対処することが可能です。それを実現するのがDOMなのです。 ブラウザのリッチ・クライアント化により，JavaScriptに求められる要求は，複雑さを増すばかりです。本連載では，DOMの基礎を学び，DOMならではのコーディング手法について紹介していきます。 まず，第1回ではDOMとは何なのか，そしてDOMで何ができるのかを解説していきます。 DO
onload属性 onunload属性
Updated 2013.09.30 / Published 2005.10.02 onload属性は body要素に指定した場合はその文書全体の読み込みが完了したときに、frameset要素に指定した場合はフレーム全ての読み込みが完了したときに起動するスクリプトを指定するイベント属性（イベントハンドラ）です。発生タイミングはページ内容の全ての読み込みが完了したときのため、文書内にapplet要素, embed要素, img要素, object要素などによるオブジェクトが埋め込まれていれば、これらオブジェクトの読み込みが終わるまでonload属性のイベントは発生しません。 onunload属性は body要素に指定した場合はその文書が閉じられるときに、frameset要素に指定した場合は全てのフレームが閉じられるときに起動するスクリプトを指定するイベント属性です。文書やフレームが閉じられる
JavaScript Index/メソッド、プロパティ・リファレンス
scollabo.com is coming soon This domain is managed at
JavaScriptのthisキーワードをちゃんと理解する - builder by ZDNet Japan
前回までのおさらいと今回のあらすじ 前回までの記事で、JavaScriptでオブジェクト指向を行うにあたって必要な知識を一通り網羅しました。その中で、オブジェクトに属する関数＝メソッドについても触れました。 今回は、オブジェクトやメソッドと深い関わりのあるキーワード、「this」について解説したいと思います。 thisキーワードについてきっちり理解する 「thisキーワードについてお話しする」と言いましたが、実はthisキーワードは連載中で既に触れています。連載第９回で、このように述べています。 「（thisキーワードは）実行中のコードが「自分自身」を表すオブジェクトにアクセスするためのキーワードです。」 「実行中のコード」とされているのは、関数（メソッド）などの実行可能なコードということです。つまり、thisキーワードはメソッドをメンバに含むオブジェクトを指す、と言って良いでしょう。 例
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
http://www.res-system.com/weblog/item/505
JSLint,The JavaScript Code Quality Tool
getElementByIdメソッド